/* Site Manager admin dashboard styles. Self-contained (no external fonts/CDNs/build step - this stays plain CSS served as a static file, not a Tailwind/PostCSS pipeline), styled after shadcn/ui's default (zinc) theme: neutral near-black/near-white surfaces and buttons, thin hairline borders doing most of the visual separation instead of heavy shadows, one quiet blue accent reserved for links/data (charts, stat emphasis) rather than used on primary actions - buttons stay neutral. Built to WCAG 2.1 AA contrast + focus-visibility standards. */ :root { /* Lets browser-native chrome (scrollbars, form controls) pick a light or dark rendering to match - independent of our own theme below, but should always agree with it. */ color-scheme: light dark; --sm-background: #ffffff; --sm-foreground: #09090b; --sm-card: #ffffff; --sm-border: #e4e4e7; --sm-input: #e4e4e7; --sm-ring: #18181b; --sm-primary: #18181b; --sm-primary-hover: #27272a; --sm-primary-foreground: #fafafa; --sm-secondary: #f4f4f5; --sm-secondary-hover: #e4e4e7; --sm-secondary-foreground: #18181b; --sm-muted: #f4f4f5; --sm-muted-foreground: #71717a; --sm-accent-blue: #2563eb; --sm-destructive: #b91c1c; --sm-destructive-hover: #991b1b; --sm-destructive-bg: #fef2f2; --sm-destructive-foreground: #fafafa; --sm-success: #15803d; --sm-success-bg: #f0fdf4; --sm-warning: #b45309; --sm-warning-bg: #fffbeb; --sm-info: #1d4ed8; --sm-info-bg: #eff6ff; --sm-radius: 0.5rem; --sm-radius-lg: 0.75rem; --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04); } /* Auto: follows the OS/browser preference until the visitor picks one explicitly with the theme-toggle button (below). Dark values sit closer together (card only a shade lighter than the page background) since a shadow barely reads against a dark page - the border does the work of separating a card from the page here, same as light mode. */ @media (prefers-color-scheme: dark) { :root { --sm-background: #09090b; --sm-foreground: #fafafa; --sm-card: #121214; --sm-border: #27272a; --sm-input: #3f3f46; --sm-ring: #d4d4d8; --sm-primary: #fafafa; --sm-primary-hover: #e4e4e7; --sm-primary-foreground: #18181b; --sm-secondary: #27272a; --sm-secondary-hover: #313136; --sm-secondary-foreground: #fafafa; --sm-muted: #1c1c1f; --sm-muted-foreground: #a1a1aa; --sm-accent-blue: #60a5fa; --sm-destructive: #ef4444; --sm-destructive-hover: #dc2626; --sm-destructive-bg: #3f1212; --sm-destructive-foreground: #fafafa; --sm-success: #4ade80; --sm-success-bg: #0f2a1a; --sm-warning: #fbbf24; --sm-warning-bg: #3f2d0a; --sm-info: #60a5fa; --sm-info-bg: #12213f; --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } } /* Manual: the theme-toggle button stamps data-theme on (see admin.js) and localStorage remembers it - these always win over the media query above regardless of source order, since an attribute selector on :root is more specific than a plain :root. */ :root[data-theme="light"] { color-scheme: light; --sm-background: #ffffff; --sm-foreground: #09090b; --sm-card: #ffffff; --sm-border: #e4e4e7; --sm-input: #e4e4e7; --sm-ring: #18181b; --sm-primary: #18181b; --sm-primary-hover: #27272a; --sm-primary-foreground: #fafafa; --sm-secondary: #f4f4f5; --sm-secondary-hover: #e4e4e7; --sm-secondary-foreground: #18181b; --sm-muted: #f4f4f5; --sm-muted-foreground: #71717a; --sm-accent-blue: #2563eb; --sm-destructive: #b91c1c; --sm-destructive-hover: #991b1b; --sm-destructive-bg: #fef2f2; --sm-destructive-foreground: #fafafa; --sm-success: #15803d; --sm-success-bg: #f0fdf4; --sm-warning: #b45309; --sm-warning-bg: #fffbeb; --sm-info: #1d4ed8; --sm-info-bg: #eff6ff; --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04); } :root[data-theme="dark"] { color-scheme: dark; --sm-background: #09090b; --sm-foreground: #fafafa; --sm-card: #121214; --sm-border: #27272a; --sm-input: #3f3f46; --sm-ring: #d4d4d8; --sm-primary: #fafafa; --sm-primary-hover: #e4e4e7; --sm-primary-foreground: #18181b; --sm-secondary: #27272a; --sm-secondary-hover: #313136; --sm-secondary-foreground: #fafafa; --sm-muted: #1c1c1f; --sm-muted-foreground: #a1a1aa; --sm-accent-blue: #60a5fa; --sm-destructive: #ef4444; --sm-destructive-hover: #dc2626; --sm-destructive-bg: #3f1212; --sm-destructive-foreground: #fafafa; --sm-success: #4ade80; --sm-success-bg: #0f2a1a; --sm-warning: #fbbf24; --sm-warning-bg: #3f2d0a; --sm-info: #60a5fa; --sm-info-bg: #12213f; --sm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html, body { overflow-x: hidden; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; background: var(--sm-background); color: var(--sm-foreground); line-height: 1.5; } a { color: var(--sm-accent-blue); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--sm-primary); color: var(--sm-primary-foreground); padding: 0.75rem 1rem; z-index: 100; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* shadcn's signature focus treatment: no hard outline, a ring that sits a couple of pixels clear of the element (the first, background-colored shadow is the gap, the second is the visible ring) - shape follows whatever border-radius the focused element already has, so this one rule covers square buttons, pill badges, and the circular theme toggle alike. */ :focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sm-background), 0 0 0 4px var(--sm-ring); } .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; } .auth-card { background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-sm); padding: 2rem; width: 100%; max-width: 26rem; } .auth-card h1 { margin-top: 0; font-size: 1.5rem; } /* Light/dark logo swap: both images are always in the DOM (so there's no flash-of-wrong-logo while CSS loads) - auto via the media query, manual override via data-theme (same mechanism as the color palette above). Element+class selectors here so this always wins over plain single-class sizing rules like .auth-card__logo, and the data-theme rules win over the media query, regardless of source order in either case. */ img.brand-logo--light { display: block; } img.brand-logo--dark { display: none; } @media (prefers-color-scheme: dark) { img.brand-logo--light { display: none; } img.brand-logo--dark { display: block; } } :root[data-theme="light"] img.brand-logo--light { display: block; } :root[data-theme="light"] img.brand-logo--dark { display: none; } :root[data-theme="dark"] img.brand-logo--light { display: none; } :root[data-theme="dark"] img.brand-logo--dark { display: block; } .auth-card__logo { display: block; height: 3rem; width: auto; margin: 0 auto 1.25rem; } .field { margin-bottom: 1.25rem; } .field label { display: block; font-weight: 500; margin-bottom: 0.35rem; } .field input, .field textarea, .field select { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--sm-input); border-radius: var(--sm-radius); font-size: 0.95rem; font-family: inherit; background: var(--sm-background); color: var(--sm-foreground); transition: border-color 0.15s ease; } .field input::placeholder, .field textarea::placeholder { color: var(--sm-muted-foreground); } .field .error-text { color: var(--sm-destructive); font-size: 0.875rem; margin-top: 0.35rem; } .button { display: inline-flex; align-items: center; justify-content: center; background: var(--sm-primary); color: var(--sm-primary-foreground); border: 1px solid transparent; border-radius: var(--sm-radius); padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .button:hover { background: var(--sm-primary-hover); } .button:disabled, .link-button:disabled { opacity: 0.6; cursor: not-allowed; } .button:disabled:hover { background: var(--sm-primary); } .flash-list { list-style: none; margin: 0 0 1.25rem; padding: 0; } .flash { border: 1px solid var(--sm-border); border-radius: var(--sm-radius); padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .flash--error { background: var(--sm-destructive-bg); color: var(--sm-destructive); border-color: var(--sm-destructive); } .flash--info { background: var(--sm-info-bg); color: var(--sm-info); } .flash--success { background: var(--sm-success-bg); color: var(--sm-success); } .qr-block { text-align: center; margin-bottom: 1.5rem; } .qr-block img { max-width: 220px; width: 100%; height: auto; border: 1px solid var(--sm-border); border-radius: var(--sm-radius); } .qr-block .secret { font-family: ui-monospace, monospace; word-break: break-all; } .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; background: var(--sm-card); border-bottom: 1px solid var(--sm-border); padding: 0.85rem 1.5rem; } .app-header__row { display: contents; } .app-header__brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.1rem; color: var(--sm-foreground); text-decoration: none; } .app-header__brand img { height: 1.75rem; width: auto; } .app-header__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; min-width: 0; } /* Desktop only - centers the links within the space between the brand and the theme-toggle/logout actions, which stay put on the right. Mobile's collapsed menu (see the max-width: 700px block below) stays left-aligned as a plain vertical list - centering a stack of full-width rows wouldn't read as "centered" the way it does in a single horizontal row. */ @media (min-width: 701px) { .app-header__nav { justify-content: center; } } .app-header__nav a { text-decoration: none; color: var(--sm-muted-foreground); padding: 0.4rem 0.1rem; border-bottom: 2px solid transparent; font-size: 0.9rem; } .app-header__nav a[aria-current="page"] { color: var(--sm-foreground); border-bottom-color: var(--sm-accent-blue); font-weight: 600; } /* Hidden on wide screens - the nav/actions row has room to just sit inline next to the brand (see .app-header's own flex-wrap above). */ .app-header__menu-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--sm-border); border-radius: var(--sm-radius); background: var(--sm-card); color: var(--sm-foreground); cursor: pointer; } .app-header__menu-toggle svg { width: 1.35rem; height: 1.35rem; } .app-header__actions { display: flex; align-items: center; gap: 0.85rem; } /* Below this width, five nav links + theme toggle + logout no longer fit next to the brand on one line - the old behavior (plain flex-wrap) just let everything reflow into a cramped, oddly-ordered stack that ate most of a phone screen's height before any real content appeared. A collapsed hamburger menu (matching the "both variants always in the DOM, CSS/one class decides what's visible" show/hide technique used everywhere else in this app - the theme toggle, the maintenance page toggle) keeps the collapsed header to a single compact row. Placed after the base .app-header__nav/.app-header__actions rules above (not just inside a media query interspersed earlier in the file) so its `display: none` actually wins the cascade at this width, rather than losing to a same-specificity declaration that happens to come later in the file. */ @media (max-width: 700px) { .app-header { flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 0; padding: 0.6rem 1rem; } .app-header__row { display: flex; align-items: center; justify-content: space-between; } .app-header__menu-toggle { display: inline-flex; } .app-header__nav, .app-header__actions { display: none; flex-direction: column; align-items: stretch; flex: none; width: 100%; gap: 0; } .app-header__nav a { padding: 0.75rem 0.25rem; border-bottom: 1px solid var(--sm-border); } .app-header__nav a[aria-current="page"] { border-bottom: 1px solid var(--sm-border); background: var(--sm-muted); } .app-header__actions { flex-direction: row; justify-content: space-between; padding: 0.75rem 0.25rem 0.25rem; } .app-header--menu-open .app-header__nav, .app-header--menu-open .app-header__actions { display: flex; } } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--sm-border); border-radius: 999px; background: var(--sm-card); color: var(--sm-muted-foreground); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { background: var(--sm-muted); color: var(--sm-foreground); } .theme-toggle svg { width: 1.15rem; height: 1.15rem; } /* Two buttons, one per direction - same show/hide mechanism as the color palette and logo above, so the visible one (and therefore its baked-in aria-label) is always correct on first paint with zero JS needed for that part; JS only has to handle the click itself. */ .theme-toggle--to-dark { display: inline-flex; } .theme-toggle--to-light { display: none; } @media (prefers-color-scheme: dark) { .theme-toggle--to-dark { display: none; } .theme-toggle--to-light { display: inline-flex; } } :root[data-theme="light"] .theme-toggle--to-dark { display: inline-flex; } :root[data-theme="light"] .theme-toggle--to-light { display: none; } :root[data-theme="dark"] .theme-toggle--to-dark { display: none; } :root[data-theme="dark"] .theme-toggle--to-light { display: inline-flex; } .auth-page-toggle { position: fixed; top: 1rem; right: 1rem; } .app-main { flex: 1; padding: 2rem 1.5rem; max-width: 72rem; width: 100%; margin: 0 auto; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .card { background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-sm); padding: 1.25rem; } .card h2 { margin-top: 0; font-size: 1.1rem; } .stat-card { text-align: center; } .stat-value { font-size: 2.25rem; font-weight: 700; color: var(--sm-accent-blue); line-height: 1.1; } .stat-label { color: var(--sm-muted-foreground); font-size: 0.875rem; margin-top: 0.25rem; } .trend-chart { width: 100%; min-width: 22rem; height: auto; max-height: 12rem; } .trend-chart__bar { fill: var(--sm-accent-blue); } .trend-chart__count { fill: var(--sm-muted-foreground); font-size: 10px; } .trend-chart__label { fill: var(--sm-muted-foreground); font-size: 10px; } .trend-up { color: var(--sm-success); } .trend-down { color: var(--sm-destructive); } .hint { color: var(--sm-muted-foreground); font-size: 0.875rem; margin-top: -0.5rem; } .donut-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .donut-chart { width: 8.75rem; height: 8.75rem; flex: none; } .chart-legend { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; } .chart-legend li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; } .chart-legend__swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; flex: none; } .table-scroll { overflow-x: auto; border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg); margin-bottom: 1rem; } table { width: 100%; min-width: 32rem; border-collapse: collapse; background: var(--sm-card); } th, td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--sm-border); } th { color: var(--sm-muted-foreground); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; } tbody tr:hover td { background: var(--sm-muted); } tbody tr:last-child td { border-bottom: none; } .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border: 1px solid transparent; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .badge--active { background: var(--sm-success-bg); color: var(--sm-success); border-color: var(--sm-success); } .badge--paused { background: var(--sm-warning-bg); color: var(--sm-warning); border-color: var(--sm-warning); } .badge--maintenance { background: var(--sm-warning-bg); color: var(--sm-warning); border-color: var(--sm-warning); } .badge--deleted { background: var(--sm-destructive-bg); color: var(--sm-destructive); border-color: var(--sm-destructive); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .breadcrumb-back { margin: 0 0 0.75rem; font-size: 0.9rem; } .breadcrumb-back a { color: var(--sm-muted-foreground); text-decoration: none; } .breadcrumb-back a:hover { color: var(--sm-foreground); text-decoration: underline; } .app-main > section.card { margin-bottom: 1.25rem; } .form-card { background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-lg); box-shadow: var(--sm-shadow-sm); padding: 1.25rem; max-width: 32rem; } .field--checkbox { display: flex; align-items: center; gap: 0.5rem; } .field--checkbox input { width: auto; } .field--checkbox label { margin-bottom: 0; } .inline-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; } .inline-form .field { margin-bottom: 0; } .inline { display: inline; } .button-row { display: flex; gap: 0.75rem; } /* shadcn's "outline" button variant: transparent background, a real border, filling in with a soft neutral tint on hover. */ .button--secondary { background: var(--sm-background); color: var(--sm-foreground); border: 1px solid var(--sm-input); } .button--secondary:hover { background: var(--sm-muted); } /* Resting state mirrors shadcn's "outline" destructive treatment (soft tint + colored border, not a solid fill) - solidifying only on hover keeps a merely-visible danger button from reading as urgent until it's actually about to be clicked. */ .button--danger { background: var(--sm-destructive-bg); color: var(--sm-destructive); border: 1px solid var(--sm-destructive); } .button--danger:hover { background: var(--sm-destructive); color: var(--sm-destructive-foreground); } /* Armed "click again to confirm" state (see admin.js) - overrides whatever base button variant it's layered on (.button, .button--secondary, .button--danger, .link-button) to the same unmistakable solid red, regardless of that variant's own resting/hover colors. */ .button--confirming, .button--confirming:hover { background: var(--sm-destructive) !important; color: var(--sm-destructive-foreground) !important; border-color: var(--sm-destructive) !important; text-decoration: none !important; animation: confirm-pulse 1s ease-in-out infinite; } /* .link-button has no padding/radius of its own (a bare inline text trigger) - give it the same solid-button footprint as the others once armed, so "click again" reads as a button, not a highlighted word. */ .link-button.button--confirming { padding: 0.2rem 0.6rem; border-radius: var(--sm-radius); } @keyframes confirm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } } @media (prefers-reduced-motion: reduce) { .button--confirming { animation: none; } } pre { white-space: pre-wrap; background: var(--sm-muted); border: 1px solid var(--sm-border); border-radius: var(--sm-radius); padding: 1rem; font-family: ui-monospace, monospace; font-size: 0.9rem; } .email-preview-frame { display: block; width: 100%; height: 70vh; min-height: 32rem; border: 1px solid var(--sm-border); border-radius: var(--sm-radius); background: #f4f6fb; } .email-preview-text { margin-top: 0.75rem; } .email-preview-text summary { cursor: pointer; color: var(--sm-muted-foreground); font-size: 0.9rem; } .details-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .details-list li { margin-bottom: 0.15rem; } .link-button { background: none; border: none; padding: 0; color: var(--sm-destructive); text-decoration: underline; cursor: pointer; font-size: 0.95rem; }