/*
bean-classic-theme.css — "classic" color/font patch for the 2026 redesign
=========================================================================
Restores the pre-redesign color scheme and typography (dark navy menu, black
top bar, blue outline buttons, black primary buttons, grey list chrome, green
checkboxes, black uppercase dropdown) WITHOUT changing the position, size or
layout of any element. Only colors, backgrounds, borders (colors), shadows and
font styling are overridden.

Usage: load AFTER core.css and admin.css — e.g. paste into the application's
local.css (bundled last) or serve as a tenant stylesheet. Removing the file
restores the new indigo theme. Everything below relies on the design tokens
introduced in the redesign, plus a small set of component-level color overrides
for places where the old design used colors that no longer map 1:1 to a token.
*/

/* ===== 1. Token overrides (does most of the work) ===== */
:root {
    /* Old blue family in place of indigo */
    --brand-50: #f8f8ff;      /* old hover/search tint */
    --brand-100: #f0f0f8;     /* old light-menu select */
    --brand-200: #ccccdd;
    --brand-300: #999999;     /* old focus-outline grey */
    --brand-500: #2222aa;
    --brand-600: #2222aa;     /* old link/control blue */
    --brand-700: #1a1a88;

    /* Old text greys */
    --ink: #000000;
    --ink-soft: #444444;
    --ink-faint: #999999;

    /* Old surface/border greys */
    --surface-0: #ffffff;
    --surface-1: #f8f8f8;
    --surface-2: #eeeeee;
    --surface-3: #dddddd;
    --border: #dddddd;
    --border-strong: #cccccc;

    /* Old state colors */
    --danger: #ff2222;
    --danger-hover: #dd2222;
    --success: #009900;

    /* Old hard shadows */
    --shadow-sm: none;
    --shadow-md: 5px 5px 10px #999999;
    --shadow-lg: 5px 5px 10px #666666;

    /* Chrome: navy rail (top bar handled below) */
    --chrome-back: #111133;
    --chrome-back-2: #111133;
    --tabfilter-back: #cccccc;

    /* Legacy variables back to their original values */
    --button-toggle-active: #aaaaaa;
    --form-control-color: #2222aa;
    --form-control-toggle: #22aa22;   /* green checkboxes */
    --form-control-disabled: #999999;
    --form-control-disabled-back: #eeeeee;
    --search-back: #f8f8ff;
    --menu-back-color: #111133;
    --menu-select-color: #222288;
    --menu-hover-color: #222266;
    --menu-line-color: #222266;
    --button-color: #2222dd;
    --lightmenu-select-color: #f0f0f8;
    --lightmenu-hover-color: #f0f0f0;
    --input-outline-color: #999999;
}

/* ===== 2. Page + login ===== */
body {
    background-color: #f8f8f8;
}

#login_area {
    background: #f8f8f8;   /* drop the radial indigo gradient */
}

input:focus, textarea:focus, select:focus {
    outline: 1px solid var(--input-outline-color);
    border-color: var(--border) !important;
}

/* ===== 3. Rail (old black top bar + navy menu) ===== */
#topLogo {
    background: #000000;
    box-shadow: 1px 0 0 #000000, inset 0 -1px 0 #000000;
}

#topLogo::after {
    color: #dddddd;
}

#language_select i, #profile_select i, #chat_select i {
    color: #dddddd;
}

#language_select i:hover, #profile_select i:hover, #chat_select i:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, .08);
}

#menu_area {
    box-shadow: 1px 0 0 #111133;
}

#menu_area div {
    color: #ffffff;
}

#menu_area_pin {
    color: #999999;
}

#menu_area_pin:hover {
    color: #aaaaaa;
}

.menu-item.menu-item--selected, .menu_selected {
    box-shadow: inset 3px 0 0 #7777ff;
}

.menu-item.menu-item--selected div {
    color: #ffffff;
}

/* Rail footer: old dark bottom bar */
#bottom_area {
    background-color: #303030;
    color: #a0a0a0;
    border-top-color: #606060;
    box-shadow: 1px 0 0 #303030;
}

/* ===== 4. Buttons ===== */
/* Default buttons: old blue outline on white */
input[type=button], .btn, .btn_icon {
    background-color: #ffffff;
    border-color: var(--button-color);
    color: var(--button-color);
    letter-spacing: 0.02rem;
}

input[type=button]:hover:enabled, .btn:hover:enabled, .btn_icon:hover:enabled {
    background-color: #f8f8ff;
    border-color: var(--form-control-color);
    color: var(--form-control-color);
}

input[type=button]:disabled {
    background-color: #ffffff;
    border-color: #999999;
    color: #999999;
}

/* Primary actions: old black */
#area_update, #area_copy, #loginSubmit, #login_twofactorsubmit, #area_doimport, #area_startimport, #img_edit_approve, .change_btn {
    background-color: #222222 !important;
    border-color: #222222 !important;
    box-shadow: none;
}

#area_update:hover:enabled, #area_copy:hover:enabled, #loginSubmit:hover:enabled, #area_doimport:hover:enabled, #area_startimport:hover:enabled, #img_edit_approve:hover:enabled, .change_btn:hover:enabled, .change_btndiv:hover, .editor_add_btn:hover:enabled {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

#area_update:disabled, #area_copy:disabled, #loginSubmit:disabled, #area_doimport:disabled, #area_startimport:disabled, #img_edit_approve:disabled, .change_btn:disabled, .editor_add_btn:disabled {
    background-color: #444444 !important;
    border-color: #444444 !important;
    color: #999999 !important;
}

.editor_add_btn {
    background-color: #444444;
}

/* Alert buttons: old styling */
.alert_box .alert_button_change {
    background-color: #333333;
    border-color: #333333;
}

.alert_box .alert_button_change:hover {
    background-color: #111111 !important;
    border-color: #111111;
}

.alert_box .password_change_cancel {
    background-color: #eeeeee;
    border-color: #cccccc;
    color: #333333;
}

.alert_box .password_change_cancel:hover {
    background-color: #dddddd !important;
    border-color: #bbbbbb;
}

/* ===== 5. List views ===== */
.area_row {
    background-color: #f8f8f8;
}

.area_row:hover {
    background-color: #dddddd;
}

#area_rowHeader {
    background-color: #eeeeee;
    border-bottom-color: #cccccc;
}

#area_rowHeader div {
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: none;
    letter-spacing: normal;
    color: #333333;
}

#area_rowHeaderFilter {
    background-color: #dddddd;
}

#nav_prev, #nav_next, #nav_reload {
    background-color: #dddddd;
    color: #222222;
}

#nav_prev:hover:enabled, #nav_next:hover:enabled, #nav_reload:hover {
    background-color: #eeeeee;
    color: #222222;
}

/* ===== 6. Tabs ===== */
.tabContainer {
    background-color: #cccccc;
    border-bottom-color: #666666;
}

.tab, .tabSelected, .tabFilter {
    border-color: #666666;
    color: #222222;
}

.tab {
    background-color: #eeeeee;
}

.tab:hover {
    background-color: #ffffff;
    color: #222222;
}

.tabSelected {
    background-color: #ffffff;
    border-top-color: #666666;
    border-bottom-color: #ffffff;
    color: #000000;
}

.tabFilter i {
    color: #444444;
}

/* ===== 7. Language/profile dropdown: old black uppercase ===== */
#select_drop {
    background-color: #000000;
    border-color: #000000;
    box-shadow: none;
}

#select_drop div {
    color: #dddddd;
    border-top-color: #333333;
    text-transform: uppercase;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.65rem;
}

#select_drop div:hover {
    color: #ffffff;
    background-color: #000000;
}

#select_drop div.selected {
    color: #ffffff;
    background-color: #222266;
    font-weight: 600;
}

/* ===== 8. Misc components ===== */
.loader {
    border-color: #7777ff;
    border-top-color: var(--form-control-color);
}

#banner_area {
    background-color: #ffe400;
    border-color: #ffe400;
    color: #000000;
}

#banner_close {
    background-color: #a19003;
    color: #ffe400;
}

#banner_close:hover {
    background-color: #685d02;
}

.popup_back {
    background-color: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#alert_headline {
    background-color: var(--form-control-color);
}

.overlay-close--on-headline {
    color: rgba(255, 255, 255, .85);
}

/* Menu font back to old scale */
#menu_area {
    font-size: 0.75rem;
}