/* Full-bleed workspace for the integrated STAFF and Embornals applications. */
main:has(> .embedded-application:not([hidden])) {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
}

.embedded-application {
  width: 100%;
  height: calc(100dvh - 121px);
  min-height: 620px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

.embedded-application-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.application-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 20px;
}

.application-access-card {
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  padding: 14px;
  background: #f8fbfe;
}

.application-access-card strong,
.application-access-card small {
  display: block;
}

.application-access-card small {
  color: #617386;
  margin-top: 3px;
}

.application-access-card label {
  margin-top: 12px;
}

.application-access-card button {
  width: 100%;
}

.application-access-card [role="status"] {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-size: .8rem;
}

body:has(main > .embedded-application:not([hidden])) .shell > footer,
body:has(main > .embedded-application:not([hidden])) > footer {
  display: none;
}

@media (min-width: 1500px) {
  main:has(> .embedded-application:not([hidden])) {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .application-access-grid {
    grid-template-columns: 1fr;
  }

  .embedded-application {
    height: calc(100dvh - 183px);
    min-height: 560px;
  }
}

/* Expand the existing frame without replacing it or reopening its session. */
.embedded-application{display:flex;flex-direction:column}
.embedded-application[hidden]{display:none!important}
.embedded-application-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;padding:8px 12px;background:#f4f8fb;border-bottom:1px solid #d7e2ec;color:#173e68}
.embedded-application-toolbar strong{font-size:.9rem}
.embedded-application-toggle{min-height:40px;padding:8px 12px;border:1px solid #c5d3df;border-radius:8px;background:#fff;color:#173e68;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer}
.embedded-application-toggle:focus-visible{outline:3px solid #e88a43;outline-offset:2px}
.embedded-application-frame{flex:1 1 0;min-height:0}
body:has(.embedded-application.is-expanded){overflow:hidden}
body:has(.embedded-application.is-expanded)>.sidebar,
body:has(.embedded-application.is-expanded) .shell>header{display:none}
.embedded-application.is-expanded{position:fixed;inset:0;z-index:10000;width:100%;height:100dvh;min-height:0;margin:0;border:0}
.embedded-application.is-expanded .embedded-application-toolbar{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}

/* STAFF and Embornals share the personal-permissions layout. */
#personal-permissions #application-permissions{display:contents}
#personal-permissions .application-access-grid{display:contents}
#personal-permissions .application-access-card{padding:0;border:0;border-radius:0;background:transparent;min-width:0}
#personal-permissions .application-access-card label{margin-top:0}
#personal-permissions .application-access-card button{width:auto;font-size:12px;padding:6px 10px;margin-top:6px}
#personal-permissions .application-access-card [role=status]:empty{display:none}

#personal-permissions .form-grid.permissions-grouped{display:flex;flex-direction:column;gap:16px}
#personal-permissions .permission-block{--permission-accent:#246b91;--permission-bg:#f1f7fc;margin:0;padding:14px 16px;border:1px solid #d7e3ec;border-left:4px solid var(--permission-accent);border-radius:10px;background:var(--permission-bg);min-width:0}
#personal-permissions .permission-block-resources{--permission-accent:#28795b;--permission-bg:#f0f8f3}
#personal-permissions .permission-block-environment{--permission-accent:#93701a;--permission-bg:#fffaf0}
#personal-permissions .permission-block-team{--permission-accent:#72509b;--permission-bg:#f7f3fc}
#personal-permissions .permission-block legend{padding:0 6px;font-weight:700;font-size:16px;color:var(--permission-accent)}
#personal-permissions .permission-block>p{font-size:12px;margin:0 0 12px}
#personal-permissions .permission-block-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#personal-permissions .permission-block-grid>label,#personal-permissions .application-access-card{display:block;margin:0;background:#fff;border:1px solid #dee6ed;border-radius:8px;padding:10px;font-size:13px}
#personal-permissions .permission-block select{width:100%;margin-top:7px}
#personal-permissions .permission-status{display:inline-block;margin-top:6px;font-size:11px;color:#73808b}
#personal-permissions label[data-permission-level=read] .permission-status{color:#176b91;font-weight:600}
#personal-permissions label[data-permission-level=write] .permission-status{color:#20734e;font-weight:600}
@media(max-width:600px){#personal-permissions .permission-block-grid{grid-template-columns:1fr}#personal-permissions .permission-block{padding:12px}}

#personal-permissions .form-grid.permissions-vertical{display:flex;flex-direction:column;gap:0;border:1px solid #d8e3ec;border-radius:10px;overflow:hidden}
#personal-permissions .permission-table-heading,#personal-permissions .permission-table-row{display:grid;grid-template-columns:minmax(0,1fr) 110px 100px;align-items:center;gap:8px;padding:12px;border:0;border-bottom:1px solid #e0e7ed;margin:0;border-radius:0}
#personal-permissions .permission-table-heading{background:#173e68;color:#fff;position:sticky;top:0;font-size:12px}
#personal-permissions .permission-table-heading strong:not(:first-child){text-align:center}
#personal-permissions .permission-table-row{background:#fff}
#personal-permissions .permission-table-row:nth-child(2n){background:#f5f8fb}
#personal-permissions .permission-table-row[data-permission-level=write]{border-left:4px solid #27815f}
#personal-permissions .permission-table-row[data-permission-level=read]{border-left:4px solid #287ba2}
#personal-permissions .permission-table-name{font-size:13px;font-weight:600;min-width:0}
#personal-permissions .permission-check-cell{display:flex!important;align-items:center;justify-content:center;margin:0!important;padding:8px!important;background:transparent!important;border:0!important}
#personal-permissions .permission-check-cell input{width:20px;height:20px;accent-color:#24765a;cursor:pointer}
#personal-permissions .permission-inherit{display:block;width:auto;font-size:10px;font-weight:400;padding:2px 0;border:0;background:transparent;color:#597b96;margin-top:4px}
#personal-permissions select[hidden]{display:none!important}
@media(max-width:480px){#personal-permissions .permission-table-heading,#personal-permissions .permission-table-row{grid-template-columns:minmax(0,1fr) 77px 72px;padding:10px 8px;gap:4px}}

#personal-permissions .permission-table-heading{order:-1}

#personal-permissions .permission-table-row{padding:6px 12px;min-height:44px}
#personal-permissions .permission-table-name{display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;line-height:1.25}
#personal-permissions .permission-inherit{display:inline-block;margin:0;padding:2px 0;font-size:10px;line-height:1.2}
#personal-permissions .permission-check-cell{padding:3px!important}
#personal-permissions .permission-check-cell input{margin:0;width:18px;height:18px}
#personal-permissions .permission-table-heading{padding:10px 12px}
@media(max-width:480px){#personal-permissions .permission-table-row{padding:6px 8px}.permission-table-name{gap:3px 6px}}