/* * aia-finance — application styles (loaded via stylesheet_link_tag :app) * * Phase 0 design foundation: Athletes in Action brand tokens + base typography. * Colors from the AIA Visual Identity guide; fonts Sora (headings) + Inter (body), * loaded from Google Fonts in the layout . Cornerstone is intentionally not used. */ :root { /* --- AIA brand palette (raw tokens) --- */ --aia-red: #990000; /* primary — passion/excitement (Pantone 200 C) */ --aia-blue: #003366; /* primary — trust/loyalty (Pantone 280 C) */ --aia-gray: #58595B; /* secondary (Pantone 877 C) */ --aia-black: #000000; --aia-white: #ffffff; /* --- Semantic aliases (map brand tokens to roles) --- */ --color-bg: var(--aia-white); --color-text: #1a1a1a; /* softened black for body readability */ --color-muted: var(--aia-gray); --color-primary: var(--aia-blue); /* default action/link color */ --color-accent: var(--aia-red); --color-border: #e2e2e3; /* --- Type families --- */ --font-heading: "Sora", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } /* --- Base typography --- */ body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; color: var(--aia-black); margin: 0 0 0.5em; } h1 { font-size: 2.25rem; } h2 { font-size: 1.75rem; } h3 { font-size: 1.375rem; } h4 { font-size: 1.125rem; } p { margin: 0 0 1rem; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Small utilities --- */ .text-muted { color: var(--color-muted); } /* --- Loading indicator --- */ /* Turbo's top progress ticker, branded */ .turbo-progress-bar { height: 3px; background: linear-gradient(90deg, var(--aia-red), var(--aia-blue)); } .app-loading-overlay { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(2px); } html.app-loading .app-loading-overlay { display: flex; } .app-loading-overlay .loader { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; } .app-loading-overlay .spinner { width: 52px; height: 52px; border-radius: 50%; border: 5px solid rgba(0, 51, 102, 0.15); border-top-color: var(--aia-blue); border-right-color: var(--aia-red); animation: app-spin 0.75s linear infinite; } .app-loading-overlay .loader span { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.03em; color: var(--aia-blue); } @keyframes app-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .app-loading-overlay .spinner { animation-duration: 2s; } } .sg-eyebrow { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; color: var(--color-muted); margin: 0 0 0.25rem; } /* --- Impersonation banner --- */ .impersonation-banner { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; background: #b45309; color: #fff; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500; } .imp-stop { background: #fff; color: #b45309; border: 0; border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; } /* --- Roles admin --- */ .roles-search { display: flex; gap: 0.5rem; margin-top: 1rem; max-width: 520px; } .roles-search .filter-input { flex: 1; } .roles-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .roles-reference { margin: 1rem 0; border: 1px solid var(--line, #e6e6e8); border-radius: 10px; background: #fafafa; } .roles-reference > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; color: var(--aia-blue, #003366); } .roles-ref-note { padding: 0 1rem 0.9rem; font-size: 0.85rem; margin: 0; } /* Derived-access table */ .roles-derived-table { margin: 0 1rem; width: auto; } .roles-derived-table th, .roles-derived-table td { text-align: left; font-size: 0.85rem; } /* Role × permission grid, grouped by section with descriptions. (Selectors use table.roles-matrix to beat the generic .txn-table rules.) */ table.roles-matrix { margin: 0.25rem 1rem 1rem; width: auto; table-layout: auto; } table.roles-matrix td, table.roles-matrix th.roles-matrix-role { text-align: center; } table.roles-matrix th.roles-matrix-role { font-size: 0.8rem; vertical-align: bottom; min-width: 110px; padding: 0.4rem 0.75rem; } table.roles-matrix td.roles-matrix-perm, table.roles-matrix th.roles-matrix-perm { text-align: left; white-space: normal; min-width: 260px; position: sticky; left: 0; background: #fff; z-index: 1; } .roles-matrix th.roles-matrix-perm { background: #fafafa; } .roles-matrix .roles-matrix-name { display: block; font-weight: 500; } .roles-matrix .roles-matrix-desc { display: block; font-size: 0.78rem; color: var(--muted, #6b6b6e); line-height: 1.35; } .roles-matrix .roles-matrix-yes { color: #157a3d; font-weight: 700; } .roles-matrix .roles-matrix-no { color: #c9c9cc; } .roles-matrix-section td { background: #eef1f5; } .roles-matrix-section .roles-matrix-perm { background: #eef1f5; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aia-blue, #003366); } .role-person { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.6rem 0.9rem; } .role-person-info { display: flex; flex-direction: column; min-width: 180px; } .role-person-name { font-weight: 600; } .role-person-email { font-size: 0.78rem; color: var(--color-muted); } .role-chips { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; flex: 1; } .role-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(0,51,102,0.08); color: var(--aia-blue); border-radius: 12px; padding: 0.15rem 0.2rem 0.15rem 0.55rem; font-size: 0.8rem; font-weight: 600; } .role-chip-x { border: 0; background: none; color: var(--aia-blue); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 0.2rem; } .role-chip-x:hover { color: var(--aia-red); } .role-chip-x-form { margin: 0; display: inline; } .role-add { display: inline-flex; gap: 0.3rem; margin: 0; } .role-add-select { padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.8rem; } .role-impersonate { white-space: nowrap; } .role-person-actions { display: flex; gap: 0.4rem; align-items: center; } .role-make-owner { white-space: nowrap; } /* Protected Owner cues */ .role-owner-badge { margin-left: 0.4rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #8a6d00; background: #fff4d6; border: 1px solid #ecd9a0; border-radius: 999px; padding: 0.08rem 0.45rem; vertical-align: middle; } .role-chip-locked { background: #fff4d6; color: #8a6d00; padding-right: 0.55rem; } .role-chip-lock { font-size: 0.72rem; line-height: 1; } /* --- Top nav --- */ .topnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--aia-blue); color: #fff; padding: 0.6rem 1.25rem; } .topnav-links, .topnav-user { display: flex; align-items: center; gap: 1rem; } .topnav-link { color: #fff; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; } .topnav-link:hover { text-decoration: underline; } .topnav-user { font-size: 0.85rem; opacity: 0.95; } .topnav-signout { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 0.8rem; cursor: pointer; } .topnav-signout:hover { border-color: #fff; } .topnav-brand { color: #fff; text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 1rem; margin-right: 0.5rem; } /* Settings dropdown (native
) */ .topnav-menu { position: relative; } .topnav-menu > summary { list-style: none; cursor: pointer; } .topnav-menu > summary::-webkit-details-marker { display: none; } .topnav-menu > summary::after { content: " \25be"; font-size: 0.75rem; opacity: 0.85; } .topnav-menu-items { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 50; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.12); min-width: 12rem; padding: 0.35rem; display: flex; flex-direction: column; } .topnav-menu-item { color: var(--color-text); text-decoration: none; font-size: 0.9rem; padding: 0.45rem 0.6rem; border-radius: 6px; } .topnav-menu-item:hover { background: rgba(0,51,102,0.08); color: var(--aia-blue); } /* --- Nav layout: primary sections + account menu --- */ .topnav-brand { white-space: nowrap; } .topnav-left, .topnav-right { display: flex; align-items: center; gap: 1rem; } .topnav-primary { display: flex; align-items: center; gap: 1rem; } .topnav-menu-right .topnav-menu-items { left: auto; right: 0; } /* Hamburger (primary sections on mobile) — hidden on desktop. */ .topnav-hamburger { display: none; } .topnav-hamburger > summary { color: #fff; font-size: 1.35rem; line-height: 1; padding: 0 0.15rem; } .topnav-hamburger > summary::after { content: none; } /* no caret after the ☰ */ /* Account menu: name is the trigger, with a small gear cue when settings exist. */ .topnav-account > summary.topnav-account-summary { display: inline-flex; align-items: center; gap: 0.4rem; } .topnav-account-summary .topnav-username { color: #fff; } .topnav-owner { color: #ffd257; font-weight: 600; } .topnav-gear { font-size: 0.95rem; opacity: 0.9; } .topnav-menu-heading { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #6b6b6e); padding: 0.25rem 0.6rem 0.15rem; margin: 0; } .topnav-menu-sep { border: 0; border-top: 1px solid var(--color-border, #e6e6e8); margin: 0.35rem 0.3rem; } .topnav-menu-signout { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; } /* Mobile: hamburger shows, inline primary links hide. */ @media (max-width: 640px) { .topnav { padding: 0.55rem 1rem; } .topnav-primary { display: none; } .topnav-hamburger { display: block; } } .budget-filter { max-width: 360px; margin-bottom: 1rem; } /* Branded confirmation dialog (Turbo data-turbo-confirm) */ .confirm-modal { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; padding: 1rem; } .confirm-modal.is-open { display: flex; } .confirm-box { background: #fff; border-radius: 12px; max-width: 26rem; width: 100%; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 16px 48px rgba(0,0,0,0.28); border-top: 4px solid var(--aia-red); } .confirm-message { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.4; color: var(--color-text); } .confirm-actions { display: flex; justify-content: flex-end; gap: 0.6rem; } /* Budget "no access" page */ .forbidden-card { max-width: 520px; margin: 3rem auto; text-align: center; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 2.5rem 2rem; } .forbidden-icon { font-size: 2.5rem; margin-bottom: 0.5rem; } .forbidden-card h1 { font-size: 1.3rem; margin: 0 0 0.6rem; } .forbidden-card p { margin: 0 0 1.25rem; } /* Dashboard */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1.25rem; } .dash-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; } .dash-card { display: block; text-decoration: none; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--aia-blue); border-radius: 10px; padding: 1rem 1.1rem; transition: box-shadow 0.15s, transform 0.15s; } .dash-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.10); transform: translateY(-1px); } .dash-card h3 { font-family: var(--font-heading); color: var(--aia-blue); margin: 0 0 0.3rem; } .dash-card p { margin: 0; color: var(--color-muted); font-size: 0.9rem; } .dash-card-admin { border-left-color: var(--aia-gray); } .dash-card-admin h3 { color: var(--aia-gray); } .dash-section { margin-top: 2rem; } .dash-section-title { font-family: var(--font-heading); font-size: 1rem; color: var(--aia-gray); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); } /* --- Gamification: dashboard progress panel --- */ .game-panel { margin-top: 1.25rem; background: linear-gradient(135deg, #f5f8fc, #eef2f7); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.1rem 1.25rem; } .game-head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .game-level { display: flex; align-items: center; gap: 0.6rem; } .game-level-icon { font-size: 2rem; line-height: 1; } .game-level-eyebrow { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: 700; } .game-level-name { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: var(--aia-blue); } .game-xp { flex: 1; min-width: 200px; } .game-bar { height: 10px; background: #dde3ea; border-radius: 999px; overflow: hidden; } .game-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--aia-blue), #2f7dd1); border-radius: 999px; transition: width 0.4s ease; } .game-xp-label { display: block; margin-top: 0.35rem; font-size: 0.78rem; color: var(--color-muted); } .game-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .game-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: #fff; border: 1px solid var(--color-border); font-size: 0.8rem; font-weight: 600; color: var(--color-muted); opacity: 0.75; } .game-badge.is-earned { color: var(--aia-blue); border-color: #bcd3ec; background: #eef5fc; opacity: 1; } .game-badge-icon { font-size: 0.95rem; } /* --- Gamification: per-budget quest strip --- */ .quest { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: 0.6rem 0.85rem; background: #f6f7f9; border: 1px solid var(--color-border); border-radius: 10px; } .quest.is-complete { background: #f0f7f2; border-color: #b7e0c4; } .quest-step { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--color-muted); } .quest-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #e4e7eb; color: var(--color-muted); font-size: 0.85rem; } .quest-step.is-done { color: #157a3d; } .quest-step.is-done .quest-step-icon { background: #157a3d; color: #fff; } .quest-pct { font-weight: 700; color: var(--aia-blue); } .quest-sep { color: var(--color-border); } .quest-win { margin-left: auto; font-weight: 700; color: #157a3d; } /* --- Gamification: oversight leaderboard --- */ .ov-medal { font-size: 1rem; } .ov-recon { display: flex; align-items: center; gap: 0.5rem; } .ov-recon-bar { flex: 1; min-width: 60px; height: 8px; background: #dde3ea; border-radius: 999px; overflow: hidden; } .ov-recon-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--aia-blue), #2f7dd1); border-radius: 999px; } .ov-recon.is-done .ov-recon-bar > span { background: #157a3d; } .ov-recon-pct { font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-muted); } .ov-recon.is-done .ov-recon-pct { color: #157a3d; font-weight: 700; } /* --- Chartfield permission modal --- */ .cfp-combo { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; margin-bottom: 1rem; color: var(--aia-blue); } /* --- Budgets --- */ .budget-total-box { display: flex; flex-direction: column; margin: 0.75rem 0; } .budget-funds-needed { display: flex; flex-direction: column; gap: 0.1rem; margin: 0 0 1rem; padding: 0.75rem 1rem; background: rgba(0, 51, 102, 0.06); border-left: 4px solid var(--aia-blue); border-radius: 6px; } .budget-funds-needed .figure-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); } .budget-funds-needed .figure-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; color: var(--aia-blue); } .budget-funds-needed .figure-sub { font-size: 0.78rem; color: var(--color-muted); } .txn-synced { font-size: 0.8rem; margin-top: 0.4rem; } /* Per-chart-field balance list inside the blue summary card */ .summary-cf { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.25); } .summary-cf-head { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; margin-bottom: 0.35rem; } .summary-cf-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; } .summary-cf-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 0.28rem 0; font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.12); } .summary-cf-list li:last-child { border-bottom: 0; } .summary-cf-name { opacity: 0.92; overflow-wrap: anywhere; } .summary-cf-bal { font-family: var(--font-heading); font-variant-numeric: tabular-nums; white-space: nowrap; } .summary-cf-total { font-weight: 700; border-top: 1px solid rgba(255,255,255,0.35) !important; margin-top: 0.15rem; padding-top: 0.4rem; } .budget-year-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.9rem; } .budget-year-pills-label { font-size: 0.78rem; color: var(--color-muted); margin-right: 0.15rem; } .budget-year-pill { font-size: 0.82rem; text-decoration: none; padding: 0.25rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px; color: var(--aia-blue); } a.budget-year-pill:hover { border-color: var(--aia-blue); } .budget-year-pill.active { background: var(--aia-blue); color: #fff; border-color: var(--aia-blue); } .budget-year-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 0.9rem; } .budget-year-form { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-muted); } .budget-year-form label { white-space: nowrap; } .budget-year-note { margin: 0; font-size: 0.85rem; color: var(--aia-blue); background: rgba(0, 51, 102, 0.06); border-radius: 6px; padding: 0.35rem 0.7rem; } .budget-team-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; } .budget-team-link { display: block; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--aia-blue); border-radius: 8px; text-decoration: none; color: var(--color-text); font-weight: 500; } .budget-team-link:hover { border-color: var(--color-primary); } .budget-team-link.is-view { border-left-color: var(--color-border); } /* view-only: muted edge */ .budget-team-row { display: flex; flex-direction: column; gap: 0.25rem; } .budget-role-badge { align-self: flex-start; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: #eef0f3; color: var(--color-muted); } .budget-role-badge.is-responsible { background: #eaf0f6; color: var(--aia-blue); } .budget-warn { align-self: flex-start; font-size: 0.72rem; color: #8a6d00; } .budget-group { margin-bottom: 1.5rem; } .budget-group-head { font-family: var(--font-heading); font-size: 1rem; color: var(--aia-gray); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.15rem; } .budget-group-note { font-size: 0.82rem; margin: 0 0 0.5rem; } /* Budget oversight */ .ov-scope { font-size: 1.05rem; margin: 0.35rem 0 0.25rem; } .ov-scope strong { color: var(--aia-blue); font-family: var(--font-heading); } .ov-scope-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; background: var(--aia-blue); border-radius: 5px; padding: 0.1rem 0.4rem; vertical-align: middle; margin-right: 0.35rem; } .ov-scope-sub { color: var(--color-muted); font-size: 0.9rem; } .ov-strip { margin: 0.5rem 0 1rem; } .ov-val-set { color: #0a6b3a; } .ov-val-none { color: var(--aia-red); } .ov-val-exempt { color: var(--aia-gray); } .ov-strip { gap: 1.5rem; } .ov-badge { font-size: 0.82rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px; white-space: nowrap; } .ov-set { background: rgba(0,102,51,0.12); color: #0a6b3a; } .ov-none { background: rgba(0,0,0,0.06); color: var(--color-muted); } .ov-exempt { background: rgba(88,89,91,0.14); color: var(--aia-gray); } .ov-actions { display: flex; gap: 0.9rem; align-items: center; } .ov-actions form { margin: 0; } .ov-icon-btn { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 0.2rem; border-radius: 6px; } .ov-icon-btn:hover { background: rgba(0,0,0,0.06); } .filter-inline { font-size: 0.8rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } /* Balances tab */ .bal-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem 1.25rem; margin: 0.5rem 0 0.75rem; } .bal-fig { display: flex; flex-direction: column; } .bal-op { font-size: 1.25rem; color: var(--color-muted); font-weight: 700; } .bal-total .figure-value { color: var(--aia-blue); } .bal-divider { align-self: stretch; width: 1px; background: var(--color-border); margin: -0.25rem 0.5rem; } .bal-group-label { font-family: var(--font-heading); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); align-self: center; } .bal-note { font-size: 0.82rem; margin: 0 0 1rem; } .bal-carryin-note { font-size: 0.85rem; line-height: 1.45; margin: 0 0 1rem; padding: 0.7rem 0.9rem; background: rgba(0, 51, 102, 0.06); border-left: 3px solid var(--aia-blue); border-radius: 6px; } .bal-foot td { font-weight: 700; border-top: 2px solid var(--color-border); background: #f7f8fa; } /* Budget totals (Budget vs Actual) — boxed to match Balances/Reconciliation */ .budget-totals { display: inline-block; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem 1.5rem; margin: 0.75rem 0; } .budget-vs-actual { border-collapse: collapse; } .budget-vs-actual th, .budget-vs-actual td { padding: 0.4rem 0 0.4rem 2rem; text-align: right; } .budget-vs-actual th:first-child, .budget-vs-actual td:first-child { padding-left: 0; text-align: left; } .budget-vs-actual thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: 700; } .budget-vs-actual tbody td:first-child { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 600; } .budget-vs-actual .num { font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; font-variant-numeric: tabular-nums; } .budget-vs-actual .bva-net td { border-top: 2px solid var(--color-border); padding-top: 0.55rem; } .budget-vs-actual .bva-net .num { color: var(--aia-blue); } .budget-vs-actual .bva-recon td { padding: 0.6rem 0 0.1rem; text-align: center; font-size: 0.8rem; color: var(--color-muted); } .budget-vs-actual .bva-recon a { color: var(--color-muted); text-decoration: none; } .budget-vs-actual .bva-recon a:hover { color: var(--aia-blue); text-decoration: underline; } .budget-vs-actual .bva-recon strong { color: var(--aia-blue); } .recon-unrecon { font-size: 0.95rem; margin: 0.25rem 0 0.75rem; } .recon-setup { margin: 0 0 1rem; padding: 0.85rem 1rem; background: #f0f4f8; border: 1px solid var(--color-border); border-left: 3px solid var(--aia-blue); border-radius: 8px; } .recon-setup p { margin: 0; } .recon-setup p + p { margin-top: 0.35rem; font-size: 0.85rem; } /* Budget view/edit toggle bar */ .budget-editbar { display: flex; align-items: center; gap: 0.75rem; margin: -0.5rem 0 1.25rem; } .budget-editbadge { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b45309; background: #fff7ed; border: 1px solid #fed7aa; padding: 0.15rem 0.55rem; border-radius: 999px; } /* Mobile budget/reconciliation polish (desktop-first app; these keep the key read-only views usable on a phone). */ @media (max-width: 640px) { .budget-totals { display: block; width: 100%; box-sizing: border-box; } .budget-vs-actual { width: 100%; } .budget-vs-actual th, .budget-vs-actual td { padding-left: 0.75rem; } .budget-vs-actual .num { font-size: 1.05rem; } .budget-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .budget-tabs .budget-tab { white-space: nowrap; } .cat-head { flex-wrap: wrap; } .cat-figs { gap: 1rem; width: 100%; justify-content: space-between; } .li-row { flex-wrap: wrap; row-gap: 0.15rem; } .li-row .li-name { flex: 1 1 100%; font-weight: 600; } .li-row .li-cf { flex: 1 1 100%; font-size: 0.8rem; color: var(--color-muted); } .li-row .li-amt, .li-row .li-actual, .li-row .li-remain { flex: 1 1 30%; min-width: 0; } .li-head { display: none; } /* labels move inline on mobile via the figures above */ } .recon-unrecon-amt { color: var(--color-muted); margin-left: 0.5rem; } /* Flash messages (notice / alert) */ .flash-area { max-width: 1000px; margin: 1rem auto 0; padding: 0 1.25rem; } .flash { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9rem; border: 1px solid transparent; } .flash + .flash { margin-top: 0.5rem; } .flash-notice { background: #f0f7f2; border-color: #b7e0c4; color: #157a3d; } .flash-alert { background: #fdf0f0; border-color: #f0c0c0; color: #a12; } /* Reconciliation: one flat, sortable table with a sticky bulk-assign bar. */ .recon-bulkbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; background: #f6f7f9; border: 1px solid var(--color-border); border-radius: 8px; } .recon-bulkbar form { display: contents; } .recon-bulkbar .recon-select { width: auto; max-width: 280px; } .recon-bulkbar-hint { flex: 1 1 100%; font-size: 0.78rem; } .recon-count { font-size: 0.82rem; color: #157a3d; font-weight: 600; min-width: 6.5rem; } /* Content-aware columns: Date/GL/Amount shrink to their text; Chart field, Description, and the line-item picker share the freed space. The compound selector beats the later `.txn-table { table-layout: fixed }` rule. */ .txn-table.recon-flat-table { table-layout: auto; } .recon-flat-table .recon-check-cell { width: 2.2rem; text-align: center; } .recon-flat-table .recon-check-cell input { width: 1.1rem; height: 1.1rem; } .recon-flat-table .recon-shrink { width: 1%; white-space: nowrap; } .recon-flat-table .recon-gl { font-weight: 600; color: var(--aia-blue); white-space: nowrap; } .recon-flat-table .recon-cf { white-space: nowrap; } .recon-flat-table td.desc { min-width: 14rem; } .recon-flat-table .recon-assign, .recon-flat-table .recon-select { min-width: 15rem; } /* Grouped (Reconciled tab): band alternating line-item groups; drop zebra so the bands read cleanly. Compound selector beats .recon-table tr.is-reconciled. */ .recon-table.recon-grouped tbody tr { background: #fff; } .recon-table.recon-grouped tbody tr.recon-band-alt { background: #eaf0f6; } .recon-th-sort { cursor: pointer; user-select: none; white-space: nowrap; } /* Header sits on the blue thead background, so keep text white and cue with an underline. */ .recon-th-sort:hover { text-decoration: underline; } .recon-th-sort::after { content: "↕"; opacity: 0.4; margin-left: 0.3rem; font-size: 0.8em; } .recon-th-sort[data-sort-dir=asc]::after { content: "↑"; opacity: 1; } .recon-th-sort[data-sort-dir=desc]::after { content: "↓"; opacity: 1; } .recon-nomatch { font-size: 0.78rem; font-style: italic; } /* Offsetting-twin prompt (shown after reconciling a paired transaction) */ .recon-twin-overlay { z-index: 1000; } .recon-twin-overlay .modal-x { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-muted); } .twin-body { padding: 1rem 1.25rem; font-size: 0.9rem; } .twin-body p { margin: 0 0 0.5rem; } .twin-list { margin: 0.5rem 0; padding-left: 1.1rem; font-size: 0.85rem; } .twin-list li { margin: 0.2rem 0; } .twin-list .num { font-variant-numeric: tabular-nums; font-weight: 600; } .twin-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--color-border); } .twin-actions form { margin: 0; } .recon-help { margin: 0.25rem 0 0.75rem; font-size: 0.85rem; } /* Unreconciled | Reconciled sub-tabs */ .recon-subtabs { display: inline-flex; gap: 0.25rem; margin: 0.25rem 0 0.85rem; padding: 0.2rem; background: #eef0f3; border-radius: 999px; } .recon-subtab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.9rem; border-radius: 999px; text-decoration: none; color: var(--color-muted); font-weight: 600; font-size: 0.88rem; } .recon-subtab:hover { color: var(--aia-blue); } .recon-subtab.active { background: #fff; color: var(--aia-blue); box-shadow: 0 1px 2px rgba(0,0,0,0.08); } .recon-subtab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.4rem; border-radius: 999px; background: #d7dbe0; color: #333; font-size: 0.75rem; font-weight: 700; } .recon-subtab.active .recon-subtab-count { background: var(--aia-blue); color: #fff; } @media (max-width: 640px) { .recon-bulkbar .recon-select { flex: 1; max-width: none; } } /* Category groups (Revenue / Expense sections) */ .cat-group { margin-bottom: 1.75rem; } .cat-group-head { font-family: var(--font-heading); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aia-gray); margin: 0 0 0.75rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--color-border); } .cat-kind-select { padding: 0.25rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.78rem; background: #fff; } /* Chartfield permissions tabs + review */ .cfp-tabs { align-items: center; } .cfp-tabs-spacer { margin-left: auto; } .cfp-scan { margin-bottom: 0.35rem; } .cfp-decision { display: flex; gap: 0.5rem; align-items: center; } .cfp-decision form { margin: 0; } .cfp-decision .btn-secondary { white-space: nowrap; } /* keep "Hide" / "Make visible" on one line */ .cfp-view { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 6px; text-decoration: none; font-size: 1.15rem; line-height: 1; color: var(--aia-blue); } .cfp-view:hover { background: rgba(0,51,102,0.08); } .bal-combo { display: inline-flex; align-items: center; gap: 0.4rem; } .cfp-view-sm { width: 1.5rem; height: 1.5rem; font-size: 0.9rem; } /* Budget tabs */ .budget-tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--color-border); margin: 0.5rem 0 1.25rem; } .budget-tab { padding: 0.55rem 1rem; text-decoration: none; color: var(--color-muted); font-weight: 600; font-size: 0.9rem; border-bottom: 3px solid transparent; margin-bottom: -2px; } .budget-tab:hover { color: var(--aia-blue); } .budget-tab.active { color: var(--aia-blue); border-bottom-color: var(--aia-red); } .budget-tab.disabled { color: var(--color-border); cursor: default; } /* Category rename (inline, styled like the heading) */ .cat-rename { display: flex; align-items: center; gap: 0.4rem; margin: 0; } .cat-name-input { flex: 0 1 22rem; min-width: 8rem; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-text); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.2rem 0.5rem; background: #fff; } .cat-name-input:focus { outline: none; border-color: var(--color-primary); } .cat-name-save { padding: 0.25rem 0.6rem; font-size: 0.78rem; } .cat-head .cat-total { margin-left: auto; } /* keep the total pinned right, clear of the name */ /* Reconciliation table */ .recon-combo { font-size: 0.8rem; color: var(--color-muted); } .recon-select { width: 100%; padding: 0.35rem 0.4rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.82rem; background: #fff; } .recon-select:focus { outline: none; border-color: var(--color-primary); } .recon-table tr.is-reconciled { background: rgba(0,51,102,0.04); } .recon-table tr.is-reconciled .recon-select { border-color: var(--aia-blue); } .recon-table tr.is-error { background: rgba(153,0,0,0.05); } .recon-select.is-error { border-color: var(--aia-red); color: var(--aia-red); } .recon-subtab-error.active { color: var(--aia-red); } .recon-subtab-error.active .recon-subtab-count { background: var(--aia-red); } .recon-readonly { font-size: 0.82rem; color: var(--color-text); } .budget-category { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; } .cat-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .cat-head h3 { margin: 0; font-size: 1.15rem; flex: 1; } .cat-total { font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; } /* Category summary: Budget / Reconciled / Remaining, pinned right. */ .cat-figs { margin-left: auto; display: flex; gap: 1.5rem; align-items: flex-end; } .cat-fig { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } .cat-fig-k { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; } .cat-fig-v { font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; } .cat-delete { background: none; border: 0; color: var(--color-muted); font-size: 0.8rem; cursor: pointer; text-decoration: underline; } .cat-delete:hover { color: var(--aia-red); } .li-list { display: flex; flex-direction: column; gap: 0.35rem; } .li-row { display: flex; align-items: center; gap: 0.5rem; } .li-edit { display: flex; align-items: center; gap: 0.5rem; flex: 1; margin: 0; } .li-row .li-name { flex: 2; } .li-row .li-cf { flex: 3; } .li-row .li-amt, .li-row .li-actual, .li-row .li-remain { flex: 1; min-width: 90px; text-align: right; } .li-row input, .li-row select { padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-body); font-size: 0.85rem; box-sizing: border-box; } .li-static { padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); } .li-static .num { font-variant-numeric: tabular-nums; } /* Column header row for Budget / Reconciled / Remaining */ .li-head { padding-bottom: 0.2rem; border-bottom: 1px solid var(--color-border); } .li-head span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); font-weight: 700; } /* Over budget (expense reconciled beyond plan) */ .is-over { color: #a12; } .li-empty { color: var(--color-muted); font-size: 0.85rem; padding: 0.35rem 0; } .li-del { background: none; border: 0; color: var(--color-muted); font-size: 1.1rem; cursor: pointer; } .li-del:hover { color: var(--aia-red); } .li-del-form { margin: 0; } .li-add { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--color-border); } .add-category { margin-top: 0.5rem; } .add-category-form { display: flex; gap: 0.5rem; } .cat-name-input { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-body); } /* --- Dev sign-in --- */ .signin { max-width: 620px; margin: 0 auto; padding: 2.5rem 1.5rem; } .signin-current { background: #eef1f4; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; margin: 1rem 0; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .signin-form { display: flex; gap: 0.5rem; margin-top: 1rem; } .signin-form select { flex: 1; } /* --- Finance viewer --- */ .finance { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; } .finance-head { margin-bottom: 1.5rem; } .finance-head h1 { margin: 0 0 0.4rem; } .finance-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; align-items: end; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; } .filter-field label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); margin-bottom: 0.25rem; } .filter-select, .filter-input { width: 100%; padding: 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-body); font-size: 0.85rem; background: #fff; box-sizing: border-box; } .filter-input:focus, .filter-select:focus { outline: none; border-color: var(--color-primary); } .filter-actions { display: flex; gap: 0.5rem; grid-column: 1 / -1; justify-content: flex-end; } .filter-toggle { display: flex; align-items: flex-end; } .donations-toggle { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--aia-blue); cursor: pointer; white-space: nowrap; } .donations-toggle input { width: auto; margin: 0; } .finance-meta { font-size: 0.85rem; color: var(--color-muted); margin-bottom: 0.6rem; } /* Cascade picker: per-field description + uniqueness note, and resolved combo. */ .cf-note { display: block; margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.3; min-height: 0.95rem; color: var(--color-muted); } .cf-note.is-unique { color: #157a3d; } .cf-note.is-unique::before { content: "✓ "; } .cf-note.is-shared { color: #8a6d00; } .cf-note.is-nomatch { color: #a12; } .cf-note.is-required { color: #a12; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.66rem; } .cf-summary { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--aia-blue); font-variant-numeric: tabular-nums; } .cf-summary:empty { display: none; } /* Chartfield checklist (normal-user Transactions filter) — compact + columnar */ .cf-checklist { display: block; } /* override the .finance-filters grid */ /* Collapsible picker + sections (native
) */ .cf-picker { border: 1px solid var(--color-border); border-radius: 8px; margin-bottom: 1rem; } .cf-summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.6rem 0.8rem; font-family: var(--font-heading); font-weight: 700; color: var(--aia-blue); list-style: none; } .cf-summary::-webkit-details-marker { display: none; } .cf-summary::before, .cf-section-summary::before { content: "\25b8"; font-size: 1.15rem; line-height: 1; color: var(--aia-blue); transition: transform 0.15s; } .cf-picker[open] > .cf-summary::before, .cf-section[open] > .cf-section-summary::before { transform: rotate(90deg); } /* The cascade's live note is a

— not a disclosure toggle, so no caret. */ p.cf-summary::before { content: none; } .cf-picker-body { padding: 0 0.8rem 0.8rem; } .cf-section { border: 0; padding: 0; margin: 0 0 0.6rem; min-width: 0; } .cf-section-summary { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aia-gray); padding: 0.3rem 0; } .cf-section-summary::-webkit-details-marker { display: none; } .cf-search { width: 100%; margin-bottom: 0.6rem; } .cf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; } .cf-toolbar-label { font-size: 0.8rem; color: var(--color-muted); } .cf-toolbar-actions { display: flex; gap: 0.75rem; } .cf-link { background: none; border: 0; color: var(--aia-blue); font-size: 0.8rem; font-weight: 600; cursor: pointer; padding: 0; } .cf-link:hover { text-decoration: underline; } /* Newspaper columns: each group block stays intact within a column. */ .cf-group-list { column-width: 265px; column-gap: 1.25rem; } .cf-group { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 0.5rem; } .cf-check { display: flex; align-items: center; gap: 0.45rem; padding: 0.15rem 0.25rem; border-radius: 5px; cursor: pointer; } .cf-check:hover { background: rgba(0,51,102,0.05); } .cf-check input { flex: none; width: 0.95rem; height: 0.95rem; accent-color: var(--aia-blue); } .cf-combo { font-family: var(--font-body); font-size: 0.82rem; color: var(--color-text); line-height: 1.25; } .cf-group-head .cf-group-label { font-weight: 600; color: var(--aia-blue); } .cf-count { display: inline-block; font-size: 0.68rem; font-weight: 700; color: var(--color-muted); background: rgba(0,51,102,0.08); border-radius: 9px; padding: 0 0.35rem; margin-left: 0.2rem; vertical-align: middle; } /* Collapsible department group (native

) — header reads as a clickable bar */ .cf-group-multi > summary { list-style: none; } .cf-group-multi > summary::-webkit-details-marker { display: none; } .cf-group-head { background: rgba(0,51,102,0.06); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.35rem 0.5rem; } .cf-group-head:hover { background: rgba(0,51,102,0.12); } .cf-group-head .cf-group-label { flex: 1; } .cf-group-head::after { content: "\25bc"; margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.43rem; height: 1.43rem; border-radius: 50%; background: var(--aia-blue); color: #fff; font-size: 0.94rem; line-height: 1; transition: transform 0.15s; } .cf-group-head:hover::after { background: var(--aia-red); } .cf-group-multi[open] > .cf-group-head::after { transform: rotate(180deg); } .cf-children { margin-left: 1.3rem; } .cf-child .cf-combo { color: var(--color-muted); font-size: 0.8rem; } .cf-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; align-items: end; border-top: 1px solid var(--color-border); padding-top: 0.9rem; margin-top: 0.4rem; } /* Balance summary card (becomes budget vs actuals) */ .summary-card { background: var(--aia-blue); color: #fff; border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } .summary-fy { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; } .summary-path { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; opacity: 0.85; margin-left: 0.5rem; } .finance-empty { text-align: center; color: var(--color-muted); padding: 3rem 1rem; border: 1px dashed var(--color-border); border-radius: 8px; } .summary-figures { display: flex; flex-wrap: wrap; gap: 2rem; } .figure { display: flex; flex-direction: column; } .figure-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; } .figure-value { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; font-variant-numeric: tabular-nums; } .figure-sub { font-size: 0.72rem; opacity: 0.8; } .figure-muted .figure-value { opacity: 0.55; } .summary-meta { margin-top: 0.75rem; font-size: 0.8rem; opacity: 0.85; } .summary-employee { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .summary-employee label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.85; } .summary-employee select { font-family: var(--font-body); font-size: 0.9rem; padding: 0.4rem 0.5rem; border: 0; border-radius: 6px; min-width: 240px; } /* Per-person (focused employee) summary — sits right above the table */ .person-summary { margin-bottom: 0.75rem; } .person-summary .ps-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #eef1f4; border: 1px solid var(--color-border); border-left: 4px solid var(--aia-blue); border-radius: 8px; padding: 0.6rem 0.9rem; } .person-summary .ps-figures { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .person-summary .ps-name { font-family: var(--font-heading); font-weight: 700; } .person-summary .ps-total { font-weight: 700; font-variant-numeric: tabular-nums; } .person-summary .ps-count { font-size: 0.8rem; color: var(--color-muted); } .pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem; margin-top: 1rem; } .pager-btn, .pager-page { font-family: var(--font-body); font-size: 0.85rem; color: var(--color-primary); background: #fff; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.35rem 0.6rem; text-decoration: none; cursor: pointer; min-width: 2rem; text-align: center; } .pager-btn:hover, .pager-page:hover { border-color: var(--color-primary); } .pager-page.current { background: var(--aia-blue); color: #fff; border-color: var(--aia-blue); font-weight: 600; } .pager-gap { color: var(--color-muted); padding: 0 0.15rem; } .pager-status { text-align: center; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.4rem; } .table-scroll { overflow-x: hidden; border: 1px solid var(--color-border); border-radius: 8px; } .txn-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; table-layout: fixed; } .txn-table th, .txn-table td { padding: 0.4rem 0.6rem; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; overflow-wrap: anywhere; } .txn-table thead th { position: sticky; top: 0; background: var(--aia-blue); color: #fff; font-family: var(--font-body); font-weight: 600; } .txn-table thead th a.th-sort { color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; } .txn-table thead th a.th-sort:hover { text-decoration: underline; } .txn-table thead th a.th-sort .sort-ind { opacity: 0.45; font-size: 0.8em; margin-left: 0.15rem; } .txn-table thead th a.th-sort.active .sort-ind { opacity: 1; } .txn-table tbody tr:nth-child(even) { background: #fafafa; } .txn-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .txn-table td.nowrap, .txn-table th.nowrap { white-space: nowrap; } .txn-table .empty { text-align: center; color: var(--color-muted); padding: 1.5rem; } .txn-table .unmatched-emp { color: var(--color-muted); font-style: italic; font-variant-numeric: tabular-nums; } /* --- Team Config tree --- */ .team-config { max-width: 820px; margin: 0 auto; padding: 2.5rem 1.5rem; } .tc-header { margin-bottom: 1.75rem; } .tc-header h1 { margin: 0 0 0.5rem; } .tc-actions { display: flex; gap: 0.5rem; margin-top: 1rem; align-items: center; flex-wrap: wrap; } .tc-search { font-family: var(--font-body); font-size: 0.85rem; padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; min-width: 14rem; background: #fff; } .tc-search:focus { outline: none; border-color: var(--color-primary); } .tree-item.filtered-hidden { display: none; } .tc-empty { margin: 1rem 0; } .tc-btn { font-family: var(--font-body); font-size: 0.8rem; font-weight: 500; color: var(--color-primary); background: #fff; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; } .tc-btn:hover { border-color: var(--color-primary); } .tc-btn-primary { color: #fff; background: var(--aia-red); border-color: var(--aia-red); } .tc-btn-primary:hover { background: #7a0000; border-color: #7a0000; } a.tc-btn { text-decoration: none; display: inline-flex; align-items: center; } /* --- People directory --- */ .people-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1rem 0; } .people-search { flex: 1; min-width: 220px; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.9rem; } .people-status { display: inline-flex; gap: 0.25rem; } .people-status-pill { text-decoration: none; font-size: 0.8rem; color: var(--color-muted); padding: 0.35rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; } .people-status-pill.active { color: #fff; background: var(--aia-blue); border-color: var(--aia-blue); } .people-status-pill.active .cf-count { color: #fff; } .people-table td { vertical-align: middle; } .people-row.is-inactive td { opacity: 0.55; } .people-name-link { font-weight: 600; color: var(--aia-blue); text-decoration: none; } .people-name-link:hover { text-decoration: underline; } .people-email, .people-empid { font-size: 0.85rem; color: var(--color-muted); } .status-pill { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; } .status-active { background: #e6f4ea; color: #1b7a3d; } .status-inactive { background: #f2e6e6; color: #8a2b2b; } /* Person detail modal */ .person-detail { padding: 1.25rem; } .person-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; margin: 0 0 1.25rem; } .person-facts > div { display: flex; flex-direction: column; } .person-facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); } .person-facts dd { margin: 0.1rem 0 0; font-size: 0.9rem; } .person-teams h3 { font-size: 0.85rem; margin: 0 0 0.5rem; } .person-team-list { list-style: none; margin: 0 0 0.75rem; padding: 0; } .person-team-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; } .primary-star { color: var(--aia-red); margin-right: 0.25rem; } .team-code { font-size: 0.75rem; margin-left: 0.4rem; } .modal-actions { margin-top: 1rem; display: flex; gap: 0.5rem; } .field-hint { font-size: 0.78rem; margin: 0.25rem 0 0; } /* --- HR roster import --- */ .import-form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.25rem 0; } .import-drop { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; border: 2px dashed var(--color-border); border-radius: 8px; cursor: pointer; background: #fafafa; } .import-drop input[type=file] { font-size: 0.85rem; } .import-help { margin-top: 2rem; border-top: 1px solid var(--color-border); padding-top: 1rem; } .import-help h3 { font-size: 0.9rem; margin: 0 0 0.4rem; } .import-cols { display: inline-block; background: #f2f4f7; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.82rem; margin-bottom: 0.6rem; } .import-help ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; } .import-help li { margin: 0.2rem 0; } .import-errors { background: #fbeaea; border: 1px solid #e0b4b4; border-radius: 8px; padding: 0.9rem 1.1rem; margin: 1rem 0; color: #8a2b2b; } .import-errors ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .import-summary { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0; } .import-stat { flex: 1; min-width: 110px; background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.82rem; color: var(--color-muted); } .import-stat-n { display: block; font-size: 1.4rem; font-weight: 700; color: var(--aia-blue); font-family: var(--font-heading); } .import-stat.is-warn .import-stat-n { color: #b8860b; } .import-stat.is-danger .import-stat-n { color: var(--aia-red); } .import-block { margin: 1rem 0; border: 1px solid var(--color-border); border-radius: 8px; padding: 1rem 1.1rem; } .import-block.is-warn { border-color: #e6c68a; background: #fffdf5; } .import-block.is-danger { border-color: #e0b4b4; background: #fdf6f6; } .import-block > summary { cursor: pointer; font-weight: 600; } .import-block h3 { margin: 0 0 0.4rem; font-size: 0.95rem; } .import-list { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; } .import-list li { margin: 0.25rem 0; } .import-cols-2 { column-count: 2; column-gap: 2rem; } @media (max-width: 640px) { .import-cols-2 { column-count: 1; } } .import-unknown { list-style: none; padding-left: 0; } .import-unknown li { display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0; } .import-change { display: inline-block; background: #eef1f5; border-radius: 4px; padding: 0.1rem 0.45rem; margin: 0 0.25rem 0.15rem 0; font-size: 0.78rem; } .import-resolution { margin: 0.2rem 0 0; font-size: 0.82rem; color: #1b7a3d; } .import-approve-note { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; line-height: 1.45; } .import-conflict-reminder { font-size: 0.82rem; margin: 0 0 0.75rem; } .move-remove { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: 0.6rem; font-size: 0.8rem; color: var(--aia-red); } /* Per-conflict resolution UI */ .conflict-list { list-style: none; padding-left: 0; } .conflict-item { padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); } .conflict-item:last-child { border-bottom: 0; } .conflict-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .conflict-reason { font-size: 0.82rem; margin: 0.15rem 0 0.4rem; } .spouse-flag { font-size: 0.72rem; font-weight: 600; color: #7a5c00; background: rgba(184, 134, 11, 0.16); padding: 0.1rem 0.45rem; border-radius: 999px; } .conflict-action-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; } .conflict-action-row > span { color: var(--color-muted); } .conflict-action { max-width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font-size: 0.85rem; background: #fff; } .import-apply { margin-top: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1rem; } .import-confirm { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--aia-red); font-weight: 600; margin-bottom: 0.9rem; } .import-apply-actions { display: flex; gap: 0.6rem; } .tc-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--color-muted); cursor: pointer; } /* Inactive teams: dimmed, and hidden while the toggle is off */ .tree-item.is-inactive > .tree-row { opacity: 0.5; } .team-config.hiding-inactive .tree-item.is-inactive { display: none; } .tree-list { list-style: none; margin: 0; padding: 0; } .tree-root { padding: 0.25rem; } /* Collapse/expand */ .tree-item.collapsed > .tree-list { display: none; } .tree-toggle { border: 0; background: none; cursor: pointer; color: var(--color-muted); font-size: 0.8rem; line-height: 1; width: 1rem; padding: 0; transition: transform 0.12s ease; } .tree-item:not(.collapsed) > .tree-row > .tree-toggle { transform: rotate(90deg); } .tree-toggle-spacer { display: inline-block; width: 1rem; } /* Indent nested lists; keep a guide rail */ .tree-item > .tree-list { margin-left: 1.25rem; padding-left: 0.75rem; border-left: 2px solid var(--color-border); min-height: 6px; /* keep empty lists droppable */ } .tree-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; margin: 0.2rem 0; background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-border); /* branch color set inline */ border-radius: 6px; } .tree-row:hover { border-top-color: var(--color-primary); border-right-color: var(--color-primary); border-bottom-color: var(--color-primary); } /* Save feedback: row flash */ .tree-row.flash-saved { animation: flashSaved 1s ease; } @keyframes flashSaved { 0% { background: rgba(35, 150, 70, 0.22); } 100% { background: #fff; } } /* Quick-jump highlight */ .tree-row.flash-jump { animation: flashJump 1.5s ease; } @keyframes flashJump { 0%, 40% { background: rgba(0, 51, 102, 0.18); } 100% { background: #fff; } } .drag-handle { cursor: grab; color: var(--color-muted); font-size: 1.1rem; line-height: 1; user-select: none; } .drag-handle:active { cursor: grabbing; } .tree-label { display: flex; align-items: center; gap: 0.5rem; } a.tree-name { font-weight: 500; color: var(--color-text); text-decoration: none; cursor: pointer; } a.tree-name:hover { color: var(--color-primary); text-decoration: underline; } .tree-inactive { font-size: 0.7rem; color: var(--color-muted); font-style: italic; } .member-badge { margin-left: auto; flex-shrink: 0; font-size: 0.72rem; font-weight: 600; color: var(--color-muted); background: #f0f1f2; border-radius: 10px; padding: 0.05rem 0.45rem; white-space: nowrap; } .tree-tag { font-size: 0.7rem; font-family: var(--font-body); color: var(--aia-blue); background: rgba(0, 51, 102, 0.08); padding: 0.1rem 0.4rem; border-radius: 4px; } .tree-tag-budget { color: #7a5c00; background: rgba(184, 134, 11, 0.14); } .tree-scope { font-size: 0.7rem; color: var(--aia-red); background: rgba(153, 0, 0, 0.08); padding: 0.1rem 0.4rem; border-radius: 4px; } /* SortableJS drag states */ .sortable-ghost > .tree-row { opacity: 0.4; border-style: dashed; } .sortable-chosen > .tree-row { box-shadow: 0 2px 8px rgba(0,0,0,0.15); } /* Toast */ .toast { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1000; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: #fff; padding: 0.6rem 0.9rem; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .toast.show { opacity: 1; transform: translateY(0); } .toast-ok { background: #1f9d55; } .toast-error { background: var(--aia-red); } /* --- Modal --- */ .modal-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-card { background: #fff; border-radius: 10px; width: 100%; max-width: 460px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); overflow: hidden; } .modal-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); } /* Mobile / narrow: single scrolling column (form then members). */ .modal-body { flex: 1; min-height: 0; overflow-y: auto; } .modal-pane { min-height: 0; } .modal-pane-members { border-top: 1px solid var(--color-border); } /* Tabs (Team | Chart fields) */ .modal-tablist { display: flex; gap: 0.25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .modal-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.6rem 0.55rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--color-muted); cursor: pointer; } .modal-tab:hover { color: var(--aia-blue); } .modal-tab.is-active { color: var(--aia-blue); border-bottom-color: var(--aia-red); } /* :not([hidden]) so the `hidden` attribute (tab switching) still wins over display:flex. */ .modal-panes:not([hidden]) { display: flex; flex-direction: column; } .modal-pane-chartfields { padding: 1.25rem; } /* Larger screens: the Team tab is double-wide (members on the right). */ @media (min-width: 700px) { .modal-card { max-width: 840px; } .modal-panes:not([hidden]) { flex-direction: row; } .modal-panes > .modal-pane { flex: 1; } .modal-pane-members { border-top: 0; border-left: 1px solid var(--color-border); } } .modal-head h2 { margin: 0; font-size: 1.25rem; } .modal-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--color-muted); cursor: pointer; } .modal-close:hover { color: var(--color-text); } /* --- Form --- */ .team-form { padding: 1.25rem; } .team-kind { border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 0.9rem; } .team-kind legend { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); padding: 0 0.3rem; } /* Override the global `.form-field label { display:block }` + full-width input. */ .team-kind .team-kind-opt { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.4rem 0; font-size: 0.85rem; font-weight: 400; color: inherit; cursor: pointer; } .team-kind .team-kind-opt input[type="radio"] { width: auto; flex: none; margin: 0.15rem 0 0; padding: 0; } .team-kind .team-kind-opt span { flex: 1; } .team-kind-psft { margin: 0.7rem 0 0; } .form-errors { background: rgba(153, 0, 0, 0.08); color: var(--aia-red); border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 1rem; font-size: 0.85rem; } .form-field { margin-bottom: 0.9rem; } .form-row { display: flex; gap: 0.75rem; } .form-row .form-field { flex: 1; } .form-field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); margin-bottom: 0.25rem; } .form-field input, .form-field select { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; box-sizing: border-box; } .form-field input:focus, .form-field select:focus { outline: none; border-color: var(--color-primary); } .form-check { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0 1rem; } .form-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; } .btn-primary { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--color-primary); border: 0; border-radius: 6px; padding: 0.55rem 1.1rem; cursor: pointer; } .btn-primary:hover { background: #002a54; } .btn-secondary { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 6px; padding: 0.55rem 1.1rem; cursor: pointer; } .btn-secondary:hover { border-color: var(--color-primary); } /* --- Members section (in edit modal) --- */ .modal-divider { border: 0; border-top: 1px solid var(--color-border); margin: 0; } .members { padding: 1rem 1.25rem 1.25rem; } .members-head { margin: 0 0 0.6rem; font-size: 1rem; } .members-empty { font-size: 0.85rem; margin: 0 0 0.75rem; } .member-list { list-style: none; margin: 0 0 0.85rem; padding: 0; border: 1px solid var(--color-border); border-radius: 6px; } .member { display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 0.6rem; font-size: 0.9rem; } .member:not(:last-child) { border-bottom: 1px solid var(--color-border); } .member-remove-form { margin: 0; } .member-remove { border: 0; background: none; color: var(--color-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .member-remove:hover { color: var(--aia-red); } .member-add { display: flex; gap: 0.5rem; } .member-add-select { flex: 1; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-body); font-size: 0.9rem; } /* Team Config → Chart fields section */ .cf-team-row { align-items: flex-start; } .cf-team-combo { display: flex; flex-direction: column; gap: 0.1rem; } .cf-team-code { font-variant-numeric: tabular-nums; font-size: 0.82rem; } .cf-team-desc { font-size: 0.72rem; color: var(--color-muted); } .cf-team-add { margin-top: 0.75rem; padding: 0; background: none; border: 0; } /* override .finance-filters card look inside the modal */ .cf-team-add .filter-actions { justify-content: flex-start; } /* --- Chartfield permission edit modal polish --- */ .modal-pane-form { padding: 1.25rem; } .cfp-dims { margin: 0 0 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; } .cfp-dim { display: flex; flex-direction: column; min-width: 0; } .cfp-dim dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); font-weight: 600; } .cfp-dim dd { margin: 0.1rem 0 0; font-family: var(--font-heading); font-weight: 700; color: var(--aia-blue); font-size: 0.95rem; word-break: break-word; } .cfp-form { margin: 0; } .toggle-field { display: flex; gap: 0.6rem; align-items: flex-start; background: #f7f8fa; border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 0.85rem; cursor: pointer; } .toggle-field input { margin-top: 0.15rem; width: 1rem; height: 1rem; accent-color: var(--aia-blue); flex: none; } .toggle-text { display: flex; flex-direction: column; gap: 0.2rem; } .toggle-title { font-weight: 600; font-size: 0.9rem; } .toggle-help { font-size: 0.8rem; color: var(--color-muted); line-height: 1.35; } .cfp-view-link { margin: 0.9rem 0; } .cfp-view-link a { font-size: 0.85rem; color: var(--aia-blue); text-decoration: none; font-weight: 600; } .cfp-view-link a:hover { text-decoration: underline; } .cfp-viewers { padding: 1.25rem; } .cfp-viewers .members-head { margin: 0 0 0.15rem; } .members-section + .members-section { margin-top: 1.5rem; } .members-sub { font-size: 0.78rem; color: var(--color-muted); margin: 0 0 0.6rem; } .member-name { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .member-icon { font-size: 0.85rem; opacity: 0.85; flex: none; }