/*
 * CannaBooks Theme for Perfex CRM 3.x
 * Colors come from the --cbt-* variables printed by cannabooks_theme.php
 * (Setup > Settings > CannaBooks Theme). colors.css swaps Perfex's blue for
 * them; this file handles type, layout touches, the sidebar and login pages.
 * Every rule is scoped to html.cbt so turning an area off restores Perfex.
 */

/* ---------- Type ---------- */

@font-face {
    font-family: "CBT Noto Sans";
    src: url("fonts/noto-sans-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "CBT Tenor Sans";
    src: url("fonts/tenor-sans-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Chinese falls through to each device's own Simplified Chinese font. */
html.cbt {
    --cbt-font-body: "CBT Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Inter, system-ui, sans-serif;
    --cbt-font-head: "CBT Tenor Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Inter, system-ui, sans-serif;
    --cbt-paper: #f6f5f1;
}

html.cbt-fonts body,
html.cbt-fonts .btn,
html.cbt-fonts input,
html.cbt-fonts select,
html.cbt-fonts textarea,
html.cbt-fonts .form-control,
html.cbt-fonts .dropdown-menu,
html.cbt-fonts .popover,
html.cbt-fonts .tooltip,
html.cbt-fonts .bootstrap-select .dropdown-toggle {
    font-family: var(--cbt-font-body);
}

/* Tenor Sans has one weight, so headings set in it stay at 400 rather than a faked bold. */
html.cbt-fonts h1,
html.cbt-fonts h2,
html.cbt-fonts h3,
html.cbt-fonts .tw-text-lg.tw-font-semibold,
html.cbt-fonts .tw-text-lg.tw-font-bold,
html.cbt-fonts .modal-title,
html.cbt-fonts .login-heading {
    font-family: var(--cbt-font-head);
    font-weight: 400;
    letter-spacing: .01em;
}

html.cbt h1,
html.cbt h2,
html.cbt h3,
html.cbt .tw-text-lg.tw-font-semibold,
html.cbt .tw-text-lg.tw-font-bold,
html.cbt .login-heading {
    color: rgb(var(--cbt-800));
}

/* ---------- Shared ---------- */

html.cbt a:hover {
    color: rgb(var(--cbt-800));
}

html.cbt ::selection {
    background: rgb(var(--cbt-accent-tint));
}

html.cbt .nav-tabs > li.active > a,
html.cbt .nav-tabs > li.active > a:focus,
html.cbt .nav-tabs > li.active > a:hover {
    color: rgb(var(--cbt-800));
    border-bottom-color: rgb(var(--cbt-accent));
}

html.cbt .pagination > .active > a,
html.cbt .pagination > .active > a:focus,
html.cbt .pagination > .active > a:hover,
html.cbt .pagination > .active > span {
    background-color: rgb(var(--cbt-700));
    border-color: rgb(var(--cbt-700));
}

html.cbt .checkbox input[type=checkbox]:checked + label::before,
html.cbt .checkbox-primary input[type=checkbox]:checked + label::before {
    background-color: rgb(var(--cbt-700));
    border-color: rgb(var(--cbt-700));
}

html.cbt .radio input[type=radio]:checked + label::after,
html.cbt .radio-primary input[type=radio]:checked + label::after {
    background-color: rgb(var(--cbt-700));
}

html.cbt .radio input[type=radio]:checked + label::before,
html.cbt .radio-primary input[type=radio]:checked + label::before {
    border-color: rgb(var(--cbt-700));
}

html.cbt .dropdown-menu > .active > a,
html.cbt .dropdown-menu > .active > a:focus,
html.cbt .dropdown-menu > .active > a:hover,
html.cbt .bootstrap-select .dropdown-menu li.selected a {
    background-color: rgb(var(--cbt-50));
    color: rgb(var(--cbt-800));
}

/* Footer credit: small, quiet, and never larger than the client's own brand. */
html.cbt .cbt-credit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .02em;
    color: #94a3b8;
    text-decoration: none;
}

html.cbt .cbt-credit:hover,
html.cbt .cbt-credit:focus {
    color: #64748b;
    text-decoration: none;
}

html.cbt .cbt-credit img {
    display: block;
    width: 13px;
    height: auto;
}

/* ---------- Staff area ---------- */

html.cbt-admin #wrapper {
    background: var(--cbt-paper);
}

/* A thin gold trim under the top bar. */
html.cbt-admin #header {
    box-shadow: inset 0 -2px 0 rgb(var(--cbt-accent-light) / .6), 0 1px 3px 0 rgb(0 0 0 / .08);
}

html.cbt-admin #menu .cbt-credit {
    display: flex;
    padding: 18px 13px 22px;
}

/* Light sidebar: keep Perfex's layout, mark the active item in brand colors. */
html.cbt-admin:not(.cbt-sidebar-dark) .sidebar > ul.nav > li.active > a:first-child {
    border-color: rgb(var(--cbt-200));
    box-shadow: inset 3px 0 0 rgb(var(--cbt-accent));
}

html.cbt-admin:not(.cbt-sidebar-dark) .sidebar ul.nav li.active > a .menu-icon {
    color: rgb(var(--cbt-700));
}

/* Dark sidebar in the primary color. */
html.cbt-sidebar-dark .sidebar {
    background: rgb(var(--cbt-700));
    border-right-color: rgb(var(--cbt-800));
}

html.cbt-sidebar-dark .sidebar ul.nav li a {
    color: rgb(255 255 255 / .86);
}

html.cbt-sidebar-dark .sidebar ul.nav li a i.menu-icon {
    color: rgb(var(--cbt-accent-light) / .85);
}

html.cbt-sidebar-dark .sidebar > ul.nav > li.active a:first-child,
html.cbt-sidebar-dark .sidebar > ul.nav > li:hover a:first-child {
    background: rgb(255 255 255 / .09);
    border-color: rgb(255 255 255 / .12);
    box-shadow: inset 3px 0 0 rgb(var(--cbt-accent-light));
}

html.cbt-sidebar-dark .sidebar ul.nav li.active > a,
html.cbt-sidebar-dark .sidebar ul.nav li.active > a .menu-icon,
html.cbt-sidebar-dark .sidebar ul.nav > li > a:focus,
html.cbt-sidebar-dark .sidebar ul.nav > li > a:focus .menu-icon,
html.cbt-sidebar-dark .sidebar ul.nav > li > a:hover,
html.cbt-sidebar-dark .sidebar ul.nav > li > a:hover .menu-icon {
    color: #fff;
}

html.cbt-sidebar-dark .sidebar ul.nav li .nav-second-level li a {
    color: rgb(255 255 255 / .72);
}

html.cbt-sidebar-dark .sidebar ul.nav li .nav-second-level li.active a,
html.cbt-sidebar-dark .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:focus,
html.cbt-sidebar-dark .sidebar ul.nav > li .nav-second-level > li:not(.active) > a:hover,
html.cbt-sidebar-dark .sidebar ul.nav li .nav-second-level a:focus .menu-icon,
html.cbt-sidebar-dark .sidebar ul.nav li .nav-second-level a:hover .menu-icon {
    color: #fff;
}

html.cbt-sidebar-dark .sidebar .text-muted,
html.cbt-sidebar-dark .sidebar .tw-text-neutral-500,
html.cbt-sidebar-dark .sidebar .tw-text-neutral-600,
html.cbt-sidebar-dark .sidebar .tw-text-neutral-700,
html.cbt-sidebar-dark .sidebar .tw-text-neutral-800,
html.cbt-sidebar-dark .sidebar .tw-text-neutral-900 {
    color: rgb(255 255 255 / .7);
}

html.cbt-sidebar-dark .sidebar hr {
    border-top-color: rgb(255 255 255 / .12);
}

/* Profile name and role in the sidebar: primary color, white on hover and while its menu is open. */
html.cbt-sidebar-dark .sidebar-user-profile a.profile span.tw-block {
    color: rgb(var(--cbt-700));
}

html.cbt-sidebar-dark .sidebar-user-profile a.profile:hover span.tw-block,
html.cbt-sidebar-dark .sidebar-user-profile a.profile span.tw-block:hover,
html.cbt-sidebar-dark .sidebar-user-profile.open a.profile span.tw-block {
    color: #fff;
}

html.cbt-sidebar-dark #menu .cbt-credit {
    color: rgb(255 255 255 / .55);
}

html.cbt-sidebar-dark #menu .cbt-credit:hover {
    color: rgb(255 255 255 / .8);
}

/* ---------- Staff login ---------- */

html.cbt-login body {
    background: var(--cbt-paper);
}

html.cbt-login body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 4px;
    background: rgb(var(--cbt-700));
    box-shadow: 0 2px 0 rgb(var(--cbt-accent-light) / .6);
}

html.cbt-login .authentication-form-wrapper h1 {
    color: rgb(var(--cbt-800));
}

html.cbt-login .authentication-form-wrapper > .tw-bg-white {
    border-top: 3px solid rgb(var(--cbt-accent-light) / .8);
}

/* ---------- Client portal ---------- */

html.cbt-portal body {
    background: var(--cbt-paper);
}

html.cbt-portal .navbar-default {
    border-bottom: 0;
    box-shadow: inset 0 -2px 0 rgb(var(--cbt-accent-light) / .6);
}

html.cbt-portal .navbar-default .navbar-nav > .active > a,
html.cbt-portal .navbar-default .navbar-nav > .active > a:focus,
html.cbt-portal .navbar-default .navbar-nav > .active > a:hover {
    color: rgb(var(--cbt-800));
    background: rgb(var(--cbt-50));
}

html.cbt-portal .navbar-default .navbar-nav > li > a:hover,
html.cbt-portal .navbar-default .navbar-nav > li > a:focus {
    color: rgb(var(--cbt-800));
    background: rgb(var(--cbt-50));
}

/* Perfex sets these two with !important, so matching it is the only way to override them. */
html.cbt-portal .navbar-default .navbar-nav > li.customers-nav-item-login > a {
    background: rgb(var(--cbt-700)) !important;
}

html.cbt-portal .navbar-default .navbar-nav > li.customers-nav-item-login > a:hover,
html.cbt-portal .navbar-default .navbar-nav > li.customers-nav-item-login > a:active {
    background: rgb(var(--cbt-800)) !important;
}

html.cbt-portal .customers_login .panel_s,
html.cbt-portal .customers_register .panel_s {
    border-top: 3px solid rgb(var(--cbt-accent-light) / .8);
}

html.cbt-portal footer {
    background: transparent;
    border-top: 1px solid rgb(var(--cbt-accent-light) / .45);
    height: auto;
}

html.cbt-portal footer .cbt-credit {
    margin-left: 14px;
    vertical-align: middle;
}