/* ============================================================================ The River Church — Global Theme System (v2) Light + Dark mode tokens, modern dashboard components, Phosphor icon look. Loaded globally via usersc/includes/head_tags.php. Survives UserSpice upgrades. Theme is toggled by setting (see head_tags inline no-FOUC script + footer.php toggle button). ========================================================================== */ /* ---------- Global mobile guard ---------- Never allow a stray element (anywhere in the page, incl. the UserSpice nav/ footer chrome outside .rc-dash) to push the document into a horizontal scroll on phones — the classic "page is a few px wider than the screen and rubber- bands left/right" bug. overflow-x:clip clips only the x-axis, so it does NOT break vertical scrolling or position:sticky (unlike overflow-x:hidden). */ html, body { overflow-x: clip; max-width: 100%; } /* ---------- Design tokens : LIGHT (default) ---------- */ :root { /* Brand */ --rc-brand: #2eaf96; --rc-brand-600: #27997f; --rc-brand-700: #1f8169; --rc-brand-soft: #e8f7f3; --rc-navy: #0f172a; /* Semantic signal colors (RESERVED meanings) */ --rc-action: #d97706; /* amber = action required / awaiting you */ --rc-action-soft: #fef3e2; --rc-danger: #dc2626; /* red = urgent / overdue / deny */ --rc-danger-soft: #fee2e2; --rc-info: #2563eb; /* blue = informational */ --rc-info-soft: #e8f0fe; --rc-ok: #16a34a; /* green = complete / good */ --rc-ok-soft: #e7f6ec; /* Surfaces */ --rc-bg: #f4f6f8; /* page background */ --rc-surface: #ffffff; /* card surface */ --rc-surface-2: #f8fafc; /* subtle inset surface */ --rc-surface-3: #eef2f6; /* hover / track */ --rc-text: #0f172a; --rc-text-soft: #475569; --rc-text-muted: #94a3b8; --rc-border: #e3e8ee; --rc-border-soft: #eef2f6; /* Elevation */ --rc-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04); --rc-shadow: 0 2px 6px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05); --rc-shadow-lg: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06); /* Geometry */ --rc-radius: 14px; --rc-radius-sm: 10px; --rc-radius-lg: 20px; --rc-gap: 1rem; --rc-maxw: 1560px; /* wider than the old 1400 to reclaim gutters */ } /* ---------- Design tokens : DARK ---------- */ html[data-theme="dark"] { --rc-brand: #34c3a6; --rc-brand-600: #2bb097; --rc-brand-700: #229684; --rc-brand-soft: #123029; --rc-navy: #060b16; --rc-action: #f59e0b; --rc-action-soft: #3a2a0c; --rc-danger: #f87171; --rc-danger-soft: #3a1717; --rc-info: #60a5fa; --rc-info-soft: #16243d; --rc-ok: #4ade80; --rc-ok-soft: #11301d; --rc-bg: #0b1120; --rc-surface: #131c2e; --rc-surface-2: #18233a; --rc-surface-3: #1f2c45; --rc-text: #e6edf6; --rc-text-soft: #aab8cc; --rc-text-muted: #6b7a90; --rc-border: #24314a; --rc-border-soft: #1c2740; --rc-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --rc-shadow: 0 2px 8px rgba(0,0,0,.45); --rc-shadow-lg: 0 10px 30px rgba(0,0,0,.55); } /* ---------- Global dark-mode bridge for existing Bootstrap 5.2 pages ---------- spacelab is BS 5.2 (no native dark mode). When dark is on, remap the core Bootstrap variables so legacy pages get a reasonable dark treatment without per-page edits. Conservative: backgrounds, text, borders, cards, tables. */ html[data-theme="dark"] body { background: var(--rc-bg) !important; color: var(--rc-text); --bs-body-bg: var(--rc-bg); --bs-body-color: var(--rc-text); --bs-border-color: var(--rc-border); --bs-secondary-bg: var(--rc-surface-2); --bs-tertiary-bg: var(--rc-surface-3); --bs-emphasis-color: var(--rc-text); --bs-secondary-color: var(--rc-text-soft); --bs-heading-color: var(--rc-text); } html[data-theme="dark"] .card, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .accordion-item { background-color: var(--rc-surface); color: var(--rc-text); border-color: var(--rc-border); } html[data-theme="dark"] .table { --bs-table-color: var(--rc-text); --bs-table-bg: transparent; --bs-table-border-color: var(--rc-border); } html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--rc-text); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--rc-surface-2); color: var(--rc-text); border-color: var(--rc-border); } html[data-theme="dark"] .form-control::placeholder { color: var(--rc-text-muted); } html[data-theme="dark"] .text-muted { color: var(--rc-text-muted) !important; } html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--rc-surface) !important; } html[data-theme="dark"] .border { border-color: var(--rc-border) !important; } html[data-theme="dark"] a { color: var(--rc-brand); } /* The blanket dark `a{color:brand}` above turns the white labels on the top-bar Calendar/Mega Form buttons teal (invisible on their gradients). Force white, and lighten the calendar gradient's dark end so its left half doesn't vanish against the dark page background. */ html[data-theme="dark"] .rc-calbar, html[data-theme="dark"] .rc-calbar .rc-calbar-txt, html[data-theme="dark"] .rc-calbar .rc-calbar-sub, html[data-theme="dark"] .rc-calbar .rc-calbar-btn { color:#fff; } html[data-theme="dark"] .rc-calbar:not(.rc-megabar){ background:linear-gradient(100deg, #243047, var(--rc-brand-700)); border:1px solid var(--rc-border); } html[data-theme="dark"] .rc-calbar a.rc-calbar-btn{ background:rgba(255,255,255,.16); } html[data-theme="dark"] .rc-megabar{ border:1px solid rgba(255,255,255,.12); } html[data-theme="dark"] .btn-outline-secondary { color: var(--rc-text-soft); border-color: var(--rc-border); } html[data-theme="dark"] hr { border-color: var(--rc-border); } /* smooth the flip */ body, .card, .rc-card, .rc-tile { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* ===================== Reusable icon look (promoted from index.php) ===== */ .icon-badge { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; background: var(--rc-brand-soft); color: var(--rc-brand-700); font-size:1.15rem; flex-shrink:0; } .icon-badge.is-action { background: var(--rc-action-soft); color: var(--rc-action); } .icon-badge.is-danger { background: var(--rc-danger-soft); color: var(--rc-danger); } .icon-badge.is-info { background: var(--rc-info-soft); color: var(--rc-info); } .icon-badge.is-ok { background: var(--rc-ok-soft); color: var(--rc-ok); } /* ===================== Theme toggle button (nav) ======================= */ .rc-theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:none; background:transparent; color:#fff; opacity:.85; cursor:pointer; font-size:1.4rem; line-height:1; border-radius:10px; } .rc-theme-toggle:hover { opacity:1; background:rgba(255,255,255,.12); } /* ============================================================================ DASHBOARD V2 COMPONENTS (prefix rc-dash / rc-) ========================================================================== */ .rc-dash { max-width: var(--rc-maxw); margin: 0 auto; padding: 1.25rem 1.25rem 4rem; color: var(--rc-text); /* Safety net: never let a slightly-too-wide child (long unbreakable name/email/ workflow title in real data) push the whole page into a horizontal scroll. overflow-x:clip clips only the x-axis — vertical stays visible, so dropdowns (PCO search results) and sticky bits are unaffected. */ overflow-x: clip; } @media (max-width:640px){ .rc-dash{ padding:.75rem .75rem 3rem; } } /* Greeting / top row */ .rc-dash-top { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; } .rc-dash-hello { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; margin:0; color:var(--rc-text); } .rc-dash-hello small { display:block; font-size:.85rem; font-weight:500; color:var(--rc-text-muted); margin-top:.1rem; } .rc-dash-top .rc-spacer { flex:1 1 auto; } /* Live search box */ .rc-search { position:relative; flex:1 1 320px; max-width:520px; } .rc-search input { width:100%; height:44px; border-radius:999px; border:1px solid var(--rc-border); background:var(--rc-surface); padding:0 1rem 0 2.6rem; color:var(--rc-text); font-size:.95rem; box-shadow:var(--rc-shadow-sm); } .rc-search input:focus { outline:none; border-color:var(--rc-brand); box-shadow:0 0 0 3px var(--rc-brand-soft); } .rc-search .rc-search-ico { position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--rc-text-muted); font-size:1.2rem; } .rc-search-results { position:absolute; top:50px; left:0; right:0; z-index:1200; background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius-sm); box-shadow:var(--rc-shadow-lg); max-height:380px; overflow:auto; display:none; } .rc-search-results a { display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; color:var(--rc-text); text-decoration:none; border-bottom:1px solid var(--rc-border-soft); } .rc-search-results a:last-child{ border-bottom:none; } .rc-search-results a:hover, .rc-search-results a.active { background:var(--rc-surface-3); } .rc-search-results .rc-sr-name{ font-weight:600; } .rc-search-results .rc-sr-meta{ font-size:.8rem; color:var(--rc-text-muted); margin-left:auto; } /* Slim calendar strip (replaces the big hero) */ .rc-calbar { display:flex; align-items:center; gap:.75rem; background:linear-gradient(100deg, var(--rc-navy), var(--rc-brand-700)); color:#fff; border-radius:var(--rc-radius); padding:.7rem 1rem; margin-bottom:1.25rem; box-shadow:var(--rc-shadow); } .rc-calbar i.lead-ico{ font-size:1.5rem; opacity:.9; } .rc-calbar .rc-calbar-txt{ font-weight:600; } .rc-calbar .rc-calbar-sub{ font-size:.8rem; opacity:.8; font-weight:400; } .rc-calbar a.rc-calbar-btn{ margin-left:auto; background:rgba(255,255,255,.15); color:#fff; text-decoration:none; padding:.4rem .9rem; border-radius:999px; font-weight:600; font-size:.85rem; white-space:nowrap; } .rc-calbar a.rc-calbar-btn:hover{ background:rgba(255,255,255,.28); } /* Top row: greeting + Calendar + Mega Form. Desktop = all one row; mobile = greeting on its own row, Calendar + Mega Form sharing the next row. */ .rc-topbar{ display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:1.25rem; } .rc-topbar-hello{ flex:1 1 100%; margin:0; } .rc-topbar .rc-calbar{ flex:1 1 0; min-width:0; margin-bottom:0; padding:.6rem .9rem; } .rc-topbar .rc-calbar .rc-calbar-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-megabar{ background:linear-gradient(100deg, var(--rc-brand-700), var(--rc-brand)) !important; } @media (min-width:721px){ .rc-topbar-hello{ flex:1 1 auto; } .rc-topbar .rc-calbar{ flex:0 0 auto; } } /* Condensed PCO quick-link strip + icon-only buttons */ .rc-pcobar{ align-items:center; } .rc-pcobar a.rc-pco-icon{ padding:.4rem .55rem; } .rc-pcobar a.rc-pco-icon i{ font-size:1.05rem; } /* Mobile collapsible-menu toggle buttons (hidden on desktop). The .rc-mini.rc-menu-toggle selector outranks the later .rc-mini rule so display:none actually wins on desktop. */ .rc-mini.rc-menu-toggle{ display:none; align-items:center; gap:.4rem; } .rc-menu-toggle .rc-menu-caret{ transition:transform .18s ease; } .rc-menu-toggle.open .rc-menu-caret{ transform:rotate(180deg); } /* ===== Mobile responsive (phones) ===== */ @media (max-width:720px){ .rc-mini.rc-menu-toggle{ display:inline-flex; } /* the whole Calendar/Mega bar is tappable — drop the "Open" pill so the label fits */ .rc-topbar .rc-calbar-btn{ display:none; } .rc-topbar .rc-calbar{ padding:.7rem .75rem; } /* collapsible bodies: hidden until their toggle adds .open */ #rcPcoLinks{ display:none; flex-basis:100%; } #rcPcoLinks.open{ display:flex; } #megaLaunchForms{ display:none; } #megaLaunchForms.open{ display:grid; } #adminToolsRow{ display:none; } #adminToolsRow.open{ display:flex; } /* PCO people search is always open on mobile; hide the desktop magnifier + close */ .rc-pcobar .rc-pco-search{ display:flex !important; flex:1 1 100%; max-width:none; } .rc-pco-magnifier, .rc-pco-close{ display:none !important; } /* tiles flagged to hide on phones (e.g. My Workflows — already in Action Center) */ .rc-hide-mobile{ display:none !important; } /* keep row action buttons (+ New / Open / counts) visible; truncate long labels */ .rc-line{ gap:.5rem; } .rc-line-link{ min-width:0; } .rc-line-link .rc-line-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rc-line .rc-mini{ flex:0 0 auto; } } .rc-pco-links{ display:flex; flex-wrap:wrap; gap:.55rem; flex:1 1 auto; } .rc-pco-search-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto; border:1px solid var(--rc-border); background:var(--rc-surface); color:var(--rc-text-soft); border-radius:999px; cursor:pointer; font-size:1.1rem; } .rc-pco-search-btn:hover{ border-color:var(--rc-brand); color:var(--rc-brand-700); } .rc-pcobar .rc-pco-search{ flex:1 1 auto; max-width:none; } /* ----- Section heading ----- */ .rc-sec-head { display:flex; align-items:center; gap:.6rem; margin:1.6rem 0 .85rem; } .rc-sec-head h2 { font-size:1.05rem; font-weight:700; letter-spacing:.01em; margin:0; color:var(--rc-text); display:flex; align-items:center; gap:.5rem; } .rc-sec-head .rc-count-pill { font-size:.78rem; font-weight:700; padding:.12rem .55rem; border-radius:999px; background:var(--rc-action); color:#fff; } .rc-sec-head .rc-count-pill.zero { background:var(--rc-surface-3); color:var(--rc-text-muted); } .rc-sec-head .rc-sec-line { flex:1 1 auto; height:1px; background:var(--rc-border); } /* ----- Generic card ----- */ .rc-card { background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius); box-shadow:var(--rc-shadow-sm); } /* ----- Action Center : prioritized "act on" list ----- */ .rc-actioncenter { margin-bottom:.5rem; overflow:hidden; } .rc-ac-row { display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; border-bottom:1px solid var(--rc-border-soft); text-decoration:none; color:var(--rc-text); } .rc-ac-row:last-child{ border-bottom:none; } .rc-ac-row:hover{ background:var(--rc-surface-3); } /* the middle text block (icon | TEXT | count | chevron) must be allowed to shrink so a long unbreakable token wraps instead of widening the row past the viewport */ /* only the unclassed middle text block grows — NOT the icon-badge / count spans (both are direct children too; matching them stretched them on desktop) */ .rc-ac-row > span:not([class]){ min-width:0; flex:1 1 auto; } .rc-ac-row .rc-ac-label{ font-weight:600; overflow-wrap:anywhere; } .rc-ac-row .rc-ac-sub{ font-size:.8rem; color:var(--rc-text-muted); overflow-wrap:anywhere; } .rc-ac-row .rc-ac-count{ margin-left:auto; min-width:30px; height:30px; padding:0 .55rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; font-size:.9rem; background:var(--rc-action-soft); color:var(--rc-action); } .rc-ac-row .rc-ac-count.urgent{ background:var(--rc-danger-soft); color:var(--rc-danger); } .rc-ac-row i.rc-ac-chev{ color:var(--rc-text-muted); font-size:1rem; } .rc-ac-empty{ padding:1.4rem 1rem; text-align:center; color:var(--rc-text-muted); } .rc-ac-empty i{ font-size:1.8rem; color:var(--rc-ok); display:block; margin-bottom:.3rem; } /* ----- Metric tiles (PCO etc.) : dense, 2-up mobile ----- */ .rc-tiles { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); } .rc-tile { background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius); padding:.9rem; box-shadow:var(--rc-shadow-sm); display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:var(--rc-text); transition:transform .12s ease, box-shadow .12s ease; } .rc-tile:hover{ transform:translateY(-2px); box-shadow:var(--rc-shadow); color:var(--rc-text); } .rc-tile .rc-tile-top{ display:flex; align-items:center; gap:.5rem; } .rc-tile .rc-tile-label{ font-size:.82rem; color:var(--rc-text-soft); font-weight:600; } .rc-tile .rc-tile-num{ font-size:1.75rem; font-weight:800; line-height:1; letter-spacing:-.02em; } .rc-tile .rc-tile-foot{ font-size:.76rem; color:var(--rc-text-muted); } .rc-tile.is-action .rc-tile-num{ color:var(--rc-action); } .rc-tile.is-danger .rc-tile-num{ color:var(--rc-danger); } @media (max-width:640px){ .rc-tiles{ grid-template-columns:repeat(2,1fr); gap:.6rem; } .rc-tile{ padding:.75rem; } .rc-tile .rc-tile-num{ font-size:1.5rem; } } /* ----- Accordion section (summary card → expand condensed rows) ----- */ .rc-acc { margin-bottom:.75rem; overflow:hidden; } .rc-acc > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; user-select:none; } .rc-acc > summary::-webkit-details-marker{ display:none; } .rc-acc > summary .icon-badge{ width:38px; height:38px; } .rc-acc > summary .rc-acc-title{ font-weight:700; } .rc-acc > summary .rc-acc-sub{ font-size:.8rem; color:var(--rc-text-muted); } .rc-acc > summary .rc-acc-right{ margin-left:auto; display:flex; align-items:center; gap:.6rem; } .rc-acc > summary .rc-acc-chev{ color:var(--rc-text-muted); transition:transform .18s ease; } .rc-acc[open] > summary .rc-acc-chev{ transform:rotate(90deg); } .rc-acc .rc-acc-body{ border-top:1px solid var(--rc-border-soft); } /* condensed line item rows inside accordion */ .rc-line { display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem; border-bottom:1px solid var(--rc-border-soft); text-decoration:none; color:var(--rc-text); } .rc-line:last-child{ border-bottom:none; } .rc-line:hover{ background:var(--rc-surface-3); } .rc-line-link{ display:flex; align-items:center; gap:.75rem; flex:1 1 auto; min-width:0; text-decoration:none; color:inherit; } .rc-line-link .rc-line-count{ margin-left:auto; } .rc-line .rc-line-ico{ color:var(--rc-text-soft); font-size:1.15rem; width:1.4rem; text-align:center; } .rc-line .rc-line-main{ display:flex; flex-direction:column; min-width:0; } .rc-line .rc-line-label{ font-weight:600; font-size:.92rem; } .rc-line .rc-line-sub{ font-size:.78rem; color:var(--rc-text-muted); } .rc-line .rc-line-right{ margin-left:auto; display:flex; align-items:center; gap:.5rem; } .rc-line .rc-line-count{ min-width:26px; height:24px; padding:0 .45rem; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; font-weight:700; font-size:.8rem; background:var(--rc-action-soft); color:var(--rc-action); } .rc-line .rc-line-count.zero{ background:var(--rc-surface-3); color:var(--rc-text-muted); } /* small inline new/quick buttons */ .rc-mini { display:inline-flex; align-items:center; gap:.3rem; padding:.32rem .7rem; border-radius:999px; font-size:.8rem; font-weight:600; text-decoration:none; border:1px solid var(--rc-border); color:var(--rc-text-soft); background:var(--rc-surface); } .rc-mini:hover{ border-color:var(--rc-brand); color:var(--rc-brand-700); } .rc-mini.primary{ background:var(--rc-brand); color:#fff; border-color:var(--rc-brand); } .rc-mini.primary:hover{ background:var(--rc-brand-600); color:#fff; } /* request launcher grid (quick "+ New" chips) */ .rc-launch { display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } .rc-launch a { display:flex; align-items:center; gap:.6rem; padding:.7rem .85rem; text-decoration:none; background:var(--rc-surface); border:1px solid var(--rc-border); border-radius:var(--rc-radius-sm); color:var(--rc-text); font-weight:600; font-size:.9rem; } .rc-launch a:hover{ border-color:var(--rc-brand); box-shadow:var(--rc-shadow-sm); } .rc-launch a .icon-badge{ width:30px; height:30px; font-size:1rem; } .rc-launch a.mega { grid-column:1/-1; background:linear-gradient(100deg,var(--rc-brand-700),var(--rc-brand)); color:#fff; border:none; } .rc-launch a.mega .icon-badge{ background:rgba(255,255,255,.2); color:#fff; } /* admin tool pills */ .rc-toolrow{ display:flex; flex-wrap:wrap; gap:.55rem; } .rc-toolrow a{ display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .9rem; border-radius:999px; background:var(--rc-surface); border:1px solid var(--rc-border); color:var(--rc-text); text-decoration:none; font-weight:600; font-size:.86rem; } .rc-toolrow a:hover{ border-color:var(--rc-brand); color:var(--rc-brand-700); } /* resources drawer */ .rc-drawer summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; font-weight:700; color:var(--rc-text-soft); } .rc-drawer summary::-webkit-details-marker{ display:none; } .rc-drawer summary .rc-acc-chev{ margin-left:auto; transition:transform .18s ease; color:var(--rc-text-muted); } .rc-drawer[open] summary .rc-acc-chev{ transform:rotate(90deg); } .rc-res-grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); padding:.5rem 1rem 1.25rem; } .rc-res-col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; color:var(--rc-text-muted); margin:0 0 .5rem; display:flex; align-items:center; gap:.4rem; } .rc-res-col a{ display:block; padding:.25rem 0; color:var(--rc-text-soft); text-decoration:none; font-size:.9rem; } .rc-res-col a:hover{ color:var(--rc-brand-700); } /* utility */ .rc-hidden-badge{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:var(--rc-danger-soft); color:var(--rc-danger); padding:.1rem .4rem; border-radius:6px; } .rc-muted{ color:var(--rc-text-muted); } /* ============================================================================ SHARED FORM + LIST COMPONENT KIT One source of truth for every request FORM and "my requests" LIST page, so they all match the dashboard. All colors use --rc-* tokens → automatic dark mode. This replaces the per-page