/* Delina admin — brand stylesheet.
*
* Served by Firebase Hosting from apps/delina_admin/hosting/style.css
* (the `**` rewrite to Cloud Run only fires on paths that don't match
* a static file in the public dir, so /style.css is served directly).
* Document() in main.server.dart injects a to /style.css in
* on every page render.
*
* Brand tokens mirror packages/delina_ui_kit/lib/src/delina_theme.dart:
* primary navy #001F5B
* secondary magenta #BF1774
* surface #FBFAFE → #E3E1EC ramp (surface-container family)
* onSurface #1A1B23
*
* Section order:
* 1. Custom properties (palette + spacing + radii)
* 2. Reset + base typography
* 3. Layout (admin-shell, admin-nav, admin-main)
* 4. Form elements (button, input, label)
* 5. Tables, cards, lists
* 6. Sign-in page
* 7. Page-specific tweaks
*/
/* ───────── 1. Tokens ───────── */
:root {
--navy-900: #001F5B;
--navy-700: #003494;
--navy-100: #D9E2FF;
--magenta-700: #BF1774;
--magenta-500: #FF5DA6;
--magenta-100: #FFD9E7;
--surface: #FBFAFE;
--surface-low: #F5F3FB;
--surface-mid: #EFEDF6;
--surface-high: #E9E7F1;
--surface-highest: #E3E1EC;
--on-surface: #1A1B23;
--on-surface-variant: #454654;
--outline: #C6C5D0;
--outline-strong: #767685;
--error: #BA1A1A;
--error-bg: #FFDAD6;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 12px 24px rgba(0, 31, 91, 0.08);
--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
Roboto, "Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}
/* ───────── 2. Reset + base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--surface);
color: var(--on-surface);
font-family: var(--font-stack);
font-size: 15px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
margin: 0 0 var(--space-3);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--on-surface);
}
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 20px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a {
color: var(--navy-700);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 80ms ease;
}
a:hover { border-bottom-color: var(--navy-700); }
code, pre {
font-family: var(--font-mono);
font-size: 13px;
background: var(--surface-high);
border-radius: var(--radius-sm);
padding: 2px 6px;
}
pre {
padding: var(--space-3);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
hr {
border: 0;
border-top: 1px solid var(--outline);
margin: var(--space-5) 0;
}
.subtle { color: var(--on-surface-variant); font-size: 14px; }
.error { color: var(--error); margin-top: var(--space-3); }
.notice {
background: var(--magenta-100);
border-left: 3px solid var(--magenta-700);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
margin-bottom: var(--space-4);
}
/* ───────── 3. Admin shell + nav ───────── */
.admin-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.admin-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
background: var(--navy-900);
color: white;
box-shadow: var(--shadow-md);
position: sticky;
top: 0;
z-index: 10;
}
.admin-nav .brand {
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
margin-right: var(--space-4);
}
.admin-nav .nav-item {
color: rgba(255, 255, 255, 0.78);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
border-bottom: none;
transition: background 80ms ease, color 80ms ease;
}
.admin-nav .nav-item:hover {
color: white;
background: rgba(255, 255, 255, 0.08);
}
.admin-nav .nav-item.active {
color: white;
background: var(--magenta-700);
}
.admin-nav .sign-out {
margin-left: auto;
color: rgba(255, 255, 255, 0.78);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: 13px;
border-bottom: none;
}
.admin-nav .sign-out:hover {
color: white;
background: rgba(255, 255, 255, 0.08);
}
.admin-main {
flex: 1;
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: var(--space-5) var(--space-5);
}
/* ───────── 4. Forms ───────── */
button, .button, input[type=submit] {
appearance: none;
border: none;
background: var(--magenta-700);
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
cursor: pointer;
transition: background 80ms ease, transform 80ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-decoration: none;
}
button:hover, .button:hover, input[type=submit]:hover { background: #a3135f; }
button:active, .button:active { transform: translateY(1px); }
button:disabled, .button:disabled, input[type=submit]:disabled {
background: var(--surface-highest);
color: var(--on-surface-variant);
cursor: not-allowed;
}
.button-secondary {
background: var(--surface-high);
color: var(--navy-900);
}
.button-secondary:hover { background: var(--surface-mid); }
.button-outline {
background: transparent;
color: var(--navy-900);
border: 1px solid var(--outline-strong);
}
.button-outline:hover { background: var(--surface-low); }
input[type=text], input[type=email], input[type=password],
input[type=url], input[type=number], input[type=search],
textarea, select {
font-family: inherit;
font-size: 14px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--outline);
border-radius: var(--radius-md);
background: white;
color: var(--on-surface);
width: 100%;
transition: border-color 80ms ease, box-shadow 80ms ease;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--magenta-700);
box-shadow: 0 0 0 3px rgba(191, 23, 116, 0.15);
}
textarea { font-family: var(--font-mono); resize: vertical; min-height: 120px; }
label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: var(--space-2);
margin-top: var(--space-3);
}
form { max-width: 720px; }
/* ───────── 5. Tables / cards / lists ───────── */
table {
border-collapse: collapse;
width: 100%;
background: white;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
margin: var(--space-4) 0;
}
th, td {
text-align: left;
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--outline);
font-size: 14px;
vertical-align: top;
}
th {
background: var(--surface-mid);
font-weight: 600;
color: var(--on-surface-variant);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-low); }
td.mono { font-family: var(--font-mono); font-size: 13px; }
.card {
background: white;
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-4);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.placeholder {
background: var(--surface-mid);
border-radius: var(--radius-md);
padding: var(--space-6);
text-align: center;
color: var(--on-surface-variant);
}
/* Badges + status pills */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
background: var(--surface-high);
color: var(--on-surface-variant);
}
.badge.active { background: #d8eed4; color: #1c4f15; }
.badge.paused { background: var(--surface-highest); color: var(--on-surface-variant); }
.badge.warning { background: #ffedb3; color: #6b4500; }
.badge.error { background: var(--error-bg); color: var(--error); }
/* ───────── 6. Sign-in page ───────── */
.sign-in-shell {
max-width: 420px;
margin: 80px auto;
padding: var(--space-6);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.sign-in-shell h1 {
font-size: 24px;
margin-bottom: var(--space-2);
}
.sign-in-shell .subtle {
margin-bottom: var(--space-5);
}
.sign-in-shell .google-signin {
width: 100%;
background: white;
color: var(--on-surface);
border: 1px solid var(--outline-strong);
font-weight: 600;
padding: var(--space-3) var(--space-4);
}
.sign-in-shell .google-signin:hover {
background: var(--surface-low);
border-color: var(--navy-900);
}
.sign-in-shell .divider {
display: flex;
align-items: center;
gap: var(--space-3);
color: var(--on-surface-variant);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: var(--space-5) 0;
}
.sign-in-shell .divider::before,
.sign-in-shell .divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--outline);
}
.sign-in-shell form { max-width: none; }
.sign-in-shell button[type=submit] { width: 100%; margin-top: var(--space-4); }
.sign-in-shell .mode-toggle {
display: block;
text-align: center;
margin-top: var(--space-3);
font-size: 13px;
color: var(--on-surface-variant);
border-bottom: none;
}
.sign-in-shell .mode-toggle:hover { color: var(--magenta-700); }
/* ───────── 7. Page-specific tweaks ───────── */
.crisis-resources .region-block {
margin-bottom: var(--space-6);
}
.crisis-resources .resources-table { margin-top: var(--space-3); }
/* Sources list — the per-source row's action cluster.
*
* The page emits:
*
*
* Goal: all three sit on one row with consistent button shape. The
* form is `display: contents` so its submit button sits as a direct
* flex child of `.lead-actions` next to the anchors. The anchors
* borrow the secondary-button look (surface-fill, navy ink) so they
* read as buttons instead of links. */
.lead-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
}
.lead-actions form { display: contents; }
.cta, a.cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: background 80ms ease, border-color 80ms ease;
white-space: nowrap;
}
.cta.primary, a.cta.primary {
background: var(--magenta-700);
color: white;
}
.cta.primary:hover, a.cta.primary:hover {
background: #a3135f;
border-color: transparent;
}
.cta.secondary, a.cta.secondary {
background: var(--surface-high);
color: var(--navy-900);
}
.cta.secondary:hover, a.cta.secondary:hover {
background: var(--surface-mid);
border-color: transparent;
}
/* Sources list — per-row card spacing */
.sources-list .source-row {
background: white;
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
box-shadow: var(--shadow-sm);
margin-bottom: var(--space-3);
}
.sources-list .source-row .source-title {
display: flex;
align-items: baseline;
gap: var(--space-3);
margin-bottom: var(--space-1);
}
.sources-list .source-row .source-title h3 {
margin: 0;
font-size: 16px;
}
.flash.error {
background: var(--error-bg);
color: var(--error);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
font-size: 13px;
margin-top: var(--space-2);
}
/* responsive */
@media (max-width: 720px) {
.admin-nav { padding: var(--space-3); gap: var(--space-1); }
.admin-nav .brand { width: 100%; margin-bottom: var(--space-2); }
.admin-nav .sign-out { margin-left: 0; }
.admin-main { padding: var(--space-4) var(--space-4); }
h1 { font-size: 22px; }
}