// ─────────────────────────────────────────────────────────────────────────
// Global utility layer.
//
// WHY THIS EXISTS. Legacy henza_admin shipped a full Tailwind build
// (tailwind.config.js, ~28KB) whose custom scale the templates depend on —
// `mb-base`, `text-primary`, `w-5`, `grid-cols-4` and friends all resolved
// there. This port never installed Tailwind, but ~185 of those class names
// survived in the ported templates. They were patched over by re-declaring a
// handful of them inside each view's own `<style scoped>` block — 100+ copies
// across 49 files, which (a) drifted in value and (b) could not reach child
// components at all, because a scoped rule never applies inside a child.
//
// This file replaces all of that with ONE global definition, using LEGACY's
// values rather than the drifted ones.
// ─────────────────────────────────────────────────────────────────────────

// ── Design tokens ────────────────────────────────────────────────────
// Legacy themeConfig.js + vue.config.js modifyVars. `--primary-color` is also
// fed to ant itself via App.vue's <a-config-provider :theme> (ant-design-vue 4
// replaced LESS modifyVars with CSS-in-JS design tokens); declaring it here as
// a custom property keeps it reachable from plain CSS too (App.vue reads it).
//
// `--secondary-color` / `--third-color` were never real ant LESS variables
// (confirmed dead in the old build — ant never consumed them), so they exist
// only here for application code to use directly; they are not passed to
// ConfigProvider.
//
// The old ant.less also declared `--primary: #41b883` / `--accent: #35495e` —
// ant-design-pro boilerplate in Vue's own palette, inherited verbatim from
// legacy and used as `@border-color-base`. That file is deleted (ADV4 has no
// LESS build to feed); nothing in the app should reference `--primary`/
// `--accent` any more — use the Henza tokens below instead.
:root {
  --primary-color: #1c2d56;
  --secondary-color: #836447;
  --third-color: #f5cb55;
  --success-color: #28c76f;
  --danger-color: #ea5455;
  --warning-color: #ff9f43;
}

// ── Text colour ──────────────────────────────────────────────────────
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-third { color: var(--third-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }

// ── Spacing ──────────────────────────────────────────────────────────
// legacy tailwind.config.js:628,664 — `base` is 2.2rem, NOT the 1.5rem the
// per-file copies drifted to.
.mb-base { margin-bottom: 2.2rem; }
.mt-base { margin-top: 2.2rem; }
.p-base { padding: 2.2rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mx-1 { margin: 0 0.25rem; }

// RTL-FLIPPED. The ported views deliberately invert these: the panel is RTL,
// so a Tailwind `ml-*` from the legacy template must push to the RIGHT to keep
// the original visual gap. Verified against the per-file copies this layer
// replaces — .ml-1/.ml-3 were `margin-right`, .mr-4 was `margin-left`, in
// every occurrence. Keep the logical inversion; do NOT "correct" it.
.ml-1 { margin-right: 0.25rem; }
.ml-3 { margin-right: 0.75rem; }
.mr-4 { margin-left: 1rem; }

// ── Sizing ───────────────────────────────────────────────────────────
// Tailwind's 0.25rem scale. `h-5` was used 17 times and defined NOWHERE, so
// every `icon-class="w-5 h-5 …"` rendered at inherited size.
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-full { width: 100%; }

// ── Layout ───────────────────────────────────────────────────────────
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.cursor-pointer { cursor: pointer; }

// Responsive auto-fit grids. These are a port-ism (legacy used Tailwind's
// explicit `grid-cols-N` + breakpoint prefixes); kept because every ported
// form already binds them.
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

// ── Card chrome ──────────────────────────────────────────────────────
// Legacy's <vx-card> (vuexy/components/vxCard.scss:1-11) carried a soft shadow
// and 8px radius. <a-card> is a flat 1px-bordered box, which is the single
// most visible difference across the 54 card sites in the port.
body #app .ant-card {
  border-radius: 0.5rem;
  // Softened twice per request: the original 25px/10% shadow read as heavy
  // on every card in the panel (54 sites); this is now barely-there —
  // a faint depth cue rather than a visible shadow.
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03);
}

// ── Sidebar menu selection colour ────────────────────────────────────
body #app .ant-menu-item-selected {
  background-color: #f1f1f1;
}

// ── Full-height list pages ──────────────────────────────────────────
// Main.vue stretches #content-area/.content-area__content to fill the
// viewport below the navbar; the routed page's own root needs to pick that
// up so a short table doesn't leave a gray gap under its card. Most list
// pages render <div id="page-user-list"><a-card>...</a-card></div>, a few
// (e.g. FacilityList.vue) render <a-card> directly — both are covered here.
.content-area__content > * {
  flex: 1;
  min-height: 0;
}
#page-user-list {
  display: flex;
  flex-direction: column;
}
#page-user-list > .ant-card,
.content-area__content > .ant-card {
  flex: 1;
}