/*
 * Grey-stijl: donkergrijze vlakken, Arial, titelbalken met een grijs verloop, kleine hoeken en
 * groene knoppen, zoals de browsergames van vroeger. Alles hangt aan body.theme-grey, dus Klassiek
 * blijft onaangeroerd. Zelfde opbouw als Klassiek (header, menu's links en rechts, middenkolom); alleen
 * het uiterlijk wisselt. Met de hand geschreven, los van de Tailwind-build.
 */

/* ---------- Kleuren en lettertype ---------- */
.theme-grey {
    --gr-bar: linear-gradient(#555, #333);
    --gr-bar-hover: linear-gradient(#5f5f5f, #3a3a3a);
    --gr-row: linear-gradient(#3b3b3b, #303030);
    --gr-row-hover: linear-gradient(#454545, #383838);
    --gr-row-active: linear-gradient(#4d6b2c, #3c5622);
    --gr-green: linear-gradient(#8bc34a, #5d8f2a);
    --gr-green-hover: linear-gradient(#9bd35a, #6aa032);

    --font-sans: Arial, Helvetica, sans-serif;
    --color-page: #191919;
    --color-card: #333;
    --color-card-hover: #3b3b3b;
    --color-card-deep: #2a2a2a;
    --color-line: #444;
    --color-line-strong: #555;
    --color-accent: #85b200;
    --color-accent-hover: #9bd000;
    --color-accent-soft: #3a4a25;
    --color-brass: #d6b43f;
    --color-ink: #ddd;
    --color-muted: #aaa;
    --color-faint: #888;
    --color-money: #9ccc5a;
    --color-success: #85b200;
    --color-warning: #e2b100;
    --color-danger: #e0503a;
    --radius-card: 5px;
    --radius-ui: 3px;
    background: #191919 !important;
    background-image: none !important;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.theme-grey, .theme-grey button, .theme-grey input, .theme-grey select, .theme-grey textarea { font-family: Arial, Helvetica, sans-serif; }

/* ---------- Kaarten: grijs vlak met een titelbalk ---------- */
.theme-grey .card { border: 0; border-radius: 5px; background: #333; box-shadow: 0 0 2px #000; }
.theme-grey .card-head,
.theme-grey .card-head:first-child {
    min-height: 30px;
    padding: 0 10px;
    gap: 6px;
    background: var(--gr-bar);
    border-bottom: 1px solid #222;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 0 2px #00000080;
}
.theme-grey .card-head:after { display: none; }
.theme-grey .card-tab { gap: 6px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff; }
.theme-grey .card-tab .icon { color: #ddd !important; width: 14px; height: 14px; }
.theme-grey .card-head .text-muted { color: #ccc !important; font-weight: 400; }

/* ---------- Knoppen, velden, balken ---------- */
.theme-grey .btn { border-radius: 3px; font-weight: 700; font-size: 12px; text-shadow: 0 1px #0007; }
.theme-grey .btn-primary { background: var(--gr-green); color: #fff; border: 1px solid #3c5a1a; box-shadow: inset 0 1px #ffffff40; }
.theme-grey .btn-primary:hover { background: var(--gr-green-hover); }
.theme-grey .btn-secondary { background: linear-gradient(#5a5a5a, #3f3f3f); color: #eee; border: 1px solid #222; box-shadow: inset 0 1px #ffffff26; }
.theme-grey .field { background: #222; border-color: #111; border-radius: 3px; color: #ddd; }
.theme-grey .field:focus { border-color: #85b200; }
.theme-grey .bar { background: #222; border: 1px solid #111; border-radius: 2px; box-shadow: none; }
.theme-grey .bar > span { border-radius: 0; }
.theme-grey .bar > span:after { display: none; }
.theme-grey .badge { border-radius: 3px; }
.theme-grey a:not(.btn):not(.nav-item):not([class*="menu-"]) { color: inherit; }

/* Fotokaarten (misdaad, voortgang, bezittingen): rechte hoeken en een dunne rand. */
.theme-grey .photo-row, .theme-grey .crime-pick { border-radius: 4px; border-color: #444; }
.theme-grey .crime-pick:has(input:checked) { border-color: #85b200; box-shadow: 0 0 0 1px #85b200; }

/* ---------- Header en knoppenbalk ---------- */
.theme-grey .site-header, .theme-grey header.card { border-radius: 5px; }
.theme-grey [data-region="hud"] { background: #2a2a2a; }

/* ---------- Menu's links en rechts: titelbalk per groep, grijze rijen eronder ---------- */
.theme-grey .menu-card { border: 0; border-radius: 5px; background: #333; box-shadow: 0 0 2px #000; overflow: hidden; }
.theme-grey .menu-card > summary.card-head { min-height: 30px; padding: 0 10px; background: var(--gr-bar); border-bottom: 1px solid #222; }
.theme-grey .menu-card > summary .card-tab { font-size: 12px; letter-spacing: 0; text-transform: none; color: #fff; }
.theme-grey .menu-card > summary .menu-card-chevron { color: #ccc !important; }
.theme-grey .menu-card > ul { padding: 0; gap: 0; }
.theme-grey .menu-card > ul > li + li { margin-top: 0; }
.theme-grey .menu-card .nav-item { border-radius: 0; border-bottom: 1px solid #222; padding: 6px 10px; min-height: 0; color: #ddd; font-size: 12px; background: var(--gr-row); }
.theme-grey .menu-card li:last-child .nav-item { border-bottom: 0; }
.theme-grey .menu-card .nav-item:before,
.theme-grey .menu-card .nav-item:hover:before,
.theme-grey .menu-card .nav-item[aria-current="page"]:before { display: none; }
.theme-grey .menu-card .nav-item:hover { background: var(--gr-row-hover); color: #fff; }
.theme-grey .menu-card .nav-item[aria-current="page"] { background: var(--gr-row-active); color: #fff; font-weight: 700; }
.theme-grey .menu-count { background: #222 !important; color: #ccc !important; border-radius: 3px; }

/* ---------- Gsm: bovenbalk, menu en tabbalk ---------- */
.theme-grey [data-region="mobile-hud"] { background: var(--gr-bar) !important; border-color: #222; }
.theme-grey .tabbar { background: var(--gr-bar); border-top: 1px solid #222; }
.theme-grey .menu-overlay { background: #191919; }
.theme-grey .menu-tile, .theme-grey .menu-link, .theme-grey .menu-fav:not(.is-empty), .theme-grey .menu-catbar button { background: var(--gr-row); border-color: #222; border-radius: 4px; box-shadow: none; }
.theme-grey .menu-tile.is-here, .theme-grey .menu-link[aria-current="page"] { background: var(--gr-row-active); }
.theme-grey .menu-label { background: var(--gr-bar); color: #fff; border-radius: 4px; padding: 6px 10px; letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 700; }

/* ---------- Chat en voettekst ---------- */
.theme-grey .dock-bar, .theme-grey .dock-head { background: var(--gr-bar); border-color: #222; }
.theme-grey .dock-panel { background: #333; }