/* =============================================================
 * Unified Design System — clean product UI
 * Shared by Workforce and Recruitment.
 *
 * Visual direction:
 *   - white and soft-grey surfaces
 *   - one restrained violet brand accent
 *   - semantic colours only for status and validation
 *   - system sans-serif typography, consistent borders and spacing
 * ============================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --ds-paper:        #ffffff;
  --ds-paper-soft:   #f8f9fa;
  --ds-surface:      #ffffff;
  --ds-surface-alt:  #ffffff;
  --ds-stamp:        #f4f5f7;

  /* Ink */
  --ds-ink:          #101828;
  --ds-ink-soft:     #344054;
  --ds-muted:        #667085;
  --ds-faint:        #98a2b3;

  /* Borders */
  --ds-line:         #e4e7ec;
  --ds-line-soft:    #f0f2f5;
  --ds-line-strong:  #d0d5dd;

  /* Brand */
  --ds-accent:         #6d5ce7;
  --ds-accent-hover:   #5947d6;
  --ds-accent-soft:    #f3f1ff;
  --ds-accent-ink:     #ffffff;
  --ds-amber:          #6d5ce7;
  --ds-amber-soft:     #f3f1ff;

  /* Semantic */
  --ds-success:       #067647;
  --ds-success-soft:  #ecfdf3;
  --ds-warning:       #b54708;
  --ds-warning-soft:  #fffaeb;
  --ds-danger:        #b42318;
  --ds-danger-soft:   #fef3f2;
  --ds-info:          #175cd3;
  --ds-info-soft:     #eff8ff;

  /* Typography */
  --ds-font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-sans:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                     "Liberation Mono", monospace;

  /* Radii */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius:    10px;
  --ds-radius-lg: 12px;
  --ds-radius-pill: 999px;

  /* Spacing scale (4px base) */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;

  /* Elevation */
  --ds-shadow-1: 0 1px 3px rgba(16, 24, 40, 0.06);
  --ds-shadow-2: 0 4px 14px rgba(16, 24, 40, 0.07);
  --ds-shadow-menu: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* Layout */
  --ds-container: 1240px;
  --ds-topbar-h:  58px;
  --ds-subnav-h:  46px;
}

/* ---------- Reset / Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.008em;
}

a { color: var(--ds-accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--ds-line-strong); text-underline-offset: 3px; }


h1, h2, h3, h4, h5, h6 {
  font-family: var(--ds-font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ds-ink);
  margin: 0 0 var(--ds-space-3);
}

h1 { font-size: 32px; line-height: 1.12; font-weight: 750; }
h2 { font-size: 24px; line-height: 1.18; font-weight: 720; }
h3 { font-size: 19px; line-height: 1.25; font-weight: 700; }
h4 { font-size: 16px; line-height: 1.3; font-weight: 700; }
h5 { font-size: 14px; line-height: 1.3;  font-family: var(--ds-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-ink-soft); }
h6 { font-size: 12px; line-height: 1.3;  font-family: var(--ds-font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ds-muted); }

p { margin: 0 0 var(--ds-space-3); }

code, kbd, samp, .mono { font-family: var(--ds-font-mono); font-size: 0.92em; }

/* ---------- Utility ---------- */
.ds-container { max-width: var(--ds-container); margin: 0 auto; padding: 0 var(--ds-space-5); }
.ds-muted { color: var(--ds-muted); }
.ds-faint { color: var(--ds-faint); }
.ds-small { font-size: 12.5px; }
.ds-tiny  { font-size: 11.5px; letter-spacing: 0.02em; }
.ds-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ds-muted); font-weight: 600; }
.ds-stack { display: grid; gap: var(--ds-space-4); }
.ds-row   { display: flex; gap: var(--ds-space-3); align-items: center; flex-wrap: wrap; }
.ds-row--between { justify-content: space-between; }
.ds-row--end     { justify-content: flex-end; }
.ds-divider { border: 0; border-top: 1px solid var(--ds-line); margin: var(--ds-space-4) 0; }

/* ---------- Cards ---------- */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1);
  padding: var(--ds-space-6);
}
.ds-card__title {
  font-family: var(--ds-font-display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 var(--ds-space-3);
}
.ds-card__sub {
  color: var(--ds-muted);
  font-size: 13px;
  margin: 0 0 var(--ds-space-4);
}

/* ---------- Buttons ---------- */
.ds-btn {
  appearance: none;
  font-family: var(--ds-font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: var(--ds-radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ds-ink);
  background: var(--ds-surface);
  border-color: var(--ds-line);
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.ds-btn:hover { background: var(--ds-stamp); border-color: var(--ds-line-strong); text-decoration: none; }
.ds-btn:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

.ds-btn--primary,
.ds-btn--accent {
  background: var(--ds-accent);
  color: var(--ds-accent-ink);
  border-color: var(--ds-accent);
}
.ds-btn--primary:hover,
.ds-btn--accent:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-accent-ink);
}

.ds-btn--amber {
  background: var(--ds-amber);
  color: #fffaf0;
  border-color: var(--ds-amber);
}
.ds-btn--amber:hover { background: #92400e; border-color: #92400e; color: #fffaf0; }

.ds-btn--danger {
  background: var(--ds-danger);
  color: #fff;
  border-color: var(--ds-danger);
}
.ds-btn--danger:hover { background: #7a2323; border-color: #7a2323; color: #fff; }

.ds-btn--ghost {
  background: transparent;
  border-color: transparent;
}
.ds-btn--ghost:hover { background: var(--ds-stamp); border-color: transparent; }

.ds-btn--sm { padding: 7px 10px; font-size: 13px; border-radius: var(--ds-radius-sm); }
.ds-btn--lg { padding: 12px 18px; font-size: 15px; }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------- Inputs ---------- */
.ds-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-ink-soft);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.ds-input, .ds-select, .ds-textarea {
  width: 100%;
  font-family: var(--ds-font-sans);
  font-size: 14px;
  color: var(--ds-ink);
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  padding: 9px 11px;
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ds-textarea { min-height: 96px; resize: vertical; font-family: var(--ds-font-sans); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none;
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(109, 92, 231, 0.14);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-faint); }
.ds-input[readonly], .ds-input:disabled { background: var(--ds-stamp); color: var(--ds-ink-soft); }

.ds-field { display: grid; gap: 6px; }
.ds-field--inline { display: flex; align-items: center; gap: 10px; }

/* ---------- Badges ---------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--ds-radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: var(--ds-stamp);
  color: var(--ds-ink-soft);
  border: 1px solid var(--ds-line);
  white-space: nowrap;
}
.ds-badge--success { background: var(--ds-success-soft); color: #2f5938; border-color: #cfe0cd; }
.ds-badge--warning { background: var(--ds-warning-soft); color: #8a6900; border-color: #eedba7; }
.ds-badge--danger  { background: var(--ds-danger-soft);  color: #7a232a; border-color: #ecc6c4; }
.ds-badge--info    { background: var(--ds-info-soft);    color: #2b4560; border-color: #ccd6e4; }
.ds-badge--amber   { background: var(--ds-amber-soft);   color: #7a3b06; border-color: #f3dda2; }

/* ---------- Tables ---------- */
.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
}
.ds-table th, .ds-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ds-line-soft);
  font-size: 13.5px;
  text-align: left;
  vertical-align: middle;
}
.ds-table th {
  background: var(--ds-stamp);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-muted);
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: var(--ds-stamp); }

/* ---------- Flash / Alerts ---------- */
.ds-flash {
  padding: 10px 14px;
  border-radius: var(--ds-radius);
  border: 1px solid var(--ds-line);
  background: var(--ds-surface);
  font-size: 13.5px;
  margin-bottom: 10px;
}
.ds-flash--error, .ds-flash--danger {
  background: var(--ds-danger-soft);
  border-color: #ecc6c4;
  color: #7a232a;
}
.ds-flash--success {
  background: var(--ds-success-soft);
  border-color: #cfe0cd;
  color: #2f5938;
}
.ds-flash--warning {
  background: var(--ds-warning-soft);
  border-color: #eedba7;
  color: #8a6900;
}
.ds-flash--info {
  background: var(--ds-info-soft);
  border-color: #ccd6e4;
  color: #2b4560;
}

/* ---------- Topbar shell (shared pattern) ---------- */
.ds-topbar {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-line);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
}
.ds-topbar__inner {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 var(--ds-space-5);
  height: var(--ds-topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
}
.ds-brand {
  font-family: var(--ds-font-display);
  font-weight: 750;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.ds-brand__mark {
  display: inline-block;
  width: 10px; height: 10px;
  background: linear-gradient(135deg, var(--ds-accent), #0091ff);
  border-radius: 4px;
  transform: translateY(-1px) rotate(45deg);
}
.ds-brand__tag {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  color: var(--ds-muted);
  padding: 2px 8px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.ds-userpill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 6px;
  background: var(--ds-stamp);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  font-size: 13px;
}
.ds-userpill__avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--ds-accent);
  color: var(--ds-accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
}
.ds-userpill__name { font-weight: 500; color: var(--ds-ink); }
.ds-userpill__meta { color: var(--ds-muted); font-size: 12px; }

/* ---------- Navigation ---------- */
.ds-navlist {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ds-navlink {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-ink-soft);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.ds-navlink:hover { background: var(--ds-stamp); color: var(--ds-ink); text-decoration: none; }
.ds-navlink.is-active {
  background: var(--ds-surface);
  color: var(--ds-ink);
  border-color: var(--ds-line);
}

.ds-subnav {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid var(--ds-line);
}
.ds-subnav__inner {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 8px var(--ds-space-5);
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  min-height: var(--ds-subnav-h);
  align-items: center;
}
.ds-sublink {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.ds-sublink:hover { color: var(--ds-ink); text-decoration: none; }
.ds-sublink.is-active {
  color: var(--ds-ink);
  border-bottom-color: var(--ds-accent);
  font-weight: 500;
}

/* ---------- Page ---------- */
.ds-page {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: var(--ds-space-8) var(--ds-space-5) var(--ds-space-12);
}
.ds-page__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin-bottom: var(--ds-space-6);
  flex-wrap: wrap;
}
.ds-page__title {
  font-family: var(--ds-font-display);
  font-weight: 750;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.ds-page__lede {
  color: var(--ds-muted);
  font-size: 15px;
  max-width: 60ch;
  margin: 8px 0 0;
}

/* ---------- Grid helpers ---------- */
.ds-grid { display: grid; gap: var(--ds-space-5); }
.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 820px) {
  .ds-grid--2, .ds-grid--3, .ds-grid--auto { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.ds-footer {
  border-top: 1px solid var(--ds-line);
  margin-top: var(--ds-space-12);
  padding: var(--ds-space-6) 0;
  background: var(--ds-paper-soft);
}
.ds-footer__inner {
  max-width: var(--ds-container);
  margin: 0 auto;
  padding: 0 var(--ds-space-5);
  color: var(--ds-muted);
  font-size: 12.5px;
  display: flex;
  justify-content: space-between;
  gap: var(--ds-space-4);
  flex-wrap: wrap;
}

/* =============================================================
 * Bootstrap override layer (for the recruitment module)
 * Keep Bootstrap loaded for layout utilities (.row / .col-*),
 * but restyle the visible components to match our language.
 * Guarded by .ds-bs so it only applies when we opt in.
 * ============================================================= */
.ds-bs {
  font-family: var(--ds-font-sans);
  font-size: 14.5px;
  color: var(--ds-ink);
  background: transparent;
}
.ds-bs h1, .ds-bs h2, .ds-bs h3, .ds-bs h4, .ds-bs h5 {
  font-family: var(--ds-font-display);
  letter-spacing: -0.015em;
  color: var(--ds-ink);
  font-weight: 700;
}

.ds-bs .card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-1) !important;
}
.ds-bs .card-body { padding: var(--ds-space-6); }
.ds-bs .card-title { font-family: var(--ds-font-display); font-weight: 700; }
.ds-bs .shadow, .ds-bs .shadow-sm, .ds-bs .shadow-lg { box-shadow: var(--ds-shadow-1) !important; }

/* Buttons */
.ds-bs .btn {
  border-radius: var(--ds-radius);
  font-weight: 500;
  font-family: var(--ds-font-sans);
  padding: 8px 14px;
  border-width: 1px;
  letter-spacing: 0;
}
.ds-bs .btn-primary,
.ds-bs .btn-dark {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-accent-ink);
}
.ds-bs .btn-primary:hover,
.ds-bs .btn-dark:hover,
.ds-bs .btn-primary:focus,
.ds-bs .btn-dark:focus {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: var(--ds-accent-ink);
}
.ds-bs .btn-outline-secondary,
.ds-bs .btn-outline-primary {
  color: var(--ds-ink);
  background: var(--ds-surface);
  border-color: var(--ds-line);
}
.ds-bs .btn-outline-secondary:hover,
.ds-bs .btn-outline-primary:hover {
  background: var(--ds-stamp);
  border-color: var(--ds-line-strong);
  color: var(--ds-ink);
}
.ds-bs .btn-warning {
  background: var(--ds-amber);
  border-color: var(--ds-amber);
  color: #fff;
}
.ds-bs .btn-warning:hover {
  background: var(--ds-accent-hover);
  border-color: var(--ds-accent-hover);
  color: #fff;
}
.ds-bs .btn-link {
  color: var(--ds-accent);
  text-decoration: none;
}
.ds-bs .btn-link:hover { text-decoration: underline; }

/* Forms */
.ds-bs .form-label { font-size: 12.5px; font-weight: 500; color: var(--ds-ink-soft); margin-bottom: 4px; }
.ds-bs .form-control, .ds-bs .form-select {
  background: var(--ds-surface-alt);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  font-size: 14px;
  padding: 9px 11px;
  color: var(--ds-ink);
}
.ds-bs .form-control:focus, .ds-bs .form-select:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px rgba(109, 92, 231, 0.14);
}

/* Alerts */
.ds-bs .alert { border-radius: var(--ds-radius); font-size: 13.5px; border-width: 1px; }
.ds-bs .alert-info      { background: var(--ds-info-soft);    border-color: #ccd6e4; color: #2b4560; }
.ds-bs .alert-secondary { background: var(--ds-stamp);        border-color: var(--ds-line); color: var(--ds-ink-soft); }
.ds-bs .alert-warning   { background: var(--ds-warning-soft); border-color: #eedba7; color: #8a6900; }
.ds-bs .alert-success   { background: var(--ds-success-soft); border-color: #cfe0cd; color: #2f5938; }
.ds-bs .alert-danger    { background: var(--ds-danger-soft);  border-color: #ecc6c4; color: #7a232a; }

/* Tables */
.ds-bs .table { color: var(--ds-ink); }
.ds-bs .table > :not(caption) > * > * { border-color: var(--ds-line-soft); padding: 10px 12px; background: transparent; }
.ds-bs .table > thead > tr > * {
  background: var(--ds-stamp);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-muted);
  border-bottom: 1px solid var(--ds-line);
}
.ds-bs .table-hover > tbody > tr:hover > * { background: var(--ds-stamp); }

/* List groups */
.ds-bs .list-group { border-radius: var(--ds-radius); overflow: hidden; border: 1px solid var(--ds-line); }
.ds-bs .list-group-item { border-color: var(--ds-line-soft); background: var(--ds-surface); font-size: 14px; }
.ds-bs .list-group-item:hover { background: var(--ds-stamp); }

/* Badges */
.ds-bs .badge {
  font-weight: 500;
  font-size: 11.5px;
  border-radius: var(--ds-radius-pill);
  padding: 3px 9px;
  letter-spacing: 0.02em;
}
.ds-bs .badge.text-bg-light,
.ds-bs .badge.bg-light {
  background: var(--ds-stamp) !important;
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-line);
}
.ds-bs .badge.bg-secondary { background: var(--ds-ink-soft) !important; color: #fff; }
.ds-bs .badge.bg-success   { background: var(--ds-success) !important; }
.ds-bs .badge.bg-warning   { background: var(--ds-warning) !important; color: #fff; }
.ds-bs .badge.bg-danger    { background: var(--ds-danger) !important; }

/* Text utilities */
.ds-bs .text-muted { color: var(--ds-muted) !important; }
.ds-bs .mono, .ds-bs code, .ds-bs samp { font-family: var(--ds-font-mono); }

/* =============================================================
 * Minor interactions
 * ============================================================= */
@media (prefers-reduced-motion: no-preference) {
  .ds-fade-in { animation: ds-fade-in 240ms ease both; }
}
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Selection */
::selection {
  background: var(--ds-amber-soft);
  color: var(--ds-ink);
}

/* =============================================================
 * Responsive safety rails — prevent horizontal scroll and keep
 * content readable on narrow viewports.
 *
 * These apply globally but are defensive: they only restrict
 * behaviors that cause clipped / overflow UI on small screens.
 * ============================================================= */

/* Never let the whole page scroll horizontally. Specific wide
   components (tables, schedule board) opt-in to horizontal scroll
   via `overflow-x: auto` on their own wrapper.
   Note: only put this on html — putting it on body breaks sticky. */
html {
  overflow-x: hidden;
  max-width: 100%;
}
body { max-width: 100%; }

/* Tables inside cards become horizontally scrollable if they don't fit. */
.ds-card .ds-table,
.ds-bs .card .table {
  display: table;
  min-width: 0;
}
.ds-table-scroll, .table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Images and media never break their container. */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

/* Long unbroken strings (emails, URLs) wrap rather than overflow. */
.ds-card, .ds-bs .card-body { overflow-wrap: anywhere; word-break: break-word; }
.mono, code, .ds-table td, .ds-bs .table td { overflow-wrap: anywhere; }

/* Admin top nav: allow wrapping on narrow screens rather than clipping. */
@media (max-width: 960px) {
  .adminTopbar__inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .adminTopnav { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: 2px; }
  .adminTopnav::-webkit-scrollbar { height: 6px; }
  .adminSubnav__inner { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .adminSubnav__panel { flex-wrap: nowrap; }
}

/* Very narrow (phones): tighter spacing, stack anything that was 2-col. */
@media (max-width: 560px) {
  :root { --ds-space-5: 14px; --ds-space-6: 18px; }
  h1, .ds-page__title, .hero h1 { font-size: 26px; line-height: 1.12; }
  h2 { font-size: 20px; }
  .ds-card, .card { padding: 18px; }
  .grid2 { grid-template-columns: 1fr; }
  .row { gap: 8px; }
  .btn, .ds-btn { padding: 9px 12px; font-size: 13px; }
  .flashwrap { padding: 12px 14px 0; }
}

/* Buttons in a row: gracefully wrap to next line. */
.row, .ds-row { min-width: 0; }
.row > *, .ds-row > * { min-width: 0; }

/* Typography rendering. */
body {
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
}

/* Scrollbar (webkit) — subtle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ds-line-strong);
  border-radius: 10px;
  border: 2px solid var(--ds-paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ds-muted); }


/* Shared top-left module switcher */
.moduleSwitcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.moduleSwitcher__button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
.moduleSwitcher__menu{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:180px;
  padding:6px;
  border:1px solid var(--ds-line);
  border-radius:14px;
  background:var(--ds-surface);
  box-shadow:var(--ds-shadow-2);
  z-index:80;
}
.moduleSwitcher:hover .moduleSwitcher__menu,
.moduleSwitcher:focus-within .moduleSwitcher__menu,
.moduleSwitcher.is-open .moduleSwitcher__menu{
  display:grid;
  gap:4px;
}
.moduleSwitcher__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:var(--ds-ink);
  text-decoration:none;
  font-family:var(--ds-font-sans);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.moduleSwitcher__item:hover{
  background:var(--ds-stamp);
  color:var(--ds-ink);
  text-decoration:none;
}
.moduleSwitcher__item.is-active::after{
  content:"✓";
  color:var(--ds-accent);
  font-weight:800;
}

/* Unified Workforce / Recruitment account management */
.dsAccountPage{display:grid;gap:18px;max-width:1280px;margin:0 auto;width:100%}
.dsAccountHeader h1{margin:0 0 4px;font-size:clamp(1.7rem,3vw,2.25rem)}
.dsAccountCard{background:#fff;border:1px solid var(--ds-border,#e4e7ec);border-radius:14px;padding:22px;box-shadow:0 1px 3px rgba(16,24,40,.05)}
.dsAccountCard__title{font-weight:750;font-size:1.15rem;margin-bottom:16px}
.dsAccountForm,.dsAccountRecord{display:grid;gap:16px}
.dsAccountGrid{display:grid;gap:12px}.dsAccountGrid--identity{grid-template-columns:repeat(3,minmax(0,1fr))}.dsAccountGrid--record{grid-template-columns:repeat(3,minmax(0,1fr))}
.dsField,.dsAccountPage .field{display:grid;gap:6px}.dsField>label{font-size:.82rem;font-weight:650;color:#344054}
.dsPermissionRow{display:flex;gap:22px;flex-wrap:wrap;align-items:center;padding:12px 14px;background:#f8fafc;border:1px solid #e4e7ec;border-radius:10px}
.dsCheck{display:inline-flex;gap:9px;align-items:center;font-size:.9rem;font-weight:600}.dsCheck input{width:17px;height:17px}
.dsLocationChecklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:4px}
.dsLocationOption{position:relative;display:flex;gap:9px;align-items:center;min-height:42px;padding:9px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;cursor:pointer;font-size:.9rem}
.dsLocationOption:hover{background:#f8fafc}.dsLocationOption input{position:absolute;opacity:0;pointer-events:none}.dsLocationTick{display:grid;place-items:center;width:20px;height:20px;border:1px solid #98a2b3;border-radius:5px;color:transparent;font-weight:800;background:#fff}
.dsLocationOption:has(input:checked){border-color:#7b68ee;background:#f5f3ff}.dsLocationOption input:checked+.dsLocationTick{background:#7b68ee;border-color:#7b68ee;color:#fff}.dsLocationOption:has(input:disabled){opacity:.48;cursor:not-allowed}
.dsAccountList{display:grid;gap:14px}.dsAccountRecord{border:1px solid #e4e7ec;border-radius:12px;padding:16px;background:#fff}.dsAccountRecord__summary{display:flex;gap:12px;align-items:center}.dsAccountRecord__summary>div:nth-child(2){flex:1;min-width:0}.dsAccountAvatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f3f1ff;color:#5947d6;font-weight:800}
.dsReadOnlyField{min-height:42px;display:flex;align-items:center;padding:9px 12px;border:1px solid #e4e7ec;border-radius:9px;background:#f8fafc;color:#475467}.dsAccountActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media(max-width:900px){.dsAccountGrid--identity,.dsAccountGrid--record{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dsAccountCard{padding:16px}.dsAccountGrid--identity,.dsAccountGrid--record{grid-template-columns:1fr}.dsLocationChecklist{grid-template-columns:1fr}.dsPermissionRow{align-items:flex-start;flex-direction:column;gap:10px}}