/* Honora Admin — internal panel styles Defines --h-* tokens at :root and all adm-* component classes. Loaded only in the admin layout. */ /* Fonts (Inter / Outfit / JetBrains Mono) are loaded via in the admin layout — more reliable than @import. */ /* ── Honora design tokens (h-* namespace) ─────────────────── */ :root { --h-r-sm: 8px; --h-r-md: 12px; --h-r-lg: 16px; --h-r-xl: 20px; --h-r-full: 9999px; --h-teal-50: #E8F2EE; --h-teal-100: #C5DFD5; --h-teal-200: #94C5B0; --h-teal-300: #7DB9A0; --h-teal-400: #4B9A82; --h-teal-500: #2D7A6A; --h-teal-600: #235F53; --h-teal-700: #1F5C52; --h-teal-800: #143F37; --h-teal-soft: #122E29; --h-navy-50: #EAEEF3; --h-navy-100: #C7D0DC; --h-navy-200: #94A3B8; --h-navy-500: #2A4D70; --h-navy-700: #15355A; --h-navy-900: #0F2D4A; --h-navy-950: #0A1F33; --h-brand: var(--h-teal-500); --h-brand-soft: var(--h-teal-50); --h-brand-deep: var(--h-teal-700); --h-auth: var(--h-navy-900); --h-auth-soft: var(--h-navy-50); --h-teal: var(--h-teal-500); --h-violet: var(--h-navy-900); --h-grad-ring: linear-gradient(180deg, #7DB9A0 0%, #1F5C52 100%); --h-grad-action: linear-gradient(90deg, #4B9A82 0%, #2D7A6A 50%, #15355A 100%); --h-grad-ai: linear-gradient(135deg, #2D7A6A 0%, #0F2D4A 100%); --h-grad-auth: linear-gradient(160deg, #15355A 0%, #0F2D4A 60%, #1F5C52 100%); --h-money-pos: #28A868; --h-money-pos-bg: #E6F4ED; --h-money-neg: #D82828; --h-money-neg-bg: #FBE7E7; --h-warning: #E0A82E; --h-warning-bg: #FBF1DC; --h-error: #D82828; } /* Light theme (default) */ :root, body[data-theme="light"] { --h-bg: #F7F8FA; --h-surface: #FFFFFF; --h-surface-alt: #F1F3F6; --h-border: #E5E8ED; --h-border-strong: #D1D5DB; --h-text: #0F2D4A; --h-text-muted: #64748B; --h-text-subtle: #94A3B8; --h-shadow-card: 0 1px 2px rgba(15,45,74,.04), 0 1px 1px rgba(15,45,74,.02); --h-shadow-pop: 0 8px 24px rgba(15,45,74,.08), 0 2px 6px rgba(15,45,74,.04); } /* Dark theme */ body[data-theme="dark"] { --h-bg: #0A1521; --h-surface: #122033; --h-surface-alt: #1A2A40; --h-border: #25364F; --h-border-strong: #36486A; --h-text: #F1F5F9; --h-text-muted: #94A3B8; --h-text-subtle: #64748B; --h-teal-50: #122E29; --h-teal-500: #5BB39C; --h-teal-soft: #122E29; --h-navy-50: #15243A; --h-navy-900: #2A4D70; --h-money-pos: #4ADE80; --h-money-pos-bg: #0F2A1A; --h-money-neg: #F87171; --h-money-neg-bg: #2A1414; --h-warning: #FACC4A; --h-warning-bg: #2A2110; --h-shadow-card: 0 1px 2px rgba(0,0,0,.4); --h-shadow-pop: 0 8px 24px rgba(0,0,0,.5); --h-teal: var(--h-teal-500); --h-violet: var(--h-navy-900); --h-brand: var(--h-teal-500); --h-brand-soft: var(--h-teal-soft); --h-auth: var(--h-navy-900); --h-auth-soft: var(--h-navy-50); } /* ── Base reset for admin ────────────────────────────────── */ body.adm-root { margin: 0; font-family: 'Inter', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; letter-spacing: -0.005em; background: var(--h-bg); color: var(--h-text); } body.adm-root *, body.adm-root *::before, body.adm-root *::after { box-sizing: border-box; } body.adm-root button { font-family: inherit; cursor: pointer; } body.adm-root input, body.adm-root select { font-family: inherit; } body.adm-root a { color: inherit; text-decoration: none; } /* ── Layout shell ────────────────────────────────────────── */ .adm-shell { display: flex; width: 100vw; height: 100vh; overflow: hidden; } .adm-body-col { flex: 1; display: flex; flex-direction: column; overflow: hidden; } /* ── Sidebar ─────────────────────────────────────────────── */ .adm-sidebar { width: 240px; flex-shrink: 0; background: var(--h-surface); border-right: 1px solid var(--h-border); display: flex; flex-direction: column; padding: 20px 14px 16px; } .adm-nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--h-r-md); font-size: 14px; font-weight: 500; color: var(--h-text-muted); background: transparent; border: 0; text-align: left; width: 100%; cursor: pointer; text-decoration: none; transition: background .14s, color .14s; } .adm-nav-item:hover { background: var(--h-surface-alt); color: var(--h-text); } .adm-nav-item.active { background: var(--h-teal-50); color: var(--h-teal-500); font-weight: 600; } body[data-theme="dark"] .adm-nav-item.active { background: var(--h-teal-soft); } .adm-nav-count { margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--h-surface-alt); color: var(--h-text-subtle); } .adm-nav-item.active .adm-nav-count { background: rgba(45,122,106,.16); color: var(--h-teal-500); } /* ── Topbar ──────────────────────────────────────────────── */ .adm-topbar { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--h-surface); border-bottom: 1px solid var(--h-border); } .adm-iconbtn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--h-border); background: var(--h-surface); color: var(--h-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .14s, color .14s, border-color .14s; } .adm-iconbtn:hover { background: var(--h-surface-alt); color: var(--h-text); } .adm-crumb { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--h-text-muted); } .adm-crumb .sep { opacity: .4; } .adm-crumb .cur { color: var(--h-text); font-weight: 500; } .adm-crumb a { color: var(--h-text-muted); text-decoration: none; } .adm-crumb a:hover { color: var(--h-text); } /* ── Main content ────────────────────────────────────────── */ .adm-main { flex: 1; overflow: auto; } .adm-page { padding: 28px 32px 56px; max-width: 1320px; margin: 0 auto; } .adm-main::-webkit-scrollbar { width: 10px; } .adm-main::-webkit-scrollbar-thumb { background: var(--h-border-strong); border-radius: 999px; border: 3px solid var(--h-surface); } /* ── KPI cards ───────────────────────────────────────────── */ .adm-kpi { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-r-lg); box-shadow: var(--h-shadow-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; } .adm-kpi-top { display: flex; align-items: center; justify-content: space-between; } .adm-kpi-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .adm-kpi-label { font-size: 12px; font-weight: 600; color: var(--h-text-muted); text-transform: uppercase; letter-spacing: 0.07em; } .adm-kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; } .adm-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .adm-delta.up { color: var(--h-money-pos); } .adm-delta.dn { color: var(--h-money-neg); } /* ── Cards ───────────────────────────────────────────────── */ .adm-card { background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-r-lg); box-shadow: var(--h-shadow-card); } .adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--h-border); } .adm-card-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } /* ── Tables ──────────────────────────────────────────────── */ .adm-thead { font-size: 11px; font-weight: 600; color: var(--h-text-muted); text-transform: uppercase; letter-spacing: 0.07em; background: var(--h-bg); border-bottom: 1px solid var(--h-border); } .adm-row { align-items: center; border-bottom: 1px solid var(--h-border); transition: background .12s; } .adm-row:last-child { border-bottom: 0; } .adm-row.clickable { cursor: pointer; } .adm-row.clickable:hover { background: var(--h-surface-alt); } /* Used by adm_filter_controller to hide rows without clobbering inline display:grid */ .adm-row-hidden { display: none !important; } /* Horizontal scroll wrapper so dense tables never crush their columns */ .adm-table-scroll { overflow-x: auto; } .adm-table-inner { min-width: 940px; } .adm-table-scroll::-webkit-scrollbar { height: 8px; } .adm-table-scroll::-webkit-scrollbar-thumb { background: var(--h-border-strong); border-radius: 999px; } /* ── Avatar ──────────────────────────────────────────────── */ .adm-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; letter-spacing: 0.01em; font-family: 'Inter', system-ui, sans-serif; } /* ── Pills / filters ─────────────────────────────────────── */ .adm-pill { height: 38px; padding: 0 13px; border-radius: 10px; background: var(--h-surface); border: 1px solid var(--h-border); color: var(--h-text); font-size: 13px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: border-color .14s, background .14s; } .adm-pill:hover { border-color: var(--h-border-strong); } .adm-pill.active { background: var(--h-teal-50); border-color: transparent; color: var(--h-teal-500); font-weight: 600; } body[data-theme="dark"] .adm-pill.active { background: var(--h-teal-soft); } .adm-search { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 13px; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: 10px; } .adm-search:focus-within { border-color: var(--h-teal-500); } .adm-search input { border: 0; outline: 0; background: transparent; color: var(--h-text); font-size: 14px; width: 100%; } .adm-search input::placeholder { color: var(--h-text-subtle); } /* ── Activity feed ───────────────────────────────────────── */ .adm-evt-ico { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; border: 2px solid var(--h-surface); } /* ── Toast ───────────────────────────────────────────────── */ .adm-toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 100; align-items: center; pointer-events: none; } .adm-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 14px; border-radius: 12px; background: var(--h-navy-900); color: #fff; box-shadow: 0 12px 32px rgba(15,45,74,.30); font-size: 14px; font-weight: 500; animation: adm-toast-in .26s cubic-bezier(.2,.8,.3,1); max-width: 460px; pointer-events: auto; } body[data-theme="dark"] .adm-toast { background: var(--h-surface-alt); border: 1px solid var(--h-border-strong); } .adm-toast-ico { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } @keyframes adm-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ── Quick-action buttons ────────────────────────────────── */ .adm-action { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border-radius: var(--h-r-md); font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: filter .14s, background .14s, border-color .14s; } .adm-action:hover { filter: brightness(1.04); } .adm-action.teal { background: var(--h-teal-500); color: #fff; } .adm-action.ghost { background: var(--h-surface); border-color: var(--h-border-strong); color: var(--h-text); } .adm-action.ghost:hover { background: var(--h-surface-alt); filter: none; } .adm-action.danger { background: var(--h-surface); border-color: var(--h-border-strong); color: var(--h-money-neg); } .adm-action.danger:hover { background: var(--h-money-neg-bg); filter: none; } /* ── Badge variants ──────────────────────────────────────── */ .adm-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 9999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .adm-badge-pos { background: var(--h-money-pos-bg); color: var(--h-money-pos); } .adm-badge-neg { background: var(--h-money-neg-bg); color: var(--h-money-neg); } .adm-badge-warn { background: var(--h-warning-bg); color: var(--h-warning); } .adm-badge-navy { background: var(--h-navy-50); color: var(--h-navy-900); } .adm-badge-neutral { background: var(--h-surface-alt); color: var(--h-text-muted); } .adm-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── h-kicker (section label) ────────────────────────────── */ .adm-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--h-text-subtle); } /* ── Select pill ─────────────────────────────────────────── */ .adm-select-wrap { position: relative; display: inline-flex; align-items: center; } .adm-select-wrap svg { position: absolute; right: 10px; pointer-events: none; color: var(--h-text-muted); } /* ── Bar chart bars ──────────────────────────────────────── */ .adm-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; } .adm-bar { flex: 1; border-radius: 4px; min-height: 6px; transition: opacity .14s; } .adm-bar:hover { opacity: .75; } /* ── Monospace helper ────────────────────────────────────── */ .adm-mono { font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; } /* ── Sidebar user footer ─────────────────────────────────── */ .adm-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--h-border); margin-top: auto; } /* ── Login / auth screen ─────────────────────────────────── */ .adm-auth-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--h-grad-auth); } .adm-auth-card { width: 100%; max-width: 400px; background: var(--h-surface); border: 1px solid var(--h-border); border-radius: var(--h-r-xl); box-shadow: 0 24px 60px rgba(10,31,51,.45), 0 4px 12px rgba(10,31,51,.25); padding: 36px 32px 30px; } .adm-auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; } .adm-auth-wordmark { font-family: 'Outfit', Inter, system-ui, sans-serif; font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--h-text); } .adm-auth-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--h-teal-500); background: var(--h-teal-50); padding: 3px 7px; border-radius: 6px; } .adm-auth-title { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--h-text); } .adm-auth-sub { font-size: 13.5px; color: var(--h-text-muted); margin: 0 0 24px; } .adm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .adm-field label { font-size: 13px; font-weight: 500; color: var(--h-text-muted); } .adm-input { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--h-r-md); background: var(--h-surface-alt); border: 1px solid transparent; color: var(--h-text); font-size: 15px; font-weight: 500; outline: none; transition: border-color .15s, background .15s; } .adm-input::placeholder { color: var(--h-text-subtle); font-weight: 400; } .adm-input:focus { border-color: var(--h-navy-900); background: var(--h-surface); } .adm-auth-submit { width: 100%; height: 48px; margin-top: 6px; border: 0; border-radius: var(--h-r-md); background: var(--h-navy-900); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .14s, transform .12s; } .adm-auth-submit:hover { filter: brightness(1.08); } .adm-auth-submit:active { transform: translateY(1px); } .adm-auth-alert { display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin-bottom: 18px; border-radius: var(--h-r-md); background: var(--h-money-neg-bg); color: var(--h-money-neg); border: 1px solid color-mix(in srgb, var(--h-money-neg) 28%, transparent); font-size: 13px; font-weight: 500; } .adm-auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--h-border); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--h-text-subtle); }