::-webkit-scrollbar {
width:4px;
height: 6px;
}
::-webkit-scrollbar-track {
background: rgba(239, 243, 246, 0.04);
}
::-webkit-scrollbar-thumb {
background: rgba(239, 243, 246, 0.15);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(239, 243, 246, 0.25);
}
/* The one exception to the rule above: a horizontally scrolling TAB STRIP.
*
* The rules above paint a track on every scrollable element. On a vertical page that reads as a
* scrollbar; under the primary navigation it reads as a 6px line across the header, and it appears
* or disappears depending only on how wide the window is — which looks like a defect on the tab
* strip rather than an affordance. The strip stays scrollable: it is still swipeable, and Tab
* scrolls each tab into view, so nothing becomes unreachable by hiding the chrome.
*
* No Tailwind mechanism exists for this — scrollbar chrome is a vendor pseudo-element, not a
* property a utility class can set — so AGENTS.md rule 11's "only if there is no UI toolkit
* mechanism" is met. It lives here rather than in the component because the rule it excepts is
* three lines up, and an exception is only findable next to the thing it excepts. */
.tab-strip-scroll {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* legacy Edge */
}
.tab-strip-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
body{
font-family: "Bricolage Grotesque", system-ui, sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
color: #EFF3F6;
background: #0B1524;
font-size: 14px;
overflow-x: hidden !important;
}
h1,
h2,
h3,
h4,
h5,
h6{
color: #ffffff;
font-family: "Bricolage Grotesque", system-ui, sans-serif;
}
.card{
width: 100%;
min-width: 100%;
position: relative;
display: flex;
flex-direction: column;
background: #15233a;
border: 1px solid rgba(239, 243, 246, 0.05);
border-radius:12px;
color: #EFF3F6;
}
.card-body{
flex: 1 1 auto;
padding:1.5rem 1.5rem;
}
.card .card-title {
text-transform: capitalize;
font-size: 18px;
font-weight: 500;
margin-bottom: 0px;
color: #ffffff;
}
.table {
background-color: transparent;
border-color: rgba(239, 243, 246, 0.08);
width: 100%;
margin-bottom: 1rem;
vertical-align: top;
caption-side: bottom;
border-collapse: collapse;
color: #B6BFCB;
white-space: nowrap;
font-size: 14px;
}
.table thead{
background: transparent;
border-radius: 6px;
border-bottom: 1px solid rgba(239, 243, 246, 0.06);
}
.table thead th {
border-top: 0;
font-weight: 600;
font-size: 15px;
color: #ffffff;
padding:0.85rem 0.85rem;
text-align: left;
}
.table tbody tr{
border-radius: 100%;
border-bottom: 1px solid rgba(239, 243, 246, 0.06);
}
.table tbody td {
padding:0.85rem 0.85rem;
color: #EFF3F6;
}
.table tbody tr td:first-child {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
.table tbody tr td:last-child {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.app-dark-shell { color: #EFF3F6; }
/* as-toast library theming — exposed via CSS custom properties.
Toasts render via inside the (app) layout so they inherit these. */
.app-dark-shell {
--as-toast-color: #EFF3F6;
--as-toast-border: 1px solid rgba(239, 243, 246, 0.15);
--as-toast-border-radius: 0.75em;
--as-toast-shadow:
0 0.7px 2.5px rgba(0, 0, 0, 0.30),
0 2.9px 14.6px rgba(0, 0, 0, 0.36),
0 8px 28px rgba(0, 0, 0, 0.40);
--as-toast-info-color: #EFF3F6;
--as-toast-info-border-color: rgba(0, 212, 170, 0.60);
--as-toast-info-background: #15233a;
--as-toast-warn-color: #fca5a5;
--as-toast-warn-border-color: rgba(248, 113, 113, 0.60);
--as-toast-warn-background: #15233a;
--as-toast-btn-border: 1px solid rgba(239, 243, 246, 0.20);
--as-toast-btn-background: transparent;
--as-toast-btn-border-radius: 999px;
}
/* Surface backgrounds → dark navy variants (covers all Tailwind gray-family scales: gray/slate/zinc/neutral/stone) */
.app-dark-shell .bg-white { background-color: #15233a !important; }
.app-dark-shell .bg-gray-50,
.app-dark-shell .bg-slate-50,
.app-dark-shell .bg-zinc-50,
.app-dark-shell .bg-neutral-50,
.app-dark-shell .bg-stone-50 { background-color: #0F1B2E !important; }
.app-dark-shell .bg-gray-100,
.app-dark-shell .bg-slate-100,
.app-dark-shell .bg-zinc-100,
.app-dark-shell .bg-neutral-100,
.app-dark-shell .bg-stone-100 { background-color: #15233a !important; }
.app-dark-shell .bg-gray-200,
.app-dark-shell .bg-slate-200,
.app-dark-shell .bg-zinc-200,
.app-dark-shell .bg-neutral-200,
.app-dark-shell .bg-stone-200 { background-color: #1f3052 !important; }
.app-dark-shell .bg-gray-900,
.app-dark-shell .bg-slate-900,
.app-dark-shell .bg-zinc-900,
.app-dark-shell .bg-neutral-900,
.app-dark-shell .bg-stone-900 { background-color: #0B1524 !important; }
.app-dark-shell .bg-gray-950,
.app-dark-shell .bg-slate-950,
.app-dark-shell .bg-zinc-950,
.app-dark-shell .bg-neutral-950,
.app-dark-shell .bg-stone-950 { background-color: #0B1524 !important; }
.app-dark-shell .hover\:bg-gray-50:hover,
.app-dark-shell .hover\:bg-slate-50:hover,
.app-dark-shell .hover\:bg-zinc-50:hover,
.app-dark-shell .hover\:bg-neutral-50:hover { background-color: #1f3052 !important; }
.app-dark-shell .hover\:bg-gray-100:hover,
.app-dark-shell .hover\:bg-slate-100:hover,
.app-dark-shell .hover\:bg-zinc-100:hover,
.app-dark-shell .hover\:bg-neutral-100:hover { background-color: #1f3052 !important; }
.app-dark-shell .hover\:bg-gray-200:hover,
.app-dark-shell .hover\:bg-slate-200:hover { background-color: #2a3c63 !important; }
/* Text colors → light variants for readability on dark surfaces (covers gray/slate/zinc/neutral/stone) */
/* `text-black` is not a step on the gray ramp below, so it fell through every rule here and
rendered #000 on the #0B1524 ground — 1.15:1, a hole where a value should be. It is mapped to
the same white as text-gray-950 rather than left out, because the next author to reach for it
will reach for it for the same reason the last one did: it reads as "the strongest ink". */
.app-dark-shell .text-black { color: #ffffff !important; }
.app-dark-shell .text-gray-950,
.app-dark-shell .text-slate-950,
.app-dark-shell .text-zinc-950,
.app-dark-shell .text-neutral-950 { color: #ffffff !important; }
.app-dark-shell .text-gray-900,
.app-dark-shell .text-slate-900,
.app-dark-shell .text-zinc-900,
.app-dark-shell .text-neutral-900,
.app-dark-shell .text-stone-900 { color: #ffffff !important; }
.app-dark-shell .text-gray-800,
.app-dark-shell .text-slate-800,
.app-dark-shell .text-zinc-800,
.app-dark-shell .text-neutral-800 { color: #EFF3F6 !important; }
.app-dark-shell .text-gray-700,
.app-dark-shell .text-slate-700,
.app-dark-shell .text-zinc-700,
.app-dark-shell .text-neutral-700 { color: #D8DEE6 !important; }
.app-dark-shell .text-gray-600,
.app-dark-shell .text-slate-600,
.app-dark-shell .text-zinc-600,
.app-dark-shell .text-neutral-600 { color: #B6BFCB !important; }
.app-dark-shell .text-gray-500,
.app-dark-shell .text-slate-500,
.app-dark-shell .text-zinc-500,
.app-dark-shell .text-neutral-500 { color: #8F9BAA !important; }
.app-dark-shell .text-gray-400,
.app-dark-shell .text-slate-400,
.app-dark-shell .text-zinc-400,
.app-dark-shell .text-neutral-400 { color: #6B7587 !important; }
.app-dark-shell .hover\:text-gray-950:hover,
.app-dark-shell .hover\:text-slate-950:hover { color: #ffffff !important; }
.app-dark-shell .hover\:text-gray-900:hover,
.app-dark-shell .hover\:text-slate-900:hover { color: #ffffff !important; }
.app-dark-shell .hover\:text-gray-700:hover,
.app-dark-shell .hover\:text-slate-700:hover { color: #D8DEE6 !important; }
/* Borders → very subtle light borders on dark (keep all under ~8% opacity to avoid harsh edges) */
.app-dark-shell { border-color: rgba(239, 243, 246, 0.06); }
.app-dark-shell *,
.app-dark-shell *::before,
.app-dark-shell *::after { border-color: rgba(239, 243, 246, 0.06); }
.app-dark-shell .border-gray-50, .app-dark-shell .border-slate-50, .app-dark-shell .border-zinc-50, .app-dark-shell .border-neutral-50 { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .border-gray-100, .app-dark-shell .border-slate-100, .app-dark-shell .border-zinc-100, .app-dark-shell .border-neutral-100 { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .border-gray-200, .app-dark-shell .border-slate-200, .app-dark-shell .border-zinc-200, .app-dark-shell .border-neutral-200 { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .border-gray-300, .app-dark-shell .border-slate-300, .app-dark-shell .border-zinc-300, .app-dark-shell .border-neutral-300 { border-color: rgba(239, 243, 246, 0.08) !important; }
.app-dark-shell .border-gray-400, .app-dark-shell .border-slate-400, .app-dark-shell .border-zinc-400 { border-color: rgba(239, 243, 246, 0.10) !important; }
.app-dark-shell .border-gray-500, .app-dark-shell .border-slate-500 { border-color: rgba(239, 243, 246, 0.12) !important; }
.app-dark-shell .border-gray-600, .app-dark-shell .border-slate-600 { border-color: rgba(239, 243, 246, 0.14) !important; }
.app-dark-shell .border-gray-700, .app-dark-shell .border-slate-700 { border-color: rgba(239, 243, 246, 0.16) !important; }
.app-dark-shell .border-white { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .border-b-gray-50, .app-dark-shell .border-t-gray-50,
.app-dark-shell .border-l-gray-50, .app-dark-shell .border-r-gray-50 { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .border-b-gray-100, .app-dark-shell .border-t-gray-100,
.app-dark-shell .border-l-gray-100, .app-dark-shell .border-r-gray-100 { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .border-b-gray-200, .app-dark-shell .border-t-gray-200,
.app-dark-shell .border-l-gray-200, .app-dark-shell .border-r-gray-200 { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .border-b-gray-300, .app-dark-shell .border-t-gray-300,
.app-dark-shell .border-l-gray-300, .app-dark-shell .border-r-gray-300 { border-color: rgba(239, 243, 246, 0.08) !important; }
.app-dark-shell .divide-gray-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.04) !important; }
.app-dark-shell .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.05) !important; }
.app-dark-shell .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.06) !important; }
.app-dark-shell .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(239, 243, 246, 0.08) !important; }
.app-dark-shell .ring-gray-200 { --tw-ring-color: rgba(239, 243, 246, 0.10) !important; }
.app-dark-shell .ring-black,
.app-dark-shell .focus\:ring-black:focus { --tw-ring-color: #00D4AA !important; }
.app-dark-shell .focus\:border-black:focus { border-color: #00D4AA !important; }
/* Form controls → dark variants while keeping text readable
*
* These match on the type ATTRIBUTE, so an `` written without one gets none of it: the
* browser treats it as a text input, this rule does not, and it keeps the user-agent white
* background inside a dark shell — a white box you cannot read your own typing in. Write
* `type="text"` explicitly; there are ~40 inputs in `src/` that do not, and each is a latent
* instance of that.
*
* Adding `input:not([type])` here is NOT the fix it looks like. At specificity (0,2,1) it outranks
* Tailwind's `bg-white` and `bg-transparent` (0,1,0), so it would also repaint bare inputs that sit
* on LIGHT panels and are correct as they are — the automation editor's folder-rename box is
* `bg-transparent` on a light sidebar and would gain a dark fill. The sweep is per-input, by
* looking at each one. */
.app-dark-shell input[type="text"],
.app-dark-shell input[type="email"],
.app-dark-shell input[type="password"],
.app-dark-shell input[type="number"],
.app-dark-shell input[type="search"],
.app-dark-shell input[type="tel"],
.app-dark-shell input[type="url"],
.app-dark-shell input[type="date"],
.app-dark-shell input[type="datetime-local"],
.app-dark-shell input[type="time"],
.app-dark-shell select,
.app-dark-shell textarea {
background-color: #0F1B2E;
color: #EFF3F6;
border-color: rgba(239, 243, 246, 0.08);
}
.app-dark-shell input::placeholder,
.app-dark-shell textarea::placeholder { color: #6B7587; }
/* The parts of a date or number field the ENGINE draws, which no colour above can reach: the calendar
* indicator, the spinner arrows and the picker popup. They follow `color-scheme`, and with none
* declared the engine draws its light-mode glyphs — a near-black calendar icon sitting on the #0F1B2E
* fill the rule above just painted. The declaration changes nothing else: an explicit
* background-color and color still win over the scheme's own. */
.app-dark-shell input[type="date"],
.app-dark-shell input[type="datetime-local"],
.app-dark-shell input[type="time"],
.app-dark-shell input[type="number"] { color-scheme: dark; }
/* The entries INSIDE a select, which the rule above cannot reach.
*
* `.app-dark-shell select` paints the closed box only. The popup is rendered by the engine, and the
* engines split: some paint each `