/* UniPay University — Phase 4 Manager production states */
.uni-p4-statebar {
  align-items: center;
  background: rgba(7, 17, 31, .82);
  border: 1px solid rgba(111, 231, 255, .24);
  border-radius: 14px;
  color: #dcecff;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 0 0 1rem;
  padding: .7rem .85rem;
}

.uni-p4-statebar > span,
.uni-p4-statebar > small {
  color: #9eb7cd;
}

.uni-p4-statebar > small {
  flex-basis: 100%;
  padding-left: 1.15rem;
}

.uni-p4-state-dot {
  background: #51d88a;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(81, 216, 138, .13);
  height: .58rem;
  width: .58rem;
}

.uni-p4-statebar.is-loading .uni-p4-state-dot {
  animation: uni-p4-pulse 1s ease-in-out infinite;
  background: #ffd166;
  box-shadow: 0 0 0 4px rgba(255, 209, 102, .13);
}

.uni-p4-statebar.is-error {
  border-color: rgba(255, 107, 129, .34);
}

.uni-p4-statebar.is-error .uni-p4-state-dot {
  background: #ff6b81;
  box-shadow: 0 0 0 4px rgba(255, 107, 129, .13);
}

.uni-p4-error-state .card {
  border-color: rgba(255, 107, 129, .3);
}

.u20-workspace-view {
  display: none;
}

.u20-workspace-view.active {
  display: block;
}

@keyframes uni-p4-pulse {
  50% { opacity: .42; transform: scale(.82); }
}

@media (max-width: 700px) {
  #managerPanel,
  #u20ManagerContent,
  #managerPanel .manager-module {
    max-width: 100%;
    min-width: 0;
  }

  #managerPanel,
  #u20ManagerContent {
    overflow-x: clip;
  }

  #managerPanel .u16-manager-institution-card,
  #u20ManagerContent .u16-manager-institution-card,
  #managerPanel .u14-institution-details,
  #u20ManagerContent .u14-institution-details,
  #managerPanel .u16-manager-head,
  #u20ManagerContent .u16-manager-head,
  #managerPanel .u16-proof-grid,
  #u20ManagerContent .u16-proof-grid,
  #managerPanel .u16-proof-grid > div,
  #u20ManagerContent .u16-proof-grid > div,
  #managerPanel .manager-module,
  #u20ManagerContent .manager-module,
  #managerPanel .card,
  #u20ManagerContent .card,
  #managerPanel .academic-tab-content,
  #u20ManagerContent .academic-tab-content,
  #managerPanel [class*="-view"],
  #u20ManagerContent [class*="-view"] {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  #managerPanel .u16-manager-head h1,
  #managerPanel .u16-manager-head h2,
  #managerPanel .u16-manager-head h3,
  #managerPanel .u16-proof-grid span,
  #managerPanel .u16-proof-note,
  #u20ManagerContent .u16-manager-head h1,
  #u20ManagerContent .u16-manager-head h2,
  #u20ManagerContent .u16-manager-head h3,
  #u20ManagerContent .u16-proof-grid span,
  #u20ManagerContent .u16-proof-note {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .uni-p4-statebar {
    align-items: flex-start;
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: .75rem;
    padding: .62rem .7rem;
  }

  .uni-p4-statebar > span:not(.uni-p4-state-dot),
  .uni-p4-statebar > small {
    grid-column: 2;
    overflow-wrap: anywhere;
    padding-left: 0;
  }

  #managerPanel .table-wrap,
  #u20ManagerContent .table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  #managerPanel table.table,
  #u20ManagerContent table.table {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  .uni-p4-statebar.is-loading .uni-p4-state-dot { animation: none; }
}