/* 1. DMWK design tokens */
:root,
html.dark,
html.dmwk-white-ui {
  color-scheme: light !important;
  --radius: 0.75rem;
  --background: #f8f9fb;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --primary: #111827;
  --primary-foreground: #ffffff;
  --secondary: #f3f4f6;
  --secondary-foreground: #111827;
  --muted: #f3f4f6;
  --muted-foreground: #64748b;
  --accent: #f3f4f6;
  --accent-foreground: #111827;
  --destructive: #b91c1c;
  --destructive-foreground: #ffffff;
  --border: #e5e7eb;
  --input: #e5e7eb;
  --ring: #94a3b8;
  --chart-1: #64748b;
  --chart-2: #94a3b8;
  --chart-3: #cbd5e1;
  --chart-4: #475569;
  --chart-5: #111827;
  --sidebar: #ffffff;
  --sidebar-foreground: #111827;
  --sidebar-primary: #111827;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #f3f4f6;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #e5e7eb;
  --sidebar-ring: #94a3b8;
}

/* 2. Base app background */
html,
html.dark,
html.dmwk-white-ui {
  background: #f8f9fb !important;
  letter-spacing: 0 !important;
}

body {
  background: #f8f9fb !important;
  color: #111827 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif !important;
  text-rendering: geometricPrecision;
}

#root,
#root > div,
.min-h-screen,
.h-screen,
.bg-background,
.dark .bg-background {
  background: #f8f9fb !important;
}

* {
  border-color: #e5e7eb;
}

::selection {
  background: #e5e7eb;
  color: #111827;
}

/* 17. Scrollbars */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

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

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Typography */
h1,
h2,
h3,
h4,
.text-foreground,
.dark .text-foreground {
  color: #111827 !important;
  letter-spacing: 0 !important;
}

h1,
main h1,
header h1 {
  font-size: clamp(1.25rem, 0.45vw + 1.08rem, 1.5rem) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

h2,
main h2 {
  font-size: clamp(1.12rem, 0.35vw + 1rem, 1.32rem) !important;
  line-height: 1.28 !important;
}

h2,
h3,
.font-semibold,
.font-bold {
  font-weight: 500 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.text-muted-foreground,
.dark .text-muted-foreground {
  color: #64748b !important;
}

.text-primary,
.dark .text-primary {
  color: #111827 !important;
}

.bg-card,
.dark .bg-card,
.bg-popover,
.dark .bg-popover,
.bg-sidebar,
.dark .bg-sidebar {
  background: #ffffff !important;
}

.bg-muted,
.dark .bg-muted,
.bg-secondary,
.dark .bg-secondary,
.bg-accent,
.dark .bg-accent {
  background: #f3f4f6 !important;
}

.bg-primary,
.dark .bg-primary {
  background: #111827 !important;
  color: #ffffff !important;
}

.border,
.border-border,
.dark .border-border,
.divide-border > :not(:last-child) {
  border-color: #e5e7eb !important;
}

.ring-ring,
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: #9ca3af !important;
}

svg.lucide-paperclip,
svg.lucide-sparkles {
  display: none !important;
}

/* 3. Company rail */
body:not(:has(input[type="password"])) div.w-\[72px\],
body:not(:has(input[type="password"])) #root > div > div:first-child {
  width: 60px !important;
  min-width: 60px !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] .h-12 {
  height: 50px !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] .w-11.h-11 {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  color: #111827 !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] a:hover .w-11.h-11 {
  background: #f8f9fb !important;
  border-color: #d1d5db !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] img {
  opacity: 0 !important;
  filter: grayscale(1) saturate(0) !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] span[class*="drop-shadow"] {
  color: #111827 !important;
  text-shadow: none !important;
  filter: none !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

body:not(:has(input[type="password"])) div.w-\[72px\] div.absolute.left-\[-14px\] {
  left: -8px !important;
  width: 2px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #9ca3af !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) button[aria-label="Add company"] {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  border-style: solid !important;
  background: #ffffff !important;
  color: #64748b !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) button[aria-label="Add company"]:hover {
  background: #f8f9fb !important;
  color: #111827 !important;
}

/* 4. Main sidebar */
body:not(:has(input[type="password"])) div.overflow-hidden.transition-\[width\].duration-100.w-60,
body:not(:has(input[type="password"])) aside.w-60 {
  width: 264px !important;
}

body:not(:has(input[type="password"])) aside.w-60,
aside,
[data-sidebar],
[class*="sidebar"] {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) aside.w-60 > div:first-child {
  height: 56px !important;
  padding-inline: 14px !important;
  border-bottom: 1px solid #eef0f3 !important;
}

body:not(:has(input[type="password"])) aside.w-60 button[aria-label*="menu"] {
  height: 36px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) aside.w-60 button[aria-label*="menu"]:hover {
  background: #f8f9fb !important;
  border-color: #e5e7eb !important;
}

body:not(:has(input[type="password"])) aside.w-60 .truncate.text-sm.font-bold {
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

body:not(:has(input[type="password"])) aside.w-60 a,
body:not(:has(input[type="password"])) aside.w-60 button,
nav a,
nav button,
[role="navigation"] a,
[role="navigation"] button {
  min-height: 36px !important;
  border-radius: 10px !important;
  color: #475569 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}

body:not(:has(input[type="password"])) aside.w-60 a:hover,
body:not(:has(input[type="password"])) aside.w-60 button:hover,
nav a:hover,
nav button:hover,
[role="navigation"] a:hover,
[role="navigation"] button:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) aside.w-60 a.bg-accent,
body:not(:has(input[type="password"])) aside.w-60 button.bg-accent,
body:not(:has(input[type="password"])) aside.w-60 a.active,
body:not(:has(input[type="password"])) aside.w-60 a[aria-current="page"],
nav a[aria-current],
nav button[aria-current],
nav .bg-accent,
[role="navigation"] .bg-accent,
a[aria-current="page"],
a[href].bg-accent {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}

nav svg,
[role="navigation"] svg,
a[href] svg,
button svg {
  color: currentColor !important;
  opacity: 0.62 !important;
  width: 0.95rem !important;
  height: 0.95rem !important;
}

body:not(:has(input[type="password"])) aside.w-60 [class*="uppercase"],
body:not(:has(input[type="password"])) aside.w-60 [class*="tracking"],
nav [class*="text-xs"],
aside [class*="text-xs"],
[data-sidebar] [class*="text-xs"] {
  color: #9ca3af !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body:not(:has(input[type="password"])) aside.w-60 > div:last-child {
  background: #f8f9fb !important;
  border-top: 1px solid #e5e7eb !important;
}

/* 7. Projects and agents lists */
body:not(:has(input[type="password"])) aside.w-60 [href*="/agents/"],
body:not(:has(input[type="password"])) aside.w-60 [href*="/projects/"] {
  font-size: 0.86rem !important;
}

body:not(:has(input[type="password"])) aside.w-60 a[href*="/projects/"] > span:first-child,
body:not(:has(input[type="password"])) aside.w-60 [class*="rounded-full"][class*="bg-"],
body:not(:has(input[type="password"])) aside.w-60 .w-3.h-3.rounded-full,
body:not(:has(input[type="password"])) aside.w-60 .h-3.w-3.rounded-full {
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 999px !important;
  background: #d1d5db !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 0 0 1px #e5e7eb !important;
}

body:not(:has(input[type="password"])) aside.w-60 a[href*="/projects/"].active > span:first-child,
body:not(:has(input[type="password"])) aside.w-60 a[href*="/projects/"].bg-accent > span:first-child,
body:not(:has(input[type="password"])) aside.w-60 a[href*="/projects/"]:hover > span:first-child {
  background: #9ca3af !important;
}

/* 5. Topbar/header */
header,
[class*="sticky"][class*="top-0"],
body:not(:has(input[type="password"])) #root > div > div:first-child:not(.min-h-0) {
  min-height: 56px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

header h1,
body:not(:has(input[type="password"])) #root > div > div:first-child:not(.min-h-0) h1,
body:not(:has(input[type="password"])) #root > div > div:first-child:not(.min-h-0) [class*="text-2xl"] {
  font-size: 1.45rem !important;
  font-weight: 560 !important;
}

/* 4. Content area */
main {
  background: #f8f9fb !important;
}

body:not(:has(input[type="password"])) main {
  padding: 28px 32px 40px !important;
}

main > div,
main [class*="container"],
main [class*="mx-auto"] {
  max-width: 1440px;
}

body:not(:has(input[type="password"])) main .space-y-5,
body:not(:has(input[type="password"])) main .space-y-6,
body:not(:has(input[type="password"])) main .space-y-8 {
  row-gap: 1.35rem !important;
}

body:not(:has(input[type="password"])) main h1::before {
  content: none !important;
}

/* 8. Cards and panels */
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 14px !important;
}

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg {
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 10px 24px rgba(17, 24, 39, 0.035) !important;
}

.rounded-lg.border,
.rounded-xl.border,
.rounded-md.border,
.border.bg-card,
main [class*="rounded"][class*="border"],
main [class*="bg-card"] {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.035), 0 10px 24px rgba(17, 24, 39, 0.035) !important;
}

main .grid > .rounded-lg::before,
main .grid > .rounded-xl::before,
main .grid > [class*="border"]::before {
  content: none !important;
}

main .grid > .rounded-lg:hover,
main .grid > .rounded-xl:hover,
main .grid > [class*="border"]:hover {
  border-color: #d1d5db !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 12px 28px rgba(17, 24, 39, 0.045) !important;
}

/* 9. Dashboard metrics */
body:not(:has(input[type="password"])) main a.no-underline.text-inherit.h-full,
body:not(:has(input[type="password"])) main a[href]:has(p) {
  display: block !important;
  min-height: 8.75rem !important;
  padding: 1.35rem !important;
  border-radius: 16px !important;
  border: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.035), 0 10px 24px rgba(17, 24, 39, 0.035) !important;
}

body:not(:has(input[type="password"])) main a.no-underline.text-inherit.h-full:hover,
body:not(:has(input[type="password"])) main a[href]:has(p):hover {
  border-color: #d1d5db !important;
  transform: none !important;
}

body:not(:has(input[type="password"])) main a.no-underline.text-inherit.h-full svg,
body:not(:has(input[type="password"])) main a[href]:has(p) svg {
  color: #64748b !important;
  opacity: 0.62 !important;
}

body:not(:has(input[type="password"])) main a.no-underline.text-inherit.h-full [class*="text-3xl"],
body:not(:has(input[type="password"])) main a.no-underline.text-inherit.h-full [class*="text-2xl"],
body:not(:has(input[type="password"])) main a[href]:has(p) [class*="text-3xl"],
body:not(:has(input[type="password"])) main a[href]:has(p) [class*="text-2xl"] {
  color: #111827 !important;
  font-weight: 500 !important;
}

/* 10. Tables/lists/activity feed */
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #ffffff !important;
}

thead {
  background: #f8f9fb !important;
  color: #64748b !important;
}

th {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
}

td,
th {
  border-color: #eef0f3 !important;
}

tbody tr:hover {
  background: #f8f9fb !important;
}

[role="listitem"],
main li,
main [class*="divide-y"] > * {
  border-color: #eef0f3 !important;
}

body:not(:has(input[type="password"])) main [class*="divide-y"] {
  overflow: hidden;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
}

/* 11. Forms/search/buttons */
button,
a[role="button"],
[type="button"],
[type="submit"] {
  border-radius: 10px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease !important;
}

button:hover,
a[role="button"]:hover,
[type="button"]:hover,
[type="submit"]:hover {
  box-shadow: none !important;
}

button:active,
a[role="button"]:active {
  transform: none !important;
}

input,
textarea,
select {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

input:focus,
textarea:focus,
select:focus,
[cmdk-input]:focus {
  border-color: #cbd5e1 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18) !important;
}

button.bg-primary,
button.text-primary-foreground,
main button.bg-primary,
main button.text-primary-foreground,
body:not(:has(input[type="password"])) main button.bg-primary.text-primary-foreground,
body:not(:has(input[type="password"])) main button.bg-primary,
body:not(:has(input[type="password"])) main button.text-primary-foreground,
main a[role="button"].bg-primary,
main a[role="button"].text-primary-foreground {
  background: #111827 !important;
  border: 1px solid #111827 !important;
  color: #ffffff !important;
}

button.bg-primary:hover,
button.text-primary-foreground:hover,
main button.bg-primary:hover,
main button.text-primary-foreground:hover,
body:not(:has(input[type="password"])) main button.bg-primary.text-primary-foreground:hover,
body:not(:has(input[type="password"])) main button.bg-primary:hover,
body:not(:has(input[type="password"])) main button.text-primary-foreground:hover,
main a[role="button"].bg-primary:hover,
main a[role="button"].text-primary-foreground:hover {
  background: #1f2937 !important;
  border-color: #1f2937 !important;
  color: #ffffff !important;
}

button.bg-primary:disabled,
button.text-primary-foreground:disabled,
main button.bg-primary:disabled,
main button.text-primary-foreground:disabled {
  background: #eef0f3 !important;
  border-color: #e1e5ea !important;
  color: #8b94a3 !important;
}

/* 12. Tabs/segmented controls */
body:not(:has(input[type="password"])) [role="tablist"] {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 11px !important;
  padding: 2px !important;
  box-shadow: none !important;
}

body:not(:has(input[type="password"])) [role="tab"] {
  border-radius: 9px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

body:not(:has(input[type="password"])) [role="tab"][data-state="active"],
body:not(:has(input[type="password"])) [role="tab"][aria-selected="true"] {
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

/* 13. Dialogs/dropdowns */
[role="dialog"],
[data-radix-popper-content-wrapper] [role="menu"],
[data-radix-popper-content-wrapper] [role="listbox"],
[cmdk-root],
.bg-popover {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 16px 38px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.05) !important;
  border-radius: 14px !important;
}

[role="menuitem"],
[cmdk-item],
[role="option"] {
  border-radius: 9px !important;
}

[role="menuitem"]:hover,
[cmdk-item]:hover,
[role="option"]:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}

/* 14. Empty states */
body:not(:has(input[type="password"])) main button[aria-label="Change project color"] {
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #d1d5db !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 0 0 1px #e5e7eb !important;
}

body:not(:has(input[type="password"])) main button[aria-label="Change project color"]:hover {
  background: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18) !important;
}

body:not(:has(input[type="password"])) main .border:has(> p:only-child),
body:not(:has(input[type="password"])) main .rounded-lg:has(> p:only-child) {
  border-style: solid !important;
  background: #ffffff !important;
}

/* 15. Login page */
body:has(input[type="password"]) {
  background: #f8f9fb !important;
}

body:has(input[type="password"]) #root,
body:has(input[type="password"]) #root > div {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: #f8f9fb !important;
}

body:has(input[type="password"]) #root > div > div {
  width: min(100%, 23.5rem) !important;
}

body:has(input[type="password"]) .text-sm.font-medium {
  color: #111827 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-align: center;
}

body:has(input[type="password"]) h1 {
  margin-top: 1.25rem !important;
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  text-align: center;
}

body:has(input[type="password"]) p {
  color: #64748b !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  text-align: center;
}

body:has(input[type="password"]) form,
body:has(input[type="password"]) .bg-card,
body:has(input[type="password"]) [class*="rounded"][class*="border"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body:has(input[type="password"]) label,
body:has(input[type="password"]) [class*="text-sm"] {
  font-weight: 400 !important;
}

body:has(input[type="password"]) input {
  min-height: 2.5rem !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  border: 1px solid #d6dbe3 !important;
  padding: 0.55rem 0.75rem !important;
}

body:has(input[type="password"]) button[type="submit"],
body:has(input[type="password"]) button {
  min-height: 2.5rem !important;
  border-radius: 9px !important;
  background: #111827 !important;
  color: #ffffff !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

body:has(input[type="password"]) button:disabled {
  background: #e5e7eb !important;
  color: #9ca3af !important;
}

body:has(input[type="password"]) input[type="email"],
body:has(input[type="password"]) input[type="password"] {
  background-color: #ffffff !important;
  border: 1px solid #d6dbe3 !important;
  color: #111827 !important;
  box-shadow: none !important;
}

body:has(input[type="password"]) input[type="email"]:focus,
body:has(input[type="password"]) input[type="password"]:focus {
  border-color: #aeb7c5 !important;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16) !important;
}

body:has(input[type="password"]) button[type="submit"].bg-primary,
body:has(input[type="password"]) button[type="submit"] {
  background-color: #111827 !important;
  border: 1px solid #111827 !important;
  color: #ffffff !important;
}

body:has(input[type="password"]) button[type="submit"].bg-primary:disabled,
body:has(input[type="password"]) button[type="submit"]:disabled,
body:has(input[type="password"]) button[type="submit"].opacity-50 {
  background-color: #eef0f3 !important;
  border-color: #e1e5ea !important;
  color: #8b94a3 !important;
}

body:has(input[type="password"]) a,
body:has(input[type="password"]) [class*="mt-5"] {
  display: none !important;
}

/* 16. Responsive behavior */
@media (max-width: 900px) {
  body:not(:has(input[type="password"])) div.overflow-hidden.transition-\[width\].duration-100.w-60,
  body:not(:has(input[type="password"])) aside.w-60 {
    width: 232px !important;
  }

  body:not(:has(input[type="password"])) main {
    padding: 20px !important;
  }
}