/*
 * 525 Ocean Parkway — Design System Overrides
 * Loaded last so these declarations win over Bulma + extensions.
 *
 * Architecture:
 *   1. Design tokens  (:root custom properties)
 *   2. Dark-mode token overrides  ([data-theme="dark"])
 *   3. Global resets / base typography
 *   4. Navbar (glassmorphism sticky)
 *   5. Footer
 *   6. Home hero + quick-link cards
 *   7. Page header (shared across inner pages)
 *   8. Outstanding Tasks — page, buckets, cards, skeleton, empty state
 *   9. Badge / tag system
 *  10. Accessibility — focus-visible, reduced-motion
 *  11. Utility helpers
 *  12. Financial Dashboard — KPI cards
 *  13. Timeline (RAG progress steps)
 *  14. Responsive adjustments
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* --- Brand palette (OKLCH for perceptual uniformity) --- */
    --op-brand-h:        220deg;
    --op-brand-s:        62%;

    /* Primary blue — trustworthy, civic */
    --op-primary:        oklch(44% 0.15 250);
    --op-primary-light:  oklch(55% 0.14 250);
    --op-primary-dark:   oklch(34% 0.13 250);
    --op-primary-subtle: oklch(96% 0.03 250);

    /* Accent — warm amber, not aggressive */
    --op-accent:         oklch(68% 0.17 68);
    --op-accent-light:   oklch(92% 0.06 68);
    --op-accent-dark:    oklch(52% 0.16 68);

    /* Semantic status colours */
    --op-success:        oklch(55% 0.17 155);
    --op-success-light:  oklch(94% 0.05 155);
    --op-warning:        oklch(72% 0.16 70);
    --op-warning-light:  oklch(95% 0.05 70);
    --op-danger:         oklch(58% 0.20 25);
    --op-danger-light:   oklch(95% 0.05 25);
    --op-info:           oklch(56% 0.17 210);
    --op-info-light:     oklch(94% 0.04 210);

    /* --- Surfaces --- */
    --op-bg:             oklch(98% 0.005 250);
    --op-surface:        #ffffff;
    --op-surface-raised: #ffffff;
    --op-surface-sunken: oklch(96% 0.008 250);
    --op-border:         oklch(88% 0.01 250);
    --op-border-strong:  oklch(78% 0.02 250);

    /* --- Text --- */
    --op-text:           oklch(22% 0.02 250);
    --op-text-secondary: oklch(45% 0.02 250);
    --op-text-muted:     oklch(62% 0.015 250);
    --op-text-inverse:   #ffffff;

    /* --- Typography --- */
    --op-font:           'Inter', 'SF Pro Text', 'Segoe UI',
                         system-ui, -apple-system, sans-serif;
    --op-font-mono:      'Inconsolata', 'Roboto Mono', monospace;

    /* Type scale (1.250 major-third) */
    --op-text-xs:        0.75rem;   /* 12px */
    --op-text-sm:        0.875rem;  /* 14px */
    --op-text-base:      1rem;      /* 16px */
    --op-text-md:        1.125rem;  /* 18px */
    --op-text-lg:        1.25rem;   /* 20px */
    --op-text-xl:        1.5rem;    /* 24px */
    --op-text-2xl:       1.875rem;  /* 30px */
    --op-text-3xl:       2.25rem;   /* 36px */
    --op-text-4xl:       3rem;      /* 48px */

    /* Font weights */
    --op-weight-normal:  400;
    --op-weight-medium:  500;
    --op-weight-semibold:600;
    --op-weight-bold:    700;

    /* Line heights */
    --op-leading-tight:  1.25;
    --op-leading-snug:   1.4;
    --op-leading-normal: 1.6;

    /* --- Spacing (8px grid) --- */
    --op-space-1:  0.25rem;  /* 4px  */
    --op-space-2:  0.5rem;   /* 8px  */
    --op-space-3:  0.75rem;  /* 12px */
    --op-space-4:  1rem;     /* 16px */
    --op-space-5:  1.25rem;  /* 20px */
    --op-space-6:  1.5rem;   /* 24px */
    --op-space-8:  2rem;     /* 32px */
    --op-space-10: 2.5rem;   /* 40px */
    --op-space-12: 3rem;     /* 48px */
    --op-space-16: 4rem;     /* 64px */
    --op-space-20: 5rem;     /* 80px */
    --op-space-24: 6rem;     /* 96px */

    /* --- Border radii --- */
    --op-radius-sm:  0.25rem;   /* 4px  */
    --op-radius:     0.5rem;    /* 8px  */
    --op-radius-md:  0.75rem;   /* 12px */
    --op-radius-lg:  1rem;      /* 16px */
    --op-radius-xl:  1.5rem;    /* 24px */
    --op-radius-full:9999px;

    /* --- Shadows --- */
    --op-shadow-xs:  0 1px 2px  rgba(0, 0, 0, 0.06);
    --op-shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.08),
                     0 1px 2px  rgba(0, 0, 0, 0.04);
    --op-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10),
                     0 2px 4px  rgba(0, 0, 0, 0.06);
    --op-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12),
                     0 4px 8px  rgba(0, 0, 0, 0.06);
    --op-shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.14),
                     0 6px 12px rgba(0, 0, 0, 0.06);

    /* --- Motion --- */
    --op-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --op-ease-out:   cubic-bezier(0, 0, 0.2, 1);
    --op-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
    --op-duration-fast:   120ms;
    --op-duration:        200ms;
    --op-duration-slow:   320ms;

    /* --- Navbar --- */
    --op-navbar-h:       3.75rem;  /* 60px */
    --op-navbar-bg:      rgba(255, 255, 255, 0.85);
    --op-navbar-blur:    saturate(180%) blur(20px);
    --op-navbar-border:  rgba(0, 0, 0, 0.08);

    /* --- Focus ring --- */
    --op-focus-color:    oklch(55% 0.18 250);
    --op-focus-width:    3px;
    --op-focus-offset:   2px;
}

/* ============================================================
   2. DARK MODE TOKENS
   ============================================================ */
[data-theme="dark"] {
    --op-primary:        oklch(62% 0.16 250);
    --op-primary-light:  oklch(72% 0.14 250);
    --op-primary-dark:   oklch(50% 0.15 250);
    --op-primary-subtle: oklch(20% 0.04 250);

    --op-accent:         oklch(74% 0.16 68);
    --op-accent-light:   oklch(24% 0.06 68);
    --op-accent-dark:    oklch(62% 0.17 68);

    --op-success:        oklch(68% 0.17 155);
    --op-success-light:  oklch(22% 0.06 155);
    --op-warning:        oklch(78% 0.15 70);
    --op-warning-light:  oklch(24% 0.06 70);
    --op-danger:         oklch(70% 0.18 25);
    --op-danger-light:   oklch(22% 0.07 25);
    --op-info:           oklch(68% 0.15 210);
    --op-info-light:     oklch(22% 0.05 210);

    --op-bg:             oklch(13% 0.01 250);
    --op-surface:        oklch(17% 0.015 250);
    --op-surface-raised: oklch(20% 0.015 250);
    --op-surface-sunken: oklch(14% 0.01 250);
    --op-border:         oklch(28% 0.02 250);
    --op-border-strong:  oklch(36% 0.02 250);

    --op-text:           oklch(93% 0.008 250);
    --op-text-secondary: oklch(75% 0.01 250);
    --op-text-muted:     oklch(58% 0.01 250);

    --op-shadow-xs:  0 1px 2px  rgba(0, 0, 0, 0.3);
    --op-shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.4);
    --op-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --op-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.6);
    --op-shadow-xl:  0 16px 40px rgba(0, 0, 0, 0.7);

    --op-navbar-bg:      rgba(20, 20, 28, 0.88);
    --op-navbar-border:  rgba(255, 255, 255, 0.08);
    --op-focus-color:    oklch(72% 0.18 250);
}

/* System dark mode preference — mirrors the JS toggle */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="dark"]):not([data-theme]) {
        /* Only auto-activate if user hasn't explicitly set light */
    }
}

/* ============================================================
   2.5 ALPINE CLOAK
   ============================================================ */
/* Hide elements with x-cloak until Alpine.js initializes */
[x-cloak] { display: none !important; }

/* ============================================================
   3. BASE / RESET
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--op-font);
    font-size: var(--op-text-base);
    font-weight: var(--op-weight-normal);
    line-height: var(--op-leading-normal);
    color: var(--op-text);
    background-color: var(--op-bg);
    transition:
        background-color var(--op-duration) var(--op-ease),
        color var(--op-duration) var(--op-ease);
}

/* Main content area — respect fixed navbar height */
.op-main {
    min-height: calc(100vh - var(--op-navbar-h) - 4rem);
    padding-bottom: var(--op-space-16);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--op-font);
    font-feature-settings: "cv02", "cv03", "cv04", "cv09";
    line-height: var(--op-leading-tight);
    color: var(--op-text);
}

/* Links */
a {
    color: var(--op-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--op-duration-fast) var(--op-ease);
}
a:hover {
    color: var(--op-primary-dark);
}

/* ============================================================
   4. NAVBAR — glassmorphism sticky
   ============================================================ */
.op-navbar {
    background: var(--op-navbar-bg) !important;
    -webkit-backdrop-filter: var(--op-navbar-blur);
    backdrop-filter: var(--op-navbar-blur);
    border-bottom: 1px solid var(--op-navbar-border);
    box-shadow: var(--op-shadow-sm);
    height: var(--op-navbar-h);
    transition:
        background var(--op-duration-slow) var(--op-ease),
        box-shadow var(--op-duration) var(--op-ease);
    /* Ensure crisp rendering above blurred content */
    will-change: transform;
}

/* Brand area */
.op-brand {
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
    padding: var(--op-space-2) var(--op-space-4);
    text-decoration: none;
    border-radius: var(--op-radius);
    transition: background var(--op-duration-fast) var(--op-ease);
}
.op-brand:hover {
    background: var(--op-primary-subtle) !important;
    color: inherit !important;
}

.op-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--op-primary);
    color: white;
    border-radius: var(--op-radius);
    font-size: var(--op-text-sm);
    flex-shrink: 0;
    box-shadow: var(--op-shadow-xs);
}

.op-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.op-brand-number {
    font-size: var(--op-text-lg);
    font-weight: var(--op-weight-bold);
    color: var(--op-text);
    letter-spacing: -0.02em;
}
.op-brand-label {
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-medium);
    color: var(--op-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Nav links */
.op-nav-link {
    font-size: var(--op-text-sm) !important;
    font-weight: var(--op-weight-medium) !important;
    color: var(--op-text-secondary) !important;
    border-radius: var(--op-radius-sm) !important;
    padding: var(--op-space-2) var(--op-space-3) !important;
    transition:
        background var(--op-duration-fast) var(--op-ease),
        color var(--op-duration-fast) var(--op-ease) !important;
    position: relative;
}
.op-nav-link:hover,
.op-nav-link.is-active {
    background: var(--op-primary-subtle) !important;
    color: var(--op-primary) !important;
}

/* Dropdown */
.op-dropdown {
    border: 1px solid var(--op-border) !important;
    border-radius: var(--op-radius-md) !important;
    box-shadow: var(--op-shadow-lg) !important;
    background: var(--op-surface) !important;
    padding: var(--op-space-2) !important;
    min-width: 220px;
    overflow: hidden;
    /* Smooth reveal */
    animation: dropdownReveal var(--op-duration-fast) var(--op-ease-out);
}

@keyframes dropdownReveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.op-dropdown-item {
    border-radius: var(--op-radius-sm) !important;
    font-size: var(--op-text-sm) !important;
    color: var(--op-text-secondary) !important;
    padding: var(--op-space-2) var(--op-space-3) !important;
    transition: background var(--op-duration-fast) var(--op-ease) !important;
}
.op-dropdown-item:hover {
    background: var(--op-primary-subtle) !important;
    color: var(--op-primary) !important;
}

/* Dark mode toggle button */
.op-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1.5px solid var(--op-border);
    border-radius: var(--op-radius-full);
    background: transparent;
    color: var(--op-text-secondary);
    cursor: pointer;
    transition:
        background var(--op-duration-fast) var(--op-ease),
        color var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease),
        transform var(--op-duration-fast) var(--op-ease-spring);
    font-size: var(--op-text-sm);
}
.op-theme-toggle:hover {
    background: var(--op-primary-subtle);
    color: var(--op-primary);
    border-color: var(--op-primary);
    transform: rotate(15deg);
}
.op-theme-toggle:active {
    transform: rotate(30deg) scale(0.95);
}

/* Burger */
.op-burger {
    border: none !important;
    background: transparent !important;
    color: var(--op-text-secondary) !important;
    border-radius: var(--op-radius-sm) !important;
}
.op-burger:hover {
    background: var(--op-primary-subtle) !important;
    color: var(--op-primary) !important;
}

.op-navbar-menu.is-active {
    background: var(--op-surface) !important;
    border-top: 1px solid var(--op-border);
    box-shadow: var(--op-shadow-lg);
    padding: var(--op-space-3);
}

/* ============================================================
   5. FOOTER
   ============================================================ */
.op-footer {
    background: var(--op-surface-sunken);
    border-top: 1px solid var(--op-border);
    padding: var(--op-space-6) 0;
    margin-top: var(--op-space-16);
}

.op-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--op-space-6);
}

.op-footer-brand {
    font-weight: var(--op-weight-semibold);
    color: var(--op-text);
    font-size: var(--op-text-sm);
    display: flex;
    align-items: center;
}

.op-footer-tagline {
    font-size: var(--op-text-sm);
    color: var(--op-text-muted);
}

.op-footer-year {
    font-size: var(--op-text-xs);
    color: var(--op-text-muted);
}

/* ============================================================
   6. HOME HERO + QUICK-LINK CARDS
   ============================================================ */
.op-home-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Rich gradient background */
    background:
        linear-gradient(
            135deg,
            oklch(28% 0.12 260) 0%,
            oklch(38% 0.15 245) 50%,
            oklch(32% 0.10 265) 100%
        );
}

/* Subtle geometric backdrop texture */
.op-hero-backdrop {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(
            circle at 20% 50%,
            rgba(255, 255, 255, 0.04) 0%,
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 40%
        );
    pointer-events: none;
}

.op-hero-content {
    position: relative;
    z-index: 1;
    padding: var(--op-space-16) var(--op-space-6);
    text-align: center;
}

.op-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-2);
    padding: var(--op-space-2) var(--op-space-4);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--op-radius-full);
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-semibold);
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: var(--op-space-6);
    backdrop-filter: blur(8px);
}

.op-hero-title {
    font-size: clamp(var(--op-text-3xl), 6vw, var(--op-text-4xl));
    font-weight: var(--op-weight-bold);
    color: white;
    letter-spacing: -0.03em;
    line-height: var(--op-leading-tight);
    margin-bottom: var(--op-space-4);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.op-hero-subtitle {
    font-size: var(--op-text-md);
    color: rgba(255, 255, 255, 0.78);
    max-width: 42ch;
    margin: 0 auto var(--op-space-8);
    line-height: var(--op-leading-normal);
}

.op-hero-actions {
    display: flex;
    gap: var(--op-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.op-cta-primary {
    background: white !important;
    color: var(--op-primary-dark) !important;
    border-color: transparent !important;
    font-weight: var(--op-weight-semibold) !important;
    border-radius: var(--op-radius) !important;
    box-shadow: var(--op-shadow-md) !important;
    transition:
        transform var(--op-duration-fast) var(--op-ease-spring),
        box-shadow var(--op-duration-fast) var(--op-ease) !important;
}
.op-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--op-shadow-lg) !important;
    color: var(--op-primary-dark) !important;
}
.op-cta-primary:active { transform: translateY(0); }

.op-cta-secondary {
    background: rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    font-weight: var(--op-weight-semibold) !important;
    border-radius: var(--op-radius) !important;
    backdrop-filter: blur(8px);
    transition:
        background var(--op-duration-fast) var(--op-ease),
        transform var(--op-duration-fast) var(--op-ease-spring) !important;
}
.op-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: white !important;
    transform: translateY(-2px);
}

/* Quick access section */
.op-quicklinks-section {
    background: var(--op-bg);
    padding-top: var(--op-space-12);
}

.op-section-heading {
    font-size: var(--op-text-lg);
    font-weight: var(--op-weight-semibold);
    color: var(--op-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--op-space-6);
    font-size: var(--op-text-xs);
}

.op-quicklink-card {
    display: flex;
    align-items: center;
    gap: var(--op-space-4);
    padding: var(--op-space-5) var(--op-space-5);
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    text-decoration: none;
    color: var(--op-text);
    box-shadow: var(--op-shadow-sm);
    transition:
        transform var(--op-duration-fast) var(--op-ease-spring),
        box-shadow var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease);
    height: 100%;
}
.op-quicklink-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--op-shadow-lg);
    border-color: var(--op-primary);
    color: var(--op-text);
}
.op-quicklink-card:hover .op-quicklink-arrow {
    transform: translateX(4px);
}

.op-quicklink-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--op-radius-md);
    flex-shrink: 0;
    font-size: 1.1rem;
}
.op-icon-finances { background: var(--op-primary-subtle); color: var(--op-primary); }
.op-icon-balance  { background: var(--op-success-light);  color: var(--op-success); }
.op-icon-tasks    { background: var(--op-warning-light);  color: var(--op-warning); }
.op-icon-email    { background: var(--op-info-light);     color: var(--op-info); }

.op-quicklink-body {
    flex: 1;
    min-width: 0;
}
.op-quicklink-title {
    font-size: var(--op-text-sm);
    font-weight: var(--op-weight-semibold);
    color: var(--op-text);
    margin-bottom: var(--op-space-1);
    line-height: var(--op-leading-snug);
}
.op-quicklink-desc {
    font-size: var(--op-text-xs);
    color: var(--op-text-muted);
    line-height: var(--op-leading-normal);
    margin: 0;
}

.op-quicklink-arrow {
    color: var(--op-text-muted);
    font-size: var(--op-text-sm);
    flex-shrink: 0;
    transition: transform var(--op-duration-fast) var(--op-ease-spring);
}

/* ============================================================
   7. SHARED PAGE HEADER
   ============================================================ */
.op-page-header {
    background: var(--op-surface);
    border-bottom: 1px solid var(--op-border);
    padding: var(--op-space-8) 0 var(--op-space-6);
    margin-bottom: 0;
}

.op-page-header-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--op-space-6);
    flex-wrap: wrap;
}

.op-breadcrumb {
    margin-bottom: var(--op-space-3);
    font-size: var(--op-text-xs) !important;
}
.op-breadcrumb a {
    color: var(--op-text-muted);
    text-decoration: none;
}
.op-breadcrumb a:hover { color: var(--op-primary); }
.op-breadcrumb .is-active a { color: var(--op-text-secondary); }

.op-page-title {
    font-size: var(--op-text-2xl);
    font-weight: var(--op-weight-bold);
    color: var(--op-text);
    letter-spacing: -0.02em;
    margin: 0 0 var(--op-space-2);
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
    line-height: var(--op-leading-tight);
}

.op-page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--op-primary-subtle);
    color: var(--op-primary);
    border-radius: var(--op-radius);
    font-size: var(--op-text-md);
    flex-shrink: 0;
}

.op-page-subtitle {
    font-size: var(--op-text-sm);
    color: var(--op-text-muted);
    margin: 0;
}

.op-page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--op-space-4);
    flex-wrap: wrap;
}

.op-sync-meta {
    font-size: var(--op-text-xs);
    color: var(--op-text-muted);
    display: flex;
    align-items: center;
    gap: var(--op-space-1);
    margin: 0;
}

.op-refresh-btn {
    background: var(--op-surface) !important;
    border: 1.5px solid var(--op-border) !important;
    color: var(--op-text-secondary) !important;
    font-weight: var(--op-weight-medium) !important;
    font-size: var(--op-text-sm) !important;
    border-radius: var(--op-radius) !important;
    height: 2.5rem !important;
    padding: 0 var(--op-space-4) !important;
    gap: var(--op-space-2);
    transition:
        background var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease),
        color var(--op-duration-fast) var(--op-ease),
        transform var(--op-duration-fast) var(--op-ease-spring) !important;
}
.op-refresh-btn:hover {
    background: var(--op-primary-subtle) !important;
    border-color: var(--op-primary) !important;
    color: var(--op-primary) !important;
    transform: translateY(-1px);
}
.op-refresh-btn:active { transform: translateY(0); }
.op-refresh-btn.htmx-request .fa-sync-alt {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   8. OUTSTANDING TASKS PAGE
   ============================================================ */
.op-tasks-section {
    background: var(--op-bg);
    padding-top: var(--op-space-10);
}

/* --- Skeleton loaders --- */
.op-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--op-space-5);
    /* Hidden by default; HTMX shows via htmx-indicator */
    display: none;
}
.htmx-request .op-skeleton-grid,
.op-skeleton-grid.htmx-indicator.htmx-request {
    display: grid;
}

/* Force show when htmx-indicator is active */
.htmx-indicator {
    display: none !important;
}
.htmx-indicator.htmx-request {
    display: block !important;
}
.htmx-indicator.htmx-request.op-skeleton-grid {
    display: grid !important;
}

.op-skeleton-card {
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    padding: var(--op-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3);
}

.op-skeleton-line {
    border-radius: var(--op-radius-full);
    background: linear-gradient(
        90deg,
        var(--op-border) 25%,
        var(--op-surface-sunken) 50%,
        var(--op-border) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}
.op-skeleton-title       { height: 1rem;   width: 75%; }
.op-skeleton-badge       { height: 0.75rem; width: 40%; }
.op-skeleton-text        { height: 0.75rem; width: 90%; }
.op-skeleton-text-short  { height: 0.75rem; width: 55%; }

@keyframes skeletonShimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* --- Bucket sections --- */
.op-bucket-section {
    margin-bottom: var(--op-space-10);
}

.op-bucket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--op-space-3);
    margin-bottom: var(--op-space-5);
    padding-bottom: var(--op-space-4);
    border-bottom: 2px solid var(--op-border);
}

/* When used as a <button> for the Done collapsible */
button.op-bucket-header {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 2px solid var(--op-border);
    cursor: pointer;
    padding-bottom: var(--op-space-4);
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    text-align: left;
    transition: border-color var(--op-duration-fast) var(--op-ease);
}
button.op-bucket-header:hover {
    border-bottom-color: var(--op-primary);
}

.op-bucket-title-row {
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
}

.op-bucket-header-right {
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
}

.op-bucket-title {
    font-size: var(--op-text-lg);
    font-weight: var(--op-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--op-space-3);
    margin: 0;
    line-height: 1;
}
.op-bucket-active { color: var(--op-info) !important; }
.op-bucket-pending { color: var(--op-accent) !important; }
.op-bucket-done   { color: var(--op-success) !important; }

.op-bucket-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 var(--op-space-2);
    border-radius: var(--op-radius-full);
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-bold);
    flex-shrink: 0;
}
.op-bucket-active.op-bucket-count {
    background: var(--op-info-light);
    color: var(--op-info);
}
.op-bucket-pending.op-bucket-count {
    background: var(--op-warning-light);
    color: var(--op-warning-dark, var(--op-accent-dark));
}
.op-bucket-done.op-bucket-count {
    background: var(--op-success-light);
    color: var(--op-success);
}

.op-bucket-chevron {
    color: var(--op-text-muted);
    font-size: var(--op-text-sm);
    transition: transform var(--op-duration) var(--op-ease);
}
.op-bucket-chevron.is-rotated {
    transform: rotate(180deg);
}

/* --- Task cards --- */
.op-task-card {
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    padding: var(--op-space-5);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--op-space-3);
    box-shadow: var(--op-shadow-sm);
    transition:
        transform var(--op-duration-fast) var(--op-ease-spring),
        box-shadow var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease);
}
.op-task-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--op-shadow-md);
    border-color: var(--op-border-strong);
}

.op-task-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--op-space-3);
}

.op-task-card-title {
    font-size: var(--op-text-sm);
    font-weight: var(--op-weight-semibold);
    color: var(--op-text);
    line-height: var(--op-leading-snug);
    margin: 0;
    flex: 1;
}

.op-task-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    color: var(--op-text-muted);
    border-radius: var(--op-radius-sm);
    text-decoration: none;
    font-size: var(--op-text-xs);
    transition:
        color var(--op-duration-fast) var(--op-ease),
        background var(--op-duration-fast) var(--op-ease);
}
.op-task-card-link:hover {
    color: var(--op-primary);
    background: var(--op-primary-subtle);
}

.op-task-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2);
}

.op-task-labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-1);
}

.op-task-due { }

.op-task-desc {
    font-size: var(--op-text-xs);
    color: var(--op-text-muted);
    line-height: var(--op-leading-normal);
    margin: 0;
    flex: 1;
}

.op-task-members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--op-space-2);
    margin-top: auto;
    padding-top: var(--op-space-2);
    border-top: 1px solid var(--op-border);
}

.op-member-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-medium);
    color: var(--op-text-secondary);
    background: var(--op-surface-sunken);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-full);
    padding: var(--op-space-1) var(--op-space-3);
    gap: var(--op-space-1);
}

/* --- Trello label colours (mapped to semantic tokens) --- */
.op-task-label {
    display: inline-flex;
    align-items: center;
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-medium);
    padding: 0.2em 0.6em;
    border-radius: var(--op-radius-full);
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}
.op-label-green,
.op-label-lime,
.op-label-sky  { background: var(--op-success-light); color: var(--op-success); }
.op-label-yellow,
.op-label-orange { background: var(--op-warning-light); color: var(--op-accent-dark); }
.op-label-red,
.op-label-pink  { background: var(--op-danger-light); color: var(--op-danger); }
.op-label-blue,
.op-label-purple { background: var(--op-info-light); color: var(--op-info); }
.op-label-grey,
.op-label-gray,
.op-label-light { background: var(--op-surface-sunken); color: var(--op-text-secondary); }
/* Fallback for unknown Trello colours */
.op-task-label:not([class*="op-label-"]) {
    background: var(--op-surface-sunken);
    color: var(--op-text-secondary);
}

/* --- Empty state --- */
.op-empty-state {
    text-align: center;
    padding: var(--op-space-20) var(--op-space-6);
    max-width: 28rem;
    margin: 0 auto;
}
.op-empty-icon {
    font-size: 3.5rem;
    color: var(--op-success);
    margin-bottom: var(--op-space-4);
    animation: bounceIn 0.5s var(--op-ease-spring);
}
.op-empty-title {
    font-size: var(--op-text-xl);
    font-weight: var(--op-weight-bold);
    color: var(--op-text);
    margin-bottom: var(--op-space-2);
}
.op-empty-desc {
    font-size: var(--op-text-sm);
    color: var(--op-text-muted);
    line-height: var(--op-leading-normal);
}

@keyframes bounceIn {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.15); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   9. BADGE / TAG SYSTEM
   ============================================================ */
.op-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--op-space-1);
    font-size: var(--op-text-xs);
    font-weight: var(--op-weight-medium);
    padding: 0.25em 0.6em;
    border-radius: var(--op-radius-full);
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
}

.op-badge-list {
    background: var(--op-surface-sunken);
    color: var(--op-text-secondary);
    border: 1px solid var(--op-border);
}

.op-badge-success {
    background: var(--op-success-light);
    color: var(--op-success);
}

.op-badge-warning {
    background: var(--op-warning-light);
    color: var(--op-accent-dark);
}

.op-badge-danger {
    background: var(--op-danger-light);
    color: var(--op-danger);
}

.op-badge-info {
    background: var(--op-info-light);
    color: var(--op-info);
}

/* Bulma tag override — keep existing fix, use tokens */
.tag {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    border-radius: var(--op-radius-sm) !important;
}
.tag {
    display: inline-flex !important;
}
.tags .tag {
    align-items: center;
    min-height: 2em;
    height: auto;
}

/* Done-section collapse transitions (Alpine x-transition) */
.op-collapse-enter,
.op-collapse-leave {
    transition:
        opacity var(--op-duration) var(--op-ease),
        transform var(--op-duration) var(--op-ease);
}
.op-collapse-enter-start,
.op-collapse-leave-end {
    opacity: 0;
    transform: translateY(-8px);
}
.op-collapse-enter-end,
.op-collapse-leave-start {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   10. ACCESSIBILITY
   ============================================================ */

/* Visible focus ring for keyboard users */
:focus-visible {
    outline: var(--op-focus-width) solid var(--op-focus-color) !important;
    outline-offset: var(--op-focus-offset) !important;
    border-radius: var(--op-radius-sm);
}

/* Remove default outline only when not focus-visible */
:focus:not(:focus-visible) {
    outline: none;
}

/* Ensure buttons always show focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--op-focus-width) solid var(--op-focus-color) !important;
    outline-offset: var(--op-focus-offset) !important;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .op-skeleton-line {
        animation: none;
        background: var(--op-border);
    }
}

/* Skip to main content link (screen reader + keyboard) */
.op-skip-link {
    position: absolute;
    top: -100%;
    left: var(--op-space-4);
    z-index: 9999;
    background: var(--op-primary);
    color: white;
    padding: var(--op-space-2) var(--op-space-4);
    border-radius: var(--op-radius);
    font-weight: var(--op-weight-semibold);
    text-decoration: none;
    transition: top var(--op-duration-fast) var(--op-ease);
}
.op-skip-link:focus {
    top: var(--op-space-2);
}

/* ============================================================
   11. UTILITIES
   ============================================================ */

/* Surface variants */
.op-surface          { background: var(--op-surface); }
.op-surface-raised   { background: var(--op-surface-raised); }
.op-surface-sunken   { background: var(--op-surface-sunken); }

/* Text colour utilities */
.op-text-primary     { color: var(--op-primary); }
.op-text-muted       { color: var(--op-text-muted); }
.op-text-secondary   { color: var(--op-text-secondary); }

/* Spacing helpers using the 8px grid */
.op-mt-auto  { margin-top: auto; }
.op-gap-2    { gap: var(--op-space-2); }
.op-gap-3    { gap: var(--op-space-3); }
.op-gap-4    { gap: var(--op-space-4); }

/* Card base (for reuse on non-task pages) */
.op-card {
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    box-shadow: var(--op-shadow-sm);
    overflow: hidden;
    transition:
        box-shadow var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease);
}
.op-card:hover {
    box-shadow: var(--op-shadow-md);
}

/* Bulma box override — apply design tokens */
.box {
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg) !important;
    box-shadow: var(--op-shadow-sm) !important;
    background: var(--op-surface) !important;
    transition:
        box-shadow var(--op-duration-fast) var(--op-ease),
        background var(--op-duration) var(--op-ease);
}

/* Bulma notification override */
.notification {
    border-radius: var(--op-radius-md) !important;
}

/* Bulma button baseline */
.button {
    font-family: var(--op-font) !important;
    font-weight: var(--op-weight-medium) !important;
    border-radius: var(--op-radius) !important;
    transition:
        background var(--op-duration-fast) var(--op-ease),
        color var(--op-duration-fast) var(--op-ease),
        border-color var(--op-duration-fast) var(--op-ease),
        box-shadow var(--op-duration-fast) var(--op-ease),
        transform var(--op-duration-fast) var(--op-ease-spring) !important;
}
.button:hover {
    transform: translateY(-1px);
}
.button:active {
    transform: translateY(0);
}

/* Bulma input/select baseline */
.input,
.textarea,
.select select {
    font-family: var(--op-font) !important;
    border-radius: var(--op-radius) !important;
    border-color: var(--op-border) !important;
    color: var(--op-text) !important;
    background: var(--op-surface) !important;
    transition:
        border-color var(--op-duration-fast) var(--op-ease),
        box-shadow var(--op-duration-fast) var(--op-ease) !important;
}
.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--op-primary) !important;
    box-shadow: 0 0 0 3px oklch(55% 0.18 250 / 0.18) !important;
}

/* Dark mode Bulma overrides */
[data-theme="dark"] .box {
    background: var(--op-surface) !important;
    border-color: var(--op-border) !important;
}
[data-theme="dark"] .navbar-dropdown,
[data-theme="dark"] .op-dropdown {
    background: var(--op-surface) !important;
    border-color: var(--op-border) !important;
}
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select select {
    background: var(--op-surface-sunken) !important;
    border-color: var(--op-border) !important;
    color: var(--op-text) !important;
}
[data-theme="dark"] body,
[data-theme="dark"] .title,
[data-theme="dark"] .subtitle {
    color: var(--op-text);
}
[data-theme="dark"] .navbar-item,
[data-theme="dark"] .navbar-link {
    color: var(--op-text-secondary) !important;
}

/* ============================================================
   12. FINANCIAL DASHBOARD — KPI CARDS
   ============================================================ */

.op-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--op-space-4);
    padding: var(--op-space-5) var(--op-space-5);
    background: var(--op-surface);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius-lg);
    box-shadow: var(--op-shadow-sm);
    position: relative;
    overflow: hidden;
    transition:
        box-shadow var(--op-duration-fast) var(--op-ease),
        transform var(--op-duration-fast) var(--op-ease-spring);
}

/* Colored top accent strip */
.op-kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--op-radius-lg) var(--op-radius-lg) 0 0;
}

.op-kpi-card:hover {
    box-shadow: var(--op-shadow-md);
    transform: translateY(-2px);
}

.op-kpi-income::before   { background: var(--op-success); }
.op-kpi-expense::before  { background: var(--op-danger); }
.op-kpi-net-pos::before  { background: var(--op-success); }
.op-kpi-net-neg::before  { background: var(--op-danger); }
.op-kpi-count::before    { background: var(--op-primary); }

.op-kpi-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--op-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.op-kpi-income .op-kpi-icon  {
    background: var(--op-success-light);
    color: var(--op-success);
}
.op-kpi-expense .op-kpi-icon {
    background: var(--op-danger-light);
    color: var(--op-danger);
}
.op-kpi-net-pos .op-kpi-icon,
.op-kpi-net-neg .op-kpi-icon {
    background: var(--op-surface-sunken);
    color: var(--op-text-muted);
}
.op-kpi-count .op-kpi-icon {
    background: var(--op-primary-subtle);
    color: var(--op-primary);
}

.op-kpi-body {
    flex: 1;
    min-width: 0;
}

.op-kpi-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--op-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.2rem;
    display: block;
}

.op-kpi-value {
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

/* Dark mode KPI card adjustments */
[data-theme="dark"] .op-kpi-card {
    background: var(--op-surface) !important;
}

/* ============================================================
   13. TIMELINE (RAG progress steps)
   Shared by RagProgressComponent.jinja and RAGProgressTracker.jinja
   ============================================================ */

.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 0.75rem;
    border-left: 2px solid #dbdbdb;
}

.timeline-item:last-child {
    border-left: 2px solid transparent;
}

.timeline-marker {
    position: absolute;
    left: -0.9rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #dbdbdb;
    font-size: 0.65rem;
}

.timeline-marker.is-info {
    border-color: #3e8ed0;
    color: #3e8ed0;
}

.timeline-marker.is-primary {
    border-color: #00d1b2;
    color: #00d1b2;
}

.timeline-marker.is-success {
    border-color: #48c78e;
    color: #48c78e;
}

.timeline-marker.is-danger {
    border-color: #f14668;
    color: #f14668;
}

.timeline-content {
    padding-left: 0.75rem;
}

/* ============================================================
   13. RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media screen and (max-width: 768px) {
    .op-page-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--op-space-4);
    }

    .op-page-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .op-hero-title {
        font-size: var(--op-text-2xl);
    }

    .op-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    .op-cta-primary,
    .op-cta-secondary {
        width: 100%;
        max-width: 20rem;
        justify-content: center;
    }

    .op-bucket-header {
        flex-wrap: wrap;
        gap: var(--op-space-2);
    }

    .op-brand-text { display: none; }
}

@media screen and (max-width: 480px) {
    .op-quicklink-card {
        padding: var(--op-space-4);
        gap: var(--op-space-3);
    }
    .op-quicklink-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}