/*!
 * JRMS mustard theme — app-wide reskin of the signed-in application.
 *
 * Implements docs/design/mustard-theme (see README.md there). Follows the exact
 * mechanism of assets/css/login-theme.css + patch 004: a committed stylesheet
 * referenced from index.html, NO edits to any compiled Vue chunk.
 *
 * GATING / KILL SWITCH
 * Every rule is gated on `html.jrms-mustard`, toggled by assets/js/mustard-theme.js.
 * - `localStorage.setItem('jrms-theme','classic')` + reload → the entire theme
 *   is inert and the app renders exactly as before this change.
 * - The login screen keeps its own design: rules also exclude .jrms-login-dark,
 *   the class particle-field.js sets while a login-layout route is mounted.
 *
 * SCOPE
 * Phase 1 maps the BLUE family (#002680, #0075ff, blue tints) to the mustard
 * palette, cool grays to the warm ink ladder, and Avenir to Outfit. Semantic
 * colors are deliberately untouched: danger red #ea5455 and success green
 * #28c76f keep their meaning. Icon SVGs are data URIs inside JS chunks and
 * cannot be recolored from CSS — that is Phase 2 (see README).
 *
 * Outfit is ALREADY shipped app-wide: login-theme.css declares @font-face
 * "Outfit" (ungated — @font-face cannot be gated) against
 * /assets/woff2/outfit-variable-latin*.woff2. No new font files are needed
 * and none are added here.
 *
 * Color inventory this file answers to (from the compiled CSS, Aug 2026):
 *   #002680 ×69 · #0075ff ×3 · #7e7e7e ×21 · #2a2a2a/#2f2f2f/#535353/#5e5e5e
 *   #a9a9a9 · #f5f5f5 body · #fff/#eee surfaces · #e5e9f2/#f2f4f9 chips
 *   #f5f8ff/#eef5ff blue hovers · #a5a3ae26/#2f2b3d29 cool shadows
 */

/* ---------- tokens ---------------------------------------------------------- */

html.jrms-mustard {
  /* mustard family — canonical oklch from the design system; hex fallbacks
     are sRGB approximations of the same values */
  --jr-mustard:      oklch(0.74 0.14 85);   /* ≈ #c79f33 */
  --jr-mustard-2:    oklch(0.82 0.10 85);   /* ≈ #d9bc6e */
  --jr-mustard-soft: oklch(0.92 0.06 85);   /* ≈ #f0e3bd */
  --jr-mustard-deep: oklch(0.55 0.14 85);   /* ≈ #8a6a10 */

  /* warm parchment light theme */
  --jr-bg:     #f5f1e8;
  --jr-bg-2:   #ede8da;
  --jr-card:   #fbf8f0;
  --jr-ink:    #1a1814;
  --jr-ink-2:  color-mix(in srgb, #1a1814 72%, #f5f1e8);
  --jr-ink-3:  color-mix(in srgb, #1a1814 52%, #f5f1e8);
  --jr-ink-4:  color-mix(in srgb, #1a1814 34%, #f5f1e8);
  --jr-line:   color-mix(in srgb, #1a1814 12%, transparent);
  --jr-line-2: color-mix(in srgb, #1a1814 6%, transparent);
  --jr-on-mustard: #1a1814;

  --jr-shadow: 0 1px 0 rgba(255,255,255,.55) inset,
               0 1px 2px rgba(26,24,20,.06),
               0 10px 28px -16px rgba(26,24,20,.28);
  --jr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* espresso dark — EXPERIMENTAL, Phase 3. Off unless mustard-theme.js sets
   data-jrms-theme="dark" (localStorage 'jrms-theme-mode'). Vuetify surfaces
   with baked-in whites will need per-component fixes before this ships. */
html.jrms-mustard[data-jrms-theme="dark"] {
  --jr-mustard:      oklch(0.78 0.14 85);   /* ≈ #d4ab38 */
  --jr-mustard-soft: oklch(0.30 0.04 85);
  --jr-mustard-deep: oklch(0.78 0.14 85);
  --jr-bg:     #161513;
  --jr-bg-2:   #211f1b;
  --jr-card:   #1c1a17;
  --jr-ink:    #f3ecd8;
  --jr-ink-2:  color-mix(in srgb, #f3ecd8 74%, #161513);
  --jr-ink-3:  color-mix(in srgb, #f3ecd8 52%, #161513);
  --jr-ink-4:  color-mix(in srgb, #f3ecd8 34%, #161513);
  --jr-line:   color-mix(in srgb, #f3ecd8 10%, transparent);
  --jr-line-2: color-mix(in srgb, #f3ecd8 5%, transparent);
  --jr-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
               0 1px 2px rgba(0,0,0,.4),
               0 12px 32px -16px rgba(0,0,0,.6);
}

/* ---------- Vuetify theme variables ----------------------------------------- */

/* Vuetify 3 resolves color="primary", checkboxes, switches, progress bars etc.
   through these RGB triplets. The build uses the stock light theme (no custom
   colors in createVuetify), so overriding the triplets retints every default-
   themed component in one place. on-primary is INK, not white — mustard fills
   carry dark text (WCAG: white on #c79f33 fails, #1a1814 passes). */
html.jrms-mustard:not(.jrms-login-dark) .v-theme--light {
  --v-theme-background: 245,241,232;
  --v-theme-surface: 251,248,240;
  --v-theme-primary: 199,159,51;
  --v-theme-on-primary: 26,24,20;
  --v-theme-secondary: 138,106,16;
  --v-theme-on-secondary: 255,255,255;
  --v-theme-on-background: 26,24,20;
  --v-theme-on-surface: 26,24,20;
}

/* ---------- base ------------------------------------------------------------ */

html.jrms-mustard:not(.jrms-login-dark) body {
  background-color: var(--jr-bg) !important;
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, var(--jr-mustard-soft), transparent 60%),
                    var(--jr-grain);
  background-attachment: fixed;
  color: var(--jr-ink);
}

/* Outfit everywhere except icon fonts. The compiled CSS sets
   `font-family:Avenir!important` in places, so this must out-compete it;
   the :not() chain keeps Material Design Icons and Font Awesome glyphs intact. */
html.jrms-mustard:not(.jrms-login-dark) body,
html.jrms-mustard:not(.jrms-login-dark) .v-application {
  font-family: "Outfit", "Avenir", sans-serif !important;
}
html.jrms-mustard:not(.jrms-login-dark) .v-application
  :not(i):not(.v-icon):not([class^="mdi-"]):not([class*=" mdi-"]):not([class^="fa"]):not([class*=" fa-"]) {
  font-family: inherit !important;
}

html.jrms-mustard:not(.jrms-login-dark) a { color: var(--jr-mustard-deep); }
html.jrms-mustard:not(.jrms-login-dark) a:hover { color: var(--jr-ink); }

html.jrms-mustard:not(.jrms-login-dark) :focus-visible {
  outline: 2px solid var(--jr-mustard);
  outline-offset: 1px;
}

/* ---------- utility color classes (exact list from index-G-D0NqLL.css) ------ */

html.jrms-mustard:not(.jrms-login-dark) .font-002680,
html.jrms-mustard:not(.jrms-login-dark) .font-0075FF { color: var(--jr-mustard-deep) !important; }
html.jrms-mustard:not(.jrms-login-dark) .font-2A2A2A { color: var(--jr-ink) !important; }
html.jrms-mustard:not(.jrms-login-dark) .font-535353,
html.jrms-mustard:not(.jrms-login-dark) .font-5D596C,
html.jrms-mustard:not(.jrms-login-dark) .font-2F2B3DE5 { color: var(--jr-ink-2) !important; }
html.jrms-mustard:not(.jrms-login-dark) .font-7E7E7E,
html.jrms-mustard:not(.jrms-login-dark) .font-15-400 { color: var(--jr-ink-3) !important; }
html.jrms-mustard:not(.jrms-login-dark) .font-A9A9A9 { color: var(--jr-ink-4) !important; }
/* white text sits on blue fills today; those fills become mustard, which needs
   ink text. Verify per-screen — any .font-ffffff on a surface that STAYS dark
   (e.g. red) should be excepted here rather than this rule removed. */
html.jrms-mustard:not(.jrms-login-dark) .font-ffffff { color: var(--jr-on-mustard) !important; }
html.jrms-mustard:not(.jrms-login-dark) .bg-002680 { background-color: var(--jr-mustard) !important; }
html.jrms-mustard:not(.jrms-login-dark) .bg-E5E9F2 { background-color: var(--jr-bg-2) !important; }

/* ---------- buttons ---------------------------------------------------------- */

/* Filled blue buttons across the app (RecordManagement modals, AdvancedSearch,
   MainLayout). Class list from the compiled CSS. */
html.jrms-mustard:not(.jrms-login-dark) :is(.button-save, .button-print, .button-export,
  .button-add, .button-send, .button-copy, .button-move, .button-edit, .button-search) {
  background-color: var(--jr-mustard) !important;
  border-color: var(--jr-mustard) !important;
  color: var(--jr-on-mustard) !important;
}
/* Outline / cancel buttons: blue text + blue border today. The design's
   secondary button is NEUTRAL — ink text on a hairline border over the card
   surface ("Create new folder" in the reference) — not a mustard outline. */
html.jrms-mustard:not(.jrms-login-dark) :is(.button-cancel, .button-close, .btn-border-blue) {
  color: var(--jr-ink) !important;
  border-color: var(--jr-line) !important;
  background-color: var(--jr-card) !important;
}
/* .btn-logout (#ea5455) is semantic danger — deliberately untouched. */

/* ---------- navigation drawer ------------------------------------------------ */

html.jrms-mustard:not(.jrms-login-dark) .v-navigation-drawer {
  background-color: var(--jr-card) !important;
  border-color: var(--jr-line) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .highlighted,
html.jrms-mustard:not(.jrms-login-dark) .selected-item {
  background-color: var(--jr-mustard) !important;
  color: var(--jr-on-mustard) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .highlighted .v-list-item-title { color: var(--jr-on-mustard) !important; }
html.jrms-mustard:not(.jrms-login-dark) .selected-item svg path { fill: var(--jr-on-mustard) !important; }

/* ---------- pagination, tabs, tooltips --------------------------------------- */

html.jrms-mustard:not(.jrms-login-dark) .v-pagination__item--is-active button {
  background-color: var(--jr-mustard) !important;
  color: var(--jr-on-mustard) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .v-pagination__item button { color: var(--jr-ink-3); }
html.jrms-mustard:not(.jrms-login-dark) .tab-divider,
html.jrms-mustard:not(.jrms-login-dark) .v-tabs__slider { background-color: var(--jr-mustard) !important; color: var(--jr-mustard) !important; }
html.jrms-mustard:not(.jrms-login-dark) .custom-tab .v-tab.active-tab { color: var(--jr-mustard-deep) !important; }
/* tooltip becomes the design's ink chip */
html.jrms-mustard:not(.jrms-login-dark) .v-tooltip .v-overlay__content {
  background-color: #1a1814 !important;
  color: #f3ecd8 !important;
}

/* ---------- record management ------------------------------------------------ */

html.jrms-mustard:not(.jrms-login-dark) .folder-search:focus-within { border-color: var(--jr-mustard-deep) !important; }
html.jrms-mustard:not(.jrms-login-dark) .folder-search-result-icon,
html.jrms-mustard:not(.jrms-login-dark) .folder-code { color: var(--jr-mustard-deep) !important; }
html.jrms-mustard:not(.jrms-login-dark) .folder-search-result:hover { background-color: var(--jr-bg-2) !important; }
html.jrms-mustard:not(.jrms-login-dark) .folder-search-result.selected {
  background-color: color-mix(in srgb, var(--jr-mustard) 22%, transparent) !important;
  color: var(--jr-mustard-deep) !important;
}
/* mdi glyphs tinted blue in the compiled CSS */
html.jrms-mustard:not(.jrms-login-dark) :is(.mdi-eye-outline, .mdi-eye-off-outline,
  .mdi-calendar-today-outline, .mdi-paperclip) { color: var(--jr-mustard-deep) !important; }

/* ---------- dashboard banner -------------------------------------------------- */

/* Replaces the bg-name-*.webp photograph with the design's mustard gradient.
   The webp stays in the build (harmless); only the paint changes. */
html.jrms-mustard:not(.jrms-login-dark) .bg-welcome {
  background-image: linear-gradient(115deg, #c79f33 0%, #b18a24 100%) !important;
  color: var(--jr-on-mustard) !important;
}

/* ---------- surfaces, cards, datepicker --------------------------------------- */

/* (card chrome — background, hairline, radius, shadow — lives in the Option A
   fidelity layer below) */
/* blue-tinted chip/tag surfaces → warm equivalents.
   `.security-tag` is ONE class with TWO palettes in the compiled CSS: the
   Profile/ProfileEdit variant is blue (#f2f4f9 bg, #002680 text) and must warm,
   but the RecordManagement/SearchResult variant is the RED security /
   Incomplete Record tag (#fdeeee bg, #ea5455 text) and must stay red —
   so this is scoped by the chunks' data-v attributes, not by bare class. */
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-v-4d3d276b],
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-v-5b7ca640] {
  background-color: var(--jr-bg-2) !important;
  color: var(--jr-mustard-deep) !important;
}
/* @vuepic/vue-datepicker accent */
html.jrms-mustard:not(.jrms-login-dark) .dp__theme_light {
  --dp-primary-color: #8a6a10 !important;
}

/* ---------- scrollbars --------------------------------------------------------- */

html.jrms-mustard:not(.jrms-login-dark) ::-webkit-scrollbar-track { background: var(--jr-bg) !important; }
html.jrms-mustard:not(.jrms-login-dark) ::-webkit-scrollbar-thumb { background: var(--jr-ink-4) !important; }

/* ============================================================================
   Phase 1 verification sweep — every rule below answers a stale blue or cool
   gray found by grepping the compiled chunk CSS after the base theme above was
   applied (audit: patches/README.md §008). Grep the hex named in each comment
   to find the source rule; overrides only, the compiled files are untouched.
   ========================================================================= */

/* ---------- buttons the base list missed -------------------------------------- */

/* filled #002680 across MFAProfile, RecordTypeConfiguration(+Properties),
   SecurityClassification, TenantManagement(Detail), TenantModal, UserModal,
   RolesPermission (.button-deselect), auditlog-records (.button-attach,
   .button-change), eye-icon, OTP (.btn-resend — inert on the login route via
   the gate). .button-upload is filled ONLY in UploadRecordModal
   (data-v-1277f6ca); MainLayout has an unrelated gray .button-upload. */
html.jrms-mustard:not(.jrms-login-dark) :is(.button-submit, .button-create,
  .button-attach, .button-change, .button-deselect, .btn-resend,
  .button-upload[data-v-1277f6ca]) {
  background-color: var(--jr-mustard) !important;
  border-color: var(--jr-mustard) !important;
  color: var(--jr-on-mustard) !important;
}
/* outline #002680 border/text: RolesPermission .button-select, auditlog-records
   .button-disableadd, eye-icon .button-reset */
html.jrms-mustard:not(.jrms-login-dark) :is(.button-select, .button-disableadd, .button-reset) {
  color: var(--jr-ink) !important;
  border-color: var(--jr-line) !important;
  background-color: var(--jr-card) !important;
}
/* quiet buttons the blanket lists would mis-paint: RecordManagement's
   data-v-6688805e .button-send is the gray pre-input state of the AI send
   button (#7e7e7e text), and MainLayout's .button-upload is a gray chip
   (#eee/#7e7e7e). Both stay quiet, just warmed. */
html.jrms-mustard:not(.jrms-login-dark) .button-send[data-v-6688805e],
html.jrms-mustard:not(.jrms-login-dark) .button-upload[data-v-c9584840] {
  background-color: var(--jr-bg-2) !important;
  border-color: var(--jr-line) !important;
  color: var(--jr-ink-3) !important;
}
/* every button in the compiled CSS carries the cool `0 2px 4px #a5a3ae26`;
   the design's buttons are FLAT — the hairline and fill do the work */
html.jrms-mustard:not(.jrms-login-dark) :is([class^="button-"], [class*=" button-"], .btn-border-blue, .btn-resend) {
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* ---------- navigation drawer: cool shadows, white-inverted icons ------------- */

/* the design's sidebar is a flat cream panel separated by a hairline, not a
   floating shadowed sheet */
html.jrms-mustard:not(.jrms-login-dark) .v-navigation-drawer {
  box-shadow: none !important;
  border-right: 1px solid var(--jr-line) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .highlighted,
html.jrms-mustard:not(.jrms-login-dark) .selected-item {
  box-shadow: none !important;
  border-radius: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .box-shadow {
  box-shadow: 0 2px 4px rgba(26, 24, 20, .12) !important;
}
/* MainLayout inverts the active item's SVG icon to white
   (filter:brightness(0) invert(1)); on a mustard fill the icon must be ink,
   so keep brightness(0) and drop the invert. */
html.jrms-mustard:not(.jrms-login-dark) .icon-wrapper.highlighted .menu-icon {
  filter: brightness(0) !important;
}
/* the compiled rule strokes the selected item's SVG white — stroke, not fill */
html.jrms-mustard:not(.jrms-login-dark) .selected-item,
html.jrms-mustard:not(.jrms-login-dark) .selected-item svg path {
  stroke: var(--jr-on-mustard) !important;
}

/* ---------- pagination ---------------------------------------------------------- */

/* RolesPermission forces #eee!important / #7e7e7e!important on every inactive
   pagination button (its rule is unscoped, so it leaks app-wide once that
   chunk loads). :not() keeps this disjoint from the active-page rule above. */
html.jrms-mustard:not(.jrms-login-dark)
  .v-pagination__item:not(.v-pagination__item--is-active) button {
  background-color: var(--jr-bg-2) !important;
  color: var(--jr-ink-2) !important;
}
/* the Previous/Next pager buttons are ::before content hacks on mdi classes,
   with #eee chips and Avenir forced !important. The :not(.v-treeview …) guard
   is copied from the compiled rule — inside treeviews these classes are real
   chevron icons and must not get chip styling or a text font. */
html.jrms-mustard:not(.jrms-login-dark) .mdi-menu-left:not(.v-treeview .mdi-menu-left):before,
html.jrms-mustard:not(.jrms-login-dark) .mdi-menu-right:not(.v-treeview .mdi-menu-right):before {
  color: var(--jr-ink-2) !important;
  background-color: var(--jr-bg-2) !important;
  font-family: "Outfit", "Avenir", sans-serif !important;
}

/* ---------- text accents still blue -------------------------------------------- */

/* .editColumn (RolesPermission, !important), .link-style (#0075ff,
   RecordManagement). Page headings (.font-20-800) are handled by the
   fidelity layer below — the design sets titles in INK, not mustard. */
html.jrms-mustard:not(.jrms-login-dark) :is(.editColumn, .link-style) {
  color: var(--jr-mustard-deep) !important;
}
/* Dashboard's own tooltip class (sic: custom-tooltipp) — same ink chip as
   .v-tooltip above */
html.jrms-mustard:not(.jrms-login-dark) .custom-tooltipp {
  background-color: #1a1814 !important;
  color: #f3ecd8 !important;
}

/* ---------- ink ladder for scoped chunk grays ----------------------------------- */

/* #2f2f2f primary text in the folder search panels (RecordManagement, JcorpAI) */
html.jrms-mustard:not(.jrms-login-dark) :is(.folder-search-input,
  .folder-search-empty-title, .folder-name) {
  color: var(--jr-ink) !important;
}
/* #7e7e7e / #5e5e5e secondary text and glyphs */
html.jrms-mustard:not(.jrms-login-dark) :is(.folder-search-icon, .folder-search-clear,
  .search-results-label, .folder-search-state, .folder-search-empty, .folder-path,
  .size-tag, .font-sub, .icon-hover, .button-save-disabled) {
  color: var(--jr-ink-3) !important;
}
/* RolesPermission table body (#7e7e7e) */
html.jrms-mustard:not(.jrms-login-dark) .rolesTable tbody tr td { color: var(--jr-ink-3) !important; }
/* Dashboard task list (#7e7e7e!important, Dashboard-scoped — the class names
   are generic Vuetify ones, so scope by the chunk's data-v to match) */
html.jrms-mustard:not(.jrms-login-dark) .task-title .v-list-item-title[data-v-693e4b1b],
html.jrms-mustard:not(.jrms-login-dark) .v-list-item__append[data-v-693e4b1b] {
  color: var(--jr-ink-3) !important;
}
/* inactive profile tabs (#a9a9a9); the active-tab rule above still wins */
html.jrms-mustard:not(.jrms-login-dark) .custom-tab .v-tab { color: var(--jr-ink-4); }

/* ---------- record management: selected-folder edge, datepicker icon ------------ */

html.jrms-mustard:not(.jrms-login-dark) .folder-search-result.selected {
  border-left-color: var(--jr-mustard) !important;
}
/* chunk-scoped .dp__theme_light rules set --dp-icon-color:#002680 */
html.jrms-mustard:not(.jrms-login-dark) .dp__theme_light {
  --dp-icon-color: var(--jr-mustard-deep) !important;
}

/* ---------- white surfaces Vuetify's theme variables cannot reach --------------- */

/* DataTable2's hand-rolled table paints #fff!important on the table, header
   and both row stripes */
html.jrms-mustard:not(.jrms-login-dark) .custom-table,
html.jrms-mustard:not(.jrms-login-dark) .custom-table th,
html.jrms-mustard:not(.jrms-login-dark) .custom-table tr:nth-child(2n),
html.jrms-mustard:not(.jrms-login-dark) .custom-table tr:nth-child(odd) {
  background-color: var(--jr-card) !important;
}
/* chat input fields (DocumentViewer, JcorpAI) */
html.jrms-mustard:not(.jrms-login-dark) .grow-up .v-field__input {
  background-color: var(--jr-card) !important;
}
/* 403/404: cool white gradient + white card behind the coral accent (the
   coral is those pages' own identity and stays) */
html.jrms-mustard:not(.jrms-login-dark) .not-found {
  background: linear-gradient(135deg, var(--jr-bg-2), var(--jr-bg)) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .not-found-content {
  background-color: var(--jr-card) !important;
}
/* Profile's initials avatar tile (#eeedf0 via an undefined var's fallback) */
html.jrms-mustard:not(.jrms-login-dark) .avatar[data-v-4d3d276b] {
  background: var(--jr-bg-2) !important;
}

/* ---------- inline-styled Vuetify colors ---------------------------------------- */

/* Components written with color="#002680" / color="#0075FF" (report Export
   buttons, snackbars, misc v-btns) get INLINE styles — beyond any class
   override. Browsers serialize the style attribute to a canonical
   "rgb(r, g, b)", which these attribute selectors match. Outlined v-btn
   borders use currentColor, so fixing color fixes the border too. */
html.jrms-mustard:not(.jrms-login-dark) [style*="color: rgb(0, 38, 128)"],
html.jrms-mustard:not(.jrms-login-dark) [style*="color: rgb(0, 117, 255)"] {
  color: var(--jr-ink) !important;
  caret-color: var(--jr-ink) !important;
}
/* outlined v-btns among them (report Export etc.) are the design's neutral
   secondary button: ink label, hairline border — not a brand-color outline */
html.jrms-mustard:not(.jrms-login-dark) .v-btn--variant-outlined[style*="color: rgb(0, 38, 128)"],
html.jrms-mustard:not(.jrms-login-dark) .v-btn--variant-outlined[style*="color: rgb(0, 117, 255)"] {
  border-color: var(--jr-line) !important;
  background-color: var(--jr-card) !important;
  border-radius: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) [style*="background-color: rgb(0, 38, 128)"] {
  background-color: var(--jr-mustard) !important;
  color: var(--jr-on-mustard) !important;
}

/* ============================================================================
   Option A fidelity layer — the design system's CHROME, not just its palette.
   Every value below is a computed style read straight out of
   reference/JRMS-Mustard-preview.html (Option A, Parchment) — see
   patches/README.md §008 for the extraction method. The first shipped cut of
   this file mapped colors only; the visible difference from the reference was
   almost entirely this layer: hairline cards at 14px, small-caps micro-labels,
   light-weight numerals, flat buttons, pill controls.
   ========================================================================= */

/* ---------- cards: hairlines replace the drop-shadowed boxes ------------------ */

/* reference card: #fbf8f0 · 1px rgba(26,24,20,.12) · radius 14px · layered
   soft shadow. The app's universal content wrapper is `.card-98` (a plain div
   with bg-white/box-shadow/rounded utilities — NOT a v-card; targeting only
   .v-card was why the dashboard kept its old chrome in the first cut).
   `.card` covers the modals, `.v-card` the genuine Vuetify surfaces. */
html.jrms-mustard:not(.jrms-login-dark) .v-card,
html.jrms-mustard:not(.jrms-login-dark) .card,
html.jrms-mustard:not(.jrms-login-dark) .card-98:not(.bg-welcome) {
  background-color: var(--jr-card) !important;
  color: var(--jr-ink) !important; /* .bg-white forces color:#000 */
  border: 1px solid var(--jr-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset,
              0 1px 2px rgba(40, 30, 10, .06),
              0 10px 28px -16px rgba(40, 30, 10, .18) !important;
}

/* THE PAGE IS THE CANVAS. In the reference, a screen that hosts a data table
   has no outer card at all: title, subtitle and filter pills sit directly on
   the parchment, and the TABLE is the box. Dissolve any content card that
   hosts a real data table — .custom-table (DataTable2, the dashboard's
   embedded lists) is excluded, so dashboard cards stay boxed. */
html.jrms-mustard:not(.jrms-login-dark) .card-98:has(.v-table:not(.custom-table)) {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--jr-ink) !important;
}
/* …and the table becomes the card. The pagination strip is rendered inside
   the v-table's bottom slot, so it ships inside the box, like the design. */
html.jrms-mustard:not(.jrms-login-dark) .v-table:not(.custom-table) {
  --v-table-row-height: 52px;
  background: var(--jr-card) !important;
  border: 1px solid var(--jr-line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset,
              0 1px 2px rgba(40, 30, 10, .06),
              0 10px 28px -16px rgba(40, 30, 10, .18) !important;
}
/* the in-card report subtitle (a v-card-title carrying .font-20-800 — the
   page-title rule below must not bold it) reads as muted supporting text */
html.jrms-mustard:not(.jrms-login-dark) .card-98:has(.v-table:not(.custom-table)) :is(.font-16-800, .v-card-title.font-20-800) {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--jr-ink-2) !important;
}
/* filter fields on the canvas are tinted pills; the v-sheet wrappers around
   them must not paint their own surface on the now-transparent canvas */
html.jrms-mustard:not(.jrms-login-dark) .card-98:has(.v-table:not(.custom-table)) .v-field {
  background-color: var(--jr-bg-2) !important;
  border-radius: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .card-98:has(.v-table:not(.custom-table)) .v-sheet:not(.v-table) {
  background-color: transparent !important;
}
/* `.header-footer` is used twice: the Export/Show row ABOVE the table (which
   sits on the canvas — no band) and the "Showing…" + pager strip INSIDE the
   v-table's bottom slot, which closes the box like the design's footer. */
html.jrms-mustard:not(.jrms-login-dark) .header-footer {
  background: transparent;
  border-top: none;
}
html.jrms-mustard:not(.jrms-login-dark) .v-table .header-footer {
  background: var(--jr-bg-2);
  border-top: 1px solid var(--jr-line);
  color: var(--jr-ink-3);
}
/* report timestamp columns are muted in the design */
html.jrms-mustard:not(.jrms-login-dark) :is(.v-table[data-v-c6b9b7ee], .v-table[data-v-4bae0877],
  .v-table[data-v-6810244d], .v-table[data-v-7cc80c9b], .v-table[data-v-b8b206a7]) tbody td:first-child {
  color: var(--jr-ink-3);
}

/* ---------- app bar: a flat band, not a floating card -------------------------- */

html.jrms-mustard:not(.jrms-login-dark) .v-toolbar.v-app-bar,
html.jrms-mustard:not(.jrms-login-dark) .v-app-bar {
  background-color: var(--jr-card) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--jr-line) !important;
}

/* ---------- banner content (kicker is CSS; greeting/stat are patch 010) -------- */

/* the kicker line is static text — JCORP is the only active tenant — so it
   ships as CSS content rather than another chunk edit */
html.jrms-mustard:not(.jrms-login-dark) .bg-welcome { position: relative; }
html.jrms-mustard:not(.jrms-login-dark) .bg-welcome::before {
  content: "Johor Corporation";
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jr-on-mustard);
  opacity: .8;
  padding: 8px 0 0 12px;
}
/* the records-in-archive stat (vnodes added by patch 010) */
html.jrms-mustard:not(.jrms-login-dark) .jrms-banner-stat {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
  color: var(--jr-on-mustard);
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-banner-stat-num {
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-banner-stat-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 6px;
}
/* an empty count (failed fetch, no permission) hides the block — never "0" */
html.jrms-mustard:not(.jrms-login-dark) .jrms-banner-stat:has(.jrms-banner-stat-num:empty) { display: none; }
@media (max-width: 959px) {
  html.jrms-mustard:not(.jrms-login-dark) .jrms-banner-stat { display: none; }
}
/* the stat vnodes exist regardless of theme; under the classic kill switch
   they must not appear at all */
html:not(.jrms-mustard):not(.jrms-login-dark) .jrms-banner-stat { display: none !important; }

/* ---------- pagination: numbered squares with chevrons, not text chips --------- */

/* the compiled bundle renders Previous/Next as ::before content hacks; the
   design uses plain chevrons in the same small squares as the page numbers */
html.jrms-mustard:not(.jrms-login-dark) .mdi-menu-left:not(.v-treeview .mdi-menu-left):before {
  content: "‹" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  margin-right: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .mdi-menu-right:not(.v-treeview .mdi-menu-right):before {
  content: "›" !important;
  font-size: 16px !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
}

/* ---------- page titles ---------------------------------------------------------- */

/* every screen titles itself with `bg-transparent font-28-800 font-002680
   mt-2 mb-3` — same utility pair as the dashboard stat numerals, told apart
   by these extra classes. Titles are 500; numerals stay 400. */
html.jrms-mustard:not(.jrms-login-dark) .bg-transparent.font-28-800.mt-2 {
  font-weight: 500 !important;
}

/* ---------- dashboard banner chrome ------------------------------------------- */

html.jrms-mustard:not(.jrms-login-dark) .bg-welcome {
  border-radius: 14px !important;
}
/* banner text is ink on mustard, not white (WCAG + the reference) */
html.jrms-mustard:not(.jrms-login-dark) .bg-welcome .text-white {
  color: var(--jr-on-mustard) !important;
}

/* ---------- type ramp: the design has no 800-weight anywhere ------------------ */

/* headings 500, numerals 400 with tight tracking — straight from the
   reference's computed styles (card heading 19px/500/-0.285px, stat numeral
   30px/400/-0.6px, banner heading 400) */
html.jrms-mustard:not(.jrms-login-dark) :is(.font-12-800, .font-14-800, .font-16-800) {
  font-weight: 500 !important;
}
html.jrms-mustard:not(.jrms-login-dark) :is(.font-20-800, .font-22-800) {
  font-weight: 500 !important;
  letter-spacing: -.02em !important;
  color: var(--jr-ink) !important; /* page titles are ink in the design */
}
html.jrms-mustard:not(.jrms-login-dark) :is(.font-28-800, .font-34-800) {
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
}
/* card headings ("My task", "Recent activity"): ink, not brand color */
html.jrms-mustard:not(.jrms-login-dark) .font-16-800.font-002680 {
  color: var(--jr-ink) !important;
}
/* stat numerals: neutral ink (the reference keeps only semantic color here) */
html.jrms-mustard:not(.jrms-login-dark) .font-28-800.font-002680 {
  color: var(--jr-ink) !important;
}
/* "View All" links become the design's small-caps micro-label with arrow */
html.jrms-mustard:not(.jrms-login-dark) .font-14-800.font-0075FF {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--jr-ink-3) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .font-14-800.font-0075FF:hover { color: var(--jr-ink) !important; }
/* stat labels under the numerals */
html.jrms-mustard:not(.jrms-login-dark) .font-16-800.font-7E7E7E {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--jr-ink-3) !important;
}
/* dashboard task list rows: regular weight body text, not 800 */
html.jrms-mustard:not(.jrms-login-dark) .task-title .v-list-item-title[data-v-693e4b1b] {
  font-weight: 400 !important;
  font-size: 13.5px !important;
  color: var(--jr-ink-2) !important;
}

/* ---------- tables: boxed card, tinted header strip, hairline rows ------------ */

html.jrms-mustard:not(.jrms-login-dark) .v-table {
  background: var(--jr-card) !important;
  color: var(--jr-ink);
}
html.jrms-mustard:not(.jrms-login-dark) .v-table th,
html.jrms-mustard:not(.jrms-login-dark) .custom-table th,
html.jrms-mustard:not(.jrms-login-dark) .rolesTable th {
  background: var(--jr-bg-2) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--jr-ink-3) !important;
  border-bottom: 1px solid var(--jr-line) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .v-table tbody td,
html.jrms-mustard:not(.jrms-login-dark) .custom-table tbody td,
html.jrms-mustard:not(.jrms-login-dark) .rolesTable tbody td {
  border-bottom: 1px solid var(--jr-line-2) !important;
}

/* ---------- controls: pills and 8px corners ----------------------------------- */

/* selects/dropdowns read as tinted pills in the design (bg-2 fill, 8px) */
html.jrms-mustard:not(.jrms-login-dark) .v-select .v-field,
html.jrms-mustard:not(.jrms-login-dark) .v-autocomplete .v-field {
  background-color: var(--jr-bg-2) !important;
  border-radius: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .v-field { border-radius: 8px; }
html.jrms-mustard:not(.jrms-login-dark) .v-field__outline__start { border-radius: 8px 0 0 8px !important; }
html.jrms-mustard:not(.jrms-login-dark) .v-field__outline__end { border-radius: 0 8px 8px 0 !important; }
/* the global search field: soft tinted box, no hard outline */
html.jrms-mustard:not(.jrms-login-dark) .searchField .v-field {
  background-color: var(--jr-bg-2) !important;
  border-radius: 10px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .searchField .v-field__outline { opacity: .35; }

/* ---------- pagination + tree selection radii --------------------------------- */

html.jrms-mustard:not(.jrms-login-dark) .v-pagination__item button,
html.jrms-mustard:not(.jrms-login-dark) .v-pagination__prev button,
html.jrms-mustard:not(.jrms-login-dark) .v-pagination__next button {
  border-radius: 6px !important;
  box-shadow: none !important;
}
html.jrms-mustard:not(.jrms-login-dark) .folder-search-result.selected { border-radius: 6px; }
/* classification/security chips sit at 3px in the design */
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-v-4d3d276b],
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-v-5b7ca640] { border-radius: 3px !important; }

/* ---------- vendored Bootstrap form controls ------------------------------------ */

/* vendor-DQ9iahMb.css ships Bootstrap: checked checkboxes and focus rings are
   #0d6efd. Probably dead in a Vuetify app, but the override is inert if so. */
html.jrms-mustard:not(.jrms-login-dark) .form-check-input:checked,
html.jrms-mustard:not(.jrms-login-dark) .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--jr-mustard) !important;
  border-color: var(--jr-mustard) !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  :is(.form-control, .form-select, .form-check-input):focus {
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--jr-mustard) 25%, transparent) !important;
}

/* ---------- signed-in structural round (verified against rendered screens) ------ */
/* Rendered the real Dashboard and Record Management behind a mock backend and
   diffed against the reference. The listing screen is NOT a v-table — it is a
   .split-pane inside the universal .card-98 — so the page-is-the-canvas rule
   below mirrors what .card-98:has(.v-table) already does for report screens. */

/* the split-pane screen: dissolve the outer card, the PANES are the structure */
html.jrms-mustard:not(.jrms-login-dark) .card-98:has(.split-pane) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;   /* beats the inline height:700px */
  min-height: 700px;
  overflow: visible;
}
html.jrms-mustard:not(.jrms-login-dark) .card-98 .split-pane__left .v-sheet {
  background: transparent !important;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__divider {
  width: 1px !important;
  background: var(--jr-line) !important;
}

/* NAVIGATION: quiet small-caps label, pill search, text-first tree */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__left > .v-sheet > .v-card-title.font-20-800 {
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--jr-ink-3) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .folder-search {
  background: var(--jr-bg-2);
  border: 1px solid var(--jr-line-2);
  border-radius: 8px;
}
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .mdi-folder-outline,
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .mdi-folder-open-outline {
  display: none;   /* the reference tree is text-first: code + caret only */
}
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .v-list-item-title {
  font-weight: 500;
  color: var(--jr-ink-2);
}
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .v-list-item--active,
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .v-list-group__header.v-list-item--active {
  background: var(--jr-mustard-soft);
  border-radius: 8px;
}
html.jrms-mustard:not(.jrms-login-dark) .v-treeview .v-list-item--active .v-list-item-title {
  color: var(--jr-ink);
  font-weight: 600;
}

/* right pane: breadcrumbs read first, then the H1 row (reference order) */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right > div:first-child {
  display: flex;
  flex-direction: column;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div:first-child > .v-sheet.d-none.d-sm-block:nth-child(2) {
  order: -1;
  padding: 20px 24px 0;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-breadcrumbs .font-0075FF {
  color: var(--jr-ink-3) !important;
  text-decoration: none !important;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-breadcrumbs .font-7E7E7E {
  color: var(--jr-ink) !important;
  font-weight: 600;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-breadcrumbs .v-icon {
  font-size: 16px;
  color: var(--jr-ink-4);
}

/* the folder H1: bigger, calm, ink — the reference's one big heading */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right p.font-20-800.font-002680 {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--jr-ink) !important;
  letter-spacing: -0.01em;
}

/* filter pills: tinted, outline-free, with SORT/DIR/SHOW prefix labels.
   Counted from the end because leading header children vary by folder level. */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .showDropdown .v-field {
  background: var(--jr-bg-2) !important;
  border-radius: 8px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .showDropdown .v-field__outline {
  opacity: 0;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .showDropdown .v-select__selection-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--jr-ink);
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(3) .v-select__selection::before {
  content: "SORT";
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  color: var(--jr-ink-3); margin-right: 6px;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(2) .v-select__selection::before {
  content: "DIR";
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  color: var(--jr-ink-3); margin-right: 6px;
}

/* the record list becomes the box (same recipe as the report tables) */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right > div > .v-sheet.pl-0.pt-0 .v-list {
  margin: 12px 24px 0;
  background: var(--jr-card) !important;
  border: 1px solid var(--jr-line);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-list-item.border-bottom {
  border-color: var(--jr-line-2) !important;
}
/* code stays the anchor; the second title line (name) reads as support text */
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right .v-list-item-title.font-16-800 {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--jr-ink) !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right .v-list-item-title.font-16-800 + .v-list-item-title.font-16-800 {
  font-weight: 400 !important;
  color: var(--jr-ink-2) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-list-item-subtitle {
  font-size: 12.5px !important;
  color: var(--jr-ink-3) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right > div > .d-flex.px-6 {
  color: var(--jr-ink-3);
  font-size: 13px;
}

/* global search: the reference caps it, it does not span the whole bar */
html.jrms-mustard:not(.jrms-login-dark) .searchField { max-width: 520px; }

/* footer line: motto on the right, as set in the reference */
html.jrms-mustard:not(.jrms-login-dark) .v-main .my-6.font-15-400.font-7E7E7E {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html.jrms-mustard:not(.jrms-login-dark) .v-main .my-6.font-15-400.font-7E7E7E::after {
  content: "MEMBINA & MEMBELA";
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--jr-ink-3);
}

/* nav logo: mustard variant asset; the login page keeps the original file */
html.jrms-mustard:not(.jrms-login-dark) .v-navigation-drawer .logo .v-list-item__content img {
  content: url("../svg/logo-nav-mustard.svg");
}

/* ---------- patch 012/013 support: folder meta, My task, dashboard grid -------- */

/* under mustard the H1 is the code alone; the name moves into the meta line.
   Classic hides the meta and keeps the name inline — original reading intact. */
html.jrms-mustard:not(.jrms-login-dark) .jrms-h1-name { display: none; }
html:not(.jrms-mustard):not(.jrms-login-dark) .jrms-folder-meta { display: none !important; }
html.jrms-mustard:not(.jrms-login-dark) .jrms-folder-meta {
  font-size: 13.5px;
  color: var(--jr-ink-2);
  margin-top: 2px;
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-meta-open {
  color: #2e7d32;
  font-weight: 600;
  letter-spacing: .06em;
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-meta-closed {
  color: #a3352b;
  font-weight: 600;
  letter-spacing: .06em;
}
/* the H1 truncates at 60% width; let the meta line breathe under it */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right p.font-20-800.font-002680 {
  overflow: visible !important;
}

/* My task: vendor-hidden stub the reference shows. Mustard shows it (numbers
   are the vendor's hardcoded placeholders — flagged in the PR), classic keeps
   today's hidden state so the kill switch preserves the current layout. */
html:not(.jrms-mustard):not(.jrms-login-dark) .jrms-mytask { display: none !important; }
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-card-text img { display: none; }
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .font-28-800 {
  font-size: 30px !important;
}

/* SHOW pill prefix + wider pills so "Date Created" fits beside its label */
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(1) .v-select__selection::before {
  content: "SHOW";
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  color: var(--jr-ink-3); margin-right: 6px;
}
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .showDropdown {
  max-width: 185px !important;
}

/* the reference rows are text-first: no big file-type icon in the gutter */
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right .v-list-item.border-bottom .v-list-item__prepend .v-icon {
  display: none;
}

/* no page title above the split-pane screen — breadcrumbs carry the context */
html.jrms-mustard:not(.jrms-login-dark) .v-main:has(.split-pane) > .v-sheet.font-28-800 {
  display: none;
}

/* dashboard activity table: timestamp-gutter rows, no header strip */
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b] table thead { display: none; }
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b] table tbody td:first-child {
  color: var(--jr-ink-3);
  font-size: 13px;
  width: 220px;
}

/* dashboard folder grid: three columns like the reference, quieter numerals */
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].v-col.v-col-3 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--jr-line-2);
}
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].v-col.v-col-3 .font-28-800 {
  font-size: 17px !important;
  font-weight: 500 !important;
}
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].v-col.v-col-3 .font-28-800::after {
  content: " records";
  font-size: 12.5px;
  font-weight: 400;
  color: var(--jr-ink-3);
}

/* ---------- round 2: verified against the rendered signed-in screens ---------- */

/* folder meta reads as one line — OPEN stays beside the count */
html.jrms-mustard:not(.jrms-login-dark) .jrms-folder-meta { white-space: nowrap; }

/* pills: SORT needs room for "Date Created"; SHOW only needs its number */
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(3) .showDropdown {
  max-width: 205px !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(1) .showDropdown {
  max-width: 125px !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right .showDropdown .v-label.v-field-label { display: none; }

/* My task | Recent activity: the reference's split row (40 / 60) */
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].jrms-mytask {
  flex: 0 0 41.666%;
  max-width: 41.666%;
}
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].jrms-mytask + [class*="v-col"] {
  flex: 0 0 58.333%;
  max-width: 58.333%;
}

/* My task: three numerals over small-caps labels, hairline dividers between */
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-card-text > span.font-14-400 {
  display: none;   /* the hardcoded "20 Active Task" line is not in the design */
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list {
  display: flex;
  align-items: stretch;
  padding-top: 10px;
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item.task-title {
  flex: 1 1 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 18px !important;
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item.task-title + .v-list-item.task-title {
  border-left: 1px solid var(--jr-line);
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item__prepend { display: none; }
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item__append,
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item__append * {
  font-size: 30px !important;
  font-weight: 500 !important;
  color: var(--jr-ink);
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item.task-title:first-child .v-list-item__append,
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item.task-title:first-child .v-list-item__append * {
  color: #a3352b;   /* overdue carries the danger tier, as in the reference */
}
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item__content .v-list-item-title,
html.jrms-mustard:not(.jrms-login-dark) .jrms-mytask .v-list-item__content {
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--jr-ink-3) !important;
}

/* dashboard folder grid: flatten the inner panel, flow the cells 3-up */
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b] .v-container.bg-white {
  background: transparent !important;
}
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b] .v-row.v-row--no-gutters.pl-6.pb-4 {
  display: contents;
}
html.jrms-mustard:not(.jrms-login-dark)
  [data-v-693e4b1b] .v-container.bg-white:has(> .v-row.v-row--no-gutters.pl-6.pb-4) {
  display: flex;
  flex-wrap: wrap;
}
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b].v-col.v-col-3 .v-sheet {
  background: transparent !important;
}

/* ---------- round 3: header overflow, pill input flex, chip tiers -------------- */

/* the header sheet clips at 60% width — let the meta line's OPEN show past it */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .v-sheet.me-auto {
  overflow: visible !important;
}

/* the select's hidden input flexes the chosen value down to zero width */
html.jrms-mustard:not(.jrms-login-dark) .split-pane__right .showDropdown input {
  flex: 0 1 0 !important;
  min-width: 0 !important;
}

/* classification tiers on the patched data-cls chips (patch 012).
   Only patched chips carry the attribute, so other screens keep their look. */
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-cls] {
  background: var(--jr-mustard-soft) !important;
  color: var(--jr-mustard-deep) !important;
  border: 1px solid color-mix(in srgb, var(--jr-mustard-deep) 25%, transparent) !important;
  border-radius: 3px !important;
  font-weight: 600;
  letter-spacing: .06em;
}
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-cls^="RAHSIA"] {
  background: #f9e3e0 !important;
  color: #a3352b !important;
  border-color: rgba(163, 53, 43, .25) !important;
}
html.jrms-mustard:not(.jrms-login-dark) .security-tag[data-cls="TERBUKA"] {
  background: var(--jr-bg-2) !important;
  color: var(--jr-ink-2) !important;
  border-color: var(--jr-line) !important;
}

/* card title bars that ship a literal bg-white utility: let the card show */
html.jrms-mustard:not(.jrms-login-dark) .card-98 .v-card-title.bg-white {
  background: transparent !important;
}

/* activity gutter reads on one line now that the stamp is short (patch 013) */
html.jrms-mustard:not(.jrms-login-dark) [data-v-693e4b1b] table tbody td:first-child {
  white-space: nowrap;
  width: 150px;
}

/* pills: explicit widths per slot — the field otherwise sizes to its collapsed
   input and ellipsizes the chosen value no matter the max-width cap */
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(3) .showDropdown {
  width: 225px !important;
  max-width: 225px !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(2) .showDropdown {
  width: 165px !important;
  max-width: 165px !important;
}
html.jrms-mustard:not(.jrms-login-dark)
  .split-pane__right > div > .v-sheet.d-flex.pa-6 > .v-sheet:nth-last-child(1) .showDropdown {
  width: 110px !important;
  max-width: 110px !important;
}