/* ECLIPSE theme — an override layer on top of the Regard styles.
   Loaded only when site.slug == "eclipse" (deals/base.html), after the page's
   own styles. Every rule is scoped under html.eclipse, so Regard never sees it.

   Palette: six spectrum colours on pitch black, white as the light source.
     primary    secondary
     #FF1807    #CC102D   red
     #FFAD00    #E88514   orange
     #FDFF00    #FFFF28   yellow
     #33CA00    #7DC62C   green
     #1293C5    #71C0DE   blue
     #5C30BD    #634C8A   purple
*/

html.eclipse {
  --ec-black: #000000;
  --ec-white: #FFFFFF;
  --ec-red: #FF1807;      --ec-red-2: #CC102D;
  --ec-orange: #FFAD00;   --ec-orange-2: #E88514;
  --ec-yellow: #FDFF00;   --ec-yellow-2: #FFFF28;
  --ec-green: #33CA00;    --ec-green-2: #7DC62C;
  --ec-blue: #1293C5;     --ec-blue-2: #71C0DE;
  --ec-purple: #5C30BD;   --ec-purple-2: #634C8A;

  /* neutrals built from black + white only */
  --ec-surface: #0C0C0E;      /* cards, panels */
  --ec-surface-2: #151518;    /* raised: inputs, hover, table head */
  --ec-line: #26262B;         /* hairlines */
  --ec-line-2: #3A3A41;
  --ec-text: #F2F2F4;
  --ec-muted: #9C9CA6;

  --ec-spectrum: linear-gradient(90deg,
      var(--ec-red), var(--ec-orange), var(--ec-yellow),
      var(--ec-green), var(--ec-blue), var(--ec-purple));

  /* Legacy Regard tokens, re-pointed. --regard-slate is used mostly as a text
     colour, so it becomes light; the few places that use it as a FILL are
     fixed individually below. */
  --regard-slate: var(--ec-text);
  --regard-slate-dark: #D4D4DA;
  --regard-teal: var(--ec-blue-2);
  --regard-teal-dark: var(--ec-blue-2);
  --regard-bg: var(--ec-black);

  /* Bootstrap 5.3 dark-mode variables */
  --bs-body-bg: var(--ec-black);
  --bs-body-color: var(--ec-text);
  --bs-secondary-color: var(--ec-muted);
  --bs-secondary-bg: var(--ec-surface-2);
  --bs-tertiary-bg: var(--ec-surface);
  --bs-border-color: var(--ec-line);
  --bs-link-color: var(--ec-blue-2);
  --bs-link-color-rgb: 113,192,222;
  --bs-link-hover-color: var(--ec-white);
  --bs-link-hover-color-rgb: 255,255,255;
  --bs-emphasis-color: var(--ec-white);
  --bs-heading-color: var(--ec-white);
  --bs-code-color: var(--ec-blue-2);
  color-scheme: dark;
}

html.eclipse body { background: var(--ec-black); color: var(--ec-text); }
html.eclipse ::selection { background: var(--ec-white); color: var(--ec-black); }
html.eclipse a { color: var(--ec-blue-2); }
html.eclipse a:hover { color: var(--ec-white); }
html.eclipse code, html.eclipse .text-pro-urgent { color: var(--ec-blue-2) !important; }
html.eclipse .text-muted, html.eclipse .form-text { color: var(--ec-muted) !important; }
html.eclipse :focus-visible { outline: 2px solid var(--ec-white); outline-offset: 2px; }

/* ---- Top bar: black, with the spectrum as its bottom edge ---- */
html.eclipse .nav-regard {
  background: var(--ec-black);
  border-bottom: 2px solid transparent;
  border-image: var(--ec-spectrum) 1;
  padding: 14px 0;
}
html.eclipse .ec-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ec-white);
}
html.eclipse .ec-brand img { height: 36px; width: 36px; }
html.eclipse .ec-brand .ec-word {
  font-weight: 300; font-size: 1.25rem; letter-spacing: .42em;
  text-transform: uppercase; padding-left: .1em;
}
html.eclipse .nav-regard .user-chip { color: var(--ec-muted); }
html.eclipse .nav-regard .user-chip strong { color: var(--ec-white); }
html.eclipse .nav-regard .logout-btn { border-color: var(--ec-line-2); color: var(--ec-text); }
html.eclipse .nav-regard .logout-btn:hover { background: var(--ec-white); color: var(--ec-black); border-color: var(--ec-white); }

/* ---- Bootstrap components ---- */
html.eclipse .card, html.eclipse .modal-content, html.eclipse .dropdown-menu, html.eclipse .list-group-item {
  --bs-card-bg: var(--ec-surface); background-color: var(--ec-surface);
  border-color: var(--ec-line); color: var(--ec-text);
}
html.eclipse .card.shadow-sm { box-shadow: 0 0 0 1px var(--ec-line), 0 24px 60px rgba(0,0,0,.6) !important; }
html.eclipse .form-control, html.eclipse .form-select {
  background-color: var(--ec-surface-2); border-color: var(--ec-line-2); color: var(--ec-text);
}
html.eclipse .form-control:focus, html.eclipse .form-select:focus {
  background-color: var(--ec-surface-2); border-color: var(--ec-white); color: var(--ec-white);
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
html.eclipse .form-control::placeholder { color: #6E6E78; }
/* Primary action = the white beam */
html.eclipse .btn-primary {
  background: var(--ec-white); border-color: var(--ec-white); color: var(--ec-black); font-weight: 600;
}
html.eclipse .btn-primary:hover, html.eclipse .btn-primary:focus { background: #DADADF; border-color: #DADADF; color: var(--ec-black); }
html.eclipse .btn-outline-secondary, html.eclipse .btn-outline-primary {
  border-color: var(--ec-line-2); color: var(--ec-text);
}
html.eclipse .btn-outline-secondary:hover, html.eclipse .btn-outline-primary:hover {
  background: var(--ec-white); border-color: var(--ec-white); color: var(--ec-black);
}
html.eclipse .table {
  --bs-table-bg: transparent; --bs-table-color: var(--ec-text);
  --bs-table-border-color: var(--ec-line); --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-hover-bg: rgba(255,255,255,.06); --bs-table-hover-color: var(--ec-white);
}
html.eclipse .alert-info { background: var(--ec-surface); border-color: var(--ec-blue); color: var(--ec-text); }
html.eclipse .alert-danger { background: var(--ec-surface); border-color: var(--ec-red); color: #FFB3AD; }
html.eclipse .alert-success { background: var(--ec-surface); border-color: var(--ec-green); color: var(--ec-text); }
html.eclipse .alert-warning { background: var(--ec-surface); border-color: var(--ec-orange); color: var(--ec-text); }

/* Status badges take the spectrum (dark text on the bright fills) */
html.eclipse .badge-status-prospect { background: var(--ec-line-2); color: var(--ec-text); }
html.eclipse .badge-status-negotiation, html.eclipse .badge-status-contacted { background: var(--ec-blue); color: #fff; }
html.eclipse .badge-status-contract_out, html.eclipse .badge-status-committed { background: var(--ec-orange); color: #000; }
html.eclipse .badge-status-signed { background: var(--ec-green); color: #000; }
html.eclipse .badge-status-active, html.eclipse .badge-status-funded { background: var(--ec-yellow); color: #000; }
html.eclipse .badge-status-expired { background: var(--ec-purple-2); color: #fff; }
html.eclipse .badge-status-lost { background: var(--ec-red-2); color: #fff; }
html.eclipse .badge-soc-pill { border-color: var(--ec-line-2) !important; color: var(--ec-muted) !important; }

/* ---- Hub: hero ---- */
html.eclipse .hero {
  background: var(--ec-black);
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--ec-line);
}
/* the eclipse itself: a black disc with a white corona, top right */
html.eclipse .hero::before {
  top: 50%; right: 8%; width: 300px; height: 300px; transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ec-black);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.55),
    0 0 26px 3px rgba(255,255,255,.45),
    0 0 110px 26px rgba(255,255,255,.12),
    18px -14px 70px 4px rgba(255,255,255,.22);
}
html.eclipse .hero .container { position: relative; z-index: 1; }
html.eclipse .hero .hero-mark { background: transparent; width: 72px; height: 72px; margin-bottom: 20px; justify-content: flex-start; }
html.eclipse .hero .hero-mark img { width: 72px; height: 72px; }
html.eclipse .hero h1 { font-weight: 300; letter-spacing: -.01em; color: var(--ec-white); }
html.eclipse .hero .hero-eyebrow {
  letter-spacing: .42em; font-weight: 600;
  background: var(--ec-spectrum); -webkit-background-clip: text; background-clip: text;
  color: transparent; display: inline-block;
}
@media (max-width: 767px) { html.eclipse .hero::before { right: -120px; opacity: .7; } }

/* ---- Hub: tiles ---- */
html.eclipse .tools-section .section-label { color: var(--ec-muted); letter-spacing: .18em; }
html.eclipse .reorder-hint { color: #5E5E68; }
html.eclipse .tool-card { background: var(--ec-surface); border-color: var(--ec-line); --ec-tile: var(--ec-white); }
html.eclipse .tool-card h4 { color: var(--ec-text); font-weight: 600; letter-spacing: .12em; }
html.eclipse .tool-card .folder-count { color: var(--ec-muted); }
html.eclipse .tool-col:nth-child(6n+1) .tool-card { --ec-tile: var(--ec-red); }
html.eclipse .tool-col:nth-child(6n+2) .tool-card { --ec-tile: var(--ec-orange); }
html.eclipse .tool-col:nth-child(6n+3) .tool-card { --ec-tile: var(--ec-yellow); }
html.eclipse .tool-col:nth-child(6n+4) .tool-card { --ec-tile: var(--ec-green); }
html.eclipse .tool-col:nth-child(6n+5) .tool-card { --ec-tile: var(--ec-blue-2); }
html.eclipse .tool-col:nth-child(6n+6) .tool-card { --ec-tile: #8A63E8; }
html.eclipse .tool-card:hover {
  background: var(--ec-surface-2); border-color: var(--ec-tile);
  box-shadow: 0 0 0 1px var(--ec-tile), 0 0 28px -6px var(--ec-tile);
}
html.eclipse .tool-card:hover h4 { color: var(--ec-white); }
html.eclipse .tool-card .tool-mark { background: var(--ec-black); box-shadow: inset 0 0 0 1px var(--ec-line-2); }
html.eclipse .tool-card .tool-mark:not(:has(.mark-emoji)) {
  background: var(--ec-black) url("mark.svg") center / 34px 34px no-repeat;
}
html.eclipse .tool-card .tool-mark svg { visibility: hidden; position: absolute; }  /* Regard dot mark */
html.eclipse .folder-mini { background: var(--ec-black); border-color: var(--ec-line-2); }
html.eclipse .folder-mini .mini { background: var(--ec-surface-2); }
html.eclipse .tool-col.sortable-chosen .tool-card { border-color: var(--ec-white); box-shadow: 0 0 34px -8px #fff; }
html.eclipse .tool-col.ins-before .tool-card { box-shadow: -10px 0 0 -4px var(--ec-white); }
html.eclipse .tool-col.ins-after .tool-card { box-shadow: 10px 0 0 -4px var(--ec-white); }
html.eclipse .tool-col.drop-target .tool-card { border-color: var(--ec-white); box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
html.eclipse .new-apps { border-color: var(--ec-line-2); }
html.eclipse .new-apps.unfile-hover { border-color: var(--ec-white); background: rgba(255,255,255,.05); }
html.eclipse .tile-menu, html.eclipse .tile-export { color: #5E5E68; }
html.eclipse .tile-menu:hover, html.eclipse .tile-export:hover,
html.eclipse .drag-handle:hover { color: var(--ec-white); background: var(--ec-line); }
html.eclipse .tile-pop { background: var(--ec-surface-2); border-color: var(--ec-line-2); box-shadow: 0 18px 40px rgba(0,0,0,.7); }
html.eclipse .tile-pop button { color: var(--ec-text); }
html.eclipse .tile-pop button:hover { background: var(--ec-line); color: var(--ec-white); }
html.eclipse .tile-pop .pop-label { color: var(--ec-muted); }
html.eclipse .folder-overlay { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
html.eclipse .folder-panel { background: var(--ec-surface); box-shadow: 0 0 0 1px var(--ec-line-2), 0 30px 80px rgba(0,0,0,.8); }
html.eclipse .folder-panel .fname { background: transparent; color: var(--ec-white); }
html.eclipse .folder-panel .fname:hover, html.eclipse .folder-panel .fname:focus { border-color: var(--ec-line-2); }
html.eclipse .folder-panel .ftile .unfile { background: var(--ec-line-2); }
html.eclipse .folder-panel .ftile .unfile:hover { background: var(--ec-red); }

/* ---- Hub: App Access + Tile Icons pages ---- */
html.eclipse .access-table th { background: var(--ec-surface-2); color: var(--ec-muted); }
html.eclipse .access-table td { border-color: var(--ec-line); }
html.eclipse .detail-tr > td { background: var(--ec-surface); border-bottom-color: var(--ec-white); }
html.eclipse .ua-su, html.eclipse .access-table .badge-su { background: var(--ec-white); color: var(--ec-black); }
html.eclipse .ua-ext, html.eclipse .rc-chip { background: var(--ec-surface-2); border-color: var(--ec-line-2); color: var(--ec-text); }
html.eclipse .ua-card, html.eclipse .rc-panel { background: var(--ec-surface); border-color: var(--ec-line); }
html.eclipse .app-tile, html.eclipse .mini-tile, html.eclipse .qb button, html.eclipse .quick-btns button {
  background: var(--ec-surface); border-color: var(--ec-line-2); color: var(--ec-text);
}
html.eclipse .app-tile:has(input:checked), html.eclipse .mini-tile.on {
  background: var(--ec-surface-2); border-color: var(--ec-white); color: var(--ec-white);
}
html.eclipse .qb button:hover, html.eclipse .quick-btns button:hover { border-color: var(--ec-white); color: var(--ec-white); }
html.eclipse input[type=checkbox], html.eclipse input[type=radio] { accent-color: var(--ec-white); }
html.eclipse .icon-preview { background: var(--ec-black); box-shadow: inset 0 0 0 1px var(--ec-line-2); }

/* Inline light fills left in base-derived pages */
html.eclipse [style*="background:#fff"], html.eclipse [style*="background: #fff"],
html.eclipse [style*="background:#eef7f6"], html.eclipse [style*="background:#f8f9fa"] {
  background: var(--ec-surface) !important; border-color: var(--ec-line-2) !important;
}

/* ---- Catalog Browser (static/catalog/theme.css tokens) ----
   One look on Eclipse: these win over both the dark default and
   [data-theme="light"], and the Light/Dark pill is hidden. */
html.eclipse, html.eclipse[data-theme] {
  --brand-slate: #151518; --brand-slate-900: #000; --brand-slate-700: #26262B;
  --brand-slate-300: #9C9CA6; --brand-slate-100: #151518;
  --brand-teal: #71C0DE; --brand-teal-700: #1293C5; --brand-teal-100: rgba(113,192,222,.14);

  --color-bg: #000; --color-surface: #0C0C0E; --color-surface-2: #151518;
  --color-surface-elevated: #151518; --color-border: #26262B; --color-border-strong: #3A3A41;
  --color-text: #F2F2F4; --color-text-muted: #9C9CA6; --color-text-dim: #6E6E78; --color-text-inverse: #000;
  --color-sidebar-bg: #000; --color-sidebar-text: #C9C9D1; --color-sidebar-hover-bg: rgba(255,255,255,.06);
  --color-sidebar-active-bg: transparent; --color-sidebar-active-text: #fff;
  --color-sidebar-active-accent: #fff; --color-sidebar-border: #26262B;
  --color-header-bg: #000; --color-header-border: #26262B;
  --color-primary: #fff; --color-primary-hover: #DADADF; --color-primary-fg: #000;
  --color-primary-soft-bg: rgba(255,255,255,.10);
  --color-accent: #71C0DE; --color-bg-hover: #1E1E22;
  --color-success: #33CA00; --color-warning: #FFAD00; --color-danger: #FF1807; --color-info: #71C0DE;
  --color-badge-success-bg: rgba(51,202,0,.16);   --color-badge-success-fg: #7DC62C;
  --color-badge-warning-bg: rgba(255,173,0,.16);  --color-badge-warning-fg: #FFAD00;
  --color-badge-danger-bg: rgba(255,24,7,.18);    --color-badge-danger-fg: #FF6A5E;
  --color-badge-info-bg: rgba(113,192,222,.16);   --color-badge-info-fg: #71C0DE;
  --color-badge-muted-bg: rgba(255,255,255,.08);  --color-badge-muted-fg: #9C9CA6;
  --color-table-header-bg: #151518; --color-table-header-fg: #9C9CA6;
  --color-table-row-hover: rgba(255,255,255,.05); --color-table-row-selected: rgba(255,255,255,.10);
  --color-table-border: #26262B;
  --color-input-bg: #151518; --color-input-border: #3A3A41;
  --color-input-focus: #fff; --color-input-focus-ring: rgba(255,255,255,.14);
  --color-log-bg: #0C0C0E; --color-log-fg: #71C0DE;
  --color-tag-d-bg: rgba(18,147,197,.22);  --color-tag-d-fg: #71C0DE;
  --color-tag-f-bg: rgba(92,48,189,.30);   --color-tag-f-fg: #B9A2F5;
  --color-tag-both-bg: rgba(51,202,0,.18); --color-tag-both-fg: #7DC62C;
  --color-ir-group-header-bg: #FDFF00; --color-ir-group-header-fg: #000;
  --color-ir-writer-bg: rgba(18,147,197,.10); --color-ir-publisher-bg: rgba(255,173,0,.10);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.6); --shadow-md: 0 6px 18px rgba(0,0,0,.7); --shadow-lg: 0 14px 40px rgba(0,0,0,.85);
}
html.eclipse .nav-regard {
  background: #000 !important;
  border-bottom: 2px solid transparent !important;
  border-image: var(--ec-spectrum) 1 !important;
}
html.eclipse .cat-wrap .theme-pill { display: none; }
html.eclipse .ctrl-pill { color: #fff; border-color: var(--ec-line-2); background: var(--ec-surface-2); }
html.eclipse .ctrl-pill .pct { color: var(--ec-yellow); }
html.eclipse .data-table tr.at-review td { background: rgba(253,255,0,.10); color: var(--ec-text); }
html.eclipse .data-table tr.at-review:hover td { background: rgba(253,255,0,.16); }
html.eclipse .data-table tr.cat-row-dormant td { background: rgba(255,173,0,.10); }

/* ---- Signed-out pages (login, password reset): the card sits in front of the eclipse ---- */
html.eclipse body.ec-auth { min-height: 100vh; overflow-x: hidden; }
html.eclipse body.ec-auth > .container { padding-top: 14vh !important; position: relative; }
html.eclipse body.ec-auth > .container::before {
  content: ""; position: absolute; left: 50%; top: 14vh; width: 520px; height: 520px;
  transform: translate(-50%, -70px); border-radius: 50%; background: #000; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 30px 4px rgba(255,255,255,.4),
              0 0 140px 30px rgba(255,255,255,.10), 26px -20px 90px 6px rgba(255,255,255,.20);
}
html.eclipse body.ec-auth .row { position: relative; }
html.eclipse body.ec-auth .card { background: rgba(12,12,14,.92); backdrop-filter: blur(6px); border-radius: 14px; }
html.eclipse body.ec-auth .card h3 { font-weight: 300; letter-spacing: .02em; color: #fff; }
html.eclipse body.ec-auth .nav-regard .container { justify-content: center !important; }

/* ---- App Access: remaining light surfaces ---- */
html.eclipse .access-table { background: var(--ec-surface); border-color: var(--ec-line); }
html.eclipse .access-table thead th { background: var(--ec-surface-2); color: var(--ec-muted); border-bottom-color: var(--ec-line-2); }
html.eclipse .access-table tbody tr:hover { background: rgba(255,255,255,.05); }
html.eclipse .access-table td.user-cell { color: var(--ec-white); }
html.eclipse .access-table td.user-cell .badge-pending, html.eclipse .ua-pend {
  background: rgba(255,173,0,.14); color: var(--ec-orange); border-color: rgba(255,173,0,.45);
}
html.eclipse .save-bar { background: rgba(0,0,0,.9); backdrop-filter: blur(6px); border-top-color: var(--ec-line-2); }
html.eclipse .rc-all, html.eclipse .chev, html.eclipse .mini-tile .st { color: var(--ec-muted); }
html.eclipse .mini-tile { color: var(--ec-muted); }
html.eclipse .mini-tile.on .st { color: var(--ec-green-2); }
html.eclipse .app-tile.auto { background: var(--ec-black); }
html.eclipse .renamed { background: rgba(51,202,0,.16); color: var(--ec-green-2); }
html.eclipse [style*="border-color:#f1c4c9"] { border-color: var(--ec-red-2) !important; }

/* Hub hero: wordmark eyebrow sits under the mark, not beside it */
html.eclipse .hero .hero-mark { display: flex; }