/* ---------- Theming ---------- Only brand/decorative colors are themed (nav bar, card accent borders, links/primary buttons) -- status colors (green=good, red=delete/critical, yellow=warning) and chart colors deliberately stay fixed across every theme, so they keep meaning what they mean regardless of a user's preference. See includes/themes.php for the PHP-side list (kept in sync with the seed colors below by hand) and account.php for where a user picks one; applied via a `data-theme` attribute on in includes/header.php. Each theme only needs to override the three seed variables below -- everything else (hover states, light background tints, the home-hero gradient) is derived from them with color-mix() so it recomputes automatically per theme. */ :root { --brand-dark: #1c2733; --link: #0056b3; --accent: #e67e22; --link-hover: color-mix(in srgb, var(--link) 75%, black); --link-tint: color-mix(in srgb, var(--link) 8%, var(--surface-bg)); --link-tint-strong: color-mix(in srgb, var(--link) 15%, var(--surface-bg)); --link-focus-ring: color-mix(in srgb, var(--link) 15%, transparent); --link-on-dark: color-mix(in srgb, var(--link) 45%, white); --brand-dark-mid: color-mix(in srgb, var(--brand-dark), white 18%); --brand-dark-soft: color-mix(in srgb, var(--brand-dark), white 30%); /* Neutral/surface colors -- independent of the brand seeds above, these are the light/dark axis (see account.php's Light/Dark picker, applied via a `data-mode="dark"` attribute on below). The nav bar is NOT included here on purpose: it's already a dark brand color in every theme, so it doesn't need to change between light and dark page mode. */ --page-bg: #fff; --page-text: #222; --surface-bg: #fff; --surface-alt: #f7f9fb; --surface-border: #e1e6eb; --input-border: #ccc; --text-muted: #777; /* Heading/label text on a card or light surface -- in light mode this is the theme's own brand color (so headings pick up a bit of the chosen theme's personality, e.g. Steel Blue's headings read as deep blue); in dark mode --brand-dark itself is too dark to read against a dark surface, so this falls back to the page's own (light) text color instead. Never use --brand-dark directly for text color -- use this. */ --heading-text: var(--brand-dark); } html[data-theme="charcoal-teal"] { --brand-dark: #263238; --link: #0277bd; --accent: #00897b; } html[data-theme="steel-blue"] { --brand-dark: #1e3a5f; --link: #1565c0; --accent: #f39c12; } html[data-theme="forest-rust"] { --brand-dark: #1b3a2f; --link: #2e7d32; --accent: #c0562c; } html[data-mode="dark"] { color-scheme: dark; /* hints the browser to draw native controls (scrollbars, checkboxes, date pickers) dark too */ --page-bg: #14181d; --page-text: #d7dce2; --surface-bg: #1c222b; --surface-alt: #232a34; --surface-border: #333c48; --input-border: #454f5c; --text-muted: #98a2ad; --heading-text: var(--page-text); } /* ---------- Base ---------- */ body { font-family: Arial, sans-serif; margin: 0; background: var(--page-bg); color: var(--page-text); } .page-content { margin: 2rem; } a { color: var(--link); } /* ---------- Top navigation ---------- */ .main-nav { display: flex; align-items: center; gap: 1.5rem; background: var(--brand-dark); color: #fff; padding: 0 1.5rem; height: 56px; flex-wrap: wrap; } .nav-brand { font-weight: bold; font-size: 1.05rem; margin-right: 1rem; color: #fff; text-decoration: none; } .nav-brand:hover { color: var(--link-on-dark); } .nav-menu { list-style: none; display: flex; gap: 0.25rem; margin: 0; padding: 0; flex: 1; } .nav-item { position: relative; } .nav-link, .nav-toggle { display: inline-flex; align-items: center; gap: 4px; color: #dbe4ee; text-decoration: none; background: none; border: none; font-size: 0.95rem; font-family: inherit; padding: 8px 12px; border-radius: 4px; cursor: pointer; } .nav-link:hover, .nav-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav-item.active > .nav-link, .nav-item.active > .nav-toggle { background: rgba(255,255,255,0.12); color: #fff; } .nav-caret { font-size: 0.6rem; } .submenu { display: none; position: absolute; top: 100%; left: 0; background: var(--surface-bg); color: var(--page-text); list-style: none; margin: 4px 0 0; padding: 6px 0; min-width: 180px; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); z-index: 20; } .nav-item.open .submenu { display: block; } .submenu-link { display: block; padding: 8px 14px; color: var(--page-text); text-decoration: none; font-size: 0.9rem; } .submenu-link:hover { background: var(--surface-alt); } .submenu-link.active { color: var(--link); font-weight: bold; } .submenu-divider { height: 0; margin: 6px 0; border-top: 1px solid var(--surface-border); } .nav-user { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: #dbe4ee; } .nav-role { color: #93a4b8; font-size: 0.8rem; } .nav-account-link { color: #dbe4ee; padding: 6px 10px; border-radius: 4px; text-decoration: none; white-space: nowrap; } .nav-account-link:hover, .nav-account-link.active { background: rgba(255,255,255,0.1); color: #fff; } .nav-logout { color: #dbe4ee; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 4px; text-decoration: none; } .nav-logout:hover { background: rgba(255,255,255,0.1); } /* ---------- Tables (list pages) ---------- */ table { border-collapse: separate; border-spacing: 0; width: 100%; max-width: 800px; border: 1px solid var(--surface-border); border-radius: 6px; overflow: hidden; } th, td { border-bottom: 1px solid var(--surface-border); border-right: 1px solid var(--surface-border); padding: 9px 12px; text-align: left; } th:last-child, td:last-child { border-right: none; } tr:last-child td { border-bottom: none; } th { background: var(--brand-dark); color: #fff; font-weight: 600; border-bottom: 2px solid var(--link); } tbody tr:nth-child(even) { background: var(--surface-alt); } tbody tr:hover { background: var(--link-tint); } tr.filter-row td { padding: 4px 6px; background: var(--surface-alt); } tr.filter-row:hover { background: var(--surface-alt); } tr.filter-row input { width: 100%; box-sizing: border-box; padding: 4px 6px; font-size: 0.9rem; border: 1px solid var(--input-border); border-radius: 3px; background: var(--surface-bg); color: var(--page-text); } tr.no-match td { text-align: center; color: var(--text-muted); font-style: italic; background: var(--surface-bg); } th .sort-link { display: flex; justify-content: space-between; align-items: center; color: inherit; text-decoration: none; cursor: pointer; user-select: none; } th .sort-link:hover { color: var(--link-on-dark); } th .sort-arrow { font-size: 0.7rem; margin-left: 6px; color: var(--link-on-dark); } th.sorted-active { background: var(--link-hover); } /* Right-justify phase code + currency columns -- both the data cells and their header label, so the header sits above the right-justified numbers below it instead of drifting to the opposite side. tabular-nums keeps digits a fixed width so amounts line up vertically. */ .align-right { text-align: right; font-variant-numeric: tabular-nums; } th.align-right .sort-link { justify-content: flex-end; } /* ---------- Report pages (report_*.php) ---------- */ .report-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; margin-bottom: 14px; } .report-filters .field-inline { margin: 0; } .report-filters label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 3px; } .report-filters select, .report-filters input { width: auto; padding: 6px 8px; } .report-filters .btn-save, .report-filters .btn-cancel { padding: 7px 14px; } /* Open PO Aging: how long a PO's been sitting outstanding */ tr.aging-warn td { background: #fff6e0; } tr.aging-critical td { background: #fdecea; } .aging-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 4px; } .aging-swatch.aging-warn { background: #fff6e0; border: 1px solid #e6c568; } .aging-swatch.aging-critical { background: #fdecea; border: 1px solid #f5c2c0; } /* Job Cost Summary: grand-total footer row */ .report-totals-row td { border-top: 2px solid var(--link); background: var(--link-tint); font-weight: 600; } /* Report charts -- collapsed by default (
, native/no-JS-required toggle) so the table gets the full page by default; same card look as the home page's .home-card, auto-fit grid so charts wrap to their own row on a narrow screen with no separate breakpoint needed. */ .chart-collapsible { margin-bottom: 1.5rem; border: 1px solid var(--surface-border); border-radius: 6px; background: var(--surface-bg); } .chart-collapsible summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; color: var(--heading-text); list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } .chart-collapsible summary::-webkit-details-marker { display: none; } .chart-collapsible summary::before { content: '\25B6'; font-size: 0.7em; color: var(--text-muted); transition: transform 0.15s ease; } .chart-collapsible[open] summary::before { transform: rotate(90deg); } .chart-collapsible summary:hover { background: var(--surface-alt); } .chart-collapsible .chart-row { margin: 0; padding: 0 1rem 1rem; border-top: 1px solid var(--surface-border); padding-top: 1rem; } .chart-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; } .chart-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-top: 3px solid var(--accent); border-radius: 6px; padding: 1rem 1.2rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .chart-card h3 { margin: 0 0 0.75rem; font-size: 0.95rem; color: var(--heading-text); } .chart-card canvas { max-height: 260px; } /* ---------- Resizable columns (Excel-style drag handles) ---------- */ #dataTable, #deletedTable { table-layout: fixed; } #dataTable th, #dataTable td, #deletedTable th, #deletedTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #dataTable th, #deletedTable th { position: relative; } .col-resize-handle { position: absolute; top: 0; bottom: 0; right: 0; width: 6px; cursor: col-resize; z-index: 5; } .col-resize-handle:hover { background: rgba(255,255,255,0.35); } body.col-resizing { cursor: col-resize; user-select: none; } body.col-resizing .col-resize-handle { background: rgba(255,255,255,0.5); } /* Let the main data table (and its header row) use the full page width instead of the 800px cap that suits the narrower admin tables. (Compound class selectors so this reliably wins over .table-header/.table-scroll below regardless of source order.) */ .table-header.table-header-full, .table-scroll.table-scroll-full { max-width: none; } .btn-edit, .btn-delete { display: inline-block; padding: 5px 12px; font-size: 0.85rem; color: #fff; border: none; border-radius: 4px; text-decoration: none; cursor: pointer; } .btn-edit { background: var(--link); } .btn-edit:hover { background: var(--link-hover); } .btn-delete { background: #a83232; } .btn-delete:hover { background: #832626; } .delete-form { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--surface-border); } .delete-form .btn-delete { padding: 8px 16px; font-size: 0.95rem; } .table-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-width: 800px; margin-bottom: 0.75rem; } .table-header h2 { margin: 0; } .header-actions { display: flex; align-items: center; gap: 10px; } .btn-add { display: inline-block; padding: 8px 14px; background: #1e7e34; color: #fff; text-decoration: none; border-radius: 4px; font-size: 0.9rem; white-space: nowrap; } .btn-add:hover { background: #17652a; } #searchBox { padding: 8px 12px; font-size: 0.95rem; border: 1px solid var(--input-border); border-radius: 4px; width: 240px; max-width: 100%; background: var(--surface-bg); color: var(--page-text); } #searchBox:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 2px var(--link-focus-ring); } .flash-success { max-width: 800px; margin-bottom: 1rem; padding: 10px 14px; background: #e6f6ec; border: 1px solid #b7e4c7; color: #1e7e34; border-radius: 4px; } .flash-info { max-width: 800px; margin-bottom: 1rem; padding: 10px 14px; background: var(--link-tint); border: 1px solid var(--link-on-dark); color: var(--link-hover); border-radius: 4px; } /* Live record-count/totals bar above a filterable table -- updated by JS (table-interactions.js) as filters/search narrow what's visible. */ .table-status-bar { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding: 10px 14px; margin-bottom: 14px; background: var(--link-tint); border: 1px solid var(--link-on-dark); border-radius: 4px; font-size: 0.9rem; } .table-status-bar .stat-label { color: var(--text-muted); margin-right: 4px; } .table-status-bar .stat-value { font-weight: 600; color: var(--heading-text); font-variant-numeric: tabular-nums; } /* ---------- Forms (add/edit/login) ---------- */ .form-card { max-width: 480px; } .field { margin-bottom: 1rem; } label { display: block; margin-bottom: 4px; font-weight: bold; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 4px; font-size: 0.95rem; font-family: inherit; background: var(--surface-bg); color: var(--page-text); } textarea { resize: vertical; } .phase-code-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .phase-code-toolbar select { width: auto; padding: 6px 8px; } .phase-code-toolbar button { padding: 6px 12px; font-size: 0.85rem; } /* Generic scrollable checkbox list box (phase codes on job_form.php, jobs on user_form.php) */ .checklist-box { max-height: 220px; overflow-y: auto; border: 1px solid var(--surface-border); border-radius: 4px; padding: 10px 12px; background: var(--surface-alt); } .readonly-field { padding: 8px 10px; background: var(--surface-alt); border: 1px solid var(--surface-border); border-radius: 4px; color: var(--text-muted); } .actions { margin-top: 1.5rem; display: flex; gap: 10px; } .btn-save { padding: 8px 16px; background: var(--link); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95rem; } .btn-save:hover { background: var(--link-hover); } .btn-cancel { padding: 8px 16px; background: var(--surface-alt); color: var(--page-text); text-decoration: none; border-radius: 4px; font-size: 0.95rem; } .errors { margin-bottom: 1rem; padding: 10px 14px; background: #fdecea; border: 1px solid #f5c2c0; color: #a83232; border-radius: 4px; max-width: 480px; } .errors ul { margin: 0; padding-left: 1.2rem; } .field-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; } .change-history { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; } .change-history li { padding: 8px 0; border-bottom: 1px solid var(--surface-border); font-size: 0.9rem; } .change-history li:last-child { border-bottom: none; } /* ---------- Login page (no nav present) ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f2f5f8; } .login-card { background: #fff; padding: 2.5rem; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.08); width: 100%; max-width: 340px; } .login-card h1 { margin: 0 0 1.5rem; font-size: 1.3rem; text-align: center; } /* ---------- Simple checkbox grid (menu permission editor) ---------- */ .perm-grid { border-collapse: collapse; max-width: 640px; } .perm-grid th, .perm-grid td { border: 1px solid var(--input-border); padding: 8px 10px; text-align: center; } .perm-grid td:first-child, .perm-grid th:first-child { text-align: left; } .perm-grid td.submenu-row { padding-left: 24px; text-align: left; color: var(--text-muted); } /* .perm-grid th keeps the generic dark th background — .field-hint's grey would be nearly invisible there, so this note gets a light color instead */ .perm-grid-note { font-weight: normal; font-size: 0.75rem; color: var(--link-on-dark); } .perm-grid input[type="checkbox"]:disabled { cursor: not-allowed; } /* ---------- Mobile responsiveness ---------- */ /* Lets a wide table scroll horizontally within its own box instead of overflowing the whole page (or getting squeezed unreadably). */ .table-scroll { max-width: 800px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll table { max-width: none; } .perm-grid-wrap { max-width: 640px; } .perm-grid-wrap table { max-width: none; } @media (max-width: 700px) { .page-content { margin: 1rem; } /* Stack the title / search box / add button instead of squeezing them into one row */ .table-header { flex-wrap: wrap; align-items: stretch; } .header-actions { width: 100%; flex-wrap: wrap; } #searchBox { flex: 1 1 auto; width: auto; } /* Filter-row inputs get cramped fast with many columns; shrink them a bit */ tr.filter-row input { min-width: 90px; font-size: 0.85rem; } th, td { padding: 7px 9px; } } /* ---------- Home page ---------- */ .home-hero { position: relative; margin: -2rem -2rem 0; padding: 3.5rem 2rem 3rem; background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-dark-mid) 60%, var(--brand-dark-soft) 100%); color: #fff; text-align: center; overflow: hidden; } .home-hero h1 { margin: 0; font-size: 2.2rem; letter-spacing: 0.02em; } .home-hero-tagline { margin: 10px 0 0; color: var(--link-on-dark); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; } /* Wipe-reveal + shine-sweep entrance for the home page logo, adapted from a standalone animation prototype (logo-animation.html) the user dropped in. The wrap does the clipping/reveal (clip-path starts fully collapsed and animates open); the image inside just fades/settles into place; the shine is a separate diagonal gradient layer that sweeps across once, after the reveal finishes. Plays once per page load -- there's no replay trigger on the live page (logo-animation.html's "reload to replay" note was demo-only scaffolding, not meant for production). */ .home-logo-wrap { position: relative; display: block; margin: 0 auto; max-width: 360px; width: 100%; border-radius: 4px; overflow: hidden; clip-path: inset(0 100% 0 0); box-shadow: 0 4px 16px rgba(0,0,0,0.35); animation: home-logo-wipe-in 1.1s cubic-bezier(.65,0,.35,1) 0.15s forwards; } .home-logo { display: block; width: 100%; height: auto; opacity: 0; transform: scale(1.03); animation: home-logo-settle 0.8s ease-out 0.15s forwards; } .home-logo-shine { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient( 75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100% ); transform: skewX(-20deg); opacity: 0; animation: home-logo-sweep 1.3s ease-in-out 1.4s 1; } @keyframes home-logo-wipe-in { to { clip-path: inset(0 0% 0 0); } } @keyframes home-logo-settle { to { opacity: 1; transform: scale(1); } } @keyframes home-logo-sweep { 0% { opacity: 0; left: -60%; } 15% { opacity: 1; } 55% { opacity: 1; } 100% { opacity: 0; left: 120%; } } @media (prefers-reduced-motion: reduce) { .home-logo-wrap, .home-logo, .home-logo-shine { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; } } /* Simple decorative pipeline motif: a horizontal run with flange joints, standing in for the graphic the user will supply later. */ .home-pipeline { display: block; width: 100%; height: 28px; } .home-pipeline line { stroke: var(--accent); stroke-width: 3; } .home-pipeline circle { fill: var(--brand-dark); stroke: var(--accent); stroke-width: 3; } /* ---------- Home-page module dashboards (includes/po_dashboard.php and, eventually, one per future module -- see the project-growth-vision memory) ---------- */ .dashboard-section { margin-top: 2rem; } .dashboard-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .dashboard-header h2 { margin: 0; color: var(--heading-text); } .stat-tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-tile { background: var(--surface-bg); border: 1px solid var(--surface-border); border-top: 3px solid var(--link); border-radius: 6px; padding: 1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .stat-tile.stat-tile-alert { border-top-color: #d03b3b; } .stat-tile-value { font-size: 1.7rem; font-weight: 700; color: var(--heading-text); font-variant-numeric: tabular-nums; } .stat-tile-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; } .dashboard-section .chart-row { margin-bottom: 1.5rem; } .dashboard-more-link { display: inline-block; margin-top: 8px; font-size: 0.8rem; color: var(--link); text-decoration: none; } .dashboard-more-link:hover { text-decoration: underline; } .dashboard-activity-list { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; } .dashboard-activity-list li { padding: 6px 0; border-bottom: 1px solid var(--surface-border); line-height: 1.5; } .dashboard-activity-list li:last-child { border-bottom: none; } .dashboard-activity-list .activity-by { color: var(--text-muted); } .dashboard-activity-empty { color: var(--text-muted); font-style: italic; font-size: 0.85rem; } .dashboard-section h3 { margin: 0 0 0.75rem; font-size: 1rem; color: var(--heading-text); } .your-jobs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .your-job-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-top: 3px solid var(--accent); border-radius: 6px; padding: 1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .your-job-card h4 { margin: 0 0 2px; font-size: 1rem; color: var(--heading-text); } .your-job-card .job-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; } .your-job-card .job-stats { display: flex; gap: 0.9rem; font-size: 0.82rem; color: var(--page-text); flex-wrap: wrap; } .home-links { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; } .home-card { background: var(--surface-bg); border: 1px solid var(--surface-border); border-top: 3px solid var(--accent); border-radius: 6px; padding: 1.1rem 1.3rem 1.3rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } .home-card h2 { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--heading-text); } .home-card ul { list-style: none; margin: 0; padding: 0; } .home-card li { margin-bottom: 6px; } .home-card a { display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none; color: var(--link); } .home-card a:hover { background: var(--link-tint); color: var(--link-hover); } @media (max-width: 700px) { .home-hero { margin: -1rem -1rem 0; padding: 2.5rem 1rem 2rem; } .home-hero h1 { font-size: 1.6rem; } } /* ---------- Help page ---------- */ /* HTML twin of the "Purchase Order Tracking System User Guide" PDF -- see help.php. Kept in its own section since its styling (TOC, tip/note boxes, ADMIN badges, field tables) is specific to this one page. */ .help-page { max-width: 900px; } .help-toc { background: var(--surface-alt); border: 1px solid var(--surface-border); border-radius: 6px; padding: 1.2rem 1.5rem; margin-bottom: 2rem; } .help-toc h2 { margin-top: 0; } .help-toc ol { columns: 2; column-gap: 2rem; padding-left: 1.3rem; } .help-toc li { break-inside: avoid; margin-bottom: 6px; } .help-toc a { text-decoration: none; } .help-toc a:hover { text-decoration: underline; } @media (max-width: 700px) { .help-toc ol { columns: 1; } } .help-section { margin-bottom: 2.5rem; scroll-margin-top: 1rem; } .help-section h2 { border-bottom: 2px solid var(--link); padding-bottom: 6px; } .help-section h3 { font-size: 1rem; color: var(--heading-text); background: var(--link-tint); padding: 6px 10px; border-left: 3px solid var(--accent); margin-top: 1.4rem; } .help-back-to-top { font-size: 0.8rem; margin-top: 0.5rem; } .admin-only-badge { display: inline-block; font-size: 0.65rem; font-weight: bold; color: #fff; background: #6c4fa1; padding: 2px 7px; border-radius: 3px; margin-left: 6px; vertical-align: middle; letter-spacing: 0.03em; } .help-shot { text-align: center; margin: 14px 0; } .help-shot img { max-width: 100%; border: 1px solid var(--input-border); border-radius: 4px; } .help-caption { text-align: center; font-size: 0.8rem; font-style: italic; color: var(--text-muted); margin: 6px 0 0; } .help-tip, .help-note { border-left: 3px solid; padding: 8px 12px; margin: 12px 0; font-size: 0.88rem; border-radius: 0 4px 4px 0; } .help-tip { background: #eefaf0; border-color: #0ca30c; } .help-tip strong { color: #0ca30c; } .help-note { background: #fff8ea; border-color: #fab219; } .help-note strong { color: #a9740a; } table.help-fieldtable { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 0.88rem; } table.help-fieldtable th { background: var(--brand-dark); color: #fff; text-align: left; padding: 6px 10px; } table.help-fieldtable td { border-bottom: 1px solid var(--surface-border); padding: 6px 10px; vertical-align: top; } table.help-fieldtable tr:nth-child(even) td { background: var(--surface-alt); } /* ---------- My Account page (account.php) ---------- */ .account-section { max-width: 480px; margin-bottom: 2.5rem; } .theme-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1rem; } .theme-options.mode-options { flex-direction: row; } .mode-options .theme-option { flex: 1; justify-content: center; } .theme-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--surface-border); border-radius: 6px; cursor: pointer; font-weight: normal; margin: 0; } .theme-option:has(input:checked) { border-color: var(--link); background: var(--link-tint); } .theme-option input[type="radio"] { margin: 0; } .theme-swatch { display: flex; gap: 4px; } .swatch-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); }