/* ROOT */
:root {
    --actionlink-color: rgba(63,92,207,.8);
    --body-color: #606c76;
    --html-color: #606c76;
    --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 colors */
    --sb-bg: #0c1426;
    --sb-expand: #131E38;
    --sb-text: #b5b9cb;
    --sb-text-soft: rgba(255,255,255,0.8);
    --sb-hover: #515acc;
    /* App background */
    --app-bg: #0f172a;
    /* Layout */
    --sb-width: 180px;
    --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;
    --label-color: #0c1426;
    --small-button-blue-color: white;
     --small-button-blue-bg:#00659e;
}


/* JKPNG THEME */
    :root.green {
        --label-color: #183c49;
        --app-bg: #0f172a;
        --sb-bg: #183c49;
        --sb-expand: #1E5163;
        --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.blue {
        --sb-bg: #1e2a44;
        --sb-expand: #2a3b5f;
        --sb-text: #e5e7eb;
        --nb-bg: #1e2a44;
        --nb-text: #e5e7eb;
        --small-button-blue-color: #e5e7eb;
        --small-button-blue-bg: #1e2a44;
    }
    :root.dark {
        --actionlink-color: white;
        --label-color: white;
        --body-color: white;
        --html-color: white;
        --app-bg: #0b1220;
        --sb-bg: #111827;
        --sb-expand: #1f2937;
        --sb-text: #e5e7eb;
        --h-text: #e5e7eb;
        --bg: #0f172a;
        --card-bg: #1e293b;
        --text: #e5e7eb;
        --nb-bg: #111827;
        --nb-text: #e5e7eb;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --amiga-header-top: #1f2937;
        --amiga-header-mid: #19212e;
        --amiga-header-bottom: #111827;
        --amiga-highlight: rgba(255,255,255,0.2);
        --amiga-shadow: rgba(0,0,0,0.6);
    }
    :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 */
    }
    :root.red {
        --sb-bg: #2a1a1a;
        --sb-expand: #3a2424;
        --sb-text: #f3f4f6;
        --nb-bg: #2a1a1a;
        --nb-text: #f3f4f6;
        --small-button-blue-color: #e5e7eb;
        --small-button-blue-bg: #f3f4f6;
    }
    :root.neonold {
        --label-color: white;
        --app-bg: #050505;
        --sb-bg: #0a0a0a;
        --sb-expand: #111;
        --sb-text: #00ffff;
        --h-text: #00ffff;
        --bg: #050505;
        --card-bg: #0f0f0f;
        --text: black;
        --nb-bg: #0a0a0a;
        --nb-text: #00ffff;
        --mud-palette-background: var(--bg);
        --mud-palette-surface: var(--card-bg);
        --amiga-header-top: #111111;
        --amiga-header-mid: #0a0a0a;
        --amiga-header-bottom: #050505;
    }
    :root.neon {
        --sb-bg: #0a0a0a;
        --sb-expand: #111;
        --sb-text: #00ffff;
        --nb-bg: #0a0a0a;
        --nb-text: #00ffff;
        
    }

html {
    color: var(--html-color);
    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: var(--body-color);
    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);
}