/*  ============================================================
    necROmantic – Dark Theme for FluxCP
    Ragnarok Online Private Server
    ============================================================ */

/* ── Variables (CSS custom properties) ─────────────────────── */
:root {
    --bg-body:         #080610;
    --bg-surface:      #0f0c1e;
    --bg-surface-alt:  #14112b;
    --bg-sidebar:      #0d0a1d;
    --bg-sidebar-head: #1c1335;
    --bg-sidebar-item: #120f22;
    --bg-header:       #0b0918;
    --bg-content:      #110e20;
    --bg-loginbox:     #0e0b1e;
    --bg-table-head:   #1a1535;
    --bg-table-row:    #120f22;
    --bg-table-alt:    #0e0b1c;
    --bg-input:        #13102a;
    --bg-footer:       #08060f;

    --border:          #28224a;
    --border-light:    #1e1a38;
    --border-accent:   #5a1a1a;

    --text-primary:    #cec9e6;
    --text-muted:      #7a7590;
    --text-heading:    #c9a84c;
    --text-heading2:   #e2d0a0;
    --text-link:       #9b84d9;
    --text-link-hover: #c9a84c;
    --text-footer:     #4a4560;

    --accent-red:      #8b1a1a;
    --accent-red-h:    #a82020;
    --accent-purple:   #4a2878;
    --accent-purple-h: #5e3490;
    --gold:            #c9a84c;
    --gold-dim:        #7a5f20;
    --crimson:         #6b0f1a;
}

/* ── Reset / Base ──────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
    height: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
    font-size: 9pt;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

table {
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
    font-size: 9pt;
}

tr, td, th { vertical-align: top; }

.horizontal-table tr, .vertical-table tr, .generic-form-table tr,
.horizontal-table td, .vertical-table td, .generic-form-table td {
    vertical-align: middle;
}

.horizontal-table th, .vertical-table th, .generic-form-table th {
    vertical-align: top;
}

p { margin: 4px 0 8px 0; padding: 0; }
a img { border: 0; }

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

h2 {
    color: var(--text-heading);
    letter-spacing: -1px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    text-shadow: 0 0 12px rgba(201,168,76,0.25);
}

h3 {
    font-weight: normal;
    font-size: 120%;
    color: var(--text-heading);
    border-bottom: 1px dotted var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
}
h3:first-letter { font-weight: bold; }

/* ── Site Header ───────────────────────────────────────────── */
#site-header {
    background: linear-gradient(135deg, #0d0a1c 0%, #1a0a0a 50%, #0d0a1c 100%);
    border-bottom: 2px solid var(--accent-red);
    padding: 18px 24px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    box-shadow: 0 2px 18px rgba(139,26,26,0.35);
    flex-shrink: 0;
}

#logo-link { text-decoration: none !important; }
#logo-link:hover { text-decoration: none !important; }

#logo-text {
    line-height: 1;
}

#logo-text .logo-nec,
#logo-text .logo-mantic {
    font-size: 36px;
    font-weight: 700;
    color: #d4cfcf;
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(100,80,180,0.4);
    display: inline;
}

#logo-text .logo-ro {
    font-size: 36px;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 2px;
    text-shadow: 0 0 16px rgba(201,168,76,0.6), 0 0 4px #fff;
    display: inline;
}

#logo-text .logo-tagline {
    display: block;
    font-size: 9pt;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 4px;
    font-style: italic;
}

#header-account {
    color: var(--text-muted);
    font-size: 9pt;
    text-align: right;
}
#header-account strong { color: var(--text-heading); }
#header-account em { color: var(--text-primary); font-style: normal; }

.header-admin-links {
    margin-top: 4px;
}
.header-admin-links a {
    color: var(--accent-red-h);
    margin-left: 8px;
    font-size: 8pt;
}
.header-admin-links a:hover { color: var(--gold); }

/* ── Site Wrapper (sidebar + content) ─────────────────────── */
#site-wrapper {
    display: flex;
    align-items: stretch;
    padding: 16px;
    gap: 14px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Sidebar ───────────────────────────────────────────────── */
#site-sidebar {
    width: 200px;
    flex-shrink: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Legacy table-based sidebar – make it full-width inside the flex div */
#admin_sidebar,
#sidebar {
    width: 100%;
    margin-bottom: 12px;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--bg-sidebar);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

#admin_sidebar img, #sidebar img { display: none; } /* hide old GIF spacers */

#admin_sidebar td, #sidebar td { padding: 0; }

/* Admin sidebar header */
#admin_sidebar th.menuitem {
    display: block;
    background-color: #1c0808;
    border-bottom: 1px solid var(--accent-red);
}
#admin_sidebar th.menuitem strong {
    display: block;
    padding: 8px 10px 6px;
    color: var(--gold);
    font-size: 9pt;
    text-align: center;
    border-bottom: none;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Admin sidebar items */
#admin_sidebar td.menuitem {
    display: block;
    border-bottom: 1px solid #1a0808;
}
#admin_sidebar td.menuitem a {
    display: block;
    padding: 5px 10px 5px 16px;
    color: #d4a0a0;
    background-color: #130808;
    text-decoration: none;
    font-size: 8.5pt;
}
#admin_sidebar td.menuitem a:hover {
    color: var(--gold);
    background-color: #1c1010;
}

/* Regular sidebar header */
#sidebar th.menuitem {
    display: block;
    background: var(--bg-sidebar-head);
    border-bottom: 1px solid var(--border);
    border-top: 2px solid var(--accent-purple);
    margin-top: 2px;
}
#sidebar th.menuitem strong {
    display: block;
    padding: 7px 10px 5px;
    color: var(--gold);
    font-size: 8.5pt;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Regular sidebar items */
#sidebar td.menuitem {
    display: block;
    border-bottom: 1px solid var(--border-light);
}
#sidebar td.menuitem a {
    display: block;
    padding: 5px 10px 5px 16px;
    color: var(--text-primary);
    background-color: var(--bg-sidebar-item);
    text-decoration: none;
    font-size: 8.5pt;
    transition: background 0.12s, color 0.12s;
}
#sidebar td.menuitem a:hover {
    color: var(--gold);
    background-color: #1c1535;
}
#sidebar td.sidebar-left,
#sidebar td.sidebar-right {
    background-color: var(--bg-sidebar);
}

/* ── Main content area ─────────────────────────────────────── */
#site-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Login box ─────────────────────────────────────────────── */
#loginbox {
    background: var(--bg-loginbox);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent-purple);
    border-radius: 4px;
    padding: 8px 14px;
    margin-bottom: 12px;
    color: var(--text-muted);
    font-size: 8.5pt;
}
/* Legacy table-based loginbox override */
table#loginbox { width: 100%; border-collapse: collapse; }
table#loginbox td { background: transparent !important; border: none; padding: 4px 8px; }
table#loginbox img { display: none; } /* hide corner GIFs */

#loginbox strong a { color: var(--text-heading); }
#loginbox strong a:hover { color: var(--gold); }
#loginbox select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.loginbox-admin-menu {
    padding-top: 4px;
    color: var(--accent-red-h);
}
.loginbox-admin-menu a { color: var(--accent-red-h); }
.loginbox-admin-menu a:hover { color: var(--gold); }

/* ── Content Panel ─────────────────────────────────────────── */
#content-panel {
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 16px 20px;
    color: var(--text-primary);
    min-height: 300px;
}

/* Legacy #content table override */
#content {
    color: var(--text-primary);
    background: var(--bg-content);
}
#content td { background: var(--bg-content) !important; }

/* ── Forms & Inputs ────────────────────────────────────────── */
input[type=text],
input[type=password],
input[type=file],
textarea {
    font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
    padding: 4px 8px;
    font-size: 9pt;
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border);
    outline: none;
    border-radius: 3px;
}
input[type=text]:focus,
input[type=password]:focus,
textarea:focus {
    border-color: var(--accent-purple);
    background-color: #1e1a2e;
    color: #e8e4ff;
}

select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 3px 6px;
    border-radius: 3px;
}

label { cursor: pointer; color: var(--text-primary); }
label:hover { color: var(--text-heading); cursor: pointer; }

.submit_button {
    display: inline-block;
    margin: 8px 4px;
    padding: 6px 14px;
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 3px;
    cursor: pointer;
    font-size: 9pt;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.submit_button:hover {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple-h);
    color: #fff;
}

input[type=submit] {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
input[type=submit]:hover {
    background: var(--accent-purple);
    color: #fff;
    border-color: var(--accent-purple-h);
}

/* ── Tables ────────────────────────────────────────────────── */
.horizontal-table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
}
.horizontal-table th {
    padding: 6px 10px;
    background-color: var(--bg-table-head);
    color: var(--text-heading);
    border: 1px solid var(--border);
}
.horizontal-table td {
    padding: 5px 10px;
    background-color: var(--bg-table-row);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.horizontal-table tr:nth-child(even) td {
    background-color: var(--bg-table-alt);
}
.horizontal-table tr:hover td {
    background-color: #1c1840;
}
.horizontal-table th, .horizontal-table td { font-size: 9pt; }

.vertical-table {
    border-spacing: 0;
    border-collapse: collapse;
}
.vertical-table th {
    padding: 5px 10px;
    background-color: var(--bg-table-head);
    color: var(--text-heading);
    border: 1px solid var(--border);
    text-align: right;
}
.vertical-table td {
    padding: 5px 12px;
    background-color: var(--bg-table-row);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.vertical-table th, .vertical-table td { font-size: 9pt; }
.vertical-table label {
    display: block;
    padding: 3px;
    color: var(--text-primary);
}
.vertical-table form { margin: 0; padding: 0; }

.generic-form-table th {
    padding: 5px 10px;
    background: var(--bg-table-head);
    color: var(--text-heading);
    border: 1px solid var(--border);
}
.generic-form-table td {
    padding: 5px 12px;
    background: var(--bg-table-row);
    color: var(--text-primary);
    border: 1px solid var(--border);
}
.generic-form-table label { color: var(--text-primary); }

/* ── Notifications / Messages ──────────────────────────────── */
.message {
    display: block;
    padding: 10px 14px;
    font-weight: bold;
    font-size: 110%;
    color: #e8d8a0;
    background-color: #1c1535;
    border: 1px solid var(--accent-purple);
    border-radius: 4px;
    margin-bottom: 10px;
}

.notice {
    display: block;
    padding: 10px 14px;
    color: #a0c8e8;
    background-color: #0a1828;
    border: 1px solid #1a3a5a;
    border-radius: 4px;
    margin-bottom: 10px;
}

.note {
    padding: 6px 10px;
    color: var(--text-muted);
    background-color: var(--bg-surface-alt);
    border-left: 3px solid var(--border);
    font-style: italic;
    border-radius: 0 3px 3px 0;
}

.red {
    display: block;
    padding: 10px;
    font-weight: bold;
    color: #ffaaaa;
    background-color: #2a0808;
    border: 1px solid #6b1a1a;
    border-radius: 4px;
    margin-bottom: 8px;
}

.green {
    display: block;
    padding: 10px;
    font-weight: bold;
    color: #aaffcc;
    background-color: #081a10;
    border: 1px solid #1a6b38;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ── Sub-menu & Page menu ──────────────────────────────────── */
#submenu { color: var(--text-muted); margin-bottom: 4px; }
#submenu a { color: var(--text-muted); }
#submenu a:hover { color: var(--gold); }

.current-sub-menu { font-weight: bold; color: var(--gold); }

#pagemenu {
    margin-top: 6px;
    margin-bottom: 10px;
    padding: 4px 0;
    font-size: 8pt;
    color: var(--text-muted);
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--border);
}
#pagemenu a { color: var(--text-muted); text-decoration: underline; }
#pagemenu a:hover { color: var(--gold); }

/* ── Module name heading ───────────────────────────────────── */
.module-name {
    font-weight: bold;
    font-size: 12pt;
    color: var(--text-heading);
}

/* ── Server status ─────────────────────────────────────────── */
#server_status {
    border-spacing: 0;
    border-collapse: collapse;
    background-color: var(--bg-table-row);
    border: 1px solid var(--border);
    width: 100%;
}
#server_status th, #server_status td {
    padding: 8px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
#server_status th {
    background: var(--bg-table-head);
    color: var(--text-heading);
}
#server_status .server { color: var(--text-primary); }
#server_status .status { text-align: center; }

/* ── Pagination ────────────────────────────────────────────── */
.pages {
    margin-top: 16px;
    padding-top: 8px;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid var(--border);
}
.pages .page-prev, .pages .page-next { color: var(--text-link); }
.pages .page-num { padding: 0 4px; }
.pages .current-page { color: var(--gold); font-weight: bold; }

/* ── Status colors ─────────────────────────────────────────── */
.online  { color: #66dd88; }
.offline { color: var(--text-muted); }
.up   { font-weight: bold; color: #66dd88; text-transform: uppercase; }
.down { color: #dd4444; text-transform: uppercase; }

.state-pending           { color: #f0a030; }
.state-banned            { color: #dd4444; }
.state-permanently-banned{ font-weight: bold; color: #dd2222; }

.keyword { color: var(--gold); font-style: italic; }

/* ── Credit balance ────────────────────────────────────────── */
.credit-balance {
    float: right;
    display: inline-block;
    padding: 8px 12px;
    color: var(--text-primary);
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.credit-balance .balance-text {
    display: inline-block;
    margin-right: 6px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 8pt;
}
.credit-balance .balance-amount { font-weight: bold; color: var(--gold); }

/* ── Search form ───────────────────────────────────────────── */
.search-form, .search-form2 {
    display: none;
    margin: 0 0 10px 0;
    padding: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-surface-alt);
}
.search-form p, .search-form2 p {
    margin: 0;
    padding: 5px 8px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.search-form label, .search-form2 label {
    display: inline-block;
    margin: 0 0 3px;
    font-size: 8pt;
    font-style: italic;
    color: var(--text-muted);
}
.search-form input[type=text], .search-form2 input[type=text] {
    display: inline-block;
    margin: 0 0 2px;
    padding: 2px 4px;
    font-size: 8pt;
    width: 90px;
}
.search-form input[type=submit], .search-form2 input[type=submit] {
    display: inline-block;
    margin: 0 0 2px;
    font-size: 8pt;
    font-weight: bold;
}
.search-form input[type=button],  .search-form input[type=reset],
.search-form2 input[type=button], .search-form2 input[type=reset] {
    display: inline-block;
    margin: 0 0 2px;
    font-size: 8pt;
}
.search-form input[type=checkbox], .search-form2 input[type=checkbox] {
    display: inline-block;
    margin: 0 0 2px;
}
.search-form select, .search-form2 select {
    display: inline-block;
    margin: 2px 0;
}

.toggler         { font-weight: bold; font-style: italic; }
.toggler a       { color: var(--text-link); }

/* ── Info text (search results summary) ───────────────────── */
.info-text {
    margin-bottom: 6px;
    padding: 5px 10px;
    color: var(--text-muted);
    background-color: var(--bg-surface-alt);
    border: 1px solid var(--border);
    text-align: center;
    border-radius: 3px;
}
.info-text-total   { font-weight: bold; color: var(--text-primary); }
.info-text-results { font-weight: bold; color: var(--text-primary); }

/* ── Misc helpers ──────────────────────────────────────────── */
.center { text-align: center; }

.not-applicable { font-style: italic; color: var(--text-muted); }

.td-checkbox { text-align: center; }
.td-action   { color: var(--text-muted); text-align: center; }
.vertical-table .td-action { text-align: right; }

.sortable        { color: var(--text-primary); text-decoration: underline; }
.sortable:hover  { color: var(--gold); }

.raw-txn-log {
    padding: 10px;
    font-family: "Monaco", "Lucida Console", "Courier New", monospace;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    width: 96%;
    overflow: scroll;
}

.request, .fs-path {
    display: inline-block;
    padding: 2px 4px;
    font-family: Monaco, "Lucida Console", monospace;
    font-size: 8pt;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 2px;
}

.block {
    display: block;
    width: 80%;
    height: 40px;
}

.script-line     { font-family: Monaco, "Lucida Console", monospace; }
.script-line-num {
    display: inline-block;
    margin: 0;
    padding: 5px;
    background-color: var(--bg-surface-alt);
    border-right: 1px solid var(--border);
    color: var(--text-muted);
}
.script-line-code {
    display: inline-block;
    margin: 0;
    padding: 5px;
    color: var(--text-primary);
}

/* ── Shop table ────────────────────────────────────────────── */
.shop-table {
    width: 100%;
    color: var(--text-primary);
    border-spacing: 0 8px;
    border-collapse: separate;
}
.shop-table td {
    padding: 10px;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border);
}

/* ── Install table ─────────────────────────────────────────── */
.install_table th, .install_table td {
    padding: 5px 10px;
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.install_table th { background-color: var(--bg-table-head); color: var(--text-heading); }
.install_table td { width: 180px; text-align: center; background: var(--bg-table-row); }

.created { color: #66dd88; width: 80px; }
.missing  { color: #dd4444; width: 80px; }

/* ── Login / Register forms ────────────────────────────────── */
#register_form table td, #login_form table td { padding: 1px; }
#register_form table th label, #login_form table th label {
    display: block;
    padding: 5px;
    text-align: center;
    color: var(--text-heading);
}
#register_form input[type=text],
#register_form input[type=password],
#login_form input[type=text],
#login_form input[type=password] { width: 150px; }
#register_form select, #login_form select { width: 157px; }

/* ── Character stats widget ────────────────────────────────── */
.character-stats {
    border-spacing: 0;
    border-collapse: collapse;
}
.character-stats td {
    padding: 0 10px 5px 0;
    border: 0;
    text-align: center;
    color: var(--text-primary);
}
.character-stats .stat-name  { color: var(--text-muted); }
.character-stats .stat-value { color: var(--text-heading); font-weight: bold; }

/* ── Emblem ────────────────────────────────────────────────── */
.emblem-server {
    margin: 0 0 2px;
    padding: 0 0 2px;
    font-size: 120%;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}
.emblem-server label         { display: block; }
.emblem-server label:hover   { cursor: pointer; }

/* ── Footer ────────────────────────────────────────────────── */
#site-footer {
    background: var(--bg-footer);
    border-top: 1px solid var(--border-accent);
    padding: 10px 20px;
    text-align: right;
    font-size: 8pt;
    flex-shrink: 0;
}
.footer-copy  { color: var(--text-footer); margin: 2px 0; }
.footer-copy a{ color: var(--text-muted); }
.footer-copy a:hover { color: var(--gold); }
.footer-info  { color: var(--text-footer); margin: 2px 0; }
.footer-info strong { color: var(--text-muted); }
.footer-theme,
.footer-lang  { color: var(--text-footer); margin: 2px 0; display: inline-block; margin-left: 12px; }
.footer-theme select,
.footer-lang  select { font-size: 8pt; }

/* ── Legacy corner GIF spacers — hide them all ─────────────── */
img[src*="content_tl"],
img[src*="content_tr"],
img[src*="content_bl"],
img[src*="content_br"],
img[src*="loginbox_tl"],
img[src*="loginbox_tr"],
img[src*="loginbox_bl"],
img[src*="loginbox_br"],
img[src*="sidebar_complete_top"],
img[src*="sidebar_complete_bottom"],
img[src*="sidebar_admin_complete_top"],
img[src*="sidebar_admin_complete_bottom"],
img[src*="sidebar_top"],
img[src*="sidebar_bottom"],
img[src*="sidebar_tl"],
img[src*="sidebar_tr"],
img[src*="sidebar_bl"],
img[src*="sidebar_br"] {
    display: none !important;
}

/* ── Scrollbar (webkit) ────────────────────────────────────── */
::-webkit-scrollbar            { width: 8px; height: 8px; }
::-webkit-scrollbar-track      { background: var(--bg-body); }
::-webkit-scrollbar-thumb      { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent-purple); }