/* =========================================================
   1. GLOBAL THEME VARIABLES
   ========================================================= */
:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;
    --accent-color: #00c853; 
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --border-color: #333333;
    --input-bg: #2a2a2a;
    --hover-bg: #252525;
    --sent-theme-btn:#3b82f6;
    --logout-btn:rgb(181, 12, 12);
    --logout-bg:#1e1e1e;
    --logout-border:rgb(158, 0, 0);
}

[data-theme="midnight"] {
    --bg-color: #0a192f;
    --card-bg: #112240;
    --text-primary: #e6f1ff;
    --text-secondary: #8892b0;
    --border-color: #233554;
    --accent-color: #64ffda;
    --input-bg: #0a192f;
    --hover-bg: #1d2d50;
    --sent-theme-btn:cyan;
    --logout-btn:rgb(181, 12, 12);
    --logout-bg:#112240;
    --logout-border:rgb(158, 0, 0);
}

[data-theme="light"] {
    --bg-color: #f4f4f5;
    --card-bg: #ffffff;
    --text-primary: #18181b;
    --text-secondary: #8ba9e4;
    --border-color: #d4d4d8;
    --accent-color: #3b82f6; 
    --input-bg: #ffffff;
    --hover-bg: #e4e4e7;
    --sent-theme-btn:#3b82f6;
    --logout-btn:rgb(181, 12, 12);
    --logout-bg:#ffffff;
    --logout-border:rgb(158, 0, 0);
}

[data-theme="latte"] {
    --bg-color: #eefaeb;
    --card-bg: #ffffff;
    --text-primary: #23451f;
    --text-secondary: #7bb593;
    --border-color: #cde6cc;
    --accent-color: #06d945; 
    --input-bg: #ffffff;
    --hover-bg: #d6f3dd;
    --sent-theme-btn:#06d945;
    --logout-btn:rgb(181, 12, 12);
    --logout-bg:#ffffff;
    --logout-border:rgb(158, 0, 0);
}

/* =========================================================
   2. THEME ENFORCERS (Overrides hardcoded dark JS/HTML colors)
   ========================================================= */

/* Navbar & Profile Pill */
.user-profile {
    background: var(--card-bg) !important;
    border-color: var(--accent-color) !important;
}
.user-profile span, .nav-label {
    color: var(--text-primary) !important;
}

/* Inputs, Selects, & Textareas */
input, select, textarea {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Calendar Grid (Fixes hardcoded JS backgrounds) */
.day-cell:not(.empty), .day:not(.empty), .calendar-day:not(.empty) {
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
}
.day-cell.empty, .day.empty, .calendar-day.empty {
    background: transparent !important;
    border: none !important;
}
.date-number, .day-number {
    color: var(--text-primary) !important;
}

/* Tab Toggles (Calendar / Stats) */
.view-toggles {
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
}
.view-toggles a {
    color: var(--text-secondary) !important;
}

/* History Logbook (Fixes hardcoded JS strings) */
#history-list li {
    background: var(--card-bg) !important;
    border-top-color: var(--border-color) !important;
    border-right-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}
#history-list li strong, #history-list li span {
    color: var(--text-primary) !important;
}

/* Account Page Specifics */
#profile-display-card > div, 
#profile-settings-card > form > div {
    background: var(--input-bg) !important;
    border-color: var(--border-color) !important;
}
#profile-display-card span, #profile-display-card p, #profile-display-card strong {
    color: var(--text-primary) !important;
}
button[onclick="logoutUser()"] {
    background: var(--logout-bg) !important;
    color: var(--logout-btn) !important;
    border: 1px solid var(--logout-border) !important;
}
#display-alias, #display-profession, #open-feedback-btn {
    color: var(--accent-color) !important;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
}


.navbar {
    background-color: var(--card-bg);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
    letter-spacing: -1px;
}

/* --- Mobile Hamburger Menu Base --- */
/* --- Mobile Hamburger Menu Base (Image Toggle) --- */
.hamburger-btn {
    position: relative;
    width: 32px;  
    height: 32px;
    display: none; 
    cursor: pointer;
    z-index: 1000;
}

.hamburger-btn img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hamburger-btn .icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5); 
    pointer-events: none;
}

.hamburger-btn .icon-menu {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.hamburger-btn.open .icon-menu {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
    pointer-events: none;
}

.hamburger-btn.open .icon-close {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/*.site-nav {
    display: flex;
    gap: 20px;
}*/

/* --- SMART THEME COLORS (GLOBAL) --- */
.site-nav { 
    display: flex;
    gap: 25px;
    align-items: center;
    --nav-theme-color: #00cc44; /* Default Green */ 
}
.theme-expenses { --nav-theme-color: #ff5252; }
.theme-chat { --nav-theme-color: #00b0ff; }
.theme-schedule { --nav-theme-color:#00b0ff; }

/* --- DESKTOP LAYOUT (Icon above Text) --- */
.site-nav a {
    display: flex;
    flex-direction: column; /* Stacks text perfectly UNDER the icon on laptop */
    align-items: center;
    text-decoration: none !important; /* Removes the purple underline */
    gap: 6px; /* Space between icon and text */
    transition: transform 0.2s ease;
}

/* Base styling for the text */
.nav-label {
    color: var(--text-secondary); /* Clean light grey for inactive tabs */
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

/* Active & Hover states */
.site-nav a.active .nav-label, 
.site-nav a:hover .nav-label {
    color: var(--nav-theme-color) !important; /* Text takes the theme color */
}

/* Make the whole button pop slightly on hover */
.site-nav a.active, 
.site-nav a:hover {
    transform: scale(1.05);
}


.nav-chat{font-size: 1.5rem;
    font-weight: bold;
    color: #005fc5;
    letter-spacing: -1px;
}
.nav-expenses{font-size: 1.5rem;
    font-weight: bold;
    color: var(--expenses-color);
    letter-spacing: -1px;
}
/*.site-nav img {
    filter: grayscale(1) invert(1);
    transition: 0.3s;
    opacity: 0.7;
}*/

/*.site-nav a.active img, .site-nav img:hover{
    filter: grayscale(0) invert(0);
    opacity: 1;
    transform: scale(1.1);
}*/

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    transition: 0.3s;
}

.nav-links a.active {
    color: var(--accent-color);
    background: rgba(0, 200, 83, 0.1);
}

/* --- Layout --- */
.main-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
/* --- Layout --- */
/*.main-content {
    max-width: 1200px;
    margin: 0.5rem auto 2rem auto; 
    padding: 0 1rem;
}*/

.container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

/* --- Sidebar & Form --- */
.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
}

.summary-box {
    background: linear-gradient(135deg, #1b5e20, #00c853);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}

.summary-box p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.summary-box h2 {
    font-size: 2.2rem;
    margin: 0.5rem 0;
}

.add-tip-form {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

input, select {
    width: 100%;
    padding: 0.8rem;
    background: #2a2a2a;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: rgb(255, 255, 255);
    outline: none;
}

/*the hover outline i have to fix*/
/*input:focus {
    /*border-color: var(--accent-color);
}*/

button[type="submit"] {
    width: 100%;
    padding: 1rem;
    background: var(--accent-color);
    border: none;
    border-radius: 6px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

button[type="submit"]:hover {
    background: #009d41;
    transform: translateY(-2px);
}

/*.send-btn{
    width: 100%;
    padding: 1rem;
    background: #00699d;
    border: none;
    border-radius: 6px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.send-btn:hover {
    background: #005783;
    transform: translateY(-2px);
}*/


.send-btn {
    -webkit-appearance: none; /* 📱 FORCES MOBILE TO REMOVE DEFAULT STYLES */
    appearance: none;
    width: 100%;
    padding: 1rem;
    background: #00b0ff !important; /* Forces the bright blue */
    border: none;
    border-radius: 6px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.send-btn:hover {
    background: #008ecc !important;
    transform: translateY(-2px);
}



.calendar-section {
    flex-grow: 1;
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.calendar-header button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: var(--text-secondary);
    font-weight: bold;
    margin-bottom: 1rem;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.day {
    aspect-ratio: 1/1;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 5px;
    font-size: 0.8rem;
    position: relative;
    background: #252525;
}


.hidden {
    display: none;
}

.stats-section h2 {
    margin-bottom: 1.5rem;
}

.chart-container {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}


@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }
    .sidebar, .calendar-section {
        width: 100%;
    }
}





/* --- Calendar Page Specifics --- */

/* Header controls for Month navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

header button {
    background-color: #2a2a2a;
    color: white;
    border: 1px solid var(--border-color);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

header button:hover {
    background-color: var(--accent-color);
    color: black;
}

/* Grid Layout for the Interactive Calendar */
#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 2rem;
}

.calendar-day {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    min-height: 100px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calendar-day:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

.calendar-day.today {
    border: 2px solid var(--accent-color);
}

.calendar-day .day-number {
    font-weight: bold;
    font-size: 1rem;
}

.calendar-day .day-note-indicator {
    font-size: 0.7rem;
    color: var(--accent-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Modal / Popup Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
}

.modal-content {
    background-color: var(--card-bg);
    margin: 10% auto;
    padding: 2rem;
    border: 1px solid var(--accent-color);
    width: 90%;
    max-width: 450px;
    border-radius: 15px;
    box-shadow: var(--shadow);
}

#shiftComment {
    width: 100%;
    height: 120px;
    background: #121212;
    color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
    margin: 15px 0;
    resize: none;
}

.modal-buttons {
    display: flex;
    gap: 10px;
}

.save-btn {
    flex: 2;
    background: var(--accent-color);
    color: black;
    font-weight: bold;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
}

.close-btn {
    flex: 1;
    background: #333;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* History Log Section */
.log-section {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin-top: 2rem;
}

#commentList {
    list-style: none;
    margin-top: 1rem;
}

#commentList li {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

#commentList li:last-child {
    border-bottom: none;
}















/* --- Calendar Layout Structure --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    width: 100%;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    background: var(--card-bg);
    padding: 15px 25px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

header h2 {
    color: var(--accent-color);
    font-size: 1.5rem;
    margin: 0;
}

header button {
    background: #2a2a2a;
    color: white;
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

header button:hover {
    background: var(--accent-color);
    color: #000;
}

/* --- The Grid --- */
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    color: var(--text-secondary);
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

#calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin-bottom: 30px;
}

/* Individual Day Styling (Assuming JS creates these) */
.calendar-day {
    aspect-ratio: 1/1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.calendar-day:hover {
    border-color: var(--accent-color);
    background: #252525;
}

/* --- Modal Styling --- */
.modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Dark dimming */
    backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#shiftComment {
    width: 100%;
    min-height: 120px;
    background: #121212;
    color: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    font-family: inherit;
    resize: none;
}

.modal-buttons {
    display: flex;
    gap: 10px;
}

.save-btn {
    flex: 2;
    background: var(--accent-color);
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn {
    flex: 1;
    background: #333;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* --- History Log --- */
.log-section {
    background: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.log-section h3 {
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--text-secondary);
}

#commentList {
    list-style: none;
}

#commentList li {
    padding: 12px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

#commentList li:last-child {
    border-bottom: none;
}






/* Shared Calendar Day Box Style */
.day-cell, .day {
    aspect-ratio: 1/1;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px; /* Ensures they don't get too small *//********/
}

.day-cell:hover, .day:hover {
    border-color: var(--accent-color);
    background: #252525;
    transform: translateY(-2px);
}

.day-cell.today, .day.today {
    border: 2px solid var(--accent-color);
}

.date-number {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-primary);
}

/* Tip & Off Styles inside the boxes */
.tip-amount {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: bold;
    text-align: right;
}

.day-off-badge {
    background: #d32f2f;
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 4px;
    align-self: flex-start;
    font-weight: bold;
}







.day-empty {
    aspect-ratio: 1/1;
    background: transparent;
    border: none;
    pointer-events: none; /* User cannot click empty slots */
}









.delete-btn {
    background: #ff5252;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: 0.2s;
}

.delete-btn:hover {
    background: #ff1744;
}

#commentList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}









.delete-btn {
    background: #ff5252;
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: 0.2s;
}

.delete-btn:hover {
    background: #ff1744;
}

#commentList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}



















/* --- Chat Layout --- */
.chat-container {
    display: flex;
    height: 70vh;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.chat-sidebar {
    width: 250px;
    border-right: 1px solid var(--border-color);
    padding: 1rem;
    background: #005fc5;
}

.chat-sidebar ul { list-style: none; }

.chat-sidebar li {
    padding: 12px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.chat-sidebar li:hover { background: #003b83; color: black; }

.chat-window {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.chat-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.message-display {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 15px;
    font-size: 0.9rem;
}

.sent {
    align-self: flex-end;
    background: var(--send-btn);
    color: rgb(0, 0, 0);
}

.received {
    align-self: flex-start;
    background: #333;
    color: white;
}

.message-input-area {
    padding: 1rem;
    display: flex;
    gap: 10px;
    border-top: 1px solid #00699d;
}





/* --- New Styles for Stats & Tabs --- */
.hidden {
    display: none !important;
}

.stats-section {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.stats-section h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 300px;
}

.chart-container h3 {
    text-align: center;
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 10px;
}







/* Wrapper to hold charts side-by-side */
.charts-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* Ensure each chart takes up exactly half the space */
.charts-wrapper .chart-container {
    flex: 1;
    min-width: 0; /* Prevents Chart.js from stretching out of bounds */
}

/* On smaller screens, stack them vertically again */
@media (max-width: 900px) {
    .charts-wrapper {
        flex-direction: column;
    }
}











/* Target all links within the navigation list */
.nav-links {
    list-style: none; /* Removes the bullet points */
}

.nav-links a {
    text-decoration: none; /* Removes the underline */
}

/* Optional: Keep the active state styling you already have */
.nav-links a.active {
    color: var(--accent-color);
    background: rgba(0, 200, 83, 0.1);
    text-decoration: none; /* Ensures no underline on active state */
}














/* Vertical Week List */


.week-row {
    display: flex;
    align-items: center;
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    transition: 0.2s;
    cursor: pointer;
}

.week-row:hover {
    background: #222;
    border-color: var(--accent-color);
}

.today-highlight {
    border: 1px solid var(--accent-color);
    background: rgba(0, 200, 83, 0.05);
}

/* Left side: Date Info */
.day-info {
    width: 120px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #333;
    margin-right: 20px;
}

.day-name {
    font-weight: bold;
    color: var(--text-primary);
}

.day-date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Right side: Shift Info */
.shift-container {
    flex-grow: 1;
}

.shift-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
}

.shift-main {
    display: flex;
    flex-direction: column;
}

.shift-main strong {
    font-size: 1.1rem;
    color: yellow;
}

.shift-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.no-shift {
    color: #555;
    font-style: italic;
    font-size: 0.9rem;
    padding-left: 15px;
    
}

/*.delete-btn {
    background: #ff5252;
    color: white;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
}*/








/* Style for the rounded image */



/* Schedule Icon - Rounded Image */
/* Schedule Icon - Rounded Image */
.rounded-image {
    border-radius: 20px !important; /* Keeps your rounded styling */
    object-fit: cover !important; 
    border: 2px solid var(--border-color) !important; 
    box-shadow: var(--shadow) !important; 
    
    /* These two lines force it to align perfectly with the other icons */
    margin: 0 !important;
    float: none !important;
}








/* Fix for the image in style.css */
/*.rounded-image {
    border-radius: 20px;
    display: block;
    margin: 20px auto; /* Centers it under the form 
    object-fit: cover;
    border: 2px solid var(--border-color);
}*/

.week-row {
    min-height: 80px; /* Consistent height for the static list */
    
}





* { box-sizing: border-box; margin: 0; padding: 0; font-family: sans-serif; }
body { background: var(--bg-color); color: var(--text-primary); }

.navbar { background: var(--card-bg); display: flex; justify-content: space-between; padding: 1rem 2rem; border-bottom: 1px solid var(--border-color); }
.nav-links { list-style: none; display: flex; gap: 1rem; }
.nav-links a { text-decoration: none !important; color: var(--text-secondary); }
.nav-links a.active { color: var(--accent-color); }

.container { display: flex; gap: 1rem; max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
.sidebar { width: 320px; }
.add-tip-form { background: var(--card-bg); padding: 1.5rem; border-radius: 12px; margin-bottom: 1rem; border: 1px solid var(--border-color); }

/* Expense Styles */
#expense-section { border-top: 3px solid #d32f2f; }
.calculation-preview { background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px; margin: 10px 0; font-size: 0.8rem; }
.calc-row { display: flex; justify-content: space-between; }
.calc-row.minus { color: #ff5252; }
.calc-row.final { color: var(--accent-color); font-weight: bold; border-top: 1px solid #444; padding-top: 5px; margin-top: 5px; }
.subtract-btn { width: 100%; padding: 0.8rem; background: #d32f2f; color: white; border: none; border-radius: 6px; cursor: pointer; }

/* Calendar Styles */
.calendar-section { flex-grow: 1; background: var(--card-bg); padding: 1.5rem; border-radius: 12px; }
.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day-cell { aspect-ratio: 1/1; background: #252525; border: 1px solid var(--border-color); border-radius: 8px; padding: 5px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.tip-amount { color: var(--accent-color); font-weight: bold; font-size: 0.8rem; text-align: right; }

/* Fixed Image Styling */


.hidden { display: none !important; }



#monthly-net-tips {
    text-shadow: 0 0 10px rgba(0, 200, 83, 0.3);
    font-weight: 800;
}

.tip-amount {
    /* Keeping the calendar tips bright so you see your full earnings */
    color: var(--accent-color); 
    font-size: 0.9rem;
}

/*styling for the expenses page*/
/* --- Expenses Page Layout --- */
.expenses-grid {
    display: grid;
    grid-template-columns: 280px 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.history-center {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    min-height: 600px;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.history-header h2 {
    /*color: var(--accent-color);*/
    color: var(--expenses-color);
}

#log-count {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* --- Summary Box Refinements --- */
.summary-divider {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.summary-divider p {
    font-size: 0.8rem;
    opacity: 0.8;
}

#monthly-net-total {
    font-size: 1.8rem;
    color: #fff;
}

.spent-text {
    font-size: 0.85rem;
    margin-top: 10px;
    color: #000000;
    font-weight: bold;
}

/* --- Form Button Customization --- */
.expense-submit-btn {
    width: 100%;
    padding: 1rem;
    background: #d80000;
    /*--expenses-color:red;*/
    border: none;
    border-radius: 6px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.expense-submit-btn:hover {
    background: red;
    transform: translateY(-2px);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
    .expenses-grid {
        grid-template-columns: 1fr;
    }
    .history-center {
        order: -1; /* Puts the log at the top on tablets/phones */
    }
    .stats-sidebar, .form-sidebar {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stacks sidebar on top of calendar */
        gap: 1rem;
    }

    .sidebar {
        width: 100%; /* Sidebar takes full width */
    }

    .calendar-section {
        width: 100%; /* Calendar takes full width */
        padding: 10px;
    }
}





@media (max-width: 600px) {
    .navbar {
        padding: 0.5rem 1rem;
        /*flex-direction: column;*/ /* Stack brand name above icons */
        gap: 10px;
    }

    .site-nav {
        gap: 10px; /* Reduce space between icons */
    }

    .site-nav img {
        width: 35px; /* Smaller icons for small screens */
        height: 35px;
    }
    
    .nav-links {
        display: none; /* Hide text links like "Calendar/Stats" to save space */
    }
}











@media (max-width: 480px) {
    .days-grid {
        gap: 4px; /* Tighten the gap between days */
    }

    .day-cell {
        padding: 2px;
        min-height: 60px; /* Ensure they are still "tappable" by a thumb */
    }

    .date-number {
        font-size: 0.8rem;
    }

    .tip-amount {
        font-size: 0.65rem; /* Shrink text so it doesn't overflow */
    }
}







/* Update your CSS to handle the alignment placeholders */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr); /* Exactly 7 columns for 7 days */
    gap: 8px;
}

.empty-cell {
    background: transparent !important;
    border: none !important;
    cursor: default !important;
    pointer-events: none; /* User cannot click them */
}






/* Ensure modal centers correctly */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    align-items: center;
    justify-content: center;
}

/* Make the note count look bold */
#total-notes-count {
    font-size: 3rem;
    color: white;
    /*text-shadow: 0 0 15px ;*/
}

/* Ensure emojis don't break the layout */
.day-cell {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}







/* =========================================================
   CALENDAR PAGE ONLY LOCK (Isolates styles to calendar.html)
   ========================================================= */

/* 1. Target container ONLY when .main-content is nested inside it */
.container .main-content {
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* 2. Lock the #calendar grid (ID only exists on calendar.html) */
#calendar {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 10px !important;
}

/* 3. Lock calendar day boxes into rigid 100px heights */
#calendar .day, 
#calendar .day-empty {
    width: 100% !important;
    height: 100px !important;
    max-height: 100px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* 4. Clip notes inside #calendar boxes only */
#calendar .day-note-text {
    font-size: 0.75rem !important;
    margin-top: 12px !important;
    color: var(--accent-color) !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-all !important;
}




#search-results {
    position: relative;
    z-index: 1000; /* Forces it to be above other elements */
    pointer-events: auto; /* Ensures it registers clicks */
}









/* =========================================================
   📱 MOBILE PHONE FIXES (Leaves Laptop Styling As-Is)
   ========================================================= */

@media (max-width: 768px) {
    /* 1. FIX DISAPPEARING STATS & CALENDAR TABS */
    .nav-links {
        display: flex !important; /* Overrides the previous display: none */
        justify-content: center !important;
        width: 100% !important;
        margin-top: 10px !important;
        gap: 15px !important;
    }

    
    
    
    
    /* Adjust Navbar using Grid to put Brand on left, Profile on right */
    /* Mobile Navbar Layout */
    /* Mobile Navbar Layout */
    .navbar {
        display: flex !important;
        flex-direction: row !important; /* Forces side-by-side layout */
        justify-content: space-between !important; /* Pushes left side and right side apart */
        align-items: center !important;
        padding: 15px !important;
        position: relative; /* Required so the dropdown anchors to the bottom of the nav */
    }
    
    .hamburger-btn {
        display: flex !important; /* Show the hamburger on mobile */
    }

    /* Hide the icons by default and style the sleek dropdown drawer */
    /* Slide-in side drawer for mobile */
    /* Slide-in side drawer for mobile */
    /* 1. Sleek, Full-Height Side Drawer */
    .site-nav {
        display: flex !important; 
        position: fixed !important; /* Forces it to cover the screen from top to bottom */
        top: 0 !important;
        left: 0 !important;
        width: 240px !important; /* Perfect modern drawer width */
        height: 100vh !important; /* 100% of the screen height */
        background: #121212 !important; /* Matches your main dark background */
        border-right: 1px solid #2a2a2a !important; 
        padding: 80px 20px 30px 20px !important; /* 80px top padding clears the hamburger menu */
        z-index: 998 !important; /* Sits right underneath the hamburger icon */
        
        flex-direction: column !important; 
        justify-content: flex-start !important; 
        align-items: flex-start !important;
        gap: 15px !important; 
        
        transform: translateX(-100%) !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Super smooth slide animation */
        
        /* This casts a massive dark shadow over the rest of the screen when open */
        box-shadow: none !important;
    }

    /*.site-nav.open {
        transform: translateX(0) !important; 
        box-shadow: 0 0 0 100vw rgba(0,0,0,0.6) !important; 
    }*/
    .site-nav.open {
        transform: translateX(0) !important; 
    }

    /* 2. Shrink and Standardize the Icons */
    .site-nav a img {
        width: 28px !important;  /* Overrides the massive 50px/60px HTML sizes */
        height: 28px !important;
        object-fit: contain !important;
    }

    /* 3. Style the Clickable Rows */
    .site-nav a {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important; 
        justify-content: flex-start !important; 
        text-decoration: none !important; 
        gap: 15px !important; 
        width: 100% !important; 
        padding: 12px 15px !important; /* Adds padding to make the whole row comfortably clickable */
        border-radius: 10px !important; /* Rounds the corners of the hover highlight */
        transition: background 0.2s ease !important;
    }

    /* 4. Soft background highlight when a button is tapped or active */
    .site-nav a.active,
    .site-nav a:hover, 
    .site-nav a:active {
        background: var(--nav-bg-color) !important; /* Now uses the smart background variable */
    }

    /* 5. Clean, Professional Text */
    .nav-label {
        color: #ffffff !important; 
        font-size: 1.05rem !important; 
        font-weight: 500 !important; 
        transition: color 0.3s ease !important;
    }

    /* --- SMART THEME COLORS FOR EACH PAGE --- */
    /* --- SMART THEME COLORS FOR EACH PAGE --- */
    .site-nav { 
        --nav-theme-color: #00cc44; /* Default Green text */ 
        --nav-bg-color: rgba(0, 204, 68, 0.1); /* Default Green background */
    }
    .theme-expenses { 
        --nav-theme-color: #ff5252; /* Red text */ 
        --nav-bg-color: rgba(255, 82, 82, 0.15); /* Red background */
    }
    .theme-chat { 
        --nav-theme-color: #00b0ff; /* Blue text */ 
        --nav-bg-color: rgba(0, 176, 255, 0.15); /* Blue background */
    }
    .theme-schedule { 
        --nav-theme-color: #00b0ff; /* Yellow text */ 
        --nav-bg-color: rgba(255, 255, 0, 0.15); /* Yellow background */
    }
    /* NEW: Account Page Theme */
    /* NEW: Account Page Theme */
    .theme-account {
         --nav-theme-color: #00b0ff; /* Blue text */
         --nav-bg-color: rgba(0, 176, 255, 0.15); /* Blue background */
    }

    /* The text will automatically use whichever theme color is active */
    .site-nav a.active .nav-label, 
    .site-nav a:hover .nav-label,
    .site-nav a:active .nav-label {
        color: var(--nav-theme-color) !important; 
    }

    /*.site-nav a.active .nav-label, 
    .site-nav a:hover .nav-label,
    .site-nav a:active .nav-label {
        color: #00cc44 !important; 
    }*/

    /* 2. Style the actual text (the .nav-label span) */
    .nav-label {
        color: #ffffff !important; /* Makes the text crisp white */
        font-size: 1.1rem !important; /* Makes the text a readable size */
        font-weight: bold !important; /* Makes it pop against the dark background */
        transition: color 0.3s ease; /* Smooth fade when turning green */
    }

    /* 3. Make the text glow green when the page is active or touched */
    /* The text will automatically use whichever theme color is active */
    nav.site-nav a.active span.nav-label, 
    nav.site-nav a:hover span.nav-label,
    nav.site-nav a:active span.nav-label {
        color: var(--nav-theme-color) !important; 
    }
    /* Professional Hamburger 'X' Animation */
    
    
    /* Shrink the profile to fit nicely on small screens */
    .user-profile {
        padding: 4px 10px !important;
        gap: 8px !important;
    }
    


    /* 2. FIX CALENDAR GRID ALIGNMENT */
    /* Shrink gaps so all 7 columns fit on a small screen perfectly */
    .days-grid, #calendar {
        gap: 3px !important; 
        width: 100% !important;
    }

    .weekdays {
        gap: 3px !important;
        font-size: 0.7rem !important; 
    }

    /* Override rigid desktop heights that break mobile grid alignment */
    .day-cell, .day, .day-empty, .calendar-day {
        height: auto !important; 
        min-height: 65px !important; /* Tall enough to tap, small enough to fit */
        max-height: none !important;
        aspect-ratio: auto !important; /* Drop rigid square shape to let text flow naturally */
        padding: 3px !important;
        overflow: hidden !important; 
    }

    /* 3. SHRINK INSIDE TEXT SO IT DOESN'T BREAK BOX WIDTHS */
    .date-number, .day-number {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
    }

    /* Target shift details & comment bubbles inside the cells */
    .day-cell div {
        padding: 2px !important;
        gap: 1px !important;
    }

    .day-cell strong {
        font-size: 0.6rem !important;
    }

    .day-cell span {
        font-size: 0.55rem !important;
    }
    
    .tip-amount, .day-off-badge {
        font-size: 0.6rem !important;
        padding: 1px 3px !important;
    }


    /* 4. STATS CHART FIX FOR MOBILE (Harmony with Input Form) */
    .stats-section {
        padding: 1.5rem !important; /* Matches the exact padding of the input form */
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .chart-container {
        height: 300px !important;
        padding: 0 !important; /* Removes inner padding so the chart stretches to the edges */
        margin: 15px 0 0 0 !important;
        border: none !important; /* Removes the double border */
        background: transparent !important;
        width: 100% !important;
    }


    /* --- BLUE AREA FIX: Keep the title visible above the menu --- */
    .nav-brand {
        position: relative !important;
        z-index: 1000 !important; /* Matches the hamburger icon so they both sit on top */
    }

    /* --- RED AREA FIX: Clickable dimmed background --- */
    .menu-overlay {
        display: none; 
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.7) !important; /* Dims the screen */
        z-index: 997 !important; /* Sits right behind the drawer (which is 998) */
        cursor: pointer !important;
    }

    /* When JS adds the 'open' class on click */
    .menu-overlay.open {
        display: block !important;
    }
}

/* Extra tight layout for extremely narrow phones (like iPhone SE) */
@media (max-width: 480px) {
    .days-grid, #calendar {
        gap: 2px !important;
    }
    .weekdays {
        font-size: 0.6rem !important;
    }
    .day-cell, .day, .day-empty, .calendar-day {
        padding: 2px !important;
        min-height: 55px !important;
    }
}








/* ✨ VIEW TOGGLES (Tab Switcher) */
.view-toggles {
    display: inline-flex;
    gap: 10px;
    background: #1a1a1a;
    padding: 5px;
    border-radius: 30px;
    border: 1px solid #333;
    z-index: 10;
}

.view-toggles a {
    padding: 8px 20px;
    border-radius: 25px;
    text-decoration: none;
    color: #888;
    font-weight: bold;
    font-size: 0.95rem;
    transition: 0.3s;
    text-align: center;
}

/* 💻 DESKTOP ONLY: Sit at the top left of the grid */
@media (min-width: 769px) {
    .view-toggles {
        grid-column: 1 / -1; /* Spans the full top row safely */
        justify-self: start; /* Aligns to the left */
        margin-bottom: 10px;
    }
}

/* 📱 MOBILE ONLY: Reorder to sit right above Calendar/Stats */
@media (max-width: 768px) {
    .view-toggles {
        display: flex;
        width: 100%;
        max-width: 400px;
        margin: 10px auto 20px auto;
        order: 3 !important; /* Forces it right above the calendar */
    }
    .view-toggles a {
        flex: 1;
    }
    
    /* Ensure the Calendar and Stats stay completely below the toggle */
    .history-center { order: 4 !important; }
    #stats-view { order: 5 !important; }
}

/* 🟢 GREEN THEME (For Index Page) */
.theme-green a.active {
    background: #00cc44; 
    color: white;
    box-shadow: 0 2px 10px rgba(0, 204, 68, 0.3);
}








/* =========================================================
   💬 CHAT MOBILE RESPONSIVENESS FIX
   ========================================================= */

.mobile-only { 
    display: none; 
}

@media (max-width: 768px) {
    .chat-container {
        position: relative; /* Allows chat window to absolute position over sidebar */
    }
    
    .chat-sidebar {
        width: 100%;
        border-right: none;
    }
    
    .chat-window {
        width: 100%;
        position: absolute;
        top: 0; left: 0; height: 100%;
        background: var(--card-bg);
        z-index: 10;
    }
    
    .hidden-on-mobile {
        display: none !important;
    }
    
    .mobile-only {
        display: block;
    }
}



/* =========================================================
   💬 CHAT MOBILE RESPONSIVENESS FIX
   ========================================================= */

/* Strictly hide the back button on Desktop */
#back-to-list-btn { 
    display: none !important; 
}

@media (max-width: 768px) {
    /* Only show the back button on mobile */
    #back-to-list-btn { 
        display: block !important; 
    }
    
    .chat-container {
        position: relative;
    }
    
    .chat-sidebar {
        width: 100%;
        border-right: none;
    }
    
    .chat-window {
        width: 100%;
        position: absolute;
        top: 0; left: 0; height: 100%;
        background: var(--card-bg);
        z-index: 10;
    }
    
    .hidden-on-mobile {
        display: none !important;
    }
}






/* =========================================================
   💬 CHAT SIDEBAR SCROLL FIX
   ========================================================= */

/* Ensure the sidebar acts as a strict column */
.chat-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevents the entire sidebar from stretching */
}

/* Style the Search Results Dropdown Items */
#search-results li {
    padding: 12px 15px;
    color: white;
    border-bottom: 1px solid #333;
    transition: 0.2s;
}

#search-results li:last-child {
    border-bottom: none;
}

#search-results li:hover {
    background: #00b0ff;
    color: black;
}

/* Custom Scrollbar for the Conversation List & Search Results */
#conversation-list::-webkit-scrollbar,
#search-results::-webkit-scrollbar {
    width: 6px;
}

#conversation-list::-webkit-scrollbar-track,
#search-results::-webkit-scrollbar-track {
    background: transparent;
}

#conversation-list::-webkit-scrollbar-thumb,
#search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

#conversation-list::-webkit-scrollbar-thumb:hover,
#search-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}









/* --- COMPACT STATS MONTH NAVIGATION --- */
.stats-month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 0 4px;
}

#stats-month-display {
    font-size: 0.95rem !important;
    font-weight: bold;
    color: var(--accent-color);
    margin: 0 !important;
    text-align: center;
}

.chart-title {
    font-size: 0.95rem !important;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 8px !important;
    text-align: center;
}

.stats-nav-btn {
    background: #2a2a2a;
    color: white;
    border: 1px solid var(--border-color);
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.stats-nav-btn:hover {
    background: var(--accent-color);
    color: black;
}

/* Adjust Chart height to account for compact header */
.stats-section .chart-container {
    padding: 12px !important;
}

/* --- MOBILE TWEAKS --- */
@media (max-width: 768px) {
    .stats-month-nav {
        margin-bottom: 6px;
    }
    #stats-month-display {
        font-size: 0.85rem !important;
    }
    .stats-nav-btn {
        padding: 3px 8px !important;
        font-size: 0.7rem !important;
    }
}





/* =========================================================
   STATS DASHBOARD MOBILE FIX
   ========================================================= */
/* =========================================================
   STATS DASHBOARD - DUAL LAYOUT (LAPTOP & MOBILE)
   ========================================================= */

/* --- SHARED STYLES (Laptop + Mobile) --- */

/* =========================================================
   STATS DASHBOARD - DUAL LAYOUT (LAPTOP & MOBILE)
   ========================================================= */

/* --- SHARED STYLES (Laptop Default) --- */

/* 1. Card container for each chart */
.chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 2. Top Navigation Bar for Daily Tips Chart */
.stats-month-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
}

#stats-month-display {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.chart-title {
    font-size: 0.95rem !important;
    font-weight: bold;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 12px 0 !important;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Responsive Chart Container */
.canvas-holder {
    position: relative;
    width: 100%;
    height: 280px;
}

/* --- UNIFIED BUTTON STYLING --- */
button.stats-nav-btn,
#stats-prev-month,
#stats-next-month {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    
    cursor: pointer !important;
    outline: none !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease-in-out !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Hover & Active States */
button.stats-nav-btn:hover,
#stats-prev-month:hover,
#stats-next-month:hover,
#stats-prev-month:active,
#stats-next-month:active {
    background-color: var(--accent-color, #00c853) !important;
    color: #000000 !important;
    border-color: var(--accent-color, #00c853) !important;
}


/* --- LAPTOP / DESKTOP LAYOUT (Side-By-Side with Cards) --- */
@media (min-width: 901px) {
    .charts-wrapper {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .chart-card {
        flex: 1 !important;
        min-width: 0 !important;
    }
}


/* --- MOBILE LAYOUT (Minimal - No Grey Box) --- */
@media (max-width: 900px) {
    .charts-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* REMOVED GREY BOX: Transparent background and no border on mobile */
    .chart-card {
        width: 100% !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .canvas-holder {
        height: 220px !important;
    }

    #stats-month-display {
        font-size: 0.95rem !important;
    }

    button.stats-nav-btn,
    #stats-prev-month,
    #stats-next-month {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
    }

    .stats-section .chart-container {
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
}




/* =========================================================
   SCHEDULE STATS COMPACT SPACING & BLUE HOVER
   ========================================================= */

/* Compact button dimensions across mobile & laptop */
button.stats-nav-btn,
#stats-prev-month,
#stats-next-month {
    padding: 5px 12px !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
}

/* Change Hover & Touch Active feedback from Green to Blue */
button.stats-nav-btn:hover,
#stats-prev-month:hover,
#stats-next-month:hover,
button.stats-nav-btn:active,
#stats-prev-month:active,
#stats-next-month:active {
    background-color: #00b0ff !important;
    color: #000000 !important;
    border-color: #00b0ff !important;
    box-shadow: 0 2px 8px rgba(0, 176, 255, 0.4) !important;
}

/* Reduced header and chart wrapper gaps */
#stats-view .stats-month-nav {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
}

#stats-view .charts-wrapper {
    margin-top: 10px !important;
    gap: 10px !important;
}






/* Remove vertical gap under Dashboard header */
#stats-view {
    gap: 0 !important;
}

#stats-view h2 {
    margin-bottom: 10px !important;
}

#stats-view .charts-wrapper {
    margin-top: 0 !important;
}








@media (max-width: 768px) {
    
    .stats-section, 
    #stats-view {
        border: none !important;
        background: transparent !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

        .stats-month-nav {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
        gap: 6px !important;
    }

    #stats-month-display {
        font-size: 0.95rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        flex-shrink: 1 !important;
    }

        button.stats-nav-btn,
    #stats-prev-month,
    #stats-next-month {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
        min-width: unset !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

        .chart-card {
        padding: 10px 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
}

/* --- Mobile Hamburger Menu Base --- */
.hamburger-btn {
    display: none; /* Hidden on laptops */
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    z-index: 1000;
}
.hamburger-btn span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--text-primary);
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}






/* =========================================================
   DESKTOP ONLY: True Center Nav & Side-by-Side Icons
   ========================================================= *//* =========================================================
   DESKTOP ONLY: True Center Nav & Side-by-Side Icons
   ========================================================= */
@media (min-width: 769px) {
    .navbar {
        position: sticky; 
    }
    
    .site-nav {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10; 
    }

    .site-nav a {
        flex-direction: row !important; 
        gap: 10px !important; 
    }

    .site-nav a img {
        width: 45px !important;  
        height: 45px !important; 
        object-fit: contain !important;
    }
    
    /* TEXT STYLING FOR BIG SCREENS */
    .site-nav a .nav-label {
        font-size: 1rem !important; 
        color: #ffffff !important; /* Forces the default text to be white */
    }
}







/* =========================================================
   GLOBAL THEME OVERRIDES (Applies to Laptop & Mobile)
   ========================================================= */
.site-nav.theme-account {
    --nav-theme-color: #00b0ff !important;
}

.site-nav.theme-account a.active .nav-label,
.site-nav.theme-account a:hover .nav-label {
    color: var(--nav-theme-color) !important;
}









/* =========================================================
   SCROLLABLE LOGBOOK (SCHEDULE PAGE)
   ========================================================= *//* =========================================================
   SCROLLABLE LOGBOOK (AGGRESSIVE FIX)
   ========================================================= */

/* =========================================================
   SCROLLABLE LOGBOOK (BULLETPROOF CARD SCROLL)
   ========================================================= */
/* Target the main dark card container directly */
/* =========================================================
   SCROLLABLE LOGBOOK (SCHEDULE PAGE)
   ========================================================= */
.week-vertical-list {
    /* 1. Stack the shift rows neatly */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
    
    /* 2. THE SCROLL LOCK */
    height: 65vh !important;       /* Locks height to 65% of the screen */
    min-height: 400px !important; 
    overflow-y: auto !important;   /* Forces the vertical scrollbar */
    overflow-x: hidden !important;
    padding-right: 10px !important; 
}

/* 3. Dark Theme Scrollbar */
.week-vertical-list::-webkit-scrollbar {
    width: 6px !important;
}
.week-vertical-list::-webkit-scrollbar-track {
    background: transparent !important;
}
.week-vertical-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
}
.week-vertical-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}




/* =========================================================
   FEEDBACK & SUPPORT LINK (Account Page)
   ========================================================= */
.feedback-link {
    display: inline-block;
    color: var(--text-secondary); /* Grey color so it doesn't scream for attention */
    font-size: 0.85rem;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

/* Lights up with the Account Page blue theme when touched/hovered */
.feedback-link:hover, 
.feedback-link:active {
    color: #00b0ff; 
    background: rgba(0, 176, 255, 0.1); /* Very subtle blue highlight box */
    border: 1px solid rgba(0, 176, 255, 0.3);
}








/* =========================================================
   CHAT LAYOUT STABILITY FIXES 
   ========================================================= */

/* 1. Lock the sidebar so it never shrinks or disappears on big screens */
@media (min-width: 769px) {
    .chat-sidebar {
        flex-shrink: 0 !important;
        width: 280px !important;      /* Set exactly how wide you want it */
        min-width: 280px !important;  /* Refuses to let the chat window squish it */
    }
}

/* 2. Lock the chat window so it respects its boundaries */
.chat-window {
    min-width: 0 !important; /* CRITICAL: Stops the chat window from forcing the main container to stretch */
}

/* 3. Force long messages to wrap neatly inside their bubbles */
.message {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important; /* Forces long unbroken text to snap to a new line */
    white-space: pre-wrap !important;  /* Respects "Enter" key line breaks typed by the user */
    max-width: 75% !important;         /* Keeps the bubble from touching the opposite edge */
}

/* 4. Prevent the message area from ever scrolling horizontally */
.message-display {
    overflow-x: hidden !important;
}








/*maybe this is damp idea i can erase whenever i want is the size of the chat*/
/* =========================================================
   SMART MOBILE CHAT LAYOUT HEIGHT 
   ========================================================= */
/* =========================================================
   SMART MOBILE CHAT LAYOUT HEIGHT (Keyboard Snap Fix)
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Remove all empty space below the chat box on the chat page */
    body:has(.chat-container) .main-content {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Force the chat box to dynamically snap to the keyboard */
    .chat-container {
        /* 100dvh automatically shrinks and grows with the Android/iOS keyboard */
        height: calc(100dvh - 80px) !important; 
        
        /* Remove the hardcoded 400px limit so the box is allowed to compress */
        min-height: unset !important; 
        
        border-radius: 12px !important; 
    }

    .chat-window {
        height: 100% !important;
    }
}
/*@media (max-width: 768px) {
        .main-content {
        margin-top: 10px !important; 
        margin-bottom: 10px !important;
    }
    
        .chat-container {
        height: calc(100vh - 110px) !important; 
        min-height: 400px !important;
               border-radius: 12px !important; 
    }

        .chat-window {
        height: 100% !important;
    }
}*/
/*until here is that maybe damp idea*/






/* =========================================================
   NAVBAR LONG USERNAME FIX 
   ========================================================= */
#logged-in-user {
    display: inline-block !important;
    max-width: 120px !important; /* Limits the name to this exact width */
    white-space: nowrap !important; /* Forces the name onto a single line */
    overflow: hidden !important; /* Hides anything that spills out of the box */
    text-overflow: ellipsis !important; /* Adds the "..." to the cut-off text */
    vertical-align: middle !important; /* Keeps it perfectly centered with the avatar */
}

/* Shrink the limit slightly on small phone screens so it doesn't crowd the hamburger menu */
@media (max-width: 768px) {
    #logged-in-user {
        max-width: 85px !important; 
    }
}





/* =========================================================
   CHAT OPTIONS MENU (BLOCK, HIDE, DELETE) - MOBILE ENHANCED
   ========================================================= */
.chat-options-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--text-secondary) !important;
    font-size: 1.8rem !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    margin-left: 10px !important;
    transition: color 0.2s !important;
    line-height: 1 !important;
}
.chat-options-toggle:hover {
    color: white !important;
}
.chat-options-menu {
    position: absolute !important;
    top: 35px !important;
    right: 0 !important;
    background: #252525 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
    z-index: 1000 !important; /* Forces it over the sidebar scroll */
    overflow: hidden !important;
    width: 180px !important;
}
.chat-options-menu button {
    width: 100% !important;
    padding: 12px 15px !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    text-align: left !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    border-bottom: 1px solid #333 !important;
    transition: background 0.2s !important;
    font-weight: 500 !important;
}
.chat-options-menu button:last-child {
    border-bottom: none !important;
}
.chat-options-menu button:hover {
    background: #333 !important;
}
.chat-options-menu button.text-danger {
    color: #ff5252 !important;
}
.chat-options-menu button.text-danger:hover {
    background: rgba(255, 82, 82, 0.15) !important;
}

/* Mobile Scaling for the Options Menu */
@media (max-width: 768px) {
    .chat-options-toggle {
        font-size: 2.2rem !important;
        padding: 8px 15px !important;
    }
    .chat-options-menu {
        width: 220px !important;
        right: 5px !important;
    }
    .chat-options-menu button {
        padding: 16px 20px !important;
        font-size: 1.05rem !important;
    }
}



/* =========================================================
   FEEDBACK CATEGORY BUTTONS
   ========================================================= */
/* =========================================================
   FEEDBACK CATEGORY BUTTONS (COLOR-CODED)
   ========================================================= */
   /* =========================================================
   FEEDBACK CATEGORY BUTTONS (COLOR-CODED)
   ========================================================= */
.category-btn {
    background: #2a2a2a;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}
.category-btn:hover {
    background: #333;
    color: white;
}
/* General Idea - Yellow */
.category-btn.yellow-btn.active {
    background: rgba(255, 235, 59, 0.15);
    color: #ffeb3b;
    border-color: #ffeb3b;
}
/* New Feature - Blue */
.category-btn.blue-btn.active {
    background: rgba(0, 176, 255, 0.15);
    color: #00b0ff;
    border-color: #00b0ff;
}
/* Bug Report - Red */
.category-btn.red-btn.active {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
    border-color: #ff5252;
}
/* Other - Green */
.category-btn.green-btn.active {
    background: rgba(0, 200, 83, 0.15);
    color: #00c853;
    border-color: #00c853;
}






/* =========================================================
   UNIFORM NAVBAR GAP (ALL PAGES, ALL DEVICES)
   ========================================================= */
.main-content {
    margin-top: 20px !important; 
}
.container {
    margin-top: 20px !important; 
}





/* =========================================================
   LAPTOP ONLY: ALIGN STATS VIEW WITH SUMMARY BOX
   ========================================================= */
@media (min-width: 769px) {
    #stats-view {
        margin-top: 54px !important; /* Pushes the stats box down exactly past the toggle buttons */
    }
}




/* =========================================================
   FINAL COLOR OVERRIDES (Fixes for Light Themes)
   ========================================================= */

/* 1. Force the Calendar Tip numbers to ALWAYS be Green */
.tip-amount {
    color: #00c853 !important;
    font-weight: bold !important;
}

/* 2. Force the "Log Entry" (Add Tips) button to ALWAYS be Green */
button.add-tips,
.add-tips {
    background: #00c853 !important;
    color: #000000 !important;
    border: none !important;
}

/* 3. Inactive Navbar words adapt properly (Black in bright themes, White in dark themes) */
.site-nav a:not(.active) .nav-label {
    color: var(--text-primary) !important;
}

/* 4. Next/Prev buttons on Calendar & Expenses adapt properly */
.calendar-header button, 
#prev-month, 
#next-month,
.stats-nav-btn,
#stats-prev-month,
#stats-next-month,
.history-header button {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}





/* =========================================================
   BRIGHT THEMES ONLY: SUMMARY BOX & STATS BUTTONS
   ========================================================= */

/* 1. Make all text/numbers inside the Summary Box Black for bright themes */
[data-theme="light"] .summary-box p,
[data-theme="light"] .summary-box h2,
[data-theme="light"] .summary-box span,
[data-theme="latte"] .summary-box p,
[data-theme="latte"] .summary-box h2,
[data-theme="latte"] .summary-box span {
    color: #000000 !important;
}

/* 2. EXCEPTION: Keep "Spent:" text White on the Expenses page */
[data-theme="light"] .summary-box .spent-text,
[data-theme="light"] .summary-box .spent-text span,
[data-theme="latte"] .summary-box .spent-text,
[data-theme="latte"] .summary-box .spent-text span {
    color: #ffffff !important;
}

/* 3. Force Next/Prev Buttons to adapt to bright themes (Black Text) */
[data-theme="light"] #stats-prev-month,
[data-theme="light"] #stats-next-month,
[data-theme="latte"] #stats-prev-month,
[data-theme="latte"] #stats-next-month {
    background: var(--input-bg) !important;
    color: #000000 !important;
    border-color: var(--border-color) !important;
}




/* =========================================================
   MOBILE NAV DRAWER THEME FIX (Adapts to Bright Themes)
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Force the mobile menu drawer to use the dynamic background and border */
    nav.site-nav {
        background: var(--bg-color) !important;
        border-right: 1px solid var(--border-color) !important;
    }
    
    /* 2. Ensure inactive link text perfectly matches the theme's primary text color */
    nav.site-nav a:not(.active) span.nav-label {
        color: var(--text-primary) !important;
    }
}





/* =========================================================
   MOBILE HAMBURGER ICON THEME ADAPTER (CSS Stencil Trick)
   ========================================================= */
/* =========================================================
   MOBILE HAMBURGER ICON THEME ADAPTER (CSS Stencil Trick)
   ========================================================= */
/* =========================================================
   MOBILE HAMBURGER ICON THEME ADAPTER (CSS Stencil Trick)
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Apply the stencil mask to all hamburger icons so we can color them */
    .hamburger-btn img {
        content: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==') !important;
        
        /* DEFAULT (Earnings / Index Page): Always Green */
        background-color: #00cc44 !important;
    }
    
    .hamburger-btn .icon-menu {
        -webkit-mask: url('images/nav-bar-blue.png') no-repeat center / contain !important;
        mask: url('images/nav-bar-blue.png') no-repeat center / contain !important;
    }
    .hamburger-btn .icon-close {
        -webkit-mask: url('images/x-nav-blue.png') no-repeat center / contain !important;
        mask: url('images/x-nav-blue.png') no-repeat center / contain !important;
    }

    /* 2. SPECIFIC PAGES: Match their original branding */
    
    /* Expenses Page -> Always Red */
    .navbar:has(.theme-expenses) .hamburger-btn img {
        background-color: #ff5252 !important;
    }
    
    /* Chat & Schedule Pages -> Always Blue */
    .navbar:has(.theme-chat) .hamburger-btn img,
    .navbar:has(.theme-schedule) .hamburger-btn img {
        background-color: #00b0ff !important;
    }

    /* 3. ACCOUNT PAGE EXCEPTION: Adapts dynamically to your chosen themes */
    .navbar:has(.theme-account) .hamburger-btn img {
        background-color: var(--accent-color) !important;
    }
}


/* =========================================================
   BRIGHT THEMES ONLY: PAGE-SPECIFIC SUMMARY GRADIENTS
   ========================================================= */

/* 1. EARNINGS PAGE (Bright Green Gradient) */
[data-theme="light"] .summary-box:has(#monthly-total-tips),
[data-theme="latte"] .summary-box:has(#monthly-total-tips) {
    background: linear-gradient(135deg, #69f0ae, #00c853) !important;
    border: 1px solid #00c853 !important;
}

/* 2. SCHEDULE PAGE (Bright Blue Gradient) */
[data-theme="light"] .summary-box:has(#monthly-total-hours),
[data-theme="latte"] .summary-box:has(#monthly-total-hours) {
    background: linear-gradient(135deg, #40c4ff, #00b0ff) !important;
    border: 1px solid #00b0ff !important;
}

/* 3. EXPENSES PAGE (Bright Red Gradient) */
[data-theme="light"] .summary-box:has(#monthly-net-total),
[data-theme="latte"] .summary-box:has(#monthly-net-total) {
    background: linear-gradient(135deg, #fd7569, #ff0000) !important;
    border: 1px solid #ff5252 !important;
}

/* 4. Force the Calendar & Stats toggle letters to be black */
[data-theme="light"] .view-toggles a,
[data-theme="latte"] .view-toggles a {
    color: #000000 !important;
}





/* =========================================================
   DARK THEMES ONLY: WHITE CALENDAR / STATS TAB LETTERS
   ========================================================= */

/* Use the :not() selector to apply white text ONLY when a bright theme is NOT active */
html:not([data-theme="light"]):not([data-theme="latte"]) .view-toggles a {
    color: #ffffff !important;
}





/* =========================================================
   BRIGHT THEMES ONLY: SCHEDULE SHIFT CELLS
   ========================================================= */
[data-theme="light"] .day-cell.has-shift,
[data-theme="latte"] .day-cell.has-shift,
[data-theme="light"] .calendar-day.has-shift,
[data-theme="latte"] .calendar-day.has-shift {
    /* Mix the custom shift color with the bright card background instead of dark grey */
    background: color-mix(in srgb, var(--shift-color) 15%, var(--card-bg)) !important;
    border: 1px solid color-mix(in srgb, var(--shift-color) 40%, var(--border-color)) !important;
    border-left: 3px solid var(--shift-color) !important;
}



/* =========================================================
   BRIGHT THEMES ONLY: SCHEDULE CHARTS BOX FIX
   ========================================================= */

/* 1. Override the muddy grey background and dark borders on the chart boxes */
[data-theme="light"] .charts-wrapper > div,
[data-theme="latte"] .charts-wrapper > div {
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* 2. Fix the hardcoded light-grey "Monthly Hours" chart title */
[data-theme="light"] #monthly-chart-title,
[data-theme="latte"] #monthly-chart-title {
    color: var(--text-primary) !important;
}

/* =========================================================
   SCHEDULE LOGBOOK SCROLLBAR FIX
   ========================================================= */
/* =========================================================
   LOGBOOK & EXPENSES SCROLLBAR FIX (Bulletproof version)
   ========================================================= */

/* 1. Restrict the height and force a vertical scrollbar */
#history-list,
.history-center ul {
    max-height: 55vh !important; 
    min-height: 200px !important;
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    padding-right: 10px !important; 
}

/* 2. Style the scrollbar */
#history-list::-webkit-scrollbar,
.history-center ul::-webkit-scrollbar {
    width: 6px !important;
}
#history-list::-webkit-scrollbar-track,
.history-center ul::-webkit-scrollbar-track {
    background: transparent !important;
}
#history-list::-webkit-scrollbar-thumb,
.history-center ul::-webkit-scrollbar-thumb {
    background: rgba(150, 150, 150, 0.4) !important; 
    border-radius: 10px !important;
}
#history-list::-webkit-scrollbar-thumb:hover,
.history-center ul::-webkit-scrollbar-thumb:hover {
    background: rgba(150, 150, 150, 0.7) !important;
}

/* =========================================================
   EXPENSE HISTORY ITEMS (Fix hardcoded dark boxes)
   ========================================================= */

/* Overpower the inline JavaScript backgrounds */
.history-center ul li {
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Force text inside the expense boxes to adapt to the light themes */
.history-center ul li span,
.history-center ul li div {
    color: var(--text-primary) !important;
}


/* =========================================================
   REMOVE EMPTY GAP UNDER EXPENSES LOGBOOK
   ========================================================= */
.history-center {
    min-height: unset !important; /* Removes the hardcoded 600px minimum height */
}




/* =========================================================
   STOP FORM CARDS FROM STRETCHING (Fix empty gap)
   ========================================================= */
/* =========================================================
   EXPENSES PAGE: MATCH HISTORY WIDTH TO FORM
   ========================================================= */
.history-center {
    width: 100% !important;
}

/* =========================================================
   ACCOUNT PAGE ONLY: REDUCE TOP GAP
   ========================================================= */
body:has(.theme-account) .main-content {
    margin-top: 10px !important;
}

body:has(.theme-account) .container {
    margin-top: 0px !important;
}





/* =========================================================
   ACCOUNT PAGE ONLY: REDUCE TOP GAP
   ========================================================= */
/* =========================================================
   ACCOUNT PAGE ONLY: REDUCE TOP GAP (Bulletproof)
   ========================================================= */

/* 1. Reduce the main wrapper gaps */
body:has(#profile-display-card) .main-content {
    margin-top: 15px !important;
}
body:has(#profile-display-card) .container {
    margin-top: 0px !important;
}

/* 2. Forcefully strip the hardcoded inline 20px margins off the cards */
#profile-display-card,
#profile-settings-card {
    margin-top: 0px !important;
}




/* =========================================================
   MOBILE ONLY: INDIVIDUAL NAVBAR HOVER COLORS
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Earnings -> Always glows Green */
    .site-nav a[href*="index.html"]:hover,
    .site-nav a[href*="index.html"].active,
    .site-nav a[href*="index.html"]:active {
        background: rgba(0, 204, 68, 0.15) !important;
    }
    .site-nav a[href*="index.html"]:hover .nav-label,
    .site-nav a[href*="index.html"].active .nav-label,
    .site-nav a[href*="index.html"]:active .nav-label {
        color: #00cc44 !important;
    }

    /* 2. Expenses -> Always glows Red */
    .site-nav a[href*="expenses.html"]:hover,
    .site-nav a[href*="expenses.html"].active,
    .site-nav a[href*="expenses.html"]:active {
        background: rgba(255, 82, 82, 0.15) !important;
    }
    .site-nav a[href*="expenses.html"]:hover .nav-label,
    .site-nav a[href*="expenses.html"].active .nav-label,
    .site-nav a[href*="expenses.html"]:active .nav-label {
        color: #ff5252 !important;
    }

    /* 3. Chat & Brag -> Always glows Blue */
    .site-nav a[href*="chat_n_brag.html"]:hover,
    .site-nav a[href*="chat_n_brag.html"].active,
    .site-nav a[href*="chat_n_brag.html"]:active {
        background: rgba(0, 176, 255, 0.15) !important;
    }
    .site-nav a[href*="chat_n_brag.html"]:hover .nav-label,
    .site-nav a[href*="chat_n_brag.html"].active .nav-label,
    .site-nav a[href*="chat_n_brag.html"]:active .nav-label {
        color: #00b0ff !important;
    }

    /* 4. Schedule -> Always glows Yellow */
    .site-nav a[href*="schedule.html"]:hover,
    .site-nav a[href*="schedule.html"].active,
    .site-nav a[href*="schedule.html"]:active {
        background: rgba(0, 176, 255, 0.15)!important;
    }
    .site-nav a[href*="schedule.html"]:hover .nav-label,
    .site-nav a[href*="schedule.html"].active .nav-label,
    .site-nav a[href*="schedule.html"]:active .nav-label {
        color:  #00b0ff!important;
    }
}








/* =========================================================
   SCHEDULE PRESET BOX FIX (For all alternative themes)
   ========================================================= */

/* 1. Override the hardcoded dark gray background and border */
[data-theme="light"] #preset-group,
[data-theme="latte"] #preset-group,
[data-theme="midnight"] #preset-group {
    background: var(--hover-bg) !important;
    border: 1px dashed var(--border-color) !important;
}

/* 2. Ensure the label color perfectly matches the theme's accent color */
[data-theme="light"] #preset-group label,
[data-theme="latte"] #preset-group label,
[data-theme="midnight"] #preset-group label {
    color: var(--accent-color) !important;
}



/* =========================================================
   BRIGHT THEMES ONLY: FEEDBACK MODAL FIXES
   ========================================================= */

/* 1. Force the inactive category buttons and Cancel button to adapt */
[data-theme="light"] .category-btn,
[data-theme="latte"] .category-btn,
[data-theme="light"] .close-btn,
[data-theme="latte"] .close-btn {
    background: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

[data-theme="light"] .category-btn:hover,
[data-theme="latte"] .category-btn:hover,
[data-theme="light"] .close-btn:hover,
[data-theme="latte"] .close-btn:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

/* 2. Deepen the active category colors so they are readable on bright backgrounds */
/* Yellow -> Darker Caramel */
[data-theme="light"] .category-btn.yellow-btn.active,
[data-theme="latte"] .category-btn.yellow-btn.active {
    color: #06d906  !important; 
    border-color: #06d906 !important;
    background: rgba(6, 217, 6, 0.1) !important;
}

/* Blue -> Deeper Blue */
[data-theme="light"] .category-btn.blue-btn.active,
[data-theme="latte"] .category-btn.blue-btn.active {
    color: #0288d1 !important; 
    border-color: #0288d1 !important;
    background: rgba(2, 136, 209, 0.1) !important;
}

/* Red -> Deeper Red */
[data-theme="light"] .category-btn.red-btn.active,
[data-theme="latte"] .category-btn.red-btn.active {
    color: #d32f2f !important; 
    border-color: #d32f2f !important;
    background: rgba(211, 47, 47, 0.1) !important;
}

/* Green -> Deeper Green */
[data-theme="light"] .category-btn.green-btn.active,
[data-theme="latte"] .category-btn.green-btn.active {
    color: #2e7d32 !important; 
    border-color: #2e7d32 !important;
    background: rgba(46, 125, 50, 0.1) !important;
}





/* =========================================================
   ACCOUNT PAGE: SETTINGS ICON SIZE FIX
   ========================================================= */

/* 1. Shrink the giant gear to perfectly match the old emoji size */
.icon-settings {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
    
    /* Optional: If your gear is black and you want it to adapt to dark themes, uncomment the next line */
    /* filter: invert(0.8); */
}

/* 2. Add a nice spin effect when you hover over the button */
/*#toggle-settings-btn:hover .icon-settings {
    transform: rotate(90deg) !important;
}*/

/* 3. Ensure the button itself cleanly wraps the new image */
#toggle-settings-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px !important;
}




/* =========================================================
   NAVBAR DUAL-LINE PROFILE TEXT (Alias + @username)
   ========================================================= */

/* 1. Restructure the container to hold two lines perfectly */
#logged-in-user {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    line-height: 1.1 !important;
    white-space: normal !important; /* Overpowers previous nowrap */
}

/* 2. Style the main Alias (adapts to bright/dark themes naturally) */
.user-profile .nav-alias-text {
    font-size: 0.9rem !important;
    font-weight: bold !important;
    color: var(--text-primary) !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 3. Style the @username (Always stays a soft secondary grey) */
.user-profile .nav-username-text {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    max-width: 120px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 4. Keep long names from squishing the mobile hamburger menu */
@media (max-width: 768px) {
    .user-profile .nav-alias-text, 
    .user-profile .nav-username-text {
        max-width: 85px !important; 
    }
}






/* =========================================================
   BRIGHT THEMES ONLY: CHAT HEADER ALIAS COLOR FIX
   ========================================================= */

/* Force the alias name in the active chat header to use the dark primary text */
[data-theme="light"] .chat-header strong,
[data-theme="latte"] .chat-header strong,
[data-theme="light"] .chat-header h2,
[data-theme="latte"] .chat-header h2,
[data-theme="light"] .chat-header h3,
[data-theme="latte"] .chat-header h3,
[data-theme="light"] .chat-header span,
[data-theme="latte"] .chat-header span {
    color: var(--text-primary) !important;
}

/* Keep the @username text subtle and gray */
[data-theme="light"] .chat-header .username-text,
[data-theme="latte"] .chat-header .username-text,
[data-theme="light"] .chat-header small,
[data-theme="latte"] .chat-header small {
    color: var(--text-secondary) !important;
}






/* =========================================================
   DARK THEMES ONLY: CHAT BUBBLE FIXES
   ========================================================= */

/* 1. Default Dark Theme - Sent & Received Bubbles */
html:not([data-theme="light"]):not([data-theme="latte"]):not([data-theme="midnight"]) .sent {
    background: #3b82f6 !important; /* Bright blue to match your Send button */
    color: #000000 !important;      /* Crisp black text */
    padding: 10px 15px !important;
    border-radius: 15px !important;
}

html:not([data-theme="light"]):not([data-theme="latte"]):not([data-theme="midnight"]) .received {
    background-color: #758491 !important; /* Dark grey */
    color: #000000 !important;      /* White text */
    padding: 10px 15px !important;
    border-radius: 15px !important;
}

/* 2. Midnight Ocean Theme - Sent & Received Bubbles */
[data-theme="midnight"] .sent {
    background-color: var(--sent-theme-btn)!important; /* Cyan */
    color: #0a192f !important;                  /* Deep navy text */
    padding: 10px 15px !important;
    border-radius: 15px !important;
}

[data-theme="midnight"] .received {
    background: #223c72 !important;             /* Soft navy bubble */
    color: var(--text-primary) !important;      /* White text */
    padding: 10px 15px !important;
    border-radius: 15px !important;
}


/* 4. Send Button */
.message-input-area button {
    background-color: var(--sent-theme-btn)!important;
    border: none !important;
}
html:not([data-theme="light"]):not([data-theme="latte"]) .message-input-area button {
    color: #000000 !important;
}
[data-theme="light"] .message-input-area button,
[data-theme="latte"] .message-input-area button {
    color: #ffffff !important;
}




/* =========================================================
   DARK THEMES ONLY: ACCOUNT SETTINGS INPUT COLORS
   ========================================================= */

/* 1. Remove the accidental background from the wrappers so the inputs stand out */
html:not([data-theme="light"]):not([data-theme="latte"]) #profile-settings-card > form > div {
    background: transparent !important;
    border: none !important;
}

/* 2. Default Dark Theme: Light Gray Input Areas */
html:not([data-theme="light"]):not([data-theme="latte"]):not([data-theme="midnight"]) #profile-settings-card input,
html:not([data-theme="light"]):not([data-theme="latte"]):not([data-theme="midnight"]) #profile-settings-card select {
    background-color: #2a2a2a !important; 
    color: #ffffff !important;
}

/* 3. Midnight Ocean Theme: Dark Blue Input Areas */
[data-theme="midnight"] #profile-settings-card input,
[data-theme="midnight"] #profile-settings-card select {
    background-color: #0a192f !important; 
    color: #e6f1ff !important;
}





/* =========================================================
   DISABLE DISAPPEARING BROWSER PASSWORD EYE
   ========================================================= */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none !important;
}



/* =========================================================
   MOBILE ONLY: FIX CALENDAR & EXPENSES MONTH NAVIGATION
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Ensure the headers distribute space perfectly without overlapping */
    .calendar-header, 
    .history-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
    }

    /* 2. Stop the buttons from wrapping text into huge awkward squares */
    .calendar-header button, 
    .history-header button,
    #prev-month,
    #next-month {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important; /* CRITICAL: Forces text to stay on one line */
        flex-shrink: 0 !important;      /* Prevents the buttons from being squished */
        line-height: 1.2 !important;
        border-radius: 6px !important;
    }

    /* 3. Scale the month title so it fits cleanly between the buttons */
    .calendar-header h2, 
    .history-header h2,
    #month-display {
        font-size: 1.15rem !important;
        text-align: center !important;
        margin: 0 !important;
        flex-grow: 1 !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   1. REMOVE BLUE HOVER FROM NEXT/PREV BUTTONS (All Themes)
   ========================================================= */
button.stats-nav-btn:hover, 
#stats-prev-month:hover, 
#stats-next-month:hover,
button.stats-nav-btn:active, 
#stats-prev-month:active, 
#stats-next-month:active,
.calendar-header button:hover, 
.history-header button:hover,
#prev-month:hover, 
#next-month:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: none !important;
}

/* =========================================================
   2. GLOBAL NAVBAR INDIVIDUAL HOVER COLORS (Desktop & Mobile)
   ========================================================= */
/* Overrides the blanket color so each link uses its own brand color */

/* Earnings -> Always Green */
.site-nav a[href*="index.html"]:hover .nav-label,
.site-nav a[href*="index.html"].active .nav-label {
    color: #00cc44 !important;
}

/* Expenses -> Always Red */
.site-nav a[href*="expenses.html"]:hover .nav-label,
.site-nav a[href*="expenses.html"].active .nav-label {
    color: #ff5252 !important;
}

/* Chat & Brag -> Always Blue */
.site-nav a[href*="chat_n_brag.html"]:hover .nav-label,
.site-nav a[href*="chat_n_brag.html"].active .nav-label {
    color: #00b0ff !important;
}

/* Schedule -> Always Yellow */
.site-nav a[href*="schedule.html"]:hover .nav-label,
.site-nav a[href*="schedule.html"].active .nav-label {
    color: #00b0ff !important;
}

/* =========================================================
   MOBILE ONLY: PIN CHAT HEADER (Keyboard Scroll Fix)
   ========================================================= */
/*@media (max-width: 768px) {
    body:has(.chat-container) {
        overflow: hidden !important;
        height: 100dvh !important;
    }
    
    .chat-header {
        flex-shrink: 0 !important; 
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: var(--card-bg) !important;
    }
}*/

/* =========================================================
   MOBILE ONLY: BULLETPROOF CHAT KEYBOARD LOCK
   ========================================================= */
@media (max-width: 768px) {
    /* 1. Lock BOTH HTML and BODY to absolutely forbid the browser from scrolling */
    html:has(.chat-container),
    body:has(.chat-container) {
        overflow: hidden !important;
        height: 100dvh !important;
        position: fixed !important; /* Neutralizes the browser's auto-scroll jump */
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }

    /* 2. Strip away the global margins that push the chat box off-screen */
    body:has(.chat-container) .main-content,
    body:has(.chat-container) .container {
        margin: 0 !important;
        padding: 0 !important;
        height: calc(100dvh - 65px) !important; /* Leaves exactly enough room for the navbar */
        max-width: 100% !important;
    }

    /* 3. Force the chat box to fit the exact screen constraints perfectly */
    .chat-container {
        height: 100% !important;
        min-height: unset !important;
        margin: 0 !important;
        border-radius: 0 !important; /* Removes curves for a flush, native app feel */
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        position: relative !important;
    }

    /* 4. Rigidly pin the alias header to the top of the chat window */
    .chat-header {
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
        background: var(--card-bg) !important;
    }
}
/* --- CHAT DATE DIVIDER --- */
.chat-date-divider {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    width: 100%;
}

.chat-date-divider span {
    background-color: var(--input-bg);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure bright themes override the dark badge gracefully */
[data-theme="light"] .chat-date-divider span,
[data-theme="latte"] .chat-date-divider span {
    background-color: var(--hover-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* =========================================================
   BRIGHT THEMES ONLY: CHAT BUBBLES (Light = Blue, Latte = Green)
   ========================================================= */

/* 1. LIGHT THEME: Sent Messages (Blue) */
[data-theme="light"] .message.sent {
    background-color: #00b0ff !important; /* Bright Blue */
    color: #ffffff !important;            
    padding: 10px 15px !important;
    border-radius: 15px 15px 0px 15px !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 2. LATTE THEME: Sent Messages (Green) */
[data-theme="latte"] .message.sent {
    background-color: #00c853 !important; /* Bright Green to match Send button */
    color: #ffffff !important;            
    padding: 10px 15px !important;
    border-radius: 15px 15px 0px 15px !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 3. RECEIVED MESSAGES: Soft Gray (Applies to both bright themes) */
[data-theme="light"] .message.received, 
[data-theme="latte"] .message.received {
    background-color: #e4e6eb !important; 
    color: #000000 !important;            
    padding: 10px 15px !important;
    border-radius: 15px 15px 15px 0px !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 4. TIMESTAMPS: Ensure tiny text stays readable */
[data-theme="light"] .message.sent .msg-time, 
[data-theme="latte"] .message.sent .msg-time {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .message.received .msg-time, 
[data-theme="latte"] .message.received .msg-time {
    color: rgba(0, 0, 0, 0.6) !important;
}