@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Echora v2 identity. Loaded after component styles; no asset build required.
   Tokens follow the dashboard and workspace COLOR_GUIDE.md. Platform and
   success/warning/error colors retain their meaning. */
:root {
  color-scheme: light;
  --bo-canvas: #fcf9f5;
  --bo-sidebar: #fefdfc;
  --bo-surface: #fff;
  --bo-surface-muted: #f5f2ef;
  --bo-border: #e9e3df;
  --bo-border-strong: #d9cec7;
  --bo-text: #302925;
  --bo-secondary: #756c67;
  --bo-muted: #817772;
  --bo-brand: #d96546;
  --bo-brand-soft: #faeeea;
  --bo-brand-border: #e9c3b6;
  --bo-brand-text: #b94b31;
  --bo-action: #b94b31;
  --bo-action-hover: #a8422b;
  --bo-focus: #d9654640;
  --bo-shadow: 0 2px 6px #30292505;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Adapt the existing Tailwind utilities to the shared identity. These aliases
     also apply after static_src/app.css is regenerated in a future build. */
  --color-primary-50: var(--bo-brand-soft);
  --color-primary-100: var(--bo-brand-soft);
  --color-primary-200: var(--bo-brand-border);
  --color-primary-300: var(--bo-brand-text);
  --color-primary-400: var(--bo-brand);
  --color-primary-500: var(--bo-brand);
  --color-primary-600: var(--bo-action);
  --color-primary-700: var(--bo-action-hover);
  --color-primary-800: var(--bo-brand-text);
  --color-primary-900: var(--bo-brand-text);
  --color-accent: var(--bo-brand);
  --color-navy: var(--bo-text);
  --color-slate-50: var(--bo-canvas);
  --color-slate-100: var(--bo-surface-muted);
  --color-slate-200: var(--bo-border);
  --color-slate-300: var(--bo-border-strong);
  --color-slate-400: var(--bo-muted);
  --color-slate-500: var(--bo-secondary);
  --color-slate-600: var(--bo-secondary);
  --color-slate-700: var(--bo-text);
  --color-slate-800: var(--bo-text);
  --color-slate-900: var(--bo-text);
  --color-gray-50: var(--bo-canvas);
  --color-gray-100: var(--bo-surface-muted);
  --color-gray-200: var(--bo-border);
  --color-gray-300: var(--bo-border-strong);
  --color-gray-400: var(--bo-muted);
  --color-gray-500: var(--bo-secondary);
  --color-gray-600: var(--bo-secondary);
  --color-gray-700: var(--bo-text);
  --color-gray-800: var(--bo-text);
  --color-gray-900: var(--bo-text);
}

:root.dark {
  color-scheme: dark;
  --bo-canvas: #191919;
  --bo-sidebar: #222;
  --bo-surface: #252525;
  --bo-surface-muted: #2a2a2a;
  --bo-border: #333;
  --bo-border-strong: #454545;
  --bo-text: #e5e7eb;
  --bo-secondary: #9ca3af;
  --bo-muted: #8b93a1;
  --bo-brand-soft: #322723;
  --bo-brand-border: #744331;
  --bo-brand-text: #e4775a;
  --bo-focus: #d9654659;
  --bo-shadow: none;
  --color-primary-100: var(--bo-text);
  --color-primary-200: var(--bo-brand-text);
  --color-primary-700: var(--bo-action-hover);
  --color-primary-800: var(--bo-brand-border);
  --color-primary-900: var(--bo-brand-soft);
  --color-gray-50: var(--bo-text);
  --color-gray-100: var(--bo-text);
  --color-gray-200: var(--bo-text);
  --color-gray-300: var(--bo-secondary);
  --color-gray-400: var(--bo-secondary);
  --color-gray-500: var(--bo-muted);
  --color-gray-600: var(--bo-border-strong);
  --color-gray-700: var(--bo-surface-muted);
  --color-gray-800: var(--bo-surface);
  --color-gray-900: var(--bo-canvas);
}

html, .app-body, .login-body { background: var(--bo-canvas); color: var(--bo-text); }
body { font-family: var(--font-sans); }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--bo-action); }
.dark input:not([type='checkbox']):not([type='radio']), .dark select, .dark textarea { color: var(--bo-text); }
input::placeholder, textarea::placeholder { color: var(--bo-muted); }
::selection { background: var(--bo-brand-soft); color: var(--bo-brand-text); }

.sidebar, .dark .sidebar { padding: 20px 17px; background: var(--bo-sidebar); border-color: var(--bo-border); }
.brand, .login-brand { display: block; color: var(--bo-text); }
/* Trim the SVG's empty right margin without changing the dashboard asset. */
.brand-logo-wrap, .brand-logo-wrap.large { display: block; width: 114px; height: 38.4px; overflow: hidden; }
.brand-logo-wrap img { width: 114px; max-width: none; height: 38.4px; object-fit: cover; object-position: left center; }
.brand small, .login-brand small { margin: -5px 0 0 45px; color: var(--bo-muted); font-size: 9px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.nav { margin-top: 26px; gap: 5px; }
.nav-section { color: var(--bo-muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; }
.nav-link, .dark .nav-link { padding: 10px 12px; color: var(--bo-secondary); border-radius: 10px; font-weight: 500; }
.nav-link:hover, .dark .nav-link:hover { background: var(--bo-surface-muted); color: var(--bo-text); }
.nav-link.active, .dark .nav-link.active { background: var(--bo-brand-soft); color: var(--bo-brand-text); }
.nav-link.active::before { display: none; }
.sidebar-foot { color: var(--bo-muted); border-color: var(--bo-border); }
.topbar, .dark .topbar { min-height: 76px; background: var(--bo-sidebar); border-color: var(--bo-border); }
.topbar-identity > strong { font-size: 14px; }
.environment, .dark .environment { background: var(--bo-surface-muted); color: var(--bo-secondary); font-weight: 600; }
.avatar, .dark .avatar { background: var(--bo-action); color: #fff; border-radius: 10px; }
.profile-menu-popover { box-shadow: 0 12px 36px #3029251a; }
.content { padding-top: 32px; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
.eyebrow { color: var(--bo-brand-text); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.panel, .metric-card, .mini-metric { border-color: var(--bo-border); box-shadow: var(--bo-shadow); }
.btn-primary, .dark .btn-primary { background: var(--bo-action); color: #fff; border: 1px solid var(--bo-action); }
.btn-primary:hover, .dark .btn-primary:hover { background: var(--bo-action-hover); border-color: var(--bo-action-hover); }
.btn-secondary, .dark .btn-secondary { background: var(--bo-surface); border-color: var(--bo-border); color: var(--bo-text); }
.btn-secondary:hover, .dark .btn-secondary:hover { background: var(--bo-surface-muted); }
.btn-primary, .btn-secondary { border-radius: 9px; font-weight: 600; }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .topbar-theme-toggle:focus-visible,
.profile-menu-trigger:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--bo-brand); outline-offset: 2px; box-shadow: 0 0 0 4px var(--bo-focus); }
input:not([type='checkbox']):not([type='radio']):focus, select:focus, textarea:focus {
  border-color: var(--bo-brand); --tw-ring-color: var(--bo-focus);
}
.notice, .dark .notice, .alert.info, .dark .alert.info { background: var(--bo-brand-soft); color: var(--bo-text); border-color: var(--bo-brand-border); }
.pagination a:hover, tbody tr:hover { background: var(--bo-surface-muted); }
.crawler-run-target-button, .dark .crawler-run-target-button { color: var(--bo-brand-text); }
.crawler-run-target-button:hover, .dark .crawler-run-target-button:hover { background: var(--bo-brand-soft); border-color: var(--bo-brand-border); }
.badge.running, .badge.trigger-manual, .dark .badge.running, .dark .badge.trigger-manual { background: var(--bo-brand-soft); color: var(--bo-brand-text); }
.crawler-channel-row { padding-top: 17px; padding-bottom: 17px; }
.crawler-platform-icon, .dark .crawler-platform-icon { background: var(--bo-surface-muted); color: var(--bo-text); }
.dark .dashboard-channel-icon.tiktok, .dark .dashboard-channel-icon.twitter { background: var(--bo-surface-muted); color: var(--bo-text); }
.crawler-channel-status > small, .crawler-channel-latest > small,
.crawler-channel-success > small, .crawler-channel-schedule > small { color: var(--bo-muted); }

.login-brand-panel, .dark .login-brand-panel { background: var(--bo-sidebar); color: var(--bo-text); border-right: 1px solid var(--bo-border); }
.login-brand-panel::after { border-color: var(--bo-brand-soft); }
.login-brand-panel .eyebrow, .dark .login-brand-panel .eyebrow { color: var(--bo-brand-text); }
.login-brand-panel h1 { font-size: clamp(32px, 3.5vw, 48px); letter-spacing: -.04em; }
.login-copy, .tagline, .dark .login-copy, .dark .tagline { color: var(--bo-secondary); }
.login-form-panel, .dark .login-form-panel { background: var(--bo-canvas); box-shadow: none; }
.login-card { padding: 32px; border: 1px solid var(--bo-border); border-radius: 16px; background: var(--bo-surface); box-shadow: var(--bo-shadow); }
.login-card h2 { font-size: 26px; }
.login-mobile-brand { display: none; }
.login-card input:not([type='checkbox']):not([type='radio']) { background: var(--bo-surface); color: var(--bo-text); border-color: var(--bo-border-strong); }
.login-card input:-webkit-autofill, .dark .login-card input:-webkit-autofill {
  -webkit-text-fill-color: var(--bo-text); caret-color: var(--bo-text); box-shadow: 0 0 0 1000px var(--bo-surface) inset;
}
@media (max-width: 1023px) {
  .login-mobile-brand { display: block; margin-bottom: 24px; }
}
@media (max-width: 639px) {
  .content { padding-top: 24px; }
  .login-card { padding: 24px 20px; }
  .topbar { min-height: 68px; }
}

/* Dark surfaces follow the light theme's solid-background hierarchy. */
.dark .main-column, .dark .login-form-panel {
  background: var(--bo-canvas);
}
.dark .topbar { background: var(--bo-canvas); }
.dark .profile-menu-popover { box-shadow: 0 12px 36px #0003; }
.dark .crawler-channel-list { background: var(--bo-surface); box-shadow: none; }
.dark :is(input:not([type='checkbox']):not([type='radio']), select, textarea) {
  background-color: var(--bo-surface-muted);
}
.dark .login-card input:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--bo-surface-muted) inset;
}
.dark .badge.warning, .dark .badge.cooldown { background: #382e1e; color: #efc36f; }
.dark .crawler-channel-row.facebook .crawler-platform-icon,
.dark .dashboard-channel-icon.facebook { background: #202d3d; color: #83b4f4; }
.dark .crawler-channel-row.instagram .crawler-platform-icon,
.dark .dashboard-channel-icon.instagram { background: #36242e; color: #ef8fbd; }
.dark .crawler-channel-row.youtube .crawler-platform-icon,
.dark .dashboard-channel-icon.youtube { background: #362323; color: #f58080; }
.dark .crawler-channel-row.news .crawler-platform-icon,
.dark .dashboard-channel-icon.news { background: #392d23; color: #eba777; }