/* Layout shared by the RUN login, cloud queue and employee pages. */
html, body { max-width: 100%; }
body { overflow-x: hidden; }
.topbar { min-width: 0; gap: 12px; }
.topbar .brand, .topbar .top-actions, .topbar .employee-user { min-width: 0; }
.topbar .brand strong, .topbar .employee-user span { overflow-wrap: anywhere; }
.shell, .panel, .section-body, .job-form, .job-form label, .form-actions { min-width: 0; }
input, select, textarea { max-width: 100%; }
.table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
.section-head span:first-child { min-width: 0; flex-wrap: wrap; }
.section-head small { overflow-wrap: anywhere; }
.toast { max-width: calc(100vw - 32px); }

@media (max-width: 750px) {
  .employee-page .employee-layout { grid-template-rows: auto minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .topbar { height: auto; min-height: 58px; padding: 9px 12px; }
  .topbar .brand-mark { flex: none; }
  .topbar .brand strong { font-size: 13px; line-height: 1.25; }
  .shell { padding: 12px; }
  .section-head { gap: 8px; align-items: flex-start; }
  .section-head span:last-child { flex: none; }
  .form-actions { flex-wrap: wrap; justify-content: stretch; }
  .form-actions p, .form-actions button { width: 100%; }
  .login-page { padding: 12px; }
  .login-card { padding: 22px; }
  .employee-shell .employee-panel { padding: 14px; }
  .employee-account-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .employee-account-form label, .employee-account-form input, .employee-account-form button { width: 100%; min-width: 0; }
  .employee-account-head button { margin-left: 0; }
  .employee-permission-groups { grid-template-columns: minmax(0, 1fr); }
  .employee-page .employee-nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
  .employee-page .employee-nav button { flex: none; }
  .employee-page .employee-main, .employee-page .employee-content { min-width: 0; }
  .employee-page .employee-content { padding: 10px; }
  .employee-page .employee-heading > div, .employee-page .employee-actions { min-width: 0; }
  .employee-page .employee-actions { flex-wrap: wrap; }
  .employee-page .employee-toolbar label, .employee-page .employee-toolbar input[type=search] { min-width: 0; max-width: 100%; }
  .employee-page .employee-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  .employee-page .employee-column-menu > div { max-width: calc(100vw - 44px); }
}

@media (max-width: 380px) {
  .topbar .brand { gap: 6px; }
  .topbar .brand-mark.small { width: 30px; height: 30px; }
  .employee-topbar .employee-user { gap: 5px; }
  .employee-topbar .employee-user button { padding: 7px 8px; }
  .employee-page .employee-actions button { flex: 1 1 auto; }
  .employee-page .employee-heading { display: block; }
  .employee-page .employee-actions { margin-top: 10px; }
}