/**
 * Jottem - Modern, friendly tracking app styles
 * Built on PicoCSS with custom overrides
 * 
 * Design principles:
 * - Sunny, optimistic feel with #FFD447 as brand color
 * - Smooth fluid responsiveness (no harsh breakpoints)
 * - WCAG AA compliant contrast ratios
 * - Subtle animations for delight
 * - Clean, uncluttered interface
 */

/* ==========================================================================
   Color Palette & CSS Custom Properties
   ========================================================================== */
:root {
    /* Brand colors - sunny yellow palette */
    --jottem-brand-50: #FFFBEB;
    --jottem-brand-100: #FEF3C7;
    --jottem-brand-200: #FDE68A;
    --jottem-brand-300: #FFD447;
    --jottem-brand-400: #FBBF24;
    --jottem-brand-500: #F59E0B;
    --jottem-brand-600: #D97706;
    --jottem-brand-700: #B45309;
    
    /* Semantic colors - light mode */
    --jottem-color-red: #EF4444;
    --jottem-color-orange: #F97316;
    --jottem-color-yellow: #EAB308;
    --jottem-color-green: #22C55E;
    --jottem-color-blue: #3B82F6;
    --jottem-color-purple: #8B5CF6;
    --jottem-color-pink: #EC4899;
    --jottem-color-gray: #6B7280;
    
    /* Surface colors - light mode */
    --jottem-surface-0: #FFFFFF;
    --jottem-surface-1: #FAFAFA;
    --jottem-surface-2: #F5F5F5;
    --jottem-surface-3: #E5E5E5;
    --jottem-text-primary: #171717;
    --jottem-text-secondary: #525252;
    --jottem-text-muted: #737373;
    --jottem-border: #E5E5E5;
    --jottem-border-subtle: #F0F0F0;
    
    /* Shadows - light mode */
    --jottem-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --jottem-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --jottem-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --jottem-shadow-glow: 0 0 0 3px rgba(255, 212, 71, 0.3);
    
    /* Layout */
    --jottem-icon-size: 1.25rem;
    --jottem-radius-sm: 0.75rem;
    --jottem-radius-md: 1rem;
    --jottem-radius-lg: 1.5rem;
    --jottem-radius-xl: 2rem;
    --jottem-radius-full: 9999px;
    
    /* Transitions */
    --jottem-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --jottem-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --jottem-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* PicoCSS overrides - light mode */
    --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Enable fluid typography and spacing */
    --pico-font-size: clamp(0.875rem, 0.8rem + 0.4vw, 1.125rem);
    --pico-line-height: 1.6;
    --pico-border-radius: var(--jottem-radius-md);
    --pico-spacing: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    --pico-typography-spacing-vertical: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    
    /* Primary color mapping */
    --pico-primary: var(--jottem-brand-600);
    --pico-primary-hover: var(--jottem-brand-700);
    --pico-primary-focus: var(--jottem-shadow-glow);
    --pico-primary-background: var(--jottem-brand-400);
    --pico-primary-border: var(--jottem-brand-400);
    --pico-primary-inverse: var(--jottem-text-primary);
    
    /* Background & text */
    --pico-background-color: var(--jottem-surface-1);
    --pico-color: var(--jottem-text-primary);
    --pico-muted-color: var(--jottem-text-muted);
    --pico-border-color: var(--jottem-border);
    
    /* Card/article backgrounds */
    --pico-card-background-color: var(--jottem-surface-0);
    --pico-card-border-color: var(--jottem-border-subtle);
    --pico-card-box-shadow: var(--jottem-shadow-sm);
    
    /* Form elements */
    --pico-form-element-background-color: var(--jottem-surface-0);
    --pico-form-element-border-color: var(--jottem-border);
    --pico-form-element-focus-color: var(--jottem-brand-400);
    
    /* Table */
    --pico-table-border-color: var(--jottem-border-subtle);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* Semantic colors - dark mode (slightly brighter for visibility) */
        --jottem-color-red: #F87171;
        --jottem-color-orange: #FB923C;
        --jottem-color-yellow: #FACC15;
        --jottem-color-green: #4ADE80;
        --jottem-color-blue: #60A5FA;
        --jottem-color-purple: #A78BFA;
        --jottem-color-pink: #F472B6;
        --jottem-color-gray: #9CA3AF;
        
        /* Surface colors - dark mode */
        --jottem-surface-0: #1A1A1A;
        --jottem-surface-1: #0F0F0F;
        --jottem-surface-2: #262626;
        --jottem-surface-3: #404040;
        --jottem-text-primary: #FAFAFA;
        --jottem-text-secondary: #D4D4D4;
        --jottem-text-muted: #A3A3A3;
        --jottem-border: #404040;
        --jottem-border-subtle: #2A2A2A;
        
        /* Shadows - dark mode */
        --jottem-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
        --jottem-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
        --jottem-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
        --jottem-shadow-glow: 0 0 0 3px rgba(255, 212, 71, 0.25);
        
        /* PicoCSS overrides - dark mode */
        --pico-primary: var(--jottem-brand-300);
        --pico-primary-hover: var(--jottem-brand-400);
        --pico-primary-background: var(--jottem-brand-400);
        --pico-primary-inverse: var(--jottem-text-primary);
        
        --pico-background-color: var(--jottem-surface-1);
        --pico-color: var(--jottem-text-primary);
        --pico-muted-color: var(--jottem-text-muted);
        --pico-border-color: var(--jottem-border);
        
        --pico-card-background-color: var(--jottem-surface-0);
        --pico-card-border-color: var(--jottem-border-subtle);
        
        --pico-form-element-background-color: var(--jottem-surface-2);
        --pico-form-element-border-color: var(--jottem-border);
    }
}

/* ==========================================================================
   Base & Typography (Fluid)
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    background: var(--jottem-surface-1);
    min-height: 100vh;
    /* Fluid font size already set in layout via --pico-font-size */
}

/* Fluid container with comfortable max-width */
.container {
    max-width: min(72rem, 100% - clamp(1rem, 3vw, 3rem));
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 3vw, 2rem);
}

/* Fluid spacing utility */
:root {
    --fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
    --fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --fluid-md: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
    --fluid-lg: clamp(1rem, 0.75rem + 1.5vw, 2rem);
    --fluid-xl: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Headings with personality */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--jottem-text-primary);
}

/* Links with smooth transitions */
a {
    color: var(--pico-primary);
    text-decoration: none;
    transition: color var(--jottem-transition-fast);
}

a:hover {
    color: var(--pico-primary-hover);
}

/* ==========================================================================
   Focus States (WCAG Compliant)
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--jottem-brand-400);
    outline-offset: 2px;
    border-radius: var(--jottem-radius-sm);
}

/* ==========================================================================
   Buttons - Friendly & Tactile
   ========================================================================== */
button,
[type="button"],
[type="submit"],
[type="reset"],
a[role="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 500;
    border-radius: var(--jottem-radius-md);
    margin-bottom: 0; /* Override PicoCSS */
    transition: 
        background-color var(--jottem-transition-fast),
        border-color var(--jottem-transition-fast),
        color var(--jottem-transition-fast),
        transform var(--jottem-transition-fast),
        box-shadow var(--jottem-transition-fast);
    cursor: pointer;
}

/* Primary button - sunny yellow */
button:not(.outline):not(.secondary):not(.contrast):not([class*="danger"]),
[type="submit"]:not(.outline):not(.secondary) {
    background: var(--jottem-brand-400);
    border-color: var(--jottem-brand-400);
    color: var(--jottem-text-primary);
}

button:not(.outline):not(.secondary):not(.contrast):not([class*="danger"]):hover,
[type="submit"]:not(.outline):not(.secondary):hover {
    background: var(--jottem-brand-500);
    border-color: var(--jottem-brand-500);
    transform: translateY(-1px);
    box-shadow: var(--jottem-shadow-md);
}

button:not(.outline):not(.secondary):not(.contrast):not([class*="danger"]):active,
[type="submit"]:not(.outline):not(.secondary):active {
    transform: translateY(0);
    box-shadow: none;
}

/* Outline button */
button.outline,
a[role="button"].outline {
    background: transparent;
    border: 1px solid var(--jottem-border);
    color: var(--jottem-text-primary);
}

button.outline:hover,
a[role="button"].outline:hover {
    background: var(--jottem-surface-2);
    border-color: var(--jottem-border);
    color: var(--jottem-text-primary);
}

/* Ghost/text button - no background, no border */
button.ghost,
a[role="button"].ghost,
.btn-ghost {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--jottem-text-muted);
    padding: 0.25rem 0.5rem;
    font-weight: 500;
}

button.ghost:hover,
a[role="button"].ghost:hover,
.btn-ghost:hover {
    background: var(--jottem-surface-2) !important;
    color: var(--jottem-text-primary);
}

/* Dark mode: tone down bright buttons */
@media (prefers-color-scheme: dark) {
    button:not(.outline):not(.secondary):not(.contrast):not([class*="danger"]):not(.ghost):not(.btn-ghost),
    [type="submit"]:not(.outline):not(.secondary) {
        background: var(--jottem-brand-600);
        border-color: var(--jottem-brand-600);
    }

    button:not(.outline):not(.secondary):not(.contrast):not([class*="danger"]):not(.ghost):not(.btn-ghost):hover,
    [type="submit"]:not(.outline):not(.secondary):hover {
        background: var(--jottem-brand-700);
        border-color: var(--jottem-brand-700);
    }
}

/* Danger button */
button.danger,
button[class*="danger"] {
    background: var(--jottem-color-red);
    border-color: var(--jottem-color-red);
    color: #fff;
}

button.danger:hover,
button[class*="danger"]:hover {
    background: color-mix(in srgb, var(--jottem-color-red) 85%, black);
    border-color: color-mix(in srgb, var(--jottem-color-red) 85%, black);
}

button.danger:active,
button[class*="danger"]:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Icon in buttons */
button i.ph,
a[role="button"] i.ph {
    font-size: 1.125em;
    flex-shrink: 0;
}

/* ==========================================================================
   Form Elements - Clean & Modern with consistent heights
   ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="date"]) {
    height: 2.5rem;
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border);
    border-radius: var(--jottem-radius-md);
    transition: 
        border-color var(--jottem-transition-fast),
        box-shadow var(--jottem-transition-fast);
}

select {
    height: 2.5rem;
    padding: 0 0.75rem;
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border);
    border-radius: var(--jottem-radius-md);
    transition: 
        border-color var(--jottem-transition-fast),
        box-shadow var(--jottem-transition-fast);
}


input[type="date"] {
    height: 2.5rem;
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border);
    border-radius: var(--jottem-radius-md);
}

textarea {
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border);
    border-radius: var(--jottem-radius-md);
    transition: 
        border-color var(--jottem-transition-fast),
        box-shadow var(--jottem-transition-fast);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--jottem-brand-400);
    box-shadow: var(--jottem-shadow-glow);
}

/* Checkbox & Radio - custom styling */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--jottem-brand-400);
}

/* Override PicoCSS inline-block on checkbox/radio labels */
/* Removed - using default block behavior */

/* Labels */
label {
    font-weight: 500;
    color: var(--jottem-text-primary);
    margin-bottom: 0.25rem;
}

label > small {
    font-weight: 400;
    color: var(--jottem-text-muted);
}

/* Remove margin from inline form elements */
.inline {
    margin-bottom: 0;
}

/* Table form elements */
table [type="button"],
table [type="reset"],
table [type="submit"],
table input:not([type="checkbox"], [type="radio"]),
table select,
table textarea {
    margin-bottom: 0;
}

/* ==========================================================================
   Cards & Articles - Soft & Elevated
   ========================================================================== */
article {
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border-subtle);
    border-radius: var(--jottem-radius-lg);
    box-shadow: var(--jottem-shadow-sm);
    padding: var(--fluid-lg);
}

article > header {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--jottem-border-subtle);
}

article > header:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

article > footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jottem-border-subtle);
}

/* ==========================================================================
   Navigation - Clean & Minimal
   ========================================================================== */
.main-nav {
    padding-block: 0.75rem;
    margin-bottom: 1rem;
}

.main-nav ul {
    gap: 0.5rem;
}

.main-nav a {
    padding: 0.5rem 0.75rem;
    border-radius: var(--jottem-radius-md);
    font-weight: 500;
    color: var(--jottem-text-secondary);
    transition: 
        color var(--jottem-transition-fast),
        background var(--jottem-transition-fast);
}

.main-nav a:hover {
    color: var(--jottem-text-primary);
    background: var(--jottem-surface-2);
}

.main-nav a[aria-current="page"] {
    color: var(--jottem-text-primary);
    background: var(--jottem-brand-100);
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
    .main-nav a[aria-current="page"] {
        background: color-mix(in srgb, var(--jottem-brand-400) 20%, transparent);
    }
}

/* Logo styling */
.app-logo {
    fill: var(--jottem-brand-500);
    stroke: var(--jottem-brand-500);
    transition: 
        fill var(--jottem-transition-fast), 
        stroke var(--jottem-transition-fast),
        transform var(--jottem-transition-fast);
}

.nav-logo {
    height: 1.75rem;
    width: auto;
    vertical-align: middle;
}

.main-nav a:hover .nav-logo,
.main-nav a:hover .app-logo {
    fill: var(--jottem-brand-600);
    stroke: var(--jottem-brand-600);
    transform: scale(1.05);
}

/* User dropdown - CSS-only with :focus-within */
/* Wrapper */
.main-nav .dropdown {
    position: relative;
}

/* The menu */
.main-nav .dropdown-menu {
    position: absolute;
    right: 0; /* guaranteed right alignment */
    display: none;
    background: var(--jottem-surface-0);
    border-radius: var(--jottem-radius-md);
    padding: 0.25rem;
    box-shadow: var(--jottem-shadow-lg);
    min-width: 12rem;
    max-width: 90vw; /* prevent overflow on very small screens */
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    z-index: 100;
}

/* Toggle menu on focus/keyboard and when open class is present */
.main-nav .dropdown:focus-within .dropdown-menu,
.main-nav .dropdown.dropdown-open .dropdown-menu {
    display: block;
}

/* Dropdown toggle button - use ghost class, add icon styling */
.main-nav .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.main-nav .dropdown-toggle i {
    font-size: 0.875rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.main-nav .dropdown.dropdown-open .dropdown-toggle i {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .main-nav .dropdown-menu {
        min-width: 8rem;
        right: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
}

.dropdown-menu li {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.dropdown-menu a,
.dropdown-menu button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--jottem-radius-sm);
    text-align: left;
    color: var(--jottem-text-primary);
    background: transparent;
    border: none;
    box-sizing: border-box;
    margin: 0;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
    background: var(--jottem-surface-2);
}

/* Ensure form buttons inside dropdown are full width */
.dropdown-menu form {
    width: 100%;
    display: block;
}

.dropdown-menu .form-inline {
    display: block;
    width: 100%;
}

/* Dropdown component positioning */
.dropdown {
    position: relative;
}

.dropdown-menu-positioned {
    position: absolute;
    top: 100%;
    z-index: 50;
}

.dropdown-menu-align-left {
    left: 0;
}

.dropdown-menu-align-right {
    right: 0;
}

.dropdown-menu-width-48 {
    min-width: 12rem;
}

.dropdown-menu-width-custom {
    min-width: var(--dropdown-width, 12rem);
}

.dropdown-menu-width-custom[data-width] {
    min-width: attr(data-width);
}

/* Logout styling - ghost button with red color */
.logout-button.ghost {
    color: var(--jottem-color-red) !important;
    font: inherit;
    cursor: pointer;
}

.logout-button.ghost:hover {
    background: color-mix(in srgb, var(--jottem-color-red) 10%, transparent) !important;
    color: var(--jottem-color-red) !important;
}

/* Mobile navigation - hide nav links and show in dropdown on small screens */
.mobile-nav-link {
    display: none;
}

.dropdown-divider {
    display: none;
    border-top: 1px solid var(--jottem-border);
    margin: 0.25rem 0;
    padding: 0;
    height: 1px;
    min-height: 1px;
    max-height: 1px;
}

@media (max-width: 576px) {
    .nav-links {
        display: none;
    }
    
    .mobile-nav-link {
        display: block;
    }
    
    .dropdown-divider {
        display: block;
    }
}

/* ==========================================================================
   Tables - Clean & Spacious
   ========================================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
}

table th {
    font-weight: 600;
    color: var(--jottem-text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--jottem-border);
}

table td {
    padding: var(--fluid-md);
    vertical-align: middle;
    border-bottom: 1px solid var(--jottem-border-subtle);
}

table tr:last-child td {
    border-bottom: none;
}

/* Hover effect on table rows */
table tbody tr {
    transition: background var(--jottem-transition-fast);
}

table tbody tr:hover {
    background: color-mix(in srgb, var(--jottem-surface-2) 50%, transparent);
}

.table-cell-right {
    text-align: right;
}

.table-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;
    align-items: center;
}

/* Icon-only buttons in table actions - more rounded */
.table-actions button.outline,
.table-actions-header button.outline {
    border-radius: var(--jottem-radius-lg);
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table-actions-header {
    text-align: right;
}

.table-actions-minimal {
    width: 1%;
    padding: 0;
}

/* Column classes */
.col-label {
    width: auto;
}

.col-amount {
    width: 1%;
    white-space: nowrap;
}

.col-actions {
    width: 1%;
    white-space: nowrap;
}

/* ==========================================================================
   Table Sections - Shared rounded container styling
   ========================================================================== */
.table-section,
.entries-section,
.day-entries-section {
    background: var(--jottem-surface-0);
    border-radius: var(--jottem-radius-lg);
    border: 1px solid var(--jottem-border-subtle);
    overflow-x: auto;
    margin-bottom: var(--fluid-md);
}

.table-section table,
.entries-section table,
.day-entries-section table {
    margin: 0;
}

/* Table headers in table sections - consistent grey background */
.table-section th,
.entries-section th,
.day-entries-section th {
    background: var(--jottem-surface-1);
}

/* ==========================================================================
   Entry & Item Cells - Visual Identity
   ========================================================================== */
.entry-item-cell {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.entry-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--jottem-radius-lg);
    background: transparent;
    flex-shrink: 0;
    transition: transform var(--jottem-transition-fast);
}

.entry-icon-wrapper i {
    font-size: 1.125rem;
    color: var(--jottem-text-secondary);
}

/* Color variants for entry icons */
.entry-item-cell[data-item-color="red"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-red) 15%, transparent);
}
.entry-item-cell[data-item-color="red"] .entry-icon-wrapper i {
    color: var(--jottem-color-red);
}

.entry-item-cell[data-item-color="orange"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-orange) 15%, transparent);
}
.entry-item-cell[data-item-color="orange"] .entry-icon-wrapper i {
    color: var(--jottem-color-orange);
}

.entry-item-cell[data-item-color="yellow"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-yellow) 15%, transparent);
}
.entry-item-cell[data-item-color="yellow"] .entry-icon-wrapper i {
    color: var(--jottem-color-yellow);
}

.entry-item-cell[data-item-color="green"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-green) 15%, transparent);
}
.entry-item-cell[data-item-color="green"] .entry-icon-wrapper i {
    color: var(--jottem-color-green);
}

.entry-item-cell[data-item-color="blue"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-blue) 15%, transparent);
}
.entry-item-cell[data-item-color="blue"] .entry-icon-wrapper i {
    color: var(--jottem-color-blue);
}

.entry-item-cell[data-item-color="purple"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-purple) 15%, transparent);
}
.entry-item-cell[data-item-color="purple"] .entry-icon-wrapper i {
    color: var(--jottem-color-purple);
}

.entry-item-cell[data-item-color="pink"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-pink) 15%, transparent);
}
.entry-item-cell[data-item-color="pink"] .entry-icon-wrapper i {
    color: var(--jottem-color-pink);
}

.entry-item-cell[data-item-color="gray"] .entry-icon-wrapper {
    background: color-mix(in srgb, var(--jottem-color-gray) 15%, transparent);
}
.entry-item-cell[data-item-color="gray"] .entry-icon-wrapper i {
    color: var(--jottem-color-gray);
}

/* Entry content */
.entry-item-cell strong {
    font-weight: 600;
    color: var(--jottem-text-primary);
}

.entry-item-cell small {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    color: var(--jottem-text-muted);
    white-space: pre-line;
}

/* Amount cells */
.entry-amount-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.entry-amount {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--jottem-text-primary);
}

.entry-euro {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--jottem-text-muted);
}

/* ==========================================================================
   Day View - Main Interface
   ========================================================================== */
.day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fluid-md);
    flex-wrap: wrap;
    margin-bottom: var(--fluid-lg);
    padding: var(--fluid-md);
    background: var(--jottem-surface-0);
    border-radius: var(--jottem-radius-lg);
    border: 1px solid var(--jottem-border-subtle);
}

.day-header-left {
    display: flex;
    gap: var(--fluid-sm);
    align-items: baseline;
    flex-wrap: wrap;
}

.day-header-left h1 {
    margin: 0;
    font-size: clamp(1.125rem, 1rem + 1.5vw, 1.625rem);
    font-weight: 600;
}

.day-header-left h1 strong {
    color: var(--jottem-brand-600);
}

@media (prefers-color-scheme: dark) {
    .day-header-left h1 strong {
        color: var(--jottem-brand-400);
    }
}

.day-link-today {
    font-size: 0.875rem;
    color: var(--jottem-text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.day-link-today:hover {
    color: var(--pico-primary);
}

.day-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Date navigation */
.date-nav-group[role="group"] {
    display: inline-flex;
    align-items: center;
    background: var(--jottem-surface-2);
    border-radius: var(--jottem-radius-md);
    padding: 0.125rem;
    margin-bottom: 0;
    width: auto;
}

.date-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--jottem-text-secondary);
    border-radius: var(--jottem-radius-sm);
    transition: 
        background var(--jottem-transition-fast),
        color var(--jottem-transition-fast);
}

.date-nav-btn:hover {
    background: var(--jottem-surface-0);
    color: var(--jottem-text-primary);
}

.date-nav-btn i {
    font-size: 1rem;
}

.date-nav-group button[data-date-picker-toggle] {
    padding: 0.375rem 0.5rem;
    min-width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    font: inherit;
    color: var(--jottem-text-secondary);
    border-radius: var(--jottem-radius-sm);
}

.date-nav-group button[data-date-picker-toggle]:hover {
    background: var(--jottem-surface-0);
    color: var(--jottem-text-primary);
}

.date-input-hidden {
    display: none;
}

.date-nav-group input[type="date"][data-date-picker-input]:not(.date-input-hidden),
.date-nav-group input[type="date"].date-input-visible {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    height: 2rem;
    font-size: 0.875rem;
    background: transparent;
    border: none;
    color: var(--jottem-text-primary);
}

/* New entry button */
.day-new-button {
    font-size: 0.9375rem;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    background: var(--jottem-brand-400);
    border-color: var(--jottem-brand-400);
    color: var(--jottem-text-primary);
    font-weight: 600;
    border-radius: var(--jottem-radius-full);
}

.day-new-button:hover {
    background: var(--jottem-brand-500);
    border-color: var(--jottem-brand-500);
}

/* Day entries section - override margin for day page */
.day-entries-section {
    margin-bottom: 0;
}

.day-entries-table {
    border-top: none;
}

/* Total row */
.day-total-row {
    background: var(--jottem-surface-2);
}

.day-total-row td {
    border-top: 1px solid var(--jottem-border);
    border-bottom: none;
}

.day-total-label {
    font-weight: 400;
    color: var(--jottem-text-muted);
    text-align: right;
    display: block;
}

/* Total amount button - uses ghost style */
.day-total-amount {
    font: inherit;
    font-weight: 500;
    text-align: right;
    margin: 0 !important;
    padding: 0.125rem 0.25rem !important;
}

.day-total-amount:disabled {
    cursor: default;
    opacity: 0.7;
}

/* ==========================================================================
   Reminders - Subtle Prominence
   ========================================================================== */
.reminder-form {
    display: contents;
}

.reminder-row {
    background: var(--jottem-brand-50);
}

@media (prefers-color-scheme: dark) {
    .reminder-row {
        background: color-mix(in srgb, var(--jottem-brand-400) 8%, var(--jottem-surface-0));
    }
}

.reminder-row td {
    border-bottom: 1px solid var(--jottem-border-subtle);
}

/* Remove border between reminder rows - they should look like one unit */
.reminder-row-meta td {
    border-bottom: none;
}

/* Add top border to first reminder row to separate from items above */
tbody > form:first-child .reminder-row-meta td,
tbody > form:first-of-type .reminder-row-meta td {
    border-top: 1px solid var(--jottem-border-subtle);
}

/* Reduce spacing - make reminder rows feel connected and closer to items above */
.reminder-row-meta td {
    padding-top: 0.375rem;
    padding-bottom: 0.250rem;
}

.reminder-row-inputs td {
    padding-top: 0.250rem;
}

.reminder-remark-cell {
    padding-left: calc(2.25rem + 1.875rem);
}

.reminder-remark-input,
.reminder-amount-input {
    margin-bottom: 0;
    height: 2.5rem;
}

.reminder-amount-input {
    text-align: right;
    min-width: 5rem;
}

/* Reminder ignore button - ensure outline style is applied */
.reminder-ignore-button.outline {
    background: transparent !important;
    border: 1px solid var(--jottem-border) !important;
    padding: 0.25rem 0.625rem !important;
    font-size: 0.8125rem;
    text-decoration: none !important;
    color: var(--jottem-text-primary);
}

.reminder-ignore-button.outline:hover {
    background: var(--jottem-surface-2) !important;
    border-color: var(--jottem-border) !important;
    color: var(--jottem-text-primary) !important;
}

.reminder-save-button {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
}

/* ==========================================================================
   Dialogs - Modern & Intuitive
   Reset PicoCSS dialog overrides that make it full-screen
   ========================================================================== */
dialog {
    /* Reset PicoCSS full-screen behavior */
    display: block;
    position: fixed;
    inset: 0;
    
    /* Reset PicoCSS width/height overrides to browser defaults */
    width: unset;
    min-width: unset;
    height: fit-content;
    min-height: unset;
    
    /* Set max constraints for responsive sizing */
    max-width: min(32rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    
    /* Centering */
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--jottem-radius-xl);
    background: var(--jottem-surface-0);
    box-shadow: var(--jottem-shadow-lg);
    overflow: hidden;
    
    /* Animation */
    animation: dialog-appear 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Reset PicoCSS overlay */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Dialog max-width variants */
dialog.dialog-sm {
    max-width: min(20rem, calc(100vw - 2rem));
}

dialog.dialog-md {
    max-width: min(24rem, calc(100vw - 2rem));
}

dialog.dialog-lg {
    max-width: min(32rem, calc(100vw - 2rem));
}

dialog.dialog-xl {
    max-width: min(40rem, calc(100vw - 2rem));
}

dialog.dialog-2xl {
    max-width: min(48rem, calc(100vw - 2rem));
}

@keyframes dialog-appear {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    animation: backdrop-appear 200ms ease-out;
}

@keyframes backdrop-appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reset PicoCSS width/height overrides - shared for dialog elements */
dialog article,
dialog article > .item-dialog-body,
dialog form {
    width: unset;
    min-width: unset;
    height: unset;
    min-height: unset;
}

dialog article {
    margin: 0;
    border: none;
    border-radius: var(--jottem-radius-xl);
    box-shadow: none;
    padding: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

/* Dialog article body - scrollable content area */
dialog article > .item-dialog-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

dialog article > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    margin: 0;
    border-bottom: 1px solid var(--jottem-border-subtle);
    background: var(--jottem-surface-1);
    border-radius: var(--jottem-radius-xl) var(--jottem-radius-xl) 0 0;
}

dialog article > header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--jottem-text-secondary);
}

dialog form {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Date input visible state */
.date-input-visible {
    display: inline-flex !important;
}

/* Dialog close button */
.dialog-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--jottem-text-muted);
    border-radius: var(--jottem-radius-sm);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.dialog-close-btn:hover {
    background: var(--jottem-surface-2) !important;
    color: var(--jottem-text-primary);
}

/* Dialog footer */
.dialog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0;
    background: var(--jottem-surface-1);
    border-top: 1px solid var(--jottem-border-subtle);
    border-radius: 0 0 var(--jottem-radius-xl) var(--jottem-radius-xl);
}

.dialog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dialog-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   Item Dialog Styles
   ========================================================================== */
.item-dialog-body {
    padding: var(--fluid-md, 1.25rem);
}

/* Item fields */
.item-field {
    margin-bottom: 1rem;
}

.item-field:last-child {
    margin-bottom: 0;
}

.item-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--jottem-text-secondary, #525252);
    margin-bottom: 0.375rem;
}

.item-field-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--jottem-text-muted, #737373);
}

/* Row layout for side-by-side fields */
.item-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .item-field-row {
        grid-template-columns: 1fr;
    }
}

/* Input styles */
.item-name-input,
.item-input,
.item-select,
.item-textarea {
    width: 100%;
    padding: 0 0.875rem;
    font-size: 0.9375rem;
    background: var(--jottem-surface-0, #fff);
    border: 1px solid var(--jottem-border, #e5e5e5);
    border-radius: var(--jottem-radius-md, 0.75rem);
    margin-bottom: 0;
    transition: 
        border-color var(--jottem-transition-fast, 150ms),
        box-shadow var(--jottem-transition-fast, 150ms);
}

/* Inputs need height, textareas don't */
.item-name-input,
.item-input,
.item-select {
    height: 2.5rem;
}

.item-textarea {
    padding: 0.625rem 0.875rem;
}

.item-name-input:focus,
.item-input:focus,
.item-select:focus,
.item-textarea:focus {
    border-color: var(--jottem-brand-400, #FFD447);
    box-shadow: var(--jottem-shadow-glow, 0 0 0 3px rgba(255, 212, 71, 0.3));
}

.item-name-input {
    font-size: 1rem;
    font-weight: 500;
}

.item-textarea {
    resize: vertical;
    min-height: 4rem;
}

/* Checkbox label */
.item-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.item-checkbox-label input[type="checkbox"] {
    margin: 0;
}

/* Advanced options toggle */
.item-advanced-toggle {
    margin-top: 1.25rem;
    border: 1px solid var(--jottem-border-subtle, #f0f0f0);
    border-radius: var(--jottem-radius-md, 0.75rem);
    overflow: hidden;
}

.item-advanced-toggle summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--jottem-text-muted, #737373);
    cursor: pointer;
    background: var(--jottem-surface-1, #fafafa);
    transition: background var(--jottem-transition-fast, 150ms);
    list-style: none;
}

.item-advanced-toggle summary::-webkit-details-marker {
    display: none;
}

.item-advanced-toggle summary::after {
    content: '';
    margin-left: auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--jottem-transition-fast, 150ms);
}

.item-advanced-toggle[open] summary::after {
    transform: rotate(45deg);
}

.item-advanced-toggle summary:hover {
    background: var(--jottem-surface-2, #f5f5f5);
}

.item-advanced-content {
    padding: 1rem;
    border-top: 1px solid var(--jottem-border-subtle, #f0f0f0);
}

/* Days picker */
.item-days-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.item-day-chip {
    display: inline-flex;
    cursor: pointer;
}

.item-day-chip input {
    display: none;
}

.item-day-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--jottem-text-muted, #737373);
    background: var(--jottem-surface-2, #f5f5f5);
    border-radius: var(--jottem-radius-full, 9999px);
    transition: 
        background var(--jottem-transition-fast, 150ms),
        color var(--jottem-transition-fast, 150ms);
}

.item-day-chip input:checked + span {
    background: var(--jottem-brand-400, #FFD447);
    color: var(--jottem-text-primary, #171717);
    font-weight: 600;
}

.item-day-chip:hover span {
    background: var(--jottem-surface-3, #e5e5e5);
}

.item-day-chip input:checked:hover + span {
    background: var(--jottem-brand-500, #F59E0B);
}

/* Color picker */
.item-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.item-color-picker input[type="radio"] {
    display: none;
}

/* Override Pico CSS [type=radio]~label display:inline-block and margin-inline-end with higher specificity */
.item-color-picker input[type="radio"] ~ label.item-color-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--jottem-radius-full, 9999px);
    background: var(--color, transparent);
    cursor: pointer;
    border: 2px solid transparent;
    margin-inline-end: 0; /* Override Pico CSS margin, we use gap in flex */
    transition: 
        transform var(--jottem-transition-fast, 150ms),
        border-color var(--jottem-transition-fast, 150ms),
        box-shadow var(--jottem-transition-fast, 150ms);
    opacity: 0.7;
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-none {
    background: var(--jottem-surface-2, #f5f5f5);
    color: var(--jottem-text-muted, #737373);
    border-color: var(--jottem-border, #e5e5e5);
}

/* Color variants for item color options */
.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-red {
    background: var(--jottem-color-red);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-orange {
    background: var(--jottem-color-orange);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-yellow {
    background: var(--jottem-color-yellow);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-green {
    background: var(--jottem-color-green);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-blue {
    background: var(--jottem-color-blue);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-purple {
    background: var(--jottem-color-purple);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-pink {
    background: var(--jottem-color-pink);
}

.item-color-picker input[type="radio"] ~ label.item-color-option.item-color-gray {
    background: var(--jottem-color-gray);
}

.item-color-picker input[type="radio"] ~ label.item-color-option:hover {
    transform: scale(1.1);
    opacity: 1;
}

.item-color-picker input[type="radio"]:checked + label.item-color-option {
    border-color: var(--jottem-text-primary, #171717);
    transform: scale(1.1);
    opacity: 1;
    box-shadow: var(--jottem-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

/* Submit button */
.item-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--jottem-brand-400, #FFD447);
    border: none;
    border-radius: var(--jottem-radius-full, 9999px);
    color: var(--jottem-text-primary, #171717);
    cursor: pointer;
    transition: 
        background var(--jottem-transition-fast, 150ms),
        transform var(--jottem-transition-fast, 150ms),
        box-shadow var(--jottem-transition-fast, 150ms);
}

.item-submit-btn:hover {
    background: var(--jottem-brand-500, #F59E0B);
    transform: translateY(-1px);
    box-shadow: var(--jottem-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.item-submit-btn i {
    font-size: 1.125em;
}

/* Dialog meta links - text links in footer */
.dialog-meta button,
.dialog-meta a {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--jottem-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    height: auto !important;
    line-height: 1.4;
}

.dialog-meta button:hover,
.dialog-meta a:hover {
    color: var(--jottem-text-primary);
    background: transparent !important;
}

.dialog-meta .danger-link {
    color: var(--jottem-color-red);
}

.dialog-meta .danger-link:hover {
    color: color-mix(in srgb, var(--jottem-color-red) 80%, black);
}

/* Dialog responsive */
@media (max-width: 28rem) {
    .dialog-footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dialog-meta {
        justify-content: center;
        order: 2;
    }
    
    .dialog-actions {
        order: 1;
    }
    
    .dialog-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* Amount input with preview */
.amount-input-wrapper {
    position: relative;
}

.amount-input {
    padding-right: 4rem;
}

.amount-preview {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: none;
    font-size: 0.875rem;
    color: var(--jottem-text-muted);
    background: var(--jottem-surface-2);
    padding: 0.125rem 0.375rem;
    border-radius: var(--jottem-radius-sm);
}

/* ==========================================================================
   Color Picker - Playful
   ========================================================================== */
.color-picker {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.color-picker input[type="radio"] {
    display: none;
}

.color-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--jottem-radius-full);
    cursor: pointer;
    border: 2px solid transparent;
    transition: 
        transform var(--jottem-transition-fast),
        border-color var(--jottem-transition-fast),
        box-shadow var(--jottem-transition-fast);
    opacity: 0.6;
}

.color-option-none {
    border-color: var(--jottem-border);
}

.color-picker input[type="radio"]:checked + .color-option {
    border-color: var(--jottem-text-primary);
    transform: scale(1.1);
    opacity: 1;
    box-shadow: var(--jottem-shadow-md);
}

.color-option:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* ==========================================================================
   Day picker container (prompt days)
   ========================================================================== */
.days-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.day-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: var(--jottem-surface-2);
    border-radius: var(--jottem-radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background var(--jottem-transition-fast);
}

.day-label:hover {
    background: var(--jottem-surface-3);
}

.day-label input[type="checkbox"]:checked + span {
    font-weight: 600;
}

/* ==========================================================================
   Onboarding - Welcoming
   ========================================================================== */
.onboarding-article {
    text-align: center;
    padding: var(--fluid-xl);
    max-width: 32rem;
    margin: var(--fluid-lg) auto;
    background: linear-gradient(
        135deg,
        var(--jottem-brand-50) 0%,
        var(--jottem-surface-0) 100%
    );
}

@media (prefers-color-scheme: dark) {
    .onboarding-article {
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--jottem-brand-400) 10%, var(--jottem-surface-0)) 0%,
            var(--jottem-surface-0) 100%
        );
    }
}

.onboarding-article header h2 {
    color: var(--jottem-brand-600);
    margin-bottom: 0.5rem;
}

@media (prefers-color-scheme: dark) {
    .onboarding-article header h2 {
        color: var(--jottem-brand-400);
    }
}

.onboarding-article p {
    color: var(--jottem-text-secondary);
    line-height: 1.7;
}

.onboarding-article footer button {
    margin-top: 1rem;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.alert {
    padding: 1rem;
    border-radius: var(--jottem-radius-md);
    margin-bottom: 1rem;
    border: 1px solid;
}

.alert-success {
    background: color-mix(in srgb, var(--jottem-color-green) 10%, transparent);
    border-color: color-mix(in srgb, var(--jottem-color-green) 30%, transparent);
    color: var(--jottem-color-green);
}

.alert-error {
    background: color-mix(in srgb, var(--jottem-color-red) 10%, transparent);
    border-color: color-mix(in srgb, var(--jottem-color-red) 30%, transparent);
    color: var(--jottem-color-red);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.form-constrained {
    max-width: 42rem;
    margin: 0 auto;
}

/* Footer layout utilities */
.footer-flex {
    display: flex;
    gap: 1rem;
}

.footer-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-flex-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-text-right {
    text-align: right;
}

.footer-text-center {
    text-align: center;
}

/* Form utilities */
.form-inline {
    display: inline;
    margin: 0;
}

.form-no-margin {
    margin: 0;
}

.btn-no-margin {
    margin: 0;
}

/* Success/info message styling */
.message-success {
    background: var(--pico-ins-color, #d4edda);
    border-color: var(--pico-ins-border-color, #c3e6cb);
    color: var(--pico-ins-color, #155724);
}

.message-info {
    color: var(--pico-ins-color, #28a745);
}

/* Status message */
.status-message {
    margin: 0;
}

.status-message.hidden {
    display: none;
}

/* Link button style */
.btn-link {
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    color: var(--pico-primary);
    cursor: pointer;
    font: inherit;
}

.form-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes highlightFade {
    0% {
        background-color: var(--jottem-brand-100);
    }
    100% {
        background-color: transparent;
    }
}

@media (prefers-color-scheme: dark) {
    @keyframes highlightFade {
        0% {
            background-color: color-mix(in srgb, var(--jottem-brand-400) 20%, transparent);
        }
        100% {
            background-color: transparent;
        }
    }
}

table tr.new td {
    animation: highlightFade 2s ease-out;
}

/* Subtle hover lift for clickable items */
.entry-item-cell:hover .entry-icon-wrapper {
    transform: scale(1.05);
}

/* ==========================================================================
   Responsive Fluid Adjustments
   Using container queries where supported, with fallback
   ========================================================================== */

/* Small screens - graceful stacking */
@media (max-width: 32rem) {
    .day-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .day-header-right {
        justify-content: space-between;
    }
}

/* Fluid table adjustments */
@media (max-width: 36rem) {
    table td,
    table th {
        padding: var(--fluid-sm) var(--fluid-md);
    }
    
    .entry-icon-wrapper {
        width: 2rem;
        height: 2rem;
    }
    
    .entry-icon-wrapper i {
        font-size: 1rem;
    }
    
    .entry-amount {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Entries Page
   ========================================================================== */
.entries-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fluid-md);
    flex-wrap: wrap;
    margin-bottom: var(--fluid-md);
}

.entries-header-left {
    display: flex;
    gap: var(--fluid-sm);
    align-items: baseline;
    flex-wrap: wrap;
}

.entries-header-left h1 {
    margin: 0;
    font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
    font-weight: 600;
}

.entries-count {
    font-size: 0.875rem;
    color: var(--jottem-text-muted);
}

/* Mobile spacing reduction - reduce space between nav and header to 25% */
@media (max-width: 576px) {
    .main-nav {
        margin-bottom: 0.25rem; /* 25% of 1rem */
        padding-block: 0.25rem; /* Reduced from 0.75rem for mobile */
    }
    
    /* Reduce any default spacing from PicoCSS on main element */
    main.container {
        padding-top: 0;
        margin-top: 0;
    }
}

/* ==========================================================================
   Guest Layout Styles
   ========================================================================== */
.guest-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        var(--jottem-brand-50, #FFFBEB) 0%,
        var(--jottem-surface-1, #fafafa) 50%,
        var(--jottem-surface-1, #fafafa) 100%
    );
}

@media (prefers-color-scheme: dark) {
    .guest-body {
        background: linear-gradient(
            135deg,
            color-mix(in srgb, var(--jottem-brand-400) 5%, var(--jottem-surface-1)) 0%,
            var(--jottem-surface-1, #0f0f0f) 50%,
            var(--jottem-surface-1, #0f0f0f) 100%
        );
    }
}

.guest-main {
    width: 100%;
    max-width: 24rem;
    padding: 1rem;
}

.guest-card {
    background: var(--jottem-surface-0, #fff);
    border-radius: var(--jottem-radius-xl, 1.5rem);
    box-shadow: var(--jottem-shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.12));
    border: 1px solid var(--jottem-border-subtle, #f0f0f0);
    overflow: hidden;
}

.guest-header {
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    background: var(--jottem-surface-1, #fafafa);
    border-bottom: 1px solid var(--jottem-border-subtle, #f0f0f0);
    margin: 0;
}

.guest-logo-link {
    display: inline-block;
    transition: transform var(--jottem-transition-fast, 150ms);
}

.guest-logo-link:hover {
    transform: scale(1.05);
}

.guest-logo {
    width: 3.5rem;
    height: 3.5rem;
    fill: var(--jottem-brand-500, #F59E0B);
    stroke: var(--jottem-brand-500, #F59E0B);
}

.guest-title {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--jottem-text-primary, #171717);
}

.guest-content {
    padding: 1.5rem;
}

.guest-content form {
    margin: 0;
}

.guest-content label {
    margin-bottom: 1rem;
}

.guest-content button[type="submit"] {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: var(--jottem-radius-full, 9999px);
}

.guest-content footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--jottem-border-subtle, #f0f0f0);
}

.guest-content footer a {
    font-size: 0.875rem;
    color: var(--jottem-text-muted, #737373);
}

.guest-content footer a:hover {
    color: var(--pico-primary);
}

.guest-footer {
    text-align: center;
    padding: 1.5rem 1rem;
}

.guest-footer p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--jottem-text-muted, #737373);
}

/* ==========================================================================
   Entry Dialog Styles
   ========================================================================== */
/* Entry fields */
.entry-field {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--jottem-border-subtle, #f0f0f0);
}

.entry-field:last-of-type {
    border-bottom: none;
}

.entry-field-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jottem-text-muted, #737373);
    margin-bottom: 0.375rem;
}

.entry-field-label i {
    font-size: 0.8125rem;
}

.entry-field-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--jottem-text-muted, #737373);
}

/* Unified input styling */
.entry-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    background: var(--jottem-surface-0, #fff);
    border: 1px solid var(--jottem-border, #e5e5e5);
    border-radius: var(--jottem-radius-md, 0.75rem);
    margin: 0;
    transition: border-color 150ms, box-shadow 150ms;
}

.entry-input:focus {
    border-color: var(--jottem-brand-400, #FFD447);
    box-shadow: 0 0 0 3px rgba(255, 212, 71, 0.2);
    outline: none;
}

/* Amount field - highlighted */
.entry-field-amount {
    background: var(--jottem-brand-50, #FFFBEB);
}

@media (prefers-color-scheme: dark) {
    .entry-field-amount {
        background: color-mix(in srgb, var(--jottem-brand-400) 8%, var(--jottem-surface-0));
    }
}

/* Quick adjustment buttons */
.amount-quick-btns {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.amount-quick-btns:empty {
    display: none;
}

.quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--jottem-surface-0, #fff);
    border: 1px solid var(--jottem-border, #e5e5e5);
    border-radius: var(--jottem-radius-full, 9999px);
    color: var(--jottem-text-secondary, #525252);
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
    white-space: nowrap;
}

.quick-btn:hover {
    background: var(--jottem-surface-2, #f5f5f5);
    border-color: var(--jottem-border, #d4d4d4);
}

.quick-btn:active {
    background: var(--jottem-surface-3, #e5e5e5);
}

.quick-btn-add {
    color: var(--jottem-color-green, #22c55e);
}

.quick-btn-sub {
    color: var(--jottem-color-red, #ef4444);
}

/* Amount input row */
.amount-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.amount-main-input {
    flex: 1;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
    border-width: 2px;
}

.amount-main-input:focus {
    border-color: var(--jottem-brand-400, #FFD447);
    box-shadow: 0 0 0 3px rgba(255, 212, 71, 0.25);
}

/* Stepper buttons for count type */
.amount-stepper {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 1.375rem;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 700;
    background: var(--jottem-surface-0, #fff);
    border: 1px solid var(--jottem-border, #e5e5e5);
    color: var(--jottem-text-secondary, #525252);
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.stepper-btn:first-child {
    border-radius: var(--jottem-radius-sm, 0.5rem) var(--jottem-radius-sm, 0.5rem) 0 0;
}

.stepper-btn:last-child {
    border-radius: 0 0 var(--jottem-radius-sm, 0.5rem) var(--jottem-radius-sm, 0.5rem);
    border-top: none;
}

.stepper-btn:hover {
    background: var(--jottem-surface-2, #f5f5f5);
    color: var(--jottem-text-primary, #171717);
}

.stepper-btn:active {
    background: var(--jottem-surface-3, #e5e5e5);
}

.entry-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--jottem-brand-400, #FFD447);
    border: none;
    border-radius: var(--jottem-radius-full, 9999px);
    color: var(--jottem-text-primary, #171717);
    cursor: pointer;
    transition: background 150ms, transform 150ms;
}

.entry-submit-btn:hover {
    background: var(--jottem-brand-500, #F59E0B);
    transform: translateY(-1px);
}

.entry-submit-btn:active {
    transform: scale(0.98);
}

.entry-submit-btn i {
    font-size: 1em;
}

/* ==========================================================================
   Component Styles
   ========================================================================== */
/* Session status message */
.session-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: color-mix(in srgb, var(--jottem-color-green, #22c55e) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--jottem-color-green, #22c55e) 25%, transparent);
    border-radius: var(--jottem-radius-md, 0.75rem);
    color: var(--jottem-color-green, #22c55e);
    font-size: 0.9375rem;
    font-weight: 500;
}

.session-status i {
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Input error message */
.input-error {
    display: block;
    margin-top: 0.25rem;
    color: var(--jottem-color-red, #ef4444);
    font-size: 0.8125rem;
}

.input-error span {
    display: block;
}

.input-error span + span {
    margin-top: 0.125rem;
}

/* Filters */
.entries-filters {
    background: var(--jottem-surface-0);
    border-radius: var(--jottem-radius-lg);
    border: 1px solid var(--jottem-border-subtle);
    padding: var(--fluid-md);
    margin-bottom: var(--fluid-md);
}

.filters-form {
    margin: 0;
}

.filters-row {
    display: flex;
    gap: var(--fluid-sm);
    flex-wrap: wrap;
    align-items: stretch;
}

.filter-group {
    flex: 1;
    min-width: 8rem;
    display: flex;
    flex-direction: column;
}

.filter-search {
    flex: 2;
    min-width: 12rem;
}

.filter-input,
.filter-select {
    margin-bottom: 0;
    height: 2.75rem;
    padding: 0 0.75rem;
}

/* Search input with icon and button */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.75rem;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--jottem-text-muted);
    font-size: 1.125rem;
    pointer-events: none;
    z-index: 1;
}

.search-input {
    padding-left: 2.5rem !important;
    padding-right: 5rem !important;
    height: 2.75rem !important;
    width: 100% !important;
    margin: 0 !important;
}

.search-input-wrapper button.search-clear,
.search-input-wrapper button.search-submit {
    position: absolute !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.75rem !important;
    height: 1.75rem !important;
    min-width: 1.75rem !important;
    max-width: 1.75rem !important;
    border: none !important;
    cursor: pointer;
    border-radius: var(--jottem-radius-sm) !important;
    transition: 
        background var(--jottem-transition-fast),
        color var(--jottem-transition-fast);
    padding: 0 !important;
    margin: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    flex: none !important;
}

.search-input-wrapper button.search-clear {
    right: 2.25rem !important;
    background: transparent !important;
    color: var(--jottem-text-muted) !important;
}

.search-input-wrapper button.search-submit {
    right: 0.375rem !important;
    background: transparent !important;
    color: var(--jottem-text-muted) !important;
    border: 1px solid var(--jottem-border) !important;
}

.search-input-wrapper button.search-clear:hover {
    background: var(--jottem-surface-2) !important;
    color: var(--jottem-color-red) !important;
}

.search-input-wrapper button.search-submit:hover {
    background: var(--jottem-surface-2) !important;
    color: var(--jottem-text-primary) !important;
    border-color: var(--jottem-text-muted) !important;
}

/* Hidden utility - must be more specific than button selectors */
.hidden,
.search-input-wrapper button.hidden {
    display: none !important;
}

/* Text center utility */
.text-center {
    text-align: center;
}

.search-input-wrapper button i {
    font-size: 0.875rem;
}


/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--fluid-lg);
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border-subtle);
    border-radius: var(--jottem-radius-lg);
}

.empty-state-text {
    color: var(--jottem-text-muted);
    margin: 0;
}

.col-date {
    width: 8rem;
    white-space: nowrap;
}

.entry-date-link {
    color: var(--jottem-text-secondary);
    font-size: 0.875rem;
    text-decoration: none;
}

.entry-date-link:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}

/* Totals section */
.entries-totals {
    background: var(--jottem-surface-0);
    border-radius: var(--jottem-radius-lg);
    border: 1px solid var(--jottem-border-subtle);
    padding: var(--fluid-md);
    margin-bottom: var(--fluid-md);
    overflow-x: auto;
}

.totals-grid {
    display: flex;
    gap: var(--fluid-sm);
    align-items: stretch;
}

.total-card {
    flex: 1;
    min-width: 7rem;
    padding: var(--fluid-sm) var(--fluid-md);
    background: var(--jottem-surface-1);
    border-radius: var(--jottem-radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.total-card-highlight {
    background: color-mix(in srgb, var(--jottem-color-green) 10%, var(--jottem-surface-1));
    border: 1px solid color-mix(in srgb, var(--jottem-color-green) 20%, transparent);
}

@media (prefers-color-scheme: dark) {
    .total-card-highlight {
        background: color-mix(in srgb, var(--jottem-color-green) 15%, var(--jottem-surface-2));
    }
}

.total-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--jottem-text-muted);
}

.total-value {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--jottem-text-primary);
}

/* Billable badge */
.billable-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    background: color-mix(in srgb, var(--jottem-color-green) 15%, transparent);
    color: var(--jottem-color-green);
    border-radius: var(--jottem-radius-full);
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Pagination */
.entries-pagination {
    display: flex;
    justify-content: center;
    margin-bottom: var(--fluid-lg);
}

.entries-pagination nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.entries-pagination nav > div:first-child {
    display: none;
}

.entries-pagination nav > div:last-child {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.entries-pagination a,
.entries-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: var(--jottem-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: 
        background var(--jottem-transition-fast),
        color var(--jottem-transition-fast);
}

.entries-pagination a {
    color: var(--jottem-text-secondary);
    background: var(--jottem-surface-0);
    border: 1px solid var(--jottem-border);
}

.entries-pagination a:hover {
    background: var(--jottem-surface-2);
    color: var(--jottem-text-primary);
}

.entries-pagination span[aria-current="page"] span {
    background: var(--jottem-brand-400);
    color: var(--jottem-text-primary);
    border: 1px solid var(--jottem-brand-400);
    font-weight: 600;
}

.entries-pagination span[aria-disabled="true"] {
    color: var(--jottem-text-muted);
    background: var(--jottem-surface-1);
    border: 1px solid var(--jottem-border-subtle);
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 40rem) {
    .filters-row {
        flex-direction: column;
    }
    
    .filter-group,
    .filter-search {
        width: 100%;
        flex: none;
    }
    
    .col-date {
        width: auto;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
    .day-header-right,
    .table-actions,
    button,
    .main-nav {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    article {
        box-shadow: none;
        border: none;
    }
}