/* ============================================================================ COOP THEME -- DASHBOARD, the cooperative's own colour as skin7 JJE/Claude 08/23/2026 - the admin template ships six skins and a switcher panel (Views\Shared\_CustomPanel.cshtml, the red cog tab on the right edge). None of the six is the cooperative's colour, so an extra skin is added here as a SEVENTH skin and offered in the same panel alongside them. WHY IT IS DONE THIS WAY, and not as a plain override. An earlier version of this file simply restyled `.topbar` and the sidebar. It never painted anything, and the reason is worth writing down. On every dashboard page Scripts\dashboard\app.init.mini-sidebar.js calls $("#main-wrapper").AdminSettings({...}), which stamps data-layout, data-navbarbg, data-logobg and data-sidebarbg onto the DOM at load. That switches on the template's skin rules, which are selectors like #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin1] at specificity (1,3,0). A bare `.topbar` rule is (0,1,0) and loses no matter how late it is loaded. So a skin is ALWAYS applied here - the switcher is not what overrides the brand, the init defaults are. Matching the template's own selector shape is therefore the only thing that works, and it has the nicer property that clicking a swatch keeps working exactly as it did. WHICH SHADE. The painted surfaces all carry white text (the topbar is navbar-dark, the sidebar links are turned white below), so they use --coop-primary-dark rather than the base --coop-primary. For the shipped green that is #3F6A24 at 6.4:1 rather than #5B8C3A at 3.6:1, which fails AA for text of this size. This is not a property of green: SystemSettings\ThemePalette.cs darkens WHATEVER colour is configured until white text on it clears 6:1, which is what makes it safe for these rules to follow an arbitrary brand -- the sidebar turns its links white below, and that only works on a dark ground. The swatch in the panel is painted from the same token so it shows what it gives; if the two ever diverge, the picker is lying about what it offers. The topbar is TWO elements, not one: .navbar-header on the left is keyed on data-logobg, .navbar-collapse on the right on data-navbarbg. Both are set to skin7 by the init script, which is why both are defined here - setting only one leaves a two-tone bar. SKIN1-6 ARE LITERAL; SKIN7 IS NOT. That distinction is the whole point of this file and it changed on 08/24/2026, so it is worth stating plainly. skin1-6 are the template's own palette. They are six fixed colours that mean nothing but themselves, so they are written as plain literals with no fallback pair -- a var() there would be meaningless, and would let a template colour follow the cooperative's brand, which is the opposite of what those six are for. skin7 means "THE COOPERATIVE'S COLOUR", and since Phase 5 of docs\coop-theme\PLAN.md that is a value an administrator sets in Coop Settings. It therefore reads --coop-primary-dark, with the usual IE11 literal-first fallback pair. THIS FILE USED TO SAY "a skin is a fixed colour by definition" AND TREAT SKIN7 THE SAME AS THE OTHER SIX. That was true when it was written and stopped being true the day the colour became configurable. The symptom was reported from the browser: a cooperative saved a new colour, every page with no skin turned that colour, and every dashboard page -- plus the swatch offering skin7 in the picker -- stayed green, because skin7 is the shipped default and it was hardcoded here. The brand and its own swatch disagreed. IE11 has no var() and keeps the literal, so it holds the SHIPPED colour rather than the configured one. Accepted; see the plan. A fallback literal is static by definition and the alternative is emitting every themed rule twice. The customizer's cog tab, the active pill and the panel tabs at the foot of this file are not skins at all -- they are chrome that should follow whichever skin is selected, so they read --coop-chrome. The note beside them explains why they are the only rules here qualified with :root. THE WHOLE PAGE FOLLOWS THE SWATCH. This file colours the topbar and sidebar; Css\coop-theme-content.css colours the page body, and it follows the SAME data-navbarbg attribute, so picking a swatch repaints both together. It uses a darkened variant of each skin rather than the swatch colour as painted, because the body surfaces carry white text and two of the six template skins are too light to hold any. The account-type legend on Transaction/Index and the History pages (bg-primary / bg-success / bg-warning / bg-danger, one colour per account type) belongs to neither file and is deliberately left alone. This file exists twice and the two copies are BYTE-IDENTICAL, under the Tier 1 twin-file guard. ============================================================================ */ /* --- skin7: the logo block, left half of the topbar ---------------------- */ #main-wrapper[data-layout=vertical] .topbar .top-navbar .navbar-header[data-logobg=skin7], #main-wrapper[data-layout=horizontal] .topbar .top-navbar .navbar-header[data-logobg=skin7] { background: #3F6A24; background: var(--coop-primary-dark); } /* --- skin7: the navbar, right half of the topbar ------------------------- */ #main-wrapper[data-layout=vertical] .topbar .navbar-collapse[data-navbarbg=skin7], #main-wrapper[data-layout=horizontal] .topbar .navbar-collapse[data-navbarbg=skin7] { background: #3F6A24; background: var(--coop-primary-dark); } /* --- skin7: the left sidebar --------------------------------------------- The template's own dark skins leave the link colour at #54667a and dim it to opacity .4. That is already hard to read on skin5 and would be illegible on green, so skin7 turns the links white and uses .8 instead. A deliberate difference from the other six, not an oversight. */ #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin7], #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin7], #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin7] ul, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin7] ul { background: #3F6A24; background: var(--coop-primary-dark); } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin7] .sidebar-item .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin7] .sidebar-item .sidebar-link { color: #ffffff; opacity: .8; } /* --- The SELECTED item, for every sidebar skin --------------------------- The template's unskinned rule is .sidebar-nav ul .sidebar-item.selected>.sidebar-link{background-color:#ff5050} and only skins 2, 3, 4 and 6 override it. skin1, skin5 and - until this was written - skin7 all fell through to a flat red bar. skin5 is the SHIPPED DEFAULT sidebar, so out of the box the selected menu item was red on charcoal. All seven are defined here rather than only the broken two, so the selected row is always a shade of ITS OWN sidebar colour and still reads as "this sidebar" after someone changes the sidebar colour. Darker for the light and mid sidebars, and LIGHTER for skin5, which is already near-black and where darker would simply disappear. skin7 goes darker, like the light ones -- it is whatever the cooperative configured, and ThemePalette has already darkened that to a mid tone with room beneath it. The label is white on all seven - the template leaves it at #54667a grey, which is half of why red-on-charcoal was so hard to read. sidebar selected white text skin1 #2cabe3 -> #1A6E8C 5.8:1 skin2 #707cd2 -> #4E58B0 6.3:1 skin3 #ff7676 -> #B33A3A 5.9:1 skin4 #a0aec4 -> #5A6880 5.6:1 skin5 #2f323e -> #454A5C 8.8:1 lighter, not darker skin6 #e9ecef -> #495057 8.2:1 skin7 the configured colour, darkened -- see below THE skin7 ROW USED TO READ "#3F6A24 -> #2E4E1A 9.4:1 lighter, not darker". Two things were wrong with it. The "lighter, not darker" was copied down from skin5 and is false: #2E4E1A is DARKER than #3F6A24, which is why it reaches 9.4:1 against white where the base reaches 6.4:1. And the colours themselves stopped being fixed once the brand became configurable. skin7's selected row now reads --coop-chrome-dark, the darker tone ThemePalette already derives, which for the shipped green computes #2F501B -- within a shade of the #2E4E1A this replaced, so the change is invisible on a cooperative that has configured nothing. SPECIFICITY IS THE WHOLE TRICK. The template's own skin rules are #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item.selected>.sidebar-link at (1,7,1). A shorter selector loses however late it is loaded, which is why each rule below repeats that exact shape - equal specificity, and this file comes after. The `ul .sidebar-nav` variant the template also ships is for a DOM this tree does not have (_LeftSideBar is .left-sidebar > .scroll-sidebar > nav.sidebar-nav > ul#sidebarnav) and is deliberately not mirrored. Only skin7 takes a left edge, in the accent orange. The other six are the template's palette rather than the cooperative's, so borrowing the coop accent there would be arbitrary - and on skin3, orange on red is muddy. NOT FIXED HERE: on the dark sidebars the UNSELECTED links are still #54667a at opacity .4, which is the template's doing and is poor on skin1, skin3 and skin5. skin7 turns them white above. Widening that is a restyle of skins this cooperative does not ship, so it is left alone deliberately. */ #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin1] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin1] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin1] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin1] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #1A6E8C; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin2] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #4E58B0; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin3] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin3] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin3] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin3] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #B33A3A; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin4] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin4] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin4] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin4] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #5A6880; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin5] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #454A5C; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin6] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #495057; } #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin7] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=vertical] .left-sidebar[data-sidebarbg=skin7] .sidebar-nav ul .sidebar-item .sidebar-link.active, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin7] .sidebar-nav ul .sidebar-item.selected > .sidebar-link, #main-wrapper[data-layout=horizontal] .left-sidebar[data-sidebarbg=skin7] .sidebar-nav ul .sidebar-item .sidebar-link.active { color: #ffffff; opacity: 1; background-color: #2E4E1A; background-color: var(--coop-chrome-dark); border-left: 3px solid #F17B02; } /* --- skin7: the swatch in the switcher panel ----------------------------- */ .theme-color .theme-item .theme-link[data-logobg=skin7], .theme-color .theme-item .theme-link[data-navbarbg=skin7], .theme-color .theme-item .theme-link[data-sidebarbg=skin7] { background: #3F6A24; background: var(--coop-primary-dark); } /* --- Which swatch is the current one ------------------------------------- Claude 08/24/2026. The template ships NO selected state for these swatches -- not a ring, not a tick, nothing. That was survivable while the panel offered three lists of seven, because there was no single answer to show: logo, navbar and sidebar could each be something different. Now that there is one list and one choice, a picker that cannot tell you what is picked is just a puzzle. The class is put on by Scripts\dashboard\coop-theme-memory.js, on load and on click. It is `selected` rather than `active` because the template already uses `.active` on nav links inside this same panel and the two would be confusable in a stylesheet, not because anything collides today. Drawn with box-shadow rather than border so the swatch does not change size when it becomes the selected one -- a border would move the other six. The inner white ring separates the dark skins from the outer dark ring. */ .theme-color .theme-item .theme-link.selected { box-shadow: 0 0 0 2px #ffffff inset, 0 0 0 2px #2F323E; } /* --- Template chrome that is NOT a skin ---------------------------------- Claude 08/24/2026. Three surfaces the template paints in its own fixed colours, none of which is keyed on a data-*bg attribute, so none of them was touched by anything above: .customizer .service-panel-toggle #ff5050 the cog tab .nav-pills .nav-link.active #2cabe3 the active pill .customizer .customizer-tab ... .nav-link.active #2cabe3 panel tabs The cog tab is the one people notice: a red tab floating against a green portal, on every back-office screen and the member dashboard. The pills are quieter but just as wrong -- they are the tab strips on Profile\ViewProfile (member) and Logs\_LogTabs (admin), which sit blue on an otherwise green page. `custom-pills` alongside them is defined in no stylesheet in this tree, so nothing was overriding the template. All three are chrome rather than status, so they follow the selected swatch like the rest of the chrome does. TWO THINGS HERE DIFFER FROM EVERY OTHER RULE IN THIS FILE, both deliberately. It uses var(), which the note at the top of this file says this file does not do. That note is about the SKIN rules: a skin is a fixed colour by definition, so a variable there would be meaningless. This tab is not a skin -- it should be whatever the current skin is -- so it reads --coop-chrome and carries the usual IE11 literal-first fallback pair. Custom properties resolve at computed-value time, so it does not matter that Css\coop-theme-content.css declares --coop-chrome in a file linked after this one. And it is qualified with :root, giving (0,3,0) against the template's (0,2,0). This file happens to load after the template today, so equal specificity would also work -- but "happens to load after" is what put a charcoal membership flow and a blue Help & FAQs page into production this week. Win on specificity. */ :root .customizer .service-panel-toggle { background: #3F6A24; background: var(--coop-chrome); color: #ffffff; } /* The active pill. (0,3,0) against the template's (0,2,0). */ :root .nav-pills .nav-link.active, :root .nav-pills .show > .nav-link { background-color: #3F6A24; background-color: var(--coop-chrome); color: #ffffff; } /* The panel's own three tabs: an underline and label, not a fill. (0,5,0) against the template's (0,4,0). */ :root .customizer .customizer-tab .nav-item .nav-link.active, :root .customizer .customizer-tab .nav-item .nav-link:hover { border-bottom-color: #3F6A24; border-bottom-color: var(--coop-chrome); color: #3F6A24; color: var(--coop-chrome); } /* --- Focus ring ---------------------------------------------------------- Not part of the skin: keyboard focus should not stay the template blue on an otherwise green page, whichever skin is selected. */ .page-wrapper a:focus, .page-wrapper button:focus, .page-wrapper .form-control:focus { outline-color: #5B8C3A; outline-color: var(--coop-primary); }