@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-500.woff2') format('woff2');
}

:root {
    --color-bg: #f3f5fe;
    --color-bg-raised: #ffffff;
    --color-surface: #ffffff;
    --color-fg: #292b31;
    --color-fg-muted: rgba(41, 43, 49, 0.55);
    --color-border: rgba(41, 43, 49, 0.14);
    --color-accent: #6c47ff;
    --color-accent-soft: rgba(108, 71, 255, 0.18);
    --color-nav-active: #8b6cff;
    --color-event-bg: #ebe5ff;
    --color-event-text: #3b2699;
    --color-red-line: #c73036;
    --color-amber: #b8860b;
    --color-red: #b3261e;
    --color-recurring-tint: #e6f4ea;
    --color-due-yellow: #a37a00;
    --color-due-orange: #c95a00;
    --color-due-red: #c62828;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --shadow-sm: 0 0 0 1px #cfd3e5;
    --shadow-md: 0 0 0 1px #b2b6ca, 0 6px 18px rgba(20, 20, 30, 0.10);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #161826;
        --color-bg-raised: #232532;
        --color-surface: #232532;
        --color-fg: #e9e9ed;
        --color-fg-muted: rgba(233, 233, 237, 0.55);
        --color-border: rgba(233, 233, 237, 0.16);
        --color-accent: #a78bff;
        --color-accent-soft: rgba(167, 139, 255, 0.26);
        --color-nav-active: #a78bff;
        --color-event-bg: #5b3fd6;
        --color-event-text: #f2eeff;
        --color-red-line: #e5484d;
        --color-amber: #d8a441;
        --color-red: #e5716a;
        --color-recurring-tint: #1c2b20;
        --color-due-yellow: #f0cf4d;
        --color-due-orange: #ff9838;
        --color-due-red: #ff5c5c;
        --shadow-sm: 0 0 0 1px #3f424d;
        --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

:root[data-theme="light"] {
    --color-bg: #f3f5fe;
    --color-bg-raised: #ffffff;
    --color-surface: #ffffff;
    --color-fg: #292b31;
    --color-fg-muted: rgba(41, 43, 49, 0.55);
    --color-border: rgba(41, 43, 49, 0.14);
    --color-accent: #6c47ff;
    --color-accent-soft: rgba(108, 71, 255, 0.18);
    --color-nav-active: #8b6cff;
    --color-event-bg: #ebe5ff;
    --color-event-text: #3b2699;
    --color-red-line: #c73036;
    --color-amber: #b8860b;
    --color-red: #b3261e;
    --color-recurring-tint: #e6f4ea;
    --color-due-yellow: #a37a00;
    --color-due-orange: #c95a00;
    --color-due-red: #c62828;
    --shadow-sm: 0 0 0 1px #cfd3e5;
    --shadow-md: 0 0 0 1px #b2b6ca, 0 6px 18px rgba(20, 20, 30, 0.10);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --color-bg: #161826;
    --color-bg-raised: #232532;
    --color-surface: #232532;
    --color-fg: #e9e9ed;
    --color-fg-muted: rgba(233, 233, 237, 0.55);
    --color-border: rgba(233, 233, 237, 0.16);
    --color-accent: #a78bff;
    --color-accent-soft: rgba(167, 139, 255, 0.26);
    --color-nav-active: #a78bff;
    --color-event-bg: #5b3fd6;
    --color-event-text: #f2eeff;
    --color-red-line: #e5484d;
    --color-amber: #d8a441;
    --color-red: #e5716a;
    --color-recurring-tint: #1c2b20;
    --color-due-yellow: #f0cf4d;
    --color-due-orange: #ff9838;
    --color-due-red: #ff5c5c;
    --shadow-sm: 0 0 0 1px #3f424d;
    --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* Column flex over the full viewport so a page can ask to fill whatever
       height the header leaves (see .day-layout), without hard-coding the
       header's height into a calc(). Other pages are unaffected: block
       children stack the same way, and nothing else sets flex-grow. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-fg);
}

a {
    color: var(--color-accent);
}

/* Local installs only (partials/head.phtml). A fixed red rather than the
   theme's variables, so it looks the same in light and dark mode. */
.dev-banner {
    flex: none;
    height: 3px;
    background: #d6252b;
}

/* The 2FA setup QR (views/auth/totp-setup.phtml). Left at its natural size —
   scaling it up blurs the module edges scanners rely on — and shrunk only if
   the screen is narrower than it. The image carries its own white quiet zone,
   so it stays scannable on the dark theme. */
.totp-qr {
    max-width: 100%;
    height: auto;
    image-rendering: pixelated;
}

.app-header {
    margin: 14px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.app-header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
}

.app-wordmark {
    font-weight: 500;
    font-size: 17px;
    margin-right: auto;
    white-space: nowrap;
}

.app-nav-inline {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.nav-link {
    font-size: 13px;
    padding: 7px 12px;
    color: var(--color-fg);
    text-decoration: none;
    background: transparent;
    white-space: nowrap;
}

/* The current page's tab: solid purple with dark text, in both themes. Its own
   token rather than --color-accent because dark text on the light theme's accent
   is too faint to read (3.5:1); this lighter purple carries it at 5:1, and the
   dark theme's accent already does (6.9:1). */
.nav-link-active {
    background: var(--color-nav-active);
    color: #14121f;
}

.nav-search {
    display: flex;
    /* Shrinks before the nav pills do when the bar gets tight. */
    flex: 0 1 170px;
    min-width: 90px;
}

.nav-search input[type="search"] {
    width: 100%;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    color: var(--color-fg);
}

/* In the mobile dropdown the box spans the menu instead of competing
   with the wordmark for bar width. */
.app-nav-dropdown .nav-search {
    flex: none;
    width: 100%;
    margin-bottom: 4px;
}

.hamburger-button {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: transparent;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
}

.hamburger-button span {
    width: 16px;
    height: 2px;
    background: var(--color-fg);
}

.app-nav-dropdown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 14px 14px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.app-nav-dropdown .nav-link {
    padding: 4px 0;
    font-size: 14px;
}

@media (max-width: 700px) {
    .app-nav-inline,
    .app-header-bar .nav-search {
        display: none;
    }

    .hamburger-button {
        display: flex;
    }
}

/* Safety net: the hamburger (the only way to open the dropdown) is only
   ever visible below 700px, but if a browser window is resized wider while
   the dropdown happens to be open, force it closed regardless of Alpine's
   still-true mobileNavOpen state. */
@media (min-width: 701px) {
    .app-nav-dropdown {
        display: none !important;
    }
}

.app-main {
    padding: 1.25rem;
}

@media (max-width: 480px) {
    .app-main {
        padding: 0.75rem;
    }
}

button {
    font: inherit;
    background: var(--color-bg-raised);
    color: var(--color-fg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

/* Keeps x-show content that starts hidden from flashing open before Alpine
   has loaded and applied it. */
[x-cloak] {
    display: none !important;
}

.tag-amber {
    color: var(--color-amber);
}

.tag-red {
    color: var(--color-red);
}

.tag-accent {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.text-muted {
    color: var(--color-fg-muted);
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* — fading rule: a horizontal divider that fades to transparent at each
   end instead of stopping cleanly. */
.hr {
    height: 1px;
    border: 0;
    margin: 1.25rem 0;
    background: linear-gradient(to right,
        transparent, var(--color-border) 48px,
        var(--color-border) calc(100% - 48px), transparent);
}

/* — cards — */
.card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.card-kicker {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.card-heading {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.2;
}

.card-body {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
    flex: 1;
}

/* Two or more buttons on one card. The forms are layout-neutral so the
   buttons themselves share the row and wrap together when it gets tight. */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.card-actions form {
    flex: 1 1 auto;
    margin: 0;
}

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

.elev-sm {
    box-shadow: var(--shadow-sm);
}

.elev-md {
    box-shadow: var(--shadow-md);
}

/* — buttons: opt-in variants, layered on top of the base `button` rule
   above rather than replacing it, so pages that don't use `.btn` are
   unaffected. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.btn-primary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-soft);
}

.btn-secondary {
    background: transparent;
    color: var(--color-fg);
    border-color: var(--color-border);
}

.btn-secondary:hover {
    background: var(--color-bg-raised);
}

.btn-ghost {
    background: none;
    border-color: transparent;
    color: var(--color-accent);
    padding: 4px 8px;
    font-size: 12px;
}

.btn-ghost:hover {
    background: var(--color-accent-soft);
}

.btn-ghost-muted {
    color: var(--color-fg-muted);
}

.btn-block {
    width: 100%;
}