/* Applies the Version 3 theme tokens to this app's chrome.
   Active only after a theme class is on <html>. */

html[data-symon-scheme="dark"] { color-scheme: dark; }
html[data-symon-scheme="light"] { color-scheme: light; }

html[data-symon-themed="1"] {
    background: var(--bg-primary);
    color: var(--text-primary);
    scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
}

html[data-symon-themed="1"] body,
html[data-symon-themed="1"] .content,
html[data-symon-themed="1"] #card,
html[data-symon-themed="1"] #cardcont {
    background: var(--bg-primary);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .symonheader,
html[data-symon-themed="1"] .quick {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 3px solid var(--primary-color);
}

html[data-symon-themed="1"] .symonbrand,
html[data-symon-themed="1"] .fa-bars,
html[data-symon-themed="1"] .symonmenu,
html[data-symon-themed="1"] #nameplate,
html[data-symon-themed="1"] #nameplatename {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .symonfooter {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-top: 3px solid var(--primary-color);
}

html[data-symon-themed="1"] .fixedSideMeu,
html[data-symon-themed="1"] #sidebar-wrapper,
html[data-symon-themed="1"] .navbar-inverse {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-right: 2px solid var(--primary-color);
}

html[data-symon-themed="1"] .sidebar-nav li a,
html[data-symon-themed="1"] .sidebar-nav li a:hover,
html[data-symon-themed="1"] .sidebar-nav li a:focus,
html[data-symon-themed="1"] .sidebar-nav li a:active,
html[data-symon-themed="1"] .navbar-inverse .navbar-nav > li > a {
    color: var(--text-primary);
    background: transparent;
}

html[data-symon-themed="1"] .sidebar-nav li a:hover,
html[data-symon-themed="1"] .sidebar-nav li.open > a {
    background: var(--background-hover);
}

html[data-symon-themed="1"] .sidebar-nav .dropdown-menu,
html[data-symon-themed="1"] .dropdown-menu {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

html[data-symon-themed="1"] .dropdown-menu > li > a,
html[data-symon-themed="1"] .dropdown-header {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .dropdown-menu > li > a:hover,
html[data-symon-themed="1"] .dropdown-menu > li > a:focus {
    background: var(--background-hover);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .dropdown-menu .divider {
    background-color: var(--border-color);
}

html[data-symon-themed="1"] .content h1,
html[data-symon-themed="1"] .content h2,
html[data-symon-themed="1"] .content h3,
html[data-symon-themed="1"] .content h4,
html[data-symon-themed="1"] .content label,
html[data-symon-themed="1"] .content p,
html[data-symon-themed="1"] .content li,
html[data-symon-themed="1"] .content td,
html[data-symon-themed="1"] .content th,
html[data-symon-themed="1"] .tasksHeader,
html[data-symon-themed="1"] .tasksHeader > span,
html[data-symon-themed="1"] .tasksHeader > small,
html[data-symon-themed="1"] .appHeader,
html[data-symon-themed="1"] .buildingName,
html[data-symon-themed="1"] .fieldtitle,
html[data-symon-themed="1"] .darklabel {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .content a:not(.btn):not(.ui-btn),
html[data-symon-themed="1"] .itemLogo {
    color: var(--primary-color);
}

html[data-symon-themed="1"] button,
html[data-symon-themed="1"] .btn,
html[data-symon-themed="1"] .ui-btn,
html[data-symon-themed="1"] .content a.ui-btn,
html[data-symon-themed="1"] .content a.btn,
html[data-symon-themed="1"] .changeBuildingButton {
    background: var(--primary-color);
    color: var(--text-on-primary, #fff);
    border-color: var(--primary-dark);
    text-shadow: none;
}

html.dark-amber-theme button,
html.dark-amber-theme .btn,
html.dark-ocean-theme button,
html.dark-ocean-theme .btn,
html.dark-teal-theme button,
html.dark-teal-theme .btn,
html.dark-rose-theme button,
html.dark-rose-theme .btn,
html.dark-green-theme button,
html.dark-green-theme .btn,
html.high-contrast-dark-amber-theme button,
html.high-contrast-dark-amber-theme .btn,
html.high-contrast-dark-blue-theme button,
html.high-contrast-dark-blue-theme .btn {
    color: #16120a;
}

html[data-symon-themed="1"] .btn-default {
    background: var(--input-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .btn-danger {
    background: var(--danger-color);
    border-color: var(--danger-color-dark, var(--danger-color));
    color: #fff;
}

html[data-symon-themed="1"] .btn-success {
    background: var(--success-color);
    border-color: var(--success-color-dark, var(--success-color));
    color: #fff;
}

html[data-symon-themed="1"] .btn-warning {
    background: var(--warning-color);
    border-color: var(--warning-color-dark, var(--warning-color));
    color: #16120a;
}

html[data-symon-themed="1"] .btn-info {
    background: var(--info-color);
    border-color: var(--info-color-dark, var(--info-color));
    color: #fff;
}

html[data-symon-themed="1"] .close,
html[data-symon-themed="1"] .theme-menu button {
    background: transparent;
    color: var(--text-primary);
    border: 0;
    text-shadow: none;
}

html[data-symon-themed="1"] input,
html[data-symon-themed="1"] select,
html[data-symon-themed="1"] textarea,
html[data-symon-themed="1"] .form-control,
html[data-symon-themed="1"] .listSearch,
html[data-symon-themed="1"] .jListSearchBox input {
    background: var(--input-bg, var(--bg-primary));
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .searchBox > i {
    color: var(--text-muted);
}

html[data-symon-themed="1"] .formbody,
html[data-symon-themed="1"] .fieldBox,
html[data-symon-themed="1"] .formIndented,
html[data-symon-themed="1"] .panel,
html[data-symon-themed="1"] .panel-default > .panel-heading,
html[data-symon-themed="1"] .well,
html[data-symon-themed="1"] .list-group-item {
    background: var(--card-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .table,
html[data-symon-themed="1"] .table > thead > tr > th,
html[data-symon-themed="1"] .table > tbody > tr > td,
html[data-symon-themed="1"] .table > tbody > tr > th {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-symon-themed="1"] .table-striped > tbody > tr:nth-child(odd) > th,
html[data-symon-themed="1"] .jlistrow {
    background: var(--bg-primary);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .table-striped > tbody > tr:nth-child(even) > td,
html[data-symon-themed="1"] .table-striped > tbody > tr:nth-child(even) > th,
html[data-symon-themed="1"] .jlistrow:nth-child(even) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .table-hover > tbody > tr:hover > td,
html[data-symon-themed="1"] .table-hover > tbody > tr:hover > th {
    background: var(--table-hover-bg);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

html[data-symon-themed="1"] .nav-tabs > li > a {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .nav-tabs > li.active > a,
html[data-symon-themed="1"] .nav-tabs > li.active > a:hover,
html[data-symon-themed="1"] .nav-tabs > li.active > a:focus {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-primary);
}

html[data-symon-themed="1"] .modal-content,
html[data-symon-themed="1"] .modal-header,
html[data-symon-themed="1"] .modal-body,
html[data-symon-themed="1"] .modal-footer,
html[data-symon-themed="1"] .ui-dialog,
html[data-symon-themed="1"] .ui-widget-content,
html[data-symon-themed="1"] .ui-widget-header {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .ui-autocomplete,
html[data-symon-themed="1"] .ui-menu-item {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .ui-menu-item:hover {
    background: var(--background-hover);
    color: var(--text-primary);
}

html[data-symon-themed="1"] .pendingContainerHeader,
html[data-symon-themed="1"] .rpt-statusbar,
html[data-symon-themed="1"] .pendingContainer,
html[data-symon-themed="1"] .pendingContainerV {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .pendingItem,
html[data-symon-themed="1"] .jList,
html[data-symon-themed="1"] .jListCalendar,
html[data-symon-themed="1"] .bigolelist {
    background: var(--card-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .pendingitemwarning {
    background: var(--warning-color);
    color: #16120a;
}

html[data-symon-themed="1"] .pendingitemdanger {
    background: var(--danger-color);
    color: #fff;
}

html[data-symon-themed="1"] .pendingitemdone {
    background: var(--success-color);
    color: #fff;
}

html[data-symon-themed="1"] .symon-global-help-panel,
html[data-symon-themed="1"] .symon-global-help-header,
html[data-symon-themed="1"] .symon-global-help-body {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .fc {
    --fc-page-bg-color: var(--bg-primary);
    --fc-neutral-bg-color: var(--bg-secondary);
    --fc-neutral-text-color: var(--text-secondary);
    --fc-border-color: var(--border-color);
    --fc-button-text-color: var(--text-on-primary, #fff);
    --fc-button-bg-color: var(--primary-color);
    --fc-button-border-color: var(--primary-dark);
    --fc-button-hover-bg-color: var(--primary-dark);
    --fc-button-hover-border-color: var(--primary-dark);
    --fc-button-active-bg-color: var(--primary-dark);
    --fc-today-bg-color: var(--background-hover);
    --fc-list-event-hover-bg-color: var(--table-hover-bg);
}

html[data-symon-themed="1"] .learn,
html[data-symon-themed="1"] .learn h1,
html[data-symon-themed="1"] .learn h2,
html[data-symon-themed="1"] .learn-lead,
html[data-symon-themed="1"] .learn-kicker,
html[data-symon-themed="1"] .learn-meta {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .learn a,
html[data-symon-themed="1"] .learn-kicker,
html[data-symon-themed="1"] .learn-meta {
    color: var(--accent-color, var(--primary-color));
}

html[data-symon-themed="1"] .learn-card,
html[data-symon-themed="1"] .learn-lesson-link,
html[data-symon-themed="1"] .learn-screen {
    background: var(--card-bg, var(--bg-tertiary));
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}

html[data-symon-themed="1"] .learn-card,
html[data-symon-themed="1"] .learn-lesson-link {
    border-left-color: var(--primary-color);
}

html[data-symon-themed="1"] .learn-panel {
    background: var(--card-bg, var(--bg-tertiary));
    color: var(--text-primary);
    box-shadow: none;
}

html[data-symon-themed="1"] .learn-panel h2,
html[data-symon-themed="1"] .learn-steps,
html[data-symon-themed="1"] .learn-steps li,
html[data-symon-themed="1"] .learn-remember,
html[data-symon-themed="1"] .learn-screen h2,
html[data-symon-themed="1"] .learn-screen > p,
html[data-symon-themed="1"] .learn-fields dd,
html[data-symon-themed="1"] .learn-card p,
html[data-symon-themed="1"] .learn-lesson-link p {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .learn-fields dt {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .learn-hero h1,
html[data-symon-themed="1"] .learn-hero p,
html[data-symon-themed="1"] .learn-practice,
html[data-symon-themed="1"] .learn-practice p {
    color: #fff;
}

html[data-symon-themed="1"] .learn-hero .learn-kicker,
html[data-symon-themed="1"] .learn-practice h2 {
    color: #C4A46A;
}

html[data-symon-themed="1"] .content .learn-nav a:not(.btn):not(.ui-btn),
html[data-symon-themed="1"] .learn .learn-button:not(.learn-button-primary) {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* The top-bar tools sit above the favourites row and the page, so the theme list is not covered. */
.symonmenu {
    z-index: 2600;
}

/* Theme menu */
.theme-picker {
    display: inline-block;
    position: relative;
    margin-right: 8px;
    vertical-align: middle;
    z-index: 2600;
}

.theme-picker > button {
    min-width: 34px;
}

.theme-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 4000;
    min-width: 220px;
    max-height: 70vh;
    overflow: visible;
    padding: 4px 0;
    text-align: left;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #222);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.theme-picker.open .theme-menu,
.theme-menu.is-open {
    display: block;
    position: fixed;
    z-index: 20000;
}

.theme-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    background: transparent;
    color: inherit;
    border: 0;
    border-radius: 0;
    font-size: 14px;
    text-align: left;
    text-shadow: none;
}

.theme-menu button.active,
.theme-menu button:hover,
.theme-menu button:focus {
    background: var(--primary-color, #0056b3);
    color: #fff;
}

.theme-group {
    position: relative;
}

.theme-chevron {
    margin-left: auto;
}

.theme-submenu {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    min-width: 250px;
    max-height: 70vh;
    overflow: auto;
    padding: 4px 0;
    background: var(--bg-secondary, #fff);
    color: var(--text-primary, #222);
    border: 1px solid var(--border-color, #ccc);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.theme-group.open > .theme-submenu {
    display: block;
}

.theme-option.contains-current .theme-label {
    font-weight: 700;
}

@media (max-width: 800px) {
    .theme-submenu {
        position: static;
        right: auto;
        min-width: 0;
        max-height: none;
        border: 0;
        box-shadow: none;
        background: var(--bg-tertiary, #f3f3f3);
    }
}

/* Wordmark. The light artwork has built-in padding; the dark one is cropped tight. */
a.mainLogo.brand-mark,
.brand-mark {
    height: auto;
    width: auto;
    line-height: 0;
    text-decoration: none;
}

a.mainLogo .symon-wordmark--light,
.brand-mark--side .symon-wordmark--light { height: 22px; width: auto; }
a.mainLogo .symon-wordmark--dark,
.brand-mark--side .symon-wordmark--dark { height: 15px; width: auto; }
.brand-mark--side .symon-wordmark { margin: 8px auto; }

.symon-wordmark--dark { display: none; }
html[data-symon-scheme="dark"] .symon-wordmark--light { display: none; }
html[data-symon-scheme="dark"] .symon-wordmark--dark { display: block; }

.symon-version-mark {
    position: absolute;
    right: 10%;
    bottom: -7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text-primary, #0f1c14);
    pointer-events: none;
}

html[data-symon-scheme="dark"] .symon-version-mark {
    right: -4px;
    bottom: -10px;
}

@media only screen and (min-width: 1024px) {
    a.mainLogo .symon-wordmark--light { height: 52px; }
    a.mainLogo .symon-wordmark--dark { height: 34px; }
    .brand-mark--side .symon-wordmark--light { height: 36px; }
    .brand-mark--side .symon-wordmark--dark { height: 24px; }
    a.mainLogo .symon-version-mark { font-size: 13px; }
}

.symon-surface,
.symon-contact-card,
.symon-setup,
.symon-dialog-bar {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.symon-surface {
    border: 1px solid var(--border-color);
    margin-bottom: 10px;
    padding-bottom: 10px;
    margin-top: 8px;
}

.symon-setup {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 8px;
    height: 300px;
}

.symon-contact-card {
    border-bottom: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    padding: 8px 10px 6px;
    display: inline-block;
    margin: 4px;
    position: relative;
    border-radius: 4px;
}

.symon-dialog-bar {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .symonfooter .versionTitle,
html[data-symon-themed="1"] .symonfooter .versionText {
    background: transparent;
    color: inherit;
    border: none;
}

html[data-symon-themed="1"] .notebody,
html[data-symon-themed="1"] .roundbody,
html[data-symon-themed="1"] .panel,
html[data-symon-themed="1"] .panel-heading,
html[data-symon-themed="1"] .panel-body,
html[data-symon-themed="1"] .panel-info > .panel-heading,
html[data-symon-themed="1"] #catBox,
html[data-symon-themed="1"] #respBox,
html[data-symon-themed="1"] #priBox,
html[data-symon-themed="1"] #approversBox,
html[data-symon-themed="1"] #functionalTypeBox,
html[data-symon-themed="1"] #functionalTypeContactBox {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .fileExplorerItem:hover {
    background: var(--background-hover);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* Cards and chips keep their text and surface together. */
html[data-symon-themed="1"] .a12b,
html[data-symon-themed="1"] .basecard,
html[data-symon-themed="1"] .firecard,
html[data-symon-themed="1"] .greencard,
html[data-symon-themed="1"] .redcard,
html[data-symon-themed="1"] .taskbox,
html[data-symon-themed="1"] .pendingItem,
html[data-symon-themed="1"] .notecard,
html[data-symon-themed="1"] .questioncard,
html[data-symon-themed="1"] .logcard,
html[data-symon-themed="1"] .addresscard,
html[data-symon-themed="1"] .phonecard,
html[data-symon-themed="1"] .emailcard,
html[data-symon-themed="1"] .respondsToCard,
html[data-symon-themed="1"] .youtube-card,
html[data-symon-themed="1"] .fullbody,
html[data-symon-themed="1"] .priBoxItem,
html[data-symon-themed="1"] .approverBoxItem {
    background: var(--card-bg, var(--bg-tertiary));
    background-image: none;
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .a12b *,
html[data-symon-themed="1"] .basecard *,
html[data-symon-themed="1"] .taskbox *,
html[data-symon-themed="1"] .notecard *,
html[data-symon-themed="1"] .questioncard *,
html[data-symon-themed="1"] .logcard *,
html[data-symon-themed="1"] .ticketTitle,
html[data-symon-themed="1"] .ticketHeader,
html[data-symon-themed="1"] .ticketSubject,
html[data-symon-themed="1"] .card-title,
html[data-symon-themed="1"] .note-from,
html[data-symon-themed="1"] .note-date,
html[data-symon-themed="1"] .note-body,
html[data-symon-themed="1"] .note-del,
html[data-symon-themed="1"] .question-header,
html[data-symon-themed="1"] .question-date {
    color: var(--text-primary);
}

html[data-symon-themed="1"] .note-from,
html[data-symon-themed="1"] .question-header,
html[data-symon-themed="1"] .card-body,
html[data-symon-themed="1"] .card-assigned,
html[data-symon-themed="1"] .ticketHeader,
html[data-symon-themed="1"] .ticketSubject,
html[data-symon-themed="1"] .note-body,
html[data-symon-themed="1"] .question-body {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-symon-themed="1"] .taskboxdanger,
html[data-symon-themed="1"] .pendingitemdanger {
    background: var(--danger-color);
    background-image: none;
    color: #fff;
}

html[data-symon-themed="1"] .taskboxdanger *,
html[data-symon-themed="1"] .pendingitemdanger * {
    color: #fff;
}

html[data-symon-themed="1"] .pendingitemwarning {
    background: var(--warning-color);
    background-image: none;
    color: #16120a;
}

html[data-symon-themed="1"] .pendingitemwarning * {
    color: #16120a;
}

html[data-symon-themed="1"] .pendingitemdone {
    background: var(--success-color);
    background-image: none;
    color: #fff;
}

html[data-symon-themed="1"] .pendingitemdone * {
    color: #fff;
}

html[data-symon-themed="1"] .nav-tabs > li > a,
html[data-symon-themed="1"] .nav-tabs > li > a:hover,
html[data-symon-themed="1"] .nav-tabs > li > a:visited,
html[data-symon-themed="1"] .nav-tabs > li.active > a,
html[data-symon-themed="1"] .nav-tabs > li.active > a:hover,
html[data-symon-themed="1"] .nav-tabs > li.active > a:focus,
html[data-symon-themed="1"] .nav-tabs > li.active > a:visited {
    background: var(--bg-secondary) !important;
    background-image: none !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-symon-themed="1"] .nav-tabs > li.active > a,
html[data-symon-themed="1"] .nav-tabs > li.active > a:hover,
html[data-symon-themed="1"] .nav-tabs > li.active > a:focus {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-bottom-color: var(--primary-color) !important;
}

html[data-symon-themed="1"] #nameplate,
html[data-symon-themed="1"] #nameplatename {
    color: var(--text-primary);
}