/* ═══════════════════════════════════════════════════════════════════
   Cronac Give  ·  account_base.css
   Auth / account shell — login, org-select, password-reset pages.
   Requires: core/theme.css, core/reset.css, core/layout.css,
             core/utilities.css, components/*.css (loaded first).
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   SITE HEADER (auth shell)
   ══════════════════════════════════════════════════════════════════ */
.site-header {
  background:    var(--color-white);
  border-top:    3px solid var(--org-primary);
  border-bottom: 1px solid var(--color-border);
  position:      sticky;
  top:           0;
  z-index:       var(--z-header);
  box-shadow:    var(--shadow-sm);
}

.site-header__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
  gap:             var(--space-4);
}

/* Brand group: wordmark + separator + org name */
.site-header__brand-group {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

.site-header__brand {
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
}

.site-header__wordmark {
  font-family:    var(--font-display);
  font-size:      var(--text-lg);
  font-weight:    var(--font-bold);
  color:          var(--org-secondary);
  letter-spacing: -0.03em;
  line-height:    1;
}

.site-header__wordmark-accent {
  color: var(--org-primary);
}

.site-header__brand-sep {
  display:    block;
  width:      1px;
  height:     20px;
  background: var(--color-border);
  flex-shrink: 0;
}

.site-header__org-name {
  font-size:     var(--text-sm);
  font-weight:   var(--font-semi);
  color:         var(--color-text-muted);
  white-space:   nowrap;
  max-width:     180px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.site-header__end {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   SITE FOOTER (auth shell — light treatment)
   ══════════════════════════════════════════════════════════════════ */
.site-footer {
  background:  var(--color-surface-2);
  border-top:  1px solid var(--color-border);
  margin-top:  auto;
}

.site-footer__bottom {
  padding-block: var(--space-5);
}

.site-footer__bottom-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

.site-footer__legal {
  font-size:   var(--text-xs);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.site-footer__legal strong {
  color:       var(--color-text);
  font-weight: var(--font-semi);
}

.site-footer__links {
  display: flex;
  gap:     var(--space-5);
}

.site-footer__link {
  font-size:       var(--text-xs);
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--org-primary);
}

/* ══════════════════════════════════════════════════════════════════
   AUTH PAGE LAYOUT
   ══════════════════════════════════════════════════════════════════ */
.auth-shell {
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         var(--space-10) var(--space-6) var(--space-16);
  min-height:      calc(100vh - 64px - 53px);
}

/* ── Auth card ───────────────────────────────────────────────────── */
.auth-card {
  width:     100%;
  max-width: 440px;
}

.auth-card--wide {
  max-width: 600px;
}

.auth-card__header {
  text-align: center;
}

.auth-card__title {
  font-family:   var(--font-display);
  font-size:     var(--text-2xl);
  font-weight:   var(--font-semi);
  color:         var(--color-text);
  margin-bottom: var(--space-2);
}

.auth-card__subtitle {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.auth-card__body {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
}

.auth-card__footer {
  text-align: center;
}

.auth-card__footer-text {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}

/* ── Form layout within auth card ────────────────────────────────── */
.auth-submit {
  margin-top: var(--space-2);
}

/* ── Forgot link ─────────────────────────────────────────────────── */
.field__forgot-link {
  font-size:   var(--text-xs);
  font-weight: var(--font-medium);
  color:       var(--color-text-muted);
  transition:  color var(--transition-fast);
}

.field__forgot-link:hover {
  color: var(--org-primary);
}

/* ── Password toggle ─────────────────────────────────────────────── */
.field__password-wrapper {
  position: relative;
}

.field__password-wrapper .input {
  padding-right: var(--space-12);
}

.field__password-toggle {
  position:    absolute;
  right:       var(--space-3);
  top:         50%;
  transform:   translateY(-50%);
  background:  none;
  border:      none;
  padding:     var(--space-1);
  color:       var(--color-text-light);
  display:     flex;
  align-items: center;
  transition:  color var(--transition-fast);
}

.field__password-toggle:hover {
  color: var(--color-text-muted);
}

/* ── Checkbox label ──────────────────────────────────────────────── */
.field__checkbox-label {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  cursor:      pointer;
  user-select: none;
}

.field__checkbox {
  width:        16px;
  height:       16px;
  accent-color: var(--org-primary);
  cursor:       pointer;
  flex-shrink:  0;
}

.field__checkbox-text {
  font-size:   var(--text-sm);
  color:       var(--color-text);
  font-weight: var(--font-medium);
}

/* ── Form-level alert (not field-level) ──────────────────────────── */
.form-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--text-sm);
  font-weight:   var(--font-medium);
  border-left:   3px solid transparent;
}

.form-alert__icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.form-alert--error {
  background:   var(--color-error-bg);
  color:        var(--color-error);
  border-color: var(--color-error);
}

.form-alert--warning {
  background:   var(--color-warning-bg);
  color:        var(--color-warning);
  border-color: var(--color-warning);
}

.form-alert--success {
  background:   var(--color-success-bg);
  color:        var(--color-success);
  border-color: var(--color-success);
}

/* ══════════════════════════════════════════════════════════════════
   ORG SELECTION TILES
   ══════════════════════════════════════════════════════════════════ */
.org-tile-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--space-3);
  border:                none;
  padding:               0;
  margin-bottom:         var(--space-5);
}

.org-tile {
  cursor: pointer;
}

.org-tile__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  padding:        var(--space-5) var(--space-4);
  background:     var(--color-white);
  border:         2px solid var(--color-border);
  border-radius:  var(--radius-xl);
  text-align:     center;
  transition:     border-color var(--transition-fast),
                  box-shadow   var(--transition-fast),
                  background   var(--transition-fast);
}

.org-tile:hover .org-tile__inner {
  border-color: var(--org-primary);
  box-shadow:   var(--shadow-sm);
}

.org-tile--active .org-tile__inner,
.org-tile__radio:checked + .org-tile__inner {
  border-color: var(--org-primary);
  background:   var(--org-primary-light);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--org-primary) 20%, transparent);
}

.org-tile__radio:focus-visible + .org-tile__inner {
  outline: 3px solid var(--org-primary);
  outline-offset: 2px;
}

.org-tile__logo {
  width:        48px;
  height:       48px;
  object-fit:   contain;
  border-radius: var(--radius-md);
}

.org-tile__initials {
  width:            48px;
  height:           48px;
  border-radius:    var(--radius-full);
  background:       linear-gradient(135deg, var(--org-primary) 0%, var(--org-primary-dark) 100%);
  color:            var(--color-white);
  font-family:      var(--font-display);
  font-size:        var(--text-lg);
  font-weight:      var(--font-bold);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  letter-spacing:   -0.02em;
}

.org-tile__name {
  font-size:   var(--text-sm);
  font-weight: var(--font-semi);
  color:       var(--color-text);
  line-height: var(--leading-snug);
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .auth-shell {
    padding-block: var(--space-6) var(--space-10);
  }

  .auth-card__body  { padding: var(--space-5); }
  .auth-card__header { padding: var(--space-5); }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  .org-tile-grid          { grid-template-columns: 1fr; }
  .site-header__org-name  { display: none; }
  .site-header__brand-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════ */
@media print {
  .site-header,
  .site-footer,
  .btn,
  .messages-region { display: none !important; }
}