body, .ui-dialog{
    background: url("../img/tiny_grid.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.dashboard-module {
    border: 1px solid #ccc;
}
.dashboard-module ul li{
    background: none repeat scroll 0 0 #ffffff;
}

.admintab.nav-tabs{
    background-color: transparent;
}

#branding {
    padding-bottom: 3px;
}

#header {
    position: relative;
    background: #222;
    color: #fff;
}

#header a, #header a:link, #header a:visited {
    color: #fff;
}

#user-tools {
    color: #ffc;
}

#header .theme-toggle svg {
    fill: #fff;
    color: #222;
}

div.breadcrumbs {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin: 0 20px 0px;
    padding: 8px 15px;
    font-size: 13px;
}

div.breadcrumbs a {
    color: #333;
}

div.breadcrumbs a:focus, div.breadcrumbs a:hover {
    color: #000;
}
#header #navigation-menu {
    padding-bottom: 4px;
}
#languages {
    position: absolute;
    right: 15px;
    bottom: 0;
    height: 33px;
    display: flex;
    align-items: center;
    font-size: 11px;
    z-index: 10000;
}

#languages a{
    color: #000 !important;
}

/* Pre-JS fallback: before color_theme_toggle.html resolves the theme on load,
   apply dark styles based on OS preference for non-dashboard elements only.
   Dashboard panels are handled by html[data-theme] rules below. */
@media (prefers-color-scheme: dark) {
    body, .ui-dialog { background-image: none; background-color: var(--body-bg); }
    div.breadcrumbs { background: var(--darkened-bg); color: var(--body-quiet-color); border-color: var(--border-color); }
    div.breadcrumbs a { color: var(--breadcrumbs-link-fg); }
    div.breadcrumbs a:focus, div.breadcrumbs a:hover { color: var(--body-loud-color); }
    #languages a { color: #ccc !important; }
    #header #navigation-menu { background: transparent; border-bottom-color: transparent; }
    #header ul#navigation-menu li a { color: #fff !important; }
    #header ul#navigation-menu li:hover,
    #header ul#navigation-menu li.over,
    #header ul#navigation-menu li.selected { background: #444; }
    #header ul#navigation-menu li:hover > ul li,
    #header ul#navigation-menu li.over > ul li,
    #header ul#navigation-menu li ul li:hover > ul li,
    #header ul#navigation-menu li ul li.over > ul li { background: #333; }
    #header ul#navigation-menu li ul li:hover,
    #header ul#navigation-menu li ul li.over { background: #444; }
    #header ul#navigation-menu li ul { background: #333; border-color: #555; }
    .jmb-tabs-nav { border-bottom-color: #555; }
    .jmb-tab-item a, .jmb-tab-item span { background: #2a2a2a; color: #aaa; border-color: #555; }
    .jmb-tab-item a:hover { background: #383838; color: #eee; }
    .jmb-tab-item.jmb-tab-active a { background: var(--body-bg); color: var(--body-fg); border-color: #555; border-bottom-color: var(--body-bg); }
    .jmb-tab-item.jmb-tab-has-error a { background-color: #4a1515; }
}

/* === Dark theme (explicit toggle) === */
html[data-theme="dark"] body,
html[data-theme="dark"] .ui-dialog { background-image: none; background-color: var(--body-bg); }

html[data-theme="dark"] div.breadcrumbs { background: var(--darkened-bg); color: var(--body-quiet-color); border-color: var(--border-color); }
html[data-theme="dark"] div.breadcrumbs a { color: var(--breadcrumbs-link-fg); }
html[data-theme="dark"] div.breadcrumbs a:focus,
html[data-theme="dark"] div.breadcrumbs a:hover { color: var(--body-loud-color); }

html[data-theme="dark"] #languages a { color: #ccc !important; }

html[data-theme="dark"] #header #navigation-menu { background: transparent; border-bottom-color: transparent; }
html[data-theme="dark"] #header ul#navigation-menu li a { color: #fff !important; }
html[data-theme="dark"] #header ul#navigation-menu li:hover,
html[data-theme="dark"] #header ul#navigation-menu li.over,
html[data-theme="dark"] #header ul#navigation-menu li.selected { background: #444; }
html[data-theme="dark"] #header ul#navigation-menu li:hover > ul li,
html[data-theme="dark"] #header ul#navigation-menu li.over > ul li,
html[data-theme="dark"] #header ul#navigation-menu li ul li:hover > ul li,
html[data-theme="dark"] #header ul#navigation-menu li ul li.over > ul li { background: #333; }
html[data-theme="dark"] #header ul#navigation-menu li ul li:hover,
html[data-theme="dark"] #header ul#navigation-menu li ul li.over { background: #444; }
html[data-theme="dark"] #header ul#navigation-menu li ul { background: #333; border-color: #555; }

html[data-theme="dark"] .jmb-tabs-nav { border-bottom-color: #555; }
html[data-theme="dark"] .jmb-tab-item a,
html[data-theme="dark"] .jmb-tab-item span { background: #2a2a2a; color: #aaa; border-color: #555; }
html[data-theme="dark"] .jmb-tab-item a:hover { background: #383838; color: #eee; }
html[data-theme="dark"] .jmb-tab-item.jmb-tab-active a { background: var(--body-bg); color: var(--body-fg); border-color: #555; border-bottom-color: var(--body-bg); }
html[data-theme="dark"] .jmb-tab-item.jmb-tab-has-error a { background-color: #4a1515; }

html[data-theme="dark"] .group { background-color: #1a1a1a !important; }
html[data-theme="dark"] .group ul { background-color: #1a1a1a !important; border-color: #444 !important; border-bottom-color: transparent !important; }
html[data-theme="dark"] .group .ui-tabs-active { border-bottom-color: #1a1a1a !important; }
html[data-theme="dark"] .dashboard-module { border-color: #353535 !important; }
html[data-theme="dark"] .dashboard-module.ui-tabs-panel,
html[data-theme="dark"] .group .ui-state-default,
html[data-theme="dark"] .group-accordion .group-accordion-header.ui-state-default,
html[data-theme="dark"] #dashboard-panel ul li,
html[data-theme="dark"] .dashboard-module ul li { background: #1a1a1a !important; color: #e0e0e0 !important; border-color: #444 !important; }
html[data-theme="dark"] .dashboard-module ul li.odd { background-color: #1a1a1a !important; }
html[data-theme="dark"] .dashboard-module ul li.even { background-color: #111 !important; }
html[data-theme="dark"] .dashboard-module ul li:hover { background: #252525 !important; }
html[data-theme="dark"] .dashboard-module h2 { background-color: var(--primary) !important; color: #fff !important; }
html[data-theme="dark"] .dashboard-module h3 { background-color: #1f1f1f; color: #aaa; }
html[data-theme="dark"] .dashboard-module-content { border-color: var(--border-color); }
html[data-theme="dark"] .dashboard-module a,
html[data-theme="dark"] .dashboard-module-content a { color: #4da6d9 !important; }
html[data-theme="dark"] .dashboard-module h2 .close-icon,
html[data-theme="dark"] .dashboard-module h2 .toggle-icon { color: #fff !important; }
html[data-theme="dark"] .group ul li.group-tabs-link a { background: #252525 !important; color: #e0e0e0 !important; border-color: #444 !important; }
html[data-theme="dark"] .group ul li.ui-tabs-active a { background: #333 !important; color: #fff !important; }

html[data-theme="dark"] #result_list td img[src*="/event/img/"] { filter: brightness(0) invert(1); }
html[data-theme="dark"] #result_list td img[src*="del."],
html[data-theme="dark"] #result_list td img[src*="statistics"] { border-radius: 4px; }

/* === Light theme override (cancels admin_tools @media dark when OS=dark but toggle=light) === */
html[data-theme="light"] body,
html[data-theme="light"] .ui-dialog { background-image: url("../img/tiny_grid.png"); background-color: transparent; }

html[data-theme="light"] div.breadcrumbs { background: #f5f5f5; color: #666; border-color: #ddd; }
html[data-theme="light"] div.breadcrumbs a { color: #333; }
html[data-theme="light"] div.breadcrumbs a:focus,
html[data-theme="light"] div.breadcrumbs a:hover { color: #000; }

html[data-theme="light"] .dashboard-module { border-color: #e5e5e5 !important; border-radius: 6px !important; }
html[data-theme="light"] .dashboard-placeholder,
html[data-theme="light"] #dashboard-panel ul li { border-color: #e5e5e5 !important; }
html[data-theme="light"] .group .ui-state-default,
html[data-theme="light"] .dashboard-module-content { border-color: #ececec !important; }
html[data-theme="light"] .dashboard-module h2 { background-color: #f8f8f8 !important; color: #555 !important; }
html[data-theme="light"] .dashboard-module h3 { background-color: #fafafa !important; color: #666 !important; }
html[data-theme="light"] .dashboard-module h2 a.toggle-icon,
html[data-theme="light"] .dashboard-module h2 a.close-icon { filter: none !important; }

html[data-theme="light"] .group ul { background-color: #fafafa !important; border-color: #d3d3d3 !important; }
html[data-theme="light"] .dashboard-module.ui-tabs-panel,
html[data-theme="light"] .group .ui-state-default,
html[data-theme="light"] .group-accordion .group-accordion-header.ui-state-default,
html[data-theme="light"] #dashboard-panel ul li,
html[data-theme="light"] .dashboard-module ul li { background: #ffffff !important; color: inherit !important; }
html[data-theme="light"] .dashboard-module ul li.odd { background: #f5f5f5 !important; }
html[data-theme="light"] .dashboard-module ul li.even { background: #ffffff !important; }
html[data-theme="light"] .dashboard-module ul li:hover { background: #fffff4 !important; }
html[data-theme="light"] .group .ui-state-default a { color: inherit !important; }
html[data-theme="light"] .group ul li.group-tabs-link a { background: transparent !important; color: inherit !important; border-color: #d3d3d3 !important; }

html[data-theme="light"] .jmb-tab-item a,
html[data-theme="light"] .jmb-tab-item span { background: #eeeeee; color: #333; border-color: #ccc; }
html[data-theme="light"] .jmb-tab-item.jmb-tab-active a { background: #fff; color: #333; }

#languages ul li {
    float: left;
}

/* TinyMCE body fields: move label above the editor (not to the left) */
.field-email_body > div,
.field-web_body > div {
    display: block;
}
.field-email_body label,
.field-web_body label {
    float: none !important;
    display: block;
    width: auto !important;
    padding: 0 0 6px 0 !important;
}

/* Scale related widget icons to match old project size */
.related-widget-wrapper {
    align-items: center;
}

.related-widget-wrapper-link img {
    width: 13px;
    height: 13px;
}