/* ============================================================================= * Barangay Unified System — Theme (Modern Gov-Tech) * * Additive palette refresh. Drop AFTER app.css. * * Rules: * - Do NOT override the body gradient in app.css. * - Do NOT auto-trigger dark mode — app.css is light-only. Dark mode is * opt-in via [data-theme="dark"] on or . * - Shift legacy tokens (--bg, --ink, --brand, --gold, --red) subtly to the * gov-tech palette so existing components still render correctly. * - Add new --color-* semantic tokens for new components. * ============================================================================= */ :root { /* -- New semantic tokens (opt-in) -------------------------------------- */ --color-primary: #1E3A8A; --color-primary-hover: #1E40AF; --color-primary-subtle: #EEF2FF; --color-accent: #059669; --color-accent-hover: #047857; --color-accent-subtle: #ECFDF5; --color-highlight: #F59E0B; --color-highlight-strong: #B45309; --color-highlight-subtle: #FFFBEB; --color-danger: #DC2626; --color-danger-subtle: #FEF2F2; --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-border: #E2E8F0; --color-border-strong: #CBD5E1; --color-text: #0F172A; --color-text-secondary: #475569; --color-text-muted: #64748B; --color-text-inverse: #FFFFFF; /* Typography */ --font-sans: 'Inter', 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-display: 'Plus Jakarta Sans', 'Inter', 'Merriweather', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', ui-monospace, monospace; /* Spacing (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Radius */ --radius-xs: 6px; --radius-xl: 20px; /* Elevation */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-glow-primary: 0 0 0 3px rgba(30, 58, 138, 0.24); --shadow-glow-accent: 0 0 0 3px rgba(5, 150, 105, 0.24); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 380ms; /* -- Subtly shift legacy tokens toward the gov-tech palette ------------ * We keep the light, airy feel of app.css intact. */ --brand: #1E3A8A; /* was #0038a8 — indigo now */ --brand-deep: #172554; --brand-soft: #EEF2FF; --gold: #F59E0B; /* was #ffc72c — amber now */ --red: #DC2626; /* was #ce1126 */ --ok: #059669; /* was #1f8f51 — emerald */ --warn: #B45309; --danger: #DC2626; } /* -- Opt-in dark mode (only when [data-theme='dark'] is set) --------------- */ html[data-theme='dark'], body[data-theme='dark'] { --color-primary: #3B82F6; --color-primary-hover: #60A5FA; --color-primary-subtle: #1E293B; --color-accent: #10B981; --color-accent-subtle: #064E3B; --color-highlight: #FBBF24; --color-highlight-subtle: #451A03; --color-danger: #F87171; --color-danger-subtle: #450A0A; --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-raised: #334155; --color-border: #334155; --color-border-strong: #475569; --color-text: #F1F5F9; --color-text-secondary: #CBD5E1; --color-text-muted: #94A3B8; --color-text-inverse: #0F172A; } /* ============================================================================= * NEW OPT-IN COMPONENT CLASSES * Use these for new UI. Existing app.css components continue working. * ============================================================================= */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md, 14px); border: 1px solid transparent; font-family: var(--font-sans); font-weight: 600; font-size: 0.875rem; line-height: 1; cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-glow-primary); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-primary); color: #fff; } .btn--primary:hover { background: var(--color-primary-hover); } .btn--accent { background: var(--color-accent); color: #fff; } .btn--accent:hover { background: var(--color-accent-hover); } .btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border-strong); } .btn--ghost:hover { background: var(--color-primary-subtle); border-color: var(--color-primary); } .btn--danger { background: var(--color-danger); color: #fff; } /* Pills */ .pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.15rem 0.65rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .pill--pending { background: var(--color-highlight-subtle); color: var(--color-highlight-strong); } .pill--active, .pill--success { background: var(--color-accent-subtle); color: var(--color-accent); } .pill--denied, .pill--error { background: var(--color-danger-subtle); color: var(--color-danger); } .pill--info { background: var(--color-primary-subtle); color: var(--color-primary); } /* Phenomenal stat cards (opt-in, doesn't clash with .stat-card) */ .phen-stat { position: relative; overflow: hidden; padding: 1.5rem 1.5rem 1.25rem; border-radius: 18px; color: #fff; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.45); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); isolation: isolate; } .phen-stat:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -28px rgba(15, 23, 42, 0.55); } .phen-stat::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% -10%, rgba(255,255,255,0.22), transparent 55%); z-index: -1; } .phen-stat__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; margin: 0; } .phen-stat__value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; margin: 0.5rem 0 0.25rem; } .phen-stat__meta { font-size: 0.82rem; opacity: 0.92; margin: 0; } .phen-stat__icon { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); } .phen-stat--indigo { background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%); } .phen-stat--emerald { background: linear-gradient(135deg, #065F46 0%, #10B981 100%); } .phen-stat--amber { background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%); } .phen-stat--rose { background: linear-gradient(135deg, #9F1239 0%, #F43F5E 100%); } .phen-stat--slate { background: linear-gradient(135deg, #1E293B 0%, #475569 100%); } .phen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; } /* Phenomenal dashboard hero */ .phen-hero { position: relative; overflow: hidden; padding: 2rem 2rem 2.25rem; border-radius: 22px; background: radial-gradient(1000px 400px at 90% -10%, rgba(16, 185, 129, 0.25), transparent 60%), radial-gradient(800px 360px at -10% 0%, rgba(245, 158, 11, 0.22), transparent 55%), linear-gradient(135deg, #172554 0%, #1E3A8A 55%, #3730A3 100%); color: #F1F5F9; box-shadow: 0 28px 60px -32px rgba(15, 23, 42, 0.6); margin-bottom: 1.5rem; } .phen-hero__kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #BBF7D0; margin: 0 0 0.75rem; } .phen-hero__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.28); animation: phen-pulse 2s infinite; } @keyframes phen-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.28); } 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.08); } } .phen-hero__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; line-height: 1.15; margin: 0 0 0.6rem; color: #fff; letter-spacing: -0.01em; } .phen-hero__lede { max-width: 62ch; margin: 0; color: #E2E8F0; font-size: 0.95rem; line-height: 1.55; } .phen-hero__badges { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; } .phen-hero__badge { padding: 0.55rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); } .phen-hero__badge strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; } /* Command dashboard — sidebar compacted 248px → 160px so map / data panels get the room (~35% off the rail; map area gains ~88px). */ .app-shell { grid-template-columns: 160px 1fr; } .sidebar { background: linear-gradient(180deg, #1f58bc 0%, #1b4694 48%, #183873 100%); padding: 0.6rem 0.45rem; border-right: 1px solid rgba(255, 255, 255, 0.12); } .brand-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06)); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 0.6rem 0.65rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .brand-pill { background: linear-gradient(180deg, #ffc531, #f2ad00); color: #1f2a44; font-size: 0.6rem; letter-spacing: 0.08em; padding: 0.25rem 0.5rem; margin-bottom: 0.45rem; } .brand-card h1 { font-size: 0.92rem; line-height: 1.1; margin: 0 0 0.25rem; } .brand-card p { color: rgba(239, 246, 255, 0.82); line-height: 1.3; font-size: 0.7rem; margin: 0; } .sidebar-context { margin-top: 0.55rem; padding: 0.55rem 0.6rem; border-radius: 12px; background: rgba(9, 30, 78, 0.24); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.72rem; } .sidebar-context__label, .sidebar-context span, .sidebar-footnote strong, .sidebar-footnote p { color: rgba(237, 244, 255, 0.88); } .nav-stack { gap: 0.4rem; } .nav-item { min-height: 38px; padding: 0.5rem 0.6rem; border-radius: 9px; background: linear-gradient(180deg, rgba(82, 140, 246, 0.18), rgba(66, 115, 213, 0.12)); border: 1px solid rgba(255, 255, 255, 0.04); color: #f4f8ff; font-weight: 700; font-size: 0.78rem; } .nav-item:hover { background: linear-gradient(180deg, rgba(101, 158, 255, 0.34), rgba(82, 135, 232, 0.24)); transform: translateX(0); } .nav-item.is-active { background: linear-gradient(180deg, rgba(94, 151, 255, 0.88), rgba(73, 127, 229, 0.92)); color: #fff; border-color: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .nav-dot { width: 9px; height: 9px; background: rgba(255, 255, 255, 0.44) !important; } .nav-item.is-active .nav-dot { background: #fff !important; animation: none; } .sidebar-footnote { border-radius: 16px; background: rgba(8, 24, 61, 0.34); border: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-actions { display: grid; gap: 0.45rem; } .sidebar-actions .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0.55rem 0.7rem; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; font-weight: 700; } .sidebar-actions .button-link:hover { background: rgba(255, 255, 255, 0.14); } .main-panel { padding: 0.88rem 1rem 1.3rem; } .top-header { align-items: stretch; gap: 0.85rem; padding: 0.9rem 1rem; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 247, 255, 0.94)); border: 1px solid rgba(79, 147, 255, 0.14); box-shadow: 0 22px 38px -30px rgba(17, 46, 103, 0.45); } .top-header::after { width: 170px; height: 170px; right: -78px; top: -95px; background: radial-gradient(circle, rgba(77, 144, 251, 0.24), transparent 72%); } .header-copy { min-width: min(100%, 320px); } .top-header h2 { font-size: 1.16rem; margin-bottom: 0.2rem; color: var(--brand-deep); } .header-summary { color: var(--color-text-secondary); line-height: 1.45; } .barangay-switcher, .header-search { display: flex; align-items: center; } .barangay-switcher label, .global-search-form { display: grid; gap: 0.35rem; } .barangay-switcher span { font-size: 0.73rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .barangay-switcher select, .global-search-form input[type="search"] { min-height: 42px; border-radius: 10px; border: 1px solid rgba(79, 147, 255, 0.18); background: rgba(255, 255, 255, 0.94); padding: 0.65rem 0.78rem; } .global-search-form { grid-template-columns: minmax(240px, 1fr) auto; align-items: end; } .search-btn { min-height: 42px; padding: 0.65rem 0.9rem; border-radius: 10px; border: none; background: linear-gradient(180deg, #4d90fb, #3f7de3); color: #fff; font-weight: 800; } .command-dashboard { display: grid; gap: 1.25rem; } .command-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, 0.95fr); gap: 1rem; padding: 1.5rem; border-radius: 28px; background: linear-gradient(135deg, rgba(8, 32, 89, 0.98), rgba(15, 118, 110, 0.92)), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); color: #f8fbff; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 34px 64px -42px rgba(6, 28, 63, 0.78); } .command-hero::before { content: ""; position: absolute; inset: auto -10% -50% auto; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 199, 44, 0.22), transparent 68%); pointer-events: none; } .command-hero__eyebrow, .workspace-overview__eyebrow { margin: 0 0 0.6rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(232, 244, 255, 0.78); font-weight: 800; } .command-hero__title { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 0.98; max-width: 11ch; margin-bottom: 0.8rem; color: #fff; } .command-hero__lede { max-width: 64ch; color: rgba(239, 246, 255, 0.9); font-size: 0.97rem; line-height: 1.65; } .command-hero__actions, .command-hero__chips, .workspace-overview__hero, .command-directory__toolbar, .command-strip, .workspace-grid, .workspace-columns, .command-section__head { display: flex; gap: 0.85rem; } .command-hero__actions, .command-hero__chips { flex-wrap: wrap; margin-top: 1rem; } .command-hero__chips span { padding: 0.42rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.08); font-size: 0.78rem; font-weight: 700; } .command-hero__panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-self: stretch; } .command-hero__stat, .command-strip__card, .workspace-panel, .workspace-overview, .barangay-card { position: relative; overflow: hidden; border: 1px solid rgba(11, 37, 79, 0.08); box-shadow: 0 24px 48px -38px rgba(11, 37, 79, 0.68); } .command-hero__stat { padding: 1rem; border-radius: 22px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); } .command-hero__stat strong { display: block; font-size: 1.55rem; font-family: 'Instrument Serif', Georgia, serif; color: #fff; } .command-hero__stat span { display: block; margin-top: 0.35rem; color: rgba(239, 246, 255, 0.8); font-size: 0.83rem; } .command-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .command-strip__card, .workspace-panel, .workspace-overview { padding: 1.1rem 1.15rem; border-radius: 24px; background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(12px); } .command-strip__card p, .command-strip__card span { color: var(--color-text-secondary); } .command-strip__card strong { display: block; font-size: 1.55rem; color: var(--brand-deep); margin: 0.3rem 0; } .command-section { display: grid; gap: 0.9rem; } .command-section__head { justify-content: space-between; align-items: end; flex-wrap: wrap; } .barangay-link-board__title { padding-bottom: 0.35rem; border-bottom: 1px solid rgba(79, 147, 255, 0.24); color: var(--brand-deep); font-size: 0.96rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .command-section__lede { max-width: 72ch; color: var(--color-text-secondary); line-height: 1.65; } .command-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; } .barangay-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.64rem 0.82rem; } .barangay-link { display: flex; align-items: center; gap: 0.62rem; min-height: 42px; padding: 0.56rem 0.78rem; border-radius: 10px; background: linear-gradient(180deg, #4d90fb, #3f7de3); color: #fff; text-decoration: none; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 20px -18px rgba(18, 50, 112, 0.9); transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out); } .barangay-link:hover { transform: translateY(-2px); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 24px -18px rgba(18, 50, 112, 0.94); background: linear-gradient(180deg, #5b9dff, #4786ea); } .barangay-link__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 1rem; filter: drop-shadow(0 2px 4px rgba(10, 22, 61, 0.34)); } .barangay-link__label { display: block; line-height: 1.15; font-size: 0.9rem; } .barangay-card { display: grid; gap: 0.9rem; padding: 1.1rem; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94)); color: var(--color-text); text-decoration: none; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out); } .barangay-card:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 34px 60px -42px rgba(11, 37, 79, 0.82); border-color: rgba(30, 58, 138, 0.24); } .barangay-card.is-current { background: linear-gradient(180deg, rgba(238, 242, 255, 0.98), rgba(255, 250, 235, 0.98)); border-color: rgba(245, 158, 11, 0.42); } .barangay-card__top, .barangay-card__metrics, .barangay-card__footer, .workspace-kpis, .module-grid, .official-preview, .pulse-grid { display: grid; gap: 0.8rem; } .barangay-card__top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .barangay-card__class { margin: 0 0 0.25rem; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 800; } .barangay-card h5 { font-size: 1.18rem; color: var(--brand-deep); } .barangay-card__status { padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.73rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; } .barangay-card__status.is-live { color: #065f46; background: #ecfdf5; } .barangay-card__status.is-shell { color: #92400e; background: #fffbeb; } .barangay-card__captain span, .barangay-card__metrics span, .barangay-card__footer span, .module-card p, .official-preview__card p, .official-preview__card span, .pulse-card p, .pulse-list span, .workspace-kpis span { color: var(--color-text-secondary); } .barangay-card__captain strong { display: block; margin-top: 0.28rem; color: var(--color-text); } .barangay-card__load { display: grid; gap: 0.35rem; } .barangay-card__load small { color: var(--color-text-secondary); } .barangay-card__load-bar { height: 8px; border-radius: 999px; background: rgba(30, 58, 138, 0.08); overflow: hidden; } .barangay-card__load-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1e3a8a, #059669); } .barangay-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .barangay-card__metrics div, .workspace-kpis div { display: grid; gap: 0.12rem; padding: 0.72rem; border-radius: 16px; background: rgba(242, 246, 255, 0.84); } .barangay-card__metrics strong, .workspace-kpis strong, .module-card__kpi { color: var(--brand-deep); font-size: 1.04rem; } .barangay-card__footer { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 0.82rem; } .barangay-card__footer .is-positive { color: #047857; } .barangay-card__footer .is-negative { color: #b91c1c; } .workspace-grid, .workspace-columns { align-items: start; } .workspace-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr); } .workspace-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .workspace-overview__hero { justify-content: space-between; align-items: start; flex-wrap: wrap; margin-bottom: 1rem; } .workspace-overview__hero h5 { font-size: 1.6rem; color: var(--brand-deep); margin-bottom: 0.28rem; } .workspace-overview__sep { margin: 0 0.35rem; color: var(--color-text-muted); } .workspace-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .workspace-panel__head { display: flex; justify-content: space-between; gap: 0.8rem; align-items: end; margin-bottom: 0.95rem; } .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .module-card { display: grid; gap: 0.35rem; padding: 0.9rem; border-radius: 18px; background: linear-gradient(180deg, #fff, #f6f9ff); border: 1px solid rgba(30, 58, 138, 0.08); text-decoration: none; transition: transform 160ms var(--ease-out), border-color 160ms var(--ease-out); } .module-card:hover { transform: translateY(-2px); text-decoration: none; border-color: rgba(5, 150, 105, 0.28); } .module-card strong, .pulse-list strong { color: var(--color-text); } .official-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .official-preview__card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.78rem; border-radius: 18px; background: rgba(246, 250, 255, 0.88); } .official-preview__avatar { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #1e3a8a, #0f766e); color: #fff; font-weight: 800; } .pulse-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pulse-card { padding: 0.95rem; border-radius: 18px; background: rgba(246, 250, 255, 0.88); display: grid; gap: 0.7rem; } .pulse-card > span:first-child { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--color-text-muted); } .pulse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .pulse-list li { display: grid; gap: 0.2rem; } .workspace-empty { padding: 1.5rem; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 255, 0.94)); border: 1px dashed rgba(30, 58, 138, 0.18); } .workspace-empty.compact { padding: 1rem; } [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } [data-reveal].is-revealed, [data-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 1180px) { .app-shell { grid-template-columns: 1fr; } .command-hero, .workspace-grid, .workspace-columns, .command-strip, .module-grid, .pulse-grid { grid-template-columns: 1fr; } .top-header { display: grid; grid-template-columns: 1fr; } .command-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } .barangay-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .workspace-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .command-hero, .command-strip, .command-directory, .official-preview, .workspace-kpis, .barangay-card__metrics, .barangay-card__footer { grid-template-columns: 1fr; } .barangay-link-grid { grid-template-columns: 1fr; } .command-hero, .command-strip__card, .workspace-panel, .workspace-overview, .barangay-card, .barangay-link { border-radius: 20px; } .command-hero { padding: 1.15rem; } .global-search-form { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .barangay-card, .barangay-link, .module-card, [data-reveal] { transition: none; } .barangay-card:hover, .barangay-link:hover, .module-card:hover { transform: none; } } .phen-hero__badge span { font-size: 0.72rem; color: #CBD5E1; letter-spacing: 0.04em; } /* Phenomenal quick-action tiles */ .phen-qa { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 0.75rem; } .phen-qa__tile { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1rem 0.9rem; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .phen-qa__tile:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -20px rgba(15, 23, 42, 0.25); border-color: var(--color-primary); text-decoration: none; } .phen-qa__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-subtle); color: var(--color-primary); font-weight: 700; font-family: var(--font-display); } .phen-qa__tile--accent .phen-qa__icon { background: var(--color-accent-subtle); color: var(--color-accent); } .phen-qa__tile--amber .phen-qa__icon { background: var(--color-highlight-subtle); color: var(--color-highlight-strong); } .phen-qa__tile--rose .phen-qa__icon { background: #FEE2E2; color: #B91C1C; } .phen-qa__title { font-weight: 600; font-size: 0.92rem; } .phen-qa__sub { font-size: 0.76rem; color: var(--color-text-muted); } /* Two-column panel grid that actually breathes */ .phen-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.25rem; } @media (max-width: 960px) { .phen-split { grid-template-columns: 1fr; } } /* Progress bars (motion-friendly) */ .phen-progress { display: grid; gap: 0.75rem; } .phen-progress__row { display: grid; grid-template-columns: 110px 1fr 60px; align-items: center; gap: 0.75rem; } .phen-progress__label { font-size: 0.8rem; color: var(--color-text-secondary); font-weight: 600; } .phen-progress__track { height: 10px; border-radius: 9999px; background: var(--color-border); overflow: hidden; position: relative; } .phen-progress__fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--color-primary), #3B82F6); transform-origin: left center; animation: phen-bar-in 900ms var(--ease-out) both; } .phen-progress__fill--accent { background: linear-gradient(90deg, var(--color-accent), #10B981); } .phen-progress__fill--amber { background: linear-gradient(90deg, #B45309, var(--color-highlight)); } .phen-progress__value { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.88rem; } @keyframes phen-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Case flow pipeline */ .phen-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; } @media (max-width: 720px) { .phen-pipe { grid-template-columns: repeat(2, 1fr); } } .phen-pipe__step { padding: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; display: flex; flex-direction: column; gap: 0.25rem; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .phen-pipe__step:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(15, 23, 42, 0.3); } .phen-pipe__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); } .phen-pipe__value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--color-text); } .phen-pipe__step--pending { border-top: 3px solid var(--color-highlight); } .phen-pipe__step--mediation { border-top: 3px solid var(--color-primary); } .phen-pipe__step--settled { border-top: 3px solid var(--color-accent); } .phen-pipe__step--referred { border-top: 3px solid var(--color-text-muted); } /* Reveal on load */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal, .phen-stat, .phen-qa__tile, .phen-pipe__step, .phen-progress__fill { animation: none !important; transition: none !important; transform: none !important; } .phen-hero__kicker::before { animation: none !important; } } /* ============================================================================= * 2026-04-25 — Dashboard polish * - Citywide coverage panel (animated progress bars) * - Population leaderboard (top 10 by residents, animated bars) * - Information-dense barangay link cards (population + captain + activity) * - Sort + filter directory toolbar * ============================================================================= */ /* Coverage panel ----------------------------------------------------------- */ .command-coverage, .command-leaderboard { padding: 1.25rem 1.35rem; border-radius: 22px; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 24px 48px -38px rgba(11, 37, 79, 0.32); display: grid; gap: 1rem; } .command-coverage__head, .command-leaderboard__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; } .command-coverage__head h4, .command-leaderboard__head h4 { margin: 0.1rem 0 0; font-size: 1.18rem; color: var(--brand-deep); } .command-coverage__legend { display: flex; gap: 0.85rem; font-size: 0.78rem; color: var(--color-text-secondary); flex-wrap: wrap; } .command-coverage__legend span { display: inline-flex; align-items: center; gap: 0.42rem; } .command-coverage__legend .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-text-muted); display: inline-block; } .command-coverage__legend .dot--accent { background: linear-gradient(90deg, var(--color-accent), #10B981); } .command-coverage__legend .dot--primary { background: linear-gradient(90deg, var(--color-primary), #3B82F6); } .command-coverage__bars { display: grid; gap: 0.65rem; } .cov-row { display: grid; grid-template-columns: 170px 1fr 200px; align-items: center; gap: 0.85rem; } .cov-row__label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-secondary); } .cov-row__track { height: 12px; border-radius: 999px; background: rgba(30, 58, 138, 0.08); overflow: hidden; position: relative; } .cov-row__fill { display: block; height: 100%; width: var(--cov-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), #3B82F6); transform-origin: left center; animation: cov-bar-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 200ms; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .cov-row__fill--accent { background: linear-gradient(90deg, var(--color-accent), #10B981); } .cov-row__val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); font-size: 0.88rem; text-align: right; } @keyframes cov-bar-in { from { transform: scaleX(0); opacity: 0.4; } to { transform: scaleX(1); opacity: 1; } } @media (max-width: 720px) { .cov-row { grid-template-columns: 1fr; gap: 0.4rem; } .cov-row__val { text-align: left; } } /* Leaderboard ------------------------------------------------------------- */ .lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; counter-reset: lb-rank; } .lb-row { display: grid; grid-template-columns: 36px minmax(140px, 1fr) minmax(0, 2fr) 90px; align-items: center; gap: 0.85rem; padding: 0.55rem 0.65rem; border-radius: 12px; transition: background-color 160ms var(--ease-out); } .lb-row:hover { background: rgba(30, 58, 138, 0.04); } .lb-row__rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--color-primary-subtle); color: var(--color-primary); font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 0.82rem; } .lb-row:nth-child(1) .lb-row__rank { background: #FEF3C7; color: #B45309; } .lb-row:nth-child(2) .lb-row__rank { background: #E2E8F0; color: #334155; } .lb-row:nth-child(3) .lb-row__rank { background: #FFEDD5; color: #C2410C; } .lb-row__name { color: var(--color-text); font-weight: 600; text-decoration: none; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb-row__name:hover { color: var(--color-primary); text-decoration: none; } .lb-row__bar { height: 10px; border-radius: 999px; background: rgba(30, 58, 138, 0.06); overflow: hidden; position: relative; } .lb-row__bar > span { display: block; height: 100%; width: var(--lb-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transform-origin: left center; animation: cov-bar-in 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 300ms; } .lb-row__count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--brand-deep); text-align: right; font-size: 0.95rem; } @media (max-width: 720px) { .lb-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0.55rem; } .lb-row__bar { grid-column: 1 / -1; } } /* Directory toolbar ------------------------------------------------------- */ .command-directory__toolbar { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; margin: 0; } .directory-search { position: relative; display: inline-flex; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.35rem 0.65rem; min-width: 240px; transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); } .directory-search:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12); } .directory-search input[type="search"] { border: 0; outline: 0; background: transparent; flex: 1; font-size: 0.9rem; color: var(--color-text); min-width: 140px; } .directory-search__count { font-size: 0.74rem; color: var(--color-text-muted); font-weight: 600; padding-left: 0.6rem; margin-left: 0.6rem; border-left: 1px solid var(--color-border); white-space: nowrap; } .directory-sort { display: inline-flex; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-surface); } .directory-sort__btn { appearance: none; background: transparent; border: 0; padding: 0.45rem 0.75rem; font-size: 0.82rem; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: background 140ms var(--ease-out), color 140ms var(--ease-out); } .directory-sort__btn + .directory-sort__btn { border-left: 1px solid var(--color-border); } .directory-sort__btn:hover { background: var(--color-primary-subtle); color: var(--color-primary); } .directory-sort__btn.is-active { background: var(--color-primary); color: #fff; } /* Information-dense barangay cards (replaces flat link grid) -------------- */ .barangay-link-grid.command-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 0.85rem; } .barangay-card-link { display: grid; gap: 0.55rem; padding: 0.85rem 1rem 0.9rem; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); position: relative; overflow: hidden; transition: transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms var(--ease-out); } .barangay-card-link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--color-primary), var(--color-accent)); opacity: 0.92; } .barangay-card-link:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(11, 37, 79, 0.45); border-color: var(--color-primary); text-decoration: none; } .barangay-card-link.is-pending-captain::before { background: linear-gradient(180deg, var(--color-highlight), #B45309); } .barangay-card-link.is-empty::before { background: linear-gradient(180deg, var(--color-text-muted), #94A3B8); } .barangay-card-link__head { display: flex; flex-direction: column; gap: 0.18rem; padding-left: 0.4rem; } .barangay-card-link__name { font-weight: 700; font-size: 0.98rem; color: var(--color-text); line-height: 1.18; } .barangay-card-link__class { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; } .barangay-card-link__metrics { display: flex; gap: 0.42rem; flex-wrap: wrap; padding-left: 0.4rem; } .bcl-metric { display: inline-flex; align-items: baseline; gap: 0.32rem; padding: 0.22rem 0.55rem; border-radius: 999px; background: var(--color-primary-subtle); color: var(--color-primary); font-size: 0.74rem; font-weight: 600; } .bcl-metric__num { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 0.82rem; } .bcl-metric__label { font-size: 0.7rem; color: inherit; opacity: 0.78; } .bcl-metric--amber { background: var(--color-highlight-subtle); color: var(--color-highlight-strong); } .bcl-metric--rose { background: #FEE2E2; color: #B91C1C; } .barangay-card-link__captain { display: flex; align-items: center; gap: 0.5rem; padding-left: 0.4rem; font-size: 0.82rem; color: var(--color-text-secondary); line-height: 1.25; } .bcl-captain__badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.06em; } .bcl-captain__name { color: var(--color-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bcl-captain__pending { font-style: italic; color: var(--color-highlight-strong); font-size: 0.78rem; } @media (max-width: 720px) { .barangay-link-grid.command-directory { grid-template-columns: 1fr; } .command-coverage, .command-leaderboard { padding: 1rem; } } @media (prefers-reduced-motion: reduce) { .cov-row__fill, .lb-row__bar > span { animation: none !important; } .barangay-card-link { transition: none; } .barangay-card-link:hover { transform: none; } } /* ──────────────────────────────────────────────────────────────────────── Households page — Create + Attach action panels Added 2026-04-26 alongside the household-create + resident-attach flow. Goal: make the action surfaces feel intentional inside a working data page (not a dropped-in form). Brand-aligned typography and chips, no blanket gradients. Inputs share the existing .stack-form / .form-row chrome from app.css/motion.css; only layout + emphasis is new here. ──────────────────────────────────────────────────────────────────── */ .hh-action-grid { margin-top: 1rem; align-items: start; } .hh-create-panel, .hh-attach-panel { position: relative; overflow: hidden; } .hh-create-panel::before, .hh-attach-panel::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--brand, #1E3A8A), var(--color-accent, #0EA5E9)); } .hh-attach-panel::before { background: linear-gradient(180deg, #B45309, #F59E0B); } .hh-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.65rem; } .hh-panel-head h4 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--brand-deep, #172554); letter-spacing: -0.01em; } .hh-panel-tag { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: #64748b; background: #F1F5F9; border-radius: 999px; padding: 0.2rem 0.65rem; font-variant-numeric: tabular-nums; } .hh-create-empty { background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 12px; padding: 1rem 1.1rem; color: #475569; font-size: 0.86rem; line-height: 1.5; } .hh-create-empty.hh-empty-good { background: #F0FDF4; border-color: #BBF7D0; color: #166534; } .hh-create-empty p { margin: 0; } .hh-create-empty strong { color: var(--brand-deep, #172554); } .hh-empty-good strong { color: #166534; } .hh-create-form, .hh-attach-form { display: flex; flex-direction: column; gap: 0.65rem; } .hh-form-help { font-size: 0.76rem; color: #64748b; margin: 0.1rem 0 0; line-height: 1.45; } .hh-form-help code { background: #EEF2FF; color: var(--brand-deep, #172554); padding: 0 0.3rem; border-radius: 4px; font-size: 0.72rem; } .hh-btn-primary { align-self: flex-start; background: linear-gradient(135deg, var(--brand, #1E3A8A) 0%, #3B5BDB 100%); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: 0.6rem 1.15rem; font-size: 0.86rem; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 14px rgba(30, 58, 138, 0.18); } .hh-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 22px rgba(30, 58, 138, 0.28); } .hh-btn-primary:focus-visible { outline: 2px solid var(--color-accent, #0EA5E9); outline-offset: 3px; } .hh-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; } .hh-attach-panel .hh-btn-primary { background: linear-gradient(135deg, #B45309 0%, #F59E0B 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 14px rgba(180, 83, 9, 0.22); } .hh-attach-panel .hh-btn-primary:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 8px 22px rgba(180, 83, 9, 0.32); } @media (max-width: 720px) { .hh-action-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hh-btn-primary { transition: none; } .hh-btn-primary:hover:not(:disabled) { transform: none; } } /* ── Household registry actions (Edit / Deactivate) ──────────────────────── */ .hh-actions-col { width: 1%; white-space: nowrap; text-align: right; } .hh-actions-cell { text-align: right; white-space: nowrap; display: flex; gap: 6px; justify-content: flex-end; align-items: center; } .hh-actions-cell .hh-deactivate-form { margin: 0; padding: 0; display: inline-flex; } .hh-row-btn { appearance: none; border: 1px solid rgba(15, 23, 42, 0.14); background: #ffffff; color: #1e293b; font: 600 0.72rem/1 'Inter', system-ui, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .hh-row-btn:hover { background: #f1f5f9; } .hh-row-btn:focus-visible { outline: 2px solid var(--brand-primary, #4f46e5); outline-offset: 2px; } .hh-row-btn--edit { border-color: rgba(79, 70, 229, 0.35); color: #3730a3; } .hh-row-btn--edit:hover { background: #eef2ff; border-color: rgba(79, 70, 229, 0.55); } .hh-row-btn--deactivate { border-color: rgba(190, 18, 60, 0.35); color: #9f1239; } .hh-row-btn--deactivate:hover { background: #fff1f2; border-color: rgba(190, 18, 60, 0.6); } .hh-row-btn--locked { cursor: not-allowed; background: #f8fafc; border-color: rgba(15, 23, 42, 0.10); color: #94a3b8; } /* ── Edit Household modal ────────────────────────────────────────────────── */ .hh-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 1rem; } .hh-modal[hidden] { display: none; } .hh-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .hh-modal__panel { position: relative; background: #ffffff; border-radius: 14px; box-shadow: 0 24px 64px rgba(15, 23, 42, 0.32); width: min(560px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.25rem 1.4rem 1.4rem; border: 1px solid rgba(15, 23, 42, 0.08); } .hh-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .hh-modal__head h4 { margin: 0; font-size: 1.05rem; color: #0f172a; } .hh-modal__close { appearance: none; background: transparent; border: 0; font-size: 1.5rem; line-height: 1; color: #64748b; cursor: pointer; padding: 0 4px; } .hh-modal__close:hover { color: #0f172a; } .hh-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 0.6rem; } body.hh-modal-open { overflow: hidden; } @media (max-width: 540px) { .hh-actions-cell { flex-wrap: wrap; gap: 4px; } .hh-modal__panel { padding: 1rem; } } /* ── Political-data activation gate (RA 10173 second-factor) ───────────── */ .political-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; } .political-status .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; } .political-status--locked { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; } .political-status--locked .dot { background: #f59e0b; color: #f59e0b; } .political-status--unlocked { background: rgba(124, 58, 237, 0.18); color: #c4b5fd; } .political-status--unlocked .dot { background: #10b981; color: #10b981; } .political-status .lock-link { margin-left: 4px; color: inherit; text-decoration: underline; opacity: 0.85; } .political-status .lock-link:hover { opacity: 1; } /* Tiny lock icon — sole sidebar surface when political data is locked. */ .nav-lock-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: 4px auto 0; border-radius: 8px; color: rgba(245, 158, 11, 0.95); background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.35); text-decoration: none; transition: transform 140ms ease, background 160ms ease, color 160ms ease; cursor: pointer; } .nav-lock-icon:hover { background: rgba(245, 158, 11, 0.25); color: #fff; transform: translateY(-1px) scale(1.05); } .nav-lock-icon:focus-visible { outline: 2px solid #fbbf24; outline-offset: 2px; } /* ── Locator map popup (sppagarchive-style) ─────────────────────────────── */ .locator-pop { font-family: inherit; line-height: 1.45; color: #0f172a; } .locator-pop__name { font-size: 14px; font-weight: 700; margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.02em; color: #1e3a8a; } .locator-pop__addr { font-size: 12px; margin: 0 0 6px; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; } .locator-pop__coords { font-size: 11px; margin: 0 0 6px; color: #0f8a5f; font-variant-numeric: tabular-nums; } .locator-pop__birth { display: block; font-size: 12px; margin: 0 0 4px; color: #92400e; } .locator-pop__birth .ico { margin-right: 4px; } .locator-pop__bday-today { color: #be123c; font-weight: 700; font-style: normal; } .locator-pop__bday-soon { color: #c2410c; font-style: normal; } .locator-pop__bday-past { color: #6b7280; font-style: normal; } .locator-pop__class { display: block; font-size: 12px; margin: 4px 0 8px; color: #1e293b; } .locator-pop__class.subtle { color: #94a3b8; } .locator-pop__details { display: inline-block; font-size: 12px; font-weight: 600; color: #1d4ed8; text-decoration: none; border-bottom: 1px dashed #1d4ed8; margin-top: 4px; } .locator-pop__details:hover { color: #1e3a8a; border-bottom-style: solid; } .locator-pop__hint { display: block; margin-top: 8px; font-size: 10px; color: #94a3b8; font-style: italic; } /* ── Assistance ledger on resident profile ──────────────────────────────── */ .profile-assistance__empty { padding: 1rem; background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 10px; color: #64748b; font-size: 0.92rem; } .profile-assistance__total { display: inline-flex; gap: 8px; align-items: baseline; font-size: 0.95rem; color: #0f172a; margin-bottom: 0.6rem; } .profile-assistance__total strong { font-size: 1.4rem; color: #0f8a5f; } .profile-assistance__table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .profile-assistance__table th, .profile-assistance__table td { padding: 8px 10px; border-bottom: 1px solid #e2e8f0; text-align: left; font-size: 0.86rem; } .profile-assistance__table th { background: #f1f5f9; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.74rem; } .profile-assistance__amount { font-variant-numeric: tabular-nums; font-weight: 600; color: #0f8a5f; } .profile-assistance__status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .profile-assistance__status--released { background: #d1fae5; color: #065f46; } .profile-assistance__status--approved { background: #dbeafe; color: #1e3a8a; } .profile-assistance__status--pending { background: #fef3c7; color: #92400e; } .profile-assistance__status--cancelled { background: #fee2e2; color: #991b1b; } /* ── Household financial roll-up banner (Votracker pattern) ─────────────── */ .profile-hh-roll { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%); border: 1px solid #86efac; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; display: grid; gap: 8px; } .profile-hh-roll__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 0.92rem; } .profile-hh-roll__eyebrow { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #065f46; background: #d1fae5; padding: 3px 9px; border-radius: 999px; } .profile-hh-roll__totals { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.95rem; color: #064e3b; } .profile-hh-roll__totals strong { font-size: 1.15rem; color: #047857; } .profile-hh-roll__sep { color: #6ee7b7; } .profile-hh-roll__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .profile-hh-roll__chips .chip { font-size: 0.75rem; background: rgba(16, 185, 129, 0.12); color: #065f46; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(16, 185, 129, 0.3); } /* ── Households page financial column ───────────────────────────────────── */ .hh-fin { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; font-size: 0.85rem; } .hh-fin__amount { font-weight: 700; color: #047857; font-variant-numeric: tabular-nums; } .hh-fin__pipeline { font-size: 0.72rem; color: #92400e; } .hh-fin__count { font-size: 0.72rem; color: #64748b; } .hh-fin--empty { color: #94a3b8; font-style: italic; font-size: 0.78rem; }