/* Apple-inspired web styling, shared by React and the legacy insurance workspace. */
:root {
  --work-canvas: #f5f5f7;
  --work-ink: #1d1d1f;
  --work-muted: #6e6e73;
  --work-blue: #0066cc;
  --work-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}
#root :is(.supply-app, .it-app, .ops-page, .platform-admin-app, .portal-page), body:has(> .app-header) {
  background: var(--work-canvas);
  color: var(--work-ink);
  font-family: var(--work-font);
}
#root .system-sticky-header { background: #fff; z-index: 20; }
#root .system-sticky-header > :is(.supply-topbar,.it-topbar,.ops-header,.admin-topbar) {
  position: relative;
  top: auto;
  min-height: 80px;
  padding: 12px max(24px, calc((100% - 1240px) / 2));
  border-color: #e8e8ed;
  background: #fff;
  box-shadow: none;
}
#root .admin-topbar { grid-template-columns: 1fr auto; }
#root .department-nav, body > .app-module-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 60px;
  overflow-x: auto;
  padding: 10px max(24px, calc((100% - 1240px) / 2));
  border-bottom: 1px solid #e5e5ea;
  background: #fbfbfd;
  scrollbar-width: thin;
  scrollbar-color: #c9c9ce transparent;
}
body > .app-module-nav { top: var(--work-header-height, 80px); }
#root .department-nav > a, body > .app-module-nav > :is(a,button) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 0 17px;
  border: 0;
  border-radius: 10px;
  color: #515154;
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  font: 500 13px/1.4 var(--work-font);
  transition: background .18s ease, color .18s ease;
}
#root .department-nav > a:hover, body > .app-module-nav > :is(a,button):hover { background: #ededf0; color: var(--work-ink); }
#root .department-nav > a.active, body > .app-module-nav > .active { background: #e8f2ff; color: var(--work-blue); font-weight: 600; }
#root :is(.supply-content,.it-content,.ops-main,.admin-content), .workspace-home {
  width: min(1240px, calc(100% - 48px));
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 0 64px;
}
#root :is(.supply-page-title,.it-page-title,.ops-page-title), .workspace-title { margin: 0 0 26px; }
#root :is(.supply-page-title,.it-page-title,.ops-page-title) h1, .workspace-title h1 {
  margin: 5px 0 10px;
  color: var(--work-ink);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
}
#root :is(.supply-page-title,.it-page-title) > div > p, #root .ops-page-title .op-eyebrow, .workspace-title > p {
  margin: 0 0 10px;
  color: var(--work-muted);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .06em;
}
#root :is(.supply-page-title,.it-page-title) > div > span, #root .ops-page-title p:not(.op-eyebrow), .workspace-title > span {
  display: block;
  margin: 0;
  color: var(--work-muted);
  font-size: 14px;
  line-height: 1.65;
}
#root .work-item-grid, .workspace-home > .work-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
#root .work-item-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#root .work-item-grid:has(> :nth-child(5):last-child), .workspace-home > .work-item-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#root .work-item-grid:has(> :nth-child(5):last-child) > *, .workspace-home > .work-item-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
#root .work-item-grid:has(> :nth-child(5):last-child) > :nth-child(-n+2), .workspace-home > .work-item-grid:has(> :nth-child(5):last-child) > :nth-child(-n+2) { grid-column: span 3; }
#root .work-item-card, .workspace-home .work-item-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 230px;
  margin: 0;
  padding: 26px 28px 20px;
  border: 1px solid #e9e9ee;
  border-radius: 22px;
  color: var(--work-ink);
  background: #fff;
  box-shadow: 0 4px 18px #1d1d1f04;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  font-family: var(--work-font);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#root .work-item-card:hover, .workspace-home .work-item-card:hover { transform: translateY(-3px); border-color: #d1d1d9; box-shadow: 0 12px 28px #1d1d1f0b; background: #fff; }
#root .work-item-card:active, .workspace-home .work-item-card:active { transform: scale(.99); }
#root .work-item-card:focus-visible, .workspace-home .work-item-card:focus-visible, #root .department-nav > a:focus-visible, body > .app-module-nav > :focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
#root .work-item-icon, .workspace-home .work-item-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin: 0 0 18px;
  border: none;
  border-radius: 12px;
  color: #0066cc;
  background: #edf4fd;
  box-shadow: none;
}
#root .work-item-icon::before { display: none; }
#root .work-item-icon svg, .workspace-home .work-item-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: none; }
#root .work-item-card h2, .workspace-home .work-item-card h2 { margin: 0 0 9px; font-size: 23px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
#root .work-item-card p, .workspace-home .work-item-card p { max-width: 44ch; margin: 0 0 20px; color: var(--work-muted); font-size: 13px; line-height: 1.75; }
#root .work-item-foot, .workspace-home .work-item-foot { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; margin-top: auto; color: var(--work-muted); font-size: 11px; line-height: 1.5; }
#root .work-item-arrow, .workspace-home .work-item-arrow { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; border-radius: 50%; color: var(--work-blue); background: #f4f7fb; font-size: 18px; }
#root .it-content > .it-dashboard-grid { grid-template-columns: 1fr; }
/* Match the main system chooser to the department work tiles. */
#root .entry-card { border: 1px solid #e5e5ea; border-radius: 22px; background: #fff; box-shadow: 0 4px 18px #1d1d1f04; }
#root .entry-card::before, #root .entry-card::after { display: none; }
#root .entry-card h2 { color: var(--work-ink); letter-spacing: -.025em; }
#root .entry-card .entry-action { color: var(--work-blue); }
#root .entry-card.denied { background: #f0f0f3; }
@media (max-width: 900px) {
  #root .work-item-grid:has(> :nth-child(3):last-child), #root .work-item-grid:has(> :nth-child(5):last-child), .workspace-home > .work-item-grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #root .work-item-grid.work-item-grid > .work-item-card:nth-child(n), .workspace-home > .work-item-grid.work-item-grid > .work-item-card:nth-child(n) { grid-column: auto; }
  #root .work-item-grid.work-item-grid > .work-item-card:nth-child(odd):last-child, .workspace-home > .work-item-grid.work-item-grid > .work-item-card:nth-child(odd):last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  #root .system-sticky-header > :is(.supply-topbar,.it-topbar,.ops-header,.admin-topbar) { padding: 12px 16px; min-height: 68px; gap: 10px; }
  #root .ops-header .booking-brand small { display: none; }
  #root .ops-header { flex-wrap: nowrap; }
  #root .ops-header nav { gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
  #root .ops-header nav > span { display: none; }
  #root .ops-header .booking-brand { font-size: 13px; gap: 7px; }
  #root .ops-header .op-brand-mark { width: 30px; height: 30px; font-size: 18px; }
  #root .it-user > a { display: inline-flex; }
  #root .department-nav, body > .app-module-nav { min-height: 56px; padding: 8px 16px; gap: 2px; }
  #root .department-nav > a, body > .app-module-nav > :is(a,button) { padding: 0 12px; font-size: 12px; }
  #root :is(.supply-content,.it-content,.ops-main,.admin-content), .workspace-home { width: calc(100% - 32px); padding: 26px 0 40px; }
  #root .work-item-grid, #root .work-item-grid:has(> :nth-child(3):last-child), #root .work-item-grid:has(> :nth-child(5):last-child), .workspace-home > .work-item-grid, .workspace-home > .work-item-grid:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; gap: 12px; }
  #root .work-item-grid.work-item-grid > .work-item-card:nth-child(n), .workspace-home > .work-item-grid.work-item-grid > .work-item-card:nth-child(n) { grid-column: 1 / -1; min-height: 200px; padding: 22px; border-radius: 19px; }
  #root .work-item-card h2, .workspace-home .work-item-card h2 { font-size: 22px; }
  #root .work-item-icon, .workspace-home .work-item-icon { margin-bottom: 14px; }
  body > .app-header .cloud-user { display: none; }
  body > .app-header .brand { gap: 7px; }
  body > .app-header .brand-title { font-size: 13px; }
  body > .app-header .brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
  body > .app-header .header-actions { flex-wrap: nowrap; gap: 5px; }
  body > .app-header .btn { padding: 8px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #root .work-item-card, .workspace-home .work-item-card, #root .department-nav > a { transition: none; }
  #root .work-item-card:hover, .workspace-home .work-item-card:hover { transform: none; }
}