/* Static labels: keep every label above its field, with room for it */
.field-static { margin-top: 2rem; }
.field-legend {
  font-size: .875rem;
  font-weight: 600;
  margin-bottom: .5rem;
  padding: 0 .5rem;
}

.form-section + .form-section {
  border-top: 1px solid var(--bs-border-color, #ddd);
  padding-top: 2rem;
}

/* Keep multi-line help texts aligned with the label */
.field-static .form-text,
fieldset .form-text {
  display: block;
  padding: 0 .5rem;
}

/* Checkbox options with a short description under the label */
.checkbox-with-hint label {
  height: auto;
  line-height: 1.4;
}
.checkbox-hint {
  display: block;
  font-size: .8rem;
  font-weight: 400;
  color: var(--bs-secondary-color, #5c6f82);
}

.url-hints {
  background-color: var(--bs-light, #f5f7f9);
  border-left: 4px solid var(--bs-primary, #0066cc);
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
}
.url-hints ul { margin-bottom: 0; padding-left: 1.25rem; }

/* Organizational chart: indent units by depth */
.unit-name {
  display: inline-block;
  padding-left: calc(var(--depth, 0) * 1.25rem);
}

/* Ateneo logo (white on transparent) beside the application name */
.it-brand-wrapper .brand-logo {
  height: 56px;
  width: auto;
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid rgba(255, 255, 255, .5);
}
@media (max-width: 767.98px) {
  .it-brand-wrapper .brand-logo { height: 40px; }
}

/* Login: two-panel card centered on the page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  /* Dotted grid fading towards the edges */
  background-color: #f4f6f8;
  background-image:
    radial-gradient(ellipse at center, rgba(244, 246, 248, 0) 35%, #f4f6f8 85%),
    radial-gradient(circle, #8fa5bd 1.5px, transparent 2px);
  background-size: 100% 100%, 24px 24px;
  background-attachment: fixed;
}
.login-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 1016px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(23, 50, 77, .12);
}
.login-brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem;
  color: #fff;
  background: linear-gradient(160deg, #14406a 0%, #1f5f9e 60%, #2468ad 100%);
}
/* Decorative rings in the bottom-right corner */
.login-brand::before,
.login-brand::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.login-brand::before {
  width: 280px; height: 280px; right: -90px; bottom: -140px;
  border: 72px solid rgba(255, 255, 255, .08);
}
.login-brand::after {
  width: 136px; height: 136px; right: -18px; bottom: -68px;
  background: rgba(255, 255, 255, .06);
}
/* Dots on the blue panel too */
.login-brand > * { position: relative; }
.login-brand {
  background:
    radial-gradient(circle, rgba(255, 255, 255, .14) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
    linear-gradient(160deg, #14406a 0%, #1f5f9e 60%, #2468ad 100%);
}
.login-logo { width: 240px; height: auto; margin-bottom: 3rem; }
.login-eyebrow {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.login-title {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.login-subtitle { font-size: 1.125rem; margin-bottom: 1.5rem; }
.login-text { font-size: 1rem; line-height: 1.5; margin-bottom: 0; opacity: .92; }
.login-form { padding: 4rem 3.5rem; }
.login-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
.login-heading h1 { font-size: 2rem; margin: 0; }
.login-heading .login-eyebrow { margin-bottom: .25rem; }
.login-heading-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #e8f1fb;
}
.login-sso {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 1.5rem 0;
  padding: .9rem 1.5rem;
  font-size: 1rem;
  text-align: left;
}
.login-note {
  display: flex;
  gap: .75rem;
  padding: 1rem 1.25rem;
  font-size: .875rem;
  background: #e9f2fb;
  border-left: 4px solid #0066cc;
}
.login-note p { margin: 0; font-size: .875rem; line-height: 1.5; }
.login-note .icon { flex: none; fill: #17324d; }
.login-help-title { font-weight: 700; margin-bottom: .25rem; }
.login-help { font-size: .875rem; line-height: 1.4; color: #5d7083; }
.login-admin summary { font-size: .875rem; color: #5d7083; cursor: pointer; }
@media (max-width: 767.98px) {
  .login-card { grid-template-columns: 1fr; }
  .login-brand, .login-form { padding: 2rem 1.5rem; }
  .login-logo { width: 180px; margin-bottom: 2rem; }
  .login-title { font-size: 2rem; }
  .login-heading h1 { font-size: 1.5rem; }
}

/* Read-only impersonation banner, under the header */
.impersonation-bar {
  background: #ffe8a3;
  color: #3d2e00;
  border-bottom: 2px solid #e0a800;
}
.impersonation-bar .icon { fill: #3d2e00; }

/* Units page: centered quick search */
.unit-search { max-width: 720px; }

/* Applications list: secondary filters, collapsed unless in use */
.more-filters summary {
  color: #0066cc;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: .5rem;
}

/* Units table: the path is shown instead of the indentation when the rows are not in tree order */
.unit-path { display: none; }
.unit-table.is-flat .unit-path,
.unit-table.is-filtering .unit-path { display: block; }
.unit-table.is-flat .unit-name,
.unit-table.is-filtering .unit-name { padding-left: 0; }