/* HTN 2.5 Reloaded - einheitliches Layout fuer alle Seiten.

   Die Farben stammen aus dem Spiel selbst (styles/crystal-old):
     Akzent  #800000  (Links, Ueberschriften, Buttons)
     Kopf    #d0d0d0  (Tabellenkoepfe, Navigation)
     Flaeche #e0e0e0  (Tabellenzellen)
     hell    #f0f0f0  (abgesetzte Bloecke)
     Linie   #c0c0c0
     Titel   #808080  (h2)
   Keine Verlaeufe, keine runden Ecken, Verdana - wie der Rest des Spiels.  */

:root {
    --rl-accent:      #800000;
    --rl-accent-dark: #600000;
    --rl-head:        #d0d0d0;
    --rl-surface:     #e0e0e0;
    --rl-surface-alt: #f0f0f0;
    --rl-line:        #c0c0c0;
    --rl-ink:         #000000;
    --rl-ink-soft:    #707070;
    --rl-title:       #808080;
}

/* ---------- Untermenue / Reiter ---------- */
.rl-subnav, .content .submenu {
    margin: 6px 0 14px 0;
    padding: 6px 10px;
    background: var(--rl-head);
    border: 1px solid var(--rl-line);
    font-size: 12px;
}
.rl-subnav a, .content .submenu a { text-decoration: none; color: var(--rl-accent); }
.rl-subnav strong, .content .submenu strong { color: var(--rl-ink); }
.content .submenu p { margin: 0; }

/* ---------- Tabellen ---------- */
.rl-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px 0;
    border: 1px solid var(--rl-line);
}
.rl-table th {
    background: var(--rl-head);
    color: var(--rl-ink);
    text-align: left;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--rl-line);
}
.rl-table td {
    background: var(--rl-surface);
    padding: 5px 8px;
    border: 1px solid var(--rl-line);
    vertical-align: top;
    font-size: 12px;
}
.rl-table tr.rl-cat th { background: var(--rl-head); font-size: 12px; }
.rl-table td.rl-num { text-align: center; width: 30px; background: var(--rl-head); font-weight: bold; }
.rl-table th.rl-center, .rl-table td.rl-center { text-align: center; }
.rl-table tr:hover td { background: #d8d8d8; }

/* ---------- Meldungen ---------- */
.rl-ok, .rl-error,
.content .error, .content .ok, .content .info, .content .important, .content .warning {
    padding: 8px 12px;
    margin: 0 0 12px 0;
    border: 1px solid var(--rl-line);
    background: var(--rl-surface-alt);
}
.rl-ok, .content .ok       { border-left: 4px solid #4a7a3a; }
.rl-error, .content .error { border-left: 4px solid var(--rl-accent); }
.content .info, .content .important, .content .warning { border-left: 4px solid var(--rl-title); }
/* Nur meine eigenen Boxen bekommen eine schlichte Ueberschrift. Die h3 der
   Altseiten NICHT anfassen - das Theme haengt dort die Icons (stop/ok/info)
   per background-image an und braucht Hoehe und Innenabstand dafuer. */
.rl-ok h3, .rl-error h3 {
    margin: 0 0 4px 0; font-size: 13px; border: none; padding: 0; text-decoration: none; height: auto;
}
.rl-ok p, .rl-error p, .content .error p, .content .ok p,
.content .info p, .content .important p, .content .warning p { margin: 0; }

/* ---------- Fortschritt ---------- */
.rl-progress { border: 1px solid #808080; background: #fff; width: 220px; height: 16px; margin-top: 4px; }
.rl-progress-fill {
    background: var(--rl-accent); color: #fff; font-size: 8pt; height: 16px;
    overflow: hidden; white-space: nowrap; padding-left: 3px; line-height: 16px;
}

/* ---------- Text-Auszeichnung ---------- */
.rl-yes { color: #2d6a2d; font-weight: bold; }
.rl-no  { color: var(--rl-accent); font-weight: bold; }
.rl-muted, .hint, .details, .remaining { color: var(--rl-ink-soft); font-size: 11px; }

.rl-badge {
    display: inline-block; padding: 1px 6px; font-size: 8pt;
    background: var(--rl-accent); color: #fff;
}

/* ---------- Guthaben-Leiste ---------- */
.rl-balance, .content .balance-bar, .content #bank-balance {
    margin: 0 0 12px 0;
    padding: 6px 10px;
    background: var(--rl-head);
    border: 1px solid var(--rl-line);
    font-size: 12px;
}
.rl-balance strong, .content .balance-bar strong, .content #bank-balance .balance {
    color: var(--rl-accent);
    font-size: 14px;
}

.rl-form-inline { margin: 0; display: inline; }
.rl-btn-small { font-size: 8pt; }
.rl-req-list { margin: 2px 0 0 0; padding-left: 16px; }
.rl-req-list li { font-size: 11px; }

/* ---------- Abschnitts-Ueberschrift ---------- */
.rl-head {
    margin: 16px 0 6px 0;
    padding: 0 0 3px 0;
    border-bottom: 1px solid var(--rl-line);
    font-size: 13px;
    font-weight: bold;
    color: var(--rl-accent);
}
.rl-head .rl-muted { font-weight: normal; }

/* ---------- Panel ---------- */
.rl-panel {
    border: 1px solid var(--rl-line);
    background: var(--rl-surface-alt);
    margin: 0 0 14px 0;
}
.rl-panel > .rl-panel-head {
    background: var(--rl-head);
    color: var(--rl-ink);
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid var(--rl-line);
}
.rl-panel > .rl-panel-body { padding: 8px 10px; font-size: 12px; }

/* ---------- Kennzahlen (Label / Wert) ---------- */
.rl-stats { border-collapse: collapse; width: 100%; margin: 0 0 10px 0; }
.rl-stats td { padding: 3px 8px; font-size: 12px; border-bottom: 1px solid var(--rl-line); background: transparent; }
.rl-stats td.rl-k { color: var(--rl-ink-soft); width: 190px; }
.rl-stats td.rl-v strong { color: var(--rl-accent); }
.rl-stats tr:last-child td { border-bottom: none; }

/* ---------- Status-Pillen ---------- */
.rl-pill {
    display: inline-block; padding: 1px 7px; font-size: 11px; font-weight: bold;
    border: 1px solid; white-space: nowrap;
}
.rl-pill-on   { background: #e2ebe0; border-color: #4a7a3a; color: #2d5a20; }
.rl-pill-off  { background: #e8e8e8; border-color: #a8a8a8; color: #666; }
.rl-pill-warn { background: #f0e2e2; border-color: var(--rl-accent); color: var(--rl-accent); }

/* ============================================================
   Angleichung der Altbestand-Seiten an dieselben Bausteine.
   ============================================================ */

.content table { border-collapse: collapse; margin: 0 0 14px 0; }
.content table th {
    background: var(--rl-head);
    color: var(--rl-ink);
    text-align: left;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--rl-line);
}
.content table td {
    background: var(--rl-surface);
    padding: 5px 8px;
    border: 1px solid var(--rl-line);
    font-size: 12px;
}
.content table tr.greytr2 td { background: #d8d8d8; }

/* Ueberschriften: NUR die Farbe angleichen. Groesse, Hoehe, Innenabstand und
   background-image kommen vom Theme - dort haengen die 108 Icons (Cluster,
   Fehler, OK, Info, Statistik ...). Wer die Box anfasst, loescht die Icons. */
.content h3, .content h4, .content h5 { color: var(--rl-accent); }

/* Abgesetzte Bloecke der Altseiten */
.content .info-box, .content .config-section, .content .change-form,
.content .hw-category, .content .pc-hardware, .content .nav-bar,
.content #lottery-info, .content #lottery-buy, .content #lottery-history,
.content .pc-stats, .content .section {
    background: var(--rl-surface-alt);
    border: 1px solid var(--rl-line);
    padding: 8px 12px;
    margin: 0 0 12px 0;
}

/* Buttons und Button-Links */
.content input[type="submit"], .content button,
.btn-change, .btn-submit, .btn-buy, .btn-kiste, .btn-repay, .btn-loan,
.btn-conn, .nav-bar .btn, .category-tabs .tab {
    font-family: Verdana, Arial, sans-serif;
    font-size: 11px;
    /* inline-block, sonst wirkt der senkrechte Innenabstand nicht auf die
       Zeilenhoehe und die Knoepfe ueberlappen den Text daneben */
    display: inline-block;
    vertical-align: middle;
    padding: 3px 12px;
    background: var(--rl-accent);
    color: #ffffff;
    border: 1px solid var(--rl-accent-dark);
    text-decoration: none;
    cursor: pointer;
}
.content input[type="submit"]:hover, .content button:hover,
.btn-change:hover, .btn-submit:hover, .btn-buy:hover, .btn-kiste:hover,
.btn-repay:hover, .btn-loan:hover, .btn-conn:hover,
.nav-bar .btn:hover, .category-tabs .tab:hover { background: var(--rl-accent-dark); }
.category-tabs .tab.active { background: var(--rl-accent-dark); font-weight: bold; }
.content input[type="submit"][disabled] { background: #b0b0b0; border-color: #909090; cursor: default; }

/* Semantische Zellen */
.cost, .price, .bonus, .speed, .amount, .conn-name, .qty { color: var(--rl-accent); }
.content .pc-stats .stat { display: inline-block; margin: 0 14px 2px 0; font-size: 12px; }
.content .pc-stats .stat strong { color: var(--rl-accent); }

/* Zeilen-Hover einheitlich */
.content table tr:hover td, .pc-table tr:hover td,
.conn-options tr:hover td, .config-table tr:hover td { background: #d8d8d8; }
.conn-options tr.current td, .config-table .total-row td { background: #d0d0d0; }

/* ---------- Event-Hinweisbalken ---------- */
.rl-eventbar {
    margin: 0 0 2px 0;
    padding: 5px 12px;
    background: var(--rl-accent);
    color: #ffffff;
    border: 1px solid var(--rl-accent-dark);
    font-size: 12px;
}
.rl-eventbar strong { color: #ffffff; letter-spacing: 0.3px; }
.rl-eventbar-time { color: #f0d0d0; }

/* Event-Liste auf der Startseite */
.rl-events-list { margin: 0; padding: 0; list-style: none; }
.rl-events-list li { padding: 3px 0; font-size: 12px; border-bottom: 1px solid var(--rl-line); }
.rl-events-list li:last-child { border-bottom: none; }
.rl-events-list .rl-ev-name { color: var(--rl-accent); font-weight: bold; }