/* InstaSync admin console — layered on plan-review.css tokens. `is-` prefixed, no collisions. */

/* form inputs (admin pages don't link start.css, so define the base here) */
.is-field-label { display: block; font-size: .82rem; font-weight: 600; color: var(--is-muted); margin: 0 0 .3rem; }
.is-input {
  font: inherit; padding: .6rem .75rem; border: 1px solid var(--is-line);
  border-radius: 10px; background: #fff; color: var(--is-ink);
}
.is-input:focus-visible { outline: 3px solid var(--is-secondary); outline-offset: 1px; border-color: var(--is-secondary); }

/* ---- top nav ---- */
.is-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.is-nav-link {
  color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: .92rem;
  padding: .2rem 0; border-bottom: 2px solid transparent;
}
.is-nav-link:hover { color: #fff; }
.is-nav-active { color: #fff; border-bottom-color: var(--is-secondary); }
.is-logout { padding: .35rem .8rem; font-size: .85rem; }

.is-admin-wrap { max-width: 960px; }

/* ---- new-sync / pair cards ---- */
.is-newsync { margin: 0 0 1.5rem; }
.is-newsync > summary {
  display: flex; align-items: center; gap: .5rem; padding: .9rem 1.1rem;
  cursor: pointer; font-weight: 600; list-style: none;
}
.is-newsync > summary::-webkit-details-marker { display: none; }
.is-newsync-form, .is-pair-form { padding: 0 1.1rem 1.1rem; }
.is-pair-card { padding-top: 1rem; }
.is-pair-title { padding: 0 1.1rem .6rem; }
.is-newsync-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@container (min-width: 520px) { .is-newsync-grid { grid-template-columns: 1fr 1fr; } }
.is-newsync .is-input, .is-pair-form .is-input { margin-bottom: .6rem; width: 100%; }
.is-newsync-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: .4rem; }
.is-newsync-hint { color: var(--is-muted); font-size: .85rem; }
.is-newsync-hint a, .is-pair-form a { color: var(--is-primary); }

/* select styled like the text inputs */
select.is-input { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--is-muted) 50%),
  linear-gradient(135deg, var(--is-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.05rem, calc(100% - 13px) 1.05rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

/* ---- jobs / sites table ---- */
.is-table-status { color: var(--is-muted); margin: .5rem 0 1rem; }
.is-jobs {
  background: #fff; border: 1px solid var(--is-line); border-radius: var(--is-radius);
  box-shadow: var(--is-shadow); overflow: clip; container-type: inline-size;
}
.is-jobs-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.is-jobs-table th, .is-jobs-table td { text-align: left; padding: .7rem .9rem; border-top: 1px solid var(--is-line); }
.is-jobs-table thead th { border-top: 0; background: var(--is-light); color: var(--is-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.is-pair { font-weight: 600; word-break: break-all; }
.is-pair .is-route-arrow { color: var(--is-muted); font-weight: 400; }
.is-time { color: var(--is-muted); white-space: nowrap; }
.is-col-act { white-space: nowrap; text-align: right; }
.is-col-act .is-btn { margin-left: .4rem; }
.is-btn--sm { padding: .32rem .7rem; font-size: .82rem; border-radius: 8px; }

/* ---- status pills ---- */
.is-status { display: inline-block; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; white-space: nowrap; }
.is-status--plan_ready { background: var(--is-warn-bg); color: var(--is-warn); }
.is-status--planning, .is-status--applying { background: var(--is-light); color: var(--is-primary); }
.is-status--applied { background: var(--is-light); color: var(--is-primary); }
.is-status--rolled_back { background: #eef1f0; color: var(--is-muted); }
.is-status--failed { background: #fbeaea; color: var(--is-danger); }

/* ---- login ---- */
.is-login-body { display: grid; place-items: center; min-height: 100vh; background: var(--is-light); margin: 0; }
.is-login-card {
  background: #fff; border: 1px solid var(--is-line); border-radius: var(--is-radius);
  box-shadow: var(--is-shadow); padding: 2rem; width: min(92vw, 24rem);
}
.is-login-brand { color: var(--is-ink); margin-bottom: 1rem; }
.is-login-title { margin: 0 0 .25rem; font-size: 1.3rem; }
.is-login-sub { margin: 0 0 1.25rem; color: var(--is-muted); font-size: .9rem; }
.is-login-form { display: grid; gap: .3rem; }
.is-login-form .is-input { width: 100%; margin-bottom: .6rem; }
.is-login-btn { width: 100%; margin-top: .4rem; }
.is-login-error { color: var(--is-danger); font-size: .88rem; margin: .6rem 0 0; }