/* ALFT officer workspace. Every rule is scoped to the workspace. */
.workspace {
  --workspace-ink: #172d49;
  --workspace-muted: #617086;
  --workspace-rule: #e3e9f0;
  --workspace-navy: #142c48;
  --workspace-teal: #147d78;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100dvh;
  background: #f4f7fb;
  color: var(--workspace-ink);
  font-size: 14px;
  line-height: 1.6;
}
.workspace *, .workspace *::before, .workspace *::after { box-sizing: border-box; }
.workspace a { color: inherit; text-decoration: none; }
.workspace button { font: inherit; cursor: pointer; }
.workspace svg { width: 20px; height: 20px; flex-shrink: 0; }
.workspace :is(a, button, summary, [tabindex]):focus-visible { outline: 3px solid #c98d24; outline-offset: 3px; }
.workspace h1, .workspace h2, .workspace p { margin: 0; }
.workspace-sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100dvh; padding: 28px 18px 20px; background: var(--workspace-navy); color: #fff; overflow-y: auto; }
.workspace .workspace-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 26px; }
.workspace-brand-mark { display: grid; place-items: center; width: 38px; height: 42px; border: 1px solid #fff6; border-radius: 11px; color: #e7c176; font-size: 24px; font-weight: 700; }
.workspace-brand strong { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.workspace-brand strong span { font-weight: 400; font-size: 17px; }
.workspace-brand small { display: block; color: #becbd9; font-size: 13px; }
.workspace-scope { display: flex; gap: 10px; align-items: center; padding: 13px 11px; border: 1px solid #ffffff20; border-radius: 9px; background: #ffffff05; }
.workspace-scope-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; background: #ffffff0d; color: #b4d2da; }
.workspace-scope strong { display: block; font-size: 14px; }
.workspace-scope div > span { display: block; font-size: 12px; color: #b9c8d7; }
.workspace-menu { margin-top: 24px; }
.workspace-menu summary { display: none; }
.workspace-nav-group { margin-bottom: 23px; }
.workspace-nav-group > p { margin: 0 11px 8px; font-size: 12px; font-weight: 600; color: #bac9d7; letter-spacing: 1px; }
.workspace .workspace-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 11px; margin: 3px 0; border: 0; border-radius: 7px; background: transparent; color: #d4deea; font-size: 14px; text-align: left; }
.workspace-nav-link svg { width: 18px; height: 18px; color: #afc4d8; }
.workspace .workspace-nav-link:hover { background: #ffffff0c; color: #fff; }
.workspace .workspace-nav-link.active { background: #ffffff14; color: #fff; box-shadow: inset 3px 0 0 #e0ba72; font-weight: 600; }
.workspace-nav-link.active svg { color: #e8c789; }
.workspace-nav-count { display: grid; place-items: center; min-width: 20px; height: 20px; margin-left: auto; padding: 0 5px; border-radius: 5px; background: #ffffff12; font-family: Arial, sans-serif; font-size: 12px; }
.workspace-sidebar-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 18px 8px 0; border-top: 1px solid #ffffff17; }
.workspace-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #2f4762; font-size: 12px; font-weight: 700; }
.workspace-sidebar-footer strong { display: block; font-size: 13px; }
.workspace-sidebar-footer small { display: block; color: #bac9d7; font-size: 12px; }
.workspace-main { min-width: 0; }
.workspace-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; padding: 15px 36px; border-bottom: 1px solid var(--workspace-rule); background: #fff; }
.workspace-breadcrumb { display: flex; align-items: center; gap: 13px; font-size: 13px; color: var(--workspace-muted); }
.workspace-breadcrumb strong { color: var(--workspace-ink); font-weight: 500; }
.workspace .workspace-back-link { display: inline-flex; gap: 7px; align-items: center; font-size: 13px; color: var(--workspace-muted); }
.workspace-back-link svg { width: 15px; height: 15px; }
.workspace-content { max-width: 1500px; margin: 0 auto; padding: 32px 36px 20px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.workspace-eyebrow { color: var(--workspace-teal); font-family: Arial, sans-serif; font-size: 11px; letter-spacing: 1.8px; font-weight: 700; }
.workspace-heading h1 { margin: 6px 0 7px; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.35; font-weight: 700; letter-spacing: -.5px; }
.workspace-heading div > p:last-child { font-size: 14px; color: var(--workspace-muted); }
.workspace .workspace-primary-link, .workspace-primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 1px solid var(--workspace-navy); border-radius: 7px; background: var(--workspace-navy); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.workspace-primary-link svg, .workspace-primary-button svg { width: 16px; height: 16px; }
.workspace .workspace-primary-link:hover, .workspace-primary-button:hover { background: #254361; }
.workspace-demo-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 24px; padding: 11px 14px; border: 1px solid #dce6ec; border-radius: 7px; background: #edf3f7; color: #526b80; }
.workspace-demo-notice svg { width: 16px; height: 16px; margin-top: 2px; }
.workspace-demo-notice p { font-size: 12px; line-height: 1.8; }
.workspace-demo-notice strong { padding-right: 6px; color: #35566e; }
.workspace-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 29px; }
.workspace-stat { padding: 19px 20px 16px; border: 1px solid var(--workspace-rule); border-radius: 10px; background: #fff; }
.workspace-stat-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--workspace-muted); font-size: 13px; }
.workspace-stat-label svg { width: 16px; height: 16px; color: #8296aa; }
.workspace-stat > strong { display: block; margin: 9px 0 3px; color: var(--workspace-ink); font-family: Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1.25; }
.workspace-stat > span { display: block; color: var(--workspace-muted); font-size: 11px; }
.workspace-stat > .workspace-number-green { color: #15816a; }
.workspace-stat > .workspace-number-amber { color: #a27322; }
.workspace-stat > .workspace-number-red { color: #b55458; }
.workspace-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.workspace-section-heading h2 { font-size: 14px; font-weight: 600; }
.workspace-section-heading > span { color: var(--workspace-muted); font-size: 12px; }
.workspace-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 27px; }
.workspace-task { display: flex; align-items: center; gap: 11px; width: 100%; padding: 16px 14px; border: 1px solid var(--workspace-rule); border-radius: 9px; background: #fff; color: var(--workspace-ink); text-align: left; }
.workspace-task:hover { border-color: #9bbbc4; background: #fbfdfd; }
.workspace-task > svg { width: 15px; height: 15px; margin-left: auto; color: #71879a; }
.workspace-task-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; background: #edf4f7; color: #477b8a; }
.workspace-task-icon svg { width: 18px; height: 18px; }
.workspace-task-amber { background: #fcf4e6; color: #a67e38; }
.workspace-task-copy { min-width: 0; }
.workspace-task-copy strong { display: block; font-size: 13px; font-weight: 600; }
.workspace-task-copy > span { display: block; margin-top: 3px; color: var(--workspace-muted); font-size: 11px; }
.workspace-overview-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.workspace-card { min-width: 0; padding: 23px; border: 1px solid var(--workspace-rule); border-radius: 10px; background: #fff; }
.workspace-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.workspace-card-heading h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.workspace-card-heading h2 svg { width: 17px; height: 17px; }
.workspace-card-heading > svg { width: 18px; height: 18px; color: #7b8da1; }
.workspace-card-heading > button { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--workspace-teal); font-size: 12px; }
.workspace-card-heading button svg { width: 14px; height: 14px; }
.workspace-card-description { margin: 3px 0 20px !important; color: var(--workspace-muted); font-size: 12px; }
.workspace-province { margin-top: 16px; }
.workspace-province > div:first-child { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; font-size: 13px; }
.workspace-province strong { font-size: 13px; font-weight: 600; }
.workspace-province strong span { color: var(--workspace-muted); font-size: 12px; font-weight: 400; }
.workspace-progress { height: 6px; border-radius: 9px; background: #edf1f6; overflow: hidden; }
.workspace-progress > div { height: 100%; border-radius: inherit; background: #3a7c91; }
.workspace-summary { margin: 0; }
.workspace-summary > div { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #edf0f5; }
.workspace-summary dt { color: #596d83; font-size: 13px; }
.workspace-summary dd { margin: 0; font-size: 13px; font-weight: 600; }
.workspace-summary dd span { color: var(--workspace-muted); font-size: 12px; font-weight: 400; }
.workspace .workspace-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 19px; color: var(--workspace-teal); font-size: 13px; }
.workspace-card-link svg { width: 15px; height: 15px; }
.workspace-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 31px; padding-top: 16px; border-top: 1px solid var(--workspace-rule); color: #6d7b90; font-size: 12px; }
.workspace-footer a { display: inline-flex; align-items: center; gap: 5px; }
.workspace-footer svg { width: 14px; height: 14px; }
.workspace-table-card { padding: 0; overflow: hidden; }
.workspace-table-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 20px 23px; }
.workspace-table-heading h2 { font-size: 14px; font-weight: 600; }
.workspace-table-heading p { margin-top: 3px; color: var(--workspace-muted); font-size: 12px; }
.workspace-record-count { padding: 4px 9px; border-radius: 5px; background: #f0f4f8; color: #62758a; font-size: 12px; white-space: nowrap; }
.workspace-table-scroll { overflow-x: auto; scrollbar-width: thin; }
.workspace-table { width: 100%; min-width: 840px; border-collapse: collapse; font-size: 13px; text-align: left; }
.workspace-table th { padding: 13px 18px; border-top: 1px solid var(--workspace-rule); border-bottom: 1px solid var(--workspace-rule); background: #f7f9fc; color: #697d93; font-size: 12px; font-weight: 500; white-space: nowrap; }
.workspace-table td { padding: 17px 18px; border-bottom: 1px solid #edf1f5; vertical-align: middle; }
.workspace-table tbody tr:last-child td { border-bottom: 0; }
.workspace-table tbody tr:hover { background: #fcfdff; }
.workspace-company-name { display: block; min-width: 200px; max-width: 300px; font-size: 13px; font-weight: 500; }
.workspace-code { font-family: Arial, sans-serif; color: #62768c; font-size: 12px; white-space: nowrap; }
.workspace-table-secondary { display: block; margin-top: 3px; color: var(--workspace-muted); font-size: 12px; overflow-wrap: anywhere; }
.workspace-table .badge { font-size: 11px; white-space: nowrap; }
.workspace-table-actions { display: flex; align-items: center; gap: 6px; }
.workspace-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 10px; border: 1px solid #dce4ed; border-radius: 6px; background: #fff; color: #486279; font-size: 12px !important; white-space: nowrap; }
.workspace-action-button:hover { border-color: #9cabbc; background: #f5f8fb; }
.workspace-action-danger { color: #a65156; }
.workspace-case-status { background: #eaf1f8; color: #42668b; }
.workspace-case-status.is-closed { background: #e3f3ec; color: #277b60; }
.workspace-case-status.is-pending { background: #f9f0df; color: #947124; }
.workspace-section-note { margin: 16px 0 0 !important; color: var(--workspace-muted); font-size: 12px; }
.workspace-empty { display: flex; flex-direction: column; align-items: center; padding: 62px 20px; border: 1px solid var(--workspace-rule); border-radius: 10px; background: #fff; text-align: center; }
.workspace-empty > svg { width: 35px; height: 35px; color: #8fa8bd; margin-bottom: 15px; }
.workspace-empty h2 { font-size: 16px; }
.workspace-empty p { max-width: 410px; margin: 8px 0 22px; font-size: 14px; color: var(--workspace-muted); }
.workspace-empty-cell { padding: 30px !important; color: var(--workspace-muted); text-align: center; }
.workspace-application-list, .workspace-alert-list { display: grid; gap: 16px; }
.workspace-application-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.workspace-application-header h2 { font-size: 16px; }
.workspace-application-header .badge { font-size: 12px; flex-shrink: 0; }
.workspace-application-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 25px; margin: 20px 0; padding: 18px 0; border-top: 1px solid var(--workspace-rule); border-bottom: 1px solid var(--workspace-rule); }
.workspace-application-details dt { color: var(--workspace-muted); font-size: 12px; }
.workspace-application-details dd { margin: 3px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.workspace-application-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
.workspace-application-actions p { color: var(--workspace-muted); font-size: 12px; }
.workspace-application-actions > div { display: flex; gap: 8px; }
.workspace-alert { border-left: 3px solid #557f9a; }
.workspace-alert.is-expired { border-left-color: #b96365; }
.workspace-alert.is-expiring { border-left-color: #bc903c; }
.workspace-alert ul { list-style: none; padding: 0; margin: 15px 0 0; }
.workspace-alert li { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 0; border-top: 1px solid var(--workspace-rule); }
.workspace-alert li:last-child { padding-bottom: 0; }
.workspace-alert li strong { display: block; font-size: 14px; font-weight: 500; }
.workspace-alert li span { display: block; margin-top: 3px; color: var(--workspace-muted); font-size: 12px; }
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 220px minmax(0, 1fr); }
  .workspace-topbar { padding: 15px 25px; }
  .workspace-content { padding: 27px 25px 20px; }
  .workspace-stats { gap: 10px; }
  .workspace-stat { padding: 15px 13px; }
  .workspace-task-grid { grid-template-columns: 1fr; gap: 9px; }
  .workspace-task { padding: 13px 16px; }
}
@media (max-width: 900px) {
  .workspace { display: block; }
  .workspace-sidebar { position: static; height: auto; padding: 18px 20px 12px; overflow: visible; }
  .workspace .workspace-brand { padding: 0 0 15px; }
  .workspace-scope, .workspace-sidebar-footer { display: none; }
  .workspace-menu { margin-top: 0; }
  .workspace-menu summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid #ffffff21; font-size: 14px; cursor: pointer; list-style: none; }
  .workspace-menu summary::-webkit-details-marker { display: none; }
  .workspace-menu:not([open]) summary > span { transform: rotate(-90deg); }
  .workspace-nav-group { margin: 8px 0 14px; }
  .workspace-nav-group > p { margin: 0 0 7px; }
  .workspace-menu nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
  .workspace .workspace-nav-link { padding: 9px; font-size: 13px; }
  .workspace-topbar { min-height: 55px; }
  .workspace-content { padding-top: 24px; }
}
@media (max-width: 620px) {
  .workspace-sidebar { padding: 16px 18px 10px; }
  .workspace-menu nav { display: block; }
  .workspace-nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 7px; margin: 9px 0 14px; }
  .workspace-nav-group > p { grid-column: 1 / -1; }
  .workspace-nav-link svg { width: 16px; height: 16px; }
  .workspace-topbar { gap: 10px; padding: 12px 18px; }
  .workspace-breadcrumb { gap: 8px; font-size: 12px; }
  .workspace .workspace-back-link { font-size: 12px; white-space: nowrap; }
  .workspace-content { padding: 23px 18px 18px; }
  .workspace-heading { display: block; margin-bottom: 17px; }
  .workspace-heading h1 { font-size: 25px; }
  .workspace-heading div > p:last-child { font-size: 13px; }
  .workspace-heading > a { margin-top: 16px; }
  .workspace-demo-notice { padding: 11px; margin-bottom: 20px; }
  .workspace-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
  .workspace-stat { padding: 15px; }
  .workspace-stat-label { font-size: 12px; }
  .workspace-stat > strong { font-size: 29px; }
  .workspace-section-heading { display: block; }
  .workspace-section-heading > span { display: block; margin-top: 2px; }
  .workspace-overview-grid { grid-template-columns: 1fr; gap: 15px; }
  .workspace-card { padding: 19px; }
  .workspace-table-card { padding: 0; }
  .workspace-table-heading { padding: 18px; align-items: flex-start; }
  .workspace-table-heading p { max-width: 205px; }
  .workspace-footer { gap: 10px; font-size: 11px; }
  .workspace-footer a { white-space: nowrap; }
  .workspace-application-header h2 { font-size: 14px; }
  .workspace-application-details { grid-template-columns: 1fr; gap: 12px; }
  .workspace-application-actions > div { width: 100%; flex-wrap: wrap; }
  .workspace-alert .workspace-card-heading { align-items: flex-start; }
  .workspace-alert .workspace-card-heading h2 { font-size: 14px; }
  .workspace-alert li { align-items: flex-start; }
  .workspace-alert li strong { font-size: 13px; }
  .workspace-empty { padding: 44px 18px; }
}

@media (min-width: 901px) {
  .workspace-menu:not([open]) summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; color: #d4deea; cursor: pointer; font-size: 12px; list-style: none; }
}
