/* ===========================================================================
   brand-theme.css

   Per-customer theme overlay. Loaded AFTER adminty's style.css, and driven by
   the CSS custom properties that Views/Shared/_tkm.cshtml emits from the
   Brand.Theme.* appSettings (see Resources/BrandingHelper.cs).

   Adminty picks its palette through attribute selectors such as
   [header-theme="theme4"] and [navbar-theme="theme1"]. Rather than editing the
   653 KB stock stylesheet, this file re-declares just those surfaces in terms
   of the brand variables. The attribute-qualified selector is listed alongside
   the plain one so the override wins whether or not pcoded.min.js has applied
   the attribute yet.

   NOT themed on purpose: the row tints that distinguish data types in the
   report tables (#f0fffd, #fffdf0, #e8fdff). They encode meaning, not brand,
   and stay the same for every customer.
   =========================================================================== */

/* --- page shell ---------------------------------------------------------- */

body {
    background-color: var(--brand-page-bg);
    color: var(--brand-text);
    font-family: var(--brand-font);
}

/* --- top header bar ------------------------------------------------------ */

.pcoded .pcoded-header,
.pcoded .pcoded-header[header-theme="theme4"] {
    background: var(--brand-header-bg) !important;
    color: var(--brand-header-fg) !important;
}

    .pcoded .pcoded-header a,
    .pcoded .pcoded-header[header-theme="theme4"] a,
    .pcoded .pcoded-header i,
    .pcoded .pcoded-header[header-theme="theme4"] i {
        color: var(--brand-header-fg) !important;
    }

    /* Dropdown panels are nested inside the header but render on their own light
       surface, so they must not take the header's foreground colour - that made
       the language and user menus white-on-white. Adminty's own header rule has
       no !important, which is why Bootstrap's dark .dropdown-item colour used to
       win here; this restores that explicitly. */
    .pcoded .pcoded-header .dropdown-menu a,
    .pcoded .pcoded-header .dropdown-menu i,
    .pcoded .pcoded-header .dropdown-menu .dropdown-item,
    .pcoded .pcoded-header[header-theme="theme4"] .dropdown-menu a,
    .pcoded .pcoded-header[header-theme="theme4"] .dropdown-menu i,
    .pcoded .pcoded-header[header-theme="theme4"] .dropdown-menu .dropdown-item {
        color: var(--brand-text) !important;
    }

        /* Adminty hovers these with the primary fill; follow the brand instead of
           its hard-coded #76809f. */
        .pcoded .pcoded-header .dropdown-menu a:hover,
        .pcoded .pcoded-header .dropdown-menu .dropdown-item:hover,
        .pcoded .pcoded-header[header-theme="theme4"] .dropdown-menu a:hover,
        .pcoded .pcoded-header[header-theme="theme4"] .dropdown-menu .dropdown-item:hover {
            background-color: var(--brand-primary-bg) !important;
            color: var(--brand-primary-fg) !important;
        }

/* --- logo block, left of the header -------------------------------------- */

.pcoded .pcoded-header .navbar-logo,
.pcoded .pcoded-header .navbar-logo[logo-theme="theme1"] {
    background-color: var(--brand-logo-bg) !important;
}

/* --- left sidebar / main menu -------------------------------------------- */

.pcoded .pcoded-navbar,
.pcoded .pcoded-navbar[navbar-theme="theme1"] {
    background: var(--brand-sidebar-bg) !important;
}

    .pcoded .pcoded-navbar .main-menu,
    .pcoded .pcoded-navbar[navbar-theme="theme1"] .main-menu {
        background-color: var(--brand-sidebar-bg) !important;
    }

/* active and hovered menu items */
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li:hover > a {
    background: var(--brand-sidebar-active) !important;
}

.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li.active > a,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item li .pcoded-submenu li:hover > a {
    color: var(--brand-sidebar-active) !important;
}

.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.pcoded-trigger .pcoded-submenu li > a:before,
.pcoded .pcoded-navbar[active-item-theme="theme1"] .pcoded-item > li.active .pcoded-submenu li > a:before {
    border-left-color: var(--brand-sidebar-active) !important;
}

/* --- primary buttons ----------------------------------------------------- */

.btn-primary,
.sweet-alert button.confirm,
.wizard > .actions a {
    background-color: var(--brand-primary-bg) !important;
    border-color: var(--brand-primary-bg) !important;
    color: var(--brand-primary-fg) !important;
}

    /* Adminty gives each button state its own colour, and they are not shades of
       one another - the base is slate while hover/focus are teal left over from
       the stock theme. Each state therefore gets its own token, defaulting to
       exactly the value shipped today so the current look is unchanged. */

    .btn-primary:hover,
    .sweet-alert button.confirm:hover,
    .wizard > .actions a:hover {
        background-color: var(--brand-primary-hover) !important;
        border-color: var(--brand-primary-hover) !important;
    }

    .btn-primary:active,
    .sweet-alert button.confirm:active,
    .wizard > .actions a:active {
        background-color: var(--brand-primary-hover) !important;
        border-color: var(--brand-primary-hover) !important;
        color: var(--brand-primary-fg) !important;
    }

    .btn-primary:focus,
    .sweet-alert button.confirm:focus,
    .wizard > .actions a:focus {
        background-color: var(--brand-primary-focus) !important;
        color: var(--brand-primary-fg) !important;
    }

    .btn-primary.disabled,
    .sweet-alert button.disabled.confirm,
    .wizard > .actions a.disabled {
        background-color: var(--brand-primary-disabled) !important;
        border-color: var(--brand-primary-disabled) !important;
    }

.show > .btn-primary.dropdown-toggle,
.sweet-alert .show > button.dropdown-toggle.confirm,
.wizard > .actions .show > a.dropdown-toggle {
    background-color: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
    color: var(--brand-primary-fg) !important;
}

/* --- primary text / fill utilities --------------------------------------- */

.text-primary {
    color: var(--brand-primary-bg) !important;
}

.bg-primary {
    background-color: var(--brand-primary-bg) !important;
    color: var(--brand-primary-fg);
}

/* --- progress bars ------------------------------------------------------- */

.progress .progress-bar {
    background-color: var(--brand-accent);
}

/* --- report table grouping rows ------------------------------------------ */
/* the subcategory header row inside the GHG tables */
.brand-table-header {
    background: var(--brand-table-header-bg) !important;
}

/* --- add / remove buttons under the tables ----------------------------- */
/* The + / - button row sits straight under a table in every admin and
   report table view (.pull-left wrapper); give it room from the table. */
.pull-left > .btn {
    margin-top: 10px;
}

/* --- modern polish: buttons, inputs, cards, tables ----------------------- */
/* A thin layer over adminty and DataTables' own default styling - no other
   DataTables styling package, so the table markup and base-vm.js code stay as
   they are. Colours come from the brand variables above; the row tints that
   mark data types in the report tables are left alone. */

.btn {
    border-radius: 6px !important;
    transition: filter .15s, box-shadow .15s;
}

    .btn:hover:not(:disabled):not(.disabled) {
        filter: brightness(0.95);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
    }

.btn-xs {
    border-radius: 4px !important;
}

.form-control {
    border-radius: 6px;
}

.card {
    border-radius: 10px;
}

/* tables: a rounded frame, light grid lines, compact rows */
.dt-container .dt-scroll {
    border: 1px solid #dfe5e8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

    .dt-container .dt-scroll table.dataTable {
        border: none !important;
        margin: 0 !important;
    }

table.dataTable > tbody > tr > td {
    border-top: 1px solid #e6ebee !important;
    padding: 4px 8px !important;
}

table.dataTable.cell-border > tbody > tr > td,
table.dataTable.cell-border > thead > tr > th {
    border-left: 1px solid #e6ebee !important;
    border-right: none !important;
}

    table.dataTable.cell-border > tbody > tr > td:first-child,
    table.dataTable.cell-border > thead > tr > th:first-child {
        border-left: none !important;
    }

table.dataTable > tbody > tr:first-child > td {
    border-top: none !important;
}

/* the visible header only - the scroll body keeps a zero-height sizing copy */
.dt-scroll-head table.dataTable > thead > tr > th,
.dt-layout-cell > table.dataTable > thead > tr > th {
    padding: 7px 8px !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #d5dde1 !important;
}

table.dataTable > tbody > tr:hover > td {
    background-color: #f6faf9;
}

/* selected row: a light brand tint with dark text, not dark grey with white */
table.dataTable > tbody > tr.selected {
    background-color: transparent !important;
    color: inherit !important;
}

    table.dataTable > tbody > tr.selected > * {
        box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--brand-header-bg) 25%, transparent) !important;
        color: #333 !important;
    }

    table.dataTable > tbody > tr.selected > td:first-child {
        box-shadow: inset 3px 0 0 var(--brand-header-bg), inset 0 0 0 9999px color-mix(in srgb, var(--brand-header-bg) 25%, transparent) !important;
    }

/* value inputs inside report table rows: no taller than the row needs */
table.dataTable input.rep-input.form-control {
    height: 28px !important;
    min-height: 0 !important;
    padding: 2px 8px !important;
    line-height: 1.4 !important;
}

table.dataTable > tbody > tr > td {
    line-height: 1.4;
}

/* CSV / EXCEL export buttons */
.dt-buttons .dt-button {
    border-radius: 6px !important;
    border: 1px solid var(--brand-header-bg) !important;
    background: #fff !important;
    color: #333 !important;
    padding: 3px 12px !important;
    font-size: 13px !important;
    margin-right: 6px !important;
    box-shadow: none !important;
}

    .dt-buttons .dt-button:hover:not(.disabled) {
        background: color-mix(in srgb, var(--brand-header-bg) 15%, #fff) !important;
    }