/* mogdl.com fonts — Rajdhani (body), Oxanium (display labels),
   IBM Plex Mono (code). Loaded once at the top so the rest of the
   sheet can rely on them. */
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Oxanium:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* ================================================================
 * MOG Deadlock — Plane white-label theme
 * Injected into every Plane HTML response by Caddy
 * (replace-response module → Caddyfile.local).
 *
 * Approach: rather than fight Tailwind class hashes, override the
 * exact CSS custom properties Plane v0.27 declares on
 * [data-theme=dark]. Format matches Plane: each color is a
 * comma-separated RGB triple (consumed via rgb(var(--token))).
 *
 * Palette mirrors mogdl.com's globals.css:
 *   accent-400  #6ae79a  (106, 231, 154)  primary
 *   accent-500  #3fc776  ( 63, 199, 118)  hover
 *   accent-600  #2b9559  ( 43, 149,  89)  pressed
 *   ink-995     #040506  (  4,   5,   6)  deep bg
 *   ink-990     #07090a  (  7,   9,  10)  page bg
 *   ink-980     #0a0d0f  ( 10,  13,  15)  panel bg
 *   ink-950     #11161a  ( 17,  22,  26)  raised
 *   ink-925     #161c20  ( 22,  28,  32)  raised-2
 *   ink-900     #1b2328  ( 27,  35,  40)  hover
 *   steel-800   #29343c  ( 41,  52,  60)  border-strong
 *   sand-100    #eef4f6  (238, 244, 246)  text-primary
 *   sand-200    #b5c2c8  (181, 194, 200)  text-secondary
 *   sand-300    #7f9099  (127, 144, 153)  text-muted
 * ================================================================ */

/* ── Override Plane's color tokens at the data-theme root ──────── */
[data-theme="dark"],
[data-theme="dark-contrast"] {
  /* Primary scale — used by buttons, links, focus rings, indicators */
  --color-primary-10:  20, 30, 24;
  --color-primary-20:  24, 38, 30;
  --color-primary-30:  28, 50, 38;
  --color-primary-40:  34, 70, 50;
  --color-primary-50:  43, 95, 65;
  --color-primary-60:  53, 125, 80;
  --color-primary-70:  60, 155, 95;
  --color-primary-80:  63, 175, 105;
  --color-primary-90:  63, 199, 118;
  --color-primary-100: 106, 231, 154;
  --color-primary-200: 106, 231, 154;
  --color-primary-300:  63, 199, 118;
  --color-primary-400:  43, 149,  89;
  --color-primary-500:  43, 149,  89;
  --color-primary-600:  30, 110,  64;
  --color-primary-700:  22,  80,  46;
  --color-primary-800:  16,  56,  32;
  --color-primary-900:  10,  36,  21;

  /* Page + surface backgrounds */
  --color-background-100:  7,  9, 10;   /* page (ink-990) */
  --color-background-90:  10, 13, 15;   /* panels (ink-980) */
  --color-background-80:  17, 22, 26;   /* raised (ink-950) */

  /* Borders */
  --color-border-100: 22, 28, 32;       /* faint */
  --color-border-200: 28, 36, 42;
  --color-border-300: 41, 52, 60;       /* visible (steel-800) */
  --color-border-400: 56, 70, 81;       /* strong (steel-700) */

  /* Text scale — high-contrast on the near-black background */
  --color-text-100: 238, 244, 246;      /* primary (sand-100) */
  --color-text-200: 181, 194, 200;      /* secondary (sand-200) */
  --color-text-300: 127, 144, 153;      /* muted (sand-300) */
  --color-text-400: 100, 115, 124;      /* faint */

  /* Onboarding (auth/sign-in pages) */
  --color-onboarding-background-100: 7, 9, 10;
  --color-onboarding-background-200: 10, 13, 15;
  --color-onboarding-background-300: 17, 22, 26;
  --color-onboarding-background-400: 22, 28, 32;
  --color-onboarding-border-100: 41, 52, 60;
  --color-onboarding-border-200: 41, 52, 60;
  --color-onboarding-border-300: 41, 52, 60, 0.5;
  --color-onboarding-text-100: 238, 244, 246;
  --color-onboarding-text-200: 181, 194, 200;
  --color-onboarding-text-300: 127, 144, 153;
  --color-onboarding-text-400: 100, 115, 124;
  --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(0, 0, 0, 0.4);

  /* Toast / status accents — keep semantic colors but tone for dark */
  --color-error-100: 220, 80, 80;
  --color-error-200: 200, 60, 60;
  --color-error-500: 140, 51, 58;

  /* Pi widget background → match panels */
  --color-pi-100: var(--color-background-90);
}

/* ── Typography: switch to mogdl.com font stack ────────────────── */

html, body, button, input, select, textarea, [role="textbox"],
[class*="font-"], [class*="text-"] {
  font-family:
    "Rajdhani",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    sans-serif !important;
  font-feature-settings: "ss01", "ss02";
}

/* Display labels (uppercase tracked headings, sidebar wordmark, etc.)
   take the wider Oxanium face — same role as on the website. */
[class*="text-base"][class*="font-semibold"],
[class*="text-lg"][class*="font-semibold"],
[class*="text-xl"][class*="font-semibold"],
[class*="workspace-name"], [data-workspace-name],
nav[class*="sidebar"] [class*="font-semibold"] {
  font-family: "Oxanium", "Rajdhani", system-ui, sans-serif !important;
}

code, pre, [class*="font-mono"], kbd, samp, tt {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace !important;
}

/* mogdl.com radius scheme (tight): ~3-5px across the board. */
button, input, select, textarea,
[class*="rounded-md"], [class*="rounded-lg"], [class*="rounded-xl"],
[class*="rounded-sm"] {
  border-radius: 4px !important;
}
[class*="rounded-2xl"], [class*="rounded-3xl"] {
  border-radius: 6px !important;
}
[class*="rounded-full"] { /* keep avatars/pills round */ }

/* ── Page-wide tone + ambient gradient ─────────────────────────── */

html, body, #root, #__next {
  background-color: rgb(7, 9, 10) !important;
  color: rgb(238, 244, 246);
}

body {
  position: relative;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 540px at 88% -10%, rgba(106, 231, 154, 0.05), transparent 60%),
    radial-gradient(1100px 700px at -10% 110%, rgba(63, 199, 118, 0.035), transparent 60%);
  z-index: 0;
}
/* Make sure all real content sits above the ambient glow. */
body > * { position: relative; z-index: 1; }

/* ── Auth / onboarding pages: hero treatment ───────────────────── */

[class*="auth-container"], [class*="onboarding-container"],
main[class*="onboarding"], section[class*="auth"] {
  background:
    radial-gradient(800px 420px at 50% -8%, rgba(106, 231, 154, 0.10), transparent 65%),
    linear-gradient(180deg, rgb(10, 13, 15), rgb(7, 9, 10)) !important;
}

/* The auth card itself — bordered, slight inner glow. */
form[class*="auth"], div[class*="auth-form"], div[class*="onboarding-form"] {
  background: linear-gradient(180deg, rgb(17, 22, 26), rgb(10, 13, 15)) !important;
  border: 1px solid rgba(106, 231, 154, 0.10) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(106, 231, 154, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.45) !important;
}

/* "Sign in with MOG" / OIDC buttons get the primary treatment. */
a[href^="/auth/mog"], a[href*="/auth/mog/"],
button[class*="mog-oauth"], button[data-provider="mog"] {
  background: linear-gradient(135deg,
    rgba(106, 231, 154, 0.22),
    rgba(63, 199, 118, 0.10)) !important;
  border: 1px solid rgba(106, 231, 154, 0.45) !important;
  color: rgb(106, 231, 154) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 4px !important;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a[href^="/auth/mog"]:hover, button[data-provider="mog"]:hover {
  border-color: rgba(106, 231, 154, 0.70) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(106, 231, 154, 0.18) !important;
}

/* ── Typography polish: section headings → mogdl.com style ─────── */

h1, h2, h3 {
  letter-spacing: -0.01em;
}
h2[class*="font-semibold"],
[class*="text-base"][class*="font-semibold"]:not(button):not(a) {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  font-size: 12px;
  color: rgb(127, 144, 153) !important;
}

/* ── Primary buttons → green gradient + accent border + glow ───── */

button[class*="bg-custom-primary"]:not([disabled]) {
  background: linear-gradient(135deg,
    rgba(106, 231, 154, 0.20),
    rgba(63, 199, 118, 0.10)) !important;
  border: 1px solid rgba(106, 231, 154, 0.42) !important;
  color: rgb(106, 231, 154) !important;
  box-shadow:
    inset 0 0 0 1px rgba(106, 231, 154, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.25) !important;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
button[class*="bg-custom-primary"]:not([disabled]):hover {
  background: linear-gradient(135deg,
    rgba(106, 231, 154, 0.32),
    rgba(63, 199, 118, 0.18)) !important;
  border-color: rgba(106, 231, 154, 0.65) !important;
  color: #fff !important;
  box-shadow:
    inset 0 0 0 1px rgba(106, 231, 154, 0.30),
    0 6px 22px rgba(106, 231, 154, 0.18) !important;
}
button[class*="bg-custom-primary"]:not([disabled]):active {
  transform: translateY(1px);
}

/* Onboarding-form primary CTA gets the same treatment. */
button[type="submit"]:not([disabled]) {
  background: linear-gradient(135deg,
    rgba(106, 231, 154, 0.20),
    rgba(63, 199, 118, 0.10)) !important;
  border: 1px solid rgba(106, 231, 154, 0.42) !important;
  color: rgb(106, 231, 154) !important;
}
button[type="submit"]:not([disabled]):hover {
  color: #fff !important;
  border-color: rgba(106, 231, 154, 0.65) !important;
}

/* Secondary / ghost buttons stay neutral but pick up subtle hover. */
button[class*="bg-custom-background"]:hover,
button[class*="border-custom-border"]:hover {
  border-color: rgba(106, 231, 154, 0.32) !important;
}

/* ── Inputs / focus rings ──────────────────────────────────────── */

input, textarea, [role="combobox"], [role="textbox"], [contenteditable] {
  background-color: rgb(10, 13, 15) !important;
  border-color: rgb(41, 52, 60) !important;
  color: rgb(238, 244, 246) !important;
}
input:focus, textarea:focus,
[role="combobox"]:focus, [role="textbox"]:focus, [contenteditable]:focus {
  outline: 2px solid rgba(106, 231, 154, 0.42) !important;
  outline-offset: 1px !important;
  border-color: rgba(106, 231, 154, 0.55) !important;
}

::placeholder { color: rgb(100, 115, 124) !important; opacity: 1; }

/* ── Logo override ─────────────────────────────────────────────── */

/* Auth / onboarding logo (top-left of /auth/* pages). */
img[src*="plane-logos/"], img[src*="plane-logo"],
img[src*="logo-light"], img[src*="logo-dark"],
img[alt="Plane"], img[alt="Plane logo"], img[alt*="plane" i] {
  content: url("/mog-assets/mog-site-logo.png") !important;
  max-height: 32px !important;
  width: auto !important;
}

/* Sidebar collapsed mark + favicon-shape brand mark elsewhere. */
img[src*="plane-mark"], img[src*="plane_logo"], img[src*="plane-mono"] {
  content: url("/mog-assets/mog-mark.png") !important;
  max-height: 28px !important;
  width: auto !important;
}

/* ── Hide upstream Plane-branded UI ────────────────────────────── */

a[href*="github.com/makeplane"],
a[href*="discord.gg/A92xrEGCge"],
a[href*="discord.com/invite/A92xrEGCge"],
a[href*="discord.gg/plane"],
a[href*="docs.plane.so"],
a[href*="plane.so/changelog"],
a[href*="plane.so/contact"],
a[href*="plane.so/pricing"],
a[href*="plane.so/community"],
a[href*="sites.plane.so"],
a[href*="community.plane.so"],
a[href*="cal.com/plane"],
a[href$="plane.so"][target="_blank"],
a[href$="plane.so/"][target="_blank"],
/* Help menu wrappers — collapse the entire item, not just the link */
a[href*="plane.so"]:has(svg),
li:has(> a[href*="plane.so"]),
li:has(> a[href*="github.com/makeplane"]),
li:has(> a[href*="discord"]),
button:has(span:empty[class*="text-"]):not([type="submit"]):not([class*="bg-custom-primary"]) {
  display: none !important;
}

/* "What's new" / changelog popover launcher */
button[aria-label*="What's new" i],
button[aria-label*="changelog" i],
[data-help-action="changelog"],
[class*="changelog-pill"],
[class*="changelog-tooltip"] {
  display: none !important;
}

/* Intercom widget */
.intercom-launcher, .intercom-frame, .intercom-app, .intercom-lightweight-app,
#intercom-container, #intercom-frame, #intercom-launcher {
  display: none !important;
}

/* "Powered by Plane" / footer wordmarks */
[class*="powered-by-plane"], .plane-footer, .plane-watermark {
  display: none !important;
}

/* Telemetry first-run prompt */
[class*="telemetry-prompt"], [data-telemetry-prompt] {
  display: none !important;
}

/* Pro / Enterprise upsells */
[class*="upgrade-banner"], [class*="pro-banner"], [class*="plane-pro-cta"],
[class*="upgrade-to-pro"] {
  display: none !important;
}

/* ── Workspace name in sidebar → wordmark treatment ────────────── */

nav[class*="sidebar"] [data-workspace-name],
[class*="workspace-logo"] + span,
[class*="workspace-name"],
button[class*="workspace-switch"] [class*="font-semibold"] {
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 13px;
}

/* ── Sidebar accent stripe (tiny green hairline) ───────────────── */

aside[class*="sidebar"], nav[class*="sidebar"] {
  position: relative;
}
aside[class*="sidebar"]::before, nav[class*="sidebar"]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 4%,
    rgba(106, 231, 154, 0.22) 18%,
    rgba(106, 231, 154, 0.22) 82%,
    transparent 96%
  );
  pointer-events: none;
}

/* ── Scrollbar (subtle, mogdl.com style) ───────────────────────── */

* { scrollbar-width: thin; scrollbar-color: rgb(41, 52, 60) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(41, 52, 60);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(56, 70, 81); }

/* ── Selection highlight ──────────────────────────────────────── */

::selection {
  background: rgba(106, 231, 154, 0.32);
  color: #fff;
}

/* ── Modals / popovers / dropdowns: slightly elevate bg ────────── */

[role="dialog"], [data-radix-popper-content-wrapper],
[class*="dropdown-content"], [class*="popover-content"] {
  background-color: rgb(10, 13, 15) !important;
  border: 1px solid rgb(41, 52, 60) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
}

/* ── Card + issue-row hover lift ───────────────────────────────── */

[class*="issue-row"]:hover, [class*="kanban-issue-block"]:hover {
  background: linear-gradient(
    180deg,
    rgba(106, 231, 154, 0.04),
    rgba(106, 231, 154, 0)) !important;
  border-color: rgba(106, 231, 154, 0.18) !important;
}

/* ── Top navbar / header bar ───────────────────────────────────── */

header[class*="header"], div[class*="app-header"], div[class*="page-header"] {
  background-color: rgb(10, 13, 15) !important;
  border-bottom: 1px solid rgba(224, 233, 237, 0.07) !important;
  backdrop-filter: blur(8px);
}

/* Breadcrumbs: keep neutral but use accent on the current crumb. */
[class*="breadcrumb"] [aria-current="page"],
[class*="breadcrumb"] [class*="current"] {
  color: rgb(106, 231, 154) !important;
}

/* ── Status chips (Backlog / Todo / In Progress / Done / Cancelled) ─ */

/* "Done" chips → mogdl.com accent */
[class*="state-group-completed"], [class*="state-completed"] {
  background: rgba(106, 231, 154, 0.14) !important;
  color: rgb(106, 231, 154) !important;
  border-color: rgba(106, 231, 154, 0.30) !important;
}

/* "In Progress" → warm amber (mogdl.com lj-accent) */
[class*="state-group-started"], [class*="state-started"] {
  background: rgba(255, 195, 124, 0.12) !important;
  color: rgb(255, 195, 124) !important;
  border-color: rgba(255, 195, 124, 0.28) !important;
}

/* ── Project / workspace identity squares (colored letter blocks) ── */

/* Plane defaults to flat colored squares; keep them but tighten radius
   and add a subtle inner highlight to match mogdl.com card chrome. */
[class*="project-logo"], [class*="workspace-logo"],
[class*="emoji-icon-picker"] [class*="bg-"] {
  border-radius: 4px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20) !important;
}

/* ── Tabs (issue list view, settings) ──────────────────────────── */

[role="tab"][aria-selected="true"],
[class*="tab-active"], [class*="active-tab"] {
  border-bottom-color: rgb(106, 231, 154) !important;
  color: rgb(238, 244, 246) !important;
}

/* ── Toast notifications ───────────────────────────────────────── */

[class*="toast"][class*="success"], [data-sonner-toast][data-type="success"] {
  background: linear-gradient(180deg, rgb(17, 22, 26), rgb(10, 13, 15)) !important;
  border: 1px solid rgba(106, 231, 154, 0.32) !important;
  color: rgb(238, 244, 246) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important;
}

/* ── Loader / spinner color ────────────────────────────────────── */

[class*="loader"], [class*="spinner"] {
  border-top-color: rgb(106, 231, 154) !important;
  border-right-color: rgba(106, 231, 154, 0.32) !important;
}

/* ── Links → accent green ─────────────────────────────────────── */

a[class*="text-custom-primary"], a:has(span[class*="text-custom-primary"]),
[class*="text-custom-primary"] {
  color: rgb(106, 231, 154) !important;
}
a[class*="text-custom-primary"]:hover { color: rgb(140, 240, 175) !important; }


/* ===== mog-0x3 Plane workspace UX overrides appended 20260509T021605Z ===== */
/* ============================================================================
 * MOG Plane white-label overrides (mog-0x3)
 * Target: self-hosted Plane at tasks.mogdl.com
 *
 * Plane's frontend is Next.js + Tailwind. Class names like `.bg-custom-primary`
 * and `.text-custom-text-300` are stable design-token names defined in
 * Plane's tailwind config and have survived multiple major versions. Generated
 * utility classes (`.h-7`, `.px-2`, etc.) are NOT stable — avoid relying on
 * them. Where possible we target structural selectors (data-* attrs, ARIA
 * roles, semantic tags) and fall back to Plane's named tokens.
 *
 * ----------------------------------------------------------------------------
 * VERIFY SELECTORS WITH THIS DEVTOOLS SNIPPET:
 *
 *   // Paste into DevTools console while viewing tasks.mogdl.com:
 *   const dump = (label, sel) => {
 *     const el = document.querySelector(sel);
 *     console.log(label, sel, '->', el, el && el.className);
 *   };
 *   dump('sidebar root', 'aside, [class*="sidebar"]');
 *   dump('first sidebar item', 'aside a[href*="/projects/"]');
 *   dump('home root', 'main [class*="home"]');
 *   dump('recents widget', '[class*="recent"], [data-widget="recents"]');
 *   // Then: $$('[class*="sidebar"]').forEach(e => console.log(e.tagName, e.className));
 *
 * If a rule below stops applying after a Plane version bump, re-run the
 * snippet, find the new class fragment, and update the selectors. Each rule
 * block is annotated with the bead it addresses.
 * ============================================================================ */

:root {
  /* Tunables — tweak in one place. */
  --mog-sidebar-item-min-height: 36px;       /* default ~28px in Plane */
  --mog-sidebar-item-font-size: 14px;        /* default ~12-13px */
  --mog-sidebar-item-padding-y: 8px;
  --mog-sidebar-item-padding-x: 12px;
  --mog-sidebar-icon-size: 18px;             /* default ~14-16px */

  /* 0x3.6 — Resources sidebar link. Set this to the live page URL after
     creating the Resources page in Plane. Empty value disables injection. */
  --mog-resources-url: "";
  --mog-resources-label: "Resources";
}

/* ============================================================================
 * [0x3.4] Taller / easier-to-read sidebar controls.
 * Targets every link/button rendered inside the workspace sidebar.
 * ============================================================================ */

aside a,
aside button,
nav[aria-label*="sidebar" i] a,
nav[aria-label*="sidebar" i] button,
[class*="sidebar"] a[href],
[class*="sidebar"] > * button {
  min-height: var(--mog-sidebar-item-min-height) !important;
  font-size: var(--mog-sidebar-item-font-size) !important;
  padding-top: var(--mog-sidebar-item-padding-y) !important;
  padding-bottom: var(--mog-sidebar-item-padding-y) !important;
  padding-left: var(--mog-sidebar-item-padding-x) !important;
  padding-right: var(--mog-sidebar-item-padding-x) !important;
  line-height: 1.35 !important;
}

/* Bump icon sizing inside sidebar items. Plane uses lucide-react SVGs. */
aside a svg,
aside button svg,
[class*="sidebar"] a[href] svg,
[class*="sidebar"] > * button svg {
  width: var(--mog-sidebar-icon-size) !important;
  height: var(--mog-sidebar-icon-size) !important;
  flex-shrink: 0;
}

/* Slightly stronger contrast on inactive sidebar text. Uses Plane's design
 * tokens which are stable across versions. */
aside .text-custom-text-300,
aside .text-custom-text-400,
[class*="sidebar"] .text-custom-text-300,
[class*="sidebar"] .text-custom-text-400 {
  color: rgb(var(--color-text-200)) !important;
}

/* ============================================================================
 * [0x3.2] Visual divider between project-name-prefix groups.
 * Pure cosmetic complement to the [Server]/[Mapping]/[Deadworks] naming
 * convention. We can't insert real DOM headers without JS, but a left-border
 * accent on items whose visible text starts with a bracket-prefix gives a
 * grouped feel.
 *
 * NOTE: :has() requires Chromium 105+, Firefox 121+, Safari 15.4+. Skip if
 * your audience is on stale browsers (graceful no-op).
 * ============================================================================ */

aside a:has(> span:first-child:where(:not(:empty))) {
  /* placeholder so a future structural rule lands cleanly; no visual change */
}

/* Color-tag bracket prefixes via attribute selectors on title/aria-label.
 * Plane sets aria-label or title on project links to the project name. */
aside a[title^="[Server]"]   { border-left: 3px solid #4f9eff !important; padding-left: calc(var(--mog-sidebar-item-padding-x) - 3px) !important; }
aside a[title^="[Mapping]"]  { border-left: 3px solid #6fd96f !important; padding-left: calc(var(--mog-sidebar-item-padding-x) - 3px) !important; }
aside a[title^="[Deadworks]"]{ border-left: 3px solid #d97a4f !important; padding-left: calc(var(--mog-sidebar-item-padding-x) - 3px) !important; }
aside a[title^="[Ops]"]      { border-left: 3px solid #b07fff !important; padding-left: calc(var(--mog-sidebar-item-padding-x) - 3px) !important; }
aside a[title^="[Web]"]      { border-left: 3px solid #f3c84a !important; padding-left: calc(var(--mog-sidebar-item-padding-x) - 3px) !important; }

/* Class fallback: some Plane builds set the project name on a child span
 * rather than the anchor's title attribute. Same accents via aria-label. */
aside a[aria-label^="[Server]"]    { border-left: 3px solid #4f9eff !important; }
aside a[aria-label^="[Mapping]"]   { border-left: 3px solid #6fd96f !important; }
aside a[aria-label^="[Deadworks]"] { border-left: 3px solid #d97a4f !important; }
aside a[aria-label^="[Ops]"]       { border-left: 3px solid #b07fff !important; }
aside a[aria-label^="[Web]"]       { border-left: 3px solid #f3c84a !important; }

/* ============================================================================
 * [0x3.6] Sidebar Resources link injection (optional).
 * Inserts a fixed link near the top of the workspace sidebar that points at
 * the Resources page. Activates only when --mog-resources-url is non-empty.
 *
 * We can't insert a new DOM node from CSS, but we CAN render a pseudo-element
 * that visually behaves like a sidebar link and use a CSS-only `content: url`
 * trick. To make it actually clickable, we instead style the workspace
 * <header>'s ::after as an absolutely-positioned hit area. If that proves
 * fragile in your build, prefer the Plane-Pages "pin to sidebar" route
 * documented in README.md and disable this block.
 * ============================================================================ */

aside header,
aside [class*="workspace-header"] {
  position: relative;
}

aside header::after,
aside [class*="workspace-header"]::after {
  content: var(--mog-resources-label);
  display: var(--mog-resources-display, none);  /* set to block in :root override below if URL is set */
  margin-top: 8px;
  padding: var(--mog-sidebar-item-padding-y) var(--mog-sidebar-item-padding-x);
  font-size: var(--mog-sidebar-item-font-size);
  color: rgb(var(--color-text-200));
  border-radius: 4px;
  cursor: pointer;
}

/* If you want the injected link, uncomment and fill the URL below, then
 * register a global click-handler via Plane's allowed JS-injection or via
 * the same proxy that injects this stylesheet. Pure-CSS clickable pseudo-
 * elements are not portable. Recommended path: use Plane's "Pin page" on the
 * Resources page instead. */

/* :root { --mog-resources-display: block; --mog-resources-url: "/mog/pages/<page-id>"; } */

/* ============================================================================
 * [0x3.7] Reorder Home page so Recents sits below priority widgets.
 *
 * Plane v0.23+ shipped a "Customize home" panel that lets you reorder/hide
 * widgets natively. Try that first. This CSS is a fallback for builds where
 * the panel is missing or for users who want a server-enforced order.
 *
 * The Home page renders widgets as siblings inside a flex/grid container.
 * We bump the Recents widget's `order` so it lands last; everything else
 * keeps default order (0).
 * ============================================================================ */

main [class*="home"] [class*="recent" i],
main [data-widget="recents"],
main section:has(> :is(h2,h3,header):first-child:where([class*="recent" i])) {
  order: 99 !important;
}

/* Make the Home root a flex column if it isn't already — needed for `order`
 * to take effect. Plane already uses flex/grid for Home in current versions;
 * this is a defensive no-op when that's true. */
main [class*="home"] > div:first-child {
  display: flex;
  flex-direction: column;
}

/* ============================================================================
 * [0x3.1] Spreadsheet/table layout polish (cosmetic).
 * The actual layout choice is set per-view via the API script. These rules
 * just make the table layout slightly easier on the eyes — taller rows and
 * sticky header.
 * ============================================================================ */

[class*="spreadsheet"] table thead,
[class*="spreadsheet"] [role="rowgroup"]:first-child {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgb(var(--color-background-100));
}

[class*="spreadsheet"] tbody tr,
[class*="spreadsheet"] [role="row"] {
  min-height: 40px;
}