/* Agent Portal specific styles.
   Keep this file small. The main visual system comes directly from the Admin app style.css. */

[hidden],
.hidden {
  display: none !important;
}

body.agent-portal-body {
  min-height: 100vh;
}

/* PIN login is portal-only. */
.pin-lock-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.pin-card {
  width: min(100%, 420px);
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pin-card h1 {
  margin: 4px 0 8px;
  font-size: 34px;
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.pin-subtitle {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.45;
}

.pin-form {
  display: grid;
  gap: 12px;
}

#pinInput {
  text-align: center;
  letter-spacing: 0.34em;
  font-size: 28px;
  font-weight: 800;
}

.pin-error {
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

/* Agent Portal shell: use the admin app scale exactly; only hide admin-only UI by absence in HTML. */
.agent-portal-readonly .shoot-card {
  cursor: default !important;
}

.agent-portal-readonly .record-link-btn {
  cursor: pointer !important;
}

/* Portal identity line under the title. */
.agent-welcome {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

/* The admin toolbar has a Log Shoot button; the portal has only the super-agent filter. */
.agent-filter-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0 0 14px;
}

.agent-filter-toolbar select {
  width: 100%;
}

.agent-filter-toolbar.hidden,
.agent-filter-toolbar[hidden] {
  display: none !important;
}

/* Keep search spacing like the admin app even without the add button toolbar. */
.agent-portal-body .search-section {
  margin-bottom: 22px;
}

/* Reports: same admin components, but four small summary cards for agent performance. */
.agent-report-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .agent-report-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Summary rows generated by the portal use the admin-style summary-line class. */
.summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #eef0f2;
  border-radius: 13px;
  background: #fbfbfc;
  color: var(--muted);
  font-size: 14px;
}

.summary-item span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.summary-item span:last-child {
  flex: 0 0 auto;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
}

/* Agent Portal has two bottom tabs. Keep the admin nav style but fit two items neatly. */
.agent-portal-body .bottom-nav {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The admin app has screen IDs reportsScreen/settingsScreen; portal uses reportScreen. */
#reportScreen:not(.hidden) .screen-local-header {
  display: block;
  margin: 0 0 14px;
}

#reportScreen:not(.hidden) .screen-local-header h1 {
  margin: 0;
}

/* Loading/sync issue chip uses admin colors; keep portal labels readable. */
.connection-status.issue {
  color: #9a5a00;
  background: var(--orange-soft);
  border-color: #ffd8a8;
}

/* v9: Agent Portal screen-specific header and spacing polish. */
.agent-portal-readonly .sync-cluster {
  align-items: center;
}

.agent-portal-readonly.is-report-screen .connection-status,
.agent-portal-readonly.is-report-screen #refreshBtn {
  display: none !important;
}

.agent-portal-readonly.is-log-screen .lock-top-btn,
.agent-portal-readonly:not(.is-report-screen) .lock-top-btn {
  display: none !important;
}

.lock-top-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Better vertical rhythm for the portal controls while keeping the admin card style. */
.agent-portal-body .stats {
  margin-bottom: 18px;
}

.agent-filter-toolbar {
  margin: 0 0 16px;
}

.agent-portal-body .search-section {
  margin-bottom: 28px;
}

.agent-portal-body .records {
  margin-top: 0;
}

.agent-portal-body .section-head {
  margin-bottom: 18px;
}

/* Reports use the main top title, so no secondary local title is needed. */
.agent-portal-body #reportScreen .report-controls {
  margin-top: 12px;
  margin-bottom: 22px;
}

.agent-portal-body #reportScreen .report-paper {
  margin-top: 0;
}