/* ========================================================================== */
/* site.css — the Chokwaa design system in one stylesheet. */
/* */
/* Consolidated from tokens.css / base.css / components.css / */
/* layout.css (in that order — order matters: tokens, element defaults, */
/* components, page chrome) plus the Chokwaa-SPA alignment section at the */
/* end (formerly flat.css), which wins ties by source order. */
/* Linked from _Layout.cshtml after Bootstrap so our overrides win. */
/* ========================================================================== */
:root {
/* ============ Brand ============ */
--color-brand-purple: #6F408A;
--color-brand-teal: #3B6E7A;
--color-brand-navy: #021859;
--color-brand-navy-hover: #011444;
--color-accent-yellow: #F6C639;
--color-accent-yellow-hover: #E6B62F;
/* ============ Surfaces ============ */
--color-page-bg: #EEEEEE;
--color-card-bg: #FFFFFF;
--color-input-bg: #FFFFFF;
--color-divider: #E1DCD3;
--color-card-border: #D5D7DA;
--color-help-bg: #F7F5F0;
--color-overlay: rgb(15 23 45 / 0.45);
--color-row-hover: rgba(13, 25, 57, 0.04);
/* ============ Text ============ */
--color-text-primary: #0D1939;
--color-text-secondary: #5A5651;
--color-text-inverse: #FFFFFF;
--color-link: #0D1939;
--color-link-active: #5C2E91;
/* ============ Semantic ============ */
--color-error: #C04A3C;
--color-error-bg: #FBE9E7;
--color-success: #2E7D32;
--color-warning: #C68A19;
--color-focus-ring: #5C2E91;
/* ============ Typography ============ */
--font-heading: 'Montserrat', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
--text-h1: clamp(28px, 4vw, 32px);
--text-h2: clamp(22px, 3vw, 24px);
--text-h3: 20px;
--text-body: 16px;
--text-sm: 14px;
--text-xs: 12px;
--text-button: 16px;
--line-tight: 1.2;
--line-snug: 1.3;
--line-normal: 1.5;
/* ============ Spacing (8px rhythm) ============ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--space-10: 64px;
/* ============ Radius ============ */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 9999px;
/* ============ Shadow ============ */
--shadow-card: 0 4px 12px -2px rgb(0 0 0 / 0.06);
--shadow-modal: 0 12px 32px -4px rgb(0 0 0 / 0.10);
--shadow-pill: 0 4px 12px -2px rgb(0 0 0 / 0.08);
/* ============ Form / Button ============ */
--input-height: 44px;
--input-border: 1px solid #D5D7DA;
--input-border-focus: 2px solid var(--color-brand-navy);
--input-border-error: 1px solid var(--color-error);
--input-padding-x: 12px;
--button-height-md: 44px;
--button-height-sm: 36px;
--button-primary-bg: var(--color-brand-navy);
--button-primary-text: var(--color-text-inverse);
--button-disabled-bg: #E1DCD3;
--button-disabled-text: #9C988F;
/* ============ Layout ============ */
--banner-height: 48px;
--card-max-width: 440px;
--card-radius: 8px;
--card-padding-x: 32px;
--card-padding-b: 36px;
--content-gutter: 16px;
--page-pattern: url("/img/vine-motif.jpg");
}
@media (min-width: 768px) {
:root { --content-gutter: 24px; }
}
@media (min-width: 1200px) {
:root { --content-gutter: 32px; }
}
@media (min-width: 1920px) {
:root {
--content-gutter: 48px;
--card-max-width: 520px;
--text-h1: clamp(28px, 5vw, 40px);
--text-h2: clamp(22px, 4vw, 32px);
--space-5: 28px;
--space-6: 40px;
--space-8: 56px;
--space-10: 80px;
}
}
@media (min-width: 2560px) {
:root {
--content-gutter: 64px;
--card-max-width: 640px;
--text-h1: 48px;
--text-h2: 40px;
--text-h3: 28px;
--text-body: 18px;
--space-5: 32px;
--space-6: 48px;
--space-8: 64px;
--space-10: 96px;
--button-height-md: 52px;
--button-height-sm: 44px;
}
}
/* Dark-mode placeholder — not in scope for v1, but the structure is here
so future work can flip tokens without touching component styles. */
@media (prefers-color-scheme: dark) {
/* :root { --color-page-bg: #1B1F2B; --color-text-primary: #F5F1E8; ... } */
}
/* ========================================================================== */
/* base.css — reset + element defaults */
/* Loaded after tokens.css; before components.css. */
/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scrollbar-gutter: stable;
background-color: var(--color-page-bg);
color-scheme: light;
}
/* ============ Cross-document page transitions ============
Modern browsers (Chrome 126+, Safari 18+) crossfade between same-origin
page navigations when this rule is present — no JS, no dependencies.
The browser snapshots the outgoing page and composites a fade to the
incoming page on the GPU; cheaper than the current white-flash repaint.
Older browsers ignore the rule entirely (progressive enhancement). */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
body {
margin: 0;
min-height: 100dvh;
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--line-normal);
color: var(--color-text-primary);
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block;
max-width: 100%;
}
img, svg { height: auto; }
/* ============ Typography defaults ============ */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 var(--space-3);
line-height: var(--line-tight);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
p { margin: 0 0 var(--space-4); }
small, .text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--color-text-secondary); }
.text-error { color: var(--color-error); }
/* ============ Heading utility classes ============ */
.text-h1, .text-h2, .text-h3 {
font-family: var(--font-body);
font-weight: 600;
line-height: var(--line-snug);
color: var(--color-text-primary);
margin: 0 0 var(--space-3);
}
.text-h1 { font-size: var(--text-h1); }
.text-h2 { font-size: var(--text-h2); }
.text-h3 { font-size: var(--text-h3); }
/* ============ Links ============ */
a {
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
font-weight: 500;
}
a:hover { color: var(--color-link-active); }
a.link-plain {
text-decoration: none;
color: var(--color-text-secondary);
}
a.link-plain:hover {
color: var(--color-text-primary);
text-decoration: underline;
}
/* ============ Focus ring ============ */
:focus { outline: none; }
:focus-visible {
outline: 3px solid var(--color-focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ============ Selection ============ */
::selection {
background-color: var(--color-brand-purple);
color: var(--color-text-inverse);
}
/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============ Visually-hidden helper ============ */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ========================================================================== */
/* components.css — buttons, inputs, alerts, modal, checkbox, link card */
/* BEM-lite class naming. Loaded after base.css; before layout.css. */
/* ========================================================================== */
/* ============ Buttons ============ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--button-height-md);
padding: 0 var(--space-5);
border: 1px solid transparent;
border-radius: var(--radius-md);
background-color: transparent;
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: var(--text-button);
font-weight: 500;
line-height: 1;
cursor: pointer;
text-decoration: none;
transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
text-decoration-thickness 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
user-select: none;
position: relative;
}
.btn[disabled], .btn--disabled { cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--sm { min-height: var(--button-height-sm); padding: 0 var(--space-4); font-size: var(--text-sm); }
.btn--primary {
background-color: var(--button-primary-bg);
color: var(--button-primary-text);
border-color: transparent;
box-shadow: 0 1px 8px 0 rgba(5, 7, 11, 0.03);
}
.btn--primary:hover {
background-color: var(--color-brand-navy-hover);
color: var(--color-text-inverse);
transform: none;
box-shadow: 0 1px 8px 0 rgba(5, 7, 11, 0.03);
}
.btn--primary:active {
background-color: var(--color-brand-navy);
color: var(--color-text-inverse);
transform: none;
box-shadow: 0 1px 8px 0 rgba(5, 7, 11, 0.03);
}
.btn--primary:focus-visible {
background-color: var(--color-brand-navy);
color: var(--color-text-inverse);
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
.btn--secondary {
background-color: var(--color-card-bg);
color: var(--color-text-primary);
border-color: var(--color-divider);
box-shadow: none;
text-decoration: none;
}
.btn--secondary:hover {
background-color: var(--color-help-bg);
color: var(--color-text-primary);
border-color: var(--color-brand-navy);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 20px rgba(13, 25, 57, 0.16);
}
.btn--secondary:active {
background-color: var(--color-help-bg);
color: var(--color-text-primary);
border-color: var(--color-brand-navy);
transform: translateY(-1px) scale(0.98);
box-shadow: 0 3px 8px rgba(13, 25, 57, 0.08);
}
.btn--secondary:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
.btn--link {
min-height: auto;
padding: 0;
background: transparent;
color: var(--color-link);
text-decoration: underline;
text-underline-offset: 2px;
}
.btn--link:hover {
color: var(--color-brand-purple);
text-decoration-thickness: 2px;
transform: translateX(4px);
}
.btn--link:active {
transform: translateX(0);
}
.btn--link:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
.btn--action {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
padding: 0 var(--space-3);
font-size: var(--text-xs);
font-weight: 600;
background-color: var(--color-help-bg);
color: var(--color-brand-navy);
border: 1px solid var(--color-divider);
border-radius: var(--radius-sm);
}
.btn--action:hover {
background-color: var(--color-brand-navy);
color: var(--color-text-inverse);
border-color: var(--color-brand-navy);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 25, 57, 0.15);
}
.btn--action-danger {
color: var(--color-error);
background-color: var(--color-error-bg);
border-color: rgba(192, 74, 60, 0.2);
}
.btn--action-danger:hover:not([disabled]) {
background-color: var(--color-error);
color: var(--color-text-inverse);
border-color: var(--color-error);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(192, 74, 60, 0.2);
}
.btn--action-warning {
color: #B45309;
background-color: rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.2);
}
.btn--action-warning:hover:not([disabled]) {
background-color: #D97706;
color: var(--color-text-inverse);
border-color: #D97706;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}
.btn[class*="icon-"]::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.btn--action[class*="icon-"] { padding-left: var(--space-2); }
.btn--action[class*="icon-"]::before {
width: 14px;
height: 14px;
}
.icon-add::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E"); }
.icon-edit::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); }
.icon-delete::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.icon-rotate::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E"); }
.icon-view::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon-search::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); }
.btn[disabled],
.btn--disabled {
background-color: var(--button-disabled-bg) !important;
color: var(--button-disabled-text) !important;
border-color: transparent;
cursor: not-allowed;
opacity: 0.65;
transform: none;
box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
.btn:not([disabled]) {
transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn--primary:hover:not([disabled]) {
box-shadow: 0 1px 8px 0 rgba(5, 7, 11, 0.03);
transform: none;
}
.btn--secondary:hover:not([disabled]) {
box-shadow: 0 12px 28px rgba(13, 25, 57, 0.2);
}
.btn--link:hover:not([disabled]) {
text-decoration-thickness: 3px;
}
.btn--action:hover:not([disabled]) {
box-shadow: 0 6px 16px rgba(13, 25, 57, 0.2);
}
.btn--action-danger:hover:not([disabled]) {
box-shadow: 0 6px 16px rgba(192, 74, 60, 0.25);
}
.btn--action-warning:hover:not([disabled]) {
box-shadow: 0 6px 16px rgba(217, 119, 6, 0.25);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
}
/* ============ Form group ============ */
.form-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.form-label {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-text-primary);
cursor: default;
user-select: none;
}
.form-label--required::after {
content: " *";
color: var(--color-error);
font-weight: 700;
}
.required-indicator {
color: var(--color-error);
font-weight: 700;
}
.form-label .optional {
color: var(--color-text-secondary);
font-weight: 400;
font-size: var(--text-xs);
}
.form-help {
font-size: var(--text-xs);
color: var(--color-text-secondary);
margin-top: 2px;
}
/* ============ Inputs ============ */
.form-input,
.form-select,
.form-textarea {
width: 100%;
min-height: var(--input-height);
padding: 0 var(--input-padding-x);
border: var(--input-border);
border-radius: var(--radius-sm);
background-color: var(--color-input-bg);
color: var(--color-text-primary);
font-family: inherit;
font-size: var(--text-body);
line-height: var(--line-normal);
transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
border-color: var(--color-brand-navy);
box-shadow: 0 4px 12px rgba(13, 25, 57, 0.05);
transform: translateY(-1px);
}
.form-input,
.form-textarea { cursor: text; }
.form-select { cursor: pointer; }
.form-textarea {
min-height: 110px;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
resize: vertical;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #B7AFA1;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--color-brand-navy);
box-shadow: 0 0 0 3px rgb(13 25 57 / 0.15), 0 4px 12px rgba(13, 25, 57, 0.08);
transform: translateY(-2px);
background-color: #ffffff;
}
.form-input[aria-invalid="true"],
.form-input.is-invalid,
.form-input.input-validation-error,
.form-select.is-invalid,
.form-select.input-validation-error,
.form-textarea.is-invalid,
.form-textarea.input-validation-error {
border: var(--input-border-error);
box-shadow: 0 0 0 3px rgb(192 74 60 / 0.10);
}
.field-error {
display: block;
margin-top: 2px;
color: var(--color-error);
font-size: var(--text-xs);
}
/* ============ Password field with show/hide toggle ============ */
.password-field {
position: relative;
}
.password-field .form-input {
padding-right: 44px;
}
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none;
}
.password-field__toggle {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 150ms ease, background-color 150ms ease;
}
.password-field__toggle:hover {
color: var(--color-text-primary);
background-color: rgba(13, 25, 57, 0.05);
}
.password-field__toggle:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
/* ============ Checkbox / Radio ============ */
.form-check {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
width: 18px;
height: 18px;
accent-color: var(--color-brand-navy);
cursor: pointer;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.form-check:hover input[type="checkbox"],
.form-check:hover input[type="radio"] {
transform: scale(1.15);
box-shadow: 0 2px 8px rgba(13, 25, 57, 0.15);
}
.form-check-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.scope-checklist {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.scope-checklist__item {
margin: 0;
}
.scope-checklist__label {
display: flex;
align-items: flex-start;
gap: var(--space-2);
cursor: pointer;
}
.scope-checklist__label input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--color-brand-navy);
cursor: pointer;
flex-shrink: 0;
}
.scope-checklist__text {
display: flex;
flex-direction: column;
gap: 2px;
}
.scope-group {
border: 1px solid var(--color-border, #d9d3c4);
border-radius: var(--radius-md, 8px);
padding: var(--space-3) var(--space-3) var(--space-2);
margin: var(--space-2) 0 var(--space-3);
}
.scope-group__legend {
padding: 0 var(--space-2);
font-weight: 600;
color: var(--color-text-primary, #2a2a2a);
}
.scope-group-view {
margin: var(--space-2) 0 var(--space-4);
}
.scope-group-view__label {
font-size: var(--font-size-sm, 0.875rem);
font-weight: 600;
color: var(--color-text-secondary, #5a5444);
margin: 0 0 var(--space-2);
}
.owner-group.is-disabled {
opacity: 0.45;
}
.kind-section.is-hidden {
display: none;
}
.radio-card-group {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
@media (min-width: 480px) {
.radio-card-group { grid-template-columns: 1fr 1fr; }
}
.radio-card {
position: relative;
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
background: var(--color-card-bg);
cursor: pointer;
transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.radio-card:hover {
border-color: var(--color-brand-navy);
box-shadow: 0 8px 24px rgba(13, 25, 57, 0.12);
transform: translateY(-3px);
}
.radio-card input[type="radio"] { margin-top: 2px; }
.radio-card:has(input[type="radio"]:checked) {
border-color: var(--color-brand-navy);
background: var(--color-help-bg);
box-shadow: 0 8px 24px rgba(13, 25, 57, 0.16);
}
.radio-card__title { font-weight: 500; color: var(--color-text-primary); }
.radio-card__hint { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
/* ============ Alerts ============ */
.alert {
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border: 1px solid transparent;
margin-bottom: var(--space-4);
}
.alert--error {
background-color: var(--color-error-bg);
border-color: var(--color-error);
color: var(--color-error);
}
.alert--success {
background-color: #E9F5EB;
border-color: var(--color-success);
color: var(--color-success);
}
.alert--warning {
background-color: #FEF6E3;
border-color: var(--color-warning);
color: var(--color-warning);
}
.alert--info {
background-color: var(--color-help-bg);
border-color: var(--color-divider);
color: var(--color-text-primary);
}
.alert p {
margin: 4px 0 0;
}
.alert p:first-child { margin-top: 0; }
.validation-summary-errors {
background-color: var(--color-error-bg);
border: 1px solid var(--color-error);
border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4);
color: var(--color-error);
font-size: var(--text-sm);
line-height: var(--line-normal);
margin: var(--space-2) 0 var(--space-4);
}
.validation-summary-errors ul {
margin: 0;
padding-left: var(--space-5);
}
.validation-summary-errors li + li {
margin-top: var(--space-1);
}
.validation-summary-valid { display: none; }
/* asp-validation-for emits .text-danger; match it */
.field-validation-error,
.text-danger {
display: inline-block;
margin-top: var(--space-1);
margin-bottom: 2px;
color: var(--color-error);
font-size: var(--text-xs);
line-height: var(--line-normal);
}
.field-validation-valid { display: none; }
/* ============ Modal ============ */
.modal-backdrop {
position: fixed;
inset: 0;
background-color: var(--color-overlay);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
z-index: 50;
}
.modal-backdrop[hidden] { display: none; }
.modal {
width: 100%;
max-width: 520px;
max-height: calc(100dvh - 2 * var(--space-4));
overflow-y: auto;
background: var(--color-card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
padding: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
.modal { padding: var(--space-8); }
}
.modal__icon {
width: 48px;
height: 48px;
border-radius: var(--radius-pill);
background: rgb(92 46 145 / 0.12);
color: var(--color-brand-purple);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-4);
}
/* ============ Divider ============ */
.divider {
border: 0;
border-top: 1px solid var(--color-divider);
margin: var(--space-5) 0;
}
/* ============ Small utility classes used across pages ============ */
.forgot-link {
align-self: flex-start;
margin-top: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-brand-navy);
text-decoration: underline;
text-underline-offset: 2px;
transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-block;
}
.forgot-link:hover {
color: var(--color-brand-purple);
transform: translateX(4px);
text-decoration-thickness: 2px;
}
.form-actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.form-actions--row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.rule-list {
margin: 4px 0 var(--space-5);
padding: 0;
list-style: none;
font-size: var(--text-sm);
color: var(--color-text-secondary);
display: flex;
flex-direction: column;
gap: 6px;
}
.rule-list li {
display: flex;
align-items: center;
gap: var(--space-2);
}
.rule-list li::before {
content: "";
flex: 0 0 16px;
width: 16px;
height: 16px;
border-radius: var(--radius-pill);
border: 1.5px solid var(--color-divider);
background: transparent;
transition: background-color 120ms ease, border-color 120ms ease;
}
.rule-list .rule--met {
color: var(--color-text-primary);
}
.rule-list .rule--met::before {
background: var(--color-brand-purple) url("data:image/svg+xml;utf8,") center/12px no-repeat;
border-color: var(--color-brand-purple);
}
.status-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-pill);
background: rgb(92 46 145 / 0.12);
color: var(--color-brand-purple);
margin: 0 auto var(--space-4);
display: inline-flex;
align-items: center;
justify-content: center;
}
.status-icon--success { background: rgb(46 125 50 / 0.12); color: var(--color-success); }
.status-icon--error { background: rgb(192 74 60 / 0.12); color: var(--color-error); }
.status-icon--warning { background: rgb(198 138 25 / 0.12); color: var(--color-warning); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-md { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-4); }
.flex-align-center {
align-items: center;
}
/* ============ Margin utilities (token-scaled) ============ */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.divider-label {
text-align: center;
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
}
/* ============ Code pill (Error pages reference ID, EnableAuthenticator key) ============ */
.code-pill {
font-family: var(--font-mono);
background: var(--color-help-bg);
padding: 2px 6px;
border-radius: var(--radius-sm);
}
.code-pill--lg {
font-family: var(--font-mono);
background: var(--color-help-bg);
padding: 4px 10px;
border-radius: var(--radius-sm);
font-weight: 500;
}
kbd.kbd-pill, .kbd-pill {
background: var(--color-help-bg);
color: var(--color-text-primary);
padding: 2px 8px;
border: 1px solid var(--color-card-border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.edit-disclosure__summary {
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-size: var(--text-h3);
font-weight: 600;
color: var(--color-text-primary);
}
.edit-disclosure__summary::-webkit-details-marker { display: none; }
.edit-disclosure__summary::after {
content: "Edit";
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--color-brand-purple);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-sm);
padding: 2px 8px;
}
details[open] > .edit-disclosure__summary::after {
content: "Cancel";
}
.edit-disclosure__body {
margin-top: var(--space-3);
}
.totp-key {
display: inline-flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-md);
padding: 10px 12px;
margin-top: 4px;
max-width: 100%;
}
.totp-key__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-text-secondary);
}
.totp-key__value {
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--color-text-primary);
word-break: break-all;
user-select: all;
}
.totp-key__copy {
flex-shrink: 0;
}
.ol-decimal {
list-style: decimal inside;
padding: 0;
margin: 0;
}
/* ============ List reset ============ */
.list-unstyled {
list-style: none;
margin: 0;
padding: 0;
}
/* ============ Settings-panel section heading ============ */
.panel-title { font-family: var(--font-body); font-weight: 600; font-size: var(--text-h2); margin-bottom: var(--space-2); }
.panel-subtitle { color: var(--color-text-secondary); margin-bottom: var(--space-5); }
/* ============ Recovery codes grid ============ */
.recovery-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
background: var(--color-help-bg);
border-radius: var(--card-radius);
padding: var(--space-5);
margin-bottom: var(--space-5);
}
.recovery-grid code {
user-select: all;
padding: 8px 12px;
background: var(--color-card-bg);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
}
/* ============ Connected-account row (Manage/ExternalLogins) ============ */
.connected-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
}
.connected-row__name { font-weight: 500; }
/* ============ Tight inline link in a sentence ============ */
.link-inline {
color: var(--color-text-primary);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-block;
}
.link-inline:hover {
color: var(--color-brand-purple);
transform: translateY(-2px);
text-decoration-thickness: 2px;
}
/* ============ User-menu panel dropdown ============ */
.user-menu__panel {
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 220px;
background: var(--color-card-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-2);
z-index: 30;
transform-origin: top right;
animation: dropdownScaleIn 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes dropdownScaleIn {
from { opacity: 0; transform: scale(0.95) translateY(-4px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.user-menu__item {
display: block;
padding: 8px 12px;
color: var(--color-text-primary);
text-decoration: none;
border-radius: var(--radius-sm);
cursor: pointer;
font: inherit;
width: 100%;
text-align: left;
background: none;
border: 0;
transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.user-menu__item:hover {
background: transparent;
color: var(--color-text-primary);
transform: translateX(4px);
}
.user-menu__item:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: -2px;
}
.text-brand { color: var(--color-brand-purple); font-weight: 500; }
.text-success-inline { color: var(--color-success); font-weight: 600; }
.align-self-start { align-self: flex-start; }
.max-w-md { max-width: 480px; }
.max-w-sm { max-width: 360px; }
/* ============ Destructive button (Delete, Disable, Close account) ============ */
.btn--danger {
background: var(--color-error);
color: var(--color-text-inverse);
border-color: transparent;
}
.btn--danger:hover {
background-color: #c03c3c;
color: var(--color-text-inverse);
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 20px rgba(192, 74, 60, 0.3);
}
.btn--danger:active {
background-color: #a83434;
color: var(--color-text-inverse);
transform: translateY(-1px) scale(0.98);
box-shadow: 0 3px 8px rgba(192, 74, 60, 0.15);
}
.btn--danger:focus-visible {
outline: 2px solid var(--color-error);
outline-offset: 2px;
}
/* ============ Success illustration block (used on ResetPasswordConfirmation) ============ */
.illustration {
display: flex;
justify-content: center;
margin: var(--space-3) 0 var(--space-5);
}
/* ============ Settings list (Manage/*) ============ */
.settings-grid {
display: grid;
gap: var(--space-3);
width: 100%;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 768px) { .settings-grid { grid-template-columns: 240px 1fr; gap: var(--space-6); } }
.settings-grid--admin {
max-width: 1600px;
}
.settings-panel > .auth-card,
.settings-panel > .auth-card--admin,
.settings-panel > .auth-card--wide {
background: transparent;
border: 0;
box-shadow: none;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
}
.settings-panel > .auth-card > .auth-card__body,
.settings-panel > .auth-card--admin > .auth-card__body,
.settings-panel > .auth-card--wide > .auth-card__body {
padding: 0;
}
.settings-panel > .auth-card > .auth-card__stripe,
.settings-panel > .auth-card--admin > .auth-card__stripe,
.settings-panel > .auth-card--wide > .auth-card__stripe {
display: none;
}
.settings-panel > .auth-card > .auth-card__body > .auth-card__title,
.settings-panel > .auth-card--admin > .auth-card__body > .auth-card__title,
.settings-panel > .auth-card--wide > .auth-card__body > .auth-card__title {
text-align: left;
margin-top: 0;
margin-bottom: var(--space-2);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-h1);
color: var(--color-brand-navy);
letter-spacing: -0.01em;
}
.settings-panel > .auth-card > .auth-card__body > .auth-card__subtitle,
.settings-panel > .auth-card--admin > .auth-card__body > .auth-card__subtitle,
.settings-panel > .auth-card--wide > .auth-card__body > .auth-card__subtitle {
text-align: left;
color: var(--color-text-secondary);
margin-bottom: var(--space-5);
}
.settings-nav {
display: flex;
flex-direction: column;
gap: 2px;
background: var(--color-page-bg);
}
.settings-nav a {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
transition: all 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.settings-nav a:hover {
background: var(--color-help-bg);
transform: translateX(4px);
}
.settings-nav a.active { background: var(--color-brand-navy); color: var(--color-text-inverse); }
.settings-panel {
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--card-radius);
box-shadow: var(--shadow-card);
padding: var(--space-5);
min-height: 420px;
}
@media (min-width: 768px) {
.settings-panel {
padding: var(--space-6) var(--space-8);
min-height: 520px;
}
}
/* ============ Badges ============ */
.badge {
display: inline-flex;
align-items: center;
padding: 2px var(--space-3);
border-radius: var(--radius-pill);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
}
.badge--soft {
background: var(--color-help-bg);
color: var(--color-text-secondary);
border: 1px solid var(--color-divider);
}
.badge--success {
background: rgba(46, 125, 50, 0.12);
color: var(--color-success);
border: 1px solid rgba(46, 125, 50, 0.32);
}
.badge--warning {
background: rgba(217, 119, 6, 0.12);
color: #B45309;
border: 1px solid rgba(217, 119, 6, 0.32);
}
/* ============ Panel sections ============ */
.panel-section {
padding: var(--space-5) 0;
border-top: 1px solid var(--color-divider);
}
.panel-section:first-of-type { border-top: 0; padding-top: var(--space-3); }
.panel-section__title {
font-size: var(--text-h3);
font-weight: 600;
color: var(--color-text-primary);
margin: 0 0 var(--space-3);
}
/* ============ Contact list ============ */
.contact-list {
list-style: none;
padding: 0;
margin: var(--space-3) 0 0;
}
.contact-list > li {
display: flex;
gap: var(--space-2);
align-items: baseline;
padding: var(--space-1) 0;
}
.contact-list__label {
flex: 0 0 5.5rem;
color: var(--color-text-secondary);
font-weight: 600;
}
/* Wider label column for admin summaries. */
.contact-list--wide > li {
display: grid;
grid-template-columns: 10rem 1fr;
gap: var(--space-3);
align-items: baseline;
padding: var(--space-3) 0;
}
.contact-list--wide > li + li {
border-top: 1px solid var(--color-divider);
}
.contact-list--wide > li:first-child { padding-top: 0; }
.contact-list--wide > li:last-child { padding-bottom: 0; }
.contact-list--wide .contact-list__label {
flex: none;
}
.contact-list__count {
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.contact-list__note {
color: var(--color-text-secondary);
}
@media (max-width: 560px) {
.contact-list--wide > li {
grid-template-columns: 1fr;
gap: var(--space-1);
}
}
/* ============ Inline form ============ */
.inline-form {
display: inline;
margin: 0;
}
.inline-form + .inline-form { margin-left: var(--space-2); }
/* ============ Admin dashboard placeholders ============ */
.admin-section-grid {
display: grid;
gap: var(--space-3);
margin: var(--space-5) 0;
}
@media (min-width: 560px) {
.admin-section-grid { grid-template-columns: 1fr 1fr; }
}
.admin-section-tile {
display: block;
padding: var(--space-4);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
background: var(--color-card-bg);
text-decoration: none;
color: inherit;
transition: border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.admin-section-tile[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.85;
}
.admin-section-tile:not([aria-disabled="true"]):hover {
border-color: var(--color-brand-navy);
background: var(--color-help-bg);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(13, 25, 57, 0.08);
}
.admin-section-tile__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-2);
}
.admin-section-tile__title {
font-size: var(--text-body);
font-weight: 600;
color: var(--color-brand-navy);
margin: 0;
}
.admin-section-tile__description {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin: 0;
}
/* ============ Admin list / data table ============ */
.auth-card--admin {
max-width: 1100px;
}
.admin-content > .auth-card--admin {
max-width: none;
width: 100%;
}
/* ============ Legal / RSS-content viewer ============ */
.legal-card__title {
font-size: var(--text-h1);
font-weight: 600;
margin-bottom: 40px;
background-color: var(--color-brand-navy);
color: #fff;
width: 100%;
padding: 60px 0;
text-align: center;
}
.auth-card--legal {
max-width: 760px;
padding: 24px;
font-family: var(--font-body);
}
.legal-content {
color: var(--color-text-primary);
font-size: var(--text-body);
line-height: 1.65;
}
.legal-content h1,
.legal-content h2,
.legal-content h3 {
color: var(--color-brand-navy);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
line-height: 1.25;
}
.legal-content h1 { font-size: var(--text-h2); }
.legal-content h2 { font-size: var(--text-h3); }
.legal-content h3 { font-size: var(--text-h4); }
.legal-content h1:first-child,
.legal-content h2:first-child,
.legal-content h3:first-child { margin-top: 0; }
.legal-content p { margin: var(--space-3) 0; }
.legal-content ul,
.legal-content ol { padding-left: var(--space-5); margin: var(--space-3) 0; }
.legal-content li { margin: var(--space-2) 0; }
.legal-content--faq ol > li > p { font-weight: 400; font-size: 16px; line-height: 22px; }
.legal-content--faq ol > li > p:first-child { font-size: 24px; line-height: 34px; }
.legal-content a {
color: var(--color-brand-teal);
text-decoration: underline;
transition: color 200ms cubic-bezier(0.34, 1.56, 0.64, 1), text-decoration-thickness 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.legal-content a:hover {
color: var(--color-brand-purple);
text-decoration-thickness: 2px;
}
.legal-content strong { font-weight: 700; }
.legal-content blockquote {
border-left: 3px solid rgba(0, 0, 0, 0.1);
margin: var(--space-4) 0;
padding-left: var(--space-4);
}
.legal-source {
margin-top: var(--space-6);
padding-top: var(--space-3);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.admin-breadcrumb {
font-size: var(--text-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-3);
}
.admin-breadcrumb a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color 200ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
display: inline-block;
}
.admin-breadcrumb a:hover {
color: var(--color-brand-navy);
text-decoration: underline;
transform: translateX(2px);
}
.admin-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin: var(--space-4) 0 var(--space-5);
padding: var(--space-4);
background: var(--color-help-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-filter-bar:hover {
background-color: #F5F3F0;
border-color: var(--color-brand-navy);
box-shadow: 0 2px 8px rgba(13, 25, 57, 0.05);
}
.admin-filter-bar__search {
flex: 1 1 280px;
min-width: 240px;
}
.admin-filter-bar__filter {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1 1 auto;
}
.admin-filter-bar__filter .form-label {
margin: 0;
font-size: var(--text-sm);
white-space: nowrap;
}
.admin-filter-bar__filter .form-select,
.admin-filter-bar__filter .form-input {
min-height: 36px;
padding: 0 var(--space-3);
font-size: var(--text-sm);
}
.admin-filter-bar__chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.admin-filter-bar__actions {
display: flex;
gap: var(--space-2);
margin-left: auto;
flex-wrap: wrap;
justify-content: flex-end;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--color-card-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-pill);
font-size: var(--text-sm);
cursor: pointer;
user-select: none;
transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-chip:hover {
border-color: var(--color-brand-navy);
box-shadow: 0 2px 8px rgba(13, 25, 57, 0.1);
transform: translateY(-1px);
}
.filter-chip:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
.filter-chip input[type="checkbox"] { accent-color: var(--color-brand-navy); }
.filter-chip--select { padding-right: var(--space-2); }
.filter-chip__select {
background: transparent;
border: 0;
font: inherit;
color: inherit;
cursor: pointer;
transition: opacity 150ms ease;
}
.filter-chip__select:hover {
opacity: 0.7;
}
.admin-table-wrap {
overflow-x: auto;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
transition: box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.admin-table-wrap:hover {
box-shadow: 0 8px 24px rgba(13, 25, 57, 0.08);
border-color: var(--color-brand-navy);
transform: translateY(-2px);
}
.admin-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--text-sm);
}
.admin-table thead th {
text-align: left;
padding: var(--space-3) var(--space-4);
background: var(--color-help-bg);
color: var(--color-text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: var(--text-xs);
letter-spacing: 0.04em;
border-bottom: 1px solid var(--color-divider);
transition: background-color 150ms ease, color 150ms ease;
}
.admin-table tbody td {
padding: var(--space-4);
border-bottom: 1px solid var(--color-divider);
vertical-align: middle;
transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
border-radius 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
max-width: 260px;
overflow-wrap: break-word;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr {
background-color: transparent;
opacity: 0;
animation: tableRowFadeIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.admin-table tbody tr:nth-child(1) { animation-delay: 40ms; }
.admin-table tbody tr:nth-child(2) { animation-delay: 80ms; }
.admin-table tbody tr:nth-child(3) { animation-delay: 120ms; }
.admin-table tbody tr:nth-child(4) { animation-delay: 160ms; }
.admin-table tbody tr:nth-child(5) { animation-delay: 200ms; }
.admin-table tbody tr:nth-child(6) { animation-delay: 240ms; }
.admin-table tbody tr:nth-child(7) { animation-delay: 280ms; }
.admin-table tbody tr:nth-child(8) { animation-delay: 320ms; }
.admin-table tbody tr:nth-child(9) { animation-delay: 360ms; }
.admin-table tbody tr:nth-child(n+10) { animation-delay: 400ms; }
@keyframes tableRowFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.admin-table tbody tr:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 24px rgba(13, 25, 57, 0.12);
z-index: 10;
}
.admin-table tbody tr:hover td {
background-color: var(--color-card-bg);
border-bottom-color: transparent;
}
.admin-table tbody tr:hover td:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.admin-table tbody tr:hover td:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
/* ============ Table Modifiers ============ */
.admin-table--striped tbody tr:nth-child(even) td {
background-color: rgba(13, 25, 57, 0.02);
}
.admin-table--striped tbody tr:hover td {
background-color: var(--color-card-bg);
}
.admin-table--dense thead th,
.admin-table--dense tbody td {
padding: var(--space-2) var(--space-3);
}
.admin-table--dense tbody td {
font-size: var(--text-xs);
}
@media (max-width: 768px) {
.admin-table-wrap:has(.admin-table--responsive) {
border: none;
box-shadow: none;
background: transparent;
overflow-x: visible;
}
.admin-table-wrap:has(.admin-table--responsive):hover {
transform: none;
}
.admin-table--responsive,
.admin-table--responsive tbody,
.admin-table--responsive tr,
.admin-table--responsive td {
display: block;
width: 100%;
}
.admin-table--responsive thead {
display: none;
}
.admin-table--responsive tbody tr {
margin-bottom: var(--space-4);
background-color: var(--color-card-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
box-shadow: var(--shadow-card);
}
.admin-table--responsive tbody td {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-1);
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-divider);
text-align: left !important;
max-width: 100%;
}
.admin-table--responsive tbody td:last-child {
border-bottom: 0;
}
.admin-table--responsive tbody td::before {
content: attr(data-label);
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
}
.admin-table--responsive.admin-table--striped tbody tr:nth-child(even) td {
background-color: transparent;
}
.admin-table--responsive tbody tr:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 12px 32px rgba(13, 25, 57, 0.16);
}
.admin-table--responsive tbody tr:hover td {
background-color: transparent;
}
.admin-table--responsive tbody td.admin-table__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start !important;
gap: var(--space-2);
}
.admin-table--responsive tbody td.admin-table__actions::before {
flex: 0 0 100%;
margin-bottom: var(--space-1);
}
}
.admin-table__primary {
font-weight: 600;
color: var(--color-text-primary);
}
.admin-table__secondary {
color: var(--color-text-secondary);
font-size: var(--text-xs);
}
.admin-table__num { text-align: right; white-space: nowrap; }
.admin-table__actions {
text-align: right;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
}
.admin-table__actions .btn + .btn { margin-left: 0; }
.admin-table thead th.admin-table__actions,
.admin-table thead th.admin-table__num { text-align: right; justify-content: flex-end; }
.admin-table .badge + .badge { margin-left: var(--space-2); }
/* ============ Audit Log Formatting ============ */
.audit-event {
font-weight: 600;
color: var(--color-brand-navy);
}
.audit-date {
display: block;
color: var(--color-text-primary);
font-size: var(--text-sm);
font-weight: 500;
white-space: nowrap;
}
.audit-time {
display: block;
color: var(--color-text-secondary);
font-size: var(--text-xs);
white-space: nowrap;
margin-top: 2px;
}
.audit-actor {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.audit-ip {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-secondary);
background-color: var(--color-help-bg);
border: 1px solid var(--color-divider);
padding: 2px 6px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.admin-table--audit {
table-layout: fixed;
width: 100%;
}
.admin-table--audit .audit-col-when { width: 14%; }
.admin-table--audit .audit-col-actor { width: 18%; }
.admin-table--audit .audit-col-action { width: 14%; }
.admin-table--audit .audit-col-target { width: 19%; }
.admin-table--audit .audit-col-reason { width: 35%; }
.admin-table--audit tbody td {
padding-top: var(--space-3);
padding-bottom: var(--space-3);
vertical-align: top;
max-width: none;
overflow-wrap: anywhere;
}
.audit-tag {
display: inline-block;
max-width: 100%;
padding: 4px var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-help-bg);
color: var(--color-text-primary);
border: 1px solid var(--color-divider);
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
white-space: normal;
word-break: break-word;
}
.audit-tag--success {
background: rgba(46, 125, 50, 0.10);
color: var(--color-success);
border-color: rgba(46, 125, 50, 0.32);
}
.audit-tag--warning {
background: rgba(217, 119, 6, 0.10);
color: #B45309;
border-color: rgba(217, 119, 6, 0.32);
}
.audit-tag--info {
background: rgba(13, 25, 57, 0.06);
color: var(--color-brand-navy);
border-color: rgba(13, 25, 57, 0.18);
}
.audit-reason {
color: var(--color-text-primary);
font-weight: 500;
line-height: 1.45;
}
.audit-details {
margin-top: var(--space-2);
}
.audit-details > summary {
list-style: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px 2px 4px;
border-radius: var(--radius-sm);
color: var(--color-brand-navy);
font-size: var(--text-xs);
font-weight: 600;
user-select: none;
}
.audit-details > summary::-webkit-details-marker { display: none; }
.audit-details > summary::before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.15s ease;
}
.audit-details[open] > summary::before { transform: rotate(90deg); }
.audit-details > summary:hover { background: var(--color-help-bg); }
.audit-details > summary:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
.audit-details__panel {
margin-top: var(--space-2);
padding: var(--space-3);
background: var(--color-help-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-sm);
}
.audit-details__field {
display: grid;
grid-template-columns: 96px 1fr;
gap: var(--space-3);
padding: var(--space-2) 0;
align-items: start;
}
.audit-details__field + .audit-details__field {
border-top: 1px dashed var(--color-divider);
}
.audit-details__field:first-child { padding-top: 0; }
.audit-details__field:last-child { padding-bottom: 0; }
.audit-details__label {
color: var(--color-text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.05em;
padding-top: 4px;
}
.audit-details__value {
color: var(--color-text-primary);
font-size: var(--text-xs);
word-break: break-word;
margin: 0;
}
@media (max-width: 768px) {
.audit-details__field {
grid-template-columns: 1fr;
gap: var(--space-1);
}
.audit-details__label { padding-top: 0; }
}
.admin-empty {
padding: var(--space-6) var(--space-4);
text-align: center;
color: var(--color-text-secondary);
border: 1px dashed var(--color-divider);
border-radius: var(--radius-md);
}
.admin-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
}
.admin-pagination__status {
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.admin-pagination__controls {
display: flex;
gap: var(--space-2);
}
.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;
}
/* ============ Admin detail page ============ */
.admin-detail-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.admin-detail-header__title {
text-align: left;
margin: 0;
}
.admin-detail-header__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* ============ Admin Forms (Create/Edit Users) ============ */
.admin-form {
max-width: 800px;
}
.admin-form-grid {
display: grid;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.admin-form-grid .form-group {
margin-bottom: 0;
}
@media (min-width: 768px) {
.admin-form-grid {
grid-template-columns: 1fr 1fr;
}
.admin-form-grid .form-group--full {
grid-column: 1 / -1;
}
}
.admin-detail-grid {
display: grid;
gap: 0;
}
.kv-list {
display: grid;
grid-template-columns: minmax(140px, 200px) 1fr;
gap: var(--space-2) var(--space-4);
margin: 0;
font-size: var(--text-sm);
}
.kv-list dt {
color: var(--color-text-secondary);
font-weight: 500;
}
.kv-list dd {
margin: 0;
color: var(--color-text-primary);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.kv-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-xs);
color: var(--color-text-secondary);
background: var(--color-help-bg);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
}
.kv-suffix {
color: var(--color-text-secondary);
font-size: var(--text-xs);
}
.role-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.uri-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.admin-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
/* ============ Admin shell ============ */
.admin-shell {
display: flex;
flex-direction: column;
min-height: 80vh;
width: 100%;
}
.page__main:has(> .admin-shell) {
align-items: stretch;
padding: 0;
}
.admin-topbar {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
background: var(--color-brand-navy);
color: var(--color-text-inverse);
border-radius: var(--radius-md);
margin: var(--space-3) var(--space-4);
}
.admin-topbar__brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
flex: 1 1 auto;
min-width: 0;
}
.admin-topbar__logo {
height: 32px;
width: auto;
}
.admin-topbar__brand-text {
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.admin-topbar__identity {
display: inline-flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto;
}
.admin-topbar__email {
font-size: var(--text-sm);
opacity: 0.9;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-topbar__signout-form { margin: 0; display: inline; }
.admin-topbar__signout {
background: transparent;
border: 0;
cursor: pointer;
font: inherit;
color: var(--color-text-inverse);
text-decoration: underline;
min-height: auto;
padding: 0;
}
.admin-topbar__signout:hover { opacity: 0.85; }
.admin-topbar__menu-toggle {
display: none;
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
padding: var(--space-2);
}
.admin-shell__body {
display: flex;
gap: var(--space-4);
margin: 0 var(--space-4);
padding-bottom: var(--space-6);
}
.admin-sidebar {
flex: 0 0 200px;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3) var(--space-2);
background: var(--color-card-bg);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
align-self: flex-start;
position: sticky;
top: var(--space-3);
transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-sidebar:hover {
box-shadow: 0 2px 8px rgba(13, 25, 57, 0.06);
border-color: var(--color-brand-navy);
}
@media (min-width: 1200px) {
.admin-sidebar {
flex: 0 0 240px;
padding: var(--space-4) var(--space-3);
top: var(--space-4);
}
}
@media (min-width: 1920px) {
.admin-sidebar {
flex: 0 0 280px;
padding: var(--space-5) var(--space-4);
top: var(--space-5);
}
}
.admin-sidebar__item {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
color: var(--color-text-primary);
text-decoration: none;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
color 150ms cubic-bezier(0.4, 0, 0.2, 1),
transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.admin-sidebar__item:hover {
background: var(--color-help-bg);
transform: translateX(2px);
}
.admin-sidebar__item:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: -2px;
}
.admin-sidebar__item.active {
background: var(--color-brand-navy);
color: var(--color-text-inverse);
}
.admin-sidebar__item--secondary { color: var(--color-text-secondary); }
.admin-sidebar__divider {
border: 0;
border-top: 1px solid var(--color-divider);
margin: var(--space-2) var(--space-3);
}
.admin-content {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 768px) {
.admin-topbar__menu-toggle { display: inline-flex; align-items: center; }
.admin-topbar__email { display: none; }
.admin-shell__body { flex-direction: column; }
.admin-sidebar {
position: absolute;
z-index: 50;
left: var(--space-4);
right: var(--space-4);
width: auto;
flex: none;
display: none;
}
.admin-sidebar.admin-sidebar--open { display: flex; }
}
.admin-content > .auth-card--admin {
margin: 0 auto;
}
/* ============ Audit log metadata block ============ */
/* Metadata as labelled rows, parsed in HumanizedAuditEntry. */
.audit-meta {
margin: var(--space-2) 0 0;
padding: 0;
background: var(--color-help-bg);
border: 1px solid var(--color-divider);
border-left: 3px solid var(--color-brand-purple);
border-radius: var(--radius-sm);
overflow: hidden;
}
.audit-meta__row {
display: grid;
grid-template-columns: minmax(96px, 40%) 1fr;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
}
.audit-meta__row + .audit-meta__row {
border-top: 1px dashed var(--color-divider);
}
.audit-meta__key {
margin: 0;
font-size: var(--text-xs);
font-weight: 600;
color: var(--color-text-secondary);
}
.audit-meta__value {
margin: 0;
font-size: var(--text-xs);
color: var(--color-text-primary);
word-break: break-word;
overflow-wrap: anywhere;
}
@media (max-width: 768px) {
.audit-meta__row {
grid-template-columns: 1fr;
gap: 2px;
}
}
/* Fallback for metadata that is not a readable JSON object. Wraps rather than scrolling. */
.audit-metadata {
margin: var(--space-2) 0 0;
padding: var(--space-2) var(--space-3);
background: var(--color-help-bg);
border: 1px solid var(--color-divider);
border-left: 3px solid var(--color-brand-purple);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-text-secondary);
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
/* ============================================================================
Responsiveness pass
----------------------------------------------------------------------------
Breakpoints:
≤ 480px Mobile portrait (iPhone SE etc.) — tightest layout
≤ 768px Mobile landscape / small tablet — single-column shapes
≤ 1024px Tablet portrait — admin shell still side-by-side, lighter chrome
Layered "mobile-last" overrides — desktop is the chassis, narrow
viewports get targeted fixes here. Mobile-first wasn't the original
chassis, so this section closes the gap rather than rewriting it.
========================================================================= */
@media (max-width: 1024px) {
.admin-shell__body { gap: var(--space-3); }
}
@media (max-width: 768px) {
.form-actions--row {
flex-direction: column;
align-items: stretch;
}
.form-actions--row > .btn,
.form-actions--row > a.btn { width: 100%; }
.kv-list { grid-template-columns: 1fr; gap: var(--space-1) 0; }
.kv-list dt {
margin-top: var(--space-3);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kv-list dt:first-of-type { margin-top: 0; }
.kv-list dd { margin-bottom: var(--space-2); }
.admin-filter-bar { flex-direction: column; align-items: stretch; }
.admin-filter-bar__search { min-width: 0; flex: 1 1 auto; }
.admin-filter-bar__actions { margin-left: 0; }
.admin-filter-bar__actions .btn { flex: 1 1 auto; }
.admin-pagination {
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
}
.admin-pagination__controls { justify-content: space-between; }
.admin-pagination__controls > * { flex: 1 1 auto; text-align: center; }
.admin-detail-header { flex-direction: column; align-items: flex-start; }
.admin-section-grid { grid-template-columns: 1fr; }
.settings-grid { grid-template-columns: 1fr; gap: var(--space-3); }
.admin-sidebar {
position: fixed;
top: 80px;
left: var(--space-3);
right: var(--space-3);
box-shadow: 0 12px 32px rgba(13, 25, 57, 0.18);
}
body:has(.admin-sidebar--open)::before {
content: "";
position: fixed;
inset: 0;
background: rgba(13, 25, 57, 0.32);
z-index: 40;
}
}
/* -------- Auth-flow + Manage pages (≤ 768px) -------- */
@media (max-width: 768px) {
.rule-list li { line-height: 1.5; padding-left: 1.4em; }
.form-check {
align-items: flex-start;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
margin-top: 0.2em;
flex: 0 0 auto;
}
.settings-grid > .settings-nav {
flex-direction: row;
overflow-x: auto;
gap: var(--space-2);
padding-bottom: var(--space-2);
scrollbar-width: thin;
}
.settings-grid > .settings-nav a {
flex: 0 0 auto;
white-space: nowrap;
}
.auth-card__body > .form-actions--row .btn { flex: 1 1 auto; }
}
/* -------- Mobile portrait (≤ 480px) -------- */
@media (max-width: 480px) {
.admin-topbar { padding: var(--space-3); margin: var(--space-2) var(--space-2); width: auto; }
.admin-topbar__brand-text { display: none; }
.admin-topbar__logo { height: 28px; }
.auth-card__body { padding: var(--space-4) var(--space-3); }
.kv-mono {
font-size: 11px;
word-break: break-all;
}
.admin-table__primary,
.admin-table__secondary,
.kv-list dd { overflow-wrap: anywhere; }
.admin-sidebar__item { padding: var(--space-3); }
.filter-chip { padding: var(--space-3); }
.auth-card__title { font-size: 24px; line-height: 1.2; }
.auth-card__subtitle { font-size: var(--text-sm); }
.form-label { font-size: var(--text-sm); }
.form-help { font-size: var(--text-xs); line-height: 1.4; }
.page__main { padding-top: clamp(16px, 4vh, 32px); }
}
@media (max-width: 768px) {
.auth-card__body { padding-bottom: var(--space-5); }
.admin-filter-bar {
flex-direction: column;
padding: var(--space-3);
}
.admin-filter-bar__search {
width: 100%;
order: 1;
}
.admin-filter-bar__filter {
order: 2;
width: 100%;
flex-direction: column;
align-items: stretch;
}
.admin-filter-bar__chips {
order: 3;
width: 100%;
}
.admin-filter-bar__actions {
order: 4;
width: 100%;
margin-left: 0;
justify-content: space-between;
gap: var(--space-3);
}
.admin-filter-bar__actions .btn {
flex: 1 1 auto;
min-width: 100px;
}
}
/* -------- Large desktop optimization (≥ 1200px) -------- */
@media (min-width: 1200px) {
.admin-filter-bar {
gap: var(--space-3);
}
.admin-filter-bar__search {
flex: 1 1 320px;
}
.admin-table thead th {
font-size: 12px;
letter-spacing: 0.05em;
}
.admin-table tbody td {
font-size: clamp(14px, 1.5vw, 16px);
}
.admin-table__secondary {
font-size: clamp(12px, 1.2vw, 14px);
}
.admin-pagination {
gap: var(--space-4);
margin-top: var(--space-6);
}
}
/* -------- 4K displays (≥ 1920px) --------
Maximum spacing, larger typography, and enhanced visual hierarchy. */
@media (min-width: 1920px) {
.admin-filter-bar {
gap: var(--space-4);
padding-bottom: var(--space-4);
}
.admin-filter-bar__search {
flex: 1 1 400px;
}
.admin-table {
font-size: 16px;
}
.admin-table thead th {
font-size: 13px;
letter-spacing: 0.05em;
}
.admin-table tbody td {
font-size: 16px;
}
.admin-table__secondary {
font-size: 14px;
}
.admin-breadcrumb {
font-size: 15px;
margin-bottom: var(--space-5);
}
.admin-pagination {
gap: var(--space-5);
margin-top: var(--space-8);
}
}
/* -------- Touch device hints (any width) -------- */
@media (pointer: coarse) {
.btn { min-height: 44px; }
.filter-chip { min-height: 36px; }
.admin-sidebar__item { min-height: 44px; display: flex; align-items: center; }
}
/* -------- Reduce-motion users -------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* -------- Copyable field examples (Admin OAuth client forms) -------- */
.field-examples {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-2);
}
.field-examples__label {
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.copy-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
font-family: var(--font-mono);
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-text-primary);
background: var(--color-help-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--radius-pill);
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.copy-chip::after {
content: "\2398";
font-family: var(--font-body);
font-size: 0.75rem;
opacity: 0.55;
}
.copy-chip:hover {
background: var(--color-card-bg);
border-color: var(--color-link);
}
.copy-chip.is-copied {
color: var(--color-success);
border-color: var(--color-success);
}
.copy-chip.is-copied::after {
content: "\2713";
opacity: 1;
}
/* ========================================================================== */
/* layout.css — page chrome (banner, layout, auth card, Need Help pill) */
/* Loaded after components.css. Mobile-first; breakpoints scale up. */
/* ========================================================================== */
/* ============ Page shell ============ */
.page {
display: flex;
flex-direction: column;
flex-wrap: wrap;
min-height: 100dvh;
}
.page__banner {
height: var(--banner-height);
background-color: var(--color-brand-purple);
flex-shrink: 0;
}
.page__main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
padding: clamp(40px, 8vh, 96px) var(--content-gutter) var(--space-8);
background: transparent;
}
.page__main::before {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-color: var(--color-page-bg);
background-image: var(--page-pattern);
background-repeat: no-repeat;
background-position: right top;
pointer-events: none;
will-change: transform;
transform: translateZ(0);
}
.page__footer {
padding: var(--space-4) var(--content-gutter);
color: var(--color-text-secondary);
font-size: var(--text-xs);
text-align: center;
border-top: 1px solid var(--color-divider);
background: var(--color-page-bg);
}
.page__main-bg {
background: var(--color-card-bg);
}
/* ============ Auth card ============ */
.auth-card {
width: 100%;
max-width: var(--card-max-width);
background: var(--color-card-bg);
border: 1px solid var(--color-card-border);
border-radius: var(--card-radius);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.auth-card__stripe {
position: relative;
background-color: var(--color-brand-teal);
min-height: 128px;
}
.auth-card__logo {
position: absolute;
top: 20px;
left: 17px;
width: 224px;
height: 88px;
object-fit: contain;
object-position: left center;
}
.auth-card__logo-link {
position: absolute;
top: 20px;
left: 17px;
display: inline-block;
width: 224px;
height: 88px;
border-radius: 6px;
}
.auth-card__logo-link:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 4px;
}
.auth-card__logo-link .auth-card__logo {
position: static;
width: 100%;
height: 100%;
}
@media (max-width: 480px) {
.auth-card__stripe { min-height: 104px; }
.auth-card__logo { top: 16px; left: 14px; width: 180px; height: 72px; }
.auth-card__logo-link { top: 16px; left: 14px; width: 180px; height: 72px; }
}
@media (max-width: 360px) {
.auth-card__stripe { min-height: 88px; }
.auth-card__logo { top: 12px; left: 12px; width: 150px; height: 60px; }
.auth-card__logo-link { top: 12px; left: 12px; width: 150px; height: 60px; }
}
.auth-card__body {
padding: 24px 16px var(--card-padding-b);
}
@media (min-width: 480px) {
.auth-card__body {
padding: 32px var(--card-padding-x) var(--card-padding-b);
}
}
.auth-card__title {
text-align: center;
margin-bottom: var(--space-2);
font-family: var(--font-heading);
font-weight: 800;
font-size: var(--text-h1);
line-height: var(--line-tight);
letter-spacing: -0.01em;
}
.auth-card__title--state {
text-align: left;
font-family: var(--font-body);
font-weight: 600;
color: var(--color-brand-purple);
font-size: var(--text-h3);
line-height: var(--line-snug);
margin-bottom: var(--space-3);
}
.auth-card__body--state {
text-align: left !important;
}
.auth-card__subtitle {
text-align: center;
color: var(--color-text-secondary);
font-size: var(--text-sm);
margin-bottom: var(--space-5);
}
.auth-card__subtitle a { font-weight: 600; }
.auth-card--wide {
max-width: 540px;
}
/* ============ Two-column auth layout (Register + side help panel) ============ */
.auth-layout {
display: grid;
gap: var(--space-5);
width: 100%;
max-width: var(--card-max-width);
}
@media (min-width: 992px) {
.auth-layout--with-aside {
grid-template-columns: minmax(0, 1fr) 280px;
max-width: 760px;
}
}
.auth-aside {
background: var(--color-help-bg);
border-radius: var(--radius-lg);
padding: var(--space-5);
align-self: start;
font-size: var(--text-sm);
color: var(--color-text-secondary);
}
.auth-aside h2, .auth-aside h3 {
color: var(--color-text-primary);
margin-bottom: var(--space-3);
}
/* ============ Need Help floating pill ============ */
.need-help-pill {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 40;
min-width: 118px;
min-height: 45px;
display: inline-flex;
align-items: center;
padding: 10px var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background-color: var(--color-accent-yellow);
color: var(--color-text-primary);
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
box-shadow: var(--shadow-pill);
cursor: pointer;
text-decoration: none;
}
.need-help-pill:hover { background-color: var(--color-accent-yellow-hover); }
.need-help-pill:focus-visible { outline-color: var(--color-brand-navy); }
@media (min-width: 768px) {
.need-help-pill { bottom: 24px; right: 24px; padding: 12px 18px; }
}
/* ============ Top header (signed-in / signed-out) ============ */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--content-gutter);
border-bottom: 1px solid var(--color-divider);
background: var(--color-card-bg);
}
.site-header__brand {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-primary);
text-decoration: none;
}
.site-header__brand img {
height: 56px;
width: auto;
display: block;
/*image-rendering: auto;
-webkit-backface-visibility: hidden;
transform: translateZ(0);*/
}
.site-header__actions {
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.site-header__greeting {
color: var(--color-brand-purple);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-h3);
max-width: 36ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-menu {
position: relative;
}
.user-menu summary {
list-style: none;
cursor: pointer;
}
.user-menu summary::-webkit-details-marker { display: none; }
.user-menu summary::marker { display: none; }
.user-menu__avatar {
width: 36px;
height: 36px;
border: 0;
border-radius: var(--radius-pill);
background: rgb(92 46 145 / 0.12) center/22px no-repeat
url("data:image/svg+xml;utf8,");
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.user-menu__avatar::after {
content: "▾";
margin-left: 28px;
color: var(--color-text-primary);
font-size: 12px;
}
.hamburger {
display: none;
width: 36px;
height: 36px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-brand-navy);
cursor: pointer;
align-items: center;
justify-content: center;
}
/* ============================================================================
Visual polish harvested from cn-ecs-identity-app-other.
Additive, class-based, source-order-last so it can't break existing rules.
Reduced-motion-guarded; tokens (--card-padding-x, --space-*) already exist.
============================================================================ */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.page__main { animation: none !important; }
.need-help-pill { animation: none !important; }
}
.auth-card__subtitle a {
font-weight: 600;
display: inline-block;
transition: color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.auth-card__subtitle a:hover {
color: var(--color-brand-purple);
transform: translateY(-1px) scale(1.02);
}
.need-help-pill {
transition: background-color 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.need-help-pill:focus-visible {
outline: 2px solid var(--color-brand-navy);
outline-offset: 2px;
}
@media (min-width: 1200px) {
.auth-card__body { padding: 40px calc(var(--card-padding-x) + 8px) 48px; }
.auth-card__title { font-size: clamp(28px, 3vw, 36px); margin-bottom: var(--space-3); }
.auth-card__subtitle { font-size: clamp(14px, 1.5vw, 16px); margin-bottom: var(--space-6); }
}
@media (min-width: 1920px) {
.auth-card { border-radius: 12px; }
.auth-card__body { padding: 48px calc(var(--card-padding-x) + 12px) 56px; }
}
@media (max-width: 575px) {
.site-header__greeting { display: none; }
.site-header .btn:not(.user-menu__avatar) { display: none; }
.hamburger { display: inline-flex; }
}
/* ============ Print ============ */
@media print {
.need-help-pill,
.page__banner,
.site-header { display: none !important; }
}
.form-input:hover,
.form-select:hover,
.form-textarea:hover {
border-color: var(--color-card-border);
box-shadow: none;
transform: none;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
box-shadow: none;
transform: none;
}
.form-input[aria-invalid="true"],
.form-input.is-invalid,
.form-input.input-validation-error,
.form-select.is-invalid,
.form-select.input-validation-error,
.form-textarea.is-invalid,
.form-textarea.input-validation-error {
box-shadow: none;
}
.form-check:hover input[type="checkbox"],
.form-check:hover input[type="radio"] {
transform: none;
box-shadow: none;
}
.btn:hover:not([disabled]),
.btn:active:not([disabled]) {
transform: none;
}
.btn--secondary:hover:not([disabled]),
.btn--secondary:active:not([disabled]),
.btn--action:hover:not([disabled]),
.btn--action-danger:hover:not([disabled]),
.btn--action-warning:hover:not([disabled]),
.btn--danger:hover:not([disabled]),
.btn--danger:active:not([disabled]) {
box-shadow: none;
}
.btn--secondary:hover:not([disabled]) {
background-color: #F9F9F8;
border-color: #D5D7DA;
}
.auth-card__subtitle a:hover,
.forgot-link:hover,
.link-inline:hover,
.need-help-pill:hover,
.settings-nav a:hover,
.user-menu__item:hover,
.admin-sidebar__item:hover,
.admin-breadcrumb a:hover {
transform: none;
}
.admin-sidebar:hover,
.admin-filter-bar:hover,
.admin-table-wrap:hover,
.filter-chip:hover,
.radio-card:hover,
.radio-card:has(input[type="radio"]:checked),
.admin-section-tile:not([aria-disabled="true"]):hover,
.admin-table tbody tr:hover,
.admin-table--responsive tbody tr:hover {
box-shadow: none;
}
.admin-table-wrap:hover,
.filter-chip:hover,
.radio-card:hover,
.admin-section-tile:not([aria-disabled="true"]):hover,
.admin-table tbody tr:hover,
.admin-table--responsive tbody tr:hover {
transform: none;
}
.page__main::before {
background-position: right top;
}
.form-label {
margin-bottom: 0;
}
.user-menu__avatar {
display: inline-flex;
align-items: center;
gap: 10px;
width: auto;
height: 42px;
border: 0;
border-radius: 0;
background: transparent;
}
.site-header__greeting {
font-size: 24px;
line-height: 32px;
margin-right: 18px;
}
.user-menu__avatar::before {
content: "";
box-sizing: border-box;
width: 42px;
height: 42px;
border: 1px solid #EFEEEE;
border-radius: var(--radius-pill);
background: url("/img/avatar-swirl.svg") center/cover no-repeat;
}
.user-menu__avatar::after {
content: "";
width: 16px;
height: 16px;
margin-left: 0;
background-color: var(--color-brand-navy);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.2 8.7 11.6 6.8'%3E%3Cpath d='M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.2 8.7 11.6 6.8'%3E%3Cpath d='M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.user-menu[open] > .user-menu__avatar::after {
transform: rotateX(180deg);
transition: transform 200ms ease;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
background: transparent;
}
.settings-nav a:hover:not(.active),
.settings-nav a:focus-visible:not(.active),
.admin-sidebar__item:hover:not(.active),
.admin-sidebar__item:focus-visible:not(.active) {
background: #E5E7EB;
}
.auth-card__subtitle a,
.forgot-link,
.btn--link {
text-decoration: none;
}
a:hover {
color: var(--color-link);
}
.auth-card__subtitle a:hover,
.btn--link:hover:not([disabled]) {
color: var(--color-link);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.forgot-link:hover {
color: var(--color-brand-navy);
text-decoration: underline;
text-decoration-thickness: 1px;
}
.link-inline:hover {
color: var(--color-text-primary);
}
:root {
--font-heading: "Montserrat", sans-serif;
--font-body: "DM Sans", sans-serif;
}
.auth-card__title {
font-family: var(--font-heading);
}
.form-label,
.form-input,
.form-select,
.form-textarea,
.user-menu__item {
font-family: var(--font-body);
}
.user-menu > summary:focus,
.user-menu > summary:focus-visible {
outline: none;
}
.user-menu > summary {
user-select: none;
}
.user-menu__item {
font-weight: 500;
color: #414651;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
font-weight: 700;
color: #414651;
}
a,
.btn,
.btn:not([disabled]),
.form-input,
.form-select,
.form-textarea,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.settings-nav a,
.user-menu__item,
.admin-sidebar,
.admin-sidebar__item,
.admin-breadcrumb a,
.admin-section-tile,
.admin-filter-bar,
.admin-table-wrap,
.admin-table tbody tr,
.admin-table tbody td,
.filter-chip,
.radio-card,
.forgot-link,
.link-inline,
.auth-card__subtitle a,
.need-help-pill,
.password-field__toggle {
transition: background-color 120ms ease, color 120ms ease,
border-color 120ms ease, box-shadow 120ms ease,
text-decoration-color 120ms ease;
}
.settings-grid > aside .text-h3 {
white-space: nowrap;
}
@media (min-width: 1920px) {
.settings-grid { grid-template-columns: 280px 1fr; }
}
@media (min-width: 2560px) {
.settings-grid { grid-template-columns: 340px 1fr; }
}
/* ============ Access Chokwaa bar (matches chokwaa-app backLinkBar) ============ */
.auth-card__subtitle--bold {
font-weight: 600;
}
.chokwaa-backbar {
min-height: 32px;
display: flex;
align-items: center;
padding: 0 var(--content-gutter);
background: #FCF5FB;
font-family: 'DM Sans', sans-serif;
}
.chokwaa-backbar__link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-brand-navy);
font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1;
text-decoration: none;
}
.chokwaa-backbar__icon {
flex: 0 0 20px;
width: 20px;
height: 20px;
}