:root {
  --portal-blue: #1239f5;
  --portal-blue-dark: #0927bd;
  --portal-purple: #3d00ff;
  --portal-ink: #172334;
  --portal-muted: #66758a;
  --portal-line: #d8dee8;
  --portal-bg: #f1f3f6;
  --portal-card: #ffffff;
  --portal-success: #85bd31;
  --portal-danger: #e94242;
  --portal-radius: 9px;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--portal-ink);
  background: var(--portal-bg);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--portal-bg); font-size: 14px; }
a { color: var(--portal-blue); text-decoration: none; }
button, input { font: inherit; }

.portal-header {
  align-items: center;
  background: var(--portal-blue);
  color: white;
  display: flex;
  height: 52px;
  justify-content: space-between;
  padding: 0 20px;
}
.portal-brand { color: white; font-size: 12px; font-weight: 600; letter-spacing: -.2px; }
.portal-header-actions { align-items: center; display: flex; gap: 15px; }
.portal-icon { color: white; font-size: 17px; line-height: 1; }
.portal-avatar {
  align-items: center; background: #edf3ff; border-radius: 50%; color: var(--portal-blue);
  display: flex; font-size: 10px; font-weight: 700; height: 23px; justify-content: center; width: 23px;
}

.portal-main { margin: 0 auto; max-width: 1035px; padding: 18px 18px 48px; }
.portal-page-title { border-bottom: 1px solid #cbd3df; color: var(--portal-blue); font-size: 23px; margin: 0 0 14px; padding-bottom: 14px; }
.portal-section-heading { align-items: center; display: flex; justify-content: space-between; margin: 0 0 13px; }
.portal-section-heading h2 { font-size: 18px; margin: 0; }
.portal-view-all { font-size: 11px; font-weight: 700; }

.announcement-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.announcement-card, .portal-panel { background: var(--portal-card); border: 1px solid #e2e6ec; border-radius: var(--portal-radius); box-shadow: 0 3px 7px #1c2b3d12; }
.announcement-card { min-height: 218px; overflow: hidden; padding: 0 14px 13px; }
.announcement-visual { align-items: center; background: #fff; display: flex; height: 87px; justify-content: center; margin: 0 -14px 12px; overflow: hidden; }
.announcement-visual strong { color: #aeb8c3; font-size: 17px; }
.announcement-visual.is-image { background: linear-gradient(155deg, #d8f4f3, #fff3db); }
.announcement-visual.is-image::after { content: "🏃🏻‍♀️  🏃🏽  🏃🏻‍♂️  🏃🏽‍♀️"; font-size: 25px; white-space: nowrap; }
.announcement-title-row { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
.announcement-title { font-size: 11px; font-weight: 700; margin: 0; }
.status-pill { background: #e9f7e7; border-radius: 8px; color: #55a34b; font-size: 8px; padding: 3px 6px; }
.announcement-summary { font-size: 9px; line-height: 1.5; margin: 20px 0 16px; }
.announcement-meta { font-size: 8px; line-height: 1.3; }
.announcement-meta strong { display: block; }
.date-pill { background: #4161ed; border-radius: 8px; color: white; display: inline-block; font-size: 8px; margin-top: 5px; padding: 3px 6px; }

.portal-divider { border: 0; border-top: 1px solid #d7dce4; margin: 17px 0; }
.portal-panel { padding: 17px 14px; }
.portal-panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.portal-panel-heading h2 { font-size: 19px; margin: 0; }
.portal-search { border: 1px solid #cbd4df; border-radius: 3px; color: var(--portal-ink); height: 31px; padding: 0 10px; width: 205px; }
.portal-search::placeholder { color: #7d8998; font-size: 10px; }
.portal-button { background: var(--portal-blue); border: 0; border-radius: 4px; color: white; cursor: pointer; font-size: 11px; font-weight: 700; padding: 10px 18px; }
.portal-button:hover { background: var(--portal-blue-dark); }
.portal-button.secondary { background: var(--portal-purple); }

.portal-action-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-action-card { align-items: center; background: var(--portal-card); border: 1px solid #e2e6ec; border-radius: var(--portal-radius); box-shadow: 0 3px 7px #1c2b3d12; color: var(--portal-ink); display: flex; gap: 13px; min-height: 96px; padding: 16px; transition: border-color .15s, transform .15s; }
.portal-action-card:hover { border-color: var(--portal-blue); transform: translateY(-1px); }
.portal-action-icon { align-items: center; background: #edf1ff; border-radius: 50%; color: var(--portal-blue); display: flex; font-size: 27px; height: 52px; justify-content: center; width: 52px; }
.portal-action-copy { display: flex; flex: 1; flex-direction: column; gap: 5px; }
.portal-action-copy strong { font-size: 15px; }
.portal-action-copy small { color: var(--portal-muted); font-size: 11px; }
.portal-action-arrow { color: var(--portal-blue); font-size: 28px; line-height: 1; }
.portal-messages { margin-bottom: 14px; }
.portal-message { border-radius: 4px; font-size: 12px; margin: 0 0 7px; padding: 9px 11px; }
.portal-message.success { background: #e9f7e7; color: #347c35; }
.portal-message.error { background: #fff0ef; color: #a62821; }
.detail-panel { padding: 18px; }
.detail-intro { color: var(--portal-muted); font-size: 12px; margin: -4px 0 20px; }
.profile-details { border-top: 1px solid var(--portal-line); margin: 0; }
.profile-details div { border-bottom: 1px solid var(--portal-line); display: grid; gap: 16px; grid-template-columns: minmax(130px, .35fr) 1fr; padding: 13px 0; }
.profile-details dt { color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.profile-details dd { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.application-panel { margin-top: 18px; }
.application-table-wrapper { overflow-x: auto; }
.application-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.application-table th, .application-table td { border-bottom: 1px solid var(--portal-line); padding: 11px 8px; text-align: left; }
.application-table th { color: var(--portal-muted); font-size: 10px; text-transform: uppercase; }
.application-table tbody tr:last-child td { border-bottom: 0; }
.application-status { border-radius: 10px; display: inline-block; font-size: 10px; font-weight: 700; padding: 5px 9px; }
.application-status.status-pending { background: #fff3db; color: #9a6500; }
.application-status.status-ongoing { background: #e9efff; color: var(--portal-blue); }
.application-status.status-connected { background: #e9f7e7; color: #347c35; }
.application-status.status-deleted { background: #f2e8e8; color: #8b3c3c; }
.business-customer-list { display: grid; gap: 14px; }
.business-customer-card { border: 1px solid var(--portal-line); border-radius: 7px; padding: 15px; }
.business-customer-heading { align-items: flex-start; display: flex; gap: 14px; justify-content: space-between; }
.business-customer-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.business-label { color: var(--portal-muted); font-size: 10px; margin: 0 0 4px; text-transform: uppercase; }
.business-customer-heading h2 { color: var(--portal-blue); font-size: 17px; margin: 0; }
.business-alias { background: #edf1ff; border-radius: 12px; color: var(--portal-blue); font-size: 11px; padding: 6px 10px; }
.business-profit-centers h3 { font-size: 12px; margin: 18px 0 7px; }
.business-profit-centers ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.business-profit-centers li { background: #f1f3f6; border-radius: 12px; font-size: 11px; padding: 5px 9px; }
.alias-form { border-top: 1px solid var(--portal-line); margin-top: 17px; padding-top: 14px; }
.alias-form label { color: var(--portal-muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.alias-form label span { font-weight: 400; }
.alias-form-controls { display: flex; gap: 8px; }
.alias-form-controls input { border: 1px solid #cbd4df; border-radius: 4px; height: 35px; min-width: 0; padding: 0 9px; width: 100%; }
.empty-state { color: var(--portal-muted); font-size: 13px; margin: 0; }

.portal-breadcrumb { color: #57677a; font-size: 10px; margin: 0 0 10px; }
.portal-breadcrumb span { color: #1d2b3d; font-weight: 700; }
.permit-panel { padding: 17px 13px 20px; }
.permit-table { border-collapse: collapse; font-size: 9px; margin-top: 31px; width: 100%; }
.permit-table th { border-bottom: 1px solid #cbd3dc; font-size: 9px; padding: 0 13px 10px; text-align: left; }
.permit-table td { border-bottom: 1px solid #e5e9ef; padding: 11px 13px; }
.permit-table tbody tr:last-child td { border-bottom: 1px solid #dce2e9; }
.permit-table .reference { color: var(--portal-purple); }
.permit-table .approved { color: var(--portal-success); }
.permit-table .submitted { color: #ff833d; }
.permit-table .urgent { color: var(--portal-danger); }
.history-icon { color: var(--portal-blue); font-size: 16px; }
.pagination { align-items: center; display: flex; font-size: 9px; gap: 5px; justify-content: flex-end; margin-top: 10px; }
.page-number { align-items: center; border: 1px solid #d8dfe8; border-radius: 3px; display: flex; height: 24px; justify-content: center; min-width: 24px; }
.page-number.active { background: var(--portal-blue); border-color: var(--portal-blue); color: white; }

.login-page { align-items: center; background: linear-gradient(135deg, #b1c5ff 0%, #4875ee 38%, #152bb2 100%); display: flex; justify-content: center; min-height: 100vh; overflow: hidden; position: relative; }
.login-page::before, .login-page::after { content: ""; inset: -20%; position: absolute; transform: rotate(25deg); }
.login-page::before { background: linear-gradient(110deg, transparent 17%, #86aaf5aa 17.2%, #86aaf5aa 31%, transparent 31.2%, transparent 55%, #2135ba99 55.2%, #2135ba99 71%, transparent 71.2%); }
.login-page::after { background: linear-gradient(70deg, transparent 24%, #467be9aa 24.2%, #467be9aa 40%, transparent 40.2%, transparent 73%, #1d42c5aa 73.2%, #1d42c5aa 84%, transparent 84.2%); }
.login-card { background: #f9fafc; border-radius: 4px; box-shadow: 0 14px 30px #10257d2b; max-width: 394px; padding: 35px 24px 45px; position: relative; width: calc(100% - 32px); z-index: 1; }
.login-title { color: var(--portal-purple); font-size: 30px; font-weight: 300; letter-spacing: -1px; margin: 0 0 6px; text-align: center; }
.login-title strong { font-weight: 800; }
.login-context { color: #66758a; font-size: 12px; font-weight: 700; margin: 0 0 27px; text-align: center; text-transform: uppercase; }
.form-field { display: block; font-size: 14px; margin-bottom: 19px; }
.form-field span { display: block; margin-bottom: 4px; }
.form-field input { background: white; border: 1px solid #c8d0da; border-radius: 4px; height: 54px; outline: none; padding: 0 11px; width: 100%; }
.form-field input:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; }
.login-options { align-items: center; display: flex; justify-content: space-between; margin: 26px 0 30px; }
.remember { align-items: center; color: #506177; display: flex; gap: 9px; }
.remember input { appearance: none; border: 1px solid #c8d0da; border-radius: 4px; height: 25px; margin: 0; width: 25px; }
.remember input:checked { background: var(--portal-purple); box-shadow: inset 0 0 0 5px white; }
.forgot { color: var(--portal-purple); font-weight: 700; }
.login-submit { background: var(--portal-purple); border: 0; border-radius: 4px; color: white; cursor: pointer; font-weight: 700; height: 42px; width: 100%; }
.login-terms { border-top: 1px solid #d8dde4; color: #1c314e; font-size: 12px; line-height: 1.8; margin: 40px 0 0; padding-top: 18px; text-align: center; }
.login-error { background: #fff0ef; border: 1px solid #f2b3af; border-radius: 4px; color: #a62821; font-size: 12px; margin-bottom: 16px; padding: 10px; }

@media (max-width: 720px) {
  .announcement-grid { grid-template-columns: 1fr; }
  .announcement-card { min-height: 190px; }
  .portal-panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .portal-search { width: 100%; }
  .permit-panel { overflow-x: auto; }
  .permit-table { min-width: 650px; }
  .portal-main { padding-left: 12px; padding-right: 12px; }
}
.portal-logout-form { display: contents; }
.portal-icon-button { background: transparent; border: 0; cursor: pointer; padding: 0; }
.login-microsoft { align-items: center; display: flex; gap: 8px; justify-content: center; text-decoration: none; }
.microsoft-mark { font-size: 19px; line-height: 1; }
.login-help { color: #66758a; font-size: 12px; line-height: 1.5; margin: 16px 0 0; text-align: center; }


.workforce-create-panel { margin-bottom: 18px; }
.workforce-create-panel h2 { font-size: 19px; margin: 0 0 5px; }
.workforce-user-form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workforce-user-form .form-field { margin: 0; }
.workforce-user-form .form-field span { color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.workforce-user-form .form-field input { height: 37px; }
.workforce-user-form .portal-button { justify-self: start; }
.workforce-user-count { color: var(--portal-muted); font-size: 11px; }
.workforce-table-wrapper { overflow-x: auto; }
.workforce-user-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.workforce-user-table th, .workforce-user-table td { border-bottom: 1px solid var(--portal-line); padding: 10px; text-align: left; vertical-align: top; }
.workforce-user-table th { color: var(--portal-muted); font-size: 10px; text-transform: uppercase; }
.workforce-user-table td:last-child { font-family: Consolas, monospace; font-size: 10px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .workforce-user-form { grid-template-columns: 1fr; } }

.password-panel { margin-top: 18px; }
.password-form { max-width: 480px; }
.password-form .form-field { margin-bottom: 14px; }
.password-form .form-field span { color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.password-form .form-field input { border: 1px solid #cbd4df; border-radius: 4px; height: 37px; padding: 0 9px; width: 100%; }
.password-form .form-field input:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; outline: none; }
.password-help { color: var(--portal-muted); font-size: 11px; margin: 0 0 14px; }

.manage-users-panel { margin-bottom: 18px; }
.manage-users-panel h1 { font-size: 20px; margin: 0; }
.manage-user-form { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.manage-user-form .form-field { margin: 0; }
.manage-user-form .form-field span { color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.manage-user-form .form-field small { font-weight: 400; }
.manage-user-form input, .manage-user-form select { background: #fff; border: 1px solid #cbd4df; border-radius: 4px; height: 37px; padding: 0 9px; width: 100%; }
.manage-user-form input:focus, .manage-user-form select:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; outline: none; }
.manage-user-submit { align-items: center; display: flex; gap: 12px; grid-column: 1 / -1; }
.manage-user-submit p { color: var(--portal-muted); font-size: 11px; margin: 0; }
.manage-users-list h2 { font-size: 19px; margin: 0; }
@media (max-width: 720px) { .manage-user-form { grid-template-columns: 1fr; } .manage-user-submit { align-items: flex-start; flex-direction: column; } }

.portal-action-icon svg { fill: currentColor; height: 27px; width: 27px; }
.manage-users-action { border-color: #cdd7ff; }

.manage-customer-list { display: grid; gap: 16px; }
.manage-customer-section { border: 1px solid var(--portal-line); border-radius: 8px; padding: 16px; }
.manage-customer-heading { align-items: flex-start; display: flex; gap: 16px; justify-content: space-between; }
.manage-customer-heading h2 { color: var(--portal-blue); font-size: 18px; margin: 0; }
.manage-customer-scope { color: var(--portal-muted); font-size: 11px; margin: 6px 0 0; }
.manage-profit-centers { border-top: 1px solid var(--portal-line); margin-top: 14px; padding-top: 12px; }
.manage-profit-centers ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 5px 0 0; padding: 0; }
.manage-profit-centers li { background: #edf1ff; border-radius: 12px; color: var(--portal-blue); font-size: 10px; padding: 5px 9px; }
.manage-account-table-wrapper { margin-top: 15px; }
.manage-user-modal { background: var(--portal-card); border: 0; border-radius: 10px; box-shadow: 0 18px 48px #16255466; color: var(--portal-ink); max-width: 780px; padding: 0; width: calc(100% - 32px); }
.manage-user-modal::backdrop { background: #14234c88; }
.manage-user-modal-form { padding: 22px; }
.manage-user-modal-heading { align-items: flex-start; border-bottom: 1px solid var(--portal-line); display: flex; justify-content: space-between; margin-bottom: 16px; padding-bottom: 14px; }
.manage-user-modal-heading h2 { font-size: 21px; margin: 0; }
.manage-user-modal-heading p { color: var(--portal-muted); font-size: 12px; margin: 5px 0 0; }
.manage-user-close { background: transparent; border: 0; color: var(--portal-blue); cursor: pointer; font-size: 26px; line-height: 1; padding: 0 4px; }
.manage-user-group { border: 0; border-top: 1px solid var(--portal-line); margin: 18px 0 0; padding: 16px 0 0; }
.manage-user-group:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.manage-user-group legend { color: var(--portal-blue); font-size: 13px; font-weight: 700; padding: 0 8px 0 0; }
.manage-user-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.manage-user-security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manage-user-modal .form-field { margin: 0; }
.manage-user-modal .form-field span { color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.manage-user-modal input, .manage-user-modal select { background: #fff; border: 1px solid #cbd4df; border-radius: 4px; height: 37px; padding: 0 9px; width: 100%; }
.manage-user-modal input:focus, .manage-user-modal select:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; outline: none; }
.manage-field-help { color: var(--portal-muted); display: block; font-size: 10px; margin-top: 5px; }
.manage-user-modal-actions { display: flex; gap: 9px; justify-content: flex-end; margin-top: 20px; }
.manage-user-modal-actions .manage-user-close { background: #e7ebf2; color: var(--portal-ink); font-size: 11px; padding: 10px 18px; }
@media (max-width: 720px) { .manage-customer-heading { flex-direction: column; } .manage-user-grid, .manage-user-security-grid { grid-template-columns: 1fr; } .manage-user-modal-form { padding: 16px; } }

.managed-user-edit-form .form-field, .workforce-user-edit-form .form-field { margin: 0; }
.managed-user-edit-form .form-field > span:first-child, .workforce-user-edit-form .form-field > span:first-child { color: var(--portal-muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.managed-user-edit-form input:not([type="checkbox"]), .managed-user-edit-form select, .workforce-user-edit-form input:not([type="checkbox"]), .workforce-user-edit-form select { background: #fff; border: 1px solid #cbd4df; border-radius: 4px; height: 37px; padding: 0 9px; width: 100%; }
.checkbox-field { align-items: center; color: var(--portal-ink) !important; display: flex !important; font-size: 12px !important; font-weight: 400 !important; gap: 6px; margin-top: 9px; }
.checkbox-field input { height: auto !important; width: auto !important; }
.managed-user-edit-form input:focus, .managed-user-edit-form select:focus, .workforce-user-edit-form input:focus, .workforce-user-edit-form select:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; outline: none; }

.manage-sync-statuses .application-status { white-space: nowrap; }
.application-status.status-failed { background: #fff0ef; color: #a62821; }

.login-different-account { color: var(--portal-purple); display: block; font-size: 12px; font-weight: 700; margin: 15px 0 0; text-align: center; }
.login-different-account:hover { text-decoration: underline; }

html.is-entra-loading, html.is-entra-loading * { cursor: wait !important; }
.entra-loading-overlay { align-items: center; background: #10255c99; display: flex; inset: 0; justify-content: center; position: fixed; z-index: 2000; }
.entra-loading-overlay[hidden] { display: none; }
.entra-loading-card { align-items: center; background: #fff; border-radius: 10px; box-shadow: 0 18px 45px #05133a66; display: flex; flex-direction: column; gap: 14px; max-width: 310px; padding: 28px 30px; text-align: center; width: calc(100% - 48px); }
.entra-loading-card p { color: var(--portal-ink); font-size: 14px; font-weight: 700; margin: 0; }
.entra-loading-spinner { animation: entra-loading-spin .9s linear infinite; border: 4px solid #dbe3ff; border-radius: 50%; border-top-color: var(--portal-blue); height: 38px; width: 38px; }
@keyframes entra-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .entra-loading-spinner { animation-duration: 2.5s; } }

.workforce-filter-form { align-items: flex-end; border-bottom: 1px solid var(--portal-line); display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; margin-bottom: 16px; padding-bottom: 16px; }
.workforce-filter-form .form-field { margin: 0; }
.workforce-filter-form .form-field span { color: var(--portal-muted); display: block; font-size: 11px; font-weight: 700; margin-bottom: 5px; }
.workforce-filter-form input { border: 1px solid #cbd4df; border-radius: 4px; height: 35px; min-width: 0; padding: 0 9px; width: 100%; }
.workforce-filter-form input:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 2px #1239f522; outline: none; }
.workforce-filter-actions { align-items: center; display: flex; gap: 7px; }
.workforce-filter-actions .portal-button { white-space: nowrap; }
@media (max-width: 720px) { .workforce-filter-form { grid-template-columns: 1fr; } .workforce-filter-actions { justify-content: flex-start; } }