/* Modern Dashboard Style Sheet
   Designed for deep darkmode experience, custom HSL colors, and premium transitions. */

:root {
    /* Color Palette - Slate & Obsidian Base */
    --bg-darker: hsl(220, 15%, 8%);
    --bg-dark: hsl(220, 13%, 12%);
    --bg-panel: hsl(220, 12%, 16%);
    --bg-card: hsl(220, 10%, 20%);
    --bg-hover: hsl(220, 10%, 24%);
    
    /* Text Colors */
    --text-primary: hsl(210, 20%, 95%);
    --text-secondary: hsl(210, 14%, 72%);
    /* Manager note (2026-08-09 a11y sweep, Frederick QW3): raised from 55% so the
       small print (field hints, day summaries, mobile weekday headers) clears the
       4.5:1 contrast floor on every dark surface it lands on. One token, ~12 fixes. */
    --text-muted: hsl(210, 10%, 60.5%);
    
    /* Semantic Colors */
    --color-emerald: hsl(150, 70%, 50%);
    --color-emerald-dim: hsla(150, 70%, 50%, 0.15);
    --color-rose: hsl(355, 75%, 60%);
    --color-rose-dim: hsla(355, 75%, 60%, 0.15);
    --color-amber: hsl(35, 85%, 55%);
    --color-amber-dim: hsla(35, 85%, 55%, 0.15);
    --color-indigo: hsl(230, 80%, 65%);
    --color-indigo-dim: hsla(230, 80%, 65%, 0.15);
    
    /* Borders & Accents */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.12);
    --glow-indigo: 0 0 15px hsla(230, 80%, 65%, 0.35);
    
    /* Sizing & Layout */
    --sidebar-width: 280px;
    --inspector-width: 320px;
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', var(--font-sans);
}

/* Reset & Base Rules */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-darker);
    color: var(--text-primary);
    font-family: var(--font-sans);
    height: 100vh;
    overflow: hidden;
    line-height: 1.5;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Helper Utilities */
.text-emerald { color: var(--color-emerald); }
.text-rose { color: var(--color-rose); }
.text-amber { color: var(--color-amber); }
.text-muted { color: var(--text-muted); }
.text-bold { font-weight: 600; }
.btn-full { width: 100%; }

/* Layout Grid */
.app-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--inspector-width);
    height: 100vh;
    width: 100vw;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--border-radius-md);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--color-indigo);
    color: #fff;
    box-shadow: var(--glow-indigo);
}
.btn-primary:hover {
    background-color: hsl(230, 80%, 70%);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.btn-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-light);
}

.btn-danger {
    background-color: var(--color-rose);
    color: #fff;
}
.btn-danger:hover {
    background-color: hsl(355, 75%, 65%);
    transform: translateY(-1px);
}
.btn-danger:active {
    transform: translateY(0);
}


.btn-danger-link {
    background: none;
    border: none;
    color: var(--color-rose);
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 4px;
}
.btn-danger-link:hover {
    background-color: var(--color-rose-dim);
}

/* Sidebar Styling */
.sidebar {
    background-color: var(--bg-dark);
    border-right: 1px solid var(--border-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    overflow-y: auto;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidebar-logo i {
    font-size: 1.6rem;
}
.sidebar-logo h1 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sidebar-section h2 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.quick-stat-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    padding: 14px 16px;
    border-radius: var(--border-radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.quick-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.quick-stat-card .stat-value {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}
.quick-stat-card.highlight {
    background-color: var(--color-indigo-dim);
    border-color: rgba(99, 102, 241, 0.25);
}
.quick-stat-card.highlight .stat-value {
    color: hsl(230, 80%, 75%);
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.sidebar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.version-tag {
    background-color: var(--bg-panel);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Sidebar Settings Accordion */
.settings-details {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}
.settings-details > summary {
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease, color 0.2s ease;
    list-style: none; /* Hide default marker */
}
.settings-details > summary::-webkit-details-marker {
    display: none; /* Hide WebKit default marker */
}
.settings-details > summary:hover {
    background-color: var(--color-gray-800);
    color: var(--text-primary);
}
.settings-details > summary i.chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}
.settings-details[open] > summary i.chevron {
    transform: rotate(180deg);
}
.settings-content {
    padding: 4px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.settings-section-title {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Main Area Container */
.main-content {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-darker);
    overflow: hidden;
}

.main-header {
    height: 70px;
    border-bottom: 1px solid var(--border-color);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-dark);
}

.month-selector {
    display: flex;
    align-items: center;
    gap: 16px;
}
.btn-nav {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-nav:hover {
    background-color: var(--bg-panel);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.current-month-display {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    display: flex;
    gap: 8px;
}
.current-month-display #current-month-name {
    color: var(--text-primary);
}
.current-month-display #current-year-name {
    color: var(--text-muted);
}

.global-starting-balance {
    display: flex;
    align-items: center;
    gap: 12px;
}
.global-starting-balance label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.input-currency-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.input-currency-wrapper span {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
.input-currency-wrapper input {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px 8px 24px;
    border-radius: var(--border-radius-md);
    width: 110px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    transition: border-color 0.2s;
}
.input-currency-wrapper input:focus {
    border-color: var(--color-indigo);
}

/* Calendar Section Grid styling */
.calendar-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    overflow: hidden;
}

.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
}
.day-name {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 0;
}

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

/* Day Cell Specifics */
.calendar-day {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.calendar-day:hover {
    background-color: var(--bg-card);
    border-color: var(--border-light);
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.calendar-day.different-month {
    opacity: 0.35;
}
.calendar-day.today {
    border-color: var(--color-indigo);
    box-shadow: inset 0 0 0 1px var(--color-indigo);
}
.calendar-day.selected {
    background-color: var(--bg-hover);
    border-color: var(--text-secondary);
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.day-number {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.day-net-badge {
    font-size: 0.7rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}
.day-net-badge.positive {
    background-color: var(--color-emerald-dim);
    color: var(--color-emerald);
}
.day-net-badge.negative {
    background-color: var(--color-rose-dim);
    color: var(--color-rose);
}

/* List of items inside day cell */
.day-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 6px 0;
    overflow-y: auto;
    max-height: 52px;
}
.item-pill {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.item-pill.income {
    background-color: var(--color-emerald-dim);
    color: hsl(150, 75%, 70%);
}
.item-pill.expense {
    background-color: var(--color-rose-dim);
    color: hsl(355, 80%, 75%);
}

/* Category Pill Custom Colors */
.item-pill.category-savings {
    background-color: var(--color-emerald-dim);
    color: hsl(150, 75%, 70%);
}
.item-pill.category-misc {
    background-color: hsla(210, 20%, 55%, 0.15);
    color: hsl(210, 30%, 75%);
}
.item-pill.category-eatingout {
    background-color: hsla(25, 80%, 50%, 0.15);
    color: hsl(25, 80%, 70%);
}
.item-pill.category-groceries {
    background-color: hsla(170, 70%, 45%, 0.15);
    color: hsl(170, 70%, 70%);
}
.item-pill.category-date {
    background-color: hsla(320, 70%, 55%, 0.15);
    color: hsl(320, 80%, 75%);
}
.item-pill.category-shopping {
    background-color: hsla(270, 70%, 60%, 0.15);
    color: hsl(270, 80%, 75%);
}
.item-pill.category-bills {
    background-color: var(--color-rose-dim);
    color: hsl(355, 80%, 75%);
}

.item-pill .amount {
    font-weight: 600;
}

/* Rolling balance display inside cell */
.day-balance {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    text-align: right;
    font-weight: 500;
    color: var(--text-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 4px;
    margin-top: 2px;
}
.calendar-day.warning {
    background-color: var(--color-amber-dim);
    border-color: rgba(245, 158, 11, 0.3);
}
.calendar-day.warning .day-balance {
    color: var(--color-amber);
    font-weight: 700;
}

/* Inspector / Right Panel */
.inspector {
    background-color: var(--bg-dark);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inspector-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-darker);
}
.tab-btn {
    flex: 1;
    padding: 16px 8px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.tab-btn:hover {
    color: var(--text-primary);
}
.tab-btn.active {
    color: var(--color-indigo);
    border-bottom-color: var(--color-indigo);
    background-color: var(--bg-dark);
}

.tab-content {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: 24px;
    overflow-y: auto;
}
.tab-content.active {
    display: flex;
}

.inspector-header {
    margin-bottom: 20px;
}
.inspector-header h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
}

.inspector-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}
.day-summary-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.day-summary-card .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}
.day-summary-card .value {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
}

.day-summary-card .balance-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    width: 100%;
}
.day-summary-card .balance-input-wrapper span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 2px;
}
.day-summary-card .balance-input {
    background: none;
    border: 1px dashed var(--border-light);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    width: 80%;
    text-align: center;
    outline: none;
    padding: 2px 4px;
    transition: border-color 0.2s;
}
.day-summary-card .balance-input:focus {
    border-color: var(--color-indigo);
    border-style: solid;
}


.transaction-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}
.transaction-list-section h4 {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.transactions-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.no-data-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    padding: 30px 10px;
    gap: 12px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-md);
}
.no-data-placeholder i {
    font-size: 2rem;
    opacity: 0.5;
}

.transaction-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}
.transaction-card:hover {
    background-color: var(--bg-card);
}
.tx-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.tx-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tx-recurrence {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.tx-recurrence i {
    margin-right: 4px;
}
.tx-value-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tx-amount {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
}

.inspector-actions {
    margin-top: auto;
}

/* Recurring Rules List */
.rules-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rule-card {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-left: 3px solid transparent;
}
.rule-card.income {
    border-left-color: var(--color-emerald);
}
.rule-card.expense {
    border-left-color: var(--color-rose);
}
.rule-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.rule-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rule-schedule {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-lg);
    width: 480px;
    max-width: 90%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.open .modal-content {
    transform: translateY(0);
}

.modal-header {
    background-color: var(--bg-dark);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
}
.btn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
    /* Manager note (2026-08-09, Frederick QW9): the icon alone was a ~17px hit
       target. A 44px box with negative margin gives a real thumb target without
       nudging the layout. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: -10px -10px -10px 0;
}
.btn-close:hover {
    color: var(--text-primary);
}

.modal-form {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.form-group input, 
.form-group select {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: var(--border-radius-md);
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    transition: border-color 0.2s;
}
.form-group input:focus, 
.form-group select:focus {
    border-color: var(--color-indigo);
}

.field-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
}

/* Savings Tracker Styles */
.highlight-green {
    background-color: var(--color-emerald-dim) !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
}
.highlight-green .stat-value {
    color: hsl(150, 75%, 75%) !important;
}
.savings-history-container {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding-right: 4px;
}
.savings-month-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    font-size: 0.8rem;
}
.savings-month-row .month-name {
    color: var(--text-secondary);
    font-weight: 500;
}
.savings-month-row .month-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.savings-month-row .month-amount {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-emerald);
}
.savings-month-row .month-cumulative {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Make Recurring Promotion Link */
.btn-convert-link {
    background: none;
    border: none;
    color: var(--color-indigo);
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.2s;
    font-family: var(--font-sans);
    font-weight: 500;
}
.btn-convert-link:hover {
    background-color: var(--color-indigo-dim);
    border-color: var(--color-indigo);
}

/* Cloud Sync Styles */
.sync-status-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    transition: all 0.3s;
}
.status-dot.disconnected {
    background-color: var(--text-muted);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}
.status-dot.connected {
    background-color: var(--color-emerald);
    box-shadow: 0 0 8px var(--color-emerald);
}
.status-dot.syncing {
    background-color: var(--color-indigo);
    box-shadow: 0 0 8px var(--color-indigo);
    animation: pulse-sync 1s infinite alternate;
}
@keyframes pulse-sync {
    0% { opacity: 0.4; }
    100% { opacity: 1; }
}

.sync-input {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: var(--border-radius-md);
    font-size: 0.85rem;
    font-family: var(--font-sans);
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sync-input:focus {
    border-color: var(--color-indigo);
    box-shadow: 0 0 5px hsla(230, 80%, 65%, 0.2);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    border-radius: var(--border-radius-sm);
}

/* What-If Purchase Simulator Button & Badges */
.btn-scenario {
    background: linear-gradient(135deg, hsl(250, 75%, 60%), hsl(280, 80%, 55%));
    color: #ffffff;
    border: none;
    width: 100%;
    padding: 10px 16px;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px hsla(260, 80%, 60%, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-scenario:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px hsla(260, 80%, 60%, 0.45);
}

.simulation-active-badge {
    background: hsla(260, 75%, 60%, 0.15);
    border: 1px solid hsla(260, 75%, 60%, 0.4);
    border-radius: var(--border-radius-md);
    padding: 8px 12px;
    font-size: 0.82rem;
    color: hsl(260, 90%, 80%);
    margin-top: 6px;
}

/* Bill Collision Banner */
.collision-banner {
    margin-bottom: 16px;
    border-radius: var(--border-radius-md);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}
.collision-banner.warning {
    background: hsla(355, 75%, 60%, 0.12);
    border: 1px solid hsla(355, 75%, 60%, 0.35);
    color: var(--color-rose);
}
.collision-banner.safe {
    background: hsla(150, 70%, 50%, 0.1);
    border: 1px solid hsla(150, 70%, 50%, 0.25);
    color: var(--color-emerald);
}
.collision-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.collision-banner .banner-title {
    font-weight: 600;
    font-family: var(--font-heading);
}

/* Simulated Transaction Pill on Calendar Grid */
.item-pill.simulated {
    background-color: hsla(270, 70%, 60%, 0.2);
    border: 1px solid hsl(270, 80%, 65%);
    color: hsl(270, 90%, 85%);
}

/* Scenario Modal Styles */
.modal-lg {
    max-width: 620px;
}

.scenario-schedule-container {
    background: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 12px;
}
.scenario-payments-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 140px;
    overflow-y: auto;
}
.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-panel);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
}
.payment-row .payment-num {
    font-weight: 600;
    color: hsl(260, 90%, 80%);
}

.scenario-impact-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius-md);
    padding: 14px;
    margin-bottom: 16px;
}
.impact-header {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.impact-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}
.impact-metric {
    background: var(--bg-card);
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
}
.impact-metric .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.impact-metric .value {
    font-weight: 700;
    font-size: 0.95rem;
    font-family: var(--font-heading);
}

.impact-alert-status {
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
}
.impact-alert-status.warning {
    background: hsla(355, 75%, 60%, 0.15);
    color: var(--color-rose);
    border: 1px solid hsla(355, 75%, 60%, 0.3);
}
.impact-alert-status.safe {
    background: hsla(150, 70%, 50%, 0.12);
    color: var(--color-emerald);
    border: 1px solid hsla(150, 70%, 50%, 0.25);
}

/* ==========================================
   Responsive Mobile & Tablet Design System
   ========================================== */

.mobile-nav-tabs {
    display: none;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-color);
    /* Manager note (2026-08-09 mobile sweep): safe-area padding keeps the ribbon
       clear of phone notches and rounded corners when saved to a home screen. */
    padding: calc(6px + env(safe-area-inset-top, 0px)) 6px 6px;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.mobile-tab-btn {
    flex: 1;
    /* 44px minimum touch height, the accessibility floor for tap targets. */
    min-height: 44px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    /* Manager note (2026-08-09, Frederick QW4): 0.72rem + nowrap keeps each label
       on ONE line even at 320px wide. That matters because the month bar below is
       stuck at a fixed offset equal to a one-line ribbon (56px); if a label wrapped,
       the ribbon would grow and cover the month arrows (SC 2.4.11). min-width and
       ellipsis are the safety net so a long label never forces a sideways scroll. */
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.mobile-tab-btn.active {
    background: var(--color-indigo-dim);
    /* Frederick QW2: hsl(230,80%,65%) was 3.15:1 on the dim fill. 73.5% = 4.59:1. */
    color: hsl(230, 80%, 73.5%);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Manager note (2026-08-09 a11y sweep):
   QW7. The auth modal's Sign In tab had `background: none` and NO color, so it
   fell through to the browser's ButtonText black on a dark panel (1.41:1, the
   label was basically invisible on first paint). The class now owns the color for
   both tabs so it is readable before any JS runs.
   QW8. `.text-secondary` is used in markup (e.g. the Savings Bucket empty state)
   but was never defined, so that text inherited near-white on a near-white panel
   (1.07:1). Defining it here makes it the intended muted grey. */
.auth-tab-btn { color: var(--text-muted); }
.auth-tab-btn.active { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

/* QW5. There was not a single focus ring in the stylesheet. This gives keyboard
   users a strong, high-contrast indicator on every interactive control. */
:where(button, [href], input, select, summary, [tabindex]):focus-visible {
    outline: 2px solid hsl(230, 80%, 73.5%);
    outline-offset: 2px;
}

/* Tablet Layout (<= 1024px) */
@media (max-width: 1024px) {
    .app-container {
        grid-template-columns: 240px 1fr 280px;
    }
    
    .sidebar {
        padding: 16px;
        gap: 20px;
    }
    
    .inspector {
        padding: 16px;
    }
}

/* Mobile & Small Screen Layout (<= 900px) */
@media (max-width: 900px) {
    /* Manager note (2026-08-09 mobile sweep): on phones the DOCUMENT scrolls, not
       the body box. The old setup (body pinned to 100vh and scrolling its own
       overflow) is the exact combination that breaks position sticky in Safari,
       which is why the tab ribbon never stayed put while scrolling. Letting the
       page flow at its natural height makes the sticky ribbon actually stick. */
    body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
    }

    /* Desktop pins these two as internal scroll panes (overflow hidden). On mobile
       they must grow tall and let the single page scroll carry everything, or any
       sticky child inside them gets trapped and scrolls away with the content. */
    .main-content,
    .calendar-section {
        overflow: visible;
        height: auto;
    }

    .app-container {
        display: flex;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        /* 100 percent, not 100vw: 100vw counts the scrollbar area too and caused
           a sideways wiggle on phones (part of the reported glitchiness). */
        width: 100%;
    }

    .mobile-nav-tabs {
        display: flex;
    }

    /* Manager note (2026-08-09, Frederick QW5): when the browser scrolls a
       freshly focused control into view, keep it clear of the sticky ribbon plus
       month bar instead of parking it underneath them (SC 2.4.11). */
    .main-header, .calendar-day, .btn, .tab-btn, .mobile-tab-btn {
        scroll-margin-top: 120px;
    }

    /* Manager note (2026-08-09 mobile sweep): the month bar (prev and next arrows
       plus the month name) rides sticky right underneath the tab ribbon, so both
       layers of navigation stay reachable however far down the calendar you are.
       It tucks under the ribbon by a hair and sits at a lower z-index so the
       ribbon always wins the overlap. */
    .main-header {
        position: sticky;
        top: calc(56px + env(safe-area-inset-top, 0px));
        z-index: 90;
        height: auto;
        min-height: 54px;
        background-color: var(--bg-dark);
    }

    .sidebar,
    .inspector {
        width: 100%;
        max-width: 100%;
        border: none;
        box-shadow: none;
        height: auto;
        overflow-y: visible;
    }

    /* Tab-based section switching on mobile.
       Manager note (2026-08-09, Frederick QW1 fix): these rules used to name
       .inspector-panel, a class that exists nowhere in the HTML (the drawer is
       .inspector). So the Day Details drawer never actually hid, it just stacked
       under the calendar, and the ribbon's Calendar-active state was a lie. Every
       selector now points at the real .inspector element, so exactly one view
       shows at a time and the aria-pressed state matches what is on screen. */
    .app-container:not(.view-sidebar):not(.view-inspector) .sidebar,
    .app-container:not(.view-sidebar):not(.view-inspector) .inspector,
    .app-container.view-calendar .sidebar,
    .app-container.view-calendar .inspector {
        display: none !important;
    }

    .app-container.view-sidebar .main-content,
    .app-container.view-sidebar .inspector {
        display: none !important;
    }

    .app-container.view-inspector .main-content,
    .app-container.view-inspector .sidebar {
        display: none !important;
    }

    /* Calendar Grid Adjustments for Mobile */
    .calendar-section {
        padding: 8px;
    }

    .calendar-grid-header .day-name {
        padding: 6px 2px;
        font-size: 0.68rem;
    }

    .calendar-day {
        min-height: 68px;
        padding: 4px;
    }

    .day-number {
        font-size: 0.75rem;
    }

    /* Manager note (2026-08-09, Frederick QW6): the dead .tx-pill /
       .day-transactions / .day-balance-footer rules lived here. Those classes
       exist nowhere in the DOM (the real nodes are .day-items and .item-pill), so
       the rules never applied. Deleted rather than renamed, because renaming would
       have switched on a 0.6rem (9.6px) pill on phones, worse than what shipped. */

    /* Main Header Compact */
    .main-header {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .current-month-display {
        font-size: 1.1rem;
    }

    /* Modals Responsive */
    .modal-content {
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 88vh;
        margin: 12px auto;
        padding: 16px;
        overflow-y: auto;
    }

    .form-row {
        flex-direction: column;
        gap: 10px;
    }

}

/* Extra Small Phones (<= 480px) */
@media (max-width: 480px) {
    .calendar-grid-header .day-name {
        font-size: 0.62rem;
        letter-spacing: 0;
    }

    .calendar-day {
        min-height: 58px;
        padding: 2px;
    }

    .day-number {
        font-size: 0.7rem;
    }
    /* (dead .tx-pill rules removed here too, Frederick QW6) */
}