/* ======================================================================== Earthy theme override — applied on top of site.css via @push('head') in home.blade.php. Only color, typography, and shadow overrides — no layout changes. Scoped to body.earthy-home so the live site's other pages (which still use site.css directly) are unaffected. Activate by adding 'earthy-home' to class on the home view. Deactivate by removing the @push('head') link from home.blade.php and the body class. ======================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap'); body.earthy-home { --earth-bg: #F5F1E8; --earth-surface: #FFFFFF; --earth-ink: #1F2A1A; --earth-muted: #5B6357; --earth-leaf: #006633; --earth-leaf-soft: #DCEDE3; --earth-soil: #5C4033; --earth-yellow: #FFB343; --earth-yellow-deep: #C8881C; --earth-line: #D9D2BF; --earth-line-soft: #ECE6D2; --earth-serif: 'Lora', Georgia, serif; --earth-sans: 'Public Sans', system-ui, sans-serif; --earth-brand: 'Poppins', system-ui, sans-serif; background: var(--earth-bg); color: var(--earth-ink); font-family: var(--earth-sans); } /* ----- Navbar (light variant, matches preview) ----- */ body.earthy-home > header { background: var(--earth-surface); border-bottom: 4px solid var(--earth-yellow); box-shadow: 0 1px 0 var(--earth-line); padding: 14px 32px; } body.earthy-home > header .navbar-logo { font-family: var(--earth-brand); font-size: 19px; font-weight: 600; color: var(--earth-ink); letter-spacing: 0.01em; } body.earthy-home > header .navbar-logo::after { content: ""; display: block; width: 36px; height: 3px; background: var(--earth-yellow); margin-top: 4px; border-radius: 2px; } body.earthy-home > header nav a { color: var(--earth-leaf); font-family: var(--earth-sans); } body.earthy-home > header nav a:hover { color: var(--earth-yellow-deep); border-bottom: 2px solid var(--earth-yellow); } /* Override site.css's amber bottom border on header so our yellow rule wins */ body.earthy-home > header { border-bottom: 4px solid var(--earth-yellow) !important; } /* ----- Welcome banner ----- */ body.earthy-home .welcome-banner { background: var(--earth-leaf); color: var(--earth-bg); border-bottom: 6px solid var(--earth-yellow); } body.earthy-home .welcome-banner__eyebrow { color: var(--earth-yellow); letter-spacing: 0.12em; font-weight: 600; } body.earthy-home .welcome-banner__title { color: var(--earth-bg); font-family: var(--earth-serif); font-weight: 700; } body.earthy-home .welcome-banner__subhead, body.earthy-home .welcome-banner__lede { color: var(--earth-leaf-soft); } body.earthy-home .welcome-banner__btn--primary { background: var(--earth-yellow); color: var(--earth-ink); border: none; } body.earthy-home .welcome-banner__btn--primary:hover, body.earthy-home .welcome-banner__btn--primary:focus-visible { background: var(--earth-yellow-deep); color: var(--earth-bg); } body.earthy-home .welcome-banner__btn--secondary { background: transparent; color: var(--earth-bg); border: 2px solid var(--earth-bg); } body.earthy-home .welcome-banner__btn--secondary:hover, body.earthy-home .welcome-banner__btn--secondary:focus-visible { background: var(--earth-bg); color: var(--earth-leaf); } /* ----- KPI strip (home-stat) ----- */ body.earthy-home .home-stat { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-home .home-stat__icon--green { background: var(--earth-leaf-soft); color: var(--earth-leaf); } body.earthy-home .home-stat__label { color: var(--earth-muted); font-family: var(--earth-sans); font-weight: 500; } body.earthy-home .home-stat__value { color: var(--earth-leaf); font-family: var(--earth-sans); font-weight: 700; font-variant-numeric: tabular-nums; } body.earthy-home .home-stat__sub { color: var(--earth-muted); } /* ----- Page sections (home-page wrapper) ----- */ body.earthy-home .home-page { background: var(--earth-bg); } body.earthy-home .home-section__title { font-family: var(--earth-serif); color: var(--earth-ink); font-weight: 600; } /* Override site.css's green ::after rule under section titles */ body.earthy-home .home-section__title::after { background: var(--earth-yellow); height: 3px; } /* ----- About / vision-mission / tagline cards ----- */ body.earthy-home .home-about__copy, body.earthy-home .home-about__tagline, body.earthy-home .home-about__vm-card, body.earthy-home .home-footer-cards__about, body.earthy-home .home-footer-cards__contact, body.earthy-home .home-coverage__box { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-home .home-about__vm-card--vision { border-left: 4px solid var(--earth-leaf); } body.earthy-home .home-about__vm-card--mission { border-left: 4px solid var(--earth-soil); } body.earthy-home .home-about__vm-icon, body.earthy-home .home-coverage__icon, body.earthy-home .home-meta-row__icon { color: var(--earth-leaf); } body.earthy-home .home-about__title { color: var(--earth-leaf); font-family: var(--earth-serif); } /* ----- Explore cards ----- */ body.earthy-home .home-explore-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-home .home-explore-card:hover, body.earthy-home .home-explore-card:focus-visible { border-color: var(--earth-leaf); box-shadow: 0 4px 16px rgba(31,42,26,.08); } body.earthy-home .home-explore-card__title { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-home .home-explore-card__subtitle { color: var(--earth-soil); } body.earthy-home .home-explore-card__cta { color: var(--earth-leaf); font-weight: 600; } /* ----- Coverage boxes ----- */ body.earthy-home .home-coverage__heading { color: var(--earth-leaf); font-family: var(--earth-serif); } /* ----- Footer cards ----- */ body.earthy-home .home-meta-row { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-home .home-cta-row__btn--primary { background: var(--earth-leaf); color: var(--earth-bg); } body.earthy-home .home-cta-row__btn--primary:hover, body.earthy-home .home-cta-row__btn--primary:focus-visible { background: var(--earth-soil); } body.earthy-home .home-cta-row__btn--secondary { background: transparent; color: var(--earth-leaf); border: 2px solid var(--earth-leaf); } body.earthy-home .home-cta-row__btn--secondary:hover, body.earthy-home .home-cta-row__btn--secondary:focus-visible { background: var(--earth-leaf); color: var(--earth-bg); } /* ----- Data notice ----- */ body.earthy-home .home-data-notice { background: var(--earth-leaf-soft); border: 1px solid var(--earth-line); border-left: 4px solid var(--earth-yellow-deep); border-radius: 12px; color: var(--earth-ink); } body.earthy-home .home-data-notice__icon { color: var(--earth-yellow-deep); } /* ----- Contact cards ----- */ body.earthy-home .home-contact-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; } body.earthy-home .home-contact-card:hover, body.earthy-home .home-contact-card:focus-visible { border-color: var(--earth-leaf); box-shadow: 0 4px 16px rgba(31,42,26,.08); } body.earthy-home .home-contact-card__icon { color: var(--earth-leaf); } body.earthy-home .home-contact-card__label { color: var(--earth-leaf); font-family: var(--earth-serif); } /* ----- Site footer ----- */ body.earthy-home .site-footer { background: var(--earth-leaf); color: var(--earth-bg); border-top: 4px solid var(--earth-yellow); } body.earthy-home .site-footer__agency strong { color: var(--earth-yellow); } /* ----- Body type globally on home ----- */ body.earthy-home, body.earthy-home p, body.earthy-home li, body.earthy-home a { font-family: var(--earth-sans); } /* ======================================================================== Member dashboard (/dashboard) — earthy variant. Scoped to body.earthy-dashboard. Activated by member/dashboard.blade.php. ======================================================================== */ body.earthy-dashboard { /* Mirror the same palette as body.earthy-home. Without this block, `var(--earth-surface)` etc. resolve to their initial values (transparent / black) and the header becomes see-through. */ --earth-bg: #F5F1E8; --earth-surface: #FFFFFF; --earth-ink: #1F2A1A; --earth-muted: #5B6357; --earth-leaf: #006633; --earth-leaf-2: #00864A; --earth-leaf-soft: #DCEDE3; --earth-soil: #5C4033; --earth-yellow: #FFB343; --earth-yellow-deep: #C8881C; --earth-line: #D9D2BF; --earth-line-soft: #ECE6D2; --earth-serif: 'Lora', Georgia, serif; --earth-sans: 'Public Sans', system-ui, sans-serif; --earth-brand: 'Poppins', system-ui, sans-serif; background: var(--earth-bg); color: var(--earth-ink); font-family: var(--earth-sans); } body.earthy-dashboard .member-shell { background: var(--earth-bg); } body.earthy-dashboard .member-header { background: #FFFFFF; border-bottom: 4px solid #FFB343; box-shadow: 0 1px 2px rgba(31,42,26,.04); flex-wrap: nowrap; align-items: center; position: sticky; top: 0; z-index: 30; } body.earthy-dashboard .member-header-left { flex: 1 1 auto; min-width: 0; } body.earthy-dashboard .member-actions { flex-shrink: 0; } body.earthy-dashboard .member-header h1 { color: var(--earth-leaf); font-family: var(--earth-serif); font-weight: 600; } body.earthy-dashboard .member-header .welcome { color: var(--earth-muted); } body.earthy-dashboard .member-back-button { color: var(--earth-leaf); border: 1px solid var(--earth-leaf); white-space: nowrap; } body.earthy-dashboard .member-back-button:hover, body.earthy-dashboard .member-back-button:focus-visible { background: var(--earth-leaf); color: var(--earth-bg); } body.earthy-dashboard .member-button--primary { background: var(--earth-leaf); color: var(--earth-bg); white-space: nowrap; } body.earthy-dashboard .member-button--primary:hover { background: var(--earth-leaf-2); } body.earthy-dashboard .member-button--ghost { color: #B5443A; border: 1px solid #E8C5BF; background: transparent; white-space: nowrap; } body.earthy-dashboard .member-tabs { background: var(--earth-surface); border-bottom: 1px solid var(--earth-line); } body.earthy-dashboard .member-tabs__link { color: var(--earth-leaf); } body.earthy-dashboard .member-tabs__link--active { color: var(--earth-leaf); border-bottom: 3px solid var(--earth-leaf); background: var(--earth-leaf-soft); } body.earthy-dashboard .member-subtabs { background: var(--earth-bg); border-bottom: 1px solid var(--earth-line); } body.earthy-dashboard .member-subtabs__link { color: var(--earth-leaf); } body.earthy-dashboard .member-subtabs__link--active { color: var(--earth-leaf); border-bottom: 3px solid var(--earth-yellow); } body.earthy-dashboard .member-warning { background: #FFF6E0; border: 1px solid var(--earth-yellow-deep); color: var(--earth-ink); border-radius: 8px; } body.earthy-dashboard .member-section { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-dashboard .member-section h2 { color: var(--earth-leaf); font-family: var(--earth-serif); font-weight: 600; } body.earthy-dashboard .member-section__meta { color: var(--earth-muted); } body.earthy-dashboard .member-kpi { background: var(--earth-bg); border: 1px solid var(--earth-line); border-radius: 8px; } body.earthy-dashboard .member-kpi__label { color: var(--earth-muted); font-weight: 500; } body.earthy-dashboard .member-kpi__value { color: var(--earth-leaf); font-weight: 700; font-variant-numeric: tabular-nums; } body.earthy-dashboard .member-table { border: 1px solid var(--earth-line); border-radius: 8px; overflow: hidden; } body.earthy-dashboard .member-table th { background: var(--earth-leaf); color: var(--earth-bg); font-family: var(--earth-sans); font-weight: 600; } body.earthy-dashboard .member-table td { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-dashboard .member-table tr:nth-child(even) td { background: var(--earth-leaf-soft); } body.earthy-dashboard .member-empty { background: var(--earth-bg); border: 1px dashed var(--earth-line); color: var(--earth-muted); border-radius: 8px; } body.earthy-dashboard .logout-modal { background: rgba(31,42,26,0.4); } body.earthy-dashboard .logout-modal-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; } body.earthy-dashboard .logout-modal-button--primary { background: var(--earth-leaf); color: var(--earth-bg); } body.earthy-dashboard .logout-modal-button--ghost { background: transparent; color: var(--earth-leaf); border: 1px solid var(--earth-leaf); } /* ----- Sheets subpage (/member/sheets) ----- */ body.earthy-dashboard .sheet-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-left: 4px solid var(--earth-leaf); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-dashboard .sheet-card h2 { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-dashboard .sheet-card p { color: var(--earth-muted); } body.earthy-dashboard .sheet-empty { background: var(--earth-bg); border: 1px dashed var(--earth-line); color: var(--earth-muted); } body.earthy-dashboard .sheet-empty h2 { color: var(--earth-leaf); font-family: var(--earth-serif); } /* ----- Extract subpage (/member/extract) ----- */ body.earthy-dashboard .member-program-banner { background: var(--earth-leaf-soft); border: 1px solid var(--earth-line); border-left: 4px solid var(--earth-leaf); border-radius: 8px; color: var(--earth-ink); } body.earthy-dashboard .member-callout { background: #FFF6E0; border: 1px solid var(--earth-yellow-deep); border-left: 4px solid var(--earth-yellow-deep); color: var(--earth-ink); border-radius: 8px; } /* ======================================================================== Auth pages (/login, signed-out) — earthy variant. Scoped to body.earthy-auth. Activated by login.blade.php + auth/signedOut.blade.php pushing the body class and loading this file. These pages use scoped inline styles for the layout, so the overrides here just re-theme colors and shadows via higher-specificity selectors. ======================================================================== */ body.earthy-auth { --earth-bg: #F5F1E8; --earth-surface: #FFFFFF; --earth-ink: #1F2A1A; --earth-muted: #5B6357; --earth-leaf: #006633; --earth-leaf-2: #00864A; --earth-leaf-soft: #DCEDE3; --earth-yellow: #FFB343; --earth-yellow-deep: #C8881C; --earth-line: #D9D2BF; --earth-serif: 'Lora', Georgia, serif; --earth-sans: 'Public Sans', system-ui, sans-serif; background: var(--earth-bg); color: var(--earth-ink); font-family: var(--earth-sans); } body.earthy-auth .login-shell, body.earthy-auth .signed-out-shell { background: var(--earth-bg); } body.earthy-auth .login-card, body.earthy-auth .signed-out-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-top: 4px solid var(--earth-yellow); box-shadow: 0 1px 3px rgba(31,42,26,.04); } body.earthy-auth .login-card h1, body.earthy-auth .signed-out-card h1 { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-auth .login-card .subtitle, body.earthy-auth .signed-out-card p { color: var(--earth-muted); } body.earthy-auth .login-card label { color: var(--earth-ink); } body.earthy-auth .login-card input[type="email"], body.earthy-auth .login-card input[type="password"] { background: var(--earth-surface); border: 1px solid var(--earth-line); color: var(--earth-ink); font-family: var(--earth-sans); } body.earthy-auth .login-card input[type="email"]:focus, body.earthy-auth .login-card input[type="password"]:focus { border-color: var(--earth-leaf); outline: 2px solid var(--earth-leaf-soft); outline-offset: 0; } body.earthy-auth .sign-in-button, body.earthy-auth .signed-out-card__cta { background: var(--earth-leaf); border: 1px solid var(--earth-leaf); } body.earthy-auth .sign-in-button:hover, body.earthy-auth .sign-in-button:focus-visible, body.earthy-auth .signed-out-card__cta:hover, body.earthy-auth .signed-out-card__cta:focus-visible { background: var(--earth-leaf-2); border-color: var(--earth-leaf-2); } body.earthy-auth .login-errors { background: #FBEAE6; border: 1px solid #E8C5BF; border-left: 4px solid #B5443A; color: #6F2A22; } body.earthy-auth .login-back-home a, body.earthy-auth .signed-out-card__signin { color: var(--earth-leaf); } body.earthy-auth .login-back-home a:hover, body.earthy-auth .login-back-home a:focus-visible, body.earthy-auth .signed-out-card__signin:hover, body.earthy-auth .signed-out-card__signin:focus-visible { color: var(--earth-yellow-deep); } body.earthy-auth .signed-out-card__icon { background: var(--earth-leaf-soft); color: var(--earth-leaf); } /* ======================================================================== Public data pages (/targets, /allocation, /infra, /machineries) — earthy. Scoped to body.earthy-data. These pages share the .machineries-page / .infra-page wrapper and a banner + stats + table structure, so one block covers all four. ======================================================================== */ body.earthy-data { --earth-bg: #F5F1E8; --earth-surface: #FFFFFF; --earth-ink: #1F2A1A; --earth-muted: #5B6357; --earth-leaf: #006633; --earth-leaf-2: #00864A; --earth-leaf-soft: #DCEDE3; --earth-soil: #5C4033; --earth-yellow: #FFB343; --earth-yellow-deep: #C8881C; --earth-line: #D9D2BF; --earth-line-soft: #ECE6D2; --earth-serif: 'Lora', Georgia, serif; --earth-sans: 'Public Sans', system-ui, sans-serif; --earth-brand: 'Poppins', system-ui, sans-serif; background: var(--earth-bg); color: var(--earth-ink); font-family: var(--earth-sans); } body.earthy-data .machineries-page, body.earthy-data .infra-page { background: var(--earth-bg); } /* ----- Page banner ----- */ body.earthy-data .mach-banner { background: var(--earth-surface); border: 1px solid var(--earth-line); border-bottom: 4px solid var(--earth-yellow); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-data .mach-agency { color: var(--earth-muted); font-family: var(--earth-sans); } body.earthy-data .mach-banner-text h1, body.earthy-data .mach-banner-text h2 { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-data .mach-accent { color: var(--earth-yellow-deep); } /* ----- Stat cards (machineries / infra / allocation mini KPIs) ----- */ body.earthy-data .mach-stat-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-left: 4px solid var(--earth-leaf); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-data .mach-stat-label { color: var(--earth-muted); } body.earthy-data .mach-stat-value { color: var(--earth-leaf); font-variant-numeric: tabular-nums; } /* ----- /targets stat-cards (top KPI strip) ----- */ body.earthy-data .stat-cards .stat-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-left: 4px solid var(--earth-leaf); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } body.earthy-data .stat-card p { color: var(--earth-muted); margin: 0; } body.earthy-data .stat-card h2 { color: var(--earth-leaf); font-family: var(--earth-sans); font-variant-numeric: tabular-nums; margin: 8px 0 0; } body.earthy-data .stat-card__subtitle { color: var(--earth-muted); font-size: 0.85em; } /* ----- Chart sections ----- */ body.earthy-data .chart-section h2, body.earthy-data .chart-card h3, body.earthy-data .chart-box h3 { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-data .chart-card, body.earthy-data .chart-box { background: var(--earth-surface); border-radius: 12px; box-shadow: 0 1px 2px rgba(31,42,26,.04); } /* Preserve original canvas dimensions explicitly so Chart.js's responsive resize doesn't collapse the canvas before paint. The inline `style=` on monthlyChart/beneficiaryChart handles min-height; mfoChart has none — give it one. */ body.earthy-data canvas.chart-box-canvas { min-height: 240px; } body.earthy-data #mfoChart { min-height: 320px; display: block; } body.earthy-data .chart-box-header { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-data .chart-empty { color: var(--earth-muted); } /* ----- Tables ----- */ body.earthy-data .mach-table-header h3 { color: var(--earth-leaf); font-family: var(--earth-serif); } body.earthy-data .mach-table { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; overflow: hidden; } body.earthy-data .mach-table th { background: var(--earth-leaf); color: var(--earth-bg); font-family: var(--earth-sans); } body.earthy-data .mach-table td { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-data .mach-table tr:nth-child(even) td { background: var(--earth-leaf-soft); } /* ============================================================ Admin section theme. Layered on top of the existing .admin-* rules in site.css — we only override colors/typography, never layout. Activated by resources/views/admin/layout.blade.php which stamps `earthy-admin` on . ============================================================ */ body.earthy-admin { --earth-bg: #F5F1E8; --earth-surface: #FFFFFF; --earth-ink: #1F2A1A; --earth-muted: #5B6357; --earth-leaf: #006633; --earth-leaf-2: #00864A; --earth-leaf-soft: #DCEDE3; --earth-yellow: #FFB343; --earth-yellow-deep: #C8881C; --earth-line: #D9D2BF; --earth-line-soft: #ECE6D2; --earth-serif: 'Lora', Georgia, serif; --earth-sans: 'Public Sans', system-ui, sans-serif; --earth-brand: 'Poppins', system-ui, sans-serif; background: var(--earth-bg); color: var(--earth-ink); font-family: var(--earth-sans); } body.earthy-admin .admin-page { font-family: var(--earth-sans); } body.earthy-admin .admin-header h1 { color: var(--earth-leaf); font-family: var(--earth-serif); } /* Header layout — title block on the left, signed-in identity chip pinned to the right. The chip wraps under the title on narrow screens (<= 720px) so it never overlaps the heading. */ body.earthy-admin .admin-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } body.earthy-admin .admin-header__title { flex: 1 1 280px; min-width: 0; } body.earthy-admin .admin-header__identity { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 14px; background: var(--earth-leaf-soft); border: 1px solid var(--earth-line); border-radius: 8px; text-align: right; line-height: 1.2; } body.earthy-admin .admin-header__identity-name { font-weight: 600; font-size: 0.95rem; color: var(--earth-ink); word-break: break-word; } body.earthy-admin .admin-header__identity-role { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--earth-leaf); font-weight: 700; } body.earthy-admin .admin-page__lede { color: var(--earth-muted); } body.earthy-admin .admin-tabs { border-bottom-color: var(--earth-line); /* Solid earth-bg so the sticky tabs don't show the table scrolling through them. The plain site.css rule uses #f5f9f2 (body bg), but earthy-admin overrides the body to var(--earth-bg). */ background: var(--earth-bg); } body.earthy-admin .admin-tab { color: var(--earth-muted); } body.earthy-admin .admin-tab:hover, body.earthy-admin .admin-tab:focus-visible { background: var(--earth-leaf-soft); color: var(--earth-leaf); } body.earthy-admin .admin-tab--active { color: var(--earth-leaf); border-bottom-color: var(--earth-leaf); background: var(--earth-leaf-soft); } body.earthy-admin .admin-flash { background: var(--earth-leaf-soft); color: var(--earth-leaf); border-left: 4px solid var(--earth-leaf); } body.earthy-admin .admin-panel { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; padding: 20px; } body.earthy-admin .admin-table { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; overflow: hidden; } body.earthy-admin .admin-table th { background: var(--earth-leaf); color: var(--earth-bg); font-family: var(--earth-sans); border-bottom: 2px solid var(--earth-yellow); } body.earthy-admin .admin-table td { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-admin .admin-table tr:nth-child(even) td { background: var(--earth-leaf-soft); } body.earthy-admin .downloads-button { display: inline-block; padding: 6px 14px; background: var(--earth-leaf); color: var(--earth-bg); border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.85rem; border-bottom: 2px solid var(--earth-yellow-deep); } body.earthy-admin .downloads-button:hover, body.earthy-admin .downloads-button:focus-visible { background: var(--earth-leaf-2); color: var(--earth-bg); } body.earthy-admin .downloads-last__by { display: block; color: var(--earth-muted); font-size: 0.8rem; } body.earthy-admin .downloads-last__none { color: var(--earth-muted); font-style: italic; } body.earthy-admin .downloads-note { margin-top: 16px; color: var(--earth-muted); font-size: 0.9rem; } body.earthy-admin .admin-sheet-picker { display: flex; gap: 8px; align-items: center; } body.earthy-admin .admin-sheet-picker input { flex: 1 1 auto; } body.earthy-admin .admin-sheet-picker button { flex: 0 0 auto; background: var(--earth-leaf-soft); color: var(--earth-leaf); border: 1px solid var(--earth-leaf); border-bottom: 2px solid var(--earth-leaf); } body.earthy-admin .admin-sheet-picker button:hover, body.earthy-admin .admin-sheet-picker button:focus-visible { background: var(--earth-leaf); color: var(--earth-bg); } body.earthy-admin .admin-sheet-picker button[disabled] { background: var(--earth-line-soft); color: var(--earth-muted); border-color: var(--earth-line); cursor: not-allowed; } body.earthy-data .mach-no-data { color: var(--earth-muted); } body.earthy-data .mach-table-pagination button { background: var(--earth-surface); border: 1px solid var(--earth-line); color: var(--earth-leaf); } body.earthy-data .mach-table-pagination button:not(:disabled):hover, body.earthy-data .mach-table-pagination button:not(:disabled):focus-visible { background: var(--earth-leaf); color: var(--earth-bg); border-color: var(--earth-leaf); } body.earthy-data .mach-table-pagination button:disabled { color: var(--earth-muted); opacity: 0.5; } body.earthy-data .mach-table-pagination #mfoPageInfo, body.earthy-data .mach-table-pagination #infraPageInfo, body.earthy-data .mach-table-pagination #machineriesPageInfo, body.earthy-data .mach-table-pagination #machPageInfo { color: var(--earth-muted); } /* ----- Allocation sort buttons + data tables ----- */ body.earthy-data .mfo-sort { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } body.earthy-data .mfo-sort__label { color: var(--earth-muted); } body.earthy-data .mfo-sort__btn { background: var(--earth-surface); border: 1px solid var(--earth-line); color: var(--earth-leaf); } body.earthy-data .mfo-sort__btn.is-active, body.earthy-data .mfo-sort__btn:hover, body.earthy-data .mfo-sort__btn:focus-visible { background: var(--earth-leaf); color: var(--earth-bg); border-color: var(--earth-leaf); } body.earthy-data .data-table { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 8px; } body.earthy-data .data-table th { background: var(--earth-leaf); color: var(--earth-bg); } body.earthy-data .data-table td { border-bottom: 1px solid var(--earth-line-soft); } body.earthy-data .data-table tr:nth-child(even) td { background: var(--earth-leaf-soft); } body.earthy-data .data-table tr.is-subtotal td { background: var(--earth-yellow); color: var(--earth-ink); font-weight: 600; } /* ----- Filter strip (used on /allocation + /targets) ----- */ body.earthy-data .allocation-filter-card { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; } /* Filter widget is now wired into the public export button via `window.__publicExportFilters` (see targets.blade.php publishFilters() and _public_export_button.blade.php buildQuery()), so the six dropdowns DO carry their selection into the export URL. /member still uses its own extract page. */ body.earthy-data .mach-filter__button { background: var(--earth-surface); border: 1px solid var(--earth-line); color: var(--earth-leaf); } body.earthy-data .mach-filter__button:hover, body.earthy-data .mach-filter__button:focus-visible, body.earthy-data .mach-filter__button[aria-expanded="true"] { border-color: var(--earth-leaf); } body.earthy-data .mach-filter__panel { background: var(--earth-surface); border: 1px solid var(--earth-line); box-shadow: 0 6px 16px rgba(31,42,26,.12); } body.earthy-data .mach-filter__action { color: var(--earth-leaf); } body.earthy-data .mach-filter__value--all { color: var(--earth-leaf-2); } body.earthy-data .mach-filter__value--partial { color: var(--earth-yellow-deep); font-weight: 600; } body.earthy-data .mach-filter__value--none { color: #B5443A; } /* ----- Compiled-view toggle on /targets ----- */ body.earthy-data .mach-toggle { background: var(--earth-surface); border: 1px solid var(--earth-line); color: var(--earth-ink); } body.earthy-data .mach-toggle__dot { background: var(--earth-leaf-soft); } body.earthy-data .mach-toggle[aria-pressed="true"] .mach-toggle__dot { background: var(--earth-leaf); } /* ----- Public export button row ----- */ body.earthy-data .public-export-button-row { background: var(--earth-surface); border: 1px solid var(--earth-line); border-radius: 12px; } body.earthy-data .public-export-tabs { background: var(--earth-surface); border: 1px solid var(--earth-line); box-shadow: 0 6px 16px rgba(31,42,26,.12); } body.earthy-data .public-export-tab { color: var(--earth-leaf); } body.earthy-data .public-export-tab:hover, body.earthy-data .public-export-tab:focus-visible { background: var(--earth-leaf-soft); } /* ----- Footer attribution ----- */ body.earthy-data .sheet-attribution { color: var(--earth-muted); } /* ----- mfo-list-footer ----- */ body.earthy-data .mfo-list-footer, body.earthy-data .mach-list-footer { color: var(--earth-muted); } /* ============================================================ Admin dashboard (`/admin/dashboard`). Page-local classes used by `resources/views/admin/dashboard/index.blade.php` AND `resources/views/member/sheets.blade.php`: `.admin-dashboard-section` — wraps the Sheets Available section. Stacks title + body with a comfortable vertical rhythm. `.admin-sheet-tiles` — flex-wrap grid of clickable sheet tiles. Each tile is an card sized via flex-basis so the row wraps cleanly at 280px / 220px / 100% breakpoints without media queries. `.admin-sheet-tile` — single sheet card. Label sits centered with the owner's email as a small caption underneath. Hover lifts the card + underlines the label so the affordance is clear. `.admin-sheet-tile-wrapper` — outer container so the per-tile Remove form can absolutely- position itself without overlapping the tile body. `.admin-sheet-tile__action` — inline form that hosts the per-tile Remove button. The member `/member/sheets` view adds this on self-source rows; admin-source rows skip it. `.admin-sheet-tile--locked` — admin-source tiles. Visually identical except for a slightly muted border-left so the "locked vs editable" affordance reads without forcing a different palette. `.admin-dashboard-meta` — footer aside with the "All downloads →" pointer + the configured gatekeeper emails. Scope note: every selector below is dual-listed under `body.earthy-admin` AND `body.earthy-member` so the same rules apply on `/admin/dashboard` (admin) and `/member/sheets` (member). The dual scope is intentional — both surfaces render an identical tile grid, and adding new member-surface selectors piecemeal would make it hard to keep visual parity. If a new member page needs the tile grid, copy the selector list. ============================================================ */ body.earthy-admin .admin-dashboard-section, body.earthy-member .admin-dashboard-section { margin-bottom: 28px; } body.earthy-admin .admin-dashboard-section:last-of-type, body.earthy-member .admin-dashboard-section:last-of-type { margin-bottom: 0; } body.earthy-admin .admin-dashboard-meta { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--earth-line); color: var(--earth-muted); font-size: 0.88rem; } body.earthy-admin .admin-dashboard-meta p { margin: 4px 0; } body.earthy-admin .admin-dashboard-meta code { background: var(--earth-leaf-soft); color: var(--earth-leaf); padding: 2px 6px; border-radius: 4px; font-family: 'JetBrains Mono', Menlo, Consolas, monospace; font-size: 0.85rem; } /* Title rhythm used inside the section. */ body.earthy-admin .admin-section__title, body.earthy-member .admin-section__title { color: var(--earth-leaf); font-family: var(--earth-serif); font-size: 1.1rem; margin: 0 0 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Section header — title on the left, optional action button on the right. Used by `/member/sheets` for the "Sheets Available" row + "+ Add your own sheets" toggle. The button shrinks-to-fit at narrow widths via the flex-wrap below. */ body.earthy-admin .admin-section__header, body.earthy-member .admin-section__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } body.earthy-admin .admin-section__header .admin-section__title, body.earthy-member .admin-section__header .admin-section__title { margin: 0; } /* Sheet tiles — flex-wrap grid sized via flex-basis so the row wraps cleanly at 280px / 220px / 100% without media queries. The `--tile-min` custom property at `.admin-sheet-tile` lets a single tile opt into a wider minimum (e.g. a long sheet label that shouldn't break) by overriding the property. */ body.earthy-admin .admin-sheet-tiles, body.earthy-member .admin-sheet-tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; } body.earthy-admin .admin-sheet-tile-wrapper, body.earthy-member .admin-sheet-tile-wrapper { position: relative; flex: 0 1 calc(50% - 8px); min-width: 240px; max-width: 100%; box-sizing: border-box; } body.earthy-admin .admin-sheet-tile, body.earthy-member .admin-sheet-tile { --tile-min: 240px; flex: 0 1 calc(50% - 8px); min-width: var(--tile-min); max-width: 100%; box-sizing: border-box; background: var(--earth-surface, #ffffff); border: 1px solid var(--earth-line, #d6e2cf); border-left: 3px solid var(--earth-line, #d6e2cf); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--earth-ink, #1f2a1a); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.earthy-admin .admin-sheet-tile:hover, body.earthy-admin .admin-sheet-tile:focus-visible, body.earthy-member .admin-sheet-tile:hover, body.earthy-member .admin-sheet-tile:focus-visible { border-left-color: var(--earth-leaf, #2e7d32); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); outline: none; } /* Locked (admin-assigned) tiles — same shape as editable tiles but with a muted border-left so the affordance reads "you can open it but not remove it." The tile body itself stays clickable. */ body.earthy-admin .admin-sheet-tile--locked, body.earthy-member .admin-sheet-tile--locked { border-left-color: var(--earth-line, #d6e2cf); border-left-style: dashed; } body.earthy-admin .admin-sheet-tile__label, body.earthy-member .admin-sheet-tile__label { font-weight: 600; font-size: 0.98rem; color: var(--earth-ink, #1f2a1a); word-break: break-word; } body.earthy-admin .admin-sheet-tile:hover .admin-sheet-tile__label, body.earthy-admin .admin-sheet-tile:focus-visible .admin-sheet-tile__label, body.earthy-member .admin-sheet-tile:hover .admin-sheet-tile__label, body.earthy-member .admin-sheet-tile:focus-visible .admin-sheet-tile__label { text-decoration: underline; } body.earthy-admin .admin-sheet-tile__owner, body.earthy-member .admin-sheet-tile__owner { font-size: 0.82rem; color: var(--earth-muted, #5b6357); } /* Per-tile Remove action. Positioned in the top-right corner of the wrapper so it doesn't sit on top of the tile body text. The button is always visible (NOT hover-revealed) so screen readers can find it without focus interaction. */ body.earthy-admin .admin-sheet-tile__action, body.earthy-member .admin-sheet-tile__action { position: absolute; top: 8px; right: 8px; margin: 0; } body.earthy-admin .admin-sheet-tile__remove, body.earthy-member .admin-sheet-tile__remove { appearance: none; background: transparent; border: 1px solid var(--earth-line, #d6e2cf); color: var(--earth-muted, #5b6357); border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-family: var(--earth-sans, inherit); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } body.earthy-admin .admin-sheet-tile__remove:hover, body.earthy-admin .admin-sheet-tile__remove:focus-visible, body.earthy-member .admin-sheet-tile__remove:hover, body.earthy-member .admin-sheet-tile__remove:focus-visible { background: var(--earth-leaf-soft, #e7efe1); color: var(--earth-leaf, #2e7d32); border-color: var(--earth-leaf, #2e7d32); outline: none; } /* Empty placeholder — visually distinct from real tiles so it's obvious nothing is clickable. No border-left accent, lighter background. */ body.earthy-admin .admin-sheet-tile--empty, body.earthy-member .admin-sheet-tile--empty { cursor: default; border-left-width: 1px; background: transparent; } body.earthy-admin .admin-sheet-tile--empty:hover, body.earthy-admin .admin-sheet-tile--empty:focus-visible, body.earthy-member .admin-sheet-tile--empty:hover, body.earthy-member .admin-sheet-tile--empty:focus-visible { border-left-color: var(--earth-line, #d6e2cf); box-shadow: none; transform: none; } body.earthy-admin .admin-sheet-tile--empty .admin-sheet-tile__label, body.earthy-member .admin-sheet-tile--empty .admin-sheet-tile__label { color: var(--earth-muted, #5b6357); } /* Member-only: the form section that lives BELOW the tile grid. The admin path doesn't render this so the rules are scoped to `body.earthy-member`. Mirrors the admin form layout but with extra room above the table because the tile grid is no longer directly above the page lead. */ body.earthy-member .member-sheets-form-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--earth-line, #d6e2cf); } body.earthy-member .member-flash { margin-bottom: 16px; padding: 10px 14px; border-radius: 6px; font-size: 0.92rem; } body.earthy-member .member-flash--status { background: var(--earth-leaf-soft, #e7efe1); color: var(--earth-leaf, #2e7d32); border: 1px solid var(--earth-leaf, #2e7d32); } body.earthy-member .member-form-errors { background: rgba(216, 67, 21, 0.08); color: #b5361d; border: 1px solid rgba(216, 67, 21, 0.4); border-radius: 6px; padding: 10px 14px; margin-bottom: 16px; } body.earthy-member .member-form-errors p { margin: 4px 0; } body.earthy-member .member-sheets-form { margin-top: 12px; } @media (max-width: 720px) { body.earthy-admin .admin-sheet-tile, body.earthy-admin .admin-sheet-tile-wrapper, body.earthy-member .admin-sheet-tile, body.earthy-member .admin-sheet-tile-wrapper { flex: 1 1 100%; } }