/*
 * MicsRO theme - compatibility layer.
 *
 * Three things live here, so that nothing goes unstyled while the pages are
 * migrated one PR at a time:
 *
 *   1. every CSS variable the older micsro views still reference, including
 *      the four that were never defined (--bg-hover, --text-tertiary,
 *      --border-color, --border-hairline), mapped onto the new tokens;
 *   2. the older micsro class names (apple-*, btn-apple*, badge-*, ...) and
 *      the classes views used without any rule behind them (table-modern,
 *      table-responsive, badge, form-group, form-control, alert*, info-text,
 *      form-grid-actions), expressed in the new vocabulary;
 *   3. the flux.css classes and ids the stock default views use (the micsro
 *      header never loaded flux.css, so ~50 fallback pages rendered bare).
 *      The list is from a census of themes/default views not overridden by
 *      this theme, not from flux.css wholesale.
 *
 * When a page is migrated, its old names can be dropped from here.
 */

/* ---- 1. variables ------------------------------------------------------ */

:root {
	--bg-canvas: var(--ground);
	--bg-surface: var(--win);
	--bg-surface-hover: var(--sel);
	--bg-surface-elevated: var(--win);
	--bg-glass: var(--win);
	--bg-input: var(--win);
	--bg-hover: var(--sel);

	--border-subtle: var(--line-soft);
	--border-light: var(--line);
	--border-color: var(--line);
	--border-hairline: var(--line-soft);
	--border-focus: var(--pink);

	--text-primary: var(--ink);
	--text-secondary: var(--muted);
	--text-muted: var(--muted);
	--text-tertiary: var(--muted);
	--text-accent: var(--accent);

	--accent-blue: var(--accent);
	--accent-blue-hover: var(--accent);
	--accent-cyan: var(--accent);
	--accent-green: var(--hp-ink);
	--accent-green-bg: var(--hp-bg);
	--accent-red: var(--danger);
	--accent-red-bg: var(--danger-bg);
	--accent-amber: var(--exp-ink);

	--blur-glass: none;
	--shadow-subtle: var(--shadow-win);
	--shadow-card: var(--shadow-win);
	--shadow-glow: none;

	--radius-md: var(--radius);
	--radius-lg: var(--radius-win);
	--radius-full: 9999px;

	--font-sans: var(--font-body);
	--font-mono: var(--font-code);
}

/* ---- 2. older micsro names --------------------------------------------- */

.apple-card, .search-filter-card, .apple-sidebar-group, .apple-sidebar-status {
	background: var(--win);
	border: 1px solid var(--line);
	border-radius: var(--radius-win);
	box-shadow: var(--shadow-win);
	padding: 20px;
}
.apple-card-header {
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px dotted var(--line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.apple-card-header h2, .apple-card-header h3 { margin: 0; font-size: 20px; }

.apple-hero {
	background: var(--win);
	border: 1px solid var(--line);
	border-radius: var(--radius-win);
	box-shadow: var(--shadow-win);
	padding: 36px 40px;
	text-align: left;
}
.apple-hero h1 { font-size: 44px; margin-bottom: 8px; }
.apple-hero .tagline { font-size: 17px; color: var(--muted); max-width: 60ch; margin: 0 0 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) {
	.apple-hero { padding: 24px 20px; }
	.apple-hero h1 { font-size: 30px; }
}

.btn-apple {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--btn1), var(--btn2));
	color: var(--ink);
	font: 500 15px/1 var(--font-body);
	text-decoration: none;
	cursor: pointer;
}
.btn-apple:hover { text-decoration: none; }
.btn-apple-primary, .btn-apple-accent {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: var(--accent);
}
.btn-apple-secondary { color: var(--ink); }
.btn-apple.btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; }
.drun-btn, .boss-filter-btn, .boss-tab-btn {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--btn1), var(--btn2));
	color: var(--ink);
	font-family: var(--font-body);
	cursor: pointer;
}
.drun-btn { min-height: 40px; padding: 0 16px; font-size: 14px; font-weight: 500; }
.boss-filter-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.apple-table-responsive, .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.apple-data-table, .table-modern, .vertical-table, .horizontal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.apple-data-table th, .table-modern th, .horizontal-table th {
	text-align: left;
	font-weight: 500;
	color: var(--muted);
	font-size: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--line);
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
}
.apple-data-table td, .table-modern td, .horizontal-table td, .vertical-table td {
	padding: 11px 12px;
	border-bottom: 1px dotted var(--line);
	vertical-align: middle;
	color: var(--ink);
}
.apple-data-table tbody tr:hover, .table-modern tbody tr:hover { background: var(--sel); }
.vertical-table th {
	width: 32%;
	text-align: left;
	color: var(--muted);
	font-weight: 500;
	padding: 11px 12px;
	border-bottom: 1px dotted var(--line);
	vertical-align: top;
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
}

/* (.badge itself is components.css's; listing it here too would override its state variants) */
.badge-type, .badge-element, .slot-badge, .rate-badge, .drop-rate-pill, .status-pill, .status-badge, .map-badge, .drun-size {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--win);
	color: var(--ink);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
	font-family: var(--font-body);
}
.badge-element, .drop-rate-pill, .drun-size { color: var(--accent); border-color: var(--accent); background: var(--sp-bg); }
.badge-mvp { color: var(--exp-ink); border-color: var(--exp); background: var(--exp-bg); }
.slot-badge { color: var(--hp-ink); border-color: var(--hp); background: var(--hp-bg); font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-badge { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.status-pill, .status-badge.badge-online, .badge-online, .badge-status-alive { color: var(--hp-ink); border-color: var(--hp); background: var(--hp-bg); }
.status-pill-offline, .status-badge.badge-offline, .badge-offline, .badge-status-defeated { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}
.status-dot.dot-online { background: var(--hp); }
.status-dot.dot-offline { background: var(--danger); }
.status-val-online { color: var(--hp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-val-rates { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.item-link { font-weight: 600; color: var(--accent); }
.font-mono { font-family: var(--font-code); font-size: 0.93em; }
.text-muted, .text-secondary, .info-text { color: var(--muted); }
.info-text { font-size: 13px; }

.message, .notice, .error {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sel);
	color: var(--ink);
	font-size: 14px;
	margin-bottom: 16px;
}
.message { border-color: var(--hp); background: var(--hp-bg); color: var(--hp-ink); }
.error, .alert-danger, .alert-error { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.notice, .alert-info { border-color: var(--sp); background: var(--sp-bg); }
.alert-success { border-color: var(--hp); background: var(--hp-bg); color: var(--hp-ink); }

.form-group, .form-grid-col, .search-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group label, .form-grid-col label, .search-field label {
	font-size: 13px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500;
}
.form-control, .apple-input, .drun-search-input, .boss-search-input {
	width: 100%;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--win);
	color: var(--ink);
	font: 15px var(--font-body);
}
.form-grid-actions, .form-grid-row, .search-grid, .search-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; }
.form-grid-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.search-form-grid { display: flex; flex-direction: column; }
.generic-form { display: block; }
.security-code { font-family: var(--font-code); letter-spacing: 0.1em; }

.item-detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.item-icon-box {
	width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--sel);
	border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
}

/* the old sidebar classes, for any view that still renders them */
.apple-sidebar-title { font-size: 14px; font-weight: 700; color: var(--ink); padding: 0 0 8px; text-transform: none; letter-spacing: 0; }
.apple-sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.apple-sidebar-menu li a {
	display: flex; justify-content: space-between; align-items: center; padding: 8px 4px;
	border-bottom: 1px dotted var(--line); color: var(--ink); text-decoration: none; font-size: 14px;
}
.apple-sidebar-menu li:last-child a { border-bottom: 0; }
.apple-sidebar-menu li a:hover, .apple-sidebar-menu li a.active { background: var(--sel); }
.sidebar-status-header { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.sidebar-status-list { display: flex; flex-direction: column; gap: 6px; }
.sidebar-status-row { display: flex; justify-content: space-between; font-size: 14px; }
.sidebar-status-row .status-label { display: inline-flex; align-items: center; gap: 6px; }

/* ---- 3. flux.css classes used by the stock default views ---------------- */

/* flux.css hides .search-form until the page's "Search..." toggler opens it
   (window.toggleSearchForm, theme.js); theme.js also opens it on load when a
   field already carries a value, i.e. the page is showing search results */
.search-form { display: none; }
.search-form.is-open { display: block; }
.toggler { margin: 0 0 8px; }
.toggler a { font-weight: 700; }
.generic-form-table, .search-form, .search-form2, .woe-table, .shop-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.generic-form-table th, .search-form th, .search-form2 th, .woe-table th, .shop-table th {
	text-align: left;
	font-weight: 500;
	color: var(--muted);
	padding: 8px 12px;
	border-bottom: 1px dotted var(--line);
	vertical-align: top;
	white-space: nowrap;
}
.generic-form-table td, .search-form td, .search-form2 td, .woe-table td, .shop-table td {
	padding: 8px 12px;
	border-bottom: 1px dotted var(--line);
	vertical-align: middle;
}
.generic-form-table tr:last-child th, .generic-form-table tr:last-child td { border-bottom: 0; }
.generic-form-table label { font-size: 14px; color: var(--muted); }
.generic-form-div { margin: 0 0 12px; }
.horizontal-table thead th { border-bottom: 1px solid var(--line); font-size: 12px; }
.horizontal-table tbody tr:hover td { background: var(--sel); }
.horizontal-table th.action, .horizontal-table td.action, .td-action, .toggler, .anchor { white-space: nowrap; }

.not-applicable, .empty-row, .time { color: var(--muted); }
.red, .important { color: var(--danger); font-weight: 700; }
.short { width: 60px; }
.status { font-weight: 700; }
.online { color: var(--hp-ink); }
.offline { color: var(--danger); }
.top-ranked { font-weight: 700; }
.keyword { font-weight: 700; color: var(--accent); }
.script, .raw-txn-log { font-family: var(--font-code); font-size: 13px; white-space: pre-wrap; }
.module-name, .fs-path, .server-name, .shop-server-name { font-family: var(--font-code); font-size: 0.93em; }
.request, .reason, .note { color: var(--muted); font-size: 13px; }
.multi-select { min-height: 120px; }
.job-classes { line-height: 1.8; }
.account-state, .state-banned, .state-permanently-banned, .state-unknown, .state-pending { font-weight: 700; }
.state-banned, .state-permanently-banned { color: var(--danger); }
.state-pending { color: var(--exp-ink); }
.identified.yes, .broken.no, .yes { color: var(--hp-ink); }
.identified.no, .broken.yes, .no { color: var(--danger); }
.hold-hours, .money-input, .credit-input { max-width: 160px; }

/* item shop, cart, donation (default views) */
.cart, .credit-balance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 10px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sel);
	font-size: 14px;
	margin-bottom: 16px;
}
.cart-info-text, .cart-total-text, .balance-text, .checkout-text, .cart-items-text, .checkout-info-text,
.credit-amount-text, .donation-amount-text, .reset-amount-text { color: var(--muted); }
.cart-item-count, .cart-sub-total, .balance-amount, .credit-amount, .donation-amount, .remaining-balance, .qty, .cost {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 16px;
}
.shop-item-image { text-align: center; }
.shop-item-name { font-weight: 700; }
.shop-item-info, .shop-item-cost-qty { color: var(--muted); font-size: 13px; }
.shop-item-action, .remove-from-cart, .button-action, .submit_button { white-space: nowrap; }
.current-shop-category { font-weight: 700; }
.enter-donation-amount { max-width: 200px; }
.loginbox-admin-menu { font-size: 14px; }
.emblem-server { color: var(--muted); font-size: 13px; }
.normalslotted { color: var(--hp-ink); }
.overslotted { color: var(--danger); }
.item_name { font-weight: 700; }

/* ids the default views and partials rely on */
#server_status { width: 100%; border-collapse: collapse; }
#server_status th { text-align: left; color: var(--muted); font-weight: 500; padding: 8px 12px; border-bottom: 1px dotted var(--line); }
#server_status td { padding: 8px 12px; border-bottom: 1px dotted var(--line); }
#server_status .server { font-weight: 700; }
#info p { margin-bottom: 8px; }
#login_form table, #register_form table { width: 100%; }
#login_form th, #register_form th { text-align: left; width: 32%; color: var(--muted); font-weight: 500; padding: 8px 12px; vertical-align: top; }
#login_form td, #register_form td { padding: 8px 12px; }
#login_form select, #register_form select { width: auto; }
#content { width: 100%; }