/* 10/2026 a light refresh of the admin's look, loaded last by Admin.Master (after styles.css, mega_menu.css and Bootstrap) so a page's
   own <head> styles still win. Colors, spacing, corners and focus only: no layout, widths or menu behavior change. Remove the
   <link> in Admin.Master to go back. */

:root {
    --adm-bg: #f7f8fa;          /* near-white: pure white made the white boxes (.dform, .filter) vanish */
    --adm-surface: #fff;
    --adm-border: #dde1e8;
    --adm-text: #1f2329;
    --adm-muted: #6b7280;
    --adm-accent: #2459d6;
    --adm-accent-hover: #1a45ad;
    --adm-accent-soft: #eef3fd;
    --adm-bar: #1d2330;
}

/* ---- canvas + type */
body { background: var(--adm-bg); color: var(--adm-text); }
#wrapper { background: transparent; }
a { color: var(--adm-accent); }
a:hover { color: var(--adm-accent-hover); }
h1 { font-size: 26px; font-weight: 600; margin: 6px 0 18px; color: var(--adm-text); }
#wrapper > div > .container { padding-bottom: 48px; }

/* keyboard focus you can see */
a:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=button]:focus-visible { outline: 2px solid #8fb0f0; outline-offset: 2px; border-radius: 3px; }

/* the stray page-length input under every page (nothing reads it) */
#iDisplayLength { display: none; }

/* ---- who's signed in */
div#header { border-bottom: 0; padding: 12px 4px 10px; font-size: 13px; color: var(--adm-muted); }
#header b, #header b a { color: var(--adm-text); font-weight: 600; text-decoration: none; }
#header a { text-decoration: none; }
#header a:hover { text-decoration: underline; }
#header a[id$="LoginStatus1"] { margin-left: 8px; padding-left: 10px; border-left: 1px solid #cfd4dd; color: var(--adm-muted); }

/* ---- Focused pages (Admin.Master Focused: the Template Factory): no menu bar; a way back on the left of the top line; the full width */
div#header::after { content: ""; display: block; clear: both; }
.adm-focus-bar { float: left; text-align: left; }
#header a.adm-back { display: inline-block; padding: 4px 14px 4px 11px; border: 1px solid var(--adm-border); border-radius: 999px; background: var(--adm-surface); color: var(--adm-text); font-weight: 600; text-decoration: none; }
#header a.adm-back:hover { background: var(--adm-bar); border-color: var(--adm-bar); color: #fff; text-decoration: none; }
.adm-focus-title { margin-left: 14px; color: var(--adm-text); font-size: 15px; font-weight: 600; vertical-align: middle; }
#wrapper.adm-focused { width: auto; max-width: 1720px; padding: 0 24px; }
#wrapper.adm-focused div#header { padding: 14px 0 12px; line-height: 30px; }
#wrapper.adm-focused > div > .container { max-width: none; padding-left: 0; padding-right: 0; }

/* ---- the menu bar. [data-color] matches the plugin's color theme rules (.mega-menu[data-color="light-blue"] ...), so these win */
.mega-menu[data-color] > section.menu-list-items { background-color: var(--adm-bar); border-radius: 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.mega-menu .menu-logo > li > a { font-weight: 600; border-radius: 10px 0 0 10px; }
.mega-menu .menu-links > li > a { color: #dfe3ea; }
.mega-menu .menu-links > li:hover > a, .mega-menu .menu-links > li.activeTrigger > a { color: #fff; }
.mega-menu[data-color] .menu-logo > li > a:hover,
.mega-menu[data-color] .menu-links > li:hover,
.mega-menu[data-color] .menu-links > li.active { background-color: rgba(255, 255, 255, .1); }
/* the section the page belongs to (Admin.Master marks it) */
.mega-menu .menu-links > li.is-current { box-shadow: inset 0 -3px 0 #6f9cf3; }
.mega-menu .menu-links > li.is-current > a { color: #fff; }

/* drop-downs: a card, compact rows, a quiet hover */
@media screen and (min-width: 768px) {
    .mega-menu[data-color] .menu-links > li.activeTrigger { background-color: rgba(255, 255, 255, .1); }
    .mega-menu .drop-down-multilevel { max-width: 240px; padding: 6px 0; border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .06); }
    .mega-menu .drop-down { border-radius: 10px; box-shadow: 0 12px 32px rgba(16, 24, 40, .16), 0 0 0 1px rgba(16, 24, 40, .06); }
    .mega-menu .drop-down-multilevel a { padding: 9px 16px; min-height: 0; color: #374151; }
    .mega-menu[data-color] .drop-down-multilevel li:hover,
    .mega-menu[data-color] .drop-down-multilevel li.activeTrigger { background: var(--adm-accent-soft); }
    .mega-menu[data-color] .drop-down-multilevel li:hover > a,
    .mega-menu[data-color] .drop-down-multilevel li:hover > a i.fa,
    .mega-menu[data-color] .drop-down-multilevel li.activeTrigger > a,
    .mega-menu[data-color] .drop-down-multilevel li.activeTrigger > a i.fa { color: var(--adm-accent); }
}

/* ---- content cards */
.dform { border: 1px solid var(--adm-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); color: #4b5563; }
.dform > .header { border-bottom-color: #eef0f3; padding: 16px 22px 10px; }
.dform .header h2 { font-size: 17px; font-weight: 600; color: var(--adm-text); }
.dform-options { top: 14px; right: 18px; }
.dform-options > li > a, .section .options li a, .dform-options > li > .dropdown { padding: 5px 10px; border-radius: 6px; background: #f1f3f6; color: #4b5563; font-size: 11.5px; letter-spacing: .02em; }
.dform-options > li > a:hover, .section .options li a:hover, .dform-options > li > .dropdown:hover { background: var(--adm-bar); color: #fff; border-radius: 6px; }

/* ---- search / filter blocks (the dashboard's): the same card, a quiet label strip instead of the dark bar and the blue button strip */
div.filter { border: 1px solid var(--adm-border); border-radius: 10px; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.filter div.header { background: #f8f9fb; color: var(--adm-muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 8px 14px; border-bottom: 1px solid #eef0f3; }
.filter div.rw { padding: 10px 14px; }
.filter .rw div > label:first-child { color: var(--adm-muted); letter-spacing: .04em; }
.buttons { background: #f8f9fb; border-top: 1px solid #eef0f3; padding: 10px 14px; }

/* ---- tables */
table.style1 thead th { background-color: #f8f9fb !important; border-top: 1px solid #eef0f3; border-bottom: 1px solid var(--adm-border); color: var(--adm-muted); font-weight: 600; font-size: 12.5px; }
table.style1 > tbody > tr > td { border-bottom-color: #eef0f3; }
.style1 tr.odd, .style1 tbody tr:nth-child(odd) { background: #fff; }
table.style1 tbody tr:hover { background: var(--adm-accent-soft); }