/* ============================================================= ADAGELY ADMIN — Application layer ------------------------------------------------------------- Built ENTIRELY on the official Adagely tokens (colors_and_type.css) and primitives (components.css). Load order in : 1) colors_and_type.css (tokens) 2) components.css (.adg-* primitives) 3) admin-app.css (this file: app shell + app components) No hsl(var(--color-*)) forks, no Tailwind. Light + dark only (dark via [data-theme="dark"]). ============================================================= */ /* ============================================================= STATUS SEMANTIC TOKENS The DS has no success/warn/danger/info tokens (the dashboard kit hard-codes them). We add a small, themed extension here, reusing the kit's exact values for light mode. ============================================================= */ :root { --success: #3E7A4E; /* kit "Published" fg */ --success-bg: #E6EFE6; /* kit "Published" bg */ --warn: var(--gold-700); /* #876419 */ --warn-bg: #F4E8CA; /* gold-100 */ --danger: var(--wine-500); /* #8C3A3A — kit "Flagged" fg */ --danger-bg: #F6E6E0; /* kit "Flagged" bg */ --info: #2E5C8A; --info-bg: #E1ECF7; } [data-theme="dark"] { --success: #6FB585; --success-bg: rgba(91, 160, 110, 0.16); --warn: var(--gold-300); --warn-bg: rgba(212, 175, 90, 0.16); --danger: #D98A7A; --danger-bg: rgba(160, 70, 60, 0.22); --info: #7FB0E6; --info-bg: rgba(80, 130, 200, 0.18); } /* ============================================================= RESET & BASE SHELL ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { min-height: 100vh; display: flex; --env-banner-h: 0px; /* 0 in prod; set by .has-env-banner */ padding-top: var(--env-banner-h); } body.has-env-banner { --env-banner-h: 24px; } a { color: inherit; text-decoration: none; } /* Env banner (dev/test only) — full-width fixed strip above the app. Background colour is injected inline by Jinja (env indicator). */ .env-banner { position: fixed; top: 0; left: 0; right: 0; height: var(--env-banner-h); z-index: 100; display: flex; align-items: center; justify-content: center; color: var(--text-on-ink); font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } /* ============================================================= SIDEBAR (aligned to the official dashboard kit: light surface) ============================================================= */ .admin-sidebar { width: 244px; min-height: 100vh; background: var(--bg-elevated); color: var(--text-muted); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: fixed; top: var(--env-banner-h); left: 0; bottom: 0; z-index: 40; transition: width var(--dur) var(--ease); overflow-x: hidden; } .admin-sidebar a, .admin-sidebar summary, .admin-sidebar button { cursor: pointer; } .sidebar-header { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 16px 16px 18px; border-bottom: 1px solid var(--line); } .sidebar-header .sidebar-wordmark { width: 110px; height: auto; display: block; } .sidebar-header .sidebar-admin-tag { margin-left: auto; font-size: 9px; } .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; } .sidebar-secondary { border-top: 1px solid var(--line); padding: 8px 0 12px; } /* Navigation items */ .nav-item { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); border-radius: 9px; margin: 1px 8px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .nav-item:hover { background: var(--bg-sunken); } .nav-item.active { color: var(--text); background: var(--bg-sunken); font-weight: 500; } .nav-item.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); } .nav-item.active i { color: var(--accent); } .nav-item i { width: 20px; text-align: center; font-size: 18px; flex-shrink: 0; } .nav-item .nav-label { flex: 1; } .nav-item.disabled { opacity: 0.4; pointer-events: none; } /* "Soon" badge */ .badge-soon { font-family: var(--font-sans); font-size: 10px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } /* Accordion (details/summary) */ .nav-accordion { list-style: none; } .nav-accordion summary { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-family: var(--font-sans); font-size: 14px; color: var(--text-muted); border-radius: 9px; margin: 1px 8px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; user-select: none; } .nav-accordion summary:hover { background: var(--bg-sunken); } .nav-accordion summary::-webkit-details-marker { display: none; } .nav-accordion summary::marker { content: ""; } .nav-accordion summary i.nav-icon { width: 20px; text-align: center; font-size: 18px; flex-shrink: 0; } .nav-accordion summary .nav-label { flex: 1; } .nav-accordion summary .chevron { font-size: 11px; transition: transform var(--dur-fast) var(--ease); } .nav-accordion[open] summary .chevron { transform: rotate(180deg); } .nav-accordion.parent-active summary { color: var(--text); } .nav-accordion.parent-active summary i.nav-icon { color: var(--accent); } /* Sub-items */ .nav-sub-items { padding: 2px 0 4px 0; } .nav-sub-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 44px; font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); border-radius: 9px; margin: 1px 8px; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); white-space: nowrap; } .nav-sub-item:hover { background: var(--bg-sunken); } .nav-sub-item.active { color: var(--text); background: var(--bg-sunken); } .nav-sub-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--accent); } .nav-sub-item i { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; } /* ============================================================= MAIN WRAPPER + TOPBAR + CONTENT ============================================================= */ .admin-main { flex: 1; margin-left: 244px; display: flex; flex-direction: column; min-height: 100vh; max-width: calc(100vw - 244px); overflow-x: hidden; transition: margin-left var(--dur) var(--ease); } .admin-topbar { height: 62px; background: var(--bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 26px; position: sticky; top: var(--env-banner-h); z-index: 30; } [data-theme="dark"] .admin-topbar { background: var(--bg); border-bottom-color: var(--line); } .topbar-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 1; max-width: 400px; } .topbar-search input { width: 100%; padding: 8px 12px 8px 34px; font-family: var(--font-sans); font-size: 13px; color: var(--text); background: var(--bg-elevated); border: 1px solid var(--line-strong); border-radius: var(--r-sm); outline: none; box-shadow: var(--shadow-inset); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .topbar-search input::placeholder { color: var(--text-faint); } .topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .topbar-search .topbar-search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 15px; pointer-events: none; } /* Search dropdown panel */ .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 50; } .search-dropdown:empty { display: none; } .search-results-inner, .search-empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .search-results-inner { max-height: 400px; overflow-y: auto; padding: 8px 0; } .search-group { padding: 4px 0; } .search-group + .search-group { border-top: 1px solid var(--line); } .search-group-header { display: flex; align-items: center; gap: 6px; padding: 6px 14px; font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .search-group-header i { font-size: 12px; width: 14px; text-align: center; } .search-item { display: flex; flex-direction: column; gap: 1px; padding: 7px 14px 7px 34px; text-decoration: none; color: inherit; transition: background var(--dur-fast) var(--ease); } .search-item:hover { background: var(--bg-sunken); } .search-item-title { font-family: var(--font-sans); font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-item-sub { font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-item mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; } .search-deep-link { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-family: var(--font-sans); font-size: 12px; color: var(--accent-text); text-decoration: none; border-top: 1px solid var(--line); } .search-deep-link:hover { background: var(--bg-sunken); } .search-empty { padding: 16px; text-align: center; font-family: var(--font-serif); font-size: 13px; font-style: italic; color: var(--text-muted); } .topbar-right { display: flex; align-items: center; gap: 16px; } .topbar-theme-label { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); } /* Theme dropdown */ .theme-dropdown { position: relative; } .theme-dropdown-btn { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); background: none; border: 1px solid transparent; border-radius: var(--r-sm); padding: 4px 8px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .theme-dropdown-btn:hover { border-color: var(--accent); color: var(--text); } .theme-dropdown-btn i { margin-right: 4px; font-size: 11px; } .theme-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); min-width: 120px; z-index: 50; overflow: hidden; } .theme-dropdown.open .theme-dropdown-menu { display: block; } .theme-dropdown-item { display: block; width: 100%; padding: 8px 14px; font-family: var(--font-sans); font-size: 13px; color: var(--text); background: none; border: none; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .theme-dropdown-item:hover { background: var(--bg-sunken); } .theme-dropdown-item.active { color: var(--accent-text); font-weight: 600; } .theme-dropdown-item i { width: 18px; text-align: center; margin-right: 6px; font-size: 12px; } .topbar-avatar { width: 32px; height: 32px; border-radius: var(--r-pill); background: var(--accent); color: var(--text-on-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 13px; font-weight: 600; flex-shrink: 0; } .topbar-user-name { font-family: var(--font-sans); font-size: 13px; color: var(--text); font-weight: 500; } .hamburger-btn { display: none; background: none; border: none; color: var(--text); font-size: 18px; cursor: pointer; padding: 4px; } .admin-content { flex: 1; padding: 24px; background: var(--bg); } /* ============================================================= APP COMPONENT — Page header ============================================================= */ .admin-page-header { margin-bottom: var(--sp-5); } .admin-page-header h1 { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.01em; color: var(--text); margin-bottom: var(--sp-1); } .admin-page-header p { font-family: var(--font-sans); font-size: 13px; color: var(--text-muted); } .admin-page-header--lg h1 { font-size: 30px; } /* ============================================================= APP COMPONENT — Stat card ============================================================= */ .admin-stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); padding: var(--sp-5); } .admin-stat-card__label, .admin-stat-label { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; margin-bottom: var(--sp-2); } .admin-stat-card__value, .admin-stat-value { font-family: var(--font-display); font-size: 38px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; } .admin-stat-card__sub, .admin-stat-sub { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); margin-top: var(--sp-1); } .admin-stat-card--sm { padding: var(--sp-4); } .admin-stat-card--sm .admin-stat-card__value, .admin-stat-card--sm .admin-stat-value { font-size: 24px; } .admin-stat-card__value--up { color: var(--success); } .admin-stat-card__value--down { color: var(--danger); } /* ============================================================= APP COMPONENT — Status badge (5 semantic families) ============================================================= */ .admin-status-badge { display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; line-height: 1.4; padding: 3px 9px; border-radius: var(--r-pill); text-transform: none; } .admin-status-badge--success, .admin-status-badge--published, .admin-status-badge--done, .admin-status-badge--indexed, .admin-status-badge--enriched, .admin-status-badge--verified, .admin-status-badge--completed, .admin-status-badge--ok { background: var(--success-bg); color: var(--success); } .admin-status-badge--error, .admin-status-badge--flagged, .admin-status-badge--apocryphal, .admin-status-badge--critical, .admin-status-badge--failed { background: var(--danger-bg); color: var(--danger); } .admin-status-badge--warn, .admin-status-badge--warning, .admin-status-badge--processing, .admin-status-badge--disputed, .admin-status-badge--archived, .admin-status-badge--prompt_ready, .admin-status-badge--running, .admin-status-badge--pending { background: var(--warn-bg); color: var(--warn); } .admin-status-badge--info, .admin-status-badge--imported, .admin-status-badge--indexing, .admin-status-badge--generated { background: var(--info-bg); color: var(--info); } .admin-status-badge--draft, .admin-status-badge--skipped, .admin-status-badge--disabled, .admin-status-badge--unknown, .admin-status-badge--raw, .admin-status-badge--described, .admin-status-badge--debug { background: var(--bg-sunken); color: var(--text-muted); } /* ============================================================= APP COMPONENT — Application table ============================================================= */ .admin-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 13px; } .admin-table thead tr { background: var(--bg-sunken); } .admin-table th { text-align: left; padding: 12px 18px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; white-space: nowrap; border-bottom: 1px solid var(--line); } .admin-table td { padding: 14px 18px; color: var(--text); border-top: 1px solid var(--line); vertical-align: middle; } .admin-table tbody tr:hover { background: var(--bg-sunken); } .admin-table__num { text-align: right; font-variant-numeric: tabular-nums; } .admin-table__quote { font-family: var(--font-serif); font-size: 15px; color: var(--text); } .admin-table--compact th, .admin-table--compact td { padding: 8px 12px; font-size: 12px; } /* ============================================================= APP COMPONENT — Breadcrumb ============================================================= */ .admin-breadcrumb { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); margin-bottom: var(--sp-4); } .admin-breadcrumb a { color: var(--accent-text); text-decoration: none; } .admin-breadcrumb a:hover { text-decoration: underline; } .admin-breadcrumb__sep { margin: 0 6px; } /* ============================================================= APP COMPONENT — Empty state ============================================================= */ .admin-empty-state { padding: var(--sp-6); text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); } .admin-empty-state i { font-size: 32px; } .admin-empty-state--inline { padding: var(--sp-5); font-size: 13px; } /* ============================================================= APP COMPONENT — Tabs (underline) ============================================================= */ .admin-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; } .admin-tab { padding: 10px 20px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .admin-tab:hover { color: var(--text); } .admin-tab--active { color: var(--text); border-bottom-color: var(--accent); } /* ============================================================= APP COMPONENT — Accordion (details/summary section) ============================================================= */ .admin-accordion { display: flex; flex-direction: column; gap: var(--sp-2); } .admin-accordion__section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; } .admin-accordion__header { padding: 14px 20px; cursor: pointer; display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); list-style: none; user-select: none; transition: background var(--dur) var(--ease); } .admin-accordion__header::-webkit-details-marker { display: none; } .admin-accordion__header:hover { background: var(--bg-sunken); } .admin-accordion__chevron { margin-left: auto; color: var(--text-muted); font-size: 12px; transition: transform var(--dur) var(--ease); } details[open] > .admin-accordion__header .admin-accordion__chevron { transform: rotate(180deg); } .admin-accordion__body { padding: 0 20px 20px; } .admin-accordion__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font-family: var(--font-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ============================================================= APP COMPONENT — Alert / inline result banner ============================================================= */ .admin-alert { display: flex; align-items: center; gap: var(--sp-2); padding: 12px 16px; border-radius: var(--r-md); font-family: var(--font-sans); font-size: 13px; border: 1px solid transparent; } .admin-alert i { font-size: 16px; } .admin-alert--success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); } .admin-alert--warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .admin-alert--danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .admin-alert--info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); } /* ============================================================= APP COMPONENT — Quote callout (left-border editorial block) ============================================================= */ .admin-quote-callout { padding: 16px 20px; background: var(--bg-sunken); border-radius: var(--r-md); border-left: 4px solid var(--accent); font-family: var(--font-serif); font-size: 15px; font-style: italic; color: var(--text); line-height: 1.6; } .admin-quote-callout__author { font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ============================================================= APP COMPONENT — Form card title (cards reuse .adg-card) ============================================================= */ .admin-form-card__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text); margin-bottom: var(--sp-4); } /* ============================================================= BUTTON EXTENSION — danger family (not in the DS) ============================================================= */ .adg-btn--danger { background: var(--danger); color: var(--text-on-ink); } .adg-btn--danger:hover { background: var(--wine-700); } .adg-btn--danger-ghost { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); box-shadow: none; } .adg-btn--danger-ghost:hover { background: var(--danger-bg); box-shadow: none; } /* ============================================================= MOTION — gold flash (rerun highlight) ============================================================= */ @keyframes flash-gold { 0% { background-color: color-mix(in srgb, var(--accent) 30%, transparent); } 100% { background-color: transparent; } } .flash-gold { animation: flash-gold 2s var(--ease); } /* ============================================================= FOCUS VISIBILITY ============================================================= */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nav-item:focus-visible, .nav-sub-item:focus-visible, .nav-accordion summary:focus-visible, .theme-dropdown-btn:focus-visible, .theme-dropdown-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* ============================================================= SKIP LINK (screen-reader utility) ============================================================= */ .sr-skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100; padding: 8px 16px; background: var(--accent); color: var(--text-on-ink); font-family: var(--font-sans); font-size: 14px; font-weight: 600; border-radius: 0 0 8px 0; text-decoration: none; } .sr-skip-link:focus { position: fixed; left: 0; top: 0; width: auto; height: auto; } /* ============================================================= SIDEBAR OVERLAY (mobile) ============================================================= */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 35; } /* ============================================================= RESPONSIVE ============================================================= */ /* Tablet: icon-only sidebar (56px), expand on hover */ @media (max-width: 1024px) { .admin-sidebar { width: 56px; } .admin-sidebar .nav-label, .admin-sidebar .sidebar-header span, .admin-sidebar .badge-soon, .admin-sidebar .chevron { display: none; } .admin-sidebar .nav-item { padding: 10px 0; justify-content: center; margin: 1px 4px; } .admin-sidebar .nav-accordion summary { padding: 10px 0; justify-content: center; margin: 1px 4px; } .admin-sidebar .nav-sub-items { display: none; } .admin-main { margin-left: 56px; max-width: calc(100vw - 56px); } .admin-sidebar:hover { width: 244px; } .admin-sidebar:hover .nav-label, .admin-sidebar:hover .sidebar-header span, .admin-sidebar:hover .badge-soon, .admin-sidebar:hover .chevron { display: inline; } .admin-sidebar:hover .nav-item { padding: 10px 12px; justify-content: flex-start; margin: 1px 8px; } .admin-sidebar:hover .nav-accordion summary { padding: 10px 12px; justify-content: flex-start; margin: 1px 8px; } .admin-sidebar:hover .nav-sub-items { display: block; } } /* Mobile: off-canvas sidebar + hamburger */ @media (max-width: 768px) { .admin-sidebar { width: 244px; transform: translateX(-100%); transition: transform var(--dur) var(--ease); } .admin-sidebar .nav-label, .admin-sidebar .sidebar-header span, .admin-sidebar .badge-soon, .admin-sidebar .chevron { display: inline; } .admin-sidebar .nav-item { padding: 10px 12px; justify-content: flex-start; margin: 1px 8px; } .admin-sidebar .nav-accordion summary { padding: 10px 12px; justify-content: flex-start; margin: 1px 8px; } .admin-sidebar .nav-sub-items { display: block; } .admin-sidebar.open { transform: translateX(0); } .sidebar-overlay.open { display: block; } .admin-main { margin-left: 0; max-width: 100vw; } .hamburger-btn { display: block; } .topbar-search { display: none; } }