/* ============================================================================
   HMEx Assistant — Design System
   Power Pages custom CSS + living style-guide stylesheet · v1.1
   Single source of truth for tokens and components (.hx-* classes).

   Upload via: Styling -> theme ellipsis (...) -> Manage CSS -> Upload.
   Load LAST so it wins over theme.css. Do not touch portalbasictheme.css
   or bootstrap.min.css. The HTML style guide links this same file, so editing
   here updates the guide automatically.
   ============================================================================ */

/* Optional web font (true Source Sans fidelity). Leave commented to stay on the
   Segoe UI fallback (Fluent-native, zero load). Self-host or uncomment:        */
/* @import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap'); */


/* ============================================================
   HMEx DESIGN TOKENS  —  single source of truth
   Paste this :root block into Power Pages custom CSS.
   ============================================================ */
:root{
  /* Brand & surface */
  --hmex-navy:#243149;
  --hmex-table-navy:#31415F;
  --hmex-action:#0078D4;
  --hmex-action-hover:#106EBE;
  --hmex-app-bg:#F5F5F5;
  --hmex-card-bg:#FFFFFF;
  --hmex-card-bg-readonly:#FAFAFA;     /* detail-page info cards */
  --hmex-accent-card-bg:#F8FBFF;       /* classification / “choose options” cards */
  --hmex-accent-card-border:#D6E4F5;
  --hmex-border:#E1DFDD;
  --hmex-input-border:#C8C6C4;
  --hmex-row-alt:#FAF9F8;
  --hmex-row-hover:#F3F8FD;
  --hmex-row-selected:#E5F1FB;

  /* Text */
  --hmex-text:#323130;
  --hmex-text-secondary:#605E5C;
  --hmex-text-on-dark:#FFFFFF;

  /* Hazard / status semantics */
  --hmex-success:#107C10;
  --hmex-warning:#FFB900;               /* FILL / BORDER / ICON only — never as text */
  --hmex-warning-icon:#C77700;          /* amber icon inside the warning badge */
  --hmex-warning-text:#3D2E00;          /* dark neutral — AA on amber, never muddy */
  --hmex-high-concern:#E2520A;          /* nudged toward orange to separate from Critical */
  --hmex-critical:#A4262C;
  /* No utility orange: orange is reserved for hazard meaning. Print/Export use Secondary. */

  /* Badge fills */
  --hmex-badge-success-bg:#DFF6DD;
  --hmex-badge-warning-bg:#FDECC8;
  --hmex-badge-critical-bg:#FDE7E9;
  --hmex-badge-info-bg:#DEECF9;

  /* Type */
  --hmex-font:"Source Sans Pro","Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;

  /* Spacing scale (4px base) — ADDED */
  --hmex-space-1:4px;
  --hmex-space-2:8px;
  --hmex-space-3:12px;
  --hmex-space-4:16px;
  --hmex-space-5:24px;
  --hmex-space-6:32px;
  --hmex-space-7:48px;

  /* Radius scale — ADDED */
  --hmex-radius-sm:4px;    /* inputs, badges */
  --hmex-radius:6px;       /* buttons */
  --hmex-radius-lg:8px;    /* cards */

  /* Elevation — ADDED */
  --hmex-shadow-card:0 1px 2px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --hmex-shadow-pop:0 4px 12px rgba(0,0,0,.12);

  /* Focus ring — ADDED (AA / Title II) */
  --hmex-focus:0 0 0 2px #fff, 0 0 0 4px var(--hmex-action);
}

/* ---- base ---- */
*{box-sizing:border-box;}
body{
  margin:0;background:var(--hmex-app-bg);color:var(--hmex-text);
  font-family:var(--hmex-font);font-size:14px;line-height:20px;
  -webkit-font-smoothing:antialiased;
}

/* ============================================================
   ACTUAL COMPONENT CLASSES  —  these ARE the system
   ============================================================ */
.hx-btn{font-family:var(--hmex-font);font-size:14px;font-weight:600;line-height:20px;
  height:32px;min-width:40px;padding:0 18px;border-radius:var(--hmex-radius);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .12s,box-shadow .12s;}
.hx-btn:focus-visible{outline:none;box-shadow:var(--hmex-focus);}
.hx-btn--primary{background:var(--hmex-action);color:#fff;}
.hx-btn--primary:hover{background:var(--hmex-action-hover);}
.hx-btn--secondary{background:#fff;color:var(--hmex-text);border-color:var(--hmex-input-border);font-weight:500;}
.hx-btn--secondary:hover{background:var(--hmex-row-alt);}
.hx-btn--danger{background:var(--hmex-critical);color:#fff;}
.hx-btn--danger:hover{background:#8A1F24;}
.hx-btn:disabled,.hx-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;}

.hx-field{display:flex;flex-direction:column;gap:6px;}
.hx-label{font-size:13px;font-weight:600;line-height:18px;color:var(--hmex-text);}
.hx-label .req{color:var(--hmex-critical);margin-left:2px;}
.hx-input{font-family:var(--hmex-font);font-size:14px;line-height:20px;color:var(--hmex-text);
  height:40px;padding:0 12px;border:1px solid var(--hmex-input-border);border-radius:var(--hmex-radius-sm);
  background:#fff;transition:border-color .12s,box-shadow .12s;}
.hx-input::placeholder{color:var(--hmex-text-secondary);}
.hx-input:focus{outline:none;border-color:var(--hmex-action);box-shadow:0 0 0 2px rgba(0,120,212,.25);}
.hx-input:disabled{background:var(--hmex-row-alt);color:var(--hmex-text-secondary);}
.hx-input--error{border-color:var(--hmex-critical);}
.hx-help{font-size:12px;line-height:16px;color:var(--hmex-text-secondary);}
.hx-help--error{color:var(--hmex-critical);}

.hx-search{position:relative;}
.hx-search .bi{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--hmex-text-secondary);font-size:18px;}
.hx-search input{width:100%;height:48px;font-size:16px;line-height:22px;padding:0 16px 0 44px;
  border:1px solid var(--hmex-input-border);border-radius:var(--hmex-radius);background:#fff;font-family:var(--hmex-font);}
.hx-search input:focus{outline:none;border-color:var(--hmex-action);box-shadow:0 0 0 2px rgba(0,120,212,.25);}

.hx-select-wrap{position:relative;}
.hx-select{width:100%;height:40px;padding:0 38px 0 12px;font-family:var(--hmex-font);font-size:14px;color:var(--hmex-text);
  border:1px solid var(--hmex-input-border);border-radius:var(--hmex-radius-sm);background:#fff;appearance:none;}
.hx-select:focus{outline:none;border-color:var(--hmex-action);box-shadow:0 0 0 2px rgba(0,120,212,.25);}
.hx-select-wrap .bi{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--hmex-text-secondary);}
.hx-addrow{display:flex;gap:12px;align-items:flex-end;}
.hx-addrow .hx-field{flex:1;}
.hx-selectlist{margin-top:14px;border:1px solid var(--hmex-input-border);border-radius:var(--hmex-radius-sm);background:#fff;overflow:hidden;}
.hx-selectlist__empty{padding:14px 16px;color:#8b8987;font-size:13px;}
.hx-selectlist__item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--hmex-border);font-size:14px;}
.hx-selectlist__item:first-child{border-top:0;}
.hx-selectlist__item .name{flex:1;color:var(--hmex-text);}
.hx-selectlist__item .grp{font-size:11px;font-weight:600;color:var(--hmex-text-secondary);white-space:nowrap;}
.hx-selectlist__item .rm{background:none;border:0;color:var(--hmex-action);cursor:pointer;font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;padding:2px 4px;}
.hx-selectlist__item .rm:hover{text-decoration:underline;color:var(--hmex-action-hover);}
.hx-selectlist__item .rm:focus-visible{outline:none;box-shadow:var(--hmex-focus);border-radius:3px;}

table.hx-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--hmex-border);
  border-radius:var(--hmex-radius-lg);overflow:hidden;}
.hx-table thead th{background:var(--hmex-table-navy);color:#fff;text-align:left;
  font-size:13px;font-weight:600;line-height:10px;text-transform:none;padding:12px 16px;}
.hx-table tbody td{font-size:14px;line-height:16px;padding:0px 5px;border:0px;
  border-left:3px solid transparent;}
.hx-table tbody tr:nth-child(even){background:var(--hmex-row-alt);}
.hx-table tbody tr:hover td{background:var(--hmex-row-hover);}
.hx-table tbody tr:hover td:first-child{border-left-color:var(--hmex-action);}
.hx-table tbody tr.is-selected td{background:var(--hmex-row-selected);font-weight:600;}
.hx-table tbody tr.is-selected td:first-child{border-left:4px solid var(--hmex-action);}
.hx-link{color:var(--hmex-action);text-decoration:none;font-weight:500;}
.hx-link:hover{color:var(--hmex-action-hover);text-decoration:underline;}
.hx-link:focus-visible{outline:none;box-shadow:var(--hmex-focus);border-radius:2px;}

.hx-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;line-height:16px;
  padding:3px 10px;border-radius:12px;}
.hx-badge--success{background:var(--hmex-badge-success-bg);color:var(--hmex-success);}
.hx-badge--warning{background:var(--hmex-badge-warning-bg);color:var(--hmex-warning-text);}
.hx-badge--warning .bi{color:var(--hmex-warning-icon);}
.hx-badge--critical{background:var(--hmex-badge-critical-bg);color:var(--hmex-critical);}
.hx-badge--info{background:var(--hmex-badge-info-bg);color:var(--hmex-action);}

.hx-card{background:var(--hmex-card-bg);border:1px solid var(--hmex-border);border-radius:var(--hmex-radius-lg);
  box-shadow:var(--hmex-shadow-card);overflow:hidden;}
.hx-card__head{font-size:18px;font-weight:600;line-height:24px;color:var(--hmex-navy);padding:16px 20px;
  border-bottom:1px solid var(--hmex-border);}
.hx-card__body{padding:20px;}
.hx-card--readonly{background:var(--hmex-card-bg-readonly);}
.hx-card--accent{background:var(--hmex-accent-card-bg);border-color:var(--hmex-accent-card-border);}
.hx-card--accent .hx-card__head{color:var(--hmex-action);border-bottom-color:var(--hmex-accent-card-border);}

.hx-steps{display:flex;align-items:center;gap:0;}
.hx-step{display:flex;align-items:center;gap:10px;flex:1;}
.hx-step:last-child{flex:none;}
.hx-step .dot{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--hmex-input-border);
  color:var(--hmex-text-secondary);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;}
.hx-step .txt{font-size:13px;font-weight:500;color:var(--hmex-text-secondary);}
.hx-step .bar{height:2px;background:var(--hmex-input-border);flex:1;margin:0 8px;}
.hx-step.is-done .dot{background:var(--hmex-success);border-color:var(--hmex-success);color:#fff;}
.hx-step.is-active .dot{background:var(--hmex-action);border-color:var(--hmex-action);color:#fff;}
.hx-step.is-active .txt{color:var(--hmex-action);font-weight:600;}
.hx-step.is-done .bar,.hx-step.is-active .bar{background:var(--hmex-action);}
.hx-wizard-nav{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--hmex-border);}


/* ============================================================================
   BOOTSTRAP 5 BRIDGE — styles native Power Pages markup (entity forms, lists,
   alerts). The site is migrating to Bootstrap 5. UNCOMMENT once BS5 is live and
   the old BS3 stylesheet is fully removed, then test one form and one list page.
   ============================================================================ */
/*
:root{
  --bs-primary:#0078D4;            --bs-primary-rgb:0,120,212;
  --bs-danger:#A4262C;             --bs-danger-rgb:164,38,44;
  --bs-success:#107C10;            --bs-success-rgb:16,124,16;
  --bs-warning:#FFB900;            --bs-warning-rgb:255,185,0;
  --bs-body-color:#323130;
  --bs-body-bg:#F5F5F5;
  --bs-border-color:#E1DFDD;
  --bs-link-color:#0078D4;         --bs-link-hover-color:#106EBE;
  --bs-border-radius:6px;          --bs-border-radius-sm:4px;  --bs-border-radius-lg:8px;
  --bs-body-font-family:var(--hmex-font);
}
.btn-primary{background-color:var(--hmex-action);border-color:var(--hmex-action);}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{background-color:var(--hmex-action-hover);border-color:var(--hmex-action-hover);}
.btn-danger{background-color:var(--hmex-critical);border-color:var(--hmex-critical);}
.btn-secondary,.btn-outline-secondary{background-color:#FFFFFF;color:var(--hmex-text);border-color:var(--hmex-input-border);}
.form-control,.form-select{border-color:var(--hmex-input-border);border-radius:var(--hmex-radius-sm);}
.form-label{font-size:13px;font-weight:600;color:var(--hmex-text);}
.card{border-color:var(--hmex-border);border-radius:var(--hmex-radius-lg);}
.table thead th{background-color:var(--hmex-table-navy);color:#FFFFFF;}
.alert-success{background-color:var(--hmex-badge-success-bg);border-color:var(--hmex-success);color:var(--hmex-success);}
.alert-warning{background-color:var(--hmex-badge-warning-bg);border-color:var(--hmex-warning);color:var(--hmex-warning-text);}
.alert-danger{background-color:var(--hmex-badge-critical-bg);border-color:var(--hmex-critical);color:var(--hmex-critical);}
.btn:focus-visible,.form-control:focus,.form-select:focus{box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px var(--hmex-action);border-color:var(--hmex-action);}
*/