/*
 * OLA NEXT Desk
 * Dark mode only — Plane-inspired UI.
 *
 * IMPORTANT:
 * No selector in this file applies outside:
 * html[data-theme="dark"]
 */

html[data-theme="dark"] {
  --ola-night-bg: #101112;
  --ola-night-deep: #0d0e0f;
  --ola-night-surface: #151617;
  --ola-night-surface-2: #191a1c;
  --ola-night-hover: #202225;

  --ola-night-border: #2b2e32;
  --ola-night-border-soft: #23262a;

  --ola-night-text: #f0f1f2;
  --ola-night-text-2: #c4c7cc;
  --ola-night-muted: #8d929a;

  --ola-night-blue: #249bd3;
  --ola-night-pink: #ff2f92;

  --bg: var(--ola-night-bg);
  --card: var(--ola-night-surface);
  --ink: var(--ola-night-text);
  --muted: var(--ola-night-muted);
  --line: var(--ola-night-border);
}

/* BODY */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: var(--ola-night-bg) !important;
  color: var(--ola-night-text) !important;
}

/* HEADER */

html[data-theme="dark"] .top {
  background: #111315 !important;
  border-bottom: 1px solid var(--ola-night-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .top a,
html[data-theme="dark"] .top button,
html[data-theme="dark"] .top strong,
html[data-theme="dark"] .editorial-clock {
  color: var(--ola-night-text) !important;
}

html[data-theme="dark"] .desk-nav a {
  background: transparent !important;
  color: #d6d8dc !important;
}

html[data-theme="dark"] .desk-nav a:hover {
  background: var(--ola-night-hover) !important;
  color: #fff !important;
}

html[data-theme="dark"] .desk-nav a.active {
  background: #25272a !important;
  color: #fff !important;
}

/* MAIN SURFACES */

html[data-theme="dark"] .panel,
html[data-theme="dark"] .story-card,
html[data-theme="dark"] .stats div,
html[data-theme="dark"] .radar-item,
html[data-theme="dark"] .feeds,
html[data-theme="dark"] .radar-side-shell,
html[data-theme="dark"] .radar-reader,
html[data-theme="dark"] .source-drawer,
html[data-theme="dark"] .source-drawer > summary,
html[data-theme="dark"] .runlist,
html[data-theme="dark"] .shell-inspector,
html[data-theme="dark"] .shell-row,
html[data-theme="dark"] .monitor-shell,
html[data-theme="dark"] .monitor-group,
html[data-theme="dark"] .monitor-row,
html[data-theme="dark"] .edition-card,
html[data-theme="dark"] .edition-summary div,
html[data-theme="dark"] .line-creator,
html[data-theme="dark"] .bulletin-line,
html[data-theme="dark"] .edition-publish,
html[data-theme="dark"] .edition-article-viewer,
html[data-theme="dark"] .social-card,
html[data-theme="dark"] .social-summary,
html[data-theme="dark"] .user-card {
  background: var(--ola-night-surface) !important;
  color: var(--ola-night-text) !important;
  border-color: var(--ola-night-border) !important;
}

/* TEXT */

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .story-card h3,
html[data-theme="dark"] .column-head {
  color: var(--ola-night-text) !important;
}

html[data-theme="dark"] small,
html[data-theme="dark"] .muted {
  color: var(--ola-night-muted) !important;
}

/* FORMS */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #121416 !important;
  color: var(--ola-night-text) !important;
  border-color: #34373c !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #7e838b !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: #5c6169 !important;
  outline: none !important;
}

/* MENUS */

html[data-theme="dark"] .account-dropdown {
  background: #17181a !important;
  color: var(--ola-night-text) !important;
  border-color: var(--ola-night-border) !important;
  box-shadow: 0 15px 45px rgba(0,0,0,.5) !important;
}

html[data-theme="dark"] .account-dropdown a,
html[data-theme="dark"] .account-dropdown .link {
  background: transparent !important;
  color: var(--ola-night-text) !important;
}

html[data-theme="dark"] .account-dropdown a:hover,
html[data-theme="dark"] .account-dropdown .link:hover {
  background: var(--ola-night-hover) !important;
}

/* SECONDARY ELEMENTS */

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .badge,
html[data-theme="dark"] .account-role,
html[data-theme="dark"] .shell-status,
html[data-theme="dark"] .date-divider,
html[data-theme="dark"] .monitor-group-head,
html[data-theme="dark"] .checklist,
html[data-theme="dark"] .inspector-actions {
  background: #202225 !important;
  color: var(--ola-night-text) !important;
  border-color: var(--ola-night-border) !important;
}

html[data-theme="dark"] .shell-row:hover,
html[data-theme="dark"] .shell-row.selected,
html[data-theme="dark"] .draft-row.selected,
html[data-theme="dark"] .radar-item.reader-selected {
  background: var(--ola-night-hover) !important;
}

/* TABLES */

html[data-theme="dark"] table {
  background: var(--ola-night-bg);
  color: var(--ola-night-text);
}

html[data-theme="dark"] th {
  background: #17181a !important;
  color: #c9ccd1 !important;
}

html[data-theme="dark"] td,
html[data-theme="dark"] th {
  border-color: var(--ola-night-border-soft) !important;
}

html[data-theme="dark"] tbody tr:hover {
  background: #181a1c !important;
}

/*
 * Intentionally NOT overriding:
 * breaking red
 * editorial status colours
 * conductor occupied/pink line
 * alert semantics
 */


/* =========================================================
   OLA CHAT — DARK MODE
   ========================================================= */

html[data-theme="dark"] #ola-chat-panel {
  background: #101112 !important;
  color: #f0f1f2 !important;
  border-color: #34373c !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.62) !important;
}

html[data-theme="dark"] .ola-chat-header {
  background: #111315 !important;
  color: #fff !important;
  border-bottom-color: #2b2e32 !important;
}

html[data-theme="dark"] .ola-chat-sidebar {
  background: #151617 !important;
  color: #e8e9eb !important;
  border-right-color: #2b2e32 !important;
}

html[data-theme="dark"] .ola-chat-sidebar button,
html[data-theme="dark"] .ola-chat-sidebar a {
  color: #d9dce0 !important;
}

html[data-theme="dark"] .ola-chat-sidebar button:hover,
html[data-theme="dark"] .ola-chat-sidebar .active,
html[data-theme="dark"] .ola-chat-channel.active {
  background: #25272a !important;
  color: #fff !important;
}

html[data-theme="dark"] .ola-chat-conversation,
html[data-theme="dark"] .ola-chat-messages {
  background: #101112 !important;
  color: #f0f1f2 !important;
}

html[data-theme="dark"] .ola-chat-conversation-header {
  background: #131416 !important;
  color: #f0f1f2 !important;
  border-bottom-color: #2b2e32 !important;
}

html[data-theme="dark"] .ola-chat-message {
  color: #e6e8eb !important;
}

html[data-theme="dark"] .ola-chat-message:hover {
  background: #181a1c !important;
}

html[data-theme="dark"] .ola-chat-message small,
html[data-theme="dark"] .ola-chat-message time,
html[data-theme="dark"] .ola-chat-typing {
  color: #8f949c !important;
}

html[data-theme="dark"] .ola-chat-composer {
  background: #151617 !important;
  border-color: #303339 !important;
}

html[data-theme="dark"] .ola-chat-composer textarea {
  background: #111315 !important;
  color: #f0f1f2 !important;
  border-color: #3a3e44 !important;
}

html[data-theme="dark"] .ola-chat-composer textarea::placeholder {
  color: #8d929a !important;
}

html[data-theme="dark"] .ola-chat-composer button {
  color: #d8dbe0 !important;
}

html[data-theme="dark"] .ola-chat-thread {
  background: #151617 !important;
  color: #f0f1f2 !important;
  border-left-color: #2b2e32 !important;
}

html[data-theme="dark"] #ola-chat-launcher {
  background: #17191c !important;
  border-color: #383c42 !important;
  color: #fff !important;
}

/* Native controls / scroll */

html[data-theme="dark"] #ola-chat-panel {
  scrollbar-color: #45494f #151617;
}

html[data-theme="dark"] #ola-chat-panel ::-webkit-scrollbar-track {
  background: #151617;
}

html[data-theme="dark"] #ola-chat-panel ::-webkit-scrollbar-thumb {
  background: #45494f;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {
  html[data-theme="dark"] #ola-chat-panel {
    background: #101112 !important;
  }
}