/* ==========================================================================
   css/theme/chrome.css — Unified persistent chrome (KG theme)
   --------------------------------------------------------------------------
   Modernises the SHARED CHROME shown on every logged-in page so the frame
   feels like one cohesive dark-navy + orange "hacker" UI:
     - the player status bar (replaces the retro green-bordered table look)
     - the left / right sidebars (consistency refinements only)
     - the sub-menu wrapper and the main page title

   Token-based and additive. Loaded AFTER kg-theme.css and statusbar-fix.css,
   so equal-specificity rules here win in the cascade. The classic palette is
   preserved (navy surfaces, orange accents, green for active actions).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Status bar — modern dark card
   -------------------------------------------------------------------------- */
.site-content-statusbar {
    margin: 0 0 1rem 0;
}

.site-content-statusbar-table {
    display: grid;
    grid-template-columns: minmax(8rem, 1.4fr) repeat(5, minmax(5rem, 1fr));
    grid-auto-rows: minmax(2.4rem, auto);
    gap: 1px;
    /* Hairline grid: the gap shows the surface bg through as dividers */
    background: var(--kg-line);
    border: 1px solid var(--kg-line);
    border-radius: var(--kg-radius);
    overflow: hidden;
    box-shadow: var(--kg-shadow);
    color: var(--kg-text-1);
    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    font-size: 0.8rem;
}

.site-content-statusbar-table > div {
    border: 0;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--kg-surface);
    color: var(--kg-text-1);
    transition: background 0.18s ease;
    line-height: 1.2;
    text-align: center;
}

.site-content-statusbar-table > div:hover {
    background: var(--kg-surface-2);
}

.site-content-statusbar-table strong {
    color: var(--kg-text-1);
    font-weight: 600;
}

/* World badge — primary orange accent, sits left and spans both rows */
.site-content-statusbar-table-world {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: flex-start !important;
    background: var(--kg-surface-2) !important;
    border-left: 3px solid var(--kg-accent) !important;
    text-align: left;
}

.site-content-statusbar-table-world strong {
    color: var(--kg-accent);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Level — orange accent number */
.site-content-statusbar-table-lvl { grid-column: 2; grid-row: 1; }
.site-content-statusbar-table-lvl strong { color: var(--kg-accent-2); }

/* Money — keep neutral-bright */
.site-content-statusbar-table-money { grid-column: 3; grid-row: 1; }
.site-content-statusbar-table-money strong { color: var(--kg-text-1); }

/* Core stats: subtle muted labels, bright values */
.site-content-statusbar-table-ges  { grid-column: 4; grid-row: 1; }
.site-content-statusbar-table-int  { grid-column: 5; grid-row: 1; }
.site-content-statusbar-table-ep   { grid-column: 6; grid-row: 1; }

.site-content-statusbar-table-ges abbr,
.site-content-statusbar-table-int abbr,
.site-content-statusbar-table-ep abbr {
    color: var(--kg-text-2);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

/* Current action / work — spans the rest of the second row, green when active */
.site-content-statusbar-table-work {
    grid-column: 2 / 6;
    grid-row: 2;
    color: var(--kg-success);
    font-weight: 600;
    justify-content: flex-start !important;
    text-align: left;
}
.site-content-statusbar-table-work strong { color: var(--kg-success); }

/* Hack points — accent-edged cell at far right of the action row */
.site-content-statusbar-table-hp {
    grid-column: 6;
    grid-row: 2;
    background: var(--kg-surface-2) !important;
    color: var(--kg-accent-2) !important;
    font-weight: 700;
}

/* Badges inside the world cell */
.site-content-statusbar-table .badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.18em 0.45em;
    border-radius: var(--kg-radius-sm);
    vertical-align: middle;
}
.site-content-statusbar-table .badge-warning {
    background: var(--kg-accent);
    color: #fff;
}
.site-content-statusbar-table .badge-info {
    background: var(--kg-surface-3);
    color: var(--kg-text-1);
    border: 1px solid var(--kg-line);
}

/* Icons */
.site-content-statusbar-table img {
    vertical-align: middle;
    max-width: 1rem;
    height: auto;
}

/* Links inside the status bar (e.g. "fertig!") */
.site-content-statusbar-table a {
    color: var(--kg-accent);
    text-decoration: none;
    font-weight: 700;
    transition: color 0.15s ease;
}
.site-content-statusbar-table a:hover {
    color: var(--kg-accent-2);
    text-decoration: underline;
}

/* Responsive collapse */
@media (max-width: 1200px) {
    .site-content-statusbar-table {
        grid-template-columns: repeat(3, 1fr);
    }
    .site-content-statusbar-table-world {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    .site-content-statusbar-table-lvl  { grid-column: 1; grid-row: auto; }
    .site-content-statusbar-table-money { grid-column: 2; grid-row: auto; }
    .site-content-statusbar-table-ges  { grid-column: 3; grid-row: auto; }
    .site-content-statusbar-table-int  { grid-column: 1; grid-row: auto; }
    .site-content-statusbar-table-ep   { grid-column: 2; grid-row: auto; }
    .site-content-statusbar-table-work { grid-column: 3; grid-row: auto; justify-content: center !important; text-align: center; }
    .site-content-statusbar-table-hp   { grid-column: 1 / -1; grid-row: auto; }
}

@media (max-width: 768px) {
    .site-content-statusbar-table {
        grid-template-columns: repeat(2, 1fr);
        font-size: 0.75rem;
    }
    .site-content-statusbar-table-work { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .site-content-statusbar-table {
        grid-template-columns: 1fr;
    }
    .site-content-statusbar-table-world,
    .site-content-statusbar-table-work,
    .site-content-statusbar-table-hp {
        justify-content: flex-start !important;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   2. Sidebars — consistency refinements (NOT a redesign)
      Match the status-bar surface/border/radius so the frame feels unified.
   -------------------------------------------------------------------------- */
.site-content-left .sidebar,
.site-content-right .sidebar {
    background: var(--kg-surface);
    border: 1px solid var(--kg-line);
    border-radius: var(--kg-radius);
    box-shadow: var(--kg-shadow);
    overflow: hidden;
}

/* Section header bands — keep the orange identity, tighten the treatment */
.site-content-left .menu-div,
.site-content-right .menu-div {
    background: linear-gradient(135deg, var(--kg-accent) 0%, var(--kg-accent-2) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: none;
    padding: 0.4rem 0.75rem;
}
.site-content-left .menu-text,
.site-content-right .menu-text {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Navigation rows — consistent spacing + hover/active feedback */
.site-content-left .sidebar-items-left,
.site-content-right .sidebar-items-right {
    padding: 0.35rem 0;
}

.site-content-left .sidebar-items-left > div,
.site-content-right .sidebar-items-right > div {
    padding: 0.3rem 0.75rem;
    border-radius: var(--kg-radius-sm);
    margin: 0.05rem 0.4rem;
    transition: background 0.15s ease;
}
.site-content-left .sidebar-items-left > div:hover,
.site-content-right .sidebar-items-right > div:hover {
    background: var(--kg-surface-2);
}

.site-content-left .sidebar-items-left a,
.site-content-right .sidebar-items-right a,
.site-content-left .sidebar-items-left a.link,
.site-content-right .sidebar-items-right a.link {
    color: var(--kg-text-1);
    text-decoration: none;
    font-size: 0.78rem;
    transition: color 0.15s ease;
}
.site-content-left .sidebar-items-left > div:hover a,
.site-content-right .sidebar-items-right > div:hover a {
    color: var(--kg-accent-2);
    text-decoration: none;
}

/* Username block */
.site-content-left .sidebar-username {
    color: var(--kg-text-1);
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--kg-line);
    letter-spacing: 0.02em;
}

/* Quick-action chips */
.site-content-left .sidebar-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem 0.6rem;
    border-bottom: 1px solid var(--kg-line);
}
.site-content-left .sidebar-quick-actions a {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--kg-text-1);
    background: var(--kg-surface-2);
    border: 1px solid var(--kg-line);
    border-radius: var(--kg-radius-sm);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.site-content-left .sidebar-quick-actions a:hover {
    background: var(--kg-surface-3);
    border-color: var(--kg-accent);
    color: var(--kg-accent-2);
    text-decoration: none;
}

/* Notification counters / badges */
.site-content-left .sidebar-notification,
.site-content-right .sidebar-notification {
    color: var(--kg-accent-2);
    font-weight: 700;
    font-size: 0.72rem;
}
.site-content-left .sidebar-notification.event-badge {
    background: var(--kg-accent);
    color: #fff;
    border-radius: 999px;
    padding: 0 0.4em;
    min-width: 1.2em;
    display: inline-block;
    text-align: center;
}

/* Seasonal countdown small print */
.site-content-left .sidebar-season-countdown {
    color: var(--kg-text-2);
    padding: 0.2rem 0.75rem;
}
.site-content-left .sidebar-season-countdown strong { color: var(--kg-accent-2); }

/* Right-sidebar link variants keep their classic semantic colours but align
   sizing/hover with the rest of the chrome */
.site-content-right .sidebar-items-right a.link7,
.site-content-right .sidebar-items-right a.link13,
.site-content-right .sidebar-items-right a.link18,
.site-content-right .sidebar-items-right a.link3 {
    font-size: 0.78rem;
}
.site-content-right .sidebar-items-right a.link13 { color: var(--kg-accent); }
.site-content-right .sidebar-items-right a.link18 { color: #57d8e6; }
.site-content-right .sidebar-items-right a.link3  { color: var(--kg-success); }

/* Sidebar images */
.site-content-left .sidebar-items-left img,
.site-content-right .sidebar-items-right img {
    vertical-align: middle;
    margin-right: 0.45rem;
}

/* --------------------------------------------------------------------------
   3. Sub-menu wrapper — sit the legacy table content on a unified surface
      The submenu.php content is wrapped in #main-content; give the outer
      wrapping table a transparent base so the cards inside breathe, and align
      its top spacing with the status bar.
   -------------------------------------------------------------------------- */
#main-content > div > table[width="100%"] {
    border-collapse: separate;
    border-spacing: 0;
}

/* --------------------------------------------------------------------------
   4. Main page title — modern accent heading consistent with the chrome
   -------------------------------------------------------------------------- */
.main_title {
    color: var(--kg-text-1);
    font-weight: 700;
    letter-spacing: 0.01em;
}
.main_title b,
.main_title strong { color: var(--kg-text-1); }