/* Base styles - Updated for iPad portrait fix v4 */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding-bottom: 80px; /* Added space for floating save bar */
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
}

.login-page {
    justify-content: center;
}

/* Public pages (landing, login): background image + fallback */
body.landing-page,
body.login-page {
    background: #d5dce6;
}

body.landing-page::before,
body.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url('background.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Keep content above background on public pages */
body.landing-page > *,
body.login-page > * {
    position: relative;
    z-index: 1;
}

/* Landing / marketing page (Plunder) – ocean-adjacent, tasteful */
html.landing-page,
body.landing-page {
    overscroll-behavior: none; /* Remove top/bottom bounce when scrolling */
}
body.landing-page {
    padding: 5px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.landing-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.landing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 24px;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(30, 58, 95, 0.08);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    border-radius: 12px;
}

.landing-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.landing-logo:hover {
    color: #16213e;
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.landing-nav .btn {
    margin-left: 0;
}

/* Invite / password setup forms: strip default .btn side margins so fields and CTAs line up */
.landing-wrapper .btn {
    margin-left: 0;
    margin-right: 0;
}

.landing-wrapper .form-container {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    text-align: left;
    box-sizing: border-box;
}

.landing-wrapper .form-container .form-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.landing-wrapper .form-container .form-actions .btn {
    flex: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

/* Solid panel for long help copy on photo backgrounds (e.g. tip method on accept invite) */
.landing-wrapper .landing-form-panel {
    margin-top: 0.5rem;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.08);
    text-align: left;
    box-sizing: border-box;
}

.landing-wrapper .landing-tip-method-radios {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.landing-wrapper .landing-radio-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: #1a1a2e;
    cursor: pointer;
}

.landing-wrapper .landing-radio-line input[type="radio"] {
    margin: 0.2rem 0 0;
    flex-shrink: 0;
}

.landing-wrapper .landing-tip-method-help {
    font-size: 0.875rem;
    margin: 0.85rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(30, 58, 95, 0.1);
    color: #5a6578;
    line-height: 1.55;
}

.landing-wrapper .landing-tip-method-help strong {
    color: #1a1a2e;
}

/* Full-width secondary action under landing forms (avoids default bright blue links) */
.landing-hero-foot {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: center;
    box-sizing: border-box;
}

.landing-hero-foot .btn {
    width: 100%;
    box-sizing: border-box;
}

.landing-wrapper .btn-landing-light {
    background: rgba(255, 255, 255, 0.94);
    color: #1a1a2e !important;
    border: 1px solid rgba(30, 58, 95, 0.2);
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.1), 0 1px 3px rgba(30, 58, 95, 0.06);
    font-weight: 600;
}

.landing-wrapper .btn-landing-light:hover {
    background: #ffffff;
    color: #0f1419 !important;
    border-color: rgba(30, 58, 95, 0.3);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.14);
    opacity: 1;
    transform: translateY(-2px);
}

.landing-main {
    flex: 1;
    padding: 48px 24px 64px;
}

.landing-hero {
    text-align: center;
    margin-bottom: 56px;
}

.landing-title {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.landing-tagline {
    font-size: 1.35rem;
    color: #3d4f63;
    margin: 0 0 16px;
    font-weight: 500;
}

.landing-description {
    font-size: 1.1rem;
    color: #5a6578;
    max-width: 520px;
    margin: 0 auto 28px;
    line-height: 1.55;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.landing-cta .btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
}

.landing-features-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    text-align: center;
    margin: 0 0 28px;
}

.landing-features + .landing-features {
    margin-top: 48px;
}

.landing-section-lead {
    font-size: 1.05rem;
    color: #5a6578;
    max-width: 640px;
    margin: -12px auto 28px;
    line-height: 1.55;
    text-align: center;
}

.landing-section-foot {
    text-align: center;
    font-size: 0.98rem;
    color: #5a6578;
    margin: 28px 0 0;
    line-height: 1.5;
}

.landing-section-foot a {
    color: #1e3a5f;
    font-weight: 600;
    text-decoration: none;
}

.landing-section-foot a:hover {
    text-decoration: underline;
}

.landing-inline-list {
    margin: 1rem 0 0;
    padding-left: 1.25rem;
    color: #5a6578;
    line-height: 1.55;
    font-size: 0.95rem;
}

.landing-inline-list li {
    margin: 0.35rem 0;
}

.tip-method-card .tip-method-lede a {
    color: #1e3a5f;
    font-weight: 600;
    text-decoration: none;
}

.tip-method-card .tip-method-lede a:hover {
    text-decoration: underline;
}

.landing-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.landing-feature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.06);
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);
}

.landing-feature-title {
    font-weight: 600;
    color: #1a1a2e;
    font-size: 1.05rem;
}

.landing-feature-desc {
    font-size: 0.95rem;
    color: #5a6578;
    line-height: 1.5;
}

.landing-cta-section {
    text-align: center;
    margin-top: 48px;
    padding: 36px 24px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.1);
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);
}

.landing-cta-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 16px;
}

.landing-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 24px;
    font-size: 0.9rem;
    color: #4a5a6d;
    border-top: 1px solid rgba(30, 58, 95, 0.08);
    border-radius: 12px;
    flex-shrink: 0;
    align-self: stretch;
    margin-top: 0; /* override general footer margin so it aligns with header/main */
}

.landing-footer p {
    margin: 0;
}

/* Tip pooling methods explainer (public) */
.landing-wrapper.landing-wrapper--wide {
    max-width: 1040px;
}

.landing-nav-text-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e3a5f;
    text-decoration: none;
    padding: 8px 4px;
    border-radius: 8px;
    white-space: nowrap;
}

.landing-nav-text-link:hover {
    color: #16213e;
    text-decoration: underline;
}

.landing-sub-cta {
    margin: 1rem 0 0;
    font-size: 0.98rem;
    color: #5a6578;
}

.landing-sub-cta a {
    color: #1e3a5f;
    font-weight: 600;
    text-decoration: none;
}

.landing-sub-cta a:hover {
    text-decoration: underline;
}

.landing-description--wide {
    max-width: 640px;
}

.landing-hero--compact {
    margin-bottom: 40px;
}

.landing-tip-methods {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tip-method-card {
    padding: 24px 26px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.08);
    box-shadow: 0 2px 12px rgba(30, 58, 95, 0.06);
    text-align: left;
}

.tip-method-card h2 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a1a2e;
}

.tip-method-lede {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    color: #5a6578;
    line-height: 1.55;
}

.tip-diagram {
    margin: 0 0 1rem;
    padding: 18px 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(30, 58, 95, 0.1);
    border-radius: 12px;
}

.tip-diagram-flow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.tip-diagram-node {
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.45;
    text-align: center;
    box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
}

.tip-diagram-node--muted {
    font-weight: 500;
    color: #3d4f63;
    font-size: 0.88rem;
}

.tip-diagram-arrow {
    display: flex;
    justify-content: center;
    padding: 6px 0;
    color: #1e3a5f;
    font-size: 1.25rem;
    line-height: 1;
}

.tip-diagram-branch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 4px;
}

.tip-diagram-branch-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1e3a5f;
    margin-bottom: 6px;
    text-align: center;
}

.tip-formula {
    margin: 0 0 1rem;
    padding: 12px 14px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px dashed rgba(30, 58, 95, 0.2);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.82rem;
    color: #2d3748;
    line-height: 1.5;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.tip-method-note {
    margin: 0;
    font-size: 0.9rem;
    color: #5a6578;
    line-height: 1.55;
}

.tip-method-note--tight {
    margin: 0 0 0.85rem;
}

.tip-method-note--tight:last-child {
    margin-bottom: 0;
}

.tip-pooling-footnote {
    margin-top: 0.5rem;
    text-align: left;
}

.landing-cta-section--compact {
    margin-top: 32px;
    padding: 28px 24px;
}

/* Contact page (public) */
.landing-footer-inline-link {
    font-weight: 600;
    color: #1e3a5f;
    text-decoration: none;
}

.landing-footer-inline-link:hover {
    color: #16213e;
    text-decoration: underline;
}

.landing-wrapper .landing-contact-form {
    margin-top: 0;
    margin-bottom: 2rem;
}

.landing-wrapper .landing-contact-form form {
    position: relative;
}

.contact-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.landing-contact-flashes {
    max-width: 28rem;
    margin: 0 auto 1.25rem;
}

.contact-form-reassurance {
    margin-top: 1.25rem;
    font-size: 0.9rem;
    color: #5a6578;
    text-align: center;
    line-height: 1.5;
}

.contact-form-reassurance a {
    color: #1e3a5f;
    font-weight: 600;
    text-decoration: none;
}

.contact-form-reassurance a:hover {
    text-decoration: underline;
}

.landing-wrapper .landing-contact-form .landing-contact-form-actions {
    margin-top: 0.25rem;
}

/* Primary buttons on landing: ensure dark background (--primary-color not set on standalone landing) */
.landing-page .btn-primary,
.landing-wrapper .btn-primary {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a1a2e 100%);
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.35), 0 2px 4px rgba(26, 26, 46, 0.2);
}

.landing-page .btn-primary:hover,
.landing-wrapper .btn-primary:hover {
    background: linear-gradient(135deg, #16213e 0%, #0f0f1a 100%);
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(26, 26, 46, 0.4), 0 3px 8px rgba(26, 26, 46, 0.25);
}

/* Secondary (Log in) on landing: dark enough for readable white text */
.landing-page .btn-secondary,
.landing-wrapper .btn-secondary {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #ffffff !important;
    border: none;
}

.landing-page .btn-secondary:hover,
.landing-wrapper .btn-secondary:hover {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #ffffff !important;
}

@media only screen and (max-width: 640px) {
    .tip-diagram-branch {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 480px) {
    .landing-header {
        padding: 16px;
    }
    .landing-nav {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    /* Narrow phones: keep header to logo + Log in; page body still links to Why / How / Contact */
    .landing-nav .landing-nav-text-link {
        display: none;
    }
    .landing-nav .btn {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
    .landing-main {
        padding: 32px 16px 48px;
    }
    .landing-hero {
        margin-bottom: 40px;
    }
    .landing-cta {
        flex-direction: column;
        align-items: center;
    }
    .landing-cta .btn-lg {
        width: auto;
        min-width: 0;
    }
    .landing-feature {
        padding: 16px;
    }
}

header {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px;
    padding: 15px 30px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding-left: 5%;
    padding-right: 5%;
    backdrop-filter: blur(10px);
}

/* Force header sections to be spaced evenly */
header > * {
    flex: 1 !important;
}

/* Hamburger-first nav: brand grows, menu button stays compact */
header > .brand-bar {
    flex: 1 1 auto !important;
}

header > .header-quick-actions {
    flex: 0 0 auto !important;
}

header .brand-bar {
    display: flex !important;
    justify-content: flex-start !important;
}

header .selectors {
    display: none !important;
}

header .settings {
    display: none !important;
}

/* Landing header: override app header so logo is left, nav is right */
header.landing-header {
    justify-content: space-between !important;
}
header.landing-header > * {
    flex: none !important;
}
header.landing-header .landing-nav {
    margin-left: auto;
}

.brand-bar { display: flex; align-items: center; gap: 12px; }
.selectors { display: none !important; align-items: center; gap: 12px; justify-content: center; }
.settings { display: none !important; grid-auto-flow: column; grid-auto-columns: min-content; gap: 10px; align-items: center; }
.logout-form { margin: 0; }
.actions-menu { display: none; } /* legacy */
.header-quick-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.theme-toggle-form {
    margin: 0;
}

/* Header theme toggle: icon only, no filled button chrome */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    border: none;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    color: #4b5563;
    cursor: pointer;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: none;
    box-shadow: none;
}

.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--primary-color, #007bff);
    outline-offset: 2px;
}

.theme-toggle-btn .nav-icon {
    width: 1.35em;
    height: 1.35em;
}

.dark-mode .theme-toggle-btn {
    color: #cbd5e1;
}

.dark-mode .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
}
.actions-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: none; z-index: 99999; isolation: isolate; }
.actions-overlay.open { display: block; }
.actions-drawer {
    position: absolute;
    top: 70px;
    right: 16px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.14);
    display: grid;
    gap: 12px;
    backdrop-filter: blur(10px);
    z-index: 100000;
    box-sizing: border-box;
}

/* Drawer content styles (all breakpoints) */
.menu-user-info {
    padding: 2px 2px 10px 2px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.menu-user-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
}

.menu-org-name {
    margin-top: 2px;
    font-size: 0.9rem;
    color: #6b7280;
}

.menu-section {
    display: grid;
    gap: 8px;
}

.menu-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}

.menu-selector label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #4b5563;
}

.menu-form {
    margin: 0;
}

.menu-select {
    width: 100%;
    padding: 8px 36px 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    font-size: 0.95rem;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.menu-btn {
    width: 100%;
    margin: 0 !important;
    text-align: left;
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    box-sizing: border-box;
}

/* Dark mode drawer */
.dark-mode .actions-drawer {
    background: linear-gradient(180deg, #1f1f1f 0%, #171717 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.4);
}

.dark-mode .menu-user-info {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .menu-user-name {
    color: #f3f4f6;
}

.dark-mode .menu-org-name,
.dark-mode .menu-section-title {
    color: #9ca3af;
}

.dark-mode .menu-selector label {
    color: #d1d5db;
}

.dark-mode .menu-select {
    background-color: #2a2a2a;
    border-color: #3a3a3a;
    color: #e5e7eb;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e7eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* Universal hamburger nav: keep drawer available on desktop too */
@media only screen and (min-width: 1025px) {
  .actions-toggle { display: inline-flex !important; }
  .settings { display: none !important; }
  .selectors { display: none !important; }
  
  /* Ensure proper desktop header alignment with flexbox */
  header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.greeting h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark-mode .greeting h1 {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.greeting {
    display: flex;
    align-items: center; /* Vertically align icon and text */
    gap: 8px; /* Adds a small space between the icon and the text */
}

/* Nav icons: inline SVGs (Heroicons-style), no emoji */
.nav-icon {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
    transition: transform 0.2s ease;
}
.header-icon .nav-icon {
    width: 1.4em;
    height: 1.4em;
}
.header-icon:hover .nav-icon {
    transform: scale(1.1);
}
.btn-icon-header .nav-icon {
    width: 1.25em;
    height: 1.25em;
    vertical-align: middle;
}
.menu-btn .nav-icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: 8px;
    vertical-align: -0.15em;
}

.welcome-link {
    text-decoration: none;
    color: inherit;
}

.welcome-link:hover h1 {
    text-decoration: underline;
    cursor: pointer;
}

/* Button Base Styles */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-left: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    color: white;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3), 0 2px 4px rgba(0, 123, 255, 0.2);
}

/* Ensure button text is white in dark mode */
.dark-mode .btn-primary,
.dark-mode .btn-success,
.dark-mode .btn-info,
.dark-mode .btn-secondary,
.dark-mode a.btn-primary,
.dark-mode a.btn-success,
.dark-mode a.btn-info,
.dark-mode a.btn-secondary,
.dark-mode .btn-primary.btn-sm,
.dark-mode .btn-success.btn-sm,
.dark-mode .btn-info.btn-sm,
.dark-mode .btn-secondary.btn-sm,
.dark-mode .btn-secondary.btn-small {
    color: #ffffff !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4), 0 3px 8px rgba(0, 123, 255, 0.3);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0) scale(0.98);
}

.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.25);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.35);
}

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

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #c82333;
}

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

.btn-success {
    background-color: #28a745;
    color: white;
}

.btn-success:hover {
    background-color: #218838;
}

/* Dark Mode Adjustments - apply to html and body for full viewport (fixes iOS/Chrome mobile) */
html.dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%) !important;
    min-height: 100%;
}

.dark-mode,
body.dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%);
    color: #e0e0e0;
}

.dark-mode header {
    background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode footer {
    background-color: #1e1e1e;
    color: #e0e0e0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* Help & FAQ (in-app, extends dashboard layout) */
.help-page .help-lead {
    color: #555;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.dark-mode .help-page .help-lead {
    color: #b0b0b0;
}

.help-quick-nav {
    margin-bottom: 1.5rem;
}

.help-quick-nav-title {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.help-quick-nav-list {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.help-faq {
    margin-bottom: 1.5rem;
}

.help-faq h3 {
    margin-top: 0;
}

.help-faq p:last-child,
.help-faq ul:last-child {
    margin-bottom: 0;
}

.help-report-privacy {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
}

.dark-mode .help-report-privacy {
    color: #b0b0b0;
}

.form-hint {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-top: 0.35rem;
}

.dark-mode .form-hint {
    color: #999;
}

.help-feedback-form input[type="file"] {
    padding: 8px 0;
    border: none;
    background: transparent;
    max-width: 100%;
}

.dark-mode .dashboard-container {
    background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
    color: #e0e0e0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .clock-container {
    background-color: #1e1e1e;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

/* Greeting uses location gradient (.dark-mode .greeting h1 above); keep page titles neutral */
.dark-mode .dashboard-container h2,
.dark-mode .clock-container h2 {
    color: #ffffff !important;
}

/* Dark Mode: Update Select Arrow Color */
.dark-mode .custom-select select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23e0e0e0' d='M6 8.586l-4.95-4.95-1.414 1.414L6 11.414l6.364-6.364-1.414-1.414z'/></svg>");
}
.dark-mode .tabcontent {
    background-color: transparent;
    color: #e0e0e0;
}

.dark-mode .clock-buttons button,
.dark-mode .btn-settings {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

.dark-mode .tabs {
    background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .tablinks {
    color: #adb5bd;
}

.dark-mode .tablinks:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
}

.dark-mode .tablinks.active {
    background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
    color: var(--primary-color);
}

.dark-mode .tablinks.active::after {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}

.dark-mode th {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .shift-table th,
.dark-mode .summary-table th,
.dark-mode .my-stats-table th {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode tr:nth-child(even) {
    background-color: #1e1e1e;
}

.dark-mode tr:nth-child(odd) {
    background-color: #252525;
}

.dark-mode tr:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, color-mix(in srgb, var(--primary-color) 8%, transparent) 100%) !important;
}

/* Payout table hover in dark mode - tint with location accent */
.dark-mode .payout-table tbody tr:hover,
.dark-mode .worker-status-table tbody tr:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, color-mix(in srgb, var(--primary-color) 8%, transparent) 100%) !important;
}

.dark-mode .manage-section:first-of-type .payout-table tbody tr:hover {
    background: linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, color-mix(in srgb, var(--primary-color) 8%, transparent) 100%) !important;
}

.dark-mode td {
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.1);
}

.tabs {
    display: flex;
    width: 100%;
    margin-top: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px 8px 0 0;
    padding: 4px 4px 0 4px;
}

.tablinks {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.1em;
    font-weight: 500;
    color: #6c757d;
    border-radius: 8px 8px 0 0;
    position: relative;
}

.tablinks:hover {
    background: rgba(0, 123, 255, 0.05);
    color: var(--primary-color);
}

.tablinks.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #ffffff 100%);
    color: var(--primary-color);
    font-weight: 600;
}

.tablinks.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    border-radius: 2px 2px 0 0;
}

.tabcontent {
    width: 100%;
    padding: 20px;
    display: none;
}

@media only screen and (max-width: 1024px) and (min-width: 431px) and (orientation: landscape) {
  /* iPad landscape - keep existing layout */
  header { 
    display: grid !important;
    grid-template-columns: 1fr auto !important; 
    grid-template-rows: auto auto !important;
    justify-items: stretch !important;
  }
  .brand-bar { grid-column: 1 / 2; }
  .selectors { grid-column: 1 / 2; justify-content: flex-start; }
  .settings { display: none !important; }
  .actions-toggle { display: inline-block !important; grid-column: 2 / 3; grid-row: 1 / span 2; align-self: start; }
}

@media only screen and (max-width: 1024px) and (min-width: 431px) and (orientation: portrait) {
  /* iPad portrait - use iPhone-style layout */
  header {
    display: flex !important;
    padding: 8px 10px !important;
    gap: 8px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  /* Force iPad portrait header sections to be properly sized */
  header > .brand-bar {
    flex: 0 0 auto !important;
  }
  
  header > .selectors {
    flex: 1 1 auto !important;
  }
  
  header > .settings {
    display: none !important;
  }
  
  header > .actions-toggle {
    flex: 0 0 auto !important;
  }
  
  /* iPad portrait header layout: home icon, selectors (centered), hamburger */
  header .brand-bar {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
  
  header .greeting {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  
  header .greeting h1 {
    display: none !important; /* Hide welcome text on iPad portrait */
  }
  
  header .header-icon {
    font-size: 1.3em !important;
    padding: 4px !important;
  }
  
  header .selectors {
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .custom-select {
    margin-left: 0;
    width: auto;
    min-width: 80px;
    max-width: 120px;
  }
  
  .custom-select select {
    font-size: 13px;
    padding: 6px 8px;
    padding-right: 25px;
    border-radius: 6px;
  }
  
  .actions-toggle {
    display: inline-block !important;
    flex: 0 0 auto !important;
    font-size: 1.2em !important;
    padding: 8px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

.tabcontent.active {
    display: block;
}

.dashboard-container {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 30px;
    transition: all 0.3s ease;
    width: 90%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.content-container {
    flex: 1; /* This will push the footer down */
    width: 100%;
    padding-top: 10px; /* Space between nav bar and main content */
    padding-bottom: 60px; /* Adds space above the footer */
    box-sizing: border-box;
}

.dark-mode .content-container {
    background: transparent;
}

/* Owner getting-started checklist (injected above page content) */
.setup-guide-card {
    width: 90%;
    max-width: 900px;
    margin: 0 auto 20px;
    padding: 20px 22px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.dark-mode .setup-guide-card {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.setup-guide-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.setup-guide-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a2b3c;
}

.dark-mode .setup-guide-title {
    color: #f0f0f0;
}

.setup-guide-dismiss-form {
    margin: 0;
}

.setup-guide-lead {
    margin: 0 0 16px;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.45;
}

.dark-mode .setup-guide-lead {
    color: #bbb;
}

.setup-guide-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-guide-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid #eee;
}

.dark-mode .setup-guide-step {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.setup-guide-step:first-of-type {
    border-top: none;
    padding-top: 0;
}

.setup-guide-step-marker {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color, #007bff);
    line-height: 1;
}

.dark-mode .setup-guide-step-marker {
    border-color: rgba(255, 255, 255, 0.25);
}

.setup-guide-step--done .setup-guide-step-marker {
    border-color: var(--primary-color, #007bff);
    background: rgba(0, 123, 255, 0.1);
}

.setup-guide-step-body {
    flex: 1;
    min-width: 0;
}

.setup-guide-step-body strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.setup-guide-step-body p {
    margin: 0;
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
}

.dark-mode .setup-guide-step-body p {
    color: #c8c8c8;
}

.setup-guide-step-body a {
    font-weight: 600;
}

.setup-guide-footnote {
    margin: 16px 0 0;
    font-size: 0.8rem;
    color: #777;
    line-height: 1.4;
}

.dark-mode .setup-guide-footnote {
    color: #888;
}

.dashboard-container h2 {
    margin-top: 0;
    font-size: 1.6em;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.dark-mode .dashboard-container h2 {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}

/* Dark mode table borders - remove all borders except bottom for rows */
.dark-mode table {
    border: none !important;
}

.dark-mode th {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode td {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode tr {
    border: none !important;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    font-size: 0.95em;
}

/* Ensure inputs and selects in tables have correct background and comfortable padding */
td input,
td select {
    background-color: #ffffff;
    color: #333333;
    box-sizing: border-box;
}
td select {
    padding: 8px 12px;
    min-height: 36px;
}

/* th {
    background-color: var(--primary-color) !important;
    color: white !important;
} */

/* Exception for vertical cash entry table */
/*
.cash-entry-vertical th {
    background-color: transparent !important;
    color: #555 !important;
}
*/

/* .dark-mode .cash-entry-vertical th {
    color: #adb5bd !important;
} */

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background: linear-gradient(90deg, rgba(0, 123, 255, 0.05) 0%, rgba(0, 123, 255, 0.02) 100%);
    transform: scale(1.001);
    transition: all 0.2s ease;
}

footer {
    width: 100%;
    padding: 15px 0 80px 0; /* Added bottom padding for floating save bar */
    background-color: #ffffff;
    text-align: center;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
    position: relative; /* Changed from fixed to relative */
    bottom: auto; /* Changed from 0 to auto */
    margin-top: 20px; /* Added top margin for spacing */
}

.toggle-buttons label {
    margin-right: 15px;
    font-size: 0.95em;
    cursor: pointer;
}

.toggle-buttons input[type="radio"] {
    margin-right: 5px;
}

.login-container {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 350px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.login-container h2 {
    margin-bottom: 25px;
    font-size: 1.8em;
    color: var(--primary-color, #007bff);
}

.login-container label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.login-container input {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    box-sizing: border-box;
}

.login-container button {
    width: 100%;
    padding: 12px 0;
    background-color: var(--primary-color, #007bff);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.login-container button:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.login-container .login-secondary-link {
    margin-top: 1.25rem;
    margin-bottom: 0;
    text-align: center;
}

.login-container .login-secondary-link a {
    font-size: 0.95em;
}

.login-container .login-back-home-action {
    margin-top: 1.25rem;
}

.login-container .login-back-home-action .btn {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    padding: 12px 16px;
}

/* Login/register: side spacing on mobile so container doesn't touch edges */
@media (max-width: 480px) {
    .login-page .login-container,
    body.login-page .login-container {
        margin-left: 16px;
        margin-right: 16px;
        max-width: calc(100% - 32px);
        width: auto;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
    .tabs {
        flex-direction: column;
    }

    .clock-buttons {
        flex-direction: column;
    }

    .clock-buttons button {
        width: 100%;
    }

    .clock-container {
        width: 95%;
    }

    .greeting h1 {
        font-size: 1.2em;
    }

    header, footer {
        padding: 10px 15px;
    }
}

/* Form Group Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.form-group input:not([type="checkbox"]),
.form-group select {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #333333;
}

.form-group textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
    background-color: #f9f9f9;
    color: #333333;
}

.dark-mode .form-group textarea {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #3a3a3a;
}

.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]),
.dark-mode input[type="text"],
.dark-mode input[type="number"],
.dark-mode input[type="date"],
.dark-mode input[type="password"],
.dark-mode input[type="email"],
.dark-mode select,
.dark-mode textarea {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
}

.dark-mode input[type="text"]::placeholder,
.dark-mode input[type="email"]::placeholder,
.dark-mode input[type="number"]::placeholder {
    color: #adb5bd;
}

/* Checkbox and Radio Button Styles */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 8px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Ensure labels with checkboxes have proper spacing */
label.checkbox-inline,
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer;
}

/* Override inline styles for checkbox spacing */
label.checkbox-inline input[type="checkbox"],
label.checkbox-inline input[type="radio"],
label:has(input[type="checkbox"]) input[type="checkbox"],
label:has(input[type="radio"]) input[type="radio"] {
    margin-right: 8px !important;
    width: 18px !important;
    height: 18px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* Dark mode checkbox and radio styling */
.dark-mode input[type="checkbox"],
.dark-mode input[type="radio"] {
    background-color: #2c2c2c !important;
    border-color: #3a3a3a !important;
    color-scheme: dark !important;
    accent-color: var(--primary-color) !important;
    filter: brightness(0.8) contrast(1.2);
}

.dark-mode input[type="checkbox"]:checked,
.dark-mode input[type="radio"]:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    filter: none;
}

.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]):focus,
.dark-mode input[type="text"]:focus,
.dark-mode input[type="number"]:focus,
.dark-mode input[type="date"]:focus,
.dark-mode input[type="password"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    background-color: #333 !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}

.dark-mode .custom-select select {
    background: linear-gradient(180deg, #2c2c2c 0%, #252525 100%);
    border-color: #3a3a3a;
    color: #e0e0e0;
}

.dark-mode .custom-select select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-color) 25%, transparent);
}

.dark-mode .custom-select select:focus {
    background: #333;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent), 0 4px 8px color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
    background-color: #f9f9f9;
}

/* Form Actions Styles */
.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.form-actions .btn {
    flex: 1;
}

/* Adjustments for Links as Buttons */
a.btn {
    text-decoration: none;
    display: inline-block;
}

a.btn:hover {
    opacity: 0.9;
}

/* Responsive Form Styles */
@media (max-width: 768px) {
    .form-actions {
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }
}

.dashboard-container form {
    width: 100%;
}

.dashboard-container table {
    width: 100%;
    margin-top: 20px;
}

footer p {
    margin: 0;
    font-size: 0.9em;
    color: #777;
}

footer p a {
    color: var(--primary-color, #007bff);
    text-decoration: none;
}

footer p a:hover {
    text-decoration: underline;
}

.dark-mode footer p a {
    color: #7eb8ff;
}

/* Reusable Custom Select Styles */
.custom-select {
    width: 200px; /* Adjust as needed */
    margin-left: 15px; /* Ensures spacing between dropdown and buttons */
}

.custom-select select {
    width: 100%;
    padding: 10px 15px;
    padding-right: 40px; /* Space for the custom arrow */
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    appearance: none; /* Remove default arrow */
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23333' d='M6 8.586l-4.95-4.95-1.414 1.414L6 11.414l6.364-6.364-1.414-1.414z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.custom-select select:focus {
    border-color: var(--primary-color);
    outline: none;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1), 0 4px 8px rgba(0, 123, 255, 0.15);
    transform: translateY(-1px);
}

/* Optional: Add a subtle shadow for depth */
.custom-select select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
}

/* Settings Page Enhancements */
.dashboard-container h2 {
    color: var(--primary-color);
}

.settings-section {
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.dark-mode .settings-section {
    background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.settings-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, #212529 0%, #495057 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
}

.dark-mode .settings-section h3 {
    background: linear-gradient(135deg, #e0e0e0 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
    transition: opacity 0.2s ease;
}

.toggle-label:hover {
    opacity: 0.8;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 13px;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-switch.toggle-on {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 8px rgba(76, 175, 80, 0.3);
}

.toggle-slider {
    position: absolute;
    width: 22px;
    height: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.toggle-slider.slider-on {
    left: 26px;
}

.toggle-status {
    font-weight: 500;
    color: #495057;
    min-width: 30px;
}

.dark-mode .toggle-status {
    color: #e0e0e0;
}

.form-group input[type="password"] {
    /* Specific styles for password fields if needed */
}

/* Optional: Add icons or visual cues for password fields */
.form-group label[for="current_password"],
.form-group label[for="new_password"],
.form-group label[for="confirm_password"] {
    position: relative;
    padding-left: 25px;
}

.form-group label[for="current_password"]::before,
.form-group label[for="new_password"]::before,
.form-group label[for="confirm_password"]::before {
    content: '\1F512'; /* Unicode for a lock icon */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1em;
}

.manage-section {
    margin-bottom: 30px;
}

.manage-section h3 {
    margin-bottom: 10px;
}

.manage-section form {
    display: flex;
    flex-direction: column; /* Ensure form elements stack vertically by default */
    /* align-items: center; */ /* Commented out: This was causing horizontal alignment of rows */
}

.manage-section form input:not([type="checkbox"]):not([type="radio"]) {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.manage-section form button {
    padding: 10px 20px;
}

/* Table inputs inside manage forms: avoid flex:1 stretching from .manage-section form input */
.manage-section form .workers-table input:not([type="checkbox"]):not([type="radio"]) {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Target the specific Add Worker button for alignment */
/* .manage-section > form > button[type="submit"] {
    margin-top: 26px; 
} */

#add-worker-btn {
    margin-top: 10px; /* Adjusted from 26px, trying a smaller nudge down */
}

/* Add margin to the form groups within the manage-section's direct form (for Add New Worker) */
.manage-section > form > .form-group {
    margin-right: 15px;
}

/* ----- Page intro, form toolbars, table wrappers (bar stock and reuse) ----- */
.page-intro {
    margin: 0 0 20px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}

.dark-mode .page-intro {
    color: #bbb;
}

.page-location-line {
    margin: -8px 0 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
}

.dark-mode .page-location-line {
    color: #cbd5e1;
}

.section-hint {
    margin: -4px 0 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #64748b;
}

.dark-mode .section-hint {
    color: #94a3b8;
}

.empty-state {
    margin: 12px 0 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(30, 58, 95, 0.06);
    border: 1px solid rgba(30, 58, 95, 0.1);
    color: #475569;
    font-size: 0.95rem;
}

.dark-mode .empty-state {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.form-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.form-toolbar .form-group {
    margin-bottom: 0;
}

.form-toolbar .form-group--grow {
    flex: 1 1 220px;
    min-width: 200px;
}

.form-toolbar .form-group--shrink {
    flex: 0 0 auto;
}

.form-actions {
    margin-top: 18px;
}

.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}

.table-numeric {
    max-width: 7rem;
}

.table-actions-nowrap {
    white-space: nowrap;
}

.table-actions-nowrap .btn + .btn {
    margin-left: 6px;
}

.page-back {
    margin: 0 0 12px;
}

.page-back a {
    font-weight: 600;
    text-decoration: none;
}

.page-back a:hover {
    text-decoration: underline;
}

.detail-meta {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.detail-meta li {
    margin-bottom: 0.45rem;
}

.detail-meta .meta-k {
    font-weight: 600;
    color: #334155;
    margin-right: 0.35rem;
}

.dark-mode .detail-meta .meta-k {
    color: #e2e8f0;
}

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

.inventory-ghost-form {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Add New Worker row 2: Email, Default Role, and checkboxes on one line, same height */
.add-worker-row-2 {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}
.add-worker-checkbox-cell {
    flex: 0 0 auto;
    min-width: 140px;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    transform: translateY(3px); /* Nudge checkboxes down to align with input/select */
}
.add-worker-checkbox-cell .checkbox-inline {
    font-weight: normal;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
/* Checkboxes same height as email/role inputs (~40px), in line with them */
.add-worker-checkbox-cell input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    cursor: pointer;
}

/* Light Mode: Option Styles */
.custom-select select option {
    color: #333;
    background-color: #fff;
}

/* Dark Mode: Option Styles */
.dark-mode .custom-select select option {
    color: #e0e0e0;
    background-color: #2c2c2c;
}

/* Adjust layout for narrower screens: */
@media (max-width: 768px) {
    .tabs {
      flex-direction: column;
      width: 100%;
    }
    .tabcontent {
      width: 100%;
      padding: 10px;
    }

    body:not(.login-page):not(.landing-page) {
      align-items: stretch;
    }

    .content-container {
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
      align-self: stretch;
      max-width: 100%;
      box-sizing: border-box;
    }

    .dashboard-container {
      width: 100%;
      max-width: 100%;
      margin: 0 0 24px 0;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 0;
      box-shadow: none;
      border: none;
    }

    .schedule-page.section-container {
      width: 100%;
      max-width: 100%;
      margin: 0 0 24px 0;
      padding: 15px;
      box-sizing: border-box;
      border-radius: 0;
      box-shadow: none;
      border: none;
    }

    .setup-guide-card {
      width: 100%;
      max-width: 100%;
      margin-left: 0;
      margin-right: 0;
      border-radius: 0;
      box-shadow: none;
      border: none;
    }

    .dark-mode .dashboard-container {
      box-shadow: none;
      border: none;
    }

    .dark-mode .setup-guide-card {
      box-shadow: none;
      border: none;
    }
  
    /* Let tables scroll horizontally instead of shrinking too tight */
    table {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
    }
    th, td {
      min-width: 100px;  /* or 80px, etc. to keep columns from collapsing */
      padding: 8px;
    }
  }

/* iPad Mini Optimizations */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  body {
    font-size: 16px; /* Base font size for readability */
  }
  
  /* Container adjustments for iPad mini */
  .dashboard-container {
    width: 95%;
    max-width: 760px;
    margin: 15px auto 100px;
    padding: 20px 15px;
    border-radius: 12px;
  }
  
  /* Header adjustments */
  header {
    padding: 12px 16px;
  }
  
  .greeting h1 {
    font-size: 1.6em;
  }
  
  /* Form element adjustments for touch */
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="date"],
  select,
  textarea,
  .btn {
    font-size: 1.1rem;
    height: 44px; /* Apple's recommended minimum touch target size */
    padding: 10px 15px;
    margin-bottom: 12px;
  }
  
  /* Specifically size inputs in tables for better touch targets */
  td input[type="number"],
  td select {
    width: 100%;
    min-width: 80px;
    height: 44px;
  }
  
  /* Fix the hours input width to be more appropriate */
  .hours-input {
    width: 80px !important; /* Override any other width settings */
    min-width: 80px;
    text-align: center;
  }
  
  /* Table adjustments */
  table {
    border-spacing: 0;
    margin-bottom: 20px;
  }
  
  th, td {
    padding: 14px 10px;
    vertical-align: middle;
  }
  
  /* Buttons need to be larger touch targets */
  .btn {
    min-width: 100px;
    padding: 12px 18px;
    margin: 5px;
    border-radius: 8px; /* Slightly more rounded for modern look */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    height: auto; /* Override the generic height setting */
  }
  
  /* Add some specific margins for forms on iPad */
  .form-group {
    margin-bottom: 16px;
  }
  
  /* Make sure search results are easy to tap */
  .search-result-item {
    padding: 12px 10px !important;
    margin: 8px 0 !important;
  }
  
  /* Owner search specific styles */
  .search-results {
    position: relative;
    z-index: 1000;
  }
  
  .search-result-item {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .search-result-item:hover {
    background: #e9ecef;
  }
  
  .dark-mode .search-result-item {
    background: #2c2c2c !important;
    border-color: #3a3a3a !important;
    color: #e0e0e0 !important;
  }
  
  .dark-mode .search-result-item:hover {
    background: #3a3a3a !important;
  }
  
  .search-error {
    color: #dc3545;
    padding: 8px;
    font-size: 0.9em;
  }
  
  .search-no-results {
    color: #6c757d;
    padding: 8px;
    font-size: 0.9em;
    font-style: italic;
  }
  
  /* Increase spacing for better touch targets in manage section */
  .manage-section form input,
  .manage-section form button {
    height: 44px;
    padding: 10px 15px;
  }
  
  /* Better spacing for hour/role inputs in shift tables */
  .hours-input, 
  .role-select {
    width: 100%;
  }
  
  /* Cash entry vertical table for iPad */
  .cash-entry-vertical {
    width: 100%;
  }
  
  .cash-entry-vertical th {
    width: 40%;
    text-align: right;
    padding-right: 15px;
  }
  
  .cash-entry-vertical td {
    width: 60%;
  }
  
  .cash-entry-vertical input,
  .cash-entry-vertical textarea {
    width: 100%;
  }
  
  /* Fix footer for iPad so it doesn't cover content */
  footer {
    position: fixed;
    bottom: 0;
    height: auto;
    padding: 10px 0;
  }
  
  /* Fix space at bottom to account for footer */
  main {
    padding-bottom: 60px;
  }
}

/* Make the dark mode more readable on iPad with higher contrast */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  .dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #121212 100%) !important;
  }
  
  .dark-mode .dashboard-container {
    background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .dark-mode th {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .dark-mode input,
  .dark-mode select,
  .dark-mode textarea {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
    border-color: #3a3a3a !important;
  }
  
  .dark-mode .btn {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  .dark-mode .content-container {
    background: transparent !important;
  }
}

/* Bar-specific enhancements for low-light environments */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Increase contrast for better readability in dim lighting */
  th {
    font-weight: 700;
    font-size: 1.05em;
  }
  
  /* High contrast inputs */
  input, select, textarea {
    border: 2px solid #aaa;
  }
  
  input:focus, select:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0,123,255,0.2);
  }
  
  /* Add subtle highlight to form rows to help identify fields */
  tr:hover {
    background-color: rgba(0,123,255,0.03);
  }
  
  /* Improve readability of buttons */
  .btn-primary {
    background-color: var(--primary-color-dark); /* Use darker primary color for better contrast */
  }
  
  /* Make danger buttons very noticeable */
  .btn-danger {
    background-color: #cc0000;
  }
}

/* Responsive table and form improvements */
@media only screen 
and (max-width: 768px), 
(min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* Better form layout for touch */
  .form-group label {
    font-size: 1.1em;
    margin-bottom: 10px;
    font-weight: 600;
  }
  
  /* Table enhancements */
  table, tbody, tr {
    width: 100%;
  }
  
  th, td {
    min-width: auto;
  }
  
  /* Make remove buttons easier to tap */
  .remove-temp-worker {
    min-width: 80px;
    min-height: 44px;
  }
}

/* Override button margins to fix overcrowding */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  .btn {
    margin-left: 5px;
    margin-right: 5px;
  }
  
  /* Fix buttons alignment in containers */
  .form-actions .btn {
    margin: 5px;
  }
}

/* Fix business day selector for iPad */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  input[type="date"] {
    width: 180px;
  }
}

/* Override hours input size across all devices */
.hours-input {
  width: 80px;
  text-align: center;
}

/* Make sure the hours field keeps its compact size in tables */
table .hours-input {
  max-width: 80px;
  width: 80px;
}

/* Allow fractional typing while arrow keys nudge whole hours */
.hours-input::-webkit-outer-spin-button,
.hours-input::-webkit-inner-spin-button {
  height: auto;
}

/* Cash entry table input sizes */
.cash-entry-vertical input[type="number"] {
  width: 120px !important; /* Wide enough for up to 8 characters with padding */
  text-align: right;
}

/* Cash entry vertical table for iPad */
.cash-entry-vertical {
  width: 100%;
}

.cash-entry-vertical th {
  width: 40%;
  text-align: right;
  padding-right: 15px;
}

.cash-entry-vertical td {
  width: 60%;
}

.cash-entry-vertical input,
.cash-entry-vertical textarea {
  width: 100%;
}

/* Override for iPad */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
  /* ...existing code... */
  
  /* Adjust cash entry field widths */
  .cash-entry-vertical input[type="number"] {
    width: 120px !important;
    min-width: 120px;
    max-width: 120px;
    text-align: right;
  }
  
  /* Keep notes field wider */
  .cash-entry-vertical textarea {
    width: 100%;
    min-height: 60px;
  }
}

/* New Dashboard Styles */
.tabs-container {
  width: 100%;
  max-width: 100%; /* Ensure container uses full width */
}

.tab {
  flex: 1; /* Make all tabs equal width */
  padding: 10px 20px; /* Reduced padding */
  cursor: pointer;
  font-weight: 500;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center; /* Center text within tabs */
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: #6c757d;
  position: relative;
}

.tab:hover {
  background: linear-gradient(180deg, rgba(0, 123, 255, 0.05) 0%, rgba(0, 123, 255, 0.02) 100%);
  color: var(--primary-color);
}

.tab.active {
  color: var(--primary-color);
  font-weight: 600;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, #ffffff 100%);
}

.dark-mode .tab.active {
  background: linear-gradient(180deg, #2a2a2a 0%, #1e1e1e 100%);
  color: var(--primary-color);
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  border-radius: 2px 2px 0 0;
}

.dark-mode .tab.active::after {
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
}

.tabcontent {
  display: none;
  padding: 10px 0; /* Reduced padding */
  width: 100%; /* Use full width */
  max-width: 100%; /* Ensure content uses full width */
}

.tabcontent.active {
  display: block;
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-bottom: 20px;
}

/* Date toolbar for dashboard */
.date-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: 6px;
}
.date-title h3 { margin: 0; font-size: 1.25em; }

.dark-mode .date-title h3 {
  color: #e0e0e0;
}
.date-title .date-sub { color: #6c757d; font-size: 0.9em; margin-top: 2px; }

.dark-mode .date-title .date-sub {
    color: #adb5bd;
}
.date-controls { display: flex; align-items: center; gap: 8px; }
.date-controls input[type="date"] { height: 36px; padding: 6px 8px; }
.btn-icon { width: 40px; min-width: 40px; padding: 6px 0; text-align: center; }

/* Daily Entry: shift pool switcher (single label, padded select, chevron, inline + Event pool) */
.tip-pool-bar {
  margin: 10px 0;
}

.tip-pool-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 12px;
}

.tip-pool-switcher {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 10px;
  max-width: 100%;
}

/* Dashboard sets all forms to width:100%, which forced the pool row to stack */
.dashboard-container form.tip-pool-switcher {
  width: auto;
}

.tip-pool-field-label {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.tip-pool-add-event {
  flex-shrink: 0;
}

/* Native select styled as an obvious dropdown (padding + chevron); works on Daily Entry and Log my hours */
select.tip-pool-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 12rem;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  cursor: pointer;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.25L6 7.75l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 12px;
}

.dark-mode select.tip-pool-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23adb5bd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.25L6 7.75l3.5-3.5'/%3E%3C/svg%3E");
}

select.tip-pool-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dark-mode select.tip-pool-select:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}

/* Compact layout for iPad portrait */
@media only screen and (max-width: 1024px) {
  .date-toolbar { flex-wrap: wrap; gap: 8px; }
  .date-title { flex: 1 1 auto; }
  .date-controls { flex: 1 1 100%; justify-content: space-between; }
  .date-controls button.btn.btn-secondary { flex: 0 0 auto; }
  .date-controls input[type="date"] { flex: 1 1 auto; min-width: 170px; }
}

.summary-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: all 0.3s ease;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 3px 8px rgba(0, 0, 0, 0.06);
}

.dark-mode .summary-card {
  background: linear-gradient(135deg, #1e1e1e 0%, #1a1a1a 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-mode .summary-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.card-title {
  font-size: 0.9em;
  color: #6c757d;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.dark-mode .card-title {
  color: #adb5bd;
}

.card-value {
  font-size: 1.6em;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .card-value {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-container {
  margin-bottom: 25px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.section-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.05);
}

.dark-mode .section-container {
  background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .section-container:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px; /* Further reduced from 10px */
}

.section-header h3 {
  margin: 0;
  font-size: 1.3em;
  font-weight: 700;
  background: linear-gradient(135deg, #212529 0%, #495057 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.dark-mode .section-header h3 {
  background: linear-gradient(135deg, #e0e0e0 0%, var(--primary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cash-entry-vertical {
  width: 100%;
}

.cash-entry-vertical th {
  width: 40%;
  text-align: right;
  padding-right: 15px;
  font-weight: 600;
}

.dark-mode .cash-entry-vertical th {
  color: #e0e0e0 !important;
  background: transparent !important;
}

.cash-entry-vertical td {
  width: 60%;
}

.cash-entry-vertical input[type="number"],
.cash-input {
  width: 120px !important;
  text-align: right;
  padding-right: 10px;
  font-size: 1.1em;
  height: 44px;
}

.cash-entry-vertical textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}

.formulas-details {
  border-top: 1px solid #dee2e6;
  padding-top: 1rem;
}

.formulas-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #495057;
  user-select: none;
}

.formulas-details summary:hover {
  color: #212529;
}

.formulas-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.formula-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
}

.formula-item strong {
  min-width: 10em;
}

.formula-item .formula {
  color: #6c757d;
  font-size: 0.95em;
}

.shift-table {
  width: 100%;
  border-collapse: collapse;
}

.shift-table th {
  text-align: left;
  padding: 6px 8px; /* Reduced top/bottom padding from 8px */
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #dee2e6;
  position: sticky; /* Keep headers visible while scrolling on iPad */
  top: 0;
  z-index: 2;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85em;
}

.shift-table td {
  padding: 4px 8px; /* Reduced top/bottom padding from 6px */
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle; /* Ensure content is vertically centered */
}

/* Dark mode shift-table borders - only bottom borders between rows */
.dark-mode .shift-table {
  border: none !important;
}

.dark-mode .shift-table th {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
  color: #e0e0e0 !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .shift-table td {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .shift-table tr {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
}

/* Ensure form controls within table cells don't add excessive height */
.shift-table .form-control {
  padding: 5px 8px; /* Reduced padding from 6px 8px */
  font-size: 0.95em; /* Slightly smaller font in inputs */
  height: auto; /* Allow height to shrink if padding is less */
  max-height: 34px; /* Reduced from 38px */
}

.shift-table .btn {
  padding: 5px 10px; /* Reduced padding from 6px 10px */
  font-size: 0.9em;
  min-height: 30px; /* Reduced from 32px */
}

.hours-input {
  width: 70px !important; /* Slightly narrower */
  min-width: 70px;
  max-width: 70px;
  text-align: center;
  /* height is handled by .shift-table .form-control or specific iPad styles */
}

/* Manager view: highlight hours that were submitted by the worker (pending approval) */
.hours-input.hours-input-user-submitted {
  background-color: #e8f4fd;
  border: 1px solid #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
}

.dark-mode .hours-input.hours-input-user-submitted {
  background-color: rgba(13, 110, 253, 0.35);
  border: 2px solid #6ea8fe;
  box-shadow: 0 0 0 3px rgba(110, 168, 254, 0.4), 0 0 12px rgba(110, 168, 254, 0.3);
}

/* Note shown when at least one worker-submitted entry exists */
.worker-submitted-note {
  margin: 0 0 12px 0;
  font-size: 0.9em;
  color: #495057;
}

.worker-submitted-note-sample {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #e8f4fd;
  border: 1px solid #0d6efd;
  font-weight: 600;
}

.dark-mode .worker-submitted-note {
  color: #adb5bd;
}

.dark-mode .worker-submitted-note-sample {
  background-color: rgba(13, 110, 253, 0.35);
  border-color: #6ea8fe;
  box-shadow: 0 0 8px rgba(110, 168, 254, 0.25);
}

.tip-amount {
  color: var(--primary-color); /* This might conflict with existing .tip-amount color: #28a745; */
}

.fill-in-section {
  margin-top: 10px; /* Reduced from 20px */
  padding-top: 10px; /* Reduced from 15px */
  border-top: 1px dashed #dee2e6;
  color: var(--primary-color);
}

.dark-mode .fill-in-section {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: var(--primary-color);
}

.dark-mode .fill-in-section label {
  color: #e0e0e0;
}

.fill-in-section .form-group {
  margin-bottom: 10px; /* Reduce space in add worker form */
}

.fill-in-section .form-control {
  padding: 8px 10px; /* Adjust padding for search input */
  font-size: 0.95em;
  box-sizing: border-box; /* Add this to ensure padding/border are within width */
}

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.save-button {
  font-size: 1.1em;
  padding: 12px 24px;
}

/* Recent history table */
.recent-history {
  margin-top: 10px;
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
}

.summary-table th {
  text-align: left;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85em;
}

.summary-table td {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
}

.load-more-container {
  margin-top: 15px;
  text-align: center;
}

/* My stats styling */
.my-stats-container {
  margin-bottom: 20px;
}

.my-stats-table {
  width: 100%;
  border-collapse: collapse;
}

.my-stats-table th {
  text-align: left;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 2px solid #dee2e6;
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.85em;
}

.my-stats-table td {
  padding: 10px;
  border-bottom: 1px solid #dee2e6;
}

/* Log my hours section (workers): above My Stats / Summary */
.log-my-hours-section {
  margin-bottom: 24px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  border: 1px solid #dee2e6;
}

.log-my-hours-section h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.15em;
  color: #495057;
}

.log-my-hours-hint {
  margin: 0 0 16px 0;
  font-size: 0.9em;
  color: #6c757d;
}

.log-my-hours-form .log-my-hours-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

.log-my-hours-form .form-group {
  margin-bottom: 0;
}

.log-my-hours-form .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.9em;
  font-weight: 500;
  color: #495057;
}

.log-my-hours-form .log-my-hours-submit .log-my-hours-submit-label {
  visibility: hidden;
}

.log-my-hours-form input[type="date"],
.log-my-hours-form input[type="number"],
.log-my-hours-form select {
  min-width: 120px;
}

.log-my-hours-form #log-hours {
  min-width: 80px;
}

.log-my-hours-message {
  margin-top: 12px;
  font-size: 0.95em;
}

.log-my-hours-message.success {
  color: #0f5132;
}

.log-my-hours-message.error {
  color: #842029;
}

.dark-mode .log-my-hours-section {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .log-my-hours-section h3 {
  color: #e0e0e0;
}

.dark-mode .log-my-hours-hint {
  color: #adb5bd;
}

.dark-mode .log-my-hours-form .form-group label {
  color: #e0e0e0;
}

.dark-mode .log-my-hours-message.success {
  color: #75b798;
}

.dark-mode .log-my-hours-message.error {
  color: #f1aeb5;
}

.stats-summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.stats-card {
  flex: 1;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);
}

.stats-card:hover::before {
  transform: scaleX(1);
}

/* Card title and value are already defined in base.css, 
   but these are more specific to stats-card.
   Keeping them for now, but they might be redundant or could be merged. */
/*
.stats-card .card-title { /* Added .stats-card for specificity */
/*
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.stats-card .card-value { /* Added .stats-card for specificity */
/*
  font-size: 1.8rem;
  font-weight: 700;
  color: #0d6efd;
}
*/

/* Dark mode styling for stats cards */
.dark-mode .stats-card {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

.dark-mode .stats-card .card-title { /* Added .stats-card for specificity */
  color: #cbd5e0;
}

.dark-mode .stats-card .card-value { /* Added .stats-card for specificity */
  color: #63b3ed;
}

/* Month selector styling */
.month-selector {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
}

.dark-mode .month-selector {
  background: linear-gradient(135deg, #1e1e1e 0%, #1a1a1a 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
}

/*
  The following 'th' rule was present in dashboard.html:
  th {
    background-color: var(--primary-color) !important;
    color: white !important;
  }
  This is already covered by more specific rules in base.css like:
  .shift-table th, .summary-table th, .my-stats-table th
  and their .dark-mode counterparts.
  So, this general 'th' rule is omitted to avoid conflicts.
*/

/*
  The following '.cash-entry-vertical th' rule was present in dashboard.html:
  .cash-entry-vertical th {
    background-color: transparent !important;
    color: #555 !important;
  }
  This is already defined in base.css (lines 233-236 and 1253-1264)
  and its dark mode version (lines 238-240 and 1270-1282).
  Omitting to avoid redundancy.
*/

/*
  The following '.dark-mode .cash-entry-vertical th' rule was present:
  .dark-mode .cash-entry-vertical th {
    color: #adb5bd !important;
  }
  This is covered by existing rules in base.css (lines 238-240 and 1270-1282).
  Omitting to avoid redundancy.
*/

/*
  The following '.tab.active' rule was present:
  .tab.active {
    background-color: var(--primary-color);
  }
  This conflicts with the existing .tab.active rule (lines 1008-1011)
  which uses #007bff. The original dashboard.html one uses a CSS variable.
  It's likely the variable --primary-color resolves to #007bff,
  but to be safe and ensure consistency with other tab styles,
  I'm deferring to the existing rule in base.css.
  If var(--primary-color) is different, this might need adjustment.
  For now, I'm commenting out this rule.
*/
/*
.tab.active {
  background-color: var(--primary-color);
}
*/

/*
  The following '.badge.bg-info' rule was present:
  .badge.bg-info {
    background-color: var(--primary-color) !important;
  }
  This is a Bootstrap class override. It's generally okay to keep.
  Assuming var(--primary-color) is set and intended.
*/
.badge.bg-info {
  background-color: var(--primary-color) !important;
}

/* Daily entry: crew name + status tags (e.g. in multiple roles) */
.shift-row-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.crew-shift-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

.crew-shift-tag--multi-role {
  color: #0c5460;
  background-color: #d1ecf1;
  border: 1px solid #bee5eb;
}

.crew-shift-tag--warn {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.shift-hours-warnings {
  display: none;
  margin: 0 0 12px 0;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 8px;
}

.shift-hours-warnings:not([hidden]) {
  display: block;
}

.shift-entry-history-table .shift-history-detail-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.shift-entry-history-table .shift-history-detail-list li {
  margin: 0.15rem 0;
}

/*
  The following '.tip-amount' rule was present:
  .tip-amount {
    color: var(--primary-color);
  }
  base.css already has a .tip-amount rule (lines 1127-1130) setting color to #28a745.
  This new rule uses a variable. I will keep the new one and comment out the old one
  if var(--primary-color) is preferred. For now, I'll add this and let you decide
  which one to keep or if they should be merged.
  base.css also has .dark-mode .tip-amount { color: #68d391; } (lines 1237-1239)
  This might override the var(--primary-color) in dark mode.
*/
.tip-amount {
  color: var(--primary-color); /* This might conflict with existing .tip-amount color: #28a745; */
}

/*
  The following 'tr.has-other-shifts' rule was present:
  tr.has-other-shifts {
    border-left-color: var(--primary-color);
  }
  This complements the earlier tr.has-other-shifts rule for background.
  It's fine to add.
*/
tr.has-other-shifts {
  /* background-color is defined above */
  border-left-color: var(--primary-color);
}

/* CSS variables for theme colors - these will use static fallbacks or :root definitions in base.html */
/* :root definitions should ideally remain in base.html if they use Jinja variables */

/* Override primary color-based elements */
/* .btn-primary { */ /* Commented out as it's handled above now */
    /* This might conflict/override existing .btn-primary rules */
    /* The original in base.html used var(--primary-color) */
    /* background-color: var(--primary-color); /* Using CSS variable */
/* } */
/* .btn-primary:hover { */ /* Commented out as it's handled above now */
    /* background-color: var(--primary-color-dark); /* Using CSS variable */
/* } */
.dashboard-container h2, 
.greeting h1, 
.clock-container h2 {
    color: var(--primary-color); /* Ensured this uses the variable */
}
.tablinks.active {
    border-bottom-color: var(--primary-color); /* Ensured this uses the variable */
    color: var(--primary-color); /* Ensured this uses the variable */
}
/* General 'th' styling was in base.html. 
   Specific table 'th' rules exist in base.css and are preferred. 
   This general rule might be too broad or conflict. */
/* 
th {
    background-color: var(--primary-color) !important;
    color: white !important; 
}
*/

/* General '.tab.active' styling from base.html. 
   A more specific .tab.active rule exists in base.css (lines 1008-1011) 
   This might conflict. */
/* Already handled the main .tab.active rule above. This commented section can be removed or kept for reference.
.tab.active {
    background-color: var(--primary-color);
}
*/

/* Dark mode adjustments from base.html — greeting h1 uses location accent gradient */
.dark-mode .dashboard-container h2,
.dark-mode .clock-container h2 {
    color: #ffffff !important;
}
.dark-mode .tablinks.active {
    border-bottom-color: var(--primary-color); /* Ensured this uses the variable */
    color: var(--primary-color); /* Ensured this uses the variable */
}

/* 
  Fix for vertical cash entry table headers from base.html
  These are already well-defined in base.css (lines 233-240, 1253-1282)
  Omitting to avoid redundancy.
*/
/*
.cash-entry-vertical th {
    background-color: transparent !important;
    color: #555 !important;
}
.dark-mode .cash-entry-vertical th {
    color: #adb5bd !important;
}
*/

/* Critical inline styles for immediate touch optimizations from base.html */
/* These might be better placed in tablet.css */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px)
and (orientation: portrait) {
    * { touch-action: manipulation; }
    /* body { font-size: 16px; } */ /* Existing body font-size for this media query in base.css is also 16px */
    /* input, select, button { font-size: 16px !important; height: 44px; } */ /* Existing rules in base.css for these elements in this media query set font-size to 1.1rem and height to 44px. 1.1rem is often 17.6px if base is 16px. This rule sets a fixed 16px. */
}

.color-picker-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.color-picker {
    width: 100px;
    height: 44px;
    padding: 0;
    border: none;
    cursor: pointer;
}

.color-value {
    font-family: monospace;
    font-size: 1.1em;
}

/* Style adjustments for color input */
input[type="color"] {
    -webkit-appearance: none;
    border: none;
    border-radius: 5px;
    overflow: hidden;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 5px;
}

/* Color Preview Styles */
.color-preview-container {
    margin-top: 20px;
}

.color-preview-samples {
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.preview-sample {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    min-width: 200px;
}

.preview-light {
    background-color: #fff;
    color: #333;
}

.preview-dark {
    background-color: #1e1e1e;
    color: #e0e0e0;
}

.preview-header {
    font-weight: 600;
    margin-bottom: 10px;
}

.preview-button {
    background-color: var(--primary-color);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 10px;
}

.preview-text {
    /* style rule was truncated in the provided file content */
    /* Assuming it would be something like: color: var(--primary-color); */
    margin-bottom: 10px;
}

.preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.preview-table th, .preview-table td {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
}

.preview-table th {
    background-color: var(--primary-color);
    color: white;
}

.preview-dark .preview-table th, .preview-dark .preview-table td {
    border-color: #555;
}

.preview-dark .preview-table th {
    /* In dark mode, the primary color might need a lighter text color for contrast */
    /* color: #111; /* or some other contrasting color */
}

/* Styles for Header Icon Buttons */
.btn-icon-header {
    font-size: 1.5em; /* Adjust icon size */
    padding: 8px 12px; /* Adjust padding to make button size appropriate for icon */
    line-height: 1; /* Ensure icon is vertically centered */
    min-width: 44px; /* Ensure a decent tap target size */
    min-height: 44px;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.2);
}

.btn-icon-header:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.35);
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
}

.btn-icon-header form {
    display: inline; /* Ensure form doesn't break layout */
}

/* Styles for the new horizontal cash entry table */
.cash-entry-horizontal {
  width: 100%;
  margin-bottom: 10px; /* Spacing before notes */
}

.cash-entry-horizontal th,
.cash-entry-horizontal td {
  text-align: left;
  padding: 8px 5px; /* Reduced padding */
  vertical-align: top; /* Align headers with inputs if they wrap */
}

.cash-entry-horizontal th {
  font-weight: 600;
  font-size: 0.9em; /* Slightly smaller header text */
}

.dark-mode .cash-entry-horizontal th {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
  color: #e0e0e0 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.cash-entry-horizontal td {
  /* Each cell will take up equal width */
  width: 25%;
}

.cash-entry-horizontal .cash-input {
  width: 100% !important; /* Make input take full cell width */
  max-width: 130px; /* Limit max width to prevent excessive stretching */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  padding: 8px 5px; /* Adjust input padding */
  font-size: 1em; /* Adjust font size if needed */
  height: auto; /* Let height be determined by content and padding */
}

.cash-entry-horizontal span { /* For non-editable view */
  display: block;
  padding: 8px 5px;
  font-size: 1em;
}


/* Styling for the notes section below the horizontal cash entry */
.notes-section {
  margin-top: 10px; /* Space above notes */
}

.notes-section label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.9em;
}

.dark-mode .notes-section label {
  color: #e0e0e0;
}

.dark-mode .form-group label {
  color: #e0e0e0;
}

.notes-section textarea.form-control {
  width: 100%;
  min-height: 60px; /* Keep a reasonable minimum height */
  padding: 8px;
  box-sizing: border-box;
}

.notes-section p { /* For non-editable notes */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 10px;
  min-height: 60px;
}

/* Role shift section adjustments */
.role-shift-section {
  margin-bottom: 10px !important; /* Reduced space between role sections, use !important if overriding inline */
}

.role-shift-section h4 {
  margin-bottom: 6px !important; /* Reduced from 8px */
  font-size: 1.15em; /* Slightly smaller role name heading */
}

.dark-mode .role-shift-section h4 {
  color: #e0e0e0;
}

.dark-mode #all-shifts-container > h3 {
  color: #e0e0e0;
}

/* Adjust overall section container for shifts if needed, targeting the H3 for "Shift Hours" */
#all-shifts-container > h3 { /* More specific selector for the Shift Hours H3 */
  margin-bottom: 6px !important; /* Reduced from 8px */
  font-size: 1.2em; /* Slightly smaller section title */
}

/* New styles for horizontal add worker controls */
.add-worker-controls-flex-container {
  display: flex;
  align-items: flex-end; /* Align items to the bottom, useful if label makes search taller */
  gap: 10px; /* Space between search group and button */
}

.search-worker-group {
  margin-bottom: 0 !important; /* Keep this to override default form-group margin if necessary */
}

.search-worker-group .temp-search-input {
  width: 100%; /* Search input takes full width of its block container (.search-worker-group) */
}

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* General Responsive Styles */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

/* Floating Save Bar */
.floating-save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e2e6ea;
  padding: 10px 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 1001; /* above footer */
}
.floating-save-bar .inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.floating-save-bar .unsaved-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6c757d;
  font-weight: 600;
  transition: opacity 0.2s ease-in-out;
  opacity: 0; /* becomes 1 when there are unsaved changes */
}
.floating-save-bar .unsaved-indicator .dot {
  width: 10px;
  height: 10px;
  background-color: #ffc107;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255,193,7, 0.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,193,7, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255,193,7, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255,193,7, 0); }
}

.dark-mode .floating-save-bar {
  background: rgba(30, 30, 30, 0.9);
  border-top-color: #3a3a3a;
}
.dark-mode .floating-save-bar .unsaved-indicator { color: #adb5bd; }

/* Workers page tweaks */
table.workers-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}
table.workers-table td, table.workers-table th {
  vertical-align: middle;
}
.filter-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
}
.row-edited {
  animation: rowFlash 0.8s ease-in-out;
}
@keyframes rowFlash {
  0% { background-color: #fffbe6; }
  100% { background-color: transparent; }
}

/* Payouts: buttons and tables */
.btn-info {
  background-color: #17a2b8;
  color: white;
}
.btn-info:hover { background-color: #138496; }

/* Payout event details page button layout */
.payout-event-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.payout-event-actions .btn {
  margin: 0;
  font-weight: 500; /* Make all buttons have consistent, non-bold font weight */
}

.payout-event-actions form {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}

.payout-event-actions form button {
  margin: 0 !important;
}

/* Recent Payout Events table simplified to 3 columns */

/* Make recent events table rows clickable on all devices */
.manage-section:first-of-type .payout-table tbody tr {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.manage-section:first-of-type .payout-table tbody tr:hover {
  background-color: #f1f3f4;
}

/* Dark mode link colors - follow location accent */
.dark-mode a {
    color: var(--primary-color) !important;
}

.dark-mode a:hover {
    color: color-mix(in srgb, var(--primary-color) 72%, #ffffff) !important;
    text-decoration: underline;
}

/* Dark mode link colors in tables - ensure dates are readable */
.dark-mode table a,
.dark-mode .payout-table a,
.dark-mode .worker-status-table a {
    color: var(--primary-color) !important;
}

.dark-mode table a:hover,
.dark-mode .payout-table a:hover,
.dark-mode .worker-status-table a:hover {
    color: color-mix(in srgb, var(--primary-color) 72%, #ffffff) !important;
}

.btn-warning {
  background-color: #ffc107;
  color: #212529;
}
.btn-warning:hover { background-color: #e0a800; }

.btn-sm {
  padding: 6px 10px;
  font-size: 0.9em;
}

/* Ensure consistent font size for all small buttons, including those with inner spans */
a.btn-sm,
button.btn-sm,
.btn-sm .btn-text-desktop,
.btn-sm .btn-text-mobile {
  font-size: 0.9em !important;
}

table.payout-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #f8f9fa;
}

/* Floating selection/action bar (reuse floating-save-bar styles) */
.floating-selection-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e2e6ea;
  padding: 10px 16px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
  z-index: 1001;
  display: none; /* shown when rows selected */
}
.floating-selection-bar .inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selection-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6c757d;
  font-weight: 600;
}
.selection-count {
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.9em;
}
.dark-mode .floating-selection-bar { background: rgba(30,30,30,0.9); border-top-color: #3a3a3a; }
.dark-mode .selection-summary { color: #adb5bd; }

/* Analytics UI */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 16px;
  margin-bottom: 16px;
}
.dark-mode .card { background: #1e1e1e; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

table.data-table {
  width: 100%;
  border-collapse: collapse;
}
table.data-table th, table.data-table td {
  border-bottom: 1px solid #dee2e6;
  padding: 10px;
}
table.data-table th {
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 1;
}

.analytics-filters .btn { margin-right: 6px; }
.analytics-filters .btn:last-child { margin-right: 0; }

.worker-filter {
  width: 260px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
}

.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.analytics-compare-heading { display: block; font-weight: 600; margin-bottom: 8px; }
.analytics-compare-options { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.analytics-compare-option { font-weight: normal; cursor: pointer; }
.analytics-loc-compare-form { margin-bottom: 16px; }
.analytics-trend-summary { margin: 12px 0 18px; }
.analytics-compare-note { font-size: 0.9em; opacity: 0.88; margin: 0 0 14px; max-width: 56rem; line-height: 1.45; }
.analytics-grain-help { font-size: 0.95em; opacity: 0.9; margin: 0 0 16px; max-width: 56rem; line-height: 1.5; }

.analytics-view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.analytics-view-toggle .analytics-daily-view-btn.is-active {
  border-color: var(--primary-color);
  color: var(--primary-color);
  font-weight: 600;
}
.analytics-daily-chart-wrap { margin-top: 4px; }
.analytics-chart-canvas-host {
  position: relative;
  height: min(320px, 52vh);
  width: 100%;
  max-width: 100%;
}
.analytics-chart-canvas-host.is-hidden { display: none !important; }
.analytics-daily-table-wrap.is-hidden,
.analytics-daily-chart-wrap.is-hidden { display: none !important; }
.analytics-chart-empty { margin: 12px 0; font-size: 0.95em; opacity: 0.88; display: block; }
.analytics-chart-empty.is-hidden { display: none !important; }

/* Summary Table Responsive Design */
/* Show desktop table by default, hide mobile table */
.summary-table-desktop {
  display: table;
}

.summary-table-mobile {
  display: none;
}





/* Flash Messages */
.flashes {
    padding: 0;
    margin: 0 0 1em 0;
    list-style: none;
}

.flash-error, .flash-success, .flash-warning, .flash-info {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.worker-highlight {
    background-color: #d4edda; /* A light green for success/positive highlight */
}

.dark-mode .worker-highlight {
    background-color: #2a4b37; /* A darker green for dark mode */
}

.health-insurance-note {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.9em;
    color: #155724;
}

.dark-mode .health-insurance-note {
    background-color: #2a4b37;
    border-color: #1e7e34;
    color: #c3e6cb;
}

/* Button text control for desktop - show desktop text, hide mobile text */
.btn-text-desktop {
  display: inline;
}

.btn-text-mobile {
  display: none;
}

/* Header text control for desktop - show desktop text, hide mobile text */
.header-text-desktop {
  display: inline;
}

.header-text-mobile {
  display: none;
}

/* Week formatting - show desktop text, hide mobile formatting on desktop */
.week-text-desktop {
  display: inline;
}

.week-label-mobile,
.week-dates-mobile {
  display: none;
}

/* Cash summary control for desktop - show desktop table, hide mobile summary */
.cash-summary-desktop {
  display: table;
}

.cash-summary-mobile {
    display: none;
}

/* Crew schedule (week grid, templates) — align main column with dashboard / crew pages */
.schedule-page.section-container {
    width: 90%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: hidden;
}

.schedule-page .schedule-week-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.schedule-page .schedule-week-label {
    font-weight: 600;
}

.schedule-page .schedule-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.schedule-page .schedule-message {
    margin-bottom: 1rem;
    min-height: 1.25rem;
}

/* Shift pool tabs (Day / Evening / …) */
.schedule-pool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.25rem;
}

.dark-mode .schedule-pool-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.schedule-pool-tab {
    border: none;
    background: transparent;
    color: #495057;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-family: inherit;
}

.schedule-pool-tab:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #212529;
}

.schedule-pool-tab.active {
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    box-shadow: inset 0 -2px 0 #0d6efd;
}

.dark-mode .schedule-pool-tab {
    color: #cbd5e1;
}

.dark-mode .schedule-pool-tab:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #f8fafc;
}

.dark-mode .schedule-pool-tab.active {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    box-shadow: inset 0 -2px 0 #60a5fa;
}

.schedule-pool-panel {
    margin-bottom: 1.5rem;
}

.schedule-page .schedule-table-wrap {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Pivoted grid: rows = days, columns = roles (fits the main card without horizontal scroll) */
.schedule-pivot-table {
    width: 100%;
    table-layout: auto;
    margin-bottom: 0;
}

.schedule-pivot-table .schedule-cell {
    vertical-align: top;
    min-width: 6.5rem;
}

.schedule-pivot-table thead th:first-child,
.schedule-pivot-table tbody th[scope="row"] {
    white-space: nowrap;
    min-width: 5.5rem;
    font-weight: 600;
}

.schedule-day-wd {
    margin-right: 0.25rem;
}

.schedule-assign-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.schedule-assign-row .sched-user {
    flex: 1 1 6rem;
    min-width: 6rem;
}

/* Subsections inside the single schedule card (avoid nested section-container width bleed) */
.schedule-page .schedule-side {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark-mode .schedule-page .schedule-side {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.schedule-template-card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    background: #fff;
}

.dark-mode .schedule-template-card {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.12);
}

.schedule-inline-form .form-row,
.schedule-template-row-form .form-row,
.schedule-apply-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 0.5rem;
    min-width: 0;
}

.schedule-page .schedule-side label {
    min-width: 0;
    flex: 1 1 12rem;
    max-width: 100%;
}

.schedule-page .schedule-side .form-control,
.schedule-page .schedule-side .form-select {
    max-width: 100%;
    box-sizing: border-box;
}

.schedule-time-off-list {
    list-style: none;
    padding-left: 0;
}

.schedule-time-off-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.inline-delete-form {
    display: inline;
}

.schedule-day-num {
    font-weight: normal;
    font-size: 0.85em;
    color: #666;
}