html, body, #root {
  height: 100%;
  margin: 0;
  /* Faint brand-tinted gray instead of flat neutral gray -- reads as
     "designed" rather than default-browser-gray without competing with
     the white cards sitting on top of it. */
  background: #f5f6fd;
}

.dfm-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 24px;
}
.dfm-logo .dfm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4f6dfb, #7b3ff2);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(79, 109, 251, 0.35);
}
.dfm-logo .dfm-wordmark {
  background: linear-gradient(135deg, #3451d1, #7b3ff2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dfm-header {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #eef0f5;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Thin brand-gradient rule under the whole header -- a small, consistent
   flourish that shows up on every page rather than a one-off accent. */
.dfm-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, #4f6dfb, #7b3ff2 50%, #13a8a8);
}
.dfm-header .dfm-menu {
  flex: 1;
  border-bottom: none;
  min-width: 0;
  background: transparent;
}
/* Rounded "pill" highlight behind the active/hovered top-nav item instead
   of antd's default bottom-border-only indicator -- reads more like a
   deliberate nav design, less like unstyled default antd. */
.dfm-menu.ant-menu-horizontal > .ant-menu-item {
  border-radius: 8px;
  margin: 10px 2px;
  padding: 0 14px;
  border-bottom: none !important;
  top: 0;
}
.dfm-menu.ant-menu-horizontal > .ant-menu-item::after {
  display: none;
}
.dfm-menu.ant-menu-horizontal > .ant-menu-item-selected {
  background: linear-gradient(135deg, rgba(79,109,251,0.12), rgba(123,63,242,0.12));
  color: #3451d1;
  font-weight: 600;
}
.dfm-menu.ant-menu-horizontal > .ant-menu-item:hover {
  background: #f5f6fd;
  color: #3451d1;
}
.dfm-header .dfm-user {
  margin-left: 12px;
  white-space: nowrap;
}
.dfm-portal-switcher {
  /* antd's Layout.Header sets line-height: 64px on itself, which
     inherits into every descendant's text -- without overriding it here,
     this box's single line of text inflates to 64px tall (plus padding),
     overflowing well past the header's own clipped 64px height on both
     top and bottom. Invisible before this box had a real border/
     background to reveal its edges; became an obvious overlap with the
     header's gradient underline once it did. */
  line-height: normal;
  white-space: nowrap;
  padding: 4px 12px;
  background: linear-gradient(135deg, rgba(79,109,251,0.08), rgba(123,63,242,0.08));
  border: 1px solid rgba(79,109,251,0.15);
  border-radius: 8px;
}
.dfm-portal-switcher-single {
  line-height: normal;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dfm-content {
  width: 100%;
  padding: 20px 24px 40px;
  box-sizing: border-box;
}

.dfm-full-width-card .ant-card-body {
  padding: 0;
}

/* Cards get a touch more presence than antd's very flat default --
   consistent app-wide since this isn't scoped to a class. */
.dfm-content .ant-card {
  border-radius: 10px;
  border: 1px solid #eef0f7;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.dfm-content .ant-card-head {
  border-bottom: 1px solid #f0f1f8;
}

/* Soft brand-tinted table header instead of flat gray -- small touch,
   shows up on every data table in the app. */
.dfm-content .ant-table-thead > tr > th {
  background: #f6f7fd;
  color: #3f4a6b;
  font-weight: 600;
}
.dfm-content .ant-table-thead > tr > th::before {
  display: none;
}

.dfm-login-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4f6dfb 0%, #7b3ff2 100%);
}
.dfm-login-card {
  width: 380px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(30, 20, 90, 0.35);
}

/* CSS-only donut chart: pass --pct and --color via inline style */
.dfm-donut {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(var(--color, #52c41a) calc(var(--pct, 0) * 1%), #eef0f7 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dfm-donut::before {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
}
.dfm-donut-label {
  position: relative;
  text-align: center;
  z-index: 1;
  line-height: 1.1;
}
.dfm-donut-label .pct {
  font-size: 20px;
  font-weight: 700;
  color: #1f2a44;
}
.dfm-donut-label .cap {
  font-size: 11px;
  color: #8c93a8;
}

.dfm-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 13px;
}
.dfm-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 8px;
  flex-shrink: 0;
}
.dfm-legend-label {
  flex: 1;
  color: #444;
}
.dfm-legend-value {
  font-weight: 600;
  color: #1f2a44;
  min-width: 60px;
  text-align: right;
}

.dfm-job-row-detail {
  background: #f9fafd;
  padding: 20px 24px;
  border-top: 1px solid #f0f1f8;
}

/* Stat cards: a colored top accent + a matching color on the number
   itself, cycled across a curated 6-color palette when several sit
   together in a .dfm-stat-grid row (Dashboard); a standalone stat card
   (Master Files, Removal Lists tabs) just gets the first palette color.
   Colors are deliberately muted/professional tones, not saturated
   primaries, and the card itself stays white -- color is an accent, not
   a background fill. */
.dfm-stat-card {
  border-radius: 10px;
  border-top: 3px solid #4f6dfb !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dfm-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}
.dfm-stat-card .ant-statistic-title {
  color: #6b7280;
  font-weight: 500;
  font-size: 13px;
}
.dfm-stat-card .ant-statistic-content {
  color: #4f6dfb;
  font-weight: 700;
}

.dfm-stat-grid > .dfm-stat-card:nth-child(6n+1) { border-top-color: #4f6dfb !important; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+2) { border-top-color: #7b3ff2 !important; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+3) { border-top-color: #0d9488 !important; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+4) { border-top-color: #d97706 !important; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+5) { border-top-color: #16a34a !important; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+6) { border-top-color: #db2777 !important; }

.dfm-stat-grid > .dfm-stat-card:nth-child(6n+1) .ant-statistic-content { color: #4f6dfb; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+2) .ant-statistic-content { color: #7b3ff2; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+3) .ant-statistic-content { color: #0d9488; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+4) .ant-statistic-content { color: #d97706; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+5) .ant-statistic-content { color: #16a34a; }
.dfm-stat-grid > .dfm-stat-card:nth-child(6n+6) .ant-statistic-content { color: #db2777; }

/* Flexbox (not CSS Grid) on purpose: Grid shares ONE column-track layout
   across every row, so a partial last row still leaves empty tracks --
   exactly the gap this replaces. Flexbox's wrapped lines size
   independently, so flex-grow fills EVERY row completely, including a
   partial one, regardless of how many cards this user's role/page-access
   produces or how wide the screen is. */
.dfm-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.dfm-stat-grid > .dfm-stat-card {
  flex: 1 1 200px;
}

.dfm-muted {
  color: #8c93a8;
}