/* The application's own look, layered over the Steex template.
 *
 * The template is still what lays the screen out - sidebar, topbar, cards,
 * tables, all of its markup and its grid. This sheet restyles that skin to
 * the design the application was given: a pale field, a white sidebar with a
 * cyan active pill, soft rounded cards with tinted icon tiles, navy type.
 *
 * Written as overrides rather than a rewrite on purpose. Every page in the
 * application uses the template's classes, so restyling those classes moves
 * the whole application at once instead of one screen at a time.
 *
 * Loaded after the template's own stylesheets, which is what lets it win.
 */

:root {
    /* The template ships a teal-green as its primary and success colour, and
     * it turns up in links, buttons, the active menu item and every "-subtle"
     * tint. Repointing its own variables at the design's blues is what takes
     * the green out of the application in one place rather than fifty. */
    --tb-primary: #00aeef;
    --tb-primary-rgb: 0, 174, 239;
    --tb-primary-text-emphasis: #0f2a43;
    --tb-success: #2f86d6;
    --tb-success-rgb: 47, 134, 214;
    --tb-info: #00aeef;
    --tb-info-rgb: 0, 174, 239;
    --tb-link-color: #00aeef;
    --tb-link-hover-color: #0098d1;


    --re-ink: #0f2a43;
    --re-ink-soft: #667a91;
    --re-accent: #00aeef;
    --re-accent-soft: #e8f6fd;
    --re-field: #f4f7fa;
    --re-line: #eef2f7;
    --re-surface: #ffffff;
    --re-canvas: #f6f8fb;
    --re-radius: 14px;
}

/* A standard-width sidebar. The template declares this on
 * [data-theme=default], so it is set here on the same element with enough
 * specificity to win; every rule that positions the topbar, footer and page
 * content reads the same variable and follows along. */
:root,
html,
html[data-theme],
html[data-layout] {
    --tb-vertical-menu-width: 280px;
}

body {
    background-color: var(--re-canvas) !important;
    color: var(--re-ink);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ----------------------------------------------------------- sidebar -- */

.app-menu,
.navbar-menu {
    background: var(--re-surface) !important;
    border-right: 1px solid var(--re-line);
    box-shadow: none !important;
}

.navbar-brand-box {
    background: var(--re-surface) !important;
    border-bottom: 1px solid var(--re-line);
    padding: 1.1rem 1.25rem !important;
}

/* The mark, as on the sign-in page. Both of the template's logo variants
 * are styled, because which one it shows depends on a theme setting and
 * the sidebar is white either way. */
.navbar-brand-box .logo .re-mark {
    display: block !important;
    text-align: left;
}

/* Only one of the template's two logo variants belongs on screen at a time:
 * the full mark while the sidebar is open, the house alone once it
 * collapses. Both were showing, which is what put the name above the
 * house. */
.navbar-menu .navbar-brand-box .logo-sm { display: none; }

[data-sidebar-size="sm"] .navbar-menu .navbar-brand-box .logo-sm { display: block; }
[data-sidebar-size="sm"] .navbar-menu .navbar-brand-box .logo-lg { display: none; }

.navbar-brand-box .re-mark-name {
    display: block;
    line-height: 1.15;
    white-space: nowrap;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--re-ink);
    letter-spacing: -.01em;
}

.navbar-brand-box .re-mark-name span { color: var(--re-accent); }

.navbar-brand-box .re-mark-sub {
    display: block;
    white-space: nowrap;
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--re-ink-soft);
    margin-top: .15rem;
}

.navbar-menu .navbar-nav {
    padding: 1rem .85rem;
}

.navbar-menu .navbar-nav .menu-title {
    color: #93a3b5 !important;
    font-size: .7rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 1.25rem .65rem .4rem !important;
    font-weight: 600;
}

.navbar-menu .navbar-nav .nav-link {
    color: var(--re-ink-soft) !important;
    border-radius: 10px;
    padding: .7rem .75rem !important;
    font-weight: 500;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .15rem;
    transition: background .15s, color .15s;
}

.navbar-menu .navbar-nav .nav-link i {
    font-size: 1.15rem;
    color: inherit;
}

.navbar-menu .navbar-nav .nav-link:hover {
    background: var(--re-field);
    color: var(--re-ink) !important;
}

/* The page you are on, as a filled pill. */
.navbar-menu .navbar-nav .nav-link.active {
    background: var(--re-accent-soft);
    color: var(--re-accent) !important;
    font-weight: 600;
}

/* --------------------------------------------------------- the topbar -- */

#page-topbar {
    background: var(--re-surface) !important;
    border-bottom: 1px solid var(--re-line);
    box-shadow: none !important;
}

#page-topbar .navbar-header {
    padding: .65rem 1.25rem;
}

.app-search .form-control {
    background: var(--re-field) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    height: 42px;
    padding-left: 2.6rem !important;
    color: var(--re-ink);
    min-width: 320px;
}

.app-search .form-control:focus {
    border-color: var(--re-accent) !important;
    background: var(--re-surface) !important;
    box-shadow: 0 0 0 4px rgba(0, 174, 239, .1) !important;
}

.app-search .search-widget-icon {
    color: #9fb0c2;
    left: .9rem !important;
}

.topbar-user .btn { padding: .3rem .5rem; }

/* The signed-in person, as a chip: initial, name, role. */
.header-profile-user {
    width: 36px;
    height: 36px;
    background: var(--re-accent) !important;
    color: #fff !important;
    font-weight: 600;
}

.user-name-text { color: var(--re-ink) !important; font-weight: 600; }
.user-name-sub-text { color: var(--re-ink-soft) !important; }

/* ------------------------------------------------------------- cards -- */

.card {
    background: var(--re-surface);
    border: 1px solid var(--re-line) !important;
    border-radius: var(--re-radius) !important;
    box-shadow: 0 1px 2px rgba(15, 42, 67, .04) !important;
    margin-bottom: 1.25rem;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--re-line) !important;
    padding: 1.1rem 1.25rem !important;
}

.card-header .card-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--re-ink) !important;
}

.card-body { padding: 1.25rem; }

/* "View All" and the like, in the accent rather than grey. */
.card-header a.text-muted {
    color: var(--re-accent) !important;
    font-size: .8rem;
    font-weight: 500;
}

/* --------------------------------------------------- page title block -- */

.page-title-box {
    padding: 1.75rem 0 1.25rem;
}

.page-title-box h4 {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--re-ink);
    margin-bottom: .2rem !important;
    /* The template shouts its page titles; the design does not. */
    text-transform: none !important;
}

.page-subtitle {
    color: var(--re-ink-soft);
    font-size: .9rem;
    margin: 0;
}

.breadcrumb-item a { color: var(--re-ink-soft); }
.breadcrumb-item.active { color: var(--re-ink); }

/* ------------------------------------------------- figures and tables -- */

.counter-value { color: var(--re-ink); font-weight: 700; }

.table > :not(caption) > * > * { padding: .85rem .75rem; }

.table thead.table-light th,
.table thead th {
    background: var(--re-field) !important;
    color: var(--re-ink-soft) !important;
    font-size: .78rem;
    font-weight: 600;
    text-transform: none;
    border: 0 !important;
}

.table tbody td { border-color: var(--re-line) !important; color: var(--re-ink); }

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

.btn { border-radius: 10px; font-weight: 500; }

.btn-primary,
.btn-success {
    background: var(--re-accent) !important;
    border-color: var(--re-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover {
    background: #0098d1 !important;
    border-color: #0098d1 !important;
}

.btn-soft-primary {
    background: var(--re-accent-soft) !important;
    color: var(--re-accent) !important;
    border: 0;
}

.badge { border-radius: 8px; font-weight: 500; padding: .4em .7em; }

/* The tinted square behind an icon, used on every summary card. */
.avatar-title {
    border-radius: 12px;
}

/* -------------------------------------------------------------- form -- */

.form-control,
.form-select {
    border-radius: 10px;
    border-color: #e3e9f0;
    min-height: 42px;
    color: var(--re-ink);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--re-accent);
    box-shadow: 0 0 0 4px rgba(0, 174, 239, .1);
}

.form-label { font-weight: 600; font-size: .85rem; color: var(--re-ink); }

/* The tab rail beside the overview chart. */
.nav-pills .nav-link {
    border-radius: 12px !important;
    border: 1px solid var(--re-line);
    color: var(--re-ink) !important;
}

.nav-pills .nav-link.active {
    background: var(--re-accent-soft) !important;
    border-color: rgba(0, 174, 239, .35);
    color: var(--re-ink) !important;
}

.text-muted { color: var(--re-ink-soft) !important; }

/* The green the template uses for "success" reaches a few places that name
 * the colour directly rather than through a variable. */
.text-success { color: var(--re-accent) !important; }
.bg-success-subtle { background-color: var(--re-accent-soft) !important; }
.btn-soft-success { background-color: var(--re-accent-soft) !important; color: var(--re-accent) !important; }
.text-primary { color: var(--re-accent) !important; }
.bg-primary-subtle { background-color: var(--re-accent-soft) !important; }
.link-primary { color: var(--re-accent) !important; }