/*
 * CBP portal chrome — static stylesheet.
 *
 * These declarations mirror the `@theme` tokens in resources/css/app.css. They
 * exist as plain CSS because this workstation has Node 12, which cannot run
 * Vite — so the compiled bundle in public/build cannot be regenerated and would
 * not contain these utilities.
 *
 * Once assets are rebuilt on Node 18+, Tailwind emits exactly these utilities
 * from the @theme block and this file becomes redundant (the declarations are
 * identical, so keeping it loaded is harmless in the meantime).
 *
 * The dark selector matches the project's class-based dark variant:
 *   @custom-variant dark (&:where(.dark, .dark *))
 */

:root {
    --color-sidebar: #01230B;
    --color-sidebar-active: #02590F;
    --color-sidebar-dark: #011808;
    --color-content-light: #FFFFFF;
    --color-content-dark: #101828;
    --color-card-light: #F3F4F6;
    --color-card-dark: #1E2A3D;
    --color-card-border-light: #E5E7EB;
    --color-card-border-dark: #334155;
}

/* Sidebar chrome */
.bg-sidebar        { background-color: var(--color-sidebar); }
.bg-sidebar-active { background-color: var(--color-sidebar-active); }
.text-sidebar      { color: var(--color-sidebar); }

/* Content areas */
.bg-content-light  { background-color: var(--color-content-light); }

/* Cards — grey, to contrast against the white content area */
.bg-card-light            { background-color: var(--color-card-light); }
.border-card-border-light { border-color: var(--color-card-border-light); }

/*
 * Sidebar sub-menus.
 *
 * Standard Tailwind utilities that the stale bundle predates. They are here
 * rather than left to the rebuild because both carry meaning rather than
 * polish: without the indent the sub-items do not read as nested, which is the
 * entire point of grouping the menu, and without the rotation the disclosure
 * chevron never turns to show a group is open.
 *
 * The indent is deliberate arithmetic, not a guess. A group's own label starts
 * at 2.75rem (px-3 0.75 + icon 1.25 + gap-3 0.75). The children's container is
 * offset ml-6 (1.5rem) and carries the rail; pl-8 then puts child text at
 * 3.5rem — three quarters of a rem clear of the parent, so the nesting reads
 * at a glance instead of looking like a rendering slip.
 */
.pl-8      { padding-left: 2rem; }
.rotate-90 { rotate: 90deg; }

/* Dark mode */
.dark\:bg-sidebar-dark:where(.dark, .dark *)        { background-color: var(--color-sidebar-dark); }
.dark\:bg-content-dark:where(.dark, .dark *)        { background-color: var(--color-content-dark); }
.dark\:bg-card-dark:where(.dark, .dark *)           { background-color: var(--color-card-dark); }
.dark\:border-card-border-dark:where(.dark, .dark *){ border-color: var(--color-card-border-dark); }