/* ROOT */
:root {
    --bg: #ebebeb;
    --card-bg: #f4f4f4;
    --border: #bfc7d1;
    --text: #1a2640;
    --muted: #667085;
    /* Amiga header colors */
    --amiga-header-top: #7db9e8;
    --amiga-header-mid: #3f8fd1;
    --amiga-header-bottom: #2c6fb5;
    --amiga-highlight: rgba(255,255,255,0.7);
    --amiga-shadow: rgba(0,0,0,0.3);
    /* NEW Workbench-style grey header */
    --amiga-header-top: #d6d6d6;
    --amiga-header-mid: #c9c9c9;
    --amiga-header-bottom: #bfbfbf;
    --amiga-highlight: rgba(255,255,255,0.8);
    --amiga-shadow: rgba(0,0,0,0.25);
    /* Sidebar/*/
    --sb-bg: #0c1426;
    --sb-text: #b5b9cb;
    --sb-text-soft: rgba(255,255,255,0.8);
    --sb-hover: #515acc;
    /* Sidebar colors */
    --sb-bg: #0c1426;
    --sb-text: #b5b9cb;
    --sb-text-soft: rgba(255,255,255,0.8);
    --sb-hover: #515acc;
    /* App background */
    --app-bg: #0f172a;
    /* Layout */
    --sb-width: 200px;
    --sb-width-wide: 180px;
    /* Sizing */
    --sb-item-h: 36px;
    /* Typography */
    --sb-font: 1.05rem;
    --sb-font-lg: 1.4rem;
    --sb-font-xl: 1.8rem;
    /* Spacing */
    --sb-padding: 1rem;
    --h-text: #1a2640;
    /* Navbar */
    --nb-bg: white;
    --nb-text: #1a2640;
    --tab-bg: #d6d6d6;
    --tab-text: black;
    --tab-text-active: white;
    --tab-bg-hover: #bfbfbf;
}

    :root.light {
        --sb-bg: #f4f4f4;
        --sb-text: #333;
        --app-bg: #ffffff;
    }

    /* DARK THEME */
    :root.dark {
        --sb-bg: #0c1426;
        --sb-text: #b5b9cb;
        --app-bg: #0f172a;
    }
    /* JKPNG THEME */
    :root.green {
        --sb-bg: #183c49;
        --sb-text: #edeae4;
        --h-text: #183c49;
        --bg: #edeae4;
        --card-bg: #f5f3ef;
        --text: #183c49;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --nb-bg: #183c49;
        --nb-text: #edeae4;
    }

    :root.dark-mode {
        --sb-bg: #1e1e2f; /* MudBlazor Dark Sidebar */
        --sb-text: #cfcfe5; /* MudBlazor text */
        --sb-text-soft: rgba(255,255,255,0.7);
        --sb-hover: #90caf9; /* Light blue accent */
        --card-bg: #1e1e2f;
        --bg: #1e1e2f; /* MudBlazor dark background */
    }
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-size: 0.65rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    scroll-behavior: smooth;
    display: table;
}

body {
    margin: 0;
    color: #606c76;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
    font-size: 1.4em;
    line-height: 1.6;
    width: 100%;
    height: 100%;
    display: table-cell;
    background: var(--bg);
}
.card {
    background: var(--card-bg);
    border-radius: .25rem;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #aab4bf, 0 2px 4px rgba(0,0,0,0.1);
}