/* ============================================================================
   AFINTRIX HRMS — Frappe Desk skin (minimal overrides only)
   Custom pages (login, legal, portals) use Tailwind → public/css/afintrix_pages.css
   ========================================================================== */

/* ---- 0 · FONT (self-hosted Inter variable, 100–900) ---------------------- */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/afintrix_payroll_gateway/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/afintrix_payroll_gateway/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Elegant editorial serif — card titles (per Info-Card reference) */
@font-face {
  font-family: "Playfair Display";
  src: url("/assets/afintrix_payroll_gateway/fonts/PlayfairDisplay.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- 1 · BRAND TOKENS ----------------------------------------------------- */
:root {
  /* EXACT client brand palette — sampled from Afintrix TM SYMBOL-ID-01.png
     and favicon-01.png (weighted averages of dominant clusters).
     Primary royal blue #3981F7 (range #1018A0–#1830D0) · gold #C99A44. */
  --afx-primary: #3981f7;
  --afx-primary-deep: #1f6fe0;
  --afx-primary-bright: #6ea8ff;
  --afx-primary-soft: rgba(57, 129, 247, 0.10);
  --afx-navy: #0a1240;            /* dark surface, same hue family as primary */
  --afx-navy-2: #14206b;
  --afx-gold: #c99a44;
  --afx-gold-dark: #a67c2e;
  --afx-gold-soft: rgba(201, 154, 68, 0.15);
  --afx-green: #10b981;
  --afx-purple: #6366f1;
  --afx-bg: #f6f7f9;
  --afx-card: #ffffff;
  --afx-card-line: #f3f4f6;       /* card border per Figma spec */
  --afx-ink: #101828;
  --afx-body: #4b5563;
  --afx-label: #9ca3af;
  --afx-line: #e5e7eb;
  /* Untitled UI geometry tokens (per brief) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --afx-radius-card: var(--radius-lg);
  --afx-radius-btn: var(--radius-md);
  --afx-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  /* Info-Card feature panel — brand-blue gradient (theme color, per client) */
  --afx-card-panel: linear-gradient(155deg, #6ea8ff 0%, var(--afx-primary) 50%, var(--afx-primary-deep) 100%);
  --afx-mark-white: url("/assets/afintrix_payroll_gateway/images/afintrix-mark-white.png");
  --afx-shadow-card: var(--shadow-sm);
  --afx-shadow-card-hover: var(--shadow-md);
  --afx-ease: 0.2s ease;
  /* Aliases (handoff token names) */
  --afintrix-primary: var(--afx-primary);
  --afintrix-secondary: var(--afx-navy);
  --afintrix-accent: var(--afx-gold);
  --afintrix-bg: var(--afx-bg);
  --afintrix-surface: var(--afx-card);
  --afintrix-text-primary: var(--afx-ink);
  --chart-1: var(--afx-primary);
  --chart-2: var(--afx-gold);
  --chart-3: var(--afx-green);
  --chart-4: var(--afx-purple);
}

/* ---- 2 · FRAPPE TOKEN OVERRIDES — v15 desk only --------------------------
   v16's shell has different token semantics; blanket overrides there caused
   dark-on-dark text. v16 gets targeted component styling in section 9. */
html:not(.afx-v16) {
  --primary: var(--afx-primary);
  --primary-color: var(--afx-primary);
  --btn-primary: var(--afx-primary);
  --text-on-primary: #ffffff;
  --bg-color: var(--afx-bg);
  --fg-color: var(--afx-card);
  --card-bg: var(--afx-card);
  --navbar-bg: #ffffff;
  --border-color: var(--afx-line);
  --control-bg: #ffffff;
  --control-bg-on-gray: #ffffff;
  --text-color: var(--afx-body);
  --heading-color: var(--afx-ink);
  --text-muted: var(--afx-label);
  --text-light: var(--afx-label);
  --sidebar-select-color: var(--afx-gold-soft);
  --scrollbar-thumb-color: #cbd2dc;
  --shadow-sm: var(--afx-shadow-card);
  --shadow-base: var(--afx-shadow-card);
  --checkbox-color: var(--afx-navy);
  --checkbox-focus-shadow: 0 0 0 3px var(--afx-gold-soft);
  --font-stack: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---- 3 · GLOBAL: canvas, typography, micro-labels ------------------------- */
body {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--afx-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* #F0F2F7 · dot grid · soft brand radials (login overrides below) */
  background: #f6f7f9;
}
h1, h2, h3, h4, h5,
.page-title, .title-text, .workspace-title, .head-title,
.ce-block h1, .ce-block h2, .ce-block h3, .widget-group .widget-title,
.section-head, .form-section .section-head, .modal-title {
  font-family: "Montserrat", "Inter", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  color: var(--afx-ink);
}
/* uppercase micro-labels (v15 number-card label = .number-label; v16 = .widget-title) */
.number-widget-box .number-label,
.number-widget-box .widget-title,
.list-row-head .list-row-col span,
.control-label,
.sidebar-label, .form-sidebar .sidebar-label {
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 0.06em;
  color: var(--afx-label) !important;
  font-weight: 500;
}
/* type scale (per brief): H1 28/700 · H2 22/700 · H3 18/600 · body 14 · data 13/500 */
h1, .page-title .title-text { font-size: 28px !important; font-weight: 700 !important; }
h2 { font-size: 22px !important; font-weight: 700 !important; }
h3 { font-size: 18px !important; }
body, p, .form-control { font-size: 14px; }
.list-row-col, .dt-cell__content, td { font-size: 13px; font-weight: 500; }
::selection { background: var(--afx-primary-soft); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd2dc; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
a { color: var(--afx-primary); transition: color var(--afx-ease); }
a:hover { color: var(--afx-primary-deep); }

/* ---- 4 · BUTTONS & INPUTS -------------------------------------------------- */
.btn {
  border-radius: var(--afx-radius-btn); font-weight: 600;
  transition: background var(--afx-ease), border-color var(--afx-ease),
              color var(--afx-ease), box-shadow var(--afx-ease);
}
.btn-primary {
  background: var(--afx-primary) !important;
  border: 1px solid var(--afx-primary) !important;
  color: #ffffff !important;
  padding: 10px 20px;
  font-size: 14px;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--afx-primary-deep) !important;
  border-color: var(--afx-primary-deep) !important;
  color: #ffffff !important;
}
.btn-default, .btn-secondary {
  background: #fff; border: 1px solid var(--afx-line); color: var(--afx-ink);
}
.btn-default:hover, .btn-secondary:hover { border-color: var(--afx-primary); background: #f7f8ff; }
.form-control, .input-with-feedback, select.form-control {
  border-radius: var(--afx-radius-btn); border: 1px solid var(--afx-line);
  background: #fff; color: var(--afx-ink);
  transition: border-color var(--afx-ease), box-shadow var(--afx-ease);
}
.form-control:focus, .input-with-feedback:focus {
  border-color: var(--afx-primary); box-shadow: 0 0 0 3px var(--afx-primary-soft); outline: none;
}

/* ---- 5 · CARDS & WORKSPACE WIDGETS (identical classes on v15/v16) ---------- */
.widget.widget-box, .widget.number-widget-box, .widget.shortcut-widget-box,
.widget.links-widget-box, .widget.chart-widget-box, .widget.dashboard-widget-box,
.widget.quick-list-widget-box, .frappe-card, .form-page {
  background: var(--afx-card) !important;
  border: 1px solid var(--afx-card-line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--afx-ease), transform var(--afx-ease), border-color var(--afx-ease);
}
.widget.widget-box, .widget.number-widget-box, .widget.shortcut-widget-box,
.widget.links-widget-box, .widget.chart-widget-box, .widget.dashboard-widget-box {
  padding: 24px !important;
}
.widget.widget-box:hover, .widget.number-widget-box:hover,
.widget.shortcut-widget-box:hover, .widget.links-widget-box:hover,
.widget.chart-widget-box:hover, .widget.dashboard-widget-box:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  border-color: #e4e7ee !important;
}

/* stat cards: accent top bar (radius-matched — no overflow clipping) */
.number-widget-box { position: relative; overflow: visible; min-height: 96px; }
.number-widget-box .widget-content .number {
  font-family: "Inter", sans-serif !important;
  font-weight: 700; font-size: 32px; line-height: 1.05;
  color: var(--afx-navy) !important;
}
/* color-coded icon chips (injected by afintrix_branding.js) */
.afx-stat { padding-right: 72px !important; }
.afx-stat-chip {
  position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--afx-ease);
  z-index: 2;
}
.afx-stat:hover .afx-stat-chip { transform: translateY(-50%) scale(1.07); }
.afx-stat-chip svg { width: 21px; height: 21px; }
.afx-stat-indigo .afx-stat-chip { background: rgba(99, 102, 241, 0.12); color: var(--afx-purple); }
.afx-stat-gold .afx-stat-chip { background: var(--afx-gold-soft); color: var(--afx-gold-dark); }
.afx-stat-green .afx-stat-chip { background: rgba(16, 185, 129, 0.12); color: #0d9668; }
.afx-stat-cyan .afx-stat-chip { background: var(--afx-primary-soft); color: var(--afx-primary); }

/* ── INFO-CARD TREATMENT (per Figma reference): quick-link/shortcut cards
   become a gold feature panel (white monogram) + white content w/ serif title
   and a "price-style" count figure. Applied app-wide to every shortcut card. */
.widget.shortcut-widget-box {
  position: relative; overflow: hidden !important;
  padding: 0 !important; min-height: 128px;
  display: flex !important; flex-direction: row !important; align-items: stretch;
  border-radius: 20px !important;
}
/* left gold feature panel carrying the white Afintrix mark */
.shortcut-widget-box::before {
  content: ""; flex: 0 0 92px; width: 92px; align-self: stretch;
  background-image: var(--afx-mark-white), var(--afx-card-panel);
  background-repeat: no-repeat, no-repeat;
  background-position: center 40%, center;
  background-size: 42px auto, cover;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.06);
}
.shortcut-widget-box .widget-head {
  flex: 1 1 auto; min-width: 0; margin: 0 !important;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: 20px 48px 20px 22px !important;
}
.shortcut-widget-box .widget-body,
.shortcut-widget-box .widget-footer { display: none !important; }
.shortcut-widget-box .widget-label { min-width: 0; }
.shortcut-widget-box .widget-title {
  font-family: var(--afx-serif) !important; font-weight: 700 !important;
  font-size: 19px !important; line-height: 1.15; letter-spacing: 0 !important;
  color: var(--afx-primary) !important; text-transform: none !important;
  transition: color var(--afx-ease);
}
.shortcut-widget-box .widget-subtitle:empty { display: none; }
.shortcut-widget-box .widget-subtitle {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--afx-label);
}
.shortcut-widget-box .widget-control { position: static; display: block; margin-top: 2px; }
.shortcut-widget-box .indicator-pill {
  background: transparent !important; padding: 0 !important; margin: 0 !important;
  font-family: "Inter", sans-serif !important; font-weight: 700 !important;
  font-size: 25px !important; line-height: 1; color: var(--afx-ink) !important;
}
.shortcut-widget-box .widget-control svg { display: none !important; }   /* hide stock arrow */
.shortcut-widget-box::after {
  content: "→"; position: absolute; right: 16px; bottom: 13px;
  color: var(--afx-primary); font-size: 16px; font-weight: 700;
  transition: color var(--afx-ease), transform var(--afx-ease);
}
.shortcut-widget-box:hover { transform: translateY(-3px); }
.shortcut-widget-box:hover::after { color: var(--afx-primary-deep); transform: translateX(4px); }
.shortcut-widget-box:hover .widget-title { color: var(--afx-primary-deep); }

/* serif titles on the general workspace/chart cards to match the reference */
.widget.widget-box .widget-title,
.widget.chart-widget-box .widget-title,
.widget.dashboard-widget-box .widget-title,
.widget.quick-list-widget-box .widget-title,
.widget.links-widget-box .widget-title {
  font-family: var(--afx-serif) !important; font-weight: 700 !important;
  font-size: 17px !important; letter-spacing: 0 !important; color: var(--afx-ink) !important;
  text-transform: none !important;
}
.widget .indicator-pill, .widget .badge {
  background: var(--afx-gold-soft); color: var(--afx-gold-dark); font-weight: 600;
}
.links-widget-box .link-item {
  border-radius: var(--afx-radius-btn); padding: 6px 8px;
  transition: background var(--afx-ease), padding-left var(--afx-ease);
}
.links-widget-box .link-item:hover { background: var(--afx-bg); padding-left: 12px; }
.chart-widget-box .chart-container,
.dashboard-widget-box .chart-container { color: var(--afx-body); }

/* ---- 6 · STACKING & DROPDOWN HYGIENE --------------------------------------- */
.widget, .widget * { box-sizing: border-box; }
.codex-editor .codex-editor__redactor { row-gap: 16px; }
.widget-group .widget, .widget {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}
.widget:hover { z-index: 10; }
.widget .widget-control { position: relative; z-index: 3; }
.widget .dropdown-menu { z-index: 9999 !important; }
.layout-main, .layout-main-section, .widget-group,
.codex-editor, .codex-editor__redactor, .ce-block, .ce-block__content {
  overflow: visible !important;
}
.navbar { isolation: isolate; }

/* ---- 7 · LISTS, FORMS, MODALS, STATUS PILLS -------------------------------- */
.frappe-list .list-row-container { transition: background var(--afx-ease); }
.frappe-list .list-row:hover, .frappe-list .list-row-container:hover { background: #f3f5fa; }
.list-row-head { background: #f3f5f9; border-radius: 10px 10px 0 0; }
.list-row { border-bottom: 1px solid #eef0f5; }
.list-row, .list-row-head { padding: 12px 16px; }
.datatable .dt-header { position: sticky; top: 0; z-index: 2; background: #f3f5f9; }
.datatable .dt-cell { padding: 12px 16px; }
.datatable .dt-row:hover .dt-cell { background: #f3f5fa; }
/* alerts / banners: left-border coding (amber=governance, red=deadline, green=ok, primary=info) */
.alert { border-radius: var(--radius-md); border-left: 4px solid var(--afx-primary); }
.alert-warning { border-left-color: var(--afx-gold); }
.alert-danger { border-left-color: #d92d20; }
.alert-success { border-left-color: var(--afx-green); }
.alert-info { border-left-color: var(--afx-primary); }
.form-tabs-list .nav-link.active {
  color: var(--afx-navy); border-bottom: 2px solid var(--afx-gold); font-weight: 600;
}
.modal-content {
  border-radius: var(--afx-radius-card); border: 1px solid var(--afx-line);
  box-shadow: 0 24px 48px -12px rgba(15, 27, 45, 0.22);
}
.modal-backdrop.show { backdrop-filter: blur(2px); }
.indicator-pill { border-radius: 999px; font-weight: 600; }
.indicator-pill.green, .indicator.green { background: rgba(16,185,129,.12); color: #0d9668; }
.indicator-pill.orange, .indicator.orange { background: var(--afx-gold-soft); color: var(--afx-gold-dark); }
.indicator-pill.red, .indicator.red { background: rgba(240,68,56,.12); color: #d92d20; }
.indicator-pill.blue, .indicator.blue { background: rgba(99,102,241,.12); color: var(--afx-purple); }

/* ---- 8 · V15 DESK SHELL (navbar + floating dark rail) ----------------------
   Inert on v16: .desk-sidebar doesn't exist there and JS gates .afx-dark-rail. */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid var(--afx-line);
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
}
.navbar-brand img, .app-logo { height: 28px; width: auto; }
.navbar-brand { display: flex; align-items: center; }
.navbar-brand::after {
  content: "Afintrix HRMS";
  margin-left: 10px;
  font-family: "Inter", sans-serif;
  font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em;
  color: var(--afx-navy);
  white-space: nowrap;
}
#navbar-search input.form-control, .navbar .search-bar input {
  background: var(--afx-bg); border: 1px solid transparent;
  border-radius: var(--afx-radius-btn);
  transition: border-color var(--afx-ease), box-shadow var(--afx-ease), background var(--afx-ease);
}
#navbar-search input.form-control:focus, .navbar .search-bar input:focus {
  background: #fff; border-color: var(--afx-primary);
  box-shadow: 0 0 0 3px var(--afx-primary-soft);
}
.layout-side-section:has(.desk-sidebar),
.layout-side-section.afx-dark-rail {
  background: linear-gradient(180deg, var(--afx-navy) 0%, var(--afx-navy-2) 100%);
  border-right: none;
  border-radius: 14px;
  margin-top: 8px;
  min-height: calc(100vh - 160px);
  padding: 16px 8px 24px 0;
  box-shadow: 0 8px 24px -10px rgba(15, 27, 45, 0.40);
  position: sticky; top: 68px; align-self: flex-start;
}
.layout-side-section.afx-dark-rail .desk-sidebar { padding: 0 8px 0 0; }
.layout-side-section.afx-dark-rail .standard-sidebar-label,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-label {
  color: rgba(156, 163, 175, 0.55) !important;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding-left: 16px;
}
.layout-side-section.afx-dark-rail .standard-sidebar-label svg,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-label svg { display: none; }
.layout-side-section.afx-dark-rail .standard-sidebar-item,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item {
  border-radius: 0 10px 10px 0;
  margin: 2px 0; padding: 2px 0 2px 8px;
  border-left: 3px solid transparent;
  transition: background var(--afx-ease), border-color var(--afx-ease);
}
.layout-side-section.afx-dark-rail .standard-sidebar-item .item-anchor,
.layout-side-section.afx-dark-rail .standard-sidebar-item .sidebar-item-label,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item .item-anchor,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item .sidebar-item-label {
  color: #b6c2d4 !important; font-size: 13.5px; font-weight: 500;
}
.layout-side-section.afx-dark-rail .standard-sidebar-item .sidebar-item-icon svg,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item .sidebar-item-icon svg {
  --icon-stroke: #8b9bb3; color: #8b9bb3; stroke: #8b9bb3;
}
.layout-side-section.afx-dark-rail .standard-sidebar-item:hover,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.layout-side-section.afx-dark-rail .standard-sidebar-item.selected,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item.selected {
  background: linear-gradient(90deg, rgba(213, 170, 85, 0.15), rgba(213, 170, 85, 0.03)) !important;
  border-left: 3px solid var(--afx-gold);
  box-shadow: inset 6px 0 12px -6px rgba(213, 170, 85, 0.55);
}
.layout-side-section.afx-dark-rail .standard-sidebar-item.selected .item-anchor,
.layout-side-section.afx-dark-rail .standard-sidebar-item.selected .sidebar-item-label,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item.selected .item-anchor,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item.selected .sidebar-item-label {
  color: #ffffff !important; font-weight: 600;
}
.layout-side-section.afx-dark-rail .standard-sidebar-item.selected .sidebar-item-icon svg,
.layout-side-section:has(.desk-sidebar) .standard-sidebar-item.selected .sidebar-item-icon svg {
  --icon-stroke: var(--afx-gold); color: var(--afx-gold); stroke: var(--afx-gold);
}
.layout-side-section.afx-dark-rail .sidebar-item-control .btn,
.layout-side-section.afx-dark-rail .drop-icon,
.layout-side-section:has(.desk-sidebar) .sidebar-item-control .btn,
.layout-side-section:has(.desk-sidebar) .drop-icon { color: #8b9bb3; }
.afx-dark-rail .drop-icon,
.layout-side-section:has(.desk-sidebar) .drop-icon {
  padding: 6px; border-radius: 6px; opacity: 0.75;
  transition: opacity var(--afx-ease), background var(--afx-ease);
}
.afx-dark-rail .drop-icon:hover,
.layout-side-section:has(.desk-sidebar) .drop-icon:hover {
  opacity: 1; background: rgba(255, 255, 255, 0.10);
}
.afx-dark-rail .sidebar-item-container .sidebar-item-container,
.layout-side-section:has(.desk-sidebar) .sidebar-item-container .sidebar-item-container {
  margin-left: 16px; padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.afx-dark-rail .sidebar-item-container .sidebar-item-container .standard-sidebar-item .item-anchor,
.layout-side-section:has(.desk-sidebar) .sidebar-item-container .sidebar-item-container .standard-sidebar-item .item-anchor {
  font-size: 12.5px !important; color: #93a3b8 !important;
}
/* workspace pages: cards sit on the canvas, not inside one white panel */
#page-Workspaces .layout-main-section.frappe-card,
#page-Workspaces .layout-main-section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#page-Workspaces .layout-main-section-wrapper { padding-left: 24px; }
.page-head { background: transparent; border-bottom: none; }
.page-head .page-title .title-text { font-size: 22px; }
.ce-block h1 { font-size: 26px; }
.ce-block .paragraph, .ce-block p { color: var(--afx-body); font-size: 14px; }
#page-Workspaces .ce-block h4,
#page-Workspaces .ce-block h3 {
  font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--afx-label) !important; font-weight: 600 !important;
  margin: 24px 0 4px;
}

/* welcome banner (JS injects on Command Center only) */
.afx-welcome {
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 0 2px;
  display: flex; align-items: baseline; gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 22px; font-weight: 700; color: var(--afx-ink);
}
.afx-welcome .afx-welcome-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--afx-primary);
  flex: none; align-self: center;
}
.afx-welcome strong { color: var(--afx-ink); font-weight: 700; }
.afx-welcome .afx-welcome-brand { color: var(--afx-primary); }
.afx-welcome .afx-welcome-date {
  margin-left: auto; color: #98a2b3;
  font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 400;
}

/* ---- 9 · V16 DESK SHELL — LIGHT (Payrole/SnowUI visual language) ----------
   White rail, brand-blue active pill, plain light canvas. Replaces the earlier
   dark-rail treatment the client rejected as "too dark and heavy". */
html.afx-v16 {
  /* ROOT CAUSE: the sidebar is position:absolute; the layout reserves space via
     the static placeholder/container which is sized from --sidebar-width. Hard-
     coding .body-sidebar width without updating this var left a 28px gap where
     the sidebar overlapped content. Drive BOTH from the var so they stay synced. */
  --sidebar-width: 248px;
  --sidebar-select-color: rgba(57, 129, 247, 0.08);
  --surface-menu-bar: #ffffff;
  --sidebar-border-color: #eef0f3;
  --sidebar-item-hover-bg: #f4f6f8;
  --primary: var(--afx-primary);
  --btn-primary: var(--afx-primary);
  --text-on-primary: #ffffff;
  --checkbox-color: var(--afx-primary);
  --checkbox-focus-shadow: 0 0 0 3px var(--afx-primary-soft);
}
html.afx-v16 .body-sidebar,
html.afx-v16 .body-sidebar-container.expanded .body-sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  /* light brand-tinted rail (per client: pure white felt plain) */
  background: linear-gradient(185deg, #eef4ff 0%, #f4f8ff 42%, #eef3fe 100%) !important;
  border-right: 1px solid #e2e9f7 !important;
  box-shadow: none !important;
}
/* keep the space-reserving placeholder/container in lockstep with the sidebar */
html.afx-v16 .body-sidebar-container,
html.afx-v16 .body-sidebar-container.expanded,
html.afx-v16 .body-sidebar-placeholder,
html.afx-v16 .body-sidebar-container.expanded .body-sidebar-placeholder {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
}
/* rail header: full-color lockup, ink title, muted eyebrow subtitle */
html.afx-v16 .body-sidebar-top {
  padding: 16px 14px 12px !important;
  border-bottom: 1px solid #f0f2f5 !important;
  margin-bottom: 4px;
}
html.afx-v16 .body-sidebar-top::before {
  content: ""; display: block; height: 30px; margin: 0 0 12px;
  background: url("/assets/afintrix_payroll_gateway/images/afintrix-logo.png") left center / contain no-repeat;
}
html.afx-v16 .body-sidebar-top .sidebar-item-label,
html.afx-v16 .body-sidebar-top .title-text,
html.afx-v16 .body-sidebar-top h6,
html.afx-v16 .body-sidebar-top .head-title {
  color: var(--afx-ink) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html.afx-v16 .body-sidebar-top .text-secondary,
html.afx-v16 .body-sidebar-top .text-muted,
html.afx-v16 .body-sidebar-top small {
  color: #98a2b3 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
/* search inside rail */
html.afx-v16 .body-sidebar input.form-control,
html.afx-v16 .body-sidebar .search-bar input {
  background: #ffffff !important;
  border: 1px solid #e2e9f7 !important;
  color: var(--afx-ink) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}
html.afx-v16 .body-sidebar input.form-control::placeholder { color: #98a2b3 !important; }
html.afx-v16 .body-sidebar input.form-control:focus {
  background: #ffffff !important;
  border-color: var(--afx-primary) !important;
  box-shadow: 0 0 0 3px var(--afx-primary-soft) !important;
}
/* nav rows: quiet gray, soft pill on hover — roomier spacing per client */
html.afx-v16 .body-sidebar .standard-sidebar-item {
  display: flex; align-items: center;
  margin: 5px 12px !important;
  padding: 0 !important;
  min-height: 42px;
  border: none !important;
  border-radius: 11px !important;
  background: transparent !important;
  transition: background var(--afx-ease), color var(--afx-ease);
}
html.afx-v16 .body-sidebar .standard-sidebar-item .item-anchor,
html.afx-v16 .body-sidebar .standard-sidebar-item a,
html.afx-v16 .body-sidebar .standard-sidebar-item > div {
  background: transparent !important;
  border-radius: 11px !important;
  padding: 10px 12px !important;
  flex: 1; min-width: 0;
}
/* a touch more air between icon and label */
html.afx-v16 .body-sidebar .standard-sidebar-item .sidebar-item-icon { margin-right: 11px !important; }
html.afx-v16 .body-sidebar .standard-sidebar-item .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item .item-anchor,
html.afx-v16 .body-sidebar .standard-sidebar-item a {
  color: #4b5563 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
html.afx-v16 .body-sidebar svg {
  --icon-stroke: #98a2b3; color: #98a2b3; stroke: #98a2b3;
}
html.afx-v16 .body-sidebar .standard-sidebar-item:hover { background: #f4f6f8 !important; }
html.afx-v16 .body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item:hover .item-anchor {
  color: var(--afx-ink) !important;
}
/* selected = brand-blue soft pill (Payrole pattern) */
html.afx-v16 .body-sidebar .standard-sidebar-item.selected,
html.afx-v16 .body-sidebar .standard-sidebar-item.active,
html.afx-v16 .body-sidebar .sidebar-item-container.selected > .standard-sidebar-item {
  background: rgba(57, 129, 247, 0.08) !important;
  border: none !important;
  box-shadow: none !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected .item-anchor,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected a,
html.afx-v16 .body-sidebar .standard-sidebar-item.active .sidebar-item-label {
  color: var(--afx-primary) !important;
  font-weight: 600 !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.selected svg,
html.afx-v16 .body-sidebar .standard-sidebar-item.active svg {
  --icon-stroke: var(--afx-primary) !important;
  color: var(--afx-primary) !important;
  stroke: var(--afx-primary) !important;
}
/* dropdown chevrons + nested children */
html.afx-v16 .body-sidebar .drop-icon {
  margin-left: auto; padding: 4px 6px; border-radius: 6px; opacity: 0.7;
  transition: opacity var(--afx-ease), background var(--afx-ease);
}
html.afx-v16 .body-sidebar .drop-icon:hover { opacity: 1; background: #eef0f3; }
html.afx-v16 .body-sidebar .sidebar-item-container .sidebar-item-container {
  margin-left: 14px !important;
  padding-left: 6px !important;
  border-left: 1px solid #eef0f3 !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.indent .sidebar-item-label {
  font-size: 12.5px !important;
  color: #6b7280 !important;
}
/* section eyebrows */
html.afx-v16 .body-sidebar .standard-sidebar-label,
html.afx-v16 .body-sidebar .section-item .sidebar-item-label {
  color: #98a2b3 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 16px 6px !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-label svg { display: none !important; }
html.afx-v16 .body-sidebar .divider { border-color: #f0f2f5; }
/* user chip */
html.afx-v16 .body-sidebar .sidebar-user-button,
html.afx-v16 .body-sidebar .sidebar-user-section {
  margin: 8px !important;
  border-radius: 12px !important;
  border: 1px solid #eef0f3 !important;
  background: #fafbfc !important;
}
html.afx-v16 .body-sidebar .sidebar-user-button:hover { background: #f4f6f8 !important; }
html.afx-v16 .body-sidebar .sidebar-user-button .sidebar-item-label,
html.afx-v16 .body-sidebar .sidebar-user-button .text-muted,
html.afx-v16 .body-sidebar [class*="text-ink"],
html.afx-v16 .body-sidebar .d-block.text-truncate,
html.afx-v16 .body-sidebar .d-block.text-secondary {
  color: #4b5563 !important;
}
/* hidden rows (JS stamps .afx-hide) */
html.afx-v16 .body-sidebar .afx-hide,
html.afx-v16 .body-sidebar .sidebar-item-container.afx-hide { display: none !important; }
/* breadcrumbs */
html.afx-v16 .navbar-breadcrumbs .breadcrumb-item a,
html.afx-v16 .breadcrumb-item a { color: var(--afx-label); font-size: 12.5px; }
html.afx-v16 .navbar-breadcrumbs .breadcrumb-item a:hover,
html.afx-v16 .breadcrumb-item a:hover { color: var(--afx-primary); }
/* greeting header spacing inside content */
html.afx-v16 .afx-welcome { margin: 4px 0 8px; }
/* white-label: no Frappe onboarding / promos in the rail */
html.afx-v16 .onboarding-sidebar,
html.afx-v16 .promotional-banners { display: none !important; }

/* ---- 11 · SPLASH / LOADING -------------------------------------------------- */
.splash { background: linear-gradient(165deg, var(--afx-primary), var(--afx-primary-deep)) !important; }
.splash img { filter: brightness(0) invert(1); height: 56px !important; }
.afx-loading-text {
  margin-top: 16px; font-family: "Inter", sans-serif;
  color: rgba(255,255,255,.75); font-size: 14px; text-align: center;
}

/* ---- 12 · VENDOR TRACES ------------------------------------------------------ */
.onboarding-widget-box, .widget.onboarding-widget-box { display: none !important; }
.footer-powered, a[href*="frappe.io"], a[href*="frappecloud.com"],
img[src*="frappe-framework-logo"], .web-footer .text-muted a,
.powered-by-frappe, .frappe-brand, [data-label="Powered by"] { display: none !important; }

/* ---- 14 · V16 MAIN CONTENT — SnowUI-style white canvas card ---------------- */
html.afx-v16 .main-section,
html.afx-v16 .layout-main {
  background: transparent !important;
}
html.afx-v16 .layout-main-section-wrapper {
  padding: 12px 16px 20px 8px !important;
}
html.afx-v16 .layout-main-section.frappe-card,
html.afx-v16 .layout-main-section:not(#page-Workspaces .layout-main-section) {
  background: #ffffff !important;
  border: 1px solid #f3f4f6 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  /* ROOT CAUSE FIX: overflow:hidden here sliced the codex-editor's -7px
     negative margins, clipping the first char / first card on every workspace
     page. visible keeps rounded corners without clipping content. */
  overflow: visible;
}
html.afx-v16 .page-head {
  background: #ffffff !important;
  border-bottom: 1px solid #eef0f5 !important;
  padding: 16px 20px 12px !important;
  margin: 0 !important;
  /* NON-sticky: the sticky breadcrumb was pinning to the top and colliding with
     our branded .afx-apphead as it scrolled up. Static keeps them cleanly stacked. */
  position: static !important;
}
html.afx-v16 .page-head .page-title .title-text {
  font-size: 24px !important;
  color: var(--afx-ink) !important;
}
html.afx-v16 .page-head .breadcrumb-item a {
  color: var(--afx-label) !important;
  font-size: 12px !important;
}
html.afx-v16 .page-head .breadcrumb-item.active,
html.afx-v16 .page-head .breadcrumb-item:last-child a {
  color: var(--afx-navy) !important;
  font-weight: 600;
}

/* filter bar */
html.afx-v16 .filter-section,
html.afx-v16 .standard-filter-section,
html.afx-v16 .filter-selector {
  background: #f8fafc !important;
  border-bottom: 1px solid #eef0f5 !important;
  padding: 10px 16px !important;
}
html.afx-v16 .filter-section .form-control,
html.afx-v16 .standard-filter-section .form-control {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  min-height: 34px;
}

/* list view rows */
html.afx-v16 .frappe-list .list-row-head {
  background: #f3f5f9 !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--afx-label) !important;
}
html.afx-v16 .frappe-list .list-row-container {
  border-bottom: 1px solid #f1f5f9;
}
html.afx-v16 .frappe-list .list-row-container:hover {
  background: #f8fafc !important;
}
html.afx-v16 .frappe-list .list-paging-area {
  background: #fafbfc;
  border-top: 1px solid #eef0f5;
  padding: 8px 16px;
}

/* page actions */
html.afx-v16 .page-actions .btn-primary {
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(57, 129, 247, 0.2);
}
html.afx-v16 .page-actions .btn-default {
  border-radius: 10px !important;
  background: #fff !important;
}

/* status pills in lists */
html.afx-v16 .indicator-pill.green,
html.afx-v16 .indicator.green {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  font-weight: 600;
  padding: 3px 10px;
}

/* hide duplicate frappe logo in top navbar if sidebar has ours */
html.afx-v16 .navbar .navbar-brand::after {
  content: "Afintrix HRMS";
  margin-left: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--afx-navy);
}


/* ---- 15 · COMMAND CENTER — bespoke Payrole-style dashboard ------------------ */
/* let our cards sit on the canvas: neutralize the wrapping white main-card */
html.afx-v16 .layout-main-section:has(.afx-dash) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 4px 32px !important;
}
html.afx-v16 .page-head:has(~ * .afx-dash),
html.afx-v16 .afx-dash ~ * { }

.afx-dash { max-width: 1360px; margin: 0 auto; }
.afx-dash-head { display: flex; align-items: flex-start; justify-content: space-between; margin: 4px 2px 20px; }
.afx-dash-head h1 {
  font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 700;
  color: var(--afx-ink); margin: 0; letter-spacing: -0.02em;
}
.afx-dash-head p { color: #6b7280; font-size: 14px; margin: 4px 0 0; }
.afx-dash-date { color: #98a2b3; font-size: 13px; white-space: nowrap; padding-top: 6px; }

/* KPI row */
.afx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.afx-kpi {
  background: #fff; border: 1px solid #f0f2f5; border-radius: 16px; padding: 20px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06); position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.afx-kpi:hover { box-shadow: 0 8px 24px -12px rgba(16, 24, 40, 0.20); transform: translateY(-2px); }
.afx-kpi-ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center; }
.afx-kpi-ic svg { width: 20px; height: 20px; }
.afx-kpi.afx-b .afx-kpi-ic svg { color: #3981f7; }
.afx-kpi.afx-g .afx-kpi-ic svg { color: #0d9668; }
.afx-kpi.afx-p .afx-kpi-ic svg { color: #6366f1; }
.afx-kpi.afx-o .afx-kpi-ic svg { color: #b77f27; }
.afx-kpi.afx-b .afx-kpi-ic { background: rgba(57,129,247,.12); }
.afx-kpi.afx-g .afx-kpi-ic { background: rgba(16,185,129,.14); }
.afx-kpi.afx-p .afx-kpi-ic { background: rgba(99,102,241,.14); }
.afx-kpi.afx-o .afx-kpi-ic { background: rgba(213,170,85,.18); }
.afx-kpi-label { color: #667085; font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
.afx-kpi-value { font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 700; color: var(--afx-ink); line-height: 1.1; }

/* content grid: large + side card */
.afx-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
.afx-card {
  background: #fff; border: 1px solid #f0f2f5; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}
.afx-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.afx-card-head > span:first-child { font-family: var(--afx-serif); font-weight: 700; font-size: 18px; color: var(--afx-ink); letter-spacing: .1px; }
.afx-card-sub { color: #98a2b3; font-size: 12px; }
.afx-link { color: var(--afx-primary); font-size: 12.5px; font-weight: 600; }
.afx-chart { width: 100%; }
.afx-chart .chart-legend, .afx-chart .graph-svg-tip { font-family: "Inter", sans-serif; }
.afx-chart .chart-legend { flex-wrap: wrap !important; gap: 6px 14px; justify-content: center; }
.afx-chart .chart-legend .legend-dataset-label,
.afx-chart .chart-legend text { font-size: 11px !important; }
#afx-chart-dept { overflow: visible; }

/* recent activity list */
.afx-recent { display: flex; flex-direction: column; }
.afx-rec-row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid #f2f4f7; }
.afx-rec-row:last-child { border-bottom: none; }
.afx-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #3981f7, #4f6bf0); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600;
}
.afx-rec-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.afx-rec-name { font-size: 13.5px; font-weight: 600; color: var(--afx-ink); }
.afx-rec-sub { font-size: 12px; color: #98a2b3; }
.afx-rec-amt { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--afx-ink); display: flex; flex-direction: column; }
.afx-rec-date { font-size: 11.5px; font-weight: 400; color: #98a2b3; }
.afx-empty { color: #98a2b3; font-size: 13px; padding: 16px 0; }

/* quick actions card */
.afx-quick { display: flex; flex-direction: column; }
.afx-qa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border: 1px solid #eef0f3; border-radius: 12px; margin-top: 10px;
  color: #344054; font-size: 13.5px; font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.afx-qa:first-of-type { margin-top: 4px; }
.afx-qa:hover { border-color: var(--afx-primary); background: #f5f7ff; color: var(--afx-primary); transform: translateX(2px); }
.afx-qa-arrow { color: #98a2b3; transition: color .15s ease; }
.afx-qa:hover .afx-qa-arrow { color: var(--afx-primary); }

@media (max-width: 1100px) {
  .afx-kpis { grid-template-columns: repeat(2, 1fr); }
  .afx-grid { grid-template-columns: 1fr; }
}

/* ---- 16 · CONTENT FIT — no clipping, comfortable gutters app-wide --------- */
/* kill Frappe onboarding popup + launcher everywhere */
.onb-panel, .onb-launcher, .onboarding-widget { display: none !important; }
/* comfortable gutter + branded plexus backdrop: header, content and footer are
   rounded cards that float on this patterned bg — visible on EVERY page. */
html.afx-v16 .layout-main-section-wrapper {
  padding: 16px 22px 30px 16px !important;
  background: transparent !important;
}
/* ROOT-CAUSE FIX for "backdrop ends on scroll": every nested element
   (wrapper, content.page-container) has a box only ~1 viewport tall with content
   overflowing, so a background there paints only the top and scrolls away. The
   ONLY real scroll container is .main-section (overflow:auto). A background there
   with default (scroll) attachment is pinned to that element's viewport box and
   stays put behind the scrolling content — full coverage, never ends. */
html.afx-v16 .main-section {
  background:
    url("/assets/afintrix_payroll_gateway/images/afintrix-plexus-tile.png") top right / 420px repeat,
    linear-gradient(135deg, #eaf1fe 0%, #eef4ff 45%, #e6eefc 100%) !important;
}
html.afx-v16 .content.page-container,
html.afx-v16 .content.page-container > div { background: transparent !important; }
html.afx-v16 .layout-main-section:not(:has(.afx-dash)) { padding: 4px 6px 8px !important; }
/* wide content (help pages, tables, list results) scrolls instead of clipping */
html.afx-v16 .frappe-list .result,
html.afx-v16 .report-wrapper, html.afx-v16 .dt-scrollable,
html.afx-v16 .layout-main-section .table-responsive { overflow-x: auto !important; }
html.afx-v16 .layout-main-section table { max-width: 100%; }
/* help/markdown blocks wrap long lines rather than overflow */
html.afx-v16 .layout-main-section .ql-editor,
html.afx-v16 .layout-main-section .markdown,
html.afx-v16 .layout-main-section ol,
html.afx-v16 .layout-main-section ul { overflow-wrap: anywhere; }

/* ---- 17 · DASHBOARD v2 (SnowUI layout) + stronger sidebar states ---------- */
/* KPI tiles: 2x2 grid inside the left cell */
html.afx-v16 .afx-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.afx-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.afx-kpi-delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.afx-kpi-delta.up { color: #0d9668; background: rgba(16,185,129,.12); }
.afx-kpi-delta.down { color: #d92d20; background: rgba(240,68,56,.12); }

/* headcount share-bar list (SnowUI "Revenue by Location") */
.afx-loclist { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.afx-loc-top { display: flex; justify-content: space-between; font-size: 13px; color: #475467; margin-bottom: 6px; }
.afx-loc-top b { color: var(--afx-ink); }
.afx-loc-bar { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.afx-loc-bar i { display: block; height: 100%; border-radius: 999px; }

/* top-earners table */
.afx-table { display: flex; flex-direction: column; }
.afx-tr { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr; align-items: center;
  padding: 11px 4px; border-bottom: 1px solid #f2f4f7; font-size: 13.5px; color: var(--afx-ink); }
.afx-tr:last-child { border-bottom: none; }
.afx-th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #98a2b3; font-weight: 600; }
.afx-td-name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.afx-num { text-align: right; font-variant-numeric: tabular-nums; }
.afx-avatar.sm { width: 30px; height: 30px; font-size: 11px; }

/* ---- SIDEBAR: distinct icons kept from data; upgrade hover + active ------- */
/* base icon: slightly larger, smooth color transition */
html.afx-v16 .body-sidebar .sidebar-item-icon svg { width: 18px; height: 18px; transition: all .15s ease; }
/* HOVER — soft white pill, brand-blue text/icon. NO movement (client: bad UX). */
html.afx-v16 .body-sidebar .standard-sidebar-item:hover {
  background: #ffffff !important; box-shadow: 0 1px 4px rgba(16,24,40,.06) !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item:hover .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item:hover .item-anchor { color: var(--afx-primary) !important; }
html.afx-v16 .body-sidebar .standard-sidebar-item:hover svg {
  --icon-stroke: var(--afx-primary); color: var(--afx-primary); stroke: var(--afx-primary);
}
/* ACTIVE — solid brand-blue pill, white text/icon (reference "Dashboard" style) */
html.afx-v16 .body-sidebar .standard-sidebar-item.selected,
html.afx-v16 .body-sidebar .standard-sidebar-item.active,
html.afx-v16 .body-sidebar .sidebar-item-container.selected > .standard-sidebar-item {
  background: linear-gradient(135deg, var(--afx-primary) 0%, var(--afx-primary-deep) 100%) !important;
  box-shadow: 0 6px 16px -6px rgba(57,129,247,.55) !important;
  position: relative;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.selected .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected .item-anchor,
html.afx-v16 .body-sidebar .standard-sidebar-item.active .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected:hover .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected:hover .item-anchor {
  color: #ffffff !important; font-weight: 600 !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.selected svg,
html.afx-v16 .body-sidebar .standard-sidebar-item.active svg,
html.afx-v16 .body-sidebar .standard-sidebar-item.selected:hover svg {
  --icon-stroke: #ffffff !important; color: #ffffff !important; stroke: #ffffff !important;
}
/* selected row should not get the white hover pill */
html.afx-v16 .body-sidebar .standard-sidebar-item.selected:hover,
html.afx-v16 .body-sidebar .standard-sidebar-item.active:hover {
  background: linear-gradient(135deg, var(--afx-primary) 0%, var(--afx-primary-deep) 100%) !important;
  box-shadow: 0 6px 16px -6px rgba(57,129,247,.55) !important;
}

/* ---- 18 · KPI TILES — SnowUI filled/colored style ------------------------- */
/* alternating vibrant tiles: soft-blue, solid-blue, dark-navy, soft-grey */
html.afx-v16 .afx-kpi { border: none !important; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.afx-kpi.afx-b { background: #eaf2ff !important; }
.afx-kpi.afx-g { background: #3981f7 !important; }
.afx-kpi.afx-p { background: #0f1b2d !important; }
.afx-kpi.afx-o { background: #eef1f6 !important; }
/* text colors per tile tone */
.afx-kpi.afx-g .afx-kpi-label, .afx-kpi.afx-p .afx-kpi-label { color: rgba(255,255,255,.72) !important; }
.afx-kpi.afx-g .afx-kpi-value, .afx-kpi.afx-p .afx-kpi-value { color: #ffffff !important; }
.afx-kpi.afx-b .afx-kpi-label, .afx-kpi.afx-o .afx-kpi-label { color: #475467 !important; }
.afx-kpi.afx-b .afx-kpi-value, .afx-kpi.afx-o .afx-kpi-value { color: var(--afx-ink) !important; }
/* icon chip: translucent on dark/blue, tinted on light */
.afx-kpi .afx-kpi-ic { background: rgba(0,0,0,.05); }
.afx-kpi.afx-g .afx-kpi-ic, .afx-kpi.afx-p .afx-kpi-ic { background: rgba(255,255,255,.16); }
.afx-kpi.afx-g .afx-kpi-ic svg, .afx-kpi.afx-p .afx-kpi-ic svg { color: #fff !important; }
.afx-kpi.afx-b .afx-kpi-ic svg { color: #3981f7 !important; }
.afx-kpi.afx-o .afx-kpi-ic svg { color: #475467 !important; }
/* delta pill: readable on every tile */
.afx-kpi.afx-g .afx-kpi-delta.up, .afx-kpi.afx-p .afx-kpi-delta.up { color: #b7f7d8; background: rgba(255,255,255,.16); }
.afx-kpi.afx-g .afx-kpi-delta.down, .afx-kpi.afx-p .afx-kpi-delta.down { color: #ffc9c4; background: rgba(255,255,255,.16); }
.afx-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -10px rgba(16,24,40,.25); }

/* ---- 19 · APP-WIDE FOOTER (injected into desk content column) ------------- */
html.afx-v16 .afx-appfoot {
  background: #0b1730; color: #cdd6e6; border-radius: 16px;
  margin: 28px 6px 10px; overflow: hidden;
}
html.afx-v16 .afx-appfoot-inner { padding: 32px 32px 8px; }
html.afx-v16 .afx-appfoot-cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 28px;
}
html.afx-v16 .afx-appfoot-wm {
  font-family: "Montserrat", sans-serif; font-weight: 700; color: #fff; font-size: 17px; margin-bottom: 8px;
}
html.afx-v16 .afx-appfoot-brand p { font-size: 12.5px; color: #93a0b8; line-height: 1.6; max-width: 32ch; margin: 0; }
html.afx-v16 .afx-appfoot-col h4 { color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
html.afx-v16 .afx-appfoot-col a { display: block; color: #93a0b8; font-size: 13px; text-decoration: none; padding: 5px 0; transition: color .15s ease; }
html.afx-v16 .afx-appfoot-col a:hover { color: #fff; }
html.afx-v16 .afx-appfoot-muted { display: block; color: #6b7794; font-size: 12px; padding-top: 5px; }
html.afx-v16 .afx-appfoot-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  margin-top: 22px; padding: 16px 0 4px; border-top: 1px solid rgba(255,255,255,.08);
}
html.afx-v16 .afx-appfoot-bottom span { font-size: 12px; color: #7f8ba6; }
html.afx-v16 .afx-appfoot-bottom nav a { color: #93a0b8; font-size: 12px; text-decoration: none; margin-left: 16px; }
html.afx-v16 .afx-appfoot-bottom nav a:hover { color: #fff; }
@media (max-width: 900px) { html.afx-v16 .afx-appfoot-cols { grid-template-columns: 1fr 1fr; } }

/* ---- 20 · INFO-CARD LANGUAGE — hero showcase + gold quick-actions --------- */
/* Hero banner — themed finance scene backdrop (mirrors afintrix.com hero). */
.afx-hero {
  position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 300px; border-radius: 20px; margin-bottom: 16px;
  background:
    linear-gradient(90deg, rgba(8,14,42,.92) 0%, rgba(10,18,64,.74) 48%, rgba(10,18,64,.40) 100%),
    url("/assets/afintrix_payroll_gateway/images/istockphoto-1001279256-612x612.jpg") center/cover no-repeat;
  box-shadow: 0 16px 44px -24px rgba(10,18,64,.65);
}
.afx-hero-body { position: relative; z-index: 2; padding: 40px 44px; max-width: 780px; }
.afx-hero-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--afx-primary-bright); font-weight: 700; }
.afx-hero-title { font-family: var(--afx-serif); font-size: 40px; font-weight: 800; color: #fff; line-height: 1.04; margin: 8px 0 2px; letter-spacing: .3px; }
.afx-hero-sub { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #cdd8f0; font-weight: 600; margin-bottom: 14px; }
.afx-hero-desc { color: #d7deee; font-size: 14.5px; line-height: 1.65; max-width: 62ch; margin: 0 0 20px; }
.afx-hero-row { display: flex; align-items: center; gap: 28px; margin-bottom: 22px; flex-wrap: wrap; }
.afx-hero-figure { font-family: var(--afx-serif); font-size: 30px; font-weight: 800; color: #fff; line-height: 1.05; }
.afx-hero-figure small { display: block; font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9fb0d4; font-weight: 600; margin-bottom: 3px; }
.afx-hero-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #d5aa55 0%, #b77f27 100%); color: #1a1204 !important;
  font-weight: 700; font-size: 14px; text-decoration: none; padding: 12px 24px; border-radius: 999px;
  box-shadow: 0 10px 22px -10px rgba(183,127,39,.7); transition: transform .18s ease, box-shadow .18s ease;
}
.afx-hero-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(183,127,39,.85); }
.afx-hero-feats { display: flex; gap: 10px; flex-wrap: wrap; }
.afx-feat {
  display: inline-flex; align-items: center; gap: 9px; color: #e6ecf9; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  padding: 8px 14px; border-radius: 10px;
}
.afx-feat-ic { display: inline-flex; }
.afx-feat-ic svg { width: 16px; height: 16px; color: var(--afx-primary-bright); }
.afx-hero-mark {
  position: absolute; right: 44px; top: 50%; transform: translateY(-50%); z-index: 1;
  width: 230px; height: 230px; opacity: .12;
  background: var(--afx-mark-white) center/contain no-repeat;
}
@media (max-width: 1000px) { .afx-hero-mark { display: none; } .afx-hero-title { font-size: 30px; } }

/* quick actions pick up the brand-blue accent to match the card language */
.afx-qa:hover { border-color: var(--afx-primary) !important; background: var(--afx-primary-soft) !important; color: var(--afx-primary) !important; }
.afx-qa:hover .afx-qa-arrow { color: var(--afx-primary) !important; }

/* ---- 21 · SIDEBAR — collapsible icon-rail + sub-elements (animated) ------- */
/* smooth width animation across the shell when collapsing */
html.afx-v16 .body-sidebar,
html.afx-v16 .body-sidebar-container,
html.afx-v16 .body-sidebar-placeholder,
html.afx-v16 .body-sidebar-container.expanded,
html.afx-v16 .body-sidebar-container.expanded .body-sidebar-placeholder {
  transition: width .22s ease, min-width .22s ease !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item,
html.afx-v16 .afx-subnav { transition: max-height .24s ease, background var(--afx-ease); }

/* our toggle chevron (injected once into the sidebar) */
html.afx-v16 .afx-sb-toggle {
  position: absolute; top: 15px; right: 10px; z-index: 30;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 1px solid #e6e9f0; color: var(--afx-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(16,24,40,.10); transition: all .18s ease; padding: 0;
}
html.afx-v16 .afx-sb-toggle:hover { background: var(--afx-primary); color: #fff; border-color: var(--afx-primary); }
html.afx-v16 .afx-sb-toggle svg { width: 14px; height: 14px; transition: transform .22s ease; }
/* remove Frappe's broken/hidden native collapse controls — ours replaces them */
html.afx-v16 .collapse-sidebar-link,
html.afx-v16 .body-sidebar > .collapse-sidebar-link,
html.afx-v16 .sidebar-toggle-btn.navbar-brand { display: none !important; }
/* hide the sidebar-header edit-mode chevron (a non-functional "dropdown" for
   end users) + the resize handle (not usable on touch) */
html.afx-v16 .body-sidebar .sidebar-header .drop-icon,
html.afx-v16 .body-sidebar .sidebar-resize-handle { display: none !important; }

/* COLLAPSED = icon rail */
html.afx-v16.afx-sb-collapsed { --sidebar-width: 78px; }
html.afx-v16.afx-sb-collapsed .afx-sb-toggle { right: 50%; transform: translateX(50%); top: 12px; }
html.afx-v16.afx-sb-collapsed .afx-sb-toggle svg { transform: rotate(180deg); }
html.afx-v16.afx-sb-collapsed .body-sidebar .sidebar-item-label,
html.afx-v16.afx-sb-collapsed .body-sidebar .title-container,
html.afx-v16.afx-sb-collapsed .body-sidebar .header-subtitle,
html.afx-v16.afx-sb-collapsed .body-sidebar .header-title,
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-label,
html.afx-v16.afx-sb-collapsed .body-sidebar .drop-icon,
html.afx-v16.afx-sb-collapsed .body-sidebar .indicator-pill,
html.afx-v16.afx-sb-collapsed .body-sidebar .afx-subnav,
html.afx-v16.afx-sb-collapsed .body-sidebar .afx-sub-toggle,
html.afx-v16.afx-sb-collapsed .body-sidebar .sidebar-item-suffix,
html.afx-v16.afx-sb-collapsed .body-sidebar .keyboard-shortcut,
html.afx-v16.afx-sb-collapsed .body-sidebar .sidebar-item-control { display: none !important; }
html.afx-v16.afx-sb-collapsed .body-sidebar-top { padding: 44px 8px 10px !important; }
html.afx-v16.afx-sb-collapsed .body-sidebar-top::before { background-position: center !important; }
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item { justify-content: center; margin: 3px 14px !important; }
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item .item-anchor,
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item > a,
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item > div { justify-content: center !important; padding: 8px !important; }
html.afx-v16.afx-sb-collapsed .body-sidebar .sidebar-item-icon { margin: 0 !important; }
/* rail rows show ONLY their icon — no label, no Ctrl+K hint, no stray text */
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item .item-anchor > *:not(.sidebar-item-icon),
html.afx-v16.afx-sb-collapsed .body-sidebar .standard-sidebar-item > a > *:not(.sidebar-item-icon) { display: none !important; }

/* SUB-ELEMENTS (injected nested nav under key workspaces) */
html.afx-v16 .afx-subnav {
  overflow: hidden; max-height: 0;
  margin: 2px 10px 4px 30px; border-left: 1.5px solid #eef0f3;
}
html.afx-v16 .afx-subnav.afx-open { max-height: 320px; }
html.afx-v16 .afx-subitem {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  padding: 7px 10px; margin: 1px 0 1px 6px; border-radius: 8px;
  color: #667085 !important; font-size: 12.5px; font-weight: 500;
}
html.afx-v16 .afx-subitem::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #cbd2dc; flex: none;
  transition: background var(--afx-ease);
}
html.afx-v16 .afx-subitem:hover { background: #f4f6f8; color: var(--afx-primary) !important; }
html.afx-v16 .afx-subitem.afx-active { color: var(--afx-primary) !important; font-weight: 600; background: rgba(57,129,247,.08); }
html.afx-v16 .afx-subitem:hover::before,
html.afx-v16 .afx-subitem.afx-active::before { background: var(--afx-primary); }
/* parent expand chevron (injected) */
html.afx-v16 .afx-sub-toggle {
  margin-left: auto; cursor: pointer; padding: 2px 3px; color: #98a2b3;
  display: inline-flex; align-items: center; border-radius: 5px;
}
html.afx-v16 .afx-sub-toggle:hover { background: #eef0f3; color: var(--afx-primary); }
html.afx-v16 .afx-sub-toggle svg { transition: transform .2s ease; }
html.afx-v16 .afx-sub-toggle.afx-open svg { transform: rotate(90deg); }
html.afx-v16 .afx-sub-toggle.afx-open { color: var(--afx-primary); }

/* ---- 22 · APP HEADER — branded two-tier topbar (blurred bg + socials) ----- */
html.afx-v16 .afx-apphead {
  border-radius: 16px; overflow: hidden; margin: 2px 6px 18px;
  border: 1px solid #e6ecf7; box-shadow: 0 6px 22px -16px rgba(16,24,40,.30);
}
/* top utility strip — contact info + socials */
html.afx-v16 .afx-apphead-strip {
  background: linear-gradient(90deg, #0a1240 0%, #14206b 100%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 22px; gap: 14px; flex-wrap: wrap;
}
html.afx-v16 .afx-strip-left { display: flex; gap: 26px; flex-wrap: wrap; }
html.afx-v16 .afx-strip-item { display: inline-flex; align-items: center; gap: 8px; color: #c7d2ec; font-size: 12.5px; }
html.afx-v16 .afx-strip-item b { color: #fff; font-weight: 600; }
html.afx-v16 .afx-strip-item svg { width: 14px; height: 14px; color: var(--afx-primary-bright); }
html.afx-v16 .afx-strip-right { display: flex; align-items: center; gap: 16px; }
html.afx-v16 .afx-social { display: inline-flex; align-items: center; gap: 7px; color: #c7d2ec; font-size: 12.5px; text-decoration: none; transition: color .18s ease; }
html.afx-v16 .afx-social .afx-social-ic {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.38);
  display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .18s ease;
}
html.afx-v16 .afx-social svg { width: 12px; height: 12px; }
html.afx-v16 .afx-social:hover { color: #fff; }
html.afx-v16 .afx-social:hover .afx-social-ic { background: var(--afx-primary); border-color: var(--afx-primary); }
/* main bar — brand + nav + CTA over blurred backdrop */
html.afx-v16 .afx-apphead-bar {
  position: relative; display: flex; align-items: center; gap: 18px; padding: 15px 24px; background: #fff;
}
html.afx-v16 .afx-apphead-bar::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.72)),
    url("/assets/afintrix_payroll_gateway/images/afintrix-mesh.png") left center / cover no-repeat;
  opacity: 0.9;
}
html.afx-v16 .afx-apphead-bar > * { position: relative; z-index: 1; }
html.afx-v16 .afx-apphead-brand { display: flex; align-items: center; gap: 12px; }
html.afx-v16 .afx-apphead-logo {
  width: 42px; height: 42px; border-radius: 12px; background: #fff; padding: 6px;
  object-fit: contain; box-shadow: 0 2px 10px rgba(16,24,40,.12);
}
html.afx-v16 .afx-apphead-name { font-family: "Montserrat", sans-serif; font-size: 15px; color: var(--afx-navy); font-weight: 500; line-height: 1.15; }
html.afx-v16 .afx-apphead-name b { display: block; font-size: 18px; font-weight: 800; color: var(--afx-ink); }
html.afx-v16 .afx-apphead-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
html.afx-v16 .afx-apphead-nav a {
  color: var(--afx-navy); font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 9px 15px; border-radius: 9px; transition: background .16s ease, color .16s ease;
}
html.afx-v16 .afx-apphead-nav a:hover { background: rgba(57,129,247,.12); color: var(--afx-primary); }
html.afx-v16 .afx-apphead-nav a.afx-nav-on { color: var(--afx-primary); background: rgba(57,129,247,.12); }
html.afx-v16 .afx-apphead-cta {
  background: linear-gradient(135deg, var(--afx-primary) 0%, var(--afx-primary-deep) 100%);
  color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
  padding: 11px 26px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(57,129,247,.6);
  transition: transform .18s ease, box-shadow .18s ease;
}
html.afx-v16 .afx-apphead-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -8px rgba(57,129,247,.72); }
@media (max-width: 1050px) { html.afx-v16 .afx-apphead-nav { display: none; } }
@media (max-width: 640px) { html.afx-v16 .afx-strip-item:nth-child(2), html.afx-v16 .afx-social span { display: none; } }

/* ---- 23 · SIDEBAR polish — real active class + grouped divider ------------ */
/* Frappe marks the current workspace with .active-sidebar (NOT .selected) */
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar {
  background: linear-gradient(135deg, var(--afx-primary) 0%, var(--afx-primary-deep) 100%) !important;
  box-shadow: 0 6px 16px -6px rgba(57,129,247,.55) !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar .item-anchor,
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar:hover .sidebar-item-label,
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar:hover .item-anchor {
  color: #ffffff !important; font-weight: 600 !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar svg,
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar:hover svg {
  --icon-stroke: #ffffff !important; color: #ffffff !important; stroke: #ffffff !important;
}
html.afx-v16 .body-sidebar .standard-sidebar-item.active-sidebar:hover {
  background: linear-gradient(135deg, var(--afx-primary) 0%, var(--afx-primary-deep) 100%) !important;
  box-shadow: 0 6px 16px -6px rgba(57,129,247,.55) !important;
}
/* grey divider — sits cleanly BETWEEN the two groups. Collapse the native
   spacing around it so its own symmetric margin defines both gaps evenly. */
html.afx-v16 .afx-sb-divider { height: 1px; background: #d7e0f1; margin: 14px 18px; border: none; }
html.afx-v16 .standard-items-sections { padding-bottom: 0 !important; margin-bottom: 0 !important; }
html.afx-v16 .body-sidebar-top { padding-top: 0 !important; margin-top: 0 !important; }
html.afx-v16 .body-sidebar .sidebar-items { padding-top: 0 !important; margin-top: 0 !important; }
html.afx-v16 .body-sidebar .sidebar-items > .sidebar-item-container:first-child { margin-top: 0 !important; }
html.afx-v16.afx-sb-collapsed .afx-sb-divider { margin: 14px 20px; }

/* ---- 24 · INFO-CARD white area — corner bubbles + faint icon watermark ---- */
html.afx-v16 .shortcut-widget-box .widget-head { position: relative; }
/* keep text/count above the decoration */
html.afx-v16 .shortcut-widget-box .widget-label,
html.afx-v16 .shortcut-widget-box .widget-control { position: relative; z-index: 1; }
html.afx-v16 .afx-card-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
html.afx-v16 .afx-card-bubble { position: absolute; border-radius: 50%; }
html.afx-v16 .afx-card-bubble.b1 { width: 74px; height: 74px; top: -28px; right: -20px; background: rgba(57,129,247,.10); }
html.afx-v16 .afx-card-bubble.b2 { width: 30px; height: 30px; top: 30px; right: 34px; background: rgba(57,129,247,.14); }
html.afx-v16 .afx-card-bubble.b3 { width: 16px; height: 16px; top: 12px; right: 74px; background: rgba(110,168,255,.28); }
html.afx-v16 .afx-card-ic { position: absolute; right: -10px; bottom: -14px; color: var(--afx-primary); opacity: .09; }
html.afx-v16 .afx-card-ic svg { width: 96px; height: 96px; }

/* ---- 25 · WORKSPACE CANVAS — vector illustration + soft pattern fill ------
   Fills the empty white canvas on workspace landing pages (Clients & Entities,
   Payroll Runs, etc.) with a faint finance vector + dot grid + brand blob, sitting
   BEHIND all cards. The .afx-ws-canvas class is applied by JS only to workspace
   landing pages (has .ce-block, not the Command Center) — never to list/form/report. */
html.afx-v16 #page-Workspaces .layout-main-section.afx-ws-canvas {
  /* rounded floating card on the plexus backdrop */
  border: 1px solid #e9eef8 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 22px -15px rgba(16,24,40,.28) !important;
  background-color: #ffffff !important;
  /* CLEAN card: single vector accent bottom-right only (the earlier, cleaner look).
     The plexus pattern lives on the BACKDROP behind the cards, not on the card. */
  background-image:
    url("/assets/afintrix_payroll_gateway/images/afintrix-deco.svg") !important;
  background-repeat: no-repeat !important;
  background-position: right 34px bottom 56px !important;
  background-size: 340px auto !important;
}

/* ---- 26 · COMMAND CENTER Quick Actions — distinct colored tiles + pattern -- */
html.afx-v16 .afx-quick .afx-qa {
  border: none !important; color: #ffffff !important;
  position: relative; overflow: hidden;
  padding: 15px 16px !important; border-radius: 12px !important;
  box-shadow: 0 6px 16px -10px rgba(16,24,40,.45);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
html.afx-v16 .afx-quick a.afx-qa:nth-of-type(1) { background: linear-gradient(135deg,#3981f7,#1f6fe0) !important; }
html.afx-v16 .afx-quick a.afx-qa:nth-of-type(2) { background: linear-gradient(135deg,#10b981,#0e9f6e) !important; }
html.afx-v16 .afx-quick a.afx-qa:nth-of-type(3) { background: linear-gradient(135deg,#d8ab5a,#b77f27) !important; }
html.afx-v16 .afx-quick a.afx-qa:nth-of-type(4) { background: linear-gradient(135deg,#6366f1,#4f46e5) !important; }
/* subtle "worked-on" plexus texture over each tile */
html.afx-v16 .afx-quick .afx-qa::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/afintrix_payroll_gateway/images/afintrix-plexus-tile.png") center / 220px repeat;
  opacity: .22; mix-blend-mode: screen; pointer-events: none;
}
html.afx-v16 .afx-quick .afx-qa > * { position: relative; z-index: 1; }
html.afx-v16 .afx-quick .afx-qa span,
html.afx-v16 .afx-quick .afx-qa .afx-qa-arrow { color: #ffffff !important; }
html.afx-v16 .afx-quick .afx-qa:hover {
  transform: translateY(-2px); filter: brightness(1.07);
  background-color: transparent !important; color: #ffffff !important;
  box-shadow: 0 10px 22px -10px rgba(16,24,40,.5);
}
html.afx-v16 .afx-quick .afx-qa:hover span,
html.afx-v16 .afx-quick .afx-qa:hover .afx-qa-arrow { color: #ffffff !important; }

/* ============================================================================
   27 · MOBILE / TABLET RESPONSIVE  (<=900 drawer mode, finer tweaks <=768/<=420)
   ========================================================================== */
html.afx-v16 .afx-burger { display: none; }
html.afx-v16 .afx-nav-backdrop { display: none; }

@media (max-width: 900px) {
  /* content takes full width; sidebar becomes an off-canvas drawer */
  html.afx-v16 { --sidebar-width: 0px !important; }
  html.afx-v16.afx-sb-collapsed { --sidebar-width: 0px !important; }
  html.afx-v16 .body-sidebar,
  html.afx-v16 .body-sidebar-container.expanded .body-sidebar {
    position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; bottom: auto !important;
    width: 272px !important; min-width: 272px !important;
    transform: translateX(-100%); transition: transform .26s ease;
    z-index: 1300 !important; box-shadow: 6px 0 34px rgba(10,18,64,.30); overflow-y: auto;
  }
  html.afx-nav-open .body-sidebar { transform: translateX(0) !important; }
  html.afx-v16 .body-sidebar-container,
  html.afx-v16 .body-sidebar-container.expanded,
  html.afx-v16 .body-sidebar-placeholder,
  html.afx-v16 .body-sidebar-container.expanded .body-sidebar-placeholder { width: 0 !important; min-width: 0 !important; }
  html.afx-v16 .afx-sb-toggle { display: none !important; }        /* desktop collapse chevron off */

  /* hamburger + backdrop */
  html.afx-v16 .afx-burger {
    display: flex; position: fixed; top: 8px; left: 6px; z-index: 1310;
    width: 34px; height: 34px; border-radius: 9px; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #e2e9f7; box-shadow: 0 2px 10px rgba(16,24,40,.14); color: var(--afx-navy);
    cursor: pointer; transition: opacity .2s ease;
  }
  html.afx-v16 .afx-burger svg { width: 19px; height: 19px; }
  /* hide burger while drawer is open (it overlapped the drawer's logo) — the
     drawer closes via backdrop tap, nav-item tap, or route change */
  html.afx-nav-open .afx-burger { opacity: 0; pointer-events: none; }
  html.afx-v16 .afx-nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10,18,64,.42); z-index: 1290;
    opacity: 0; pointer-events: none; transition: opacity .26s ease;
  }
  html.afx-nav-open .afx-nav-backdrop { opacity: 1; pointer-events: auto; }

  /* make room for the burger next to the breadcrumb; keep page actions on-screen */
  html.afx-v16 .page-head { padding: 12px 10px 10px 46px !important; }
  html.afx-v16 .page-head .page-title { min-width: 0; flex: 0 1 auto; }
  html.afx-v16 .page-head .title-area, html.afx-v16 .page-head .page-title .title-text { min-width: 0; }
  html.afx-v16 .layout-main-section-wrapper { padding: 10px 10px 22px !important; }

  /* NAV FLOW FIX: on mobile the sidebar becomes a drawer that shows module
     items on list/form pages (Frappe behaviour) — so surface the header nav as a
     scrollable row here; "Dashboard" reliably reaches the Command Center anywhere. */
  html.afx-v16 .afx-apphead-bar { flex-wrap: wrap; justify-content: space-between; }
  html.afx-v16 .afx-apphead-brand { order: 1; }
  html.afx-v16 .afx-apphead-cta { order: 2; }
  html.afx-v16 .afx-apphead-nav {
    display: flex !important; order: 3; flex-basis: 100%; margin: 10px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(57,129,247,.16);
    overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html.afx-v16 .afx-apphead-nav::-webkit-scrollbar { display: none; }
  html.afx-v16 .afx-apphead-nav a { white-space: nowrap; flex: 0 0 auto; padding: 8px 13px; font-size: 13.5px; }

  /* Frappe's in-sidebar Notification dropdown mis-positions/overlaps on mobile.
     Drop the utility section + divider so the nav sits right under the header
     (removes the big empty top gap in the drawer). */
  html.afx-v16 .body-sidebar .sidebar-notification,
  html.afx-v16 .body-sidebar .dropdown-notifications,
  html.afx-v16 .body-sidebar .standard-items-sections,
  html.afx-v16 .body-sidebar .afx-sb-divider { display: none !important; }
  html.afx-v16 .body-sidebar .body-sidebar-top { padding-top: 6px !important; margin-top: 0 !important; }
  html.afx-v16 .body-sidebar .body-sidebar-top::before { display: none !important; }  /* redundant logo (header has it) */
  html.afx-v16 .body-sidebar .sidebar-items { padding-top: 0 !important; margin-top: 0 !important; }
  html.afx-v16 .body-sidebar { gap: 4px !important; }

  /* ACCOUNT: reveal name + email in the drawer footer (Frappe collapses it to 0px) */
  html.afx-v16 .body-sidebar-bottom .avatar-name-email,
  html.afx-v16 .body-sidebar-bottom .avatar-name-email * {
    height: auto !important; max-height: none !important; overflow: visible !important;
  }
  html.afx-v16 .body-sidebar-bottom .avatar-name-email { display: block !important; text-align: left; line-height: 1.35; }
  html.afx-v16 .body-sidebar-bottom .dropdown-navbar-user > a,
  html.afx-v16 .body-sidebar-bottom .nav-item.dropdown > a {
    display: flex !important; align-items: center; gap: 10px; padding: 10px 12px;
  }
}

@media (max-width: 768px) {
  /* header compact */
  html.afx-v16 .afx-apphead-strip { padding: 8px 12px; gap: 8px; }
  html.afx-v16 .afx-strip-left { gap: 14px; }
  html.afx-v16 .afx-strip-item { font-size: 11.5px; }
  html.afx-v16 .afx-apphead-bar { padding: 12px 14px; gap: 10px; }
  html.afx-v16 .afx-apphead-name { font-size: 13px; }
  html.afx-v16 .afx-apphead-name b { font-size: 16px; }
  html.afx-v16 .afx-apphead-cta { padding: 9px 16px; font-size: 13px; }
  /* hero compact */
  html.afx-v16 .afx-hero { min-height: auto; }
  html.afx-v16 .afx-hero-body { padding: 24px 20px; max-width: 100%; }
  html.afx-v16 .afx-hero-title { font-size: 26px; }
  html.afx-v16 .afx-hero-sub { font-size: 12px; }
  html.afx-v16 .afx-hero-desc { font-size: 13.5px; }
  html.afx-v16 .afx-hero-row { gap: 16px; }
  html.afx-v16 .afx-hero-feats { gap: 8px; }
  html.afx-v16 .afx-feat { font-size: 11.5px; padding: 7px 11px; }
  /* dashboard: single-column grids, stacked header */
  html.afx-v16 .afx-grid { grid-template-columns: 1fr !important; }
  html.afx-v16 .afx-dash-head { flex-direction: column; gap: 4px; align-items: center; text-align: center; }
  html.afx-v16 .afx-dash-head h1 { font-size: 22px; }
  html.afx-v16 .afx-dash-date { padding-top: 0; }
  /* center the hero copy on mobile for a cleaner stacked look */
  html.afx-v16 .afx-hero-body { text-align: center; }
  html.afx-v16 .afx-hero-desc { margin-left: auto; margin-right: auto; }
  html.afx-v16 .afx-hero-row { justify-content: center; }
  html.afx-v16 .afx-hero-feats { justify-content: center; }
  /* footer single column */
  html.afx-v16 .afx-appfoot-cols { grid-template-columns: 1fr !important; gap: 16px; }
  html.afx-v16 .afx-appfoot-inner { padding: 24px 20px 8px; }
  html.afx-v16 .afx-appfoot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  html.afx-v16 .afx-appfoot-bottom nav a { margin: 0 14px 0 0; }
  /* info cards: tighter panel */
  html.afx-v16 .shortcut-widget-box::before { flex: 0 0 72px; width: 72px; background-size: 34px auto, cover; }
  html.afx-v16 .shortcut-widget-box .widget-title { font-size: 16px !important; }
  html.afx-v16 .shortcut-widget-box .widget-head { padding: 16px 40px 16px 16px !important; }
  /* top-earners / tables: allow horizontal scroll rather than squish */
  html.afx-v16 .afx-table, html.afx-v16 .afx-tr { min-width: 0; }
}

@media (max-width: 420px) {
  html.afx-v16 .afx-kpis { grid-template-columns: 1fr !important; }
  html.afx-v16 .afx-strip-item.afx-strip-mail { display: none; }   /* keep phone, drop email */
  html.afx-v16 .afx-apphead-logo { width: 36px; height: 36px; }
  html.afx-v16 .afx-hero-title { font-size: 23px; }
  html.afx-v16 .afx-hero-figure { font-size: 26px; }
  /* truncate the page title so the primary action button stays on-screen */
  html.afx-v16 .page-head .title-text { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.afx-v16 .page-head { padding-right: 8px !important; }
}

/* ---- 28 · SIDEBAR "Go to" quick-nav (doctype pages: reach Command Center) -- */
html.afx-v16 .afx-sb-quicknav { padding: 2px 10px 8px; margin: 2px 0 6px; border-bottom: 1px solid #e6ecf7; }
html.afx-v16 .afx-sb-qn-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: #98a2b3; font-weight: 600; margin: 4px 8px 6px; }
html.afx-v16 .afx-sb-qn-item {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 9px 12px; margin: 3px 0; border-radius: 11px; color: #4b5563 !important; font-size: 13.5px; font-weight: 500;
  transition: background var(--afx-ease), color var(--afx-ease);
}
html.afx-v16 .afx-sb-qn-item:hover { background: #eef3ff; color: var(--afx-primary) !important; }
html.afx-v16 .afx-sb-qn-item:hover svg { color: var(--afx-primary); }
html.afx-v16 .afx-sb-qn-item svg { width: 17px; height: 17px; color: #98a2b3; flex: none; }