/* ==========================================================================
   Setpaid design system
   --------------------------------------------------------------------------
   Layered on top of Bootstrap 5.3. The goal is a single, cohesive brand —
   a money-green identity that reads the same across the marketing landing
   page, the authentication screens, and the in-app pages.

   Brand anchor: the favicon — a white "$" on a money-green rounded square.
   Everything here derives from that mark.

   Structure:
     1. Brand tokens + Bootstrap theme overrides (kills the default blue)
     2. Typography
     3. Buttons
     4. Navbar + brand mark
     5. Cards, dropdowns, forms
     6. Marketing surfaces (hero, features, steps)
     7. Auth + account management
     8. Status badges
     9. Footer
    10. Motion (reveal-on-scroll, reduced-motion safe)
   ========================================================================== */

/* 1. Brand tokens + Bootstrap theme overrides -------------------------------
   The green scale mirrors a standard 50–900 ramp. Two contrast rules keep us
   WCAG AA: solid fills that carry white text use green-700 (#15803d ≈ 5:1 on
   white); only large text, icons, borders and decorative fills use the
   brighter green-600/500. */
:root {
    --brand-50:  #f0fdf4;
    --brand-100: #dcfce7;
    --brand-200: #bbf7d0;
    --brand-300: #86efac;
    --brand-400: #4ade80;
    --brand-500: #22c55e;
    --brand-600: #16a34a;
    --brand-700: #15803d;
    --brand-800: #166534;
    --brand-900: #14532d;
    --brand-ink: #0f2e1d;   /* near-black green for deep surfaces / wordmark */

    /* Backwards-compatible aliases used by existing utility classes/markup. */
    --brand-primary: #16a34a;
    --brand-primary-dark: #15803d;

    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
    --card-shadow-hover: 0 8px 28px rgba(16, 24, 40, 0.12);
    --card-radius: 1rem;
    --input-border: #e2e8f0;
    --input-radius: 0.5rem;
    --input-focus-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.18);
    --brand-focus-ring: 0 0 0 0.25rem rgba(22, 163, 74, 0.25);

    /* Body type. (Bootstrap is gone; the framework component look now comes from
       the compiled Tailwind + Basecoat build — see static/src/bootstrap-compat.css.) */
    --body-font-family: "Plus Jakarta Sans", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --body-color: #1f2933;
}

/* 2. Typography ------------------------------------------------------------- */
body {
    font-family: var(--body-font-family);
    color: var(--body-color);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Weight + tighter tracking give headings a confident, modern voice without
   forcing a color (so white headings on the green hero stay white). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lead {
    font-weight: 400;
}

/* Text-only document pages (legal docs, policies). The marketing-sized default
   headings feel oversized next to body copy, so scale them down for a calmer,
   document-like rhythm. */
.doc-prose h1 {
    font-size: 1.9rem;
    margin-bottom: 0.75rem;
}

.doc-prose h2 {
    font-size: 1.3rem;
    margin-top: 1.85rem;
    margin-bottom: 0.6rem;
}

.doc-prose h3 {
    font-size: 1.05rem;
    margin-top: 1.4rem;
}

/* Brand utilities (referenced from markup) */
.text-brand {
    color: var(--brand-700) !important;
}

.bg-brand-soft {
    background-color: var(--brand-50) !important;
}

/* 3. Buttons, cards, forms, tabs, pagination, list-groups — now provided by the
   compiled Tailwind + Basecoat build (static/src/bootstrap-compat.css), skinned
   with the brand tokens above. Brand-specific button colors (.btn-brand, etc.)
   live there too. */

/* 4. Navbar + brand mark ---------------------------------------------------- */
.app-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(20, 83, 45, 0.1);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}

.app-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
}

.app-navbar .nav-link {
    color: #475467;
    font-weight: 500;
    border-radius: 0.5rem;
    padding-inline: 0.75rem;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
    color: var(--brand-700);
    background-color: var(--brand-50);
}

.app-navbar .nav-link.active {
    color: var(--brand-700);
    font-weight: 600;
}

/* "Finish setup" warning link needs darker amber for contrast on white. */
.app-navbar .nav-link.text-warning,
.app-navbar .navbar-text.text-warning {
    color: #b45309 !important;
}

/* Persistent free-trial chip in the navbar. Quiet brand-tinted pill that stays
   visible for the whole trial (the site-wide banner escalates separately in the
   final days); links to billing so subscribing is always one click away. */
.trial-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--brand-primary-dark);
    background-color: rgba(22, 163, 74, 0.1);
    border: 1px solid rgba(22, 163, 74, 0.25);
    transition: background-color 0.15s ease;
}

.trial-chip:hover,
.trial-chip:focus-visible {
    color: var(--brand-primary-dark);
    background-color: rgba(22, 163, 74, 0.16);
}

.trial-chip__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--brand-primary);
}

/* Mobile (collapsed) hamburger menu: one flex column with a single `gap` as the
   sole vertical spacer, so links and the Login / Sign up buttons share an even
   rhythm and left-align (stretch = full-width rows). Links hug their text via
   min-height + flex-center, keeping the gap the only spacer while staying
   tappable. Stacked styles are scoped per expand breakpoint (logged-out = md,
   logged-in = lg) so a nav that's already expanded in the 768–991px band isn't
   re-stacked. The two blocks are identical apart from breakpoint + expand class. */
@media (max-width: 767.98px) {
    .app-navbar.navbar-expand-md .navbar-collapse {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        /* Overlay (float below the bar) instead of expanding it. ui.js slides it
           in with transform+opacity; an absolute panel means opening it doesn't
           reflow the page or grow the navbar's blurred backdrop (both jank on
           phones). Solid surface so page content doesn't bleed through. The
           sticky bar stays pinned, so cap the panel to the viewport and let it
           scroll — otherwise a tall menu on a short/landscape phone would put
           its lower links off-screen and unreachable. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1029;
        padding: 0.5rem 0.75rem 0.75rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(20, 83, 45, 0.1);
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
    }

    .app-navbar.navbar-expand-md .navbar-nav {
        gap: 0.5rem;
        margin-right: 0 !important; /* neutralize me-auto; meaningless when stacked */
    }

    .app-navbar.navbar-expand-md .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        padding-block: 0;
    }

    .app-navbar.navbar-expand-md .navbar-collapse .btn {
        min-height: 2.5rem;
    }
}

@media (max-width: 991.98px) {
    .app-navbar.navbar-expand-lg .navbar-collapse {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        /* Overlay (float below the bar) instead of expanding it — see the md
           block above for why, including the viewport cap + scroll. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1029;
        padding: 0.5rem 0.75rem 0.75rem;
        background-color: #fff;
        border-bottom: 1px solid rgba(20, 83, 45, 0.1);
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        overflow-y: auto;
    }

    .app-navbar.navbar-expand-lg .navbar-nav {
        gap: 0.5rem;
        margin-right: 0 !important; /* neutralize me-auto; meaningless when stacked */
    }

    .app-navbar.navbar-expand-lg .navbar-collapse .nav-link {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
        padding-block: 0;
    }

    .app-navbar.navbar-expand-lg .navbar-collapse .btn {
        min-height: 2.5rem;
    }
}

/* Hamburger toggler: three bars that morph to an X when expanded. The state is
   driven by aria-expanded, which ui.js flips on toggle. */
.navbar-toggler-bars {
    position: relative;
    display: block;
    width: 1.3rem;
    height: 0.95rem;
}

.navbar-toggler-bars > span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background-color: #1f2933;
}

.navbar-toggler-bars > span:nth-child(1) { top: 0; }
.navbar-toggler-bars > span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.navbar-toggler-bars > span:nth-child(3) { bottom: 0; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-bars > span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-bars > span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-bars > span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
    .navbar-toggler-bars > span {
        transition: top 0.25s ease, bottom 0.25s ease, transform 0.25s ease,
            opacity 0.2s ease;
    }
}

/* The brand mark — a CSS echo of the favicon ($ on a green rounded square). */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(21, 128, 61, 0.35);
}

.brand-mark::before {
    content: "$";
}

.brand-mark-lg {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    font-size: 1.5rem;
}

/* 5. Cards, dropdowns, forms, pagination, tabs — provided by the compiled
   Tailwind + Basecoat build (static/src/bootstrap-compat.css). */

/* 6. Marketing surfaces ----------------------------------------------------- */
.landing-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 82% -20%, rgba(74, 222, 128, 0.45), transparent 55%),
        radial-gradient(circle at 0% 120%, rgba(34, 197, 94, 0.28), transparent 50%),
        linear-gradient(135deg, var(--brand-700) 0%, var(--brand-800) 55%, var(--brand-900) 100%);
}

.landing-hero .btn-light {
    color: var(--brand-700);
    font-weight: 700;
}

.landing-hero .btn-light:hover {
    color: var(--brand-800);
}

/* Circular tinted badge that wraps each feature icon. */
.feature-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background-color: var(--brand-50);
    border: 1px solid var(--brand-100);
    color: var(--brand-700);
}

.feature-icon-badge .landing-feature-icon {
    width: 1.85rem;
    height: 1.85rem;
    margin-bottom: 0 !important;
}

.landing-feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--brand-700);
}

.landing-step-number {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3);
}

/* Page header: title on the left, actions on the right (stacks on phones). */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
    .page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 575.98px) {
    .page-header-actions {
        width: 100%;
    }
}

.calendar-table {
    width: 100%;
    min-width: 720px;
    table-layout: fixed;
    border-collapse: collapse;
}

.calendar-table td {
    height: 150px;
}

.calendar-table th {
    background-color: var(--brand-50);
}

@media (max-width: 767.98px) {
    .calendar-table td {
        height: 110px;
        font-size: 0.8rem;
    }
}

.modal-body.fixed-height {
    height: 80vh;
    overflow-y: auto;
}

.dashboard-card {
    /* A clearer border + a more present resting shadow so the cards lift off
       the white page instead of blending into it; hover adds a green-tinted
       lift so they read as interactive. */
    border: 1px solid #e3e7ec;
    border-radius: var(--card-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 10px 22px -14px rgba(16, 24, 40, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary);
    box-shadow: 0 16px 34px -14px rgba(21, 128, 61, 0.32), 0 6px 14px rgba(16, 24, 40, 0.08);
}

.dashboard-icon {
    font-size: 2.5rem;
    color: var(--brand-700);
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dashboard-btn {
    width: 100%;
}

/* 7. Status badges (invoice states) ---------------------------------------- */
.bg-paid {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.bg-open {
    background-color: #cff4fc !important;
    color: #055160 !important;
}

.bg-draft {
    background-color: #e2e3e5 !important;
    color: #41464b !important;
}

.bg-uncollectible {
    background-color: #f8d7da !important;
    color: #58151d !important;
}

.bg-void {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
}

/* 8. Auth + account management --------------------------------------------- */
/* Brand lockup shown above the auth card so login/signup feel on-brand. */
.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    color: var(--brand-ink);
    text-decoration: none;
}

.auth-brand:hover {
    color: var(--brand-ink);
}

.auth-container {
    max-width: 450px;
    margin: 48px auto;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.auth-container a {
    color: var(--brand-700);
    text-decoration: none;
}

.auth-container a:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-container {
        margin: 24px auto;
        padding: 2rem 1.5rem;
    }
}

.manage-container {
    max-width: 480px;
    margin: 48px auto;
    padding: 2.5rem;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

@media (max-width: 480px) {
    .manage-container {
        margin: 24px auto;
        padding: 2rem 1.5rem;
    }
}

.account-menu {
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 0.875rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.account-menu h5 {
    color: var(--brand-900);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-menu li {
    margin-bottom: 0.5rem;
}

.account-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #3f5249;
    text-decoration: none;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
    font-weight: 500;
}

.account-menu a:hover {
    background-color: var(--brand-700);
    color: white;
}

.account-menu a.text-danger:hover,
.account-menu a.text-danger:focus {
    background-color: #dc3545;
    color: #fff !important;
}

.account-menu a.text-danger:hover .bi,
.account-menu a.text-danger:focus .bi {
    color: #fff !important;
}

.account-menu a.active {
    background-color: var(--brand-100);
    color: var(--brand-800);
    border-left: 3px solid var(--brand-700);
}

.account-menu a.active .bi {
    color: var(--brand-700);
}

.account-menu .bi {
    margin-right: 0.5rem;
    width: 16px;
}

@media (max-width: 480px) {
    .account-menu {
        padding: 1rem;
    }
}

.password-toggle {
    border: 1px solid var(--input-border);
    border-left: none;
    border-radius: 0 var(--input-radius) var(--input-radius) 0;
    padding: 0.375rem 0.75rem;
    transition: border-color 0.15s ease-in-out;
}

.password-toggle:hover {
    background-color: var(--brand-50);
}

.input-group:focus-within .password-toggle {
    border-color: var(--brand-400);
}

.auth-header {
    margin-bottom: 1.5rem;
}

.auth-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.auth-links a {
    color: var(--brand-700);
    text-decoration: none;
}

.auth-links a:hover {
    color: var(--brand-800);
    text-decoration: underline;
}

.errorlist {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    list-style: none;
    padding: 0;
}

.errorlist li {
    margin-bottom: 0.25rem;
}

.form-field {
    position: relative;
}

.error-message {
    display: flex;
    align-items: center;
    color: #dc3545;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.error-message:last-child {
    margin-bottom: 0;
}

/* 9. Footer ----------------------------------------------------------------- */
.site-footer {
    background-color: var(--brand-ink);
    color: rgba(255, 255, 255, 0.72);
}

.site-footer .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.site-footer a:not(.footer-brand) {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.site-footer a:not(.footer-brand):hover {
    color: #fff;
    text-decoration: underline;
}

/* 10. Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* Scoped to `.js` (set in base.html before paint) so reveal sections only
       start hidden when JavaScript is present to reveal them — no-JS visitors
       see the content rather than a blank opacity:0 section. */
    .js .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.6s ease, transform 0.6s ease;
        will-change: opacity, transform;
    }

    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

/* Honor reduced-motion: no lifts, no slides. */
@media (prefers-reduced-motion: reduce) {
    .btn-brand:hover,
    .btn-primary:hover,
    .btn-success:hover,
    .dashboard-card:hover {
        transform: none;
    }
}

/* Sync help disclosure — collapsible "How Calendar Sync Works" panel on the
   calendar sync page. Hidden by default so the page leads with the action;
   Bootstrap's collapse handles the smooth height animation when expanded. */
.sync-help {
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid var(--input-border);
    border-radius: var(--card-radius);
    overflow: hidden;
}

.sync-help-toggle {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.875rem 1.125rem;
    background-color: transparent;
    border: 0;
    font-weight: 600;
    /* Muted so this nice-to-have disclosure doesn't compete with the primary
       actions for attention. */
    color: #6c757d;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.sync-help-toggle:hover,
.sync-help-toggle:focus-visible {
    background-color: rgba(100, 116, 139, 0.08);
}

.sync-help-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(22, 163, 74, 0.2);
}

.sync-help-icon {
    flex: 0 0 auto;
    font-size: 1.1rem;
    color: #6c757d;
}

.sync-help-title {
    flex: 1 1 auto;
}

.sync-help-chevron {
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}

.sync-help-toggle[aria-expanded="true"] .sync-help-chevron {
    transform: rotate(180deg);
}

.sync-help-content {
    padding: 0 1.125rem 1.125rem;
}

.sync-help-content ul {
    padding-left: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .sync-help-toggle,
    .sync-help-chevron {
        transition: none;
    }
}