/* WeeklyRO theme, part 1: palette, typography and the FluxCP page content (tables, forms, messages).
   Loaded after flux.css and Bootstrap. Page frame (navbar, home page, footer) is in wr-layout.css. */

/* Font bundled locally (SIL Open Font License): Nunito. No requests to any font service. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/Nunito-latin.woff2') format('woff2');
}

:root {
    --bg: #111827;
    --bg-deep: #0a0f1c;
    --panel: rgba(20, 30, 52, 0.92);
    --panel-solid: #141e34;
    --panel-line: #2a3c63;
    --row-line: rgba(255, 255, 255, 0.07);
    --plum: #1f3157;
    --plum-light: #2c4577;
    --field: #0a1020;
    --orange: #f5a21c;
    --orange-light: #ffc24a;
    --orange-dark: #d97f0a;
    --orange-ink: #2a1a05;
    --text: #e8eefb;
    --text-soft: #cfd9ee;
    --text-dim: #93a4c7;
    --green: #2fd13f;
    --red: #ff6b6b;
}

/* ─── Base ─── */
body {
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 9px),
        radial-gradient(ellipse at 30% 0%, #1c2c50 0%, var(--bg) 55%, var(--bg-deep) 100%);
    background-attachment: fixed;
    background-color: var(--bg);
}

table, input, select, textarea, button {
    font-family: inherit;
}

table {
    font-size: 14px;
}

a {
    color: var(--orange-light);
}

a:hover, a:focus {
    color: #ffd98a;
    text-decoration: underline;
}

p {
    margin: 0 0 10px;
}

strong, b {
    color: var(--text);
}

h1, h2, h3, h4, h5 {
    font-family: inherit;
    color: #fff;
}

h2 {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0;
    color: #fff;
}

h3 {
    margin: 22px 0 10px;
    padding-bottom: 6px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--orange);
    border-bottom: 1px solid var(--panel-line);
}

h3:first-letter {
    font-weight: inherit;
}

h4 {
    font-size: 16px;
    font-weight: 800;
}

hr {
    border-color: var(--panel-line);
}

code, pre, .request, .fs-path, .raw-txn-log, .script-line {
    font-family: Consolas, Monaco, 'Lucida Console', monospace;
}

code, .request, .fs-path {
    padding: 2px 6px;
    font-size: 13px;
    color: var(--orange-light);
    background: var(--field);
    border: 1px solid var(--panel-line);
    border-radius: 3px;
}

pre, .raw-txn-log {
    color: var(--text-soft);
    background: var(--field);
    border: 1px solid var(--panel-line);
    border-radius: 0;
}

/* ─── Buttons ─── */
.wr-btn,
button,
input[type=submit],
input[type=button],
input[type=reset],
.submit_button {
    display: inline-block;
    height: 34px;
    margin: 0;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 800;
    line-height: 32px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text);
    background: linear-gradient(180deg, var(--plum-light) 0%, var(--plum) 100%);
    border: 1px solid #0c1424;
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.wr-btn:hover, .wr-btn:focus,
button:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
.submit_button:hover {
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, #38568f 0%, #263c69 100%);
    border: 1px solid #0c1424;
}

button strong, .wr-btn strong {
    color: inherit;
}

.wr-btn-ghost {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid var(--panel-line);
    box-shadow: none;
}

.wr-btn-user {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    color: var(--text);
}

.wr-btn-ghost:hover, .wr-btn-ghost:focus {
    color: var(--text);
    background: var(--plum);
    border-color: var(--panel-line);
}

.wr-btn-primary,
button[type=submit],
input[type=submit] {
    color: var(--orange-ink);
    background: linear-gradient(180deg, var(--orange-light) 0%, var(--orange) 48%, var(--orange-dark) 52%, #e89212 100%);
    border: 1px solid #ffd27a;
    box-shadow: 0 0 0 1px #7a4703;
}

.wr-btn-primary:hover, .wr-btn-primary:focus,
button[type=submit]:hover,
input[type=submit]:hover {
    color: var(--orange-ink);
    background: linear-gradient(180deg, #ffd372 0%, #ffb02e 48%, #e88d10 52%, #f39d1a 100%);
    border: 1px solid #ffd27a;
}

/* ─── Panels ─── */
.wr-panel {
    background: var(--panel);
    border: 1px solid var(--panel-line);
}

.wr-content {
    padding: 0 22px 22px;
    overflow-x: auto;
    color: var(--text-soft);
}

/* Wide list tables (item / monster / account lists) must fit the panel. */
.wr-content > .horizontal-table {
    width: 100%;
}

.wr-content > .horizontal-table th {
    padding: 7px 7px;
    font-size: 11px;
    letter-spacing: 0;
}

.wr-content > .horizontal-table td {
    padding: 6px 7px;
    font-size: 13px;
}

/* Page title = the orange band from the patcher's "News and Updates" box. */
.wr-panel > h2:first-child,
.wr-panel > h2.wr-band {
    margin: 0 0 18px;
    padding: 0 18px;
    height: 46px;
    font-size: 19px;
    font-weight: 900;
    line-height: 46px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--orange-ink);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 7px),
        linear-gradient(180deg, var(--orange-light) 0%, var(--orange) 50%, var(--orange-dark) 100%);
    border-bottom: 1px solid #7a4703;
}

.wr-content > h2:first-child {
    margin-left: -22px;
    margin-right: -22px;
    padding: 0 22px;
}

.wr-content > h2 {
    margin: 26px 0 12px;
}

#content, #loginbox {
    color: var(--text-soft);
}

/* ─── Sub menu / page menu ─── */
#submenu, #pagemenu {
    margin: 0 0 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--panel-line);
}

#submenu a, #pagemenu a {
    display: inline-block;
    margin: 2px 2px;
    padding: 2px 9px;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    color: var(--text-soft);
    border: 1px solid transparent;
}

#submenu a:hover, #pagemenu a:hover {
    color: #fff;
    background: var(--plum);
    border-color: var(--panel-line);
}

#submenu a.current-sub-menu {
    color: var(--orange-ink);
    background: var(--orange);
    border-color: #ffd27a;
}

/* ─── Messages ─── */
.message, .notice, .red, .green, .note {
    display: block;
    margin: 0 0 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    font-style: normal;
    border: 1px solid;
}

.message {
    color: var(--text);
    background: var(--plum);
    border-color: var(--plum-light);
}

.notice, .note {
    font-weight: 600;
    color: #cfe3ff;
    background: rgba(44, 69, 119, 0.45);
    border-color: var(--plum-light);
}

.red {
    color: #ffdada;
    background: rgba(179, 38, 30, 0.3);
    border-color: #b3261e;
}

.green {
    color: #d9ffdd;
    background: rgba(20, 154, 37, 0.22);
    border-color: #149a25;
}

.keyword {
    color: var(--orange-light);
}

/* ─── Forms ─── */
input[type=text], input[type=password], input[type=file], input[type=email],
input[type=number], input[type=date], input[type=search], textarea, select {
    padding: 0 10px;
    height: 34px;
    font-size: 14px;
    color: var(--text);
    background-color: var(--field);
    border: 1px solid var(--panel-line);
    border-radius: 0;
    outline: 0;
}

textarea {
    height: 140px;
    padding: 8px 10px;
    width: 100%;
    max-width: 560px;
}

input[type=file] {
    padding: 5px 10px;
}

select[multiple], select[size] {
    height: auto;
    padding: 4px;
}

input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
input[type=number]:focus, textarea:focus, select:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 2px rgba(245, 162, 28, 0.18);
}

select option {
    color: var(--text);
    background: var(--panel-solid);
}

input[type=checkbox], input[type=radio] {
    margin: 0 4px 0 0;
    vertical-align: -1px;
    accent-color: var(--orange);
}

label {
    font-weight: 700;
    color: var(--text);
}

::placeholder {
    color: #5f6f91;
}

.generic-form, .generic-form-div {
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-line);
}

.generic-form-table {
    border-collapse: separate;
    border-spacing: 0 4px;
}

.generic-form-table th {
    padding-right: 14px;
    vertical-align: middle;
    text-align: right;
    white-space: nowrap;
}

.generic-form-table th label {
    margin: 0;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.generic-form-table td input[type=text],
.generic-form-table td input[type=password] {
    width: 280px;
    max-width: 100%;
}

.generic-form-table td p {
    margin: 6px 0;
    color: var(--text-soft);
}

.generic-form-table td label {
    margin-right: 14px;
    font-weight: 600;
    color: var(--text-soft);
}

.generic-form-table td div {
    color: var(--text-dim);
}

.date-field select {
    margin-right: 4px;
}

.security-code {
    width: auto;
    height: auto;
    margin: 0 0 6px;
}

.security-code img {
    border: 1px solid var(--panel-line);
}

#register_form select, #login_form select {
    width: auto;
}

#register_form input[type=text], #register_form input[type=password],
#login_form input[type=text], #login_form input[type=password] {
    width: 280px;
}

/* Search forms (item / monster / account lists) */
.toggler {
    font-style: normal;
}

.toggler a {
    display: inline-block;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid var(--panel-line);
    border-radius: 3px;
}

.toggler a:hover {
    color: var(--text);
    text-decoration: none;
    background: var(--plum);
}

.search-form, .search-form2 {
    margin: 0 0 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-line);
}

.search-form p, .search-form2 p {
    padding: 10px 12px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--row-line);
}

.search-form p:last-child {
    border-bottom: 0;
}

.search-form label, .search-form2 label {
    margin: 0 4px 0 0;
    font-size: 12px;
    font-style: normal;
    color: var(--text-dim);
}

.search-form input[type=text], .search-form2 input[type=text] {
    width: 110px;
    height: 28px;
    margin: 2px 0;
    padding: 0 8px;
    font-size: 13px;
}

.search-form select, .search-form2 select {
    height: 28px;
    margin: 2px 0;
    padding: 0 6px;
    font-size: 13px;
}

.search-form input[type=submit], .search-form input[type=button], .search-form input[type=reset],
.search-form2 input[type=submit], .search-form2 input[type=button], .search-form2 input[type=reset] {
    height: 28px;
    margin: 2px 0;
    padding: 0 12px;
    font-size: 12px;
    line-height: 26px;
}

/* ─── Tables ─── */
.horizontal-table, .vertical-table, #server_status, .woe-table, .install_table {
    border-collapse: collapse;
    border-spacing: 0;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--panel-line);
}

.horizontal-table th, .horizontal-table td,
.vertical-table th, .vertical-table td,
.install_table th, .install_table td {
    padding: 7px 10px;
    font-size: 14px;
    border: 1px solid var(--row-line);
}

.horizontal-table th, .vertical-table th, .install_table th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--text-dim);
    background-color: var(--plum);
    border-color: var(--panel-line);
}

.horizontal-table td, .vertical-table td, .install_table td {
    color: var(--text-soft);
    background-color: rgba(10, 16, 32, 0.55);
}

.horizontal-table tr:hover td {
    background-color: rgba(44, 69, 119, 0.28);
}

.horizontal-table th a, .vertical-table th a, .sortable {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-dim);
}

.sortable:hover {
    color: var(--orange-light);
}

.vertical-table label {
    margin: 0;
    padding: 0;
}

.td-action, .action, .shop-item-action {
    color: #4a5a7d;
}

.action a, .action span.anchor, .block-link, .shop-item-action a {
    color: var(--orange-light);
    border-bottom: 0;
}

.block-link {
    border-bottom: 1px solid var(--row-line);
}

.not-applicable {
    color: #66769a;
}

.top-ranked td {
    color: #fff;
    background-color: rgba(245, 162, 28, 0.16) !important;
}

.top-ranked a {
    color: var(--orange-light);
    border-bottom: 1px dotted var(--orange);
}

.item-drop-mvp td {
    color: var(--text);
    background-color: rgba(255, 107, 107, 0.12) !important;
}

.item-drop-card td {
    color: var(--text);
    background-color: rgba(47, 209, 63, 0.10) !important;
}

.equipped td {
    background-color: rgba(44, 69, 119, 0.45) !important;
}

.normalslotted .equipped {
    color: var(--text);
}

.mvp {
    color: var(--red);
}

.monster-mode li {
    border-bottom: 1px dotted var(--row-line);
}

.job-classes td {
    border-right: 1px solid var(--row-line);
}

.character-stats {
    color: var(--text-dim);
}

.character-stats .stat-name {
    color: var(--text-dim);
}

.character-stats .stat-value {
    color: #fff;
}

.online {
    color: var(--green);
}

.offline {
    color: #66769a;
}

.state-pending { color: var(--orange-light); }
.state-banned, .state-permanently-banned { color: var(--red); }

/* Server status + WoE tables */
#server_status, .woe-table {
    min-width: 60%;
}

#server_status th, #server_status td, .woe-table th, .woe-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--row-line);
}

#server_status tr:first-child td, .woe-table th {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    background: var(--plum);
    border-bottom: 1px solid var(--panel-line);
}

#server_status .server, .woe-table .server {
    font-weight: 800;
    color: #fff;
}

#server_status td {
    font-weight: 700;
    color: var(--text);
}

.woe-table .time {
    color: var(--text-soft);
}

.up {
    color: var(--green);
}

.down {
    color: var(--red);
}

/* Paging + info lines */
.pages {
    margin-top: 18px;
    padding-top: 12px;
    color: #4a5a7d;
    border-top: 1px solid var(--panel-line);
}

.pages a, .pages .page-prev, .pages .page-next {
    color: var(--text-soft);
}

.pages .page-num {
    display: inline-block;
    min-width: 26px;
    padding: 2px 6px;
}

.pages a.page-num:hover, .pages a:hover {
    color: #fff;
    text-decoration: none;
    background: var(--plum);
}

.pages .current-page {
    color: var(--orange-ink);
    background: var(--orange);
}

.jump-to-page {
    font-size: 12px;
    color: var(--text-dim);
}

.jump-to-page input {
    width: 60px;
    height: 26px;
    padding: 0 6px;
    font-size: 12px;
}

.info-text {
    margin-bottom: 10px;
    padding: 7px 10px;
    color: var(--text-dim);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--panel-line);
}

.info-text-total, .info-text-results {
    color: var(--text);
}

/* Shop / cart / credits (item shop is optional, kept readable) */
.shop-table {
    color: var(--text-soft);
}

.shop-table td {
    background-color: rgba(10, 16, 32, 0.55);
    border: 1px solid var(--panel-line);
}

.shop-item-name {
    color: #fff;
    border-bottom: 1px solid var(--row-line);
}

.shop-item-cost-qty, .credit-amount-text, .credit-balance .balance-text {
    color: var(--text-dim);
}

.cost, .qty, .cart-item-count, .cart-sub-total, .remaining-balance, .exchange-rate,
.important, .donation-amount, .shop-server-name {
    color: #fff;
}

.credit-amount {
    color: var(--text-soft);
}

.credit-balance {
    color: var(--text);
    background: var(--plum);
    border: 1px solid var(--panel-line);
}

.cart-items-text {
    color: var(--text);
    background: var(--plum);
    border: 1px solid var(--panel-line);
}

.cart-item-name {
    color: #fff;
    border-bottom: 1px dotted var(--panel-line);
}

.checkout-text a:hover {
    color: #fff;
}

.emblem-server {
    border-bottom: 1px solid var(--row-line);
}

.script-line-num {
    color: var(--text-dim);
    background: var(--plum);
    border-right: 1px solid var(--panel-line);
}

/* News archive page (module=news) uses the stock markup */
.newsDiv h4 {
    margin: 18px 0 6px;
    font-size: 17px;
    color: #fff;
}

.newsCont {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--row-line);
}

.newsDate {
    color: var(--text-dim);
}