.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 24px;
  overflow: auto;
  color: #102f42;
  background:
    radial-gradient(circle at 15% 18%, rgba(40, 151, 98, 0.18), transparent 33%),
    radial-gradient(circle at 85% 82%, rgba(28, 97, 142, 0.2), transparent 36%),
    linear-gradient(145deg, #e8f0f4, #f8fafb 55%, #e8eff3);
}

.auth-gate[hidden] {
  display: none;
}

.auth-locked {
  overflow: hidden;
}

.auth-locked #app {
  display: none !important;
}

.auth-gate-card {
  width: min(100%, 430px);
  padding: 38px 34px 32px;
  border: 1px solid rgba(152, 176, 189, 0.62);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 26px 70px rgba(17, 49, 67, 0.18);
  text-align: center;
}

.auth-gate-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.auth-gate-eyebrow {
  margin: 18px 0 4px;
  color: #087a43;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.auth-gate h1 {
  margin: 0;
  font-size: clamp(27px, 6vw, 36px);
  line-height: 1.1;
}

.auth-gate-card > p:not(.auth-gate-eyebrow) {
  margin: 18px 0 24px;
  color: #536a79;
  font-size: 15px;
  line-height: 1.55;
}

.auth-gate button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  background: #087a43;
  box-shadow: 0 10px 24px rgba(8, 122, 67, 0.25);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.auth-gate button:disabled {
  cursor: wait;
  opacity: 0.66;
}

.auth-gate small {
  display: block;
  margin-top: 16px;
  color: #718593;
  font-size: 12px;
}

.auth-gate-status {
  min-height: 18px;
  margin: 12px 0 0 !important;
  color: #526b79 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.auth-gate-status.is-error {
  color: #a02227 !important;
}

.header-auth-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.sharepoint-login-button {
  min-height: 40px;
  border: 1px solid #087a43;
  border-radius: 999px;
  padding: 0 18px;
  color: #fff;
  background: #087a43;
  box-shadow: 0 7px 18px rgba(8, 122, 67, 0.25);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.sharepoint-login-button:hover {
  background: #066b3a;
}

.sharepoint-login-button:focus-visible {
  outline: 3px solid rgba(55, 183, 119, 0.35);
  outline-offset: 2px;
}

.sharepoint-login-button.is-signed-in {
  border-color: #9bd2b3;
  color: #07572f;
  background: #e9f7ef;
  box-shadow: none;
}

.sharepoint-login-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sharepoint-logout-button {
  min-height: 40px;
  border: 1px solid #d6a1a4;
  border-radius: 999px;
  padding: 0 16px;
  color: #8a1f22;
  background: #fff7f7;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.sharepoint-logout-button:hover {
  border-color: #b55b60;
  background: #fff0f0;
}

.sharepoint-logout-button:focus-visible {
  outline: 3px solid rgba(181, 91, 96, 0.25);
  outline-offset: 2px;
}

.sharepoint-logout-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.sharepoint-logout-button[hidden] {
  display: none;
}

.sharepoint-actions {
  display: grid;
  gap: 10px;
  margin: 16px 0 12px;
}

.sharepoint-connect-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 12px 14px;
  border: 1px solid #f0c38d;
  border-radius: 14px;
  color: #56320f;
  background: #fff6e8;
  box-shadow: 0 7px 20px rgba(89, 53, 15, 0.1);
}

.sharepoint-connect-banner > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.sharepoint-connect-banner > div > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sharepoint-connect-banner strong,
.sharepoint-connect-banner small {
  overflow-wrap: anywhere;
}

.sharepoint-connect-banner small {
  color: #77522c;
}

.sharepoint-connect-banner button {
  flex: none;
  min-height: 42px;
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  color: #fff;
  background: #087a43;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(8, 122, 67, 0.22);
}

.sharepoint-connect-banner.is-sharepoint-connected {
  color: #07572f;
  border-color: #9bd2b3;
  background: #e9f7ef;
}

.sharepoint-connect-banner.is-sharepoint-connected small {
  color: #347153;
}

.sharepoint-connect-banner.is-sharepoint-connected button {
  background: #17633a;
}

@media (max-width: 620px) {
  .header-auth-actions {
    gap: 6px;
  }

  .sharepoint-login-button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 12px;
  }

  .sharepoint-logout-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
  }

  .header-auth-actions .source-button {
    width: 38px;
    overflow: hidden;
    padding: 0 11px;
    color: transparent;
    gap: 0;
  }

  .header-auth-actions .source-button .status-dot {
    flex: none;
  }

  .sharepoint-connect-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .sharepoint-connect-banner button {
    width: 100%;
  }
}

.sharepoint-primary-button,
.sharepoint-test-button,
.sharepoint-setup-button {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.sharepoint-primary-button {
  color: #fff;
  background: #087a43;
  box-shadow: 0 8px 20px rgba(8, 122, 67, 0.22);
}

.sharepoint-test-button {
  color: #0b4a2d;
  background: #e5f5ec;
  border: 1px solid #b6dfc8;
}

.sharepoint-setup-button {
  color: #12364c;
  background: #fff;
  border: 1px solid #b9cad5;
}

.sharepoint-primary-button:disabled,
.sharepoint-test-button:disabled,
.sharepoint-setup-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.sharepoint-direct-status {
  margin: 0 0 12px;
  border: 1px solid #b9cad5;
  border-radius: 12px;
  padding: 11px 13px;
  color: #173042;
  background: #f1f5f8;
  font-size: 13px;
  line-height: 1.45;
}

.sharepoint-direct-status.is-progress {
  color: #56320f;
  border-color: #f0c38d;
  background: #fff6e8;
}

.sharepoint-direct-status.is-success {
  color: #07572f;
  border-color: #a9ddc0;
  background: #e9f7ef;
}

.sharepoint-direct-status.is-error {
  color: #8a1f22;
  border-color: #efb7b9;
  background: #fff0f0;
}

.sharepoint-test-result {
  margin: 0 0 14px;
  border-radius: 14px;
  padding: 13px 14px;
  color: #173042;
  background: #f1f5f8;
  border: 1px solid #d5e0e7;
  line-height: 1.45;
}

.sharepoint-test-result.is-success {
  color: #07572f;
  background: #e9f7ef;
  border-color: #a9ddc0;
}

.sharepoint-test-result.is-info {
  color: #174f73;
  background: #eaf3fb;
  border-color: #a8cbe3;
}

.sharepoint-test-result.is-error {
  color: #8a1f22;
  background: #fff0f0;
  border-color: #efb7b9;
}

.sharepoint-test-result strong,
.sharepoint-test-result span {
  display: block;
}

.sharepoint-test-result span + span {
  margin-top: 4px;
}

.desktop-sidebar .sidebar-footer.is-sharepoint-connected .status-dot,
#sourceButton.is-sharepoint-connected .status-dot,
.sharepoint-connect-banner.is-sharepoint-connected .status-dot {
  background: #19a55a;
  box-shadow: 0 0 0 4px rgba(25, 165, 90, 0.14);
}

.sharepoint-projects-panel {
  display: grid;
  gap: 16px;
}

.sharepoint-projects-panel[hidden] {
  display: none;
}

.sharepoint-projects-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sharepoint-projects-heading h2,
.sharepoint-projects-heading p {
  margin: 0;
}

.sharepoint-projects-heading h2 {
  margin-top: 2px;
}

.sharepoint-projects-heading #sharePointProjectsUpdated {
  margin-top: 6px;
  color: #607486;
  font-size: 13px;
}

.sharepoint-projects-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 9px;
}

.sharepoint-readonly-badge {
  border: 1px solid #a9ddc0;
  border-radius: 999px;
  padding: 7px 10px;
  color: #07572f;
  background: #e9f7ef;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#sharePointProjectsRefresh {
  min-height: 38px;
  border: 1px solid #b9cad5;
  border-radius: 11px;
  padding: 8px 12px;
  color: #12364c;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.sharepoint-write-test-button {
  min-height: 38px;
  border: 1px solid #087a43;
  border-radius: 11px;
  padding: 8px 12px;
  color: #fff;
  background: #087a43;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(8, 122, 67, 0.18);
}

.sharepoint-write-test-button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.sharepoint-write-status {
  border: 1px solid #b8d8c6;
  border-radius: 12px;
  padding: 11px 13px;
  color: #07572f;
  background: #edf8f2;
  font-size: 13px;
  line-height: 1.45;
}

.sharepoint-write-status.is-error {
  border-color: #efb7b9;
  color: #8a1f22;
  background: #fff0f0;
}

.project-elements-editor {
  display: grid;
  gap: 14px;
  margin: 22px 0 16px;
  border: 1px solid #cfe0d7;
  border-radius: 16px;
  padding: 16px;
  background: #f4faf7;
}

.project-elements-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.project-elements-heading h3,
.project-elements-heading p {
  margin: 0;
}

.project-elements-heading h3 {
  margin-top: 2px;
  color: #12364c;
  font-size: 17px;
}

.project-elements-heading > div > p:last-child {
  margin-top: 5px;
  color: #607486;
  font-size: 12px;
}

.project-element-add {
  flex: none;
  min-height: 40px;
  border: 1px solid #087a43;
  border-radius: 11px;
  padding: 8px 12px;
  color: #087a43;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.project-elements-editor-list {
  display: grid;
  gap: 10px;
}

.project-element-editor-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(180px, 1.5fr) 90px auto 36px;
  align-items: end;
  gap: 10px;
  border: 1px solid #d7e5dd;
  border-radius: 13px;
  padding: 12px;
  background: #fff;
}

.project-element-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-element-field span,
.project-element-halls legend {
  color: #526b7b;
  font-size: 11px;
  font-weight: 750;
}

.project-element-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  border: 1px solid #bdcdd6;
  border-radius: 9px;
  padding: 8px 10px;
  color: #12364c;
  background: #fff;
  font: inherit;
}

.project-element-halls {
  display: flex;
  gap: 5px;
  margin: 0;
  border: 0;
  padding: 0;
}

.project-element-halls legend {
  margin-bottom: 5px;
}

.project-element-halls label {
  position: relative;
  cursor: pointer;
}

.project-element-halls input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-element-halls span {
  display: grid;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  border: 1px solid #bdcdd6;
  border-radius: 9px;
  color: #526b7b;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
}

.project-element-halls input:checked + span {
  border-color: #087a43;
  color: #fff;
  background: #087a43;
  box-shadow: 0 4px 10px rgba(8, 122, 67, 0.2);
}

.project-element-remove {
  min-width: 36px;
  min-height: 38px;
  border: 1px solid #efb7b9;
  border-radius: 9px;
  color: #9b292d;
  background: #fff4f4;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.sharepoint-project-save-status {
  margin: 0 0 12px;
  border: 1px solid #b8d8c6;
  border-radius: 11px;
  padding: 10px 12px;
  color: #07572f;
  background: #edf8f2;
  font-size: 12px;
}

.sharepoint-project-save-status.is-error {
  border-color: #efb7b9;
  color: #8a1f22;
  background: #fff0f0;
}

#sharePointProjectsRefresh:disabled {
  cursor: wait;
  opacity: 0.6;
}

.sharepoint-projects-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sharepoint-projects-summary span {
  border-radius: 10px;
  padding: 8px 11px;
  color: #285169;
  background: #edf4f7;
  font-size: 12px;
  font-weight: 750;
}

.sharepoint-projects-list {
  display: grid;
  gap: 12px;
}

.sharepoint-project-card {
  overflow: hidden;
  border: 1px solid #d8e3e9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(18, 54, 76, 0.06);
}

.sharepoint-project-card summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.sharepoint-project-card summary::-webkit-details-marker {
  display: none;
}

.sharepoint-project-title,
.sharepoint-project-title strong,
.sharepoint-project-title small {
  display: block;
}

.sharepoint-project-title strong {
  color: #12364c;
  font-size: 15px;
}

.sharepoint-project-title small {
  margin-top: 4px;
  color: #6b7f8e;
  font-size: 12px;
}

.sharepoint-project-count {
  border-radius: 999px;
  padding: 7px 10px;
  color: #07572f;
  background: #e9f7ef;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.sharepoint-project-body {
  display: grid;
  gap: 12px;
  border-top: 1px solid #e3eaee;
  padding: 14px 16px 16px;
  background: #f8fbfc;
}

.sharepoint-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  color: #526b7b;
  font-size: 12px;
}

.sharepoint-elements-table {
  display: grid;
  gap: 6px;
}

.sharepoint-element-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(90px, 1.4fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e0e8ec;
  border-radius: 10px;
  padding: 9px 10px;
  color: #3f5c6e;
  background: #fff;
  font-size: 12px;
}

.sharepoint-element-row strong {
  color: #12364c;
}

.sharepoint-elements-empty {
  margin: 0;
  color: #738592;
  font-size: 12px;
}

@media (min-width: 1080px) {
  .sharepoint-projects-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/*
 * The desktop app shell is a strict two-column/two-row CSS grid.  Keeping the
 * quick-connect banner as a third direct grid child creates an implicit row
 * and pushes the navigation/footer into a narrow auto-placement track.  The
 * same connection state is already visible in the desktop header and sidebar,
 * so the full-width banner is only needed in the compact/mobile shell.
 */
@media (min-width: 1000px) {
  .sharepoint-connect-banner {
    display: none;
  }

  .desktop-sidebar .sidebar-footer > span:last-child {
    min-width: 0;
  }

  .desktop-sidebar .sidebar-footer strong,
  .desktop-sidebar .sidebar-footer small {
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 620px) {
  .sharepoint-projects-heading {
    display: grid;
  }

  .sharepoint-projects-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sharepoint-readonly-badge {
    grid-column: 1 / -1;
    text-align: center;
  }

  .sharepoint-element-row {
    grid-template-columns: 1fr auto;
  }

  .sharepoint-element-row span:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .project-elements-heading,
  .project-element-editor-row {
    display: grid;
  }

  .project-element-add {
    width: 100%;
  }

  .project-element-editor-row {
    grid-template-columns: 1fr 84px;
  }

  .project-element-name,
  .project-element-halls {
    grid-column: 1 / -1;
  }

  .project-element-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
}