/* V98: bounded dialogs, compact actions, readable dashboard charts. */
html {
  --hendar-dialog-edge: clamp(12px, 2vw, 24px);
  --hendar-dialog-height: min(86dvh, 52rem);
}
html #modalBackdrop.modal-backdrop {
  padding: var(--hendar-dialog-edge) !important;
  overflow: hidden !important;
}
html #modalBackdrop.modal-backdrop > .modal,
html .modal-backdrop > .modal,
html .hr-suite-drawer-layer .hr-suite-drawer,
html .cpay-dialog-layer > .cpay-dialog,
html dialog.eqv89-dialog,
html #requestDraftCenterV0948 > section {
  box-sizing: border-box !important;
  max-width: calc(100dvw - 2 * var(--hendar-dialog-edge)) !important;
  max-inline-size: calc(100dvw - 2 * var(--hendar-dialog-edge)) !important;
  max-height: min(var(--hendar-dialog-height), calc(100dvh - 2 * var(--hendar-dialog-edge))) !important;
  max-block-size: min(var(--hendar-dialog-height), calc(100dvh - 2 * var(--hendar-dialog-edge))) !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  margin: auto !important;
}
html #modalBackdrop.modal-backdrop > .modal > .modal-header {
  padding: 12px 16px !important;
  flex-shrink: 0 !important;
}
html #modalBackdrop.modal-backdrop > .modal > :is(form,.h98-modal-body) {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
html #modalBackdrop.modal-backdrop > .modal > .h98-modal-body { flex: 1 1 auto; padding: 12px 16px; }
html #modalBackdrop.modal-backdrop > .modal.h98-has-body { overflow: hidden !important; }
html #modalBackdrop.modal-backdrop > .modal > form.form-grid {
  padding: 12px 16px !important;
  gap: 10px 14px !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  align-items: start !important;
}
html #modalBackdrop.modal-backdrop > .modal :is(form,fieldset,details,section,label) { min-inline-size: 0; }
html #modalBackdrop.modal-backdrop > .modal fieldset {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--hendar-dialog-line);
  border-radius: 12px;
}
html #modalBackdrop.modal-backdrop > .modal fieldset legend { padding-inline: 6px; max-width: 100%; font-size: .82rem; }
html #modalBackdrop.modal-backdrop > .modal .form-actions {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 10px 0 6px !important;
  position: sticky !important;
  bottom: 0 !important;
  inset-inline: auto !important;
}
html #modalBackdrop.modal-backdrop > .modal .form-actions > :is(button,.button) {
  box-sizing: border-box !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: auto !important;
  padding: 7px 12px !important;
  font-size: .8rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
html #modalBackdrop.modal-backdrop > .modal .form-actions > [data-request-draft-status] { flex: 1 1 12rem !important; min-width: 0 !important; }
html #modalBackdrop.modal-backdrop > .modal textarea { min-height: 68px !important; }
html #modalBackdrop.modal-backdrop > #officialLetterModal #officialLetterBody { min-height: 220px !important; }
.h98-form-feedback { grid-column: 1/-1; margin: 0; padding: 9px 12px; border-radius: 9px; background: #edf7fc; color: #174665; }
.h98-form-feedback[data-error="true"] { background: #fff1f2; color: #a62121; }
.h98-form-feedback[hidden] { display: none !important; }

@media screen {
/* Action columns grow with their labels; never use full-width stacked controls. */
html :is(.row-actions,.h98-row-actions,.hr-suite-directory-actions,.hr-suite-action-group):not([hidden]):not(.hidden) {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  align-items: center !important; justify-content: flex-start !important;
  gap: 5px !important; width: max-content !important; max-width: 100% !important;
}
html td.h98-actions-cell { width: 1%; min-width: 230px; max-width: 400px; padding: 8px 10px !important; }
html td.h98-actions-cell > .h98-row-actions { width: 100% !important; }
html :is(td,.row-actions,.h98-row-actions,.hr-suite-directory-actions) :is(.row-action,.hr-suite-action-item,button.button):not([hidden]):not(.hidden) {
  display: inline-flex !important; flex: 0 0 auto !important;
  width: auto !important; inline-size: auto !important; min-width: 0 !important;
  min-height: 32px !important; height: auto !important; padding: 5px 9px !important;
  margin: 0 !important; line-height: 1.35 !important; font-size: .76rem !important; white-space: nowrap !important;
}
html :is(#employeesTable,#projectEmployeesTable,#hrSuiteDirectoryTableWrap) td { padding: 8px 10px !important; height: auto !important; }
html :is(#employeesTable,#projectEmployeesTable) :is(.employee-main,.employee-identity,.employee-row-identity) { min-height: 0 !important; }
html #hrSuiteLegacyBank,html #hrSuiteLegacyBank .hr-suite-legacy-register { display: none !important; }


html body #appShell :is(#workspaceTable,#hrSuiteDirectoryTableWrap,#tendersTable,#officialLettersTable,#correspondenceArchiveTable) td.h98-actions-cell :is(.row-actions,.h98-row-actions,.hr-suite-directory-actions):not([hidden]):not(.hidden) {
  display:flex!important; flex-flow:row wrap!important; gap:5px!important; width:max-content!important; max-width:24rem!important;
}
html body #appShell :is(#workspaceTable,#hrSuiteDirectoryTableWrap,#tendersTable,#officialLettersTable,#correspondenceArchiveTable) td.h98-actions-cell :is(button,a):not([hidden]):not(.hidden) {
  width:auto!important; inline-size:auto!important; flex:0 0 auto!important;
  min-width:0!important; min-height:32px!important; height:auto!important; max-height:none!important;
  padding:5px 9px!important; white-space:nowrap!important;
}
}
/* Keep the complete project card and chart labels inside their dashboard panels. */
html body #dashboardView .dashboard-panel:has(.portfolio-health-layout),
html body #dashboardView .dashboard-panel:has(#portfolioTrend),
html body #dashboardView article:has(> .portfolio-health-layout),
html body #dashboardView article:has(> #portfolioTrend) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
html body #dashboardView .portfolio-health-layout { display: flex !important; flex-wrap: wrap; gap: 14px !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; align-items: stretch !important; }
html body #dashboardView .single-project-health-card {
  grid-template: "status" auto "copy" auto "metrics" auto "action" auto / minmax(0,1fr) !important;
  box-sizing: border-box !important; display: grid !important; gap: 10px !important;
  width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important;
  padding: 16px !important; direction: rtl !important; text-align: right !important; border-radius: 14px !important;
}
html body #dashboardView .single-project-health-card > div > strong { display: block; font-size: clamp(1rem,1.3vw,1.35rem) !important; line-height: 1.5 !important; overflow-wrap: anywhere; }
html body #dashboardView .single-project-health-card > div > p { margin: 4px 0 0 !important; font-size: .78rem !important; }
html body #dashboardView .single-project-health-card > section { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 8px !important; }
html body #dashboardView .single-project-health-card > section > span { min-height: 0 !important; padding: 9px 10px !important; font-size: .7rem !important; }
html body #dashboardView .single-project-health-card > section b { font-size: 1.05rem !important; }
html body #dashboardView .single-project-health-card > em { display: block; margin: 0 !important; padding: 9px 12px !important; font-size: .85rem !important; line-height: 1.4 !important; }
html body #dashboardView #portfolioTrend,html body #dashboardView .portfolio-trend-bars { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
html body #dashboardView .portfolio-trend-bars { display: grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 12px !important; padding: 16px 8px 12px !important; }
html body #dashboardView .portfolio-trend-column { display: grid !important; grid-template-rows: 180px auto !important; gap: 10px !important; min-width: 0 !important; height: auto !important; }
html body #dashboardView .portfolio-trend-column > span { height: 180px !important; min-height: 0 !important; }
html body #dashboardView .portfolio-trend-column > small { display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important; font-size: .78rem !important; line-height: 1.5 !important; text-align: center !important; direction: ltr !important; unicode-bidi: isolate; white-space: nowrap; color: var(--text,#17384f) !important; }

html body #dashboardView #portfolioTrend {grid-template-rows:auto auto!important;gap:10px!important;}
html body #dashboardView .portfolio-trend-summary {display:grid!important;position:static!important;visibility:visible!important;opacity:1!important;min-height:48px!important;padding:8px!important;overflow:visible!important;}
.h98-bank-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; }
.h98-bank-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: 14px; }
.h98-bank-card { padding: 16px; border: 1px solid var(--line,#d5e0ea); border-radius: 14px; background: var(--surface,#fff); }
.h98-bank-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.h98-bank-card p { margin: 5px 0; overflow-wrap: anywhere; }
.h98-bank-accounts { display: grid; gap: 8px; margin: 12px 0; }
.h98-bank-account { padding: 10px; border: 1px solid var(--line,#d5e0ea); border-radius: 10px; }
.h98-bank-account dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; margin: 0 0 8px; font-size: .8rem; }
.h98-bank-account dd { margin: 0; overflow-wrap: anywhere; }
html dialog.eqv89-attendance-dialog { --hendar-current-dialog-width: 34rem; }
html dialog.h98-small-dialog { --hendar-current-dialog-width: 38rem; }
html .eqv89-fleet-card { height: auto !important; min-height: 0 !important; }
html .eqv89-fleet-card > header,html .eqv89-card-facts,html .eqv89-fleet-card > footer { padding: 12px !important; }
html .eqv89-attendance-dialog footer { flex-wrap: wrap; }
html body #hendarProjectVideoCallStage {
  inset: var(--hendar-dialog-edge) !important;
  width: auto !important; height: auto !important;
  max-height: calc(100dvh - 2 * var(--hendar-dialog-edge)) !important;
  border-radius: 14px !important;
}
html body #hendarRequiredRuntimeFailure {
  background: #fff !important; color: #17384f !important;
}
html body .employee-payroll-discard-prompt > div { overflow: auto !important; }
html body :is(#installHelpPanel,#hendarRuntimeDegradedNotice) { max-height: calc(100dvh - 24px) !important; overflow: auto !important; }
html body .hendar-chat-widget-v084 .hcw-drawer:has(.hcw-voice-call:not([hidden])) {
  height: min(34rem,calc(100dvh - 2 * var(--hendar-dialog-edge))) !important;
}
html body .hendar-chat-widget-v084 .hcw-voice-call {
  overflow: auto !important; justify-content: flex-start !important;
  padding: 24px 16px !important; gap: 18px !important;
}
@media(max-width:700px) {
  html { --hendar-dialog-edge: 12px; --hendar-dialog-height: calc(100dvh - 24px); }
  html #modalBackdrop.modal-backdrop > .modal > form.form-grid { grid-template-columns: minmax(0,1fr) !important; padding: 10px 12px !important; }
  html body #dashboardView .portfolio-trend-bars { gap: 6px !important; padding-inline: 0 !important; }
  html body #dashboardView .portfolio-trend-column > small { font-size: .7rem !important; }
  html body #dashboardView .single-project-health-card { padding: 12px !important; }
  html body #dashboardView .single-project-health-card > section { gap: 5px !important; }
  html body #dashboardView .single-project-health-card > section > span { padding: 8px 6px !important; }
  html body .project-chat-shell #projectChatRoster[role="dialog"] {
    inset: 8px 8px 8px auto !important;
    width: min(350px,calc(100% - 16px)) !important;
    height: auto !important; max-height: calc(100% - 16px) !important;
    border-radius: 12px !important;
  }
}
/* V99: lifecycle colours apply only to tender chips, including print. */
.status-pill.tender-status-pill[data-tender-status] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: none;
  flex: 0 0 auto;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  padding: 5px 9px;
  line-height: 1.35;
  /* Override the legacy generic success selector with multiple :not()s. */
  color: var(--tender-status-ink, #475569) !important;
  background: var(--tender-status-fill, #f1f5f9) !important;
  border: 1px solid var(--tender-status-border, #cbd5e1) !important;
}
.tender-status-pill[data-tender-status="PREPARING"] {
  --tender-status-ink: #1e40af;
  --tender-status-fill: #eff6ff;
  --tender-status-border: #bfdbfe;
}
.tender-status-pill[data-tender-status="SUBMITTED"] {
  --tender-status-ink: #166534;
  --tender-status-fill: #f0fdf4;
  --tender-status-border: #bbf7d0;
}
.tender-status-pill[data-tender-status="UNDER_REVIEW"] {
  --tender-status-ink: #92400e;
  --tender-status-fill: #fffbeb;
  --tender-status-border: #fde68a;
}
.tender-status-pill[data-tender-status="WON"] {
  --tender-status-ink: #115e59;
  --tender-status-fill: #f0fdfa;
  --tender-status-border: #99f6e4;
}
.tender-status-pill[data-tender-status="LOST"] {
  --tender-status-ink: #6b21a8;
  --tender-status-fill: #faf5ff;
  --tender-status-border: #e9d5ff;
}
.tender-status-pill[data-tender-status="CANCELLED"] {
  --tender-status-ink: #b91c1c;
  --tender-status-fill: #fef2f2;
  --tender-status-border: #fecaca;
}
.tender-status-pill[data-tender-status="CLOSED"] {
  --tender-status-ink: #334155;
  --tender-status-fill: #f1f5f9;
  --tender-status-border: #cbd5e1;
}