/**
 * dl-utilities.css
 *
 * Fills gaps in the prebuilt mstapp-scoped.css. The scoped stylesheet only
 * compiled the Tailwind utilities (and matching CSS vars) its source
 * happened to use, which leaves most palette intensities resolving to
 * nothing in the browser.
 *
 * Two-layer fix:
 *   1. :root defines every --color-{name}-{step} the compiled file omits,
 *      so var() references actually resolve.
 *   2. Utility classes (bg/text/border) reference those vars.
 *
 * Important: tailadmin.css declares all these vars inside @theme {...},
 * which is a Tailwind v4 compiler directive, NOT real CSS. The browser
 * ignores @theme entirely. So even though the source file "has" all 12
 * intensities, the browser only sees the subset that the build pipeline
 * compiled into mstapp-scoped.css. Anything outside that subset has to
 * be (re)declared here.
 *
 * Loads AFTER mstapp-scoped.css so :root + utilities both win on cascade.
 *
 * To add a new palette later:
 *   1. Add --color-{name}-{step} declarations to the :root block below
 *   2. Add bg-/text-/border- utility rules using those vars
 *
 * Audited 2026-05-10 against mstapp-scoped.css. Re-audit if tailadmin
 * source is regenerated and mstapp-scoped.css gets rebuilt.
 */

/* ============================================================
   ROOT VARIABLE DEFINITIONS
   The compiled mstapp-scoped.css only emits vars for utilities it
   used. These :root declarations supply every palette intensity
   the utility rules below reference. Hex values copied 1:1 from
   tailadmin.css @theme block (which the browser doesn't read).
   ============================================================ */

:root {
    /* brand */
    --color-brand-25:  #f2f7ff;
    --color-brand-400: #7592ff;
    --color-brand-900: #162e7a;

    /* gray */
    --color-gray-25:   #fcfcfd;
    --color-gray-600:  #475467;
    --color-gray-950:  #0c111d;

    /* success */
    --color-success-25:  #f6fef9;
    --color-success-100: #d1fadf;
    --color-success-200: #a6f4c5;
    --color-success-300: #6ce9a6;
    --color-success-400: #32d583;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-success-900: #054f31;
    --color-success-950: #053321;

    /* warning */
    --color-warning-25:  #fffcf5;
    --color-warning-100: #fef0c7;
    --color-warning-200: #fedf89;
    --color-warning-300: #fec84b;
    --color-warning-400: #fdb022;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;
    --color-warning-900: #7a2e0e;
    --color-warning-950: #4e1d09;

    /* error */
    --color-error-25:  #fffbfa;
    --color-error-100: #fee4e2;
    --color-error-200: #fecdca;
    --color-error-300: #fda29b;
    --color-error-600: #d92d20;
    --color-error-700: #b42318;
    --color-error-800: #912018;
    --color-error-900: #7a271a;
    --color-error-950: #55160c;

    /* orange */
    --color-orange-25:  #fffaf5;
    --color-orange-50:  #fff6ed;
    --color-orange-100: #ffead5;
    --color-orange-200: #fddcab;
    --color-orange-300: #feb273;
    --color-orange-600: #ec4a0a;
    --color-orange-700: #c4320a;
    --color-orange-800: #9c2a10;
    --color-orange-900: #7e2410;
    --color-orange-950: #511c10;
}

/* ============================================================
   BACKGROUND COLOR UTILITIES
   Fills missing bg-{palette}-{step} classes.
   ============================================================ */

/* brand: missing 25, 400, 900 */
.bg-brand-25  { background-color: var(--color-brand-25); }
.bg-brand-400 { background-color: var(--color-brand-400); }
.bg-brand-900 { background-color: var(--color-brand-900); }

/* gray: missing 25, 600, 950 */
.bg-gray-25  { background-color: var(--color-gray-25); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-950 { background-color: var(--color-gray-950); }

/* success: missing 25, 100, 200, 300, 400, 600, 700, 800, 900, 950 */
.bg-success-25  { background-color: var(--color-success-25); }
.bg-success-100 { background-color: var(--color-success-100); }
.bg-success-200 { background-color: var(--color-success-200); }
.bg-success-300 { background-color: var(--color-success-300); }
.bg-success-400 { background-color: var(--color-success-400); }
.bg-success-600 { background-color: var(--color-success-600); }
.bg-success-700 { background-color: var(--color-success-700); }
.bg-success-800 { background-color: var(--color-success-800); }
.bg-success-900 { background-color: var(--color-success-900); }
.bg-success-950 { background-color: var(--color-success-950); }

/* warning: missing 25, 100, 200, 300, 400, 600, 700, 800, 900, 950 */
.bg-warning-25  { background-color: var(--color-warning-25); }
.bg-warning-100 { background-color: var(--color-warning-100); }
.bg-warning-200 { background-color: var(--color-warning-200); }
.bg-warning-300 { background-color: var(--color-warning-300); }
.bg-warning-400 { background-color: var(--color-warning-400); }
.bg-warning-600 { background-color: var(--color-warning-600); }
.bg-warning-700 { background-color: var(--color-warning-700); }
.bg-warning-800 { background-color: var(--color-warning-800); }
.bg-warning-900 { background-color: var(--color-warning-900); }
.bg-warning-950 { background-color: var(--color-warning-950); }

/* error: missing 25, 100, 200, 300, 600, 700, 800, 900, 950 */
.bg-error-25  { background-color: var(--color-error-25); }
.bg-error-100 { background-color: var(--color-error-100); }
.bg-error-200 { background-color: var(--color-error-200); }
.bg-error-300 { background-color: var(--color-error-300); }
.bg-error-600 { background-color: var(--color-error-600); }
.bg-error-700 { background-color: var(--color-error-700); }
.bg-error-800 { background-color: var(--color-error-800); }
.bg-error-900 { background-color: var(--color-error-900); }
.bg-error-950 { background-color: var(--color-error-950); }

/* orange: missing 25, 50, 100, 200, 300, 500, 600, 700, 800, 900, 950 */
.bg-orange-25  { background-color: var(--color-orange-25); }
.bg-orange-50  { background-color: var(--color-orange-50); }
.bg-orange-100 { background-color: var(--color-orange-100); }
.bg-orange-200 { background-color: var(--color-orange-200); }
.bg-orange-300 { background-color: var(--color-orange-300); }
.bg-orange-500 { background-color: var(--color-orange-500); }
.bg-orange-600 { background-color: var(--color-orange-600); }
.bg-orange-700 { background-color: var(--color-orange-700); }
.bg-orange-800 { background-color: var(--color-orange-800); }
.bg-orange-900 { background-color: var(--color-orange-900); }
.bg-orange-950 { background-color: var(--color-orange-950); }

/* ============================================================
   TEXT COLOR UTILITIES
   Fills missing text-{palette}-{step} classes.
   ============================================================ */

/* gray: missing 25, 50, 100 */
.text-gray-25  { color: var(--color-gray-25); }
.text-gray-50  { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }

/* success: missing 25, 50, 100, 200, 300, 400, 800, 900, 950 */
.text-success-25  { color: var(--color-success-25); }
.text-success-50  { color: var(--color-success-50); }
.text-success-100 { color: var(--color-success-100); }
.text-success-200 { color: var(--color-success-200); }
.text-success-300 { color: var(--color-success-300); }
.text-success-400 { color: var(--color-success-400); }
.text-success-800 { color: var(--color-success-800); }
.text-success-900 { color: var(--color-success-900); }
.text-success-950 { color: var(--color-success-950); }

/* warning: missing 25, 50, 100, 200, 300, 400, 800, 900, 950 */
.text-warning-25  { color: var(--color-warning-25); }
.text-warning-50  { color: var(--color-warning-50); }
.text-warning-100 { color: var(--color-warning-100); }
.text-warning-200 { color: var(--color-warning-200); }
.text-warning-300 { color: var(--color-warning-300); }
.text-warning-400 { color: var(--color-warning-400); }
.text-warning-800 { color: var(--color-warning-800); }
.text-warning-900 { color: var(--color-warning-900); }
.text-warning-950 { color: var(--color-warning-950); }

/* error: missing 25, 50, 100, 200, 300, 400, 800, 900, 950 */
.text-error-25  { color: var(--color-error-25); }
.text-error-50  { color: var(--color-error-50); }
.text-error-100 { color: var(--color-error-100); }
.text-error-200 { color: var(--color-error-200); }
.text-error-300 { color: var(--color-error-300); }
.text-error-400 { color: var(--color-error-400); }
.text-error-800 { color: var(--color-error-800); }
.text-error-900 { color: var(--color-error-900); }
.text-error-950 { color: var(--color-error-950); }

/* orange: missing 25, 50, 100, 200, 300, 500 (sic — only 400 compiled), 600, 700, 800, 900, 950 */
.text-orange-25  { color: var(--color-orange-25); }
.text-orange-50  { color: var(--color-orange-50); }
.text-orange-100 { color: var(--color-orange-100); }
.text-orange-200 { color: var(--color-orange-200); }
.text-orange-300 { color: var(--color-orange-300); }
.text-orange-500 { color: var(--color-orange-500); }
.text-orange-600 { color: var(--color-orange-600); }
.text-orange-700 { color: var(--color-orange-700); }
.text-orange-800 { color: var(--color-orange-800); }
.text-orange-900 { color: var(--color-orange-900); }
.text-orange-950 { color: var(--color-orange-950); }

/* ============================================================
   BORDER COLOR UTILITIES
   Common ones that are likely missing too. Add as we hit them.
   ============================================================ */

.border-brand-500   { border-color: var(--color-brand-500); }
.border-success-500 { border-color: var(--color-success-500); }
.border-warning-500 { border-color: var(--color-warning-500); }
.border-error-500   { border-color: var(--color-error-500); }

/* ============================================================
   ARBITRARY-VALUE UTILITIES
   The Tailwind arbitrary-value syntax (`min-w-[20px]`, `text-[11px]`)
   does NOT work with the prebuilt scoped stylesheet. Instead of using
   inline styles everywhere, the small set of values we actually reach
   for repeatedly are promoted here as real classes.
   ============================================================ */

/* Pixel widths used by sale-form, calendar, count badges */
.min-w-px-20   { min-width: 20px; }
.min-w-px-60   { min-width: 60px; }
.min-w-px-100  { min-width: 100px; }
.min-w-px-500  { min-width: 500px; }

/* Small font sizes for badges, timestamps, captions */
.text-px-10 { font-size: 10px; line-height: 1.2; }
.text-px-11 { font-size: 11px; line-height: 1.3; }

/* grid-cols missing from tailadmin-full.css compiled subset */
.grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-7  { grid-template-columns: repeat(7,  minmax(0, 1fr)); }
.grid-cols-8  { grid-template-columns: repeat(8,  minmax(0, 1fr)); }
.grid-cols-9  { grid-template-columns: repeat(9,  minmax(0, 1fr)); }
.grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }

/* Arbitrary border-width missing from tailadmin-full.css compiled subset */
.border-\[0\.5px\] { border-width: 0.5px; }

/* Stat-card icon: nudge down 10px on desktop only (sm+ breakpoint) so the
   icon square sits lower in the roomier desktop card. Mobile keeps it flush
   with the label row. dldash_ui_stat_card() adds the .dldash-stat-icon hook. */
@media (min-width: 640px) {
  .dldash-stat-icon { margin: 0 0 -10px 0; }
}