/* =====================================================================
   Mina Luxury Tan — admin panel
   Loaded AFTER styles.css, which supplies every design token and the
   base type. Nothing here redefines a token; the admin is the same
   design system in a denser, more utilitarian arrangement.
   ===================================================================== */

/* ------------------------------------------------------------ shared */

.admin-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Until the session check finishes we do not know whether this person is
   allowed to see anything, so the page starts hidden and is revealed by
   script. Without this there is a visible flash of the dashboard before
   the redirect fires. The <noscript> block in the page markup covers the
   case where script never runs at all. */
/* The hidden attribute must win over component display rules (.btn is
   inline-flex, rows are flex), or toggled-off buttons and inputs show. */
.admin-body [hidden] { display: none !important; }

.admin-gate { visibility: hidden; }
.admin-gate.is-ready { visibility: visible; }

/* ------------------------------------------------------- login screen */

.login {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem) var(--gutter);
}

.login__card {
  width: 100%;
  max-width: 27rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.login__brand {
  display: block;
  text-align: center;
  margin-bottom: 1.75rem;
  line-height: 1.1;
}

.login__brand-mark {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.login__brand-sub {
  display: block;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-top: 0.4rem;
}

.login__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 1.75rem;
  text-align: center;
}

/* --------------------------------------------------------- form parts */

.field { margin-bottom: 1.1rem; }

.field__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.field__input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.field__input::placeholder { color: var(--muted-2); }

/* The service-length dropdown: a dark list, not the browser's white one. */
select.field__input { color-scheme: dark; cursor: pointer; }
select.field__input option { background: var(--surface-2); color: var(--text); }

.field__input:focus {
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Password field with a reveal toggle sitting inside the border. */
.field__wrap { position: relative; }
.field__wrap .field__input { padding-right: 3.25rem; }

.field__reveal {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.field__reveal:hover { color: var(--text); background: var(--surface-3); }
.field__reveal:focus-visible {
  outline: 2px solid var(--accent-dim);
  outline-offset: 2px;
}
.field__reveal svg { width: 1.15rem; height: 1.15rem; }
/* `hidden` is an HTML attribute, and on an inline <svg> the browser's own
   [hidden] rule does not reach it — the eye-off icon rendered under the
   eye, so the toggle showed two. Only the icon for the current state shows. */
.field__reveal svg[hidden] { display: none; }
/* Edge adds its own reveal eye to password inputs; this field has one. */
.field__input::-ms-reveal { display: none; }

/* The submit button keeps its label while busy, so the card never
   changes height mid-submit. */
.login__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}

.login__submit[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

.login__foot {
  text-align: center;
  margin: 1.75rem 0 0;
  font-size: 0.82rem;
  color: var(--muted-2);
}

.login__foot a { border-bottom: 1px solid var(--line); }
.login__foot a:hover { color: var(--text); }

/* ---------------------------------------------------------- messages */

/* One element, three tones. It is aria-live so a screen reader announces
   a failed sign-in; without that the only feedback is visual and a
   non-sighted user is left waiting on a form that appears to do nothing. */
.notice {
  display: none;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  border: 1px solid transparent;
}

.notice.is-shown { display: block; }

.notice--error {
  background: rgba(226, 92, 92, 0.09);
  border-color: rgba(226, 92, 92, 0.32);
  color: #f0b4b4;
}

.notice--ok {
  background: var(--accent-soft);
  border-color: rgba(119, 213, 221, 0.32);
  color: var(--accent-hi);
}

.notice--warn {
  background: rgba(228, 176, 92, 0.09);
  border-color: rgba(228, 176, 92, 0.32);
  color: #eed3a1;
}

.notice code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: inherit;
}

/* --------------------------------------------------------- dashboard */

.admin-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.admin-bar__brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.admin-bar__brand span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.admin-bar__who {
  text-align: right;
  font-size: 0.85rem;
  line-height: 1.4;
}

.admin-bar__who strong { font-weight: 500; }

.admin-bar__who span {
  display: block;
  color: var(--muted-2);
  font-size: 0.78rem;
}

.pill {
  display: inline-block;
  padding: 0.22rem 0.66rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Owner is the only role that can change who else has access, so it is
   the only one marked out. */
.pill--owner {
  border-color: rgba(119, 213, 221, 0.38);
  background: var(--accent-soft);
  color: var(--accent-hi);
}

.admin-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
}

.admin-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.admin-lede {
  color: var(--muted);
  margin: 0 0 2.5rem;
  max-width: 46ch;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.card {
  display: block;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: inherit;
  font: inherit;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.card__body {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.card__tag {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* A section this role may not use is dimmed rather than hidden, so the
   panel looks the same to everyone and nobody wonders where a menu went. */
.card.is-locked { opacity: 0.45; }

@media (prefers-reduced-motion: no-preference) {
  .card:not(.is-locked):hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
  }
}

/* A card that opens a section is a link; keep it looking like the rest. */
a.card { text-decoration: none; }

a.admin-bar__brand { color: inherit; text-decoration: none; }

.admin-back {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: var(--muted-2);
  text-decoration: none;
}
.admin-back:hover { color: var(--text); }

/* -------------------------------------------------------------- blog */

.posts-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-lede a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2em; }

.posts { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.posts__row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.posts__title { flex: 1 1 16rem; font-family: var(--font-display); font-size: 1.1rem; color: var(--text); text-decoration: none; }
.posts__title:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.posts__when { font-size: 0.8rem; color: var(--muted-2); }
.posts__view { font-size: 0.8rem; color: var(--muted); }
.posts__empty { color: var(--muted); padding: 1rem 0; }

.editor { max-width: 46rem; }
.editor textarea.field__input { resize: vertical; line-height: 1.6; font-family: inherit; }
.editor__optional { text-transform: none; letter-spacing: 0; color: var(--muted-2); font-weight: 400; }
.editor__hint { margin: 0.45rem 0 0; font-size: 0.8rem; color: var(--muted-2); }

.editor__slug { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.editor__slug .field__input { flex: 1; }
.editor__slug .field__input[readonly] { color: var(--muted); }

.editor__cover img { display: block; width: 100%; max-height: 22rem; object-fit: cover; margin-bottom: 0.75rem; border: 1px solid var(--line); }
.editor__cover-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.editor__upload { cursor: pointer; }
.editor__alt { margin-top: 0.75rem; }

.editor__toolbar {
  display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
  padding: 0.35rem; border: 1px solid var(--line); border-bottom: 0; background: var(--surface);
}
.editor__toolbar button, .editor__toolbar-file {
  font: inherit; font-size: 0.82rem; color: var(--text); background: transparent;
  border: 1px solid transparent; padding: 0.4rem 0.7rem; cursor: pointer;
}
.editor__toolbar button:hover, .editor__toolbar-file:hover { border-color: var(--line-strong); }
.editor__toolbar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-hi); }
.editor__toolbar .is-off { opacity: 0.35; pointer-events: none; }
.editor__toolbar-gap { flex: 1; }

.editor__link { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; border: 1px solid var(--line); border-bottom: 0; }
.editor__link .field__input { flex: 1 1 16rem; }

.editor__body { min-height: 24rem; }
.editor__preview {
  min-height: 24rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); margin-top: 0;
}

.editor__bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  padding: 1rem 0; margin-top: 1rem; background: var(--bg); border-top: 1px solid var(--line);
}
.editor__bar-gap { flex: 1; }
.editor[aria-busy="true"] .editor__bar .btn { opacity: 0.5; pointer-events: none; }
.editor__delete.is-armed { border-color: rgba(226, 92, 92, 0.7); color: #f0b4b4; }

/* ---------------------------------------------------------- services */

.svc-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 2.5rem;
}
.svc-form .card__title { margin-bottom: 1.25rem; }

.svc-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  column-gap: 1rem;
  align-items: end;
}
/* styles.css spans every .field across its row for the /contact form;
   here they share the row. */
.svc-form__grid .field { grid-column: auto; }

.svc-form__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
/* .btn sets its own display, which beats the browser's [hidden] rule. */
.svc-form__actions [hidden] { display: none; }

.svc-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
}
.svc-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
}

.svc-group + .svc-group { margin-top: 2.25rem; }
.svc-group__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}

.svc-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

/* Name and its notes, then the price, the On site switch and the
   actions, on one line where there is room and stacked where there is
   not. */
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem auto auto;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.svc-row.is-hidden .svc-row__info { opacity: 0.5; }

.svc-row__info { display: grid; gap: 0.2rem; min-width: 0; }
.svc-row__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-weight: 500;
}
/* Teal on the dark panel, as the same line is teal on the site's cards. */
.svc-row__note {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.svc-row__alt { font-size: 0.8rem; color: var(--muted-2); }

.svc-row__price { position: relative; display: block; }
.svc-row__dollar {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.svc-row__price .field__input { padding: 0.55rem 0.6rem 0.55rem 1.6rem; font-size: 0.95rem; }

.svc-row__show { margin: 0; white-space: nowrap; }

.svc-row__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.svc-btn {
  padding: 0.45rem 0.7rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.svc-btn:hover:not(:disabled) { color: var(--text); border-color: var(--accent-dim); }
.svc-btn:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }
.svc-btn:disabled { opacity: 0.3; cursor: default; }
.svc-btn--danger:hover:not(:disabled),
.svc-btn--danger.is-armed { color: #f0b4b4; border-color: rgba(226, 92, 92, 0.6); }

.svc-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Add-ons & fees: a name and a price, nothing to hide, move or delete. */
.svc-extras { margin-top: 2.25rem; }
.svc-row--extra { grid-template-columns: minmax(0, 1fr) 8rem; }

body[aria-busy="true"] .svc-row,
body[aria-busy="true"] .svc-form { opacity: 0.7; pointer-events: none; }

@media (max-width: 760px) {
  .svc-row { grid-template-columns: 7rem auto; }
  .svc-row__info { grid-column: 1 / -1; }
  .svc-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}