/* Majest admin — visual layer on top of the AdminJS design system.
   Loaded via AdminJS `assets.styles`. Colours & shadows come from
   branding.theme (src/admin.js); this file handles radius, spacing,
   type and interaction polish the theme can't reach.

   Design language mirrors the Majest mobile app:
   - primary = blue (#008CFF) always; gold (#FFC93A) is a *secondary*
     accent only, never mixed into the primary
   - rounded corners everywhere (mobile radii: sm 10 / md 14 / lg 18 / xl 24)
   - white panels, soft shadow, no grey wrappers
   - badges in normal case, not SHOUTING CAPS
   - clear green / clear red for yes-no state */

:root {
  --mj-ink: #0B1730;
  --mj-blue: #008CFF;
  --mj-blue-deep: #006ED0;
  --mj-blue-soft: #EFF5FF;
  --mj-gold: #FFC93A;
  --mj-gold-deep: #FF7D01;
  --mj-green: #00AD2B;
  --mj-green-soft: #E7F8EC;
  --mj-red: #DC2626;
  --mj-red-soft: #FDECEC;
  --mj-border: #E8ECF2;

  /* Badge palette — light, low-saturation fills with a readable same-hue text.
     Semantic status badges pick from these; multi-category values (doc type,
     job title, transaction type, role…) rotate through the cat-* set below. */
  --mj-badge-yellow-bg: #FCFFB2; --mj-badge-yellow-fg: #6E6200;
  --mj-badge-green-bg:  #B6FFB1; --mj-badge-green-fg:  #1C6E1C;
  --mj-badge-red-bg:    #FFC4AB; --mj-badge-red-fg:    #A33A1B;
  --mj-badge-blue-bg:   #B7D4FF; --mj-badge-blue-fg:   #1B4E9B;
  --mj-badge-purple-bg: #E9EAFF; --mj-badge-purple-fg: #4A4EA0;
  --mj-badge-teal-bg:   #BCF3E7; --mj-badge-teal-fg:   #10695B;
  --mj-badge-pink-bg:   #FFD6E7; --mj-badge-pink-fg:   #A5386C;
  --mj-badge-peach-bg:  #FFE3BF; --mj-badge-peach-fg:  #8A4B00;
  /* "Slate" is the neutral badge — solid near-black with white text. It is the
     default when a badge carries no semantic colour (count badges, role tags,
     uncategorised values). */
  --mj-badge-slate-bg:  #0B1730; --mj-badge-slate-fg:  #FFFFFF;

  /* Tier badges keep gradient fills (membership tiers are a special case). */
  --mj-grad-gold:    linear-gradient(135deg, #F8C64D 0%, #E58011 100%);
  --mj-grad-diamond: linear-gradient(135deg, #4EBBFF 0%, #001EFF 100%);
  --mj-grad-silver:  linear-gradient(135deg, #000000 0%, #818181 100%);

  --mj-r-sm: 10px;
  --mj-r-md: 14px;
  --mj-r-lg: 18px;
  --mj-r-xl: 24px;
  --mj-r-pill: 999px;

  --mj-shadow-card: 0 1px 3px rgba(11, 23, 48, 0.05), 0 8px 24px rgba(11, 23, 48, 0.08);
}

body,
.adminjs_Box,
.adminjs_Button,
.adminjs_Input,
.adminjs_Text {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* White page background — no grey wrappers behind the panels. */
body,
section.adminjs_Box[class*="Box_Grey"],
.adminjs_Box[class*="Box_Grey"],
[data-css="dashboard"],
[data-css$="-page"] {
  background: #FFFFFF !important;
}

/* --- Buttons --------------------------------------------------------- */
.adminjs_Button {
  border-radius: var(--mj-r-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.05s ease, filter 0.15s ease !important;
}
.adminjs_Button:active { transform: translateY(1px); }

/* Primary — solid blue. The design system's filled ("contained") style is only
   reachable via a generated hash class, so our own primary buttons carry an
   explicit .mj-btn-primary and we style that. */
.adminjs_Button[data-variant="primary"],
.adminjs_Button[data-variant="contained"],
.adminjs_Button.mj-btn-primary,
.adminjs_Button.mj-filter-apply {
  background: var(--mj-blue) !important;
  border: 1px solid var(--mj-blue) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 140, 255, 0.22), 0 8px 20px rgba(0, 140, 255, 0.18) !important;
}
.adminjs_Button[data-variant="primary"]:hover,
.adminjs_Button[data-variant="contained"]:hover,
.adminjs_Button.mj-btn-primary:hover,
.adminjs_Button.mj-filter-apply:hover { filter: brightness(1.06); }

/* Secondary — quiet outline, like the mobile "cancel" button.
   (default / secondary / outlined / text / light variants) */
.adminjs_Button:not([data-variant="primary"]):not([data-variant="contained"]):not(.mj-btn-primary):not([data-variant="danger"]):not(.adminjs_PaginationLink):not([data-testid]):not(.mj-filter-close):not(.mj-filter-apply):not(.mj-icon-button) {
  background: #FFFFFF !important;
  border: 1px solid #D8DEE6 !important;
  color: var(--mj-ink) !important;
  box-shadow: none !important;
}
.adminjs_Button:not([data-variant="primary"]):not([data-variant="contained"]):not(.mj-btn-primary):not([data-variant="danger"]):not(.adminjs_PaginationLink):not([data-testid]):not(.mj-filter-close):not(.mj-filter-apply):not(.mj-icon-button):hover {
  background: #F6F8FB !important;
  border-color: #D8DEE6 !important;
}

/* --- Inputs / selects / textareas / filters ------------------------- */
.adminjs_Input,
.adminjs_Select__control,
.adminjs_DatePicker input,
textarea.adminjs_TextArea,
[class*="adminjs_"] input[type="text"],
[class*="adminjs_"] input[type="password"],
[class*="adminjs_"] input[type="number"],
[class*="adminjs_"] input[type="email"],
[class*="adminjs_"] input[type="search"],
[data-css$="-filter-drawer"] input,
[data-css$="-filter-drawer"] .adminjs_Select__control {
  border-radius: var(--mj-r-md) !important;
  border-color: #D8DEE6 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.adminjs_Input:focus,
.adminjs_Select__control--is-focused,
.adminjs_DatePicker input:focus,
textarea.adminjs_TextArea:focus,
[class*="adminjs_"] input:focus {
  border-color: var(--mj-blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.16) !important;
  outline: none !important;
}
.adminjs_Select__menu {
  border-radius: var(--mj-r-md) !important;
  overflow: hidden;
  box-shadow: var(--mj-shadow-card) !important;
}
/* Give the dropdown caret a little breathing room from the right edge. */
.adminjs_Select__dropdown-indicator { padding-right: 12px !important; }
.adminjs_Select__indicator-separator { display: none !important; }

/* --- Message banners ------------------------------------------------- */
/* Clean rounded block, no stray tinted border on the corners. */
.adminjs_MessageBox > div {
  border: 0 !important;
  border-radius: var(--mj-r-md) !important;
}

/* --- Page heading (resource list pages) ---------------------------- */
.mj-page-head { margin-bottom: 18px; }
.mj-page-head h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.3px;
  color: var(--mj-ink);
}
.mj-page-count {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  color: #3B4859;
  background: rgba(11, 23, 48, 0.05);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.mj-page-head p {
  margin: 0;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.5;
  color: #6B7684;
}

/* --- Cards / content panels --------------------------------------- */
[data-css$="-list-table-wrapper"],
[data-css$="-show"],
[data-css$="-edit"],
[data-css$="-new"],
[data-css$="-filter"],
.adminjs_Box[class*="Box_Card"],
.adminjs_Box[class*="Box_White"],
.adminjs_DrawerContent {
  background: #FFFFFF !important;
  border-radius: var(--mj-r-lg) !important;
  border: 1px solid var(--mj-border) !important;
  box-shadow: var(--mj-shadow-card) !important;
}
[data-css="dashboard"] { background: transparent !important; }

/* --- Modals / drawers / popups ----------------------------------- */
.adminjs_Modal,
[class*="adminjs_Modal"] {
  border-radius: var(--mj-r-xl) !important;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(11, 23, 48, 0.22) !important;
}
[class*="ModalOverlay"],
[class*="adminjs_Overlay"] { background: rgba(11, 23, 48, 0.48) !important; }
/* No dim backdrop behind the sidebar when it opens as an overlay. */
[data-css="app"] > [class*="adminjs_Overlay"] { background: transparent !important; }
.adminjs_Drawer {
  border-top-left-radius: var(--mj-r-xl) !important;
  border-bottom-left-radius: var(--mj-r-xl) !important;
  overflow: hidden;
}

/* --- Filter drawer: tighten the top so the first field isn't adrift -- */
[data-css$="-filter-drawer-content"] { padding-top: 16px !important; }
[data-css$="-filter-drawer-content"] > .adminjs_Box:first-child { margin-bottom: 10px !important; }
[data-css$="-filter-drawer-content"] h3 { margin: 0 !important; font-size: 16px !important; }
[data-css$="-filter-drawer-content"] .adminjs_FormGroup { margin-bottom: 14px !important; }
[data-css$="-filter-drawer-content"] .adminjs_FormGroup:first-of-type { margin-top: 6px !important; }

/* Close (X): bare icon, no bordered box. */
.mj-filter-close.adminjs_Button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #536075 !important;
}
.mj-filter-close.adminjs_Button:hover { background: var(--mj-blue-soft) !important; color: var(--mj-ink) !important; }

/* Apply changes: solid primary blue. */
.mj-filter-apply.adminjs_Button,
.mj-filter-apply.adminjs_Button:hover {
  background: var(--mj-blue) !important;
  border: 1px solid var(--mj-blue) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 140, 255, 0.22), 0 8px 20px rgba(0, 140, 255, 0.18) !important;
}
.mj-filter-apply.adminjs_Button:hover { filter: brightness(1.06); }

/* --- Sidebar ----------------------------------------------------- */
[data-css="sidebar"] {
  background: #FFFFFF !important;
  border-right: 1px solid var(--mj-border) !important;
  transition: width 0.2s ease !important;
}
[data-css="sidebar"] .adminjs_Navigation {
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #97A1AE;
}
[data-css="sidebar"] a {
  border-radius: var(--mj-r-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
[data-css="sidebar"] nav a:hover { background: var(--mj-blue-soft); }
[data-css="sidebar"] nav a.active,
[data-css="sidebar"] nav a[aria-current="page"],
[data-css="sidebar"] nav a.selected {
  background: var(--mj-blue-soft);
  color: var(--mj-ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--mj-blue);
}

/* --- Top bar --------------------------------------------------- */
[data-css="topbar"] {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--mj-border) !important;
}

/* --- Action header (list): our PageHead + search replace the big title --- */
.mj-list-header { margin-bottom: 4px; }
/* The original ActionHeader title is always replaced by .mj-page-head above it. */
.mj-list-toolbar > .adminjs_ActionHeader h1,
.mj-list-toolbar > .adminjs_ActionHeader h2 { display: none !important; }
.mj-list-toolbar > .adminjs_ActionHeader [class*="ButtonGroup"] { margin-top: 0 !important; }
.mj-list-search {
  position: relative;
  flex-grow: 1;
  max-width: 420px;
}
.mj-list-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 40px;
  border-radius: var(--mj-r-pill) !important;
  /* Match the Filter button beside it: same 1px, same visible grey. */
  border: 1px solid #D8DEE6;
  background: #fff;
  font-size: 14px;
  color: var(--mj-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mj-list-search input:focus {
  outline: none;
  border-color: var(--mj-blue);
  box-shadow: 0 0 0 3px rgba(0, 140, 255, 0.16);
}
.mj-list-search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #98A2B3;
  pointer-events: none;
}

/* --- Tables --------------------------------------------------- */
[data-css$="-list-table-wrapper"] {
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 4px 0;
}
[data-css$="-list-table-wrapper"] .adminjs_Table {
  min-width: 100%;
  width: max-content;
  border-left: none !important;
  border-right: none !important;
  border-radius: var(--mj-r-md);
  overflow: hidden;
}
.adminjs_TableCell {
  white-space: nowrap;
  vertical-align: middle;
  border-color: #EEF2F6 !important;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
.adminjs_TableCell img,
.adminjs_TableCell .adminjs_Avatar { border-radius: var(--mj-r-sm) !important; }
.adminjs_TableRow:hover .adminjs_TableCell { background: #FAFBFD; }
thead .adminjs_TableCell {
  text-transform: none;
  font-size: 11px;
  letter-spacing: 0;
  color: #8A94A2 !important;
  background: #FBFCFE;
}

/* --- Record (show) view: allow long ids/urls to wrap ---------- */
[class*="adminjs_"] section[class*="Property"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}
[class*="adminjs_"] pre,
[class*="adminjs_"] code { border-radius: var(--mj-r-sm) !important; }

/* --- Badges / pills ------------------------------------------ */
/* NOTE: AdminJS' <Badge> only carries the `adminjs_Badge` class when no custom
   className is passed (it comes from React defaultProps). Every badge we colour
   passes an mj-* class, so it renders WITHOUT `adminjs_Badge` — hence the
   selectors below target the mj-* classes directly, with !important to beat the
   design-system's styled-components fill (injected after this file). */
.adminjs_Badge,
.mj-enum-badge,
[class*="mj-cat-"],
.mj-tier-badge,
.mj-yes, .mj-no,
.mj-alert-badge, .mj-positive-badge, .mj-negative-badge, .mj-info-badge, .mj-muted-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  border-radius: var(--mj-r-pill) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border: 0 !important;
}
/* Neutral fill for a badge with no semantic / category class (and no inline
   background of its own) — beats the design-system's grey default. */
.adminjs_Badge:not([class*="mj-"]):not([style*="background"]) {
  background: var(--mj-badge-slate-bg) !important;
  color: var(--mj-badge-slate-fg) !important;
}
/* Clear green / clear red state badges (yes-no, success-danger) */
.mj-yes,
.adminjs_Badge[data-variant="success"] {
  background: var(--mj-badge-green-bg) !important;
  color: var(--mj-badge-green-fg) !important;
}
.mj-no,
.adminjs_Badge[data-variant="danger"] {
  background: var(--mj-badge-red-bg) !important;
  color: var(--mj-badge-red-fg) !important;
}

/* --- Drop zone (file upload) ------------------------------- */
[class*="adminjs_"] [class*="DropZone"] { border-radius: var(--mj-r-lg) !important; }

/* --- Pagination: rounded, roomy, centered ----------------- */
.adminjs_Pagination {
  display: flex !important;
  justify-content: center;
  gap: 4px;
  margin: 22px auto 6px;
  padding: 5px !important;
  border: 1px solid var(--mj-border) !important;
  border-radius: var(--mj-r-pill) !important;
  box-shadow: var(--mj-shadow-card);
  width: max-content;
}
.adminjs_Pagination > :first-child,
.adminjs_Pagination > :last-child { border: none !important; }
.adminjs_PaginationLink {
  min-width: 38px !important;
  height: 38px !important;
  border-radius: var(--mj-r-pill) !important;
  margin: 0 1px;
  font-weight: 600;
  color: #6B7684 !important;
  transition: background 0.12s ease, color 0.12s ease;
}
.adminjs_PaginationLink:hover { background: var(--mj-blue-soft) !important; color: var(--mj-blue-deep) !important; }
.adminjs_PaginationLink.current {
  background: var(--mj-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 140, 255, 0.30);
}

/* ----------------------------------------------------------------------
   2026 shell refresh. These rules intentionally sit last so they normalize
   AdminJS defaults and older per-component styles into one visual language.
   ---------------------------------------------------------------------- */

html, body { background: #F7F9FC !important; }
body, button, input, textarea, select { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body { color: var(--mj-ink); }
[data-css="app-content"],
[data-css="dashboard"],
[data-css$="-page"],
section.adminjs_Box[class*="Box_Grey"],
.adminjs_Box[class*="Box_Grey"] { background: #F7F9FC !important; }

/* Sentence/title case throughout the console. */
.adminjs_Badge,
.adminjs_Navigation,
.adminjs_Navigation span,
.adminjs_TableCell,
.adminjs_Button,
.adminjs_Label,
thead .adminjs_TableCell,
[class*="PropertyHeader"] { text-transform: none !important; letter-spacing: 0 !important; }
thead .adminjs_TableCell { font-size: 12px; font-weight: 650; color: #687386 !important; }

/* Lower, cleaner elevation. */
.mj-card,
.mj-stat-card,
[data-css$="-list-table-wrapper"],
[data-css$="-show"],
[data-css$="-edit"],
[data-css$="-new"],
[data-css$="-filter"],
.adminjs_Box[class*="Box_Card"],
.adminjs_Box[class*="Box_White"] {
  box-shadow: 0 1px 2px rgba(11, 23, 48, 0.035), 0 6px 18px rgba(11, 23, 48, 0.045) !important;
}
.mj-card, .mj-stat-card { border-radius: 20px !important; }
.mj-stat-card { min-width: 0; position: relative; overflow: hidden; }
/* Tighten the tile padding — the default card inset leaves a wide empty gutter
   to the left of the icon. */
.mj-stat-card.mj-card { padding: 14px 16px !important; }
/* Stat tile: icon on the left, vertically centered against the title+number
   stack, with a fixed gap so it never crowds the text. */
.mj-stat-row { display: flex; align-items: center; gap: 14px; }
.mj-stat-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mj-stat-label { font-size: 13px !important; font-weight: 550; }
.mj-stat-value { display: block; margin-top: 0; font-size: 27px !important; font-weight: 750 !important; line-height: 1.15 !important; }
.mj-stat-icon, .mj-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--mj-blue-soft);
}
.mj-stat-icon { width: 44px; height: 44px; }
.mj-stat-icon .adminjs_Icon { display: flex; }
.mj-section-icon { width: 34px; height: 34px; color: var(--mj-blue); }

/* Sidebar: pin/unpin, never collapse to a mysterious icon rail. */
/* z-index sits above the top bar (60) so the sidebar — and its logo/pin row —
   is never tucked under the header when it renders as an absolute overlay. */
[data-css="sidebar"] { width: 280px !important; background: rgba(255, 255, 255, 0.98) !important; box-shadow: none !important; z-index: 70 !important; }
.mj-sidebar-branding { position: sticky; top: 0; z-index: 5; flex-shrink: 0; padding: 16px 14px 8px; background: rgba(255,255,255,.98); }
.mj-brand-row { display: grid !important; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 44px; }
.mj-brand-link { display: flex; justify-content: center; align-items: center; min-width: 0; }
.mj-brand-link img { display: block; width: 112px; max-width: 100%; }
.mj-brand-spacer { width: 38px; }
.mj-pin-button,
.mj-dashboard-nav a,
.mj-icon-button {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.mj-pin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--mj-r-pill);
  background: transparent;
  color: #7A8596;
  cursor: pointer;
  transition: 150ms ease;
}
.mj-pin-button:hover { color: var(--mj-ink); background: var(--mj-blue-soft); }
.mj-pin-button.is-pinned { color: var(--mj-blue-deep); background: transparent; }
.mj-pin-button.is-pinned:hover { background: var(--mj-blue-soft); }
.mj-pin-button svg, .mj-icon-button svg { display: block; margin: auto; flex: 0 0 auto; }
.mj-dashboard-nav { padding-top: 12px; }
.mj-dashboard-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 0;
  padding: 10px 11px;
  border-radius: 12px;
  color: #566274;
  font-size: 13px;
  font-weight: 550;
  text-decoration: none;
}
.mj-dashboard-nav a:hover { background: #F6F9FD; color: var(--mj-ink); }
.mj-dashboard-nav a.is-active { color: var(--mj-blue-deep); background: var(--mj-blue-soft); }
[data-css="sidebar"] .adminjs_Navigation { font-size: 11px; text-transform: none !important; }
[data-css="sidebar"] nav a { margin: 2px 10px; border-radius: 12px; }

@media (max-width: 1323px) {
  body.mj-sidebar-pinned [data-css="sidebar"] { position: relative !important; left: 0 !important; }
  body.mj-sidebar-pinned [data-css="topbar"] > :first-child { display: none !important; }
}
@media (max-width: 768px) {
  body.mj-sidebar-pinned [data-css="sidebar"] { position: absolute !important; left: 0 !important; box-shadow: 12px 0 30px rgba(11, 23, 48, .12) !important; }
  body.mj-sidebar-pinned [data-css="app-content"] { margin-left: 52px; }
  [data-css="sidebar"] { width: min(280px, calc(100vw - 52px)) !important; }
}

/* Top bar and global operations notification panel. */
.mj-topbar-shell { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 0 16px; flex: 0 0 auto; z-index: 60; border-bottom: 1px solid var(--mj-border); background: rgba(255,255,255,.96) !important; }
.mj-notification-anchor { position: relative; }

/* Account menu — the logout dropdown. Rounded card, red logout on hover.
   The dropdown item has no stable class, so target the <a> it renders as. */
[data-css="logged-in"] .adminjs_DropDownMenu {
  padding: 5px !important;
  border: 1px solid var(--mj-border) !important;
  border-radius: var(--mj-r-md) !important;
  box-shadow: 0 14px 38px rgba(11, 23, 48, .14) !important;
}
[data-css="logged-in"] .adminjs_DropDownMenu a {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
[data-css="logged-in"] .adminjs_DropDownMenu a:hover {
  background: var(--mj-red-soft) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: var(--mj-red) !important;
}
[data-css="logged-in"] .adminjs_DropDownMenu a:hover .adminjs_Icon svg { stroke: var(--mj-red) !important; }
.mj-menu-button { display: none !important; }
.mj-icon-button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: var(--mj-r-pill) !important;
  color: #536075 !important;
  transition: background 0.12s ease, color 0.12s ease;
}
/* The icon sits in a .adminjs_Icon wrapper that the design system gives a right
   margin (for icon+label buttons) — zero it so the glyph is truly centered. */
.mj-icon-button .adminjs_Icon { display: flex; margin: 0 !important; }
/* The generic secondary-button rule above paints a bordered white box on any
   .adminjs_Button; match its :not() chain here so the icon buttons stay flat. */
.mj-icon-button.adminjs_Button:not([data-variant="primary"]):not([data-variant="contained"]):not([data-variant="danger"]):not(.adminjs_PaginationLink):not([data-testid]) {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.mj-icon-button.adminjs_Button:not([data-variant="primary"]):not([data-variant="contained"]):not([data-variant="danger"]):not(.adminjs_PaginationLink):not([data-testid]):hover {
  border: 0 !important;
  background: var(--mj-blue-soft) !important;
  color: var(--mj-ink) !important;
}
.mj-icon-button:hover {
  background: var(--mj-blue-soft) !important;
  color: var(--mj-ink) !important;
}
.mj-notification-count {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--mj-red);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 14px;
}
.mj-notification-panel {
  position: absolute;
  top: 48px;
  right: 0;
  left: auto;
  width: min(430px, calc(100vw - 16px));
  overflow: hidden;
  border: 1px solid var(--mj-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 45px rgba(11, 23, 48, .13) !important;
  background: #fff !important;
}
.mj-notification-list { max-height: min(560px, calc(100vh - 90px)); overflow: auto; padding: 4px; }
.mj-notification-item { display: flex; gap: 12px; align-items: center; min-height: 58px; padding: 8px 9px; border-radius: 13px; text-decoration: none; }
.mj-notification-item:hover { background: #F7F9FC; }
.mj-notification-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #CBD3DE; }
.mj-notification-item.has-items .mj-notification-dot { background: var(--mj-red); box-shadow: 0 0 0 4px var(--mj-red-soft); }
.mj-notification-copy { min-width: 0; flex: 1; }
.mj-notification-copy .adminjs_Text:first-child { display: block; color: var(--mj-ink); font-size: 13px; font-weight: 600; }
.mj-notification-copy .adminjs_Text:last-child { display: block; margin-top: 2px; font-size: 11px; }
/* Hamburger only when the sidebar is an unpinned overlay on a narrow viewport;
   pinning it removes the toggle entirely. */
@media (max-width: 1323px) {
  body:not(.mj-sidebar-pinned) .mj-menu-button { display: inline-flex !important; }
}
@media (max-width: 640px) {
  [data-css="logged-in"] { display: none !important; }
}

/* Toasts belong at the top right, away from navigation. */
[data-css="notice"] { position: fixed !important; top: 12px !important; right: 12px !important; left: auto !important; z-index: 3000 !important; }
[data-css="notice-wrapper"] { align-items: flex-end; }
[data-css="notice-wrapper"] .adminjs_MessageBox { min-width: min(420px, calc(100vw - 24px)) !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(11, 23, 48, .11) !important; }

/* Dashboard composition. */
.mj-dashboard-page { display: flex; flex-direction: column; gap: 20px; padding: clamp(18px, 2.4vw, 32px) !important; }
.mj-dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.mj-dashboard-heading h2 { margin: 2px 0 3px; color: var(--mj-ink); font-size: clamp(26px, 3vw, 34px); letter-spacing: -.7px; }
.mj-page-kicker { color: var(--mj-blue-deep) !important; font-size: 12px !important; font-weight: 700; }
.mj-dashboard-tabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--mj-border); border-radius: 14px; background: #fff; }
.mj-dashboard-tabs button { border: 0; border-radius: 10px; padding: 8px 13px; background: transparent; color: #687386; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mj-dashboard-tabs button.is-active { background: var(--mj-ink); color: #fff; }
@media (max-width: 860px) {
  .mj-dashboard-heading { align-items: flex-start; flex-direction: column; }
  .mj-dashboard-body, .mj-split-grid { grid-template-columns: 1fr !important; }
}

/* Profile photo and mobile portfolio. */
.mj-profile-avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; overflow: hidden; border: 1px solid #E3E8EF; border-radius: 13px; background: var(--mj-blue-soft); color: var(--mj-blue-deep); font-size: 12px; font-weight: 750; }
.mj-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mj-profile-media { padding: 8px 0 18px; background: transparent; text-align: center; }
.mj-profile-avatar-large { width: 112px; height: 112px; margin: 4px auto; border-radius: 28px; font-size: 24px; box-shadow: 0 4px 16px rgba(11,23,48,.08); }
.mj-portfolio-carousel { position: relative; width: min(560px, 100%); margin: 20px auto 0; }
.mj-portfolio-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 18px; }
.mj-portfolio-track::-webkit-scrollbar { display: none; }
.mj-portfolio-slide { position: relative; min-width: 100%; overflow: hidden; scroll-snap-align: start; border-radius: 18px; background: #EEF2F6; }
.mj-portfolio-slide a { display: block; }
.mj-portfolio-slide img, .mj-portfolio-slide video { display: block; width: 100%; height: clamp(240px, 36vw, 390px); object-fit: cover; }
.mj-portfolio-slide > span { position: absolute; left: 12px; bottom: 12px; }
.mj-carousel-arrow { position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; transform: translateY(-50%); border: 0; border-radius: 12px; background: rgba(11,23,48,.82); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(11,23,48,.18); }
.mj-carousel-arrow svg { margin: auto; }
.mj-carousel-arrow.is-left { left: 12px; }
.mj-carousel-arrow.is-right { right: 12px; }
.mj-carousel-dots { position: absolute; left: 50%; bottom: 14px; z-index: 2; display: flex; gap: 5px; transform: translateX(-50%); }
.mj-carousel-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.55); }
.mj-carousel-dots span.is-active { width: 18px; background: #fff; }

/* ---------------------------------------------------------------------
   Badge colour system — light tones, consistent across every page.
   · status values are colour-coded by meaning (green = done, red = failed,
     yellow = waiting, blue = informational, purple = anything else)
   · multi-category values (doc type, job title, transaction type, role…)
     get a stable light colour picked per value via .mj-cat-N
   · tier badges keep their gradient fills
   --------------------------------------------------------------------- */
.mj-enum-badge,
.mj-alert-badge,
.mj-positive-badge,
.mj-negative-badge,
.mj-info-badge,
.mj-muted-badge,
[class*="mj-cat-"] {
  border: 0 !important;
  font-weight: 650 !important;
}

.mj-enum-badge.is-neutral { background: var(--mj-badge-slate-bg) !important; color: var(--mj-badge-slate-fg) !important; }
.mj-enum-badge.is-warning { background: var(--mj-badge-yellow-bg) !important; color: var(--mj-badge-yellow-fg) !important; }
.mj-enum-badge.is-positive,
.mj-positive-badge { background: var(--mj-badge-green-bg) !important; color: var(--mj-badge-green-fg) !important; }
.mj-enum-badge.is-negative,
.mj-negative-badge { background: var(--mj-badge-red-bg) !important; color: var(--mj-badge-red-fg) !important; }
.mj-enum-badge.is-info,
.mj-info-badge { background: var(--mj-badge-blue-bg) !important; color: var(--mj-badge-blue-fg) !important; }
.mj-alert-badge { background: var(--mj-badge-red-bg) !important; color: var(--mj-badge-red-fg) !important; font-weight: 750 !important; }
.mj-muted-badge { background: var(--mj-badge-slate-bg) !important; color: var(--mj-badge-slate-fg) !important; }

/* Multi-category values — stable light colour by hashed index (see
   values/DefaultPropertyValue.jsx). */
.mj-cat-0 { background: var(--mj-badge-purple-bg) !important; color: var(--mj-badge-purple-fg) !important; }
.mj-cat-1 { background: var(--mj-badge-green-bg)  !important; color: var(--mj-badge-green-fg)  !important; }
.mj-cat-2 { background: var(--mj-badge-blue-bg)   !important; color: var(--mj-badge-blue-fg)   !important; }
.mj-cat-3 { background: var(--mj-badge-yellow-bg) !important; color: var(--mj-badge-yellow-fg) !important; }
.mj-cat-4 { background: var(--mj-badge-pink-bg)   !important; color: var(--mj-badge-pink-fg)   !important; }
.mj-cat-5 { background: var(--mj-badge-teal-bg)   !important; color: var(--mj-badge-teal-fg)   !important; }
.mj-cat-6 { background: var(--mj-badge-peach-bg)  !important; color: var(--mj-badge-peach-fg)  !important; }
.mj-cat-7 { background: var(--mj-badge-slate-bg)  !important; color: var(--mj-badge-slate-fg)  !important; }

/* Tier badges — gradient fill, white text. */
.mj-tier-badge { border: 0 !important; color: #fff !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); }
.mj-tier-badge.is-silver  { background: var(--mj-grad-silver) !important; }
.mj-tier-badge.is-gold    { background: var(--mj-grad-gold) !important; }
.mj-tier-badge.is-diamond { background: var(--mj-grad-diamond) !important; }

/* Forms, drawers, dialogs and list search. */
.adminjs_Input,
.adminjs_Select__control,
.adminjs_DatePicker input,
.adminjs_TextArea,
textarea,
[class*="adminjs_"] input,
[class*="adminjs_"] select {
  border-radius: 12px !important;
}
.adminjs_Drawer, .adminjs_DrawerContent, .adminjs_Modal, [class*="adminjs_Modal"] { border-radius: 22px !important; }
.adminjs_DrawerContent { box-shadow: -10px 0 32px rgba(11, 23, 48, .1) !important; }
.mj-list-toolbar { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
/* Search fills all the room up to the button group — no dead gap in between. */
.mj-list-header { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; }
.mj-list-search { max-width: none; }
.mj-list-search input { border-radius: 13px !important; background: #fff; }
.mj-list-toolbar > .adminjs_ActionHeader { flex: 0 0 auto; min-width: max-content; }
.mj-list-toolbar > .adminjs_ActionHeader > .adminjs_Box:first-child { display: none !important; }
.mj-list-toolbar > .adminjs_ActionHeader > .adminjs_Box:nth-child(2) { display: flex !important; justify-content: flex-end; align-items: center; }
.mj-list-toolbar > .adminjs_ActionHeader > .adminjs_Box:nth-child(2) > .adminjs_Box:first-child { display: none !important; }
.mj-list-toolbar > .adminjs_ActionHeader > .adminjs_Box:nth-child(2) > .adminjs_Box:last-child { margin: 0 !important; }
@media (max-width: 768px) {
  .mj-list-toolbar { align-items: stretch; flex-direction: column; }
  .mj-list-header { width: 100%; flex-basis: auto; }
  .mj-list-toolbar > .adminjs_ActionHeader { width: 100%; min-width: 0; }
}