/*!
 * Shinwado Admin — Page Styles
 * Version: 1.9.0
 *
 * Deliberately simpler/more utilitarian than the content pages
 * (Shinwado, Harmonious Way, Shinwado Directory) — this is an internal
 * admin tool, not marketing content, so it skips the decorative ink-wash
 * backgrounds and display serif type in favor of a clean, functional
 * form UI. Still reuses the shared color variables and .shinwado-btn
 * button system from shinwado.css for brand consistency.
 *
 * Contents:
 *   1. Body / layout
 *   2. Admin listing page
 *   3. Add Member form
 *   4. Confirmation modal
 *   5. Responsive
 */

/* 1. Body / layout ------------------------------------------------------------------ */
.shinwado-admin-body {
	background: var(--shinwado-cream);
	font-family: 'Lato', sans-serif;
	color: var(--shinwado-ink);
	margin: 0;
}
.shinwado-admin {
	padding: 2.5rem 2rem;
}
.shinwado-admin__inner {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}

/* Shared page header — background, title + underline (matching the
   wide-left eyebrow pattern used on Our Logo/Mission/Directory Header),
   and an optional supporting image. Originally built for the New
   Member page (hence "nm-"), now reused as-is by the Set Password and
   Login pages too — same visual pattern, no reason to duplicate it
   under a new class name. */
.nm-header {
	background-color: var(--shinwado-cream);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 2.5rem 2rem 1.5rem;
}
.nm-header__eyebrow-wrap {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.nm-header__title {
	margin: 0 0 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* font-family/size/weight/style/text-align/color come from the Page
	   Title field's typography controls, applied inline. */
}
.nm-header__title-line {
	width: 48px;
	height: 3px;
	margin: 0 0 1.25rem;
}
.nm-header__image {
	max-width: var(--shinwado-max-width);
	margin: 0 auto;
}
.nm-header__image img {
	width: 100%;
	max-height: 280px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* 2. Admin listing page --------------------------------------------------------------- */
.shinwado-admin__header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.shinwado-admin__invite-form {
	margin: 0;
}
.shinwado-admin__invite-result {
	background: #ffffff;
	border: 1px solid #e3d9c4;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
}
.shinwado-admin__invite-result p {
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	color: #4a423a;
}
.shinwado-admin__empty {
	color: #8a8074;
	font-size: 0.95rem;
}

/* Shared copyable-link component (invite links, activation links) —
   readonly input plus an explicit Copy button. See
   shinwado_render_copyable_link() in includes/admin-render.php. */
.shinwado-admin__copy-wrap {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.6rem;
}
.shinwado-admin__copy-wrap input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.6rem 0.8rem;
	font-size: 0.85rem;
	font-family: monospace;
	border: 1px solid #d9d0bd;
	border-radius: 6px;
	background: #f7f5f0;
	color: var(--shinwado-ink);
}
.shinwado-admin__copy-button {
	flex-shrink: 0;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.5rem 1rem;
	border: 1px solid var(--shinwado-red);
	border-radius: 6px;
	background: #ffffff;
	color: var(--shinwado-red);
	cursor: pointer;
}
.shinwado-admin__copy-button:hover {
	background: var(--shinwado-red);
	color: #ffffff;
}

/* Notices (validation errors, action results, redirect confirmations) */
.shinwado-admin__notice {
	padding: 0.85rem 1.1rem;
	border-radius: 6px;
	font-size: 0.88rem;
	margin-bottom: 1.5rem;
}
.shinwado-admin__notice--success {
	background: #e8f3e6;
	border: 1px solid #b8dbb1;
	color: #2c5e26;
}
.shinwado-admin__notice--error {
	background: #fbeaea;
	border: 1px solid #e6b8b8;
	color: var(--shinwado-red);
}

/* Member table */
.shinwado-admin__table-wrap {
	overflow-x: auto;
	background: #ffffff;
	border: 1px solid #e3d9c4;
	border-radius: 8px;
}
.shinwado-admin__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	white-space: nowrap;
}
.shinwado-admin__table th,
.shinwado-admin__table td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid #ece4d3;
}
.shinwado-admin__table th {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #8a8074;
	background: #faf6ee;
}
.shinwado-admin__table tbody tr:last-child td {
	border-bottom: none;
}
/* Traveling Dojo / Shinwado logo shown next to each member's name —
   marks at a glance whether the account is dual-purpose (shared with
   Traveling Dojo, shinwado_user_is_dual_traveling_dojo_member(),
   includes/td-integration.php) or Shinwado-only. */
.shinwado-admin__member-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.shinwado-admin__status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}
.shinwado-admin__status--pending {
	background: #fdf1d6;
	color: #8a6d1a;
}
.shinwado-admin__status--active {
	background: #e8f3e6;
	color: #2c5e26;
}
.shinwado-admin__status--suspended {
	background: #fbeaea;
	color: var(--shinwado-red);
}

.shinwado-admin__action-form {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.shinwado-admin__action-select {
	font-family: inherit;
	font-size: 0.8rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid #d9d0bd;
	border-radius: 4px;
	background: #ffffff;
	color: var(--shinwado-ink);
}
.shinwado-admin__action-apply {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--shinwado-red);
	border-radius: 4px;
	background: var(--shinwado-red);
	color: #ffffff;
	cursor: pointer;
	white-space: nowrap;
}
.shinwado-admin__action-apply:hover {
	opacity: 0.9;
}

/* 3. Add Member form ------------------------------------------------------------------- */
.shinwado-admin__inner--form {
	max-width: 640px;
	padding-top: 2rem;
}

.shinwado-form__fieldset {
	border: none;
	padding: 0;
	margin: 0 0 1.75rem;
}
.shinwado-form__subsection {
	border: 1px solid #e3d9c4;
	border-radius: 8px;
	padding: 1.25rem 1.25rem 0.5rem;
	margin: 1.5rem 0 0;
}
.shinwado-form__legend {
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0 0.4rem;
	color: var(--shinwado-ink);
}
.shinwado-form__radio {
	display: block;
	font-size: 0.95rem;
	margin-bottom: 0.6rem;
	cursor: pointer;
}
.shinwado-form__radio input {
	margin-right: 0.5rem;
}

.shinwado-form__field {
	margin-bottom: 1.25rem;
}
.shinwado-form__field--row {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 1rem;
}
.shinwado-form__field--row > div {
	margin: 0;
}
.shinwado-form__field label {
	display: block;
	font-size: 0.88rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
	color: var(--shinwado-ink);
}
.shinwado-form__required {
	color: var(--shinwado-red);
}
.shinwado-form__field input[type="text"],
.shinwado-form__field input[type="email"],
.shinwado-form__field input[type="tel"],
.shinwado-form__field input[type="url"],
.shinwado-form__field input[type="password"],
.shinwado-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	font-size: 0.92rem;
	font-family: inherit;
	border: 1px solid #d9d0bd;
	border-radius: 6px;
	background: #ffffff;
	color: var(--shinwado-ink);
}
.shinwado-form__field input:focus,
.shinwado-form__field textarea:focus {
	outline: none;
	border-color: var(--shinwado-red);
}
.shinwado-form__help {
	font-size: 0.8rem;
	color: #8a8074;
	margin: 0.35rem 0 0;
	line-height: 1.4;
}
.shinwado-form__help--subsection {
	margin-top: -0.5rem;
	margin-bottom: 1rem;
}
.shinwado-form__help--notice {
	background: #efe4d0;
	border-radius: 6px;
	padding: 0.75rem 1rem;
	color: #4a423a;
	margin-top: 1.25rem;
}

.shinwado-form__submit {
	margin-top: 0.5rem;
}
.shinwado-form__buttons {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}
.shinwado-form__buttons .shinwado-form__submit,
.shinwado-form__buttons .shinwado-form__cancel {
	margin-top: 0.5rem;
}

/* 4. Confirmation modal --------------------------------------------------------------- */
/* Replaces native browser confirm() dialogs — see shinwadoConfirm() in
   assets/js/admin.js. Reuses the shared .shinwado-btn button classes
   from shinwado.css for the two buttons, rather than styling new ones. */
.shinwado-confirm-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
	box-sizing: border-box;
}
.shinwado-confirm-modal {
	background: #ffffff;
	border-radius: 10px;
	padding: 2rem;
	max-width: 400px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.shinwado-confirm-modal__message {
	margin: 0 0 1.5rem;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--shinwado-ink);
}
.shinwado-confirm-modal__buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
}

/* Profile page: "Upgrade Membership" popup forms — same overlay/modal
   visual language as .shinwado-confirm-overlay/.shinwado-confirm-modal
   above, but wider and top-aligned rather than centered, since this
   hosts a full form with many fields (potentially taller than the
   viewport) rather than a short confirmation message — top-aligning
   keeps the close button and heading visible first, with the rest
   reachable by scrolling, rather than risking the top of a tall form
   getting pushed above the visible area if centered instead. */
.shinwado-form-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 9999;
	padding: 2rem 1rem;
	box-sizing: border-box;
	overflow-y: auto;
}
.shinwado-form-modal {
	background: #ffffff;
	border-radius: 10px;
	padding: 2rem;
	max-width: 600px;
	width: 100%;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	position: relative;
}
.shinwado-form-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--shinwado-ink);
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}
.shinwado-form-modal__close:hover {
	color: var(--shinwado-red);
}

/* Profile page: wraps each independent section (Upgrade Membership,
   School Information, Photo, Name, Email, Username, Password, Delete
   Account) in a visually distinct card, so the page's several
   unrelated forms are easy to tell apart at a glance rather than
   running together. Reuses the same card look already established for
   .shinwado-admin__invite-result, for visual consistency. */
.shinwado-profile__card {
	background: #ffffff;
	border: 1px solid #e3d9c4;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2.5rem;
}
/* Delete Account keeps its own distinct red border on top of the base
   card look above — a deliberate, meaningful visual signal ("this one
   is different, be careful"), not just decorative, so it's preserved
   as a modifier rather than folded into the same neutral look every
   other section gets. */
.shinwado-profile__card--danger {
	border: 2px solid #B60004;
}

/* "‹ Back to Home" link, shown at the top of every admin-style page
   (Admin, New Member, Profile, Login, Set Password, Membership Status)
   — matches the same visual style already established for this exact
   class on content pages (shinwado.css), which never actually applied
   here at all since admin-style pages don't load that file — this was
   previously completely unstyled (default browser link text) on every
   one of these pages.

   Positioning (stays fixed at the top on scroll) is now controlled
   entirely by JS (assets/js/admin.js), not CSS position: sticky —
   sticky proved unreliable here across two prior attempts despite
   looking correct on paper, so this switches to JS directly setting
   position: fixed via an inline style once scrolled, which always
   overrides any stylesheet-level conflict regardless of specificity or
   load order. This rule intentionally has NO position property at all
   — .shinwado-back-link--fixed below (also JS-applied) supplies it. */
.shinwado-back-link {
	display: block;
	background: #ffffff;
	padding: 1rem 2rem;
	color: #B60004;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: padding 0.2s ease, box-shadow 0.2s ease;
}
.shinwado-back-link:hover {
	text-decoration: underline;
}
.shinwado-back-link.is-scrolled {
	padding: 0.6rem 2rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* Applied by JS once scrolled — position: fixed set here (not sticky)
   specifically because it's an inline-style-strength mechanism
   further down that JS controls directly, not dependent on this class
   alone; z-index kept here since it doesn't need JS. */
.shinwado-back-link--fixed {
	z-index: 100;
}
/* A same-height placeholder JS inserts right where the link used to
   sit, the moment it switches to position: fixed — fixed positioning
   removes an element from normal document flow entirely (unlike
   sticky), so without this, the page content would jump upward by the
   link's own height the instant it becomes fixed. */
.shinwado-back-link-placeholder {
	height: 0;
}

/* Admin console's member table: a compact override for the "Details"
   button — the shared .shinwado-btn base style (padding: 0.9rem
   2.25rem, a heavy box-shadow) is designed for standalone CTAs, not a
   dense table cell sitting right next to the Actions dropdown. */
.shinwado-admin__details-btn {
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	box-shadow: none;
}

/* 5. Responsive ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.shinwado-admin {
		padding: 1.5rem 1.25rem;
	}
	/* The member table scrolls horizontally on narrow screens rather
	   than trying to reflow — see overflow-x: auto on
	   .shinwado-admin__table-wrap above. */
	.shinwado-admin__header {
		flex-wrap: wrap;
	}
}