/*
 * OG-stijl: het grijze uiterlijk van het originele CrimeClub (Verdana, metalen balken, groenblauwe menurijen).
 * Alles hangt aan body.theme-og, dus Klassiek blijft onaangeroerd. Op de gsm wisselen alleen de kleuren;
 * vanaf 1024px komt ook het OG-kader: menu's als rijen, header met logo en wachttijden, profielkolom rechts.
 * Met de hand geschreven, los van de Tailwind-build.
 */

/* ---------- Kleuren en lettertype (alle schermen) ---------- */
.theme-og {
    --og-bg: #6b696b;
    --og-panel: #464646;
    --og-row: #4a656b;
    --og-row-hover: #557780;
    --og-green: #39de00;
    --og-menutop: linear-gradient(#535b5e 0.5px, #646c6f 3.5px, #6d7577 5.5px, #6f777a 7.5px, #6b7577 9.5px, #636d6f 11.5px, #576669 14.5px, #566467 15.5px, #526468 16.5px, #4b5e62 17.5px, #4e6165 18.5px, #50656a 20.5px, #52676c 22.5px);
    --og-top: linear-gradient(#595959 0.5px, #727272 5.5px, #747474 7.5px, #717171 9.5px, #696969 11.5px, #5d5d5d 15.5px, #5d5d5d 16.5px, #575757 17.5px, #5f5f5f 22.5px);
    --og-header: linear-gradient(#414141 0.5px, #444 3.5px, #444 5.5px, #585858 25.5px, #5f5f5f 42.5px, #626262 48.5px, #676767 65.5px, #656565 71.5px);
    --og-subheader: linear-gradient(#4f4f4f 0.5px, #545454 1.5px, #454545 23.5px, #414141 25.5px, #404040 32.5px);

    --font-sans: Verdana, Geneva, Tahoma, sans-serif;
    --color-page: var(--og-bg);
    --color-card: var(--og-panel);
    --color-card-hover: #525252;
    --color-card-deep: #3c3c3c;
    --color-line: #2b2b2b;
    --color-line-strong: #252525;
    --color-accent: #6a9aa3;
    --color-accent-hover: #7fb0b9;
    --color-accent-soft: var(--og-row);
    --color-ink: #fff;
    --color-muted: #dcdcdc;
    --color-faint: #b4b4b4;
    --color-money: #7cf05a;
    --color-success: var(--og-green);
    --radius-card: 8px;
    --radius-ui: 4px;
    background: var(--og-bg);
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.theme-og, .theme-og button, .theme-og input, .theme-og select, .theme-og textarea { font-family: Verdana, Geneva, Tahoma, sans-serif; }

/* Kaarten: grijs paneel met een metalen kop, zoals de vensters op het origineel. */
.theme-og .card { border-color: #2a2a2a; box-shadow: 0 1px 3px #0006; }
.theme-og {
    --cc-head-top: #747474;
    --cc-head-bottom: #575757;
    --cc-border: #2a2a2a;
}
.theme-og .card-head,
.theme-og .card-head:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    padding: 7px 10px;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: .3px;
    background: linear-gradient(var(--cc-head-top), var(--cc-head-bottom));
    border-bottom: 1px solid var(--cc-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.theme-og .card-head:after { display: none; }
.theme-og .card-tab { gap: 7px; font-family: Verdana, Geneva, Tahoma, sans-serif; letter-spacing: inherit; text-transform: none; color: #fff; font-size: inherit; font-weight: inherit; }
.theme-og .card-tab .icon { color: #fff !important; }

/* Knoppen en velden: metalen knoppen met een donkere rand. */
.theme-og .btn-primary { background: linear-gradient(#7a7a7a, #555 55%, #4b4b4b); color: #fff; border: 1px solid #222; box-shadow: inset 0 1px #ffffff30; }
.theme-og .btn-primary:hover { background: linear-gradient(#888, #5f5f5f 55%, #555); }
.theme-og .btn-secondary { background: linear-gradient(#5e5e5e, #474747); border-color: #222; color: #fff; }
.theme-og .field { background: #2f2f2f; border-color: #1e1e1e; }
.theme-og .field:focus { border-color: var(--og-row-hover); }

/* Balken: fel groen op donkergroen, met een zwarte rand en het getal erin. */
.theme-og .bar { background: #075c07; border: 1px solid #000; border-radius: 0; box-shadow: none; }
.theme-og .bar > span { border-radius: 0; }
.theme-og .bar > span:after { display: none; }

/* Tekst die er in het origineel groen uitzag: links naar hulp, online. */
.theme-og .text-success { color: var(--og-green) !important; }

/* Gsm: bovenbalk, strook en tabbalk in OG-grijs. */
.theme-og [data-region="mobile-hud"] { background-image: var(--og-header) !important; border-color: #2a2a2a; }
.theme-og [data-region="mobile-strip"] { border-color: #2a2a2a; }
.theme-og .tabbar { border-top: 1px solid #2a2a2a; }
.theme-og .menu-overlay { background: var(--og-bg); }

/* Gsm-menu: tegels, rijen en snelkoppelingen als grijze subheaderbalken van het origineel (#5b5b5b naar #464646). */
.theme-og { --og-sub: linear-gradient(to bottom, #5b5b5b 0%, #464646 100%); }
.theme-og .menu-tile,
.theme-og .menu-link,
.theme-og .menu-fav:not(.is-empty),
.theme-og .menu-catbar button { background: var(--og-sub); border-color: #2a2a2a; box-shadow: inset 0 1px #ffffff1a; }
.theme-og .menu-tile.is-premium { background: linear-gradient(to bottom, #6a5a36 0%, #4a412b 100%); border-color: #2a2a2a; }
.theme-og .menu-tile.is-here,
.theme-og .menu-link[aria-current="page"],
.theme-og .menu-fav[aria-current="page"],
.theme-og .menu-catbar button[aria-pressed="true"] { background: linear-gradient(to bottom, #5a7b82 0%, var(--og-row) 100%); border-color: #2a2a2a; }
.theme-og .menu-tile-bg, .theme-og .menu-link svg, .theme-og .menu-fav svg { color: #fff; }
.theme-og .menu-label { color: #fff; letter-spacing: 0; text-transform: none; font-size: 12px; background: var(--og-sub); border: 1px solid #2a2a2a; border-radius: 4px; padding: 6px; margin: .25rem 0 .6rem; }
.theme-og .menu-overlay > .sticky { background: var(--og-sub); border-color: #2a2a2a; }
.theme-og .tabbar { background: var(--og-sub); }
.theme-og .tabbar-item { color: #e6e6e6; }
.theme-og [data-region="mobile-strip"] { background: var(--og-sub); }

/* Chat: de balk en het paneel in hetzelfde grijs. */
.theme-og .dock-bar, .theme-og .dock-head { background: var(--og-sub); border-color: #2a2a2a; }
.theme-og .dock-panel { background: var(--og-panel); }

/* ---------- Desktop: het OG-kader ---------- */
@media (min-width: 1024px) {
    .theme-og .og-grid { grid-template-columns: 13rem minmax(0, 1fr) 13rem; gap: .9rem; padding: 0 0 1rem; align-items: start; }
    .theme-og #menu-links, .theme-og #menu-rechts { top: .5rem; max-height: calc(100vh - 1rem - 2.25rem); }

    /* Menu's: een metalen kop per groep en daaronder groenblauwe rijen met een streepje ervoor. */
    .theme-og [data-region^="nav-"] { display: block; }
    .theme-og [data-region^="nav-"] > * { margin: 0 !important; }
    .theme-og .menu-card { border-radius: 0; border: 1px solid #1e1e1e; border-top: 0; background: var(--og-row); box-shadow: none; }
    .theme-og [data-region^="nav-"] > .menu-card:first-child { border-top: 1px solid #1e1e1e; }
    .theme-og .menu-card > summary.card-head { background: var(--og-menutop); padding: 4px 5px; border-bottom: 1px solid #1e1e1e; justify-content: center; }
    .theme-og .menu-card > summary .card-tab { justify-content: center; font-size: 11px; flex: 1; }
    .theme-og .menu-card > summary .menu-card-chevron { margin-left: 0; color: #fff !important; opacity: .6; position: absolute; right: 6px; }
    .theme-og .menu-card > ul { padding: 0; gap: 0; }
    .theme-og .menu-card > ul > li + li { margin-top: 0; }
    .theme-og .menu-card .nav-item { border-radius: 0; border-bottom: 1px solid #1e1e1e; padding: 2px 3px; min-height: 0; color: #fff; font-size: 11px; line-height: 13px; gap: .25rem; background: var(--og-row); }
    .theme-og .menu-card li:last-child .nav-item { border-bottom: 0; }
    .theme-og .menu-card .nav-item:before,
    .theme-og .menu-card .nav-item:hover:before,
    .theme-og .menu-card .nav-item[aria-current="page"]:before { content: "- "; position: static; inset: auto; width: auto; height: auto; border: 0; background: none; box-shadow: none; border-radius: 0; white-space: pre; }
    .theme-og .menu-card .nav-item:hover { background: var(--og-row-hover); padding-left: 3px; }
    .theme-og .menu-card .nav-item[aria-current="page"] { background: #3a5257; font-weight: 700; }
    .theme-og .menu-card .nav-item .icon { display: none; }
    .theme-og .menu-count { background: #2d3f43 !important; color: #fff !important; border-radius: 2px; font-size: 10px; line-height: 13px; }

    /* Header: logo links, wachttijden rechts; daaronder de knoppenbalk. */
    .theme-og .og-header { border: 1px solid #1e1e1e; background: var(--og-header); }
    .theme-og .og-header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: .4rem .6rem .4rem 1rem; }
    .theme-og .og-logo img { display: block; width: 230px; height: auto; }
    .theme-og .og-timers { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 2px 1rem; background: #2b2b2b; border: 1px solid #1a1a1a; border-radius: 8px; padding: .3rem .7rem; box-shadow: inset 0 1px 3px #000a; }
    .theme-og .og-timers a { display: flex; align-items: center; gap: .35rem; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; }
    .theme-og .og-timers a .icon { color: #c9c9c9; }
    .theme-og .og-timers .og-now { color: #8ef07a; }
    .theme-og .og-timers [data-countdown] { color: #ffd34d; }
    .theme-og .og-header-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; border-top: 1px solid #1e1e1e; background: var(--og-subheader); padding: .4rem .5rem; }
    .theme-og .og-buttons, .theme-og .og-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
    .theme-og .og-btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #1e1e1e; border-radius: 5px; background: linear-gradient(#6a6a6a, #4d4d4d 55%, #444); box-shadow: inset 0 1px #ffffff26, 0 1px 2px #0008; color: #fff; padding: .3rem .6rem; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
    .theme-og .og-btn:hover { background: linear-gradient(#777, #585858 55%, #4d4d4d); }
    .theme-og .og-btn[aria-current="page"] { background: linear-gradient(#4f6c72, #3c5459); }
    .theme-og .og-btn-icon { padding: .3rem .45rem; }
    .theme-og .og-btn .og-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-warning); }
    .theme-og .og-btn .og-badge { border-radius: 3px; background: #2b2b2b; padding: 0 .3rem; font-size: 10px; }
    .theme-og .og-btn .og-badge.is-danger { background: var(--color-danger); }
    .theme-og .og-tools [data-inbox-badge] { box-shadow: none; }
    .theme-og .og-chips { display: flex; flex-wrap: wrap; gap: .35rem; border-top: 1px solid #1e1e1e; padding: .35rem .5rem; background: #3e3e3e; }

    /* Profielblok rechts. */
    .theme-og .og-panel { border: 1px solid #1e1e1e; background: var(--og-row); }
    /* Profiel en de menu's eronder vormen één kolom, zonder tussenruimte en met één lijn ertussen. */
    .theme-og .og-profile + [data-region="nav-right"] > .menu-card:first-child { border-top: 0; }
    .theme-og .og-panel-head { background: var(--og-menutop); border-bottom: 1px solid #1e1e1e; padding: 4px 5px; text-align: center; font-size: 11px; font-weight: 700; }
    .theme-og .og-avatar { display: block; width: 100px; margin: .4rem auto; border: 1px solid #1e1e1e; background: #555; }
    .theme-og .og-avatar img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
    .theme-og .og-rows { border-top: 1px solid #1e1e1e; }
    .theme-og .og-rows li { border-bottom: 1px solid #1e1e1e; padding: 2px 3px; font-size: 11px; line-height: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .theme-og .og-rows li:last-child { border-bottom: 0; }
    .theme-og .og-rows b { font-weight: 700; color: #fff; }
    .theme-og .og-meter { display: flex; align-items: center; gap: .4rem; padding: 3px; }
    .theme-og .og-meter > :first-child { width: 3rem; flex-shrink: 0; }
    .theme-og .og-bar { position: relative; flex: 1; height: 15px; background: #075c07; border: 1px solid #000; }
    .theme-og .og-bar > span { display: block; height: 100%; background: #00e600; }
    .theme-og .og-bar.is-low > span { background: #e53a2c; }
    .theme-og .og-bar > b { position: absolute; inset: 0; display: grid; place-items: center; color: #000 !important; font-size: 11px; }

    /* Voettekst en chatbalk onderaan in het grijs van de header. */
    .theme-og .site-footer { color: #e0e0e0; }
}