/* Softphone app layout/shell. Builds on the HouseAccount tokens + component
 * sheets (do not edit those). Everything here consumes var(--ha-*) tokens.
 * Sections: alert, app shell, navbar, page header, calls table, dialpad +
 * in-call, auth screen. */

/* ————— Alert ————— */
.ha-alert {
  border-radius: var(--ha-radius-md); padding: var(--ha-space-3) var(--ha-space-4);
  background: var(--ha-danger-bg); color: var(--ha-danger);
  border: 1px solid var(--ha-danger); font-size: var(--ha-fs-small);
  margin-bottom: var(--ha-space-4);
}

/* ————— App shell ————— */
body.ha { margin: 0; background: var(--ha-surface-subtle); }
.app-main {
  max-width: 960px; margin: 0 auto;
  padding: var(--ha-space-10) var(--ha-space-6) var(--ha-space-16);
}

/* App links opt out of the global ".ha a" underline + link color. The selectors
   match ".ha a" specificity or beat it, and come later, so they win. */
.ha a.app-nav__brand, .ha a.app-nav__link, .ha a.calls-filter, .ha a.ha-btn {
  text-decoration: none;
}
.ha a.ha-btn { color: #fff; }
.ha a.app-nav__brand { color: #fff; }
.ha a.app-nav__link { color: rgba(255, 255, 255, .75); }
.ha a.app-nav__link--active { color: #fff; }
.ha a.calls-filter { color: var(--ha-ink-muted); }
.ha a.calls-filter--active { color: #fff; }

/* ————— Navbar ————— */
.app-nav { background: var(--ha-blue-primary); color: #fff; }
.app-nav__inner {
  max-width: 1120px; margin: 0 auto; height: 60px; padding: 0 var(--ha-space-6);
  display: flex; align-items: center; gap: var(--ha-space-6);
}
.app-nav__brand {
  display: inline-flex; align-items: center; gap: var(--ha-space-3);
  color: #fff; text-decoration: none; font-weight: var(--ha-weight-bold);
}
.app-nav__brand-icon {
  width: 36px; height: 36px; border-radius: var(--ha-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-blue-accent);
}
.app-nav__brand-name { font-size: var(--ha-fs-body-lg); }
.app-nav__links { display: flex; align-items: center; gap: var(--ha-space-2); }
.app-nav__link {
  color: rgba(255, 255, 255, .75); text-decoration: none;
  padding: 6px var(--ha-space-4); border-radius: var(--ha-radius-pill);
  font-size: var(--ha-fs-small); transition: background-color 120ms ease, color 120ms ease;
}
.app-nav__link:hover { color: #fff; }
.app-nav__link--active { background: rgba(255, 255, 255, .14); color: #fff; }
.app-nav__menu { margin-left: auto; position: relative; }
.app-nav__menu summary { list-style: none; }
.app-nav__menu summary::-webkit-details-marker { display: none; }
.app-nav__avatar {
  display: inline-flex; align-items: center; gap: var(--ha-space-1); cursor: pointer;
}
.app-nav__avatar-initials {
  width: 36px; height: 36px; border-radius: var(--ha-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ha-blue-accent); color: #fff;
  font-size: var(--ha-fs-small); font-weight: var(--ha-weight-medium);
}
.app-nav__avatar-initials--dark { background: var(--ha-blue-primary); }
.app-nav__dropdown {
  position: absolute; right: 0; top: calc(100% + var(--ha-space-2)); width: 260px;
  background: #fff; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  box-shadow: var(--ha-shadow-sheet); padding: var(--ha-space-2); z-index: 20;
}
.app-nav__identity {
  display: flex; align-items: center; gap: var(--ha-space-3);
  padding: var(--ha-space-3); border-bottom: 1px solid var(--ha-border-strong);
  margin-bottom: var(--ha-space-2);
}
.app-nav__email {
  font-size: var(--ha-fs-small); color: var(--ha-ink); word-break: break-all;
}
.app-nav__signout {
  display: flex; align-items: center; gap: var(--ha-space-2); width: 100%;
  padding: var(--ha-space-2) var(--ha-space-3); border: 0; border-radius: var(--ha-radius-sm);
  background: transparent; color: var(--ha-danger); font-family: inherit;
  font-size: var(--ha-fs-small); cursor: pointer; text-align: left;
}
.app-nav__signout:hover { background: var(--ha-danger-bg); }

/* ————— Page header ————— */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ha-space-4); margin-bottom: var(--ha-space-6);
}
.page-header__title { font-size: var(--ha-fs-h2); line-height: var(--ha-lh-h2); }
.page-header__count {
  font-size: var(--ha-fs-small); color: var(--ha-ink-muted); margin-top: var(--ha-space-1);
}

/* ————— Calls table ————— */
.calls-card {
  background: #fff; border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-md); box-shadow: var(--ha-shadow-card); overflow: hidden;
}
.calls-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ha-space-4); padding: var(--ha-space-5) var(--ha-space-6);
}
.calls-card__title { font-size: var(--ha-fs-body-lg); font-weight: var(--ha-weight-bold); }
.calls-filters { display: inline-flex; gap: var(--ha-space-2); }
.calls-filter {
  padding: 4px var(--ha-space-4); border-radius: var(--ha-radius-pill);
  border: 1px solid var(--ha-border); background: #fff; color: var(--ha-ink-muted);
  font-size: var(--ha-fs-small); text-decoration: none;
}
.calls-filter--active {
  background: var(--ha-blue-primary); border-color: var(--ha-blue-primary); color: #fff;
}
.calls-table { width: 100%; border-collapse: collapse; }
.calls-table th {
  text-align: left; padding: var(--ha-space-3) var(--ha-space-6);
  font-size: var(--ha-fs-caption); text-transform: uppercase; color: var(--ha-ink-muted);
  background: var(--ha-surface-subtle); border-top: 1px solid var(--ha-border-strong);
}
.calls-table td {
  padding: var(--ha-space-4) var(--ha-space-6);
  border-top: 1px solid var(--ha-border-strong); font-size: var(--ha-fs-small);
}
.call-number { display: flex; align-items: center; gap: var(--ha-space-3); font-weight: 500; }
.call-dir-icon {
  width: 32px; height: 32px; border-radius: var(--ha-radius-pill);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.call-dir-icon--out { background: rgba(45, 133, 255, .10); color: var(--ha-blue-text); }
.call-dir-icon--in { background: rgba(13, 150, 152, .14); color: var(--ha-success); }
.call-dir-icon--missed { background: var(--ha-danger-bg); color: var(--ha-danger); }
.calls-empty { padding: var(--ha-space-12) var(--ha-space-6); text-align: center; }

/* ————— Auth screen ————— */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--ha-space-6); background: var(--ha-gradient-blue-deep);
}
.auth-card {
  width: 100%; max-width: 380px; background: #fff; border-radius: var(--ha-radius-lg);
  box-shadow: var(--ha-shadow-sheet); padding: var(--ha-space-10) var(--ha-space-8);
  text-align: center;
}
.auth-card__icon {
  width: 56px; height: 56px; margin: 0 auto var(--ha-space-5);
  border-radius: var(--ha-radius-md); background: var(--ha-blue-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-card__brand {
  font-size: var(--ha-fs-caption); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ha-blue-text); font-weight: var(--ha-weight-medium);
  margin-bottom: var(--ha-space-2);
}
.auth-card__heading { font-size: var(--ha-fs-h2); margin-bottom: var(--ha-space-3); }
.auth-card__subtitle { color: var(--ha-ink-muted); margin-bottom: var(--ha-space-6); }
.btn-google {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ha-space-3); width: 100%; height: 48px; border-radius: var(--ha-radius-pill);
  border: 1px solid var(--ha-border); background: #fff; color: var(--ha-ink);
  font-family: inherit; font-size: var(--ha-fs-body); font-weight: var(--ha-weight-medium);
  cursor: pointer;
}
.btn-google:hover { background: var(--ha-surface-subtle); }
.auth-card__divider {
  color: var(--ha-ink-muted); font-size: var(--ha-fs-small); margin-top: var(--ha-space-5);
}
.auth-card__footer {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--ha-space-8); color: rgba(255, 255, 255, .65); font-size: var(--ha-fs-small);
}