/* ============================================================================
   NEOBRUTALISM - EXCALIDASH
   A pixel-accurate reproduction of the ExcaliDash UI.

   Not eyeballed from screenshots. Every value below was extracted from the
   running container's compiled CSS bundle
   (excalidash-frontend:/usr/share/nginx/html/assets/index-CxgnBrus.css),
   and the two fonts are the actual woff2 files copied out of that image.

   Usage:
     <link rel="stylesheet" href="neobrutalism-excalidash.css">
     <body>  ... or  <html data-theme="dark">
   Follows the OS via prefers-color-scheme; data-theme overrides it.

   No framework, no build step, no JS.
   ========================================================================= */

/* ----------------------------------------------------------------- FONTS
   Assistant for UI, Excalifont for the hand-drawn display face.
   Both lifted from the ExcaliDash image, so headings match exactly.
   -------------------------------------------------------------------- */

@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant-Regular-DVxZuzxb.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant-Medium-DrcxCXg3.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant-SemiBold-SCI4bEL9.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("fonts/Assistant-Bold-gm-uSS1B.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Excalifont";
  src: url("fonts/Excalifont-Regular-C9eKQy_N.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- TOKENS
   Light mode. Exact values from the bundle:
     body      background-color: rgb(248 250 252)  =  #f8fafc  (slate-50)
               color:            rgb(15 23 42)     =  #0f172a  (slate-900)
     dot grid  radial-gradient(#cbd5e1 1px, transparent 1px) / 24px 24px
     shadows   Npx Npx 0px 0px rgba(0,0,0,1), N in {2,3,4,6,8}
     borders   border-2 (2px) and border-4 (4px) only
     radius    lg .5rem  xl .75rem  2xl 1rem  3xl 1.5rem
   -------------------------------------------------------------------- */

:root {
  --ed-bg:             #f8fafc;
  --ed-dot:            #cbd5e1;
  --ed-dot-size:       24px;

  --ed-surface:        #ffffff;
  --ed-surface-raised: #f8fafc;
  --ed-surface-sunk:   #f1f5f9;

  --ed-ink:            #0f172a;
  --ed-ink-soft:       #475569;
  --ed-ink-faint:      #94a3b8;

  --ed-line:           #000000;
  --ed-line-soft:      #e2e8f0;
  --ed-bw:             2px;

  /* The exact five-step hard-offset scale ExcaliDash ships. Never blurred. */
  --ed-sh-2:  2px 2px 0px 0px rgba(0,0,0,1);
  --ed-sh-3:  3px 3px 0px 0px rgba(0,0,0,1);
  --ed-sh-4:  4px 4px 0px 0px rgba(0,0,0,1);
  --ed-sh-6:  6px 6px 0px 0px rgba(0,0,0,1);
  --ed-sh-8:  8px 8px 0px 0px rgba(0,0,0,1);

  --ed-r-lg:  .5rem;
  --ed-r-xl:  .75rem;
  --ed-r-2xl: 1rem;
  --ed-r-3xl: 1.5rem;

  /* Tailwind indigo-600 / emerald-600 / red-500, as used in the app */
  --ed-primary:      #4f46e5;
  --ed-primary-hi:   #6366f1;
  --ed-primary-ink:  #ffffff;
  --ed-success:      #059669;
  --ed-success-hi:   #10b981;
  --ed-success-ink:  #ffffff;
  --ed-danger:       #ef4444;
  --ed-danger-hi:    #f87171;
  --ed-danger-ink:   #ffffff;
  --ed-warning:      #f59e0b;
  --ed-warning-ink:  #0f172a;

  --ed-font:         "Assistant", ui-sans-serif, system-ui, sans-serif;
  --ed-font-display: "Excalifont", "Assistant", ui-sans-serif, system-ui, sans-serif;
  --ed-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --ed-press: 2px;
  --ed-gap:   1rem;
}

/* ------------------------------------------------------------- DARK MODE

   The important correction, and the thing that is invisible in a screenshot
   until you zoom: dark mode does NOT drop the shadow, and it is NOT a soft
   blurred halo. It is the SAME hard offset, drawn in WHITE at low alpha.

     dark:shadow-[4px_4px_0px_0px_rgba(255,255,255,0.2)]
     dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.15)]
     dark:shadow-[2px_2px_0px_0px_rgba(255,255,255,0.08)]

   That is why the cards still feel chunky on black. A pure-black shadow on a
   #0a0a0a background would be invisible, so they inverted the shadow colour
   instead of removing it. Surfaces are neutral-900 on a near-black page, and
   borders soften from black to neutral-700.
   -------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ed-bg:             #0a0a0a;
    --ed-dot:            #262626;

    --ed-surface:        #171717;   /* neutral-900 */
    --ed-surface-raised: #262626;   /* neutral-800 */
    --ed-surface-sunk:   #0f0f0f;

    --ed-ink:            #fafafa;
    --ed-ink-soft:       #a3a3a3;
    --ed-ink-faint:      #737373;

    --ed-line:           #404040;   /* neutral-700 */
    --ed-line-soft:      #262626;

    --ed-sh-2: 2px 2px 0px 0px rgba(255,255,255,.08);
    --ed-sh-3: 3px 3px 0px 0px rgba(255,255,255,.15);
    --ed-sh-4: 4px 4px 0px 0px rgba(255,255,255,.2);
    --ed-sh-6: 6px 6px 0px 0px rgba(255,255,255,.1);
    --ed-sh-8: 8px 8px 0px 0px rgba(255,255,255,.1);

    --ed-primary:  #6366f1;
    --ed-success:  #10b981;
    --ed-danger:   #f87171;
    --ed-warning:  #fbbf24;
  }
}

:root[data-theme="dark"] {
  --ed-bg:             #0a0a0a;
  --ed-dot:            #262626;

  --ed-surface:        #171717;
  --ed-surface-raised: #262626;
  --ed-surface-sunk:   #0f0f0f;

  --ed-ink:            #fafafa;
  --ed-ink-soft:       #a3a3a3;
  --ed-ink-faint:      #737373;

  --ed-line:           #404040;
  --ed-line-soft:      #262626;

  --ed-sh-2: 2px 2px 0px 0px rgba(255,255,255,.08);
  --ed-sh-3: 3px 3px 0px 0px rgba(255,255,255,.15);
  --ed-sh-4: 4px 4px 0px 0px rgba(255,255,255,.2);
  --ed-sh-6: 6px 6px 0px 0px rgba(255,255,255,.1);
  --ed-sh-8: 8px 8px 0px 0px rgba(255,255,255,.1);

  --ed-primary:  #6366f1;
  --ed-success:  #10b981;
  --ed-danger:   #f87171;
  --ed-warning:  #fbbf24;
}

/* ----------------------------------------------------------------- BASE */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--ed-bg);
  /* The dot grid is easy to miss and is half of why the page reads as paper. */
  background-image: radial-gradient(var(--ed-dot) 1px, transparent 1px);
  background-size: var(--ed-dot-size) var(--ed-dot-size);
  color: var(--ed-ink);
  font-family: var(--ed-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; }

/* Excalifont is the signature. "All Drawings" is this. */
.ed-display {
  font-family: var(--ed-font-display);
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: .01em;
}

h1 { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 700; }

code, pre, .ed-mono { font-family: var(--ed-font-mono); }

/* ---------------------------------------------------------------- CARDS */

.ed-card {
  background: var(--ed-surface);
  border: var(--ed-bw) solid var(--ed-line);
  border-radius: var(--ed-r-2xl);
  box-shadow: var(--ed-sh-4);
  padding: 1.25rem;
}

.ed-card--flat   { box-shadow: none; }
.ed-card--sm     { box-shadow: var(--ed-sh-2); border-radius: var(--ed-r-xl); }
.ed-card--lg     { box-shadow: var(--ed-sh-6); }
.ed-card--xl     { box-shadow: var(--ed-sh-8); border-radius: var(--ed-r-3xl); }
.ed-card--sunk   { background: var(--ed-surface-sunk); box-shadow: none; }
.ed-card--raised { background: var(--ed-surface-raised); }
.ed-card--pad0   { padding: 0; overflow: hidden; }

.ed-card--hover { transition: transform .1s ease, box-shadow .1s ease; }
.ed-card--hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--ed-sh-6);
}

/* Drawing tile, matching the ExcaliDash grid card exactly. */
.ed-tile { display: flex; flex-direction: column; }
.ed-tile__thumb {
  aspect-ratio: 16 / 10;
  background: var(--ed-surface-sunk);
  border-bottom: var(--ed-bw) solid var(--ed-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ed-ink-faint);
  font-family: var(--ed-font-display);
  overflow: hidden;
}
.ed-tile__body { padding: 1rem 1.1rem 1.1rem; }
.ed-tile__title { font-weight: 700; font-size: 1.05rem; margin: 0 0 .6rem; }
.ed-tile__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; color: var(--ed-ink-faint); font-size: .875rem;
}

/* -------------------------------------------------------------- BUTTONS

   The press: the element travels exactly as far as the shadow offset, and
   the shadow goes to zero. Without it the whole style reads as a flat mock.
   -------------------------------------------------------------------- */

.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.15rem;
  font: inherit;
  font-weight: 700;
  color: var(--ed-ink);
  background: var(--ed-surface);
  border: var(--ed-bw) solid var(--ed-line);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-sh-2);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .07s ease, box-shadow .07s ease, background .12s ease, filter .12s ease;
}

.ed-btn:hover { background: var(--ed-surface-raised); }

.ed-btn:active,
.ed-btn[aria-pressed="true"] {
  transform: translate(var(--ed-press), var(--ed-press));
  box-shadow: 0 0 0 0 transparent;
}

.ed-btn:focus-visible {
  outline: none;
  box-shadow: var(--ed-sh-2), 0 0 0 3px var(--ed-primary);
}

.ed-btn:disabled, .ed-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--ed-sh-2);
}

.ed-btn--primary { background: var(--ed-primary); color: var(--ed-primary-ink); }
.ed-btn--success { background: var(--ed-success); color: var(--ed-success-ink); }
.ed-btn--danger  { background: var(--ed-danger);  color: var(--ed-danger-ink); }
.ed-btn--warning { background: var(--ed-warning); color: var(--ed-warning-ink); }
.ed-btn--primary:hover, .ed-btn--success:hover,
.ed-btn--danger:hover,  .ed-btn--warning:hover { filter: brightness(1.08); }

.ed-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; }
.ed-btn--ghost:hover { border-color: var(--ed-line); background: var(--ed-surface-raised); }

.ed-btn--icon { padding: .7rem; aspect-ratio: 1; }
.ed-btn--lg   { padding: .9rem 1.6rem; font-size: 1.05rem; }
.ed-btn--sm   { padding: .45rem .8rem; font-size: .875rem; border-radius: var(--ed-r-lg); }

/* --------------------------------------------------------------- INPUTS */

.ed-input, .ed-select, .ed-textarea {
  width: 100%;
  padding: .7rem 1rem;
  font: inherit;
  color: var(--ed-ink);
  background: var(--ed-surface);
  border: var(--ed-bw) solid var(--ed-line);
  border-radius: var(--ed-r-xl);
  box-shadow: var(--ed-sh-2);
}
.ed-input::placeholder, .ed-textarea::placeholder { color: var(--ed-ink-faint); }
.ed-input:focus, .ed-select:focus, .ed-textarea:focus {
  outline: none;
  box-shadow: var(--ed-sh-2), 0 0 0 3px var(--ed-primary);
}

/* Search field with a trailing keyboard hint, as in the app toolbar. */
.ed-search { position: relative; flex: 1; min-width: 200px; }
.ed-search .ed-input { padding-left: 2.6rem; padding-right: 3.4rem; }
.ed-search__icon {
  position: absolute; left: .95rem; top: 50%; transform: translateY(-50%);
  color: var(--ed-ink-faint); pointer-events: none;
}
.ed-kbd {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  font-size: .75rem; font-weight: 600;
  color: var(--ed-ink-faint);
  background: var(--ed-surface-raised);
  border: 1px solid var(--ed-line-soft);
  border-radius: .4rem;
  padding: .1rem .4rem;
}

.ed-label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: .875rem; }

/* --------------------------------------------------------------- BADGES */

.ed-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ed-ink-soft);
  background: var(--ed-surface-raised);
  border-radius: var(--ed-r-lg);
}
.ed-badge--outline { border: var(--ed-bw) solid var(--ed-line); background: transparent; }
.ed-badge--primary { background: var(--ed-primary); color: var(--ed-primary-ink); }
.ed-badge--success { background: var(--ed-success); color: var(--ed-success-ink); }
.ed-badge--danger  { background: var(--ed-danger);  color: var(--ed-danger-ink); }
.ed-badge--warning { background: var(--ed-warning); color: var(--ed-warning-ink); }

/* ------------------------------------------------------------------ NAV */

.ed-nav-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .9rem;
  font-weight: 600;
  color: var(--ed-ink-soft);
  border: var(--ed-bw) solid transparent;
  border-radius: var(--ed-r-xl);
  cursor: pointer; text-decoration: none;
}
.ed-nav-item:hover { background: var(--ed-surface-raised); color: var(--ed-ink); }
.ed-nav-item--active {
  background: var(--ed-surface-raised);
  border-color: var(--ed-line);
  color: var(--ed-ink);
  font-weight: 700;
}

.ed-nav-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ed-ink-faint);
  padding: 0 .9rem; margin: 1.25rem 0 .5rem;
}

/* ---------------------------------------------------------------- TABLE

   Dense data is the one place this style breaks. Bordering every cell makes
   the grid vibrate at small sizes, so the hard border lives on the wrapper
   and rows are split by a hairline.
   -------------------------------------------------------------------- */

.ed-table-wrap {
  background: var(--ed-surface);
  border: var(--ed-bw) solid var(--ed-line);
  border-radius: var(--ed-r-2xl);
  box-shadow: var(--ed-sh-4);
  overflow-x: auto;
}
.ed-table { width: 100%; border-collapse: collapse; font-size: .925rem; }
.ed-table th {
  text-align: left; white-space: nowrap;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ed-ink-soft);
  background: var(--ed-surface-raised);
  padding: .75rem 1rem;
  border-bottom: var(--ed-bw) solid var(--ed-line);
}
.ed-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--ed-line-soft); }
.ed-table tr:last-child td { border-bottom: none; }
.ed-table td.ed-num { text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- LAYOUT */

.ed-shell { display: flex; min-height: 100vh; gap: var(--ed-gap); padding: var(--ed-gap); }

.ed-sidebar {
  flex: 0 0 264px;
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--ed-surface);
  border: var(--ed-bw) solid var(--ed-line);
  border-radius: var(--ed-r-2xl);
  box-shadow: var(--ed-sh-4);
  padding: 1rem;
}

.ed-main { flex: 1; min-width: 0; }

.ed-toolbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.ed-grid {
  display: grid; gap: var(--ed-gap);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.ed-stack  { display: flex; flex-direction: column; gap: var(--ed-gap); }
.ed-row    { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ed-spacer { flex: 1; }

@media (max-width: 820px) {
  .ed-shell { flex-direction: column; }
  .ed-sidebar { flex: none; }
  .ed-display { font-size: 2.25rem; }
}

/* -------------------------------------------------------- ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .ed-btn, .ed-card--hover { transition: none; }
  .ed-btn:active { transform: none; }
  .ed-card--hover:hover { transform: none; }
}