/* ══════════════════════════════════════════════════════════════════════════
   SERVER RATES CONTROL PANEL  (?module=serverrates)

   Loaded unconditionally from header.php. Every selector is namespaced under
   .srates-, so it is inert on other pages -- and the account module navigates
   client-side without rebuilding <head>, so a conditionally loaded sheet is a
   trap worth not repeating here.
   ══════════════════════════════════════════════════════════════════════════ */

/* Server Rates is an admin workspace, not a public scenic page. Override the
   global TrivalRO background art only for this module and keep the page clean. */
body.serverrates-module-page {
	background: #ffffff !important;
	background-image: none !important;
}

body.serverrates-module-page #main-wrapper,
body.serverrates-module-page #content-col,
body.serverrates-module-page #content-box,
body.serverrates-module-page #content-box .content-inner {
	background-color: transparent !important;
	background-image: none !important;
}

.srates-page {
	max-width: 1120px;
	margin: 0 auto 40px;
	padding: 0 14px;
	box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.srates-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.srates-head-main h2 {
	margin: 0 0 6px;
	font-size: 20px;
	color: #1f4a6c;
}

.srates-head-main p {
	margin: 0;
	max-width: 640px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #55707f;
}

.srates-head code,
.srates-alert code {
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(31, 74, 108, .08);
	font-size: 11.5px;
}

.srates-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.srates-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
}

.srates-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.srates-chip--live    { background: #e4f8ea; border: 1px solid #7fc48f; color: #1e5c33; }
.srates-chip--pending { background: #fff4e5; border: 1px solid #e6b769; color: #8a5a00; }
.srates-chip--dead    { background: #ffe8e8; border: 1px solid #e2a0a0; color: #a42626; }

/* The pending state is a transient the NPC clears within ~5s. Pulsing it makes
   that legible as "working" instead of "stuck". */
.srates-chip--pending .srates-dot {
	animation: sratesPulse 1s ease-in-out infinite;
}

@keyframes sratesPulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .3; }
}

.srates-rev {
	font-size: 11px;
	color: #7b8fa0;
	font-variant-numeric: tabular-nums;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.srates-alert {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.6;
}

.srates-alert--warn  { background: #fff6e5; border: 1px solid #f0d3a0; color: #7a5300; }
.srates-alert--error { background: #ffe8e8; border: 1px solid #e2a0a0; color: #a42626; }

/* ── Public summary preview ─────────────────────────────────────────────── */
.srates-preview {
	margin-bottom: 18px;
	padding: 14px 16px;
	border: 1px solid #cfe3f1;
	border-radius: 12px;
	background: linear-gradient(180deg, #f6fbff 0%, #fff 60%);
}

.srates-preview-title {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5b87a8;
}

.srates-preview-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.srates-tile {
	flex: 1 1 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 8px;
	border-radius: 8px;
	background: #eaf4fc;
}

.srates-tile strong {
	font-size: 22px;
	line-height: 1.1;
	color: #1f6ba6;
}

.srates-tile span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #6b8ba3;
}

.srates-preview-note {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #6b8092;
}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.srates-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid #dbe8f2;
}

.srates-tab {
	position: relative;
	padding: 8px 14px;
	border: 1px solid #cfe0ed;
	border-radius: 8px;
	background: #f4f9fd;
	color: #3d6480;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.srates-tab:hover { background: #e8f3fb; }

.srates-tab.is-active {
	background: #2f8fd8;
	border-color: #1f6ba6;
	color: #fff;
}

/* Unsaved edits on a tab that is not on screen would otherwise be invisible. */
.srates-tab.has-changes::after {
	content: '';
	position: absolute;
	top: 5px;
	right: 6px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e8a33d;
	box-shadow: 0 0 0 2px #fff;
}

.srates-panel { display: none; }
.srates-panel.is-active { display: block; }

.srates-blurb {
	margin: 0 0 16px;
	padding: 10px 12px;
	border-left: 3px solid #9ccbe8;
	background: #f4fafe;
	font-size: 12.5px;
	line-height: 1.6;
	color: #4a6a80;
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.srates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 12px;
	/* Room for the sticky save bar so the last row is never trapped behind it. */
	padding-bottom: 90px;
}

.srates-field {
	position: relative;
	padding: 12px 14px 30px;
	border: 1px solid #dde9f2;
	border-radius: 10px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.srates-field.is-custom { border-color: #bcd9ee; }

.srates-field.is-dirty {
	border-color: #e8a33d;
	box-shadow: 0 0 0 3px rgba(232, 163, 61, .14);
}

.srates-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: #26455c;
}

.srates-badge {
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.srates-badge--restart { background: #fdeccd; color: #8a5a00; }
.srates-badge--custom  { background: #e2eefa; color: #35678d; }

.srates-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.srates-input {
	box-sizing: border-box;
	width: 100%;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #c3d5e2;
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	color: #21384a;
	font-variant-numeric: tabular-nums;
}

.srates-input:focus {
	outline: none;
	border-color: #2f8fd8;
	box-shadow: 0 0 0 3px rgba(47, 143, 216, .16);
}

.srates-input-wrap .srates-input { padding-right: 42px; }

.srates-unit {
	position: absolute;
	right: 10px;
	font-size: 11px;
	font-weight: 700;
	color: #8ba4b6;
	pointer-events: none;
}

/* ── Boolean switch ─────────────────────────────────────────────────────── */
.srates-switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	cursor: pointer;
	user-select: none;
}

.srates-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.srates-switch-track {
	position: relative;
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: #c8d6e0;
	transition: background .18s ease;
	flex: 0 0 auto;
}

.srates-switch-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .18s ease;
}

.srates-switch input:checked + .srates-switch-track { background: #2f8fd8; }
.srates-switch input:checked + .srates-switch-track .srates-switch-knob { transform: translateX(18px); }

.srates-switch input:focus-visible + .srates-switch-track {
	box-shadow: 0 0 0 3px rgba(47, 143, 216, .3);
}

.srates-switch-text {
	font-size: 12px;
	font-weight: 700;
	color: #4a6a80;
}

/* ── Help text ──────────────────────────────────────────────────────────── */
.srates-help {
	margin: 8px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #6b8092;
}

.srates-warn {
	margin: 7px 0 0;
	padding: 6px 8px;
	border-radius: 5px;
	background: #fff4e5;
	color: #8a5a00;
	font-size: 11px;
	line-height: 1.45;
}

/* The raw rAthena flag name, so this page can be read against conf/battle/*.conf. */
.srates-flag {
	position: absolute;
	left: 14px;
	bottom: 9px;
	font-size: 10px;
	color: #a8b9c6;
	letter-spacing: .01em;
}

/* ── Sticky save bar ────────────────────────────────────────────────────── */
.srates-savebar {
	position: sticky;
	bottom: 12px;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: -78px;
	padding: 12px 16px;
	border: 1px solid #dde9f2;
	border-radius: 12px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 6px 20px rgba(31, 74, 108, .14);
	transition: border-color .15s ease;
}

.srates-savebar.is-dirty { border-color: #e8a33d; }

.srates-savebar-count {
	font-size: 12.5px;
	font-weight: 700;
	color: #6b8092;
}

.srates-savebar.is-dirty .srates-savebar-count { color: #8a5a00; }

.srates-savebar-actions {
	display: flex;
	gap: 8px;
}

.srates-btn {
	padding: 9px 18px;
	border: 0;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease, opacity .15s ease;
}

.srates-btn--save {
	background: #2f8fd8;
	color: #fff;
	box-shadow: 0 3px 0 #1f6ba6;
}

.srates-btn--save:hover:not(:disabled) { background: #3ba0eb; }

.srates-btn--ghost {
	background: #eef4f9;
	border: 1px solid #cfe0ed;
	color: #4a6a80;
}

.srates-btn--ghost:hover:not(:disabled) { background: #e3eef7; }

.srates-btn:disabled {
	opacity: .45;
	cursor: default;
	box-shadow: none;
}

/* ── Reset section ──────────────────────────────────────────────────────── */
.srates-resetform {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e4edf4;
	font-size: 12px;
	color: #6b8092;
}

.srates-resetform select {
	height: 34px;
	padding: 0 8px;
	border: 1px solid #c3d5e2;
	border-radius: 6px;
	background: #fff;
	font-size: 12.5px;
	color: #21384a;
}

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.srates-grid {
		grid-template-columns: 1fr;
	}

	.srates-head {
		flex-direction: column;
	}

	.srates-savebar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.srates-savebar-actions {
		flex-direction: column;
	}

	.srates-btn {
		width: 100%;
	}

	.srates-tile strong { font-size: 18px; }
}

/* ── Per-map spawn overrides ─────────────────────────────────────────────── */

.srates-mapspawn {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.srates-mapspawn-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: #1f3d6b;
}

.srates-mapspawn-add {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 12px 0 8px;
}

.srates-mapspawn-add label {
	font-size: 12px;
	font-weight: 600;
	color: #40546f;
}

.srates-mapspawn-add input[type='text'] {
	flex: 1 1 200px;
	min-width: 160px;
}

.srates-mapspawn-add input[type='number'] {
	width: 84px;
}

.srates-mapspawn-add input {
	padding: 7px 9px;
	font-size: 13px;
	color: #22303f;
	background: #fff;
	border: 1px solid #c3d2e0;
	border-radius: 6px;
}

.srates-mapspawn-add input:focus {
	border-color: #2c9fdf;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(44, 159, 223, 0.16);
}

.srates-unit {
	margin-left: -4px;
	font-size: 12px;
	color: #6b7f96;
}

.srates-hint {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6b7f96;
}

.srates-mapspawn-table {
	width: 100%;
	margin-top: 14px;
	border-collapse: collapse;
	font-size: 13px;
}

.srates-mapspawn-table th {
	padding: 7px 8px;
	color: #40546f;
	font-size: 11px;
	font-weight: 700;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.srates-mapspawn-table td {
	padding: 7px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	vertical-align: middle;
}

.srates-mapspawn-when {
	font-size: 11px;
	color: #6b7f96;
	white-space: nowrap;
}

.srates-by {
	display: block;
	opacity: 0.8;
}

/* The per-map form is only a submit target for controls rendered elsewhere, so
   it must not occupy any layout of its own. */
.srates-mapform {
	display: contents;
}

/* ── Clearance for the sticky save bar ───────────────────────────────────── */
/*
 * .srates-savebar pulls itself up with margin-top:-78px so it floats over the
 * tail of the form rather than adding a block of its own. That only works if the
 * last panel actually has 78px of slack underneath -- otherwise the bar lands on
 * top of real content, which is what happened once the per-map section became
 * the last thing on the Monsters & Limits tab.
 */
.srates-panel.is-active {
	padding-bottom: 96px;
}

/* ── Map combobox ────────────────────────────────────────────────────────── */

.srates-combo {
	position: relative;
	flex: 1 1 240px;
	min-width: 190px;
}

.srates-combo-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	padding: 7px 10px;
	font: inherit;
	font-size: 13px;
	color: #8397ab;
	text-align: left;
	background: #fff;
	border: 1px solid #c3d2e0;
	border-radius: 6px;
	cursor: pointer;
}

.srates-combo.is-chosen .srates-combo-toggle {
	color: #22303f;
	font-weight: 600;
}

.srates-combo-toggle:hover { border-color: #9fc0da; }

.srates-combo-toggle[aria-expanded='true'] {
	border-color: #2c9fdf;
	box-shadow: 0 0 0 3px rgba(44, 159, 223, 0.16);
}

.srates-combo-caret {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid #7c93a8;
}

.srates-combo-pop {
	position: absolute;
	z-index: 40;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid #c3d2e0;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(31, 74, 108, 0.18);
}

.srates-combo-search {
	box-sizing: border-box;
	width: 100%;
	padding: 7px 9px;
	font-size: 13px;
	color: #22303f;
	background: #fff;
	border: 1px solid #c3d2e0;
	border-radius: 6px;
}

.srates-combo-search:focus {
	border-color: #2c9fdf;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(44, 159, 223, 0.16);
}

.srates-combo-list {
	max-height: 260px;
	margin: 6px 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.srates-combo-item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
}

.srates-combo-item:hover,
.srates-combo-item.is-active {
	background: #e8f4fd;
}

.srates-combo-name {
	font-size: 13px;
	font-weight: 600;
	color: #1f3d6b;
}

.srates-combo-meta {
	font-size: 11px;
	color: #6b7f96;
}

.srates-combo-empty {
	margin: 8px 2px 2px;
	font-size: 12px;
	color: #6b7f96;
}

/* A map that already has an override, so it is obvious in the list which ones
   carry settings before you select them. */
.srates-combo-badge {
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 10px;
	font-weight: 700;
	color: #8a5a00;
	background: #fdf0d5;
	border-radius: 999px;
	white-space: nowrap;
}

.srates-combo-item.is-overridden .srates-combo-name {
	color: #8a5a00;
}