/* Perribell uses the Recupera application palette from StaffUi/staff-shell.css,
   OrderEntry/custom.css, cases-ui/portal-core.css and the Recupera Keycloak theme.
   This file is published by prepare.py; page-specific layouts retain ownership
   of density, navigation, data visualization and semantic status colors. */
:root {
    --rec-brand: #bc4e4e;
    --rec-action: #a54040;
    --rec-action-hover: #883535;
    --rec-link: #a03f3f;
    --rec-focus: #a54040;
    --rec-canvas: #f4f5f7;
    --rec-surface: #ffffff;
    --rec-soft: #edf1f5;
    --rec-selected: #f8e9e7;
    --rec-text: #1f2937;
    --rec-muted: #566170;
    --rec-border: #d3d9e0;
    --rec-control-border: #8994a2;
    --rec-chrome: #111318;
    --rec-chrome-hover: #25282e;
    --rec-chrome-selected: #42282b;
    --rec-chrome-text: #f7f7f7;
    --rec-chrome-muted: #bec4cc;
    --rec-chrome-border: #3e434c;
    --rec-on-dark: #efb5b5;
    --rec-chart: #a54040;
    --rec-chart-secondary: #5f7286;
    --rec-radius: 6px;
    --rec-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.bg-dark {
    --rec-canvas: #171a20;
    --rec-surface: #22262e;
    --rec-soft: #2b3039;
    --rec-selected: #42282b;
    --rec-text: #f0f2f5;
    --rec-muted: #bcc4d0;
    --rec-border: #48515f;
    --rec-control-border: #7b8797;
    --rec-link: #efb5b5;
    --rec-focus: #efb5b5;
    --rec-chart: #dc9999;
    --rec-chart-secondary: #aab8c8;
    color-scheme: dark;
}

/* Upstream body colors are !important; keep the override at the shell boundary. */
html body.bg-light, html body.bg-dark {
    background: var(--rec-canvas) !important;
    color: var(--rec-text) !important;
}
body { font-family: var(--rec-font); -webkit-font-smoothing: antialiased; }
body #content { color: var(--rec-text); }
body #content a:not(.btn):not([class*="text-"]) { text-underline-offset: 3px; }
body a { color: var(--rec-link); }
body a:hover, body a:focus { color: var(--rec-link); }
body .text-muted, body .help-block { color: var(--rec-muted); }
body input[type=checkbox], body input[type=radio] { accent-color: var(--rec-action); }
body :is(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--rec-focus);
    outline-offset: 3px;
}

/* The existing Bootstrap controls, including native accounting screens. */
body #content .btn-primary, body #content .btn-primary:focus,
body #content .pagination > .active > a, body #content .pagination > .active > span {
    color: #fff;
    background: var(--rec-action);
    border-color: var(--rec-action);
}
body #content .btn-primary:hover, body #content .btn-primary:active,
body #content .btn-primary.active {
    background: var(--rec-action-hover);
    border-color: var(--rec-action-hover);
    color: #fff;
}
body #content .btn-default, body #content .pagination > li:not(.active) > a {
    color: var(--rec-text);
    background: var(--rec-surface);
    border-color: var(--rec-control-border);
}
body #content .btn-default:hover, body #content .pagination > li:not(.active) > a:hover {
    background: var(--rec-soft);
}
body #content .btn { border-radius: var(--rec-radius); }
body #content .btn:disabled, body #content .btn.disabled {
    opacity: .65;
    cursor: not-allowed;
}
body #content .form-control, body #content .select2-selection {
    background-color: var(--rec-surface);
    color: var(--rec-text);
    border-color: var(--rec-control-border);
    border-radius: var(--rec-radius);
    box-shadow: none;
}
body #content .form-control::placeholder { color: var(--rec-muted); opacity: 1; }
body #content .form-control:focus {
    border-color: var(--rec-focus);
    box-shadow: 0 0 0 2px var(--rec-selected);
}
body #content .form-control:disabled, body #content .form-control[readonly] {
    background-color: var(--rec-soft);
}
body #content .has-error .form-control { border-color: #b42318; }
body #content .panel, body #content .well { background: var(--rec-surface); border-color: var(--rec-border); }
body #content .panel-default > .panel-heading, body #content nav.form-list-nav,
body #content table.table > thead > tr > th { background: var(--rec-soft); color: var(--rec-text); }
body #content .table > :is(thead, tbody, tfoot) > tr > :is(th, td) { border-color: var(--rec-border); }
body #content .table-striped > tbody > tr:nth-of-type(odd):not(.danger):not(.warning):not(.success):not(.info) { background: var(--rec-soft); }
body #content .table-hover > tbody > tr:hover > td { background: var(--rec-selected); }
body #content .nav-tabs { border-color: var(--rec-border); }
body #content .nav-tabs > li > a { color: var(--rec-link); }
body #content .nav-tabs > li.active > a {
    color: var(--rec-text);
    background: var(--rec-surface);
    border-color: var(--rec-border);
    border-top: 3px solid var(--rec-brand);
    border-bottom-color: var(--rec-surface);
}
/* Library popups intentionally retain white surfaces in both themes. */
body .modal-content, body .select2-dropdown, body .bootstrap-datetimepicker-widget {
    --rec-surface: #fff;
    --rec-soft: #edf1f5;
    --rec-text: #1f2937;
    --rec-muted: #566170;
    --rec-link: #a03f3f;
    --rec-focus: #a54040;
    --rec-selected: #f8e9e7;
    --rec-border: #d3d9e0;
    --rec-control-border: #8994a2;
    color-scheme: light;
}

/* Compact application chrome; all menu and permission behavior is unchanged. */
body #top .navbar-inverse, body #footer {
    background: var(--rec-chrome);
    border-color: var(--rec-chrome-border);
    color: var(--rec-chrome-text);
}
body #top .navbar-brand { display: inline-flex; align-items: center; gap: 13px; padding-block: 8px; }
body #top .navbar-brand img { width: 110px; height: auto; max-height: 35px; object-fit: contain; }
body #top .navbar-brand::after {
    content: 'Perribell';
    border-inline-start: 1px solid var(--rec-chrome-border);
    padding-inline-start: 13px;
    color: var(--rec-chrome-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}
body #top :is(.navbar-text, .navbar-nav > li > a), body #navbar-buttons .navbar-btn.btn-default,
body #footer a { color: var(--rec-chrome-muted); }
body #navbar-buttons .navbar-btn:hover, body #top .navbar-nav > .open > a { background: var(--rec-chrome-hover); color: #fff; }
body #top .dropdown-menu { background: var(--rec-chrome); border-color: var(--rec-chrome-border); }
body #top .dropdown-menu > li > a { color: var(--rec-chrome-text); }
body #top .dropdown-menu > li > a:hover, body #top .dropdown-menu > li > a:focus { background: var(--rec-chrome-hover); }
body #top .dropdown-menu .divider { background: var(--rec-chrome-border); }
body #top :is(a, button):focus-visible { outline-color: var(--rec-on-dark); }
body #WorkspaceSidebar { background: var(--rec-chrome); color: var(--rec-chrome-text); border-inline-end: 1px solid var(--rec-chrome-border); }
body #WorkspaceSidebar :is(.ws-label, .ws-group-title, .ws-nav i, .ws-mobile-heading span) { color: var(--rec-chrome-muted); }
body #WorkspaceSidebar .ws-nav a, body #WorkspaceSidebar summary { color: var(--rec-chrome-text); }
body #WorkspaceSidebar .ws-nav a:hover, body #WorkspaceSidebar summary:hover { background: var(--rec-chrome-hover); }
body #WorkspaceSidebar .ws-nav a[aria-current] {
    background: var(--rec-chrome-selected);
    color: #fff;
    box-shadow: inset 3px 0 var(--rec-brand);
    font-weight: 600;
}
body #WorkspaceSidebar summary.ws-active { background: var(--rec-chrome-hover); color: #fff; }
body #WorkspaceSidebar :is(.ws-children, .ws-personal, .ws-mobile-heading) { border-color: var(--rec-chrome-border); }
body #WorkspaceSidebar :is(a, summary):focus-visible { outline-color: var(--rec-on-dark); }
body #WorkspaceSidebar .ws-skip { background: #fff; color: #1f2937; }
body #WorkspaceSidebarToggle, body #WorkspaceSidebarClose {
    background: var(--rec-chrome);
    border-color: var(--rec-chrome-border);
    color: var(--rec-chrome-text);
}
body #WorkspaceSidebarToggle:hover, body #WorkspaceSidebarClose:hover { background: var(--rec-chrome-hover); }
body #WorkspaceSidebarToggle:focus-visible, body #WorkspaceSidebarClose:focus-visible { outline-color: var(--rec-on-dark); }

/* Map the established workspace tokens to one palette, including dark mode.
   The content ID gives these mappings precedence over embedded page styles. */
#content .workspace-home {
    --wh-ink: var(--rec-text); --wh-muted: var(--rec-muted); --wh-line: var(--rec-border);
    --wh-canvas: var(--rec-canvas); --wh-surface: var(--rec-surface); --wh-soft: var(--rec-selected);
    --wh-link: var(--rec-link); --wh-accent: var(--rec-action);
}
#content .finance-dashboard {
    --ink: var(--rec-text); --muted: var(--rec-muted); --line: var(--rec-border);
    --accent: var(--rec-link); --surface: var(--rec-soft); --row-line: var(--rec-border); --track: var(--rec-soft);
}
#content .sales-workspace {
    --sales-ink: var(--rec-text); --sales-muted: var(--rec-muted); --sales-border: var(--rec-border);
    --sales-surface: var(--rec-soft); --sales-paper: var(--rec-surface); --sales-link: var(--rec-link);
}
#content .systems-monitor {
    --sys-text: var(--rec-text); --sys-muted: var(--rec-muted); --sys-border: var(--rec-border);
    --sys-surface: var(--rec-surface); --sys-soft: var(--rec-soft); --sys-link: var(--rec-link);
}
#content :is(.wiki-workspace, .wiki-authoring) {
    --wiki-ink: var(--rec-text); --wiki-muted: var(--rec-muted); --wiki-border: var(--rec-border);
    --wiki-surface: var(--rec-surface); --wiki-soft: var(--rec-soft); --wiki-accent: var(--rec-link); --wiki-selected: var(--rec-selected);
}
#content :is(.finance-monthly, .finance-expense-analysis) {
    --er-text: var(--rec-text); --er-muted: var(--rec-muted); --er-line: var(--rec-border);
    --er-surface: var(--rec-soft); --er-link: var(--rec-link);
}
#content .finance-management {
    --mr-text: var(--rec-text); --mr-muted: var(--rec-muted); --mr-border: var(--rec-border);
    --mr-surface: var(--rec-surface); --mr-subtle: var(--rec-soft); --mr-accent: var(--rec-link);
}
#content .finance-statement { --ink: var(--rec-text); --muted: var(--rec-muted); --line: var(--rec-border); }
#content :is(.workspace-home, .finance-dashboard, .sales-workspace, .systems-monitor, .wiki-workspace, .wiki-authoring, .finance-monthly, .finance-expense-analysis, .finance-management, .finance-detail, .rec-workspace) :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--rec-focus);
    outline-offset: 3px;
}
#content .workspace-home .wh-quick > a { border-color: var(--rec-border); }
#content .workspace-home .wh-quick > a:hover { border-color: var(--rec-focus); }
#content .workspace-home :is(.wh-quick i, .wh-metric-label i) { color: var(--rec-link); }
#content .workspace-home .wh-month-bar:not(.wh-credit), #content .finance-dashboard .fd-bar-fill { background: var(--rec-chart); }
#content .workspace-home .wh-category-fill { background: var(--rec-chart-secondary); }
#content .finance-dashboard .fd-toolbar a:first-child { color: #fff; background: var(--rec-action); border-color: var(--rec-action); }
#content .finance-dashboard .fd-toolbar a:first-child:hover { background: var(--rec-action-hover); }
#content .finance-dashboard .fd-bar-row:hover .fd-bar-fill { background: var(--rec-link); }
#content .rec-workspace .rw-current { border-inline-start-color: var(--rec-brand); }
#content :is(.rec-workspace:not(.workspace-home), .finance-detail) a:not(.btn) { color: var(--rec-link); }
#content .finance-detail :is(dt, .fd-muted, .fd-kicker) { color: var(--rec-muted); }
#content .finance-statement .fs-toolbar :is(a, button) { color: var(--rec-link); background: var(--rec-surface); border-color: var(--rec-control-border); }

/* Authentication shares Keycloak's charcoal brand panel and white form surface.
   Native login/reset/change/MFA forms and their transitions remain upstream-owned. */
html body.Login, html body.finance-setup {
    color-scheme: light;
    --rec-text: #1f2937; --rec-muted: #566170; --rec-surface: #fff; --rec-soft: #edf1f5;
    --rec-border: #d3d9e0; --rec-control-border: #8994a2;
    --rec-link: #a03f3f; --rec-focus: #a54040; --rec-selected: #f8e9e7;
    margin: 0;
    min-height: 100vh;
    padding: 40px 16px;
    background: #101318 !important;
    color: var(--rec-text) !important;
    font: 14px/1.5 var(--rec-font);
}
.finance-auth-brand {
    box-sizing: border-box;
    width: min(100%, 488px);
    margin: 0 auto;
    padding: 30px 28px 26px;
    text-align: center;
    color: #fff;
    background: var(--rec-chrome);
    border: 1px solid #60656d;
    border-bottom: 3px solid var(--rec-brand);
    border-radius: 14px 14px 0 0;
}
.finance-auth-brand img { display: block; width: 205px; max-width: 100%; height: auto; margin: 0 auto 20px; }
.finance-auth-brand h1 { margin: 0; color: #fff; font-size: 28px; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.finance-auth-brand p { margin: 8px 0 0; color: #bec4cc; font-size: 14px; }
body #content.Login, .finance-auth-content {
    box-sizing: border-box;
    width: min(100%, 488px);
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    padding: 26px 30px 30px;
    color: var(--rec-text);
    background: #fff;
    border: 1px solid var(--rec-border);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 48px #0003;
}
body #content.Login > .inner, body #content.Login > .inner > .container-fluid { padding: 0; margin: 0; min-width: 0; }
body #content.Login .form-signin { box-sizing: border-box; width: 100%; max-width: none; padding: 0; margin: 0; }
body #content.Login .nav-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--rec-border); }
body #content.Login .nav-tabs > li { float: none; margin: 0; }
body #content.Login .nav-tabs > li > a { padding: 9px 10px; min-height: 40px; border: 1px solid transparent; border-radius: 5px; font-size: 12px; font-weight: 600; }
body #content.Login .nav-tabs > li.active > a { color: var(--rec-link); background: var(--rec-selected); border-color: #d3a5a5; }
body #content.Login .nav-tabs > li > a:hover { background: var(--rec-soft); }
body #content.Login .form-signin .form-control {
    width: 100%; max-width: 100%; min-height: 46px; height: auto;
    margin: 0 0 16px; padding: 11px 12px; border-radius: 6px; font-size: 16px;
}
body #content.Login .finance-login-label, .finance-auth-content label { display: block; margin: 0 0 6px; font-weight: 600; font-size: 13px; text-align: start; }
body #content.Login .btn[type=submit], .finance-auth-content button[type=submit] {
    width: 100%; min-height: 46px; margin: 8px 0 12px; padding: 11px 14px;
    border: 1px solid var(--rec-action); border-radius: 6px;
    background: var(--rec-action); color: #fff; font: 600 15px/1.5 var(--rec-font);
    white-space: normal; cursor: pointer;
}
body #content.Login .btn[type=submit]:hover, .finance-auth-content button[type=submit]:hover { background: var(--rec-action-hover); }
body #content.Login .alert { overflow-wrap: anywhere; }
.finance-auth-content h2 { font-size: 21px; line-height: 1.3; margin: 0 0 12px; }
.finance-auth-content p { overflow-wrap: anywhere; }
.finance-auth-content input:not([type=hidden]) { box-sizing: border-box; width: 100%; min-height: 46px; margin-bottom: 18px; padding: 11px 12px; border: 1px solid var(--rec-control-border); border-radius: 6px; font: 16px var(--rec-font); }
.finance-auth-content .error { color: #b42318; }
.finance-auth-content .error:empty { display: none; }
.finance-auth-content button:disabled { opacity: .65; cursor: wait; }

@media (max-width: 900px) {
    body #top .navbar-brand { padding: 0; gap: 9px; }
    body #top .navbar-brand img { width: 95px; }
    body #top .navbar-brand::after { font-size: 13px; padding-inline-start: 9px; }
}
@media (max-width: 540px) {
    html body.Login, html body.finance-setup { padding: 20px 12px; }
    .finance-auth-brand { padding: 24px 20px; }
    body #content.Login, .finance-auth-content { padding: 22px 18px; }
    body #content.Login .nav-tabs > li > a { padding-inline: 8px; }
}
@media print {
    html body.bg-light, html body.bg-dark { background: #fff !important; color: #111 !important; }
    body.bg-dark { --rec-text: #111; --rec-muted: #444; --rec-surface: #fff; --rec-canvas: #fff; --rec-soft: #f4f4f4; --rec-link: #333; --rec-border: #bbb; }
}