/*
 * LK Lands — Plane Custom Theme v4
 * Monday.com-inspired: light sidebar, blue accents, clean & flat
 */

/* ── Font rendering ── */
body {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ── SIDEBAR: Light background like Monday ── */
[aria-label="Main sidebar"],
[aria-label="Sidebar peek view"] {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border-right: 1px solid #e6e9ef !important;
}

/* Override Plane CSS variables for sidebar */
[aria-label="Main sidebar"] {
  --color-background-100: 255, 255, 255;
  --color-sidebar-background-100: 255, 255, 255;
  --color-sidebar-background-90: 245, 246, 248;
  --color-sidebar-background-80: 237, 239, 243;
  --color-text-100: 50, 51, 56;
  --color-text-200: 97, 99, 107;
  --color-text-300: 130, 132, 140;
  --color-text-400: 158, 160, 168;
  --color-sidebar-text-100: 50, 51, 56;
  --color-sidebar-text-200: 97, 99, 107;
  --color-sidebar-text-300: 130, 132, 140;
  --color-sidebar-text-400: 158, 160, 168;
  --color-border-100: 230, 233, 239;
  --color-border-200: 230, 233, 239;
  --color-sidebar-border-100: 230, 233, 239;
  --color-sidebar-border-200: 230, 233, 239;
}

/* Kill the dark bg override from v3 */
div.bg-custom-background-90 {
  background-color: inherit !important;
}

div.bg-custom-background-100[aria-label="Main sidebar"],
div.bg-custom-background-100[aria-label="Main sidebar"] {
  --color-background-100: 255, 255, 255;
  --color-sidebar-background-100: 255, 255, 255;
  --color-sidebar-background-90: 245, 246, 248;
  --color-sidebar-background-80: 237, 239, 243;
}

/* Sidebar text: dark on light — like Monday */
[aria-label="Main sidebar"] *:not(.material-symbols-rounded) {
  color: #323338 !important;
}

[aria-label="Main sidebar"] a,
[aria-label="Main sidebar"] a *,
[aria-label="Main sidebar"] button,
[aria-label="Main sidebar"] button *,
[aria-label="Main sidebar"] span,
[aria-label="Main sidebar"] p,
[aria-label="Main sidebar"] h4,
[aria-label="Main sidebar"] div {
  color: #323338 !important;
}

/* Sidebar section headers (Projects, Workspace) — Monday style */
[aria-label="Main sidebar"] [class*="text-custom-text-400"],
[aria-label="Main sidebar"] [class*="text-custom-sidebar-text-400"],
[aria-label="Main sidebar"] .text-xs {
  color: #676879 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* Sidebar hover — Monday uses a light gray bg */
[aria-label="Main sidebar"] a:hover,
[aria-label="Main sidebar"] button:hover {
  background: #f5f6f8 !important;
  color: #323338 !important;
}

/* Sidebar active/selected — Monday uses light blue highlight */
[aria-label="Main sidebar"] a[class*="bg-custom-primary"],
[aria-label="Main sidebar"] [class*="bg-custom-sidebar-background-80"],
[aria-label="Main sidebar"] [aria-current="page"] {
  background: #cce5ff !important;
  color: #0073ea !important;
  border-radius: 6px !important;
}

[aria-label="Main sidebar"] [aria-current="page"] *,
[aria-label="Main sidebar"] a[class*="bg-custom-primary"] * {
  color: #0073ea !important;
}

/* Sidebar icons — muted gray like Monday */
[aria-label="Main sidebar"] .material-symbols-rounded {
  color: #676879 !important;
  font-size: 18px !important;
}

/* Sidebar border colors */
[aria-label="Main sidebar"] [class*="border"] {
  border-color: #e6e9ef !important;
}

/* Workspace switcher — bold like Monday */
[aria-label="Main sidebar"] button[class*="truncate"] h4,
[aria-label="Main sidebar"] h4 {
  color: #323338 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

/* "New work item" button — Monday style */
[aria-label="Main sidebar"] button[class*="bg-custom-sidebar-background-80"],
[aria-label="Main sidebar"] [class*="bg-custom-sidebar-background-80"] {
  background: #f5f6f8 !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 6px !important;
}

/* Sidebar resize handle */
[aria-label="Resize sidebar"] {
  background: #e6e9ef !important;
}

/* Sidebar scrollbar */
[aria-label="Main sidebar"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12) !important;
}

/* ── MAIN CONTENT AREA — white like Monday ── */
.app-container {
  background: #ffffff !important;
}

div[class*="bg-custom-background-100"][class*="scrollbar"] {
  background: #ffffff !important;
}

/* ── TOP HEADER BAR — clean white like Monday ── */
header,
.app-container > div:first-child {
  background: #ffffff !important;
  border-bottom: 1px solid #e6e9ef !important;
  backdrop-filter: none !important;
}

/* Search bar — Monday style rounded pill */
input[placeholder="Search commands..."] {
  background: #f5f6f8 !important;
  border: 1px solid #e6e9ef !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  color: #676879 !important;
}

input[placeholder="Search commands..."]:focus {
  background: #fff !important;
  border-color: #0073ea !important;
  box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.15) !important;
}

/* ── PRIMARY ACCENT — Monday blue (#0073ea) ── */
:root {
  --color-primary-100: 0, 115, 234;
  --color-primary-90: 0, 100, 210;
  --color-primary-80: 0, 90, 190;
}

/* Primary buttons — Monday blue */
button[class*="bg-custom-primary"],
a[class*="bg-custom-primary"] {
  background: #0073ea !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

button[class*="bg-custom-primary"]:hover {
  background: #0060c2 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Links — Monday blue */
a[class*="text-custom-primary"] {
  color: #0073ea !important;
  font-weight: 500 !important;
}

a[class*="text-custom-primary"]:hover {
  color: #0060c2 !important;
}

/* ── BUTTONS — flat, minimal like Monday ── */
button {
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
}

/* ── CARDS & CONTAINERS — flat, subtle borders like Monday ── */
div[class*="flex"][class*="flex-col"][class*="justify-between"][class*="rounded"] {
  border-radius: 8px !important;
  border: 1px solid #e6e9ef !important;
  box-shadow: none !important;
  background: #fff !important;
  transition: background 0.15s ease !important;
}

div[class*="flex"][class*="flex-col"][class*="justify-between"][class*="rounded"]:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
  border-color: #d0d4e4 !important;
}

/* ── MODALS & DROPDOWNS — clean, flat ── */
[role="dialog"] {
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}

[role="listbox"],
[role="menu"] {
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

/* ── INPUT FOCUS — Monday blue ring ── */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 115, 234, 0.2) !important;
  border-color: #0073ea !important;
}

/* ── SCROLLBARS — thin, minimal ── */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2) !important;
}

/* ── TABLE ROWS — Monday hover style ── */
tr:hover {
  background: #f5f6f8 !important;
}

/* ── ROUNDED CORNERS — tighter like Monday (6-8px, not 14-18) ── */
[class*="rounded-md"] {
  border-radius: 6px !important;
}

[class*="rounded-lg"] {
  border-radius: 8px !important;
}

[class*="rounded-xl"] {
  border-radius: 8px !important;
}

/* ── "Star us on GitHub" — hide it like Monday would ── */
a[href*="github.com/makeplane"] {
  opacity: 0.25 !important;
  transition: opacity 0.2s ease !important;
}
a[href*="github.com/makeplane"]:hover {
  opacity: 1 !important;
}

/* ── Community badge — Monday blue instead of green ── */
[aria-label="Main sidebar"] a[href*="community"],
[aria-label="Main sidebar"] button[class*="bg-green"],
[aria-label="Main sidebar"] [class*="community"] {
  background: rgba(0, 115, 234, 0.1) !important;
  color: #0073ea !important;
  border-radius: 6px !important;
}

/* ── Loading screen ── */
.relative.flex.h-screen.w-full {
  background: #ffffff !important;
}

/* ── Smooth transitions on interactive elements ── */
a, button, input, select, textarea {
  transition: all 0.1s ease !important;
}

/* ── Issue/item rows — clean separator lines like Monday ── */
[class*="border-b"] {
  border-color: #e6e9ef !important;
}

/* ── Group headers — slightly bolder like Monday ── */
[class*="bg-custom-background-80"] {
  background: #f5f6f8 !important;
}

/* ── PROJECT ICONS: Uniform monochrome like Monday board icons ── */
/* Force ALL material icons in sidebar to be uniform gray — override inline styles */
[aria-label="Main sidebar"] span.material-symbols-rounded {
  color: #676879 !important;
  font-size: 16px !important;
  scale: 1 !important;
  opacity: 0.65 !important;
}

/* The icon container div — remove any background color */
[aria-label="Main sidebar"] div.grid.place-items-center {
  background: transparent !important;
}

/* Emoji icons in sidebar — also make them uniform */
[aria-label="Main sidebar"] [class*="text-base"][class*="grid"] {
  filter: grayscale(100%) !important;
  opacity: 0.5 !important;
}

/* ── HIDE "Star us on GitHub" completely ── */
a[href*="github.com/makeplane"] {
  display: none !important;
}

/* ── Hide Community badge — clean sidebar like Monday ── */
[aria-label="Main sidebar"] a[href*="community"],
[aria-label="Main sidebar"] [class*="community"] {
  display: none !important;
}

/* ── CONTENT: Monday-style table/list views ── */
/* Group header bars — colored left accent like Monday */
[class*="bg-custom-primary"][class*="rounded"] {
  border-radius: 4px !important;
}

/* Status labels — pill shaped like Monday */
[class*="bg-custom-background-80"][class*="text-xs"],
[class*="rounded-sm"][class*="text-xs"] {
  border-radius: 20px !important;
  font-size: 12px !important;
  padding: 2px 8px !important;
}

/* ── Notification bell area — subtle like Monday ── */
[class*="bg-custom-primary"][class*="rounded-full"] {
  background: #0073ea !important;
}

/* ── Priority/status color dots — keep them but muted ── */
[class*="rounded-full"][class*="h-2"][class*="w-2"],
[class*="rounded-full"][class*="h-3"][class*="w-3"] {
  opacity: 0.85 !important;
}

/* ── Hide Community badge at bottom of sidebar ── */
[aria-label="Main sidebar"] > div:last-child a[class*="bg-green"],
[aria-label="Main sidebar"] a[href*="plane.so/community"],
button:has(> span:is([class*="community"])) {
  display: none !important;
}