/* SDS Booking: /admin settings page. Tokens only; same five solid brand colours. */

.admin { max-width: 960px; margin: var(--space-7) auto var(--space-9); display: flex; flex-direction: column; gap: var(--space-5); }
.admin h1 { font-size: var(--text-xl-size); line-height: var(--text-xl-line); }
.admin h2 { font-size: var(--text-lg-size); line-height: var(--text-lg-line); }
.admin h3 { font-size: var(--text-base-size); line-height: var(--text-base-line); margin-top: var(--space-5); }
.admin a { color: var(--color-link); }

.admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-4); }
.admin-head__meta, .admin-head__version { font-size: var(--text-sm-size); }
.link-btn { background: none; border: 0; padding: 0; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: inherit; }

.admin-signin { max-width: 480px; margin: var(--space-8) auto; display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.admin-signin__logo { width: 220px; }

.admin-alert { display: flex; flex-direction: column; gap: var(--space-2); }
.problems { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm-size); }

/* Tabs */
.tabs { display: flex; gap: var(--space-1); flex-wrap: wrap; border-bottom: 1px solid var(--color-border); }
.tabs [role="tab"] {
  border: 0; background: none; padding: var(--space-3) var(--space-4); font-weight: 700; cursor: pointer; color: var(--color-text);
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tabs [role="tab"]:hover { background: var(--color-surface); }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--color-accent); }
.tab-panel { padding-top: var(--space-4); }
@media (max-width: 719px) { .tabs [role="tab"] { white-space: nowrap; padding: var(--space-3); } }
.tab-panel section { display: flex; flex-direction: column; gap: var(--space-4); }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.section-note, .muted-note { font-size: var(--text-sm-size); }

/* Call types */
.type-list, .questions, .blocks, .off-list, .versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.type-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.type-card--open { border-color: var(--color-border-input); }
.type-card__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); flex-wrap: wrap; }
.type-card__name { font-weight: 700; color: var(--color-heading); font-size: var(--text-lg-size); line-height: var(--text-lg-line); }
.type-card__meta { font-size: var(--text-sm-size); }
.type-card__actions { display: flex; gap: var(--space-2); align-items: center; }
.type-editor { border-top: 1px solid var(--color-border); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.type-editor__foot { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: var(--text-xs-size); line-height: var(--text-xs-line); }
.badge--off { background: var(--color-surface); color: var(--color-text); }

.question { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.question__row { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; }
/* Sit "Required" and "Remove question" on the same line as the answer-box dropdown. */
.question__row > .check, .question__row > .btn { min-height: var(--layout-input-height); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: end; }
.grid-3 .inline-pair { flex-wrap: nowrap; }
@media (max-width: 719px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.inline-pair { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--text-sm-size); }
.prefix { font-size: var(--text-sm-size); white-space: nowrap; }
.input--num { width: 6.5em; }
.input--unit { width: auto; }
.input--time { width: 8.5em; }
select.input { padding-right: var(--space-6); }
.input[readonly] { background: var(--color-surface); }
.limits select.input { width: auto; justify-self: start; }
.inline-pair .input { font-size: var(--text-base-size); } /* same size as the dropdown beside it */
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm-size); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.check--big { font-weight: 700; min-height: var(--layout-input-height); }

/* Hours */
.hours { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.wk-day { border: 0; margin: 0; padding: var(--space-3) var(--space-4); min-width: 0; }
.wk-day + .wk-day { border-top: 1px solid var(--color-border); }
.wk-day__grid { display: grid; grid-template-columns: 10em 1fr; gap: var(--space-2) var(--space-4); align-items: start; }
.wk-day__grid > .check { min-height: 40px; }
.wk-day__name { font-weight: 700; }
.wk-day__blocks { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 40px; justify-content: center; }
.wk-day__blocks > .btn--ghost { padding-left: 0; } /* line up with the time boxes */
.block { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
@media (max-width: 719px) { .wk-day__grid { grid-template-columns: 1fr; } .input--time { width: 6.75em; } }

/* Limits */
.limits { display: flex; flex-direction: column; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); }
.field--inline { display: grid; grid-template-columns: 16em 1fr; gap: var(--space-2) var(--space-4); align-items: center; }
@media (max-width: 719px) { .field--inline { grid-template-columns: 1fr; } }

/* Days off */
.add-date { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; }
.add-date .btn { height: var(--layout-input-height); }
.off-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.off-row__head { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.off-row__date { font-weight: 700; min-width: 14em; }

/* History */
.version { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.version__title { font-weight: 700; }
.version__meta { font-size: var(--text-sm-size); }

/* Save bar: sticks to the bottom while there are unsaved changes */
.save-bar { position: sticky; bottom: 0; display: none; }
.save-bar--on { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: var(--color-bg); border-top: 2px solid var(--color-text); padding: var(--space-3) 0; }
.save-bar__msg { font-weight: 700; }
.save-bar__actions { display: flex; gap: var(--space-3); }

@media (max-width: 719px) { .admin { margin: var(--space-5) var(--layout-gutter-sm) var(--space-9); } }