/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

/*
 * Typography — OfferRunner Admin Portal (operational / crisp; iterate before changing _design standards).
 *
 * Page title: semantically always <h1> (one per view). We style view titles here; KPI/stat tiles use
 * h1.display-4 and are excluded below. Optional class: h1.or-page-title (same styles as default h1).
 *
 * Rem root: html { 16px }.
 */
/* Barlow — primary typeface per _design/Typography/README.md */
/* Fallback stack: "Barlow", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif */
/*
 * Portal chrome tokens — single place to tune density. grid.css + profile.css consume these;
 * do not duplicate rem values there (drift shows up as “profile vs grid” mismatch).
 */
:root {
    /* Kendo maps UI text to --kendo-font-family (see kendo-portal-typography.css after theme). */
    --or-admin-font-family: var(--cds-font-family-base, "Barlow", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif);
    /* Toolbar / grid action buttons (same visual weight as profile ToolBar buttons) */
    --or-toolbar-btn-py: 0.125rem;
    --or-toolbar-btn-px: 0.5rem;
    --or-toolbar-btn-min-height: calc(1.22em + (2 * var(--or-toolbar-btn-py)) + 2px);
    --or-button-icon-gap: 4px;
    --or-button-icon-slot-width: 1.0625em;
    /* Kendo grid toolbar band (Refresh / Excel / search row) — keep thin; height follows tallest control */
    --or-grid-toolbar-padding-y: 0.1875rem;
    --or-grid-toolbar-action-gap: 0.5rem;
    /* Grid / toolbar text rhythm (use with `line-height: var(--kendo-line-height) !important` where needed) */
    --kendo-line-height: 1.5;
}

body {
    padding-top: 2.1875rem; /* ~35px — clear fixed navbar */
    /* Fixed app footer (#or-app-footer); keep bottom clear for scrolled content */
    padding-bottom: 0;
    font-family: var(--or-admin-font-family);
    font-size: 0.8125rem; /* 13px — dense operational body */
    /* Single source for matching Kendo grid cell text to body (see grid.css) */
    --or-admin-body-font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 400;
}

/*
 * Reserve space above fixed footer so scrolled content clears #or-app-footer.
 * Must win over Bootstrap .pb-3 on <main> (padding-bottom: 1rem !important), which otherwise
 * replaced this rule and clipped the bottom of long profile pages (e.g. offer social preview).
 */
main.or-app-main {
    padding-bottom: 3.5rem !important;
}

/* Fixed status-bar style footer (copyright + future status) */
#or-app-footer.or-app-footer,
footer.or-app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background-color: #fff;
    border-top: none;
    padding: 0.35rem 0;
    box-shadow: none;
}

.or-app-footer-text {
    color: #6c757d;
    font-size: 0.6875rem; /* 11px — footer meta */
    line-height: 1.4;
    font-weight: 400;
}

html {
    font-size: 16px; /* explicit root for rem tokens aligned to _design/Typography */
    font-family: var(--or-admin-font-family);
}

/* Ensure icon fonts use their proper font families (not Barlow) */
.fa, .far, .fas, .fab, .fal, [class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

.k-icon, .k-font-icon, [class^="k-i-"], [class*=" k-i-"] {
    font-family: "WebComponentsIcons", "Kendo UI" !important;
}

.glyphicon, [class^="glyphicon-"] {
    font-family: "Glyphicons Halflings" !important;
}

/*
 * View page title — still semantic <h1>. Use optional class="or-page-title" in markup for clarity.
 * Excludes h1.display-4 (Dashboard KPI tiles).
 */
h1:not(.display-4),
.h1:not(.display-4) {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Dashboard / cards: restore Bootstrap display-4 (our h1,.h1 would otherwise win on tie) */
h1.display-4,
.h1.display-4 {
    font-size: calc(1.1rem + 1.8vw);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0;
}

@media (min-width: 1200px) {
    h1.display-4,
    .h1.display-4 {
        font-size: 2.25rem; /* compact KPI tiles */
    }
}

h2, .h2 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    /* Space before h2 when not already provided by stacked .row padding (see below) */
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/*
 * Stacked Bootstrap rows under .container-fluid: use padding so gap isn’t lost to
 * margin collapse against Kendo Grid / block-end of the previous row (Company profile).
 */
main.or-app-main .container-fluid > .row + .row {
    padding-top: 1.5rem;
}

main.or-app-main .container-fluid > .row + .row > div[class*="col"] > h2:first-child,
main.or-app-main .container-fluid > .row + .row > div[class*="col"] > .e-section-heading:first-child {
    margin-top: 0;
}

/* Tighter when the page title is immediately above (same column / flow) */
h1 + h2,
h1 + .h2 {
    margin-top: 0.875rem;
}

/* Kendo windows / dialogs: first heading shouldn’t inherit large top margin */
.k-window h2:first-child,
.k-dialog h2:first-child {
    margin-top: 0;
}

h3, .h3 {
    font-size: 1rem; /* 16px */
    line-height: 1.35;
    font-weight: 700;
}

h4, .h4 {
    font-size: 0.875rem; /* 14px */
    line-height: 1.35;
    font-weight: 700;
}

/*
 * H5–H6 are not named in ScreenTypography.md (scale stops at H4).
 * These match body / Small sizes with bold for minor structural labels.
 */
h5, .h5 {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.4;
    font-weight: 700;
}

h6, .h6 {
    font-size: var(--or-admin-body-font-size, 0.8125rem); /* tracks body, bold */
    line-height: 1.4;
    font-weight: 700;
}

footer.page-footer .footer-copyright {
    overflow: hidden;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 0.9375rem; /* 15px — align with .container-fluid gutters */
    padding-right: 0.9375rem;
}

.breadcrumb {
    font-size: var(--or-admin-body-font-size, 0.8125rem);
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 0.25rem;
    margin-top: 0.3125rem; /* ~5px */
    border-radius: 0;
    padding: 0.25rem 0.9375rem;
    position: relative;
    z-index: 1;
}

.breadcrumb a {
    text-decoration: none;
}

/* Ensure container-fluid content aligns with breadcrumb */
.container-fluid {
    padding-left: 0.9375rem !important; /* 15px */
    padding-right: 0.9375rem !important;
}

/*
 * KPI / metric cards (Dashboard, Push Notifications): CSS grid avoids Bootstrap .row
 * horizontal gutters that visually indent the block vs plain headings in the same container.
 */
.or-kpi-metric-cards {
    display: grid;
    gap: 0.75rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Flat tiles: border only (no shadow) in light and dark — dark edge is set in portal-appearance.css */
.or-kpi-metric-cards > .card {
    box-shadow: none;
}

@media (min-width: 768px) {
    .or-kpi-metric-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .or-kpi-metric-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Push page: five tiles — more columns on wide screens */
@media (min-width: 1200px) {
    .or-kpi-metric-cards.or-kpi-metric-cards--push {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* KPI title row = navigation; brand accent (portal-brand-tokens.css). Chevron hints affordance. */
a.or-kpi-metric-title-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    text-decoration: none;
    color: var(--portal-brand-accent, #55aaff);
    border-radius: 0.125rem;
}

/* Uppercase KPI row labels (Dashboard, Push, Developer tiles) — slightly heavier than body small text */
a.or-kpi-metric-title-link.text-uppercase {
    font-weight: 600;
}

a.or-kpi-metric-title-link:hover {
    text-decoration: none;
    color: var(--portal-brand-accent-hover, #3d99ee);
}

a.or-kpi-metric-title-link .or-kpi-metric-chevron {
    font-size: 0.75rem;
    opacity: 0.65;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

a.or-kpi-metric-title-link:hover .or-kpi-metric-chevron {
    opacity: 0.95;
    transform: translateX(2px);
}

a.or-kpi-metric-title-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
}

/* Metric count: same as body/heading emphasis — not styled as a hyperlink */
.or-kpi-metric-count {
    color: inherit;
}

/* Dashboard KPI sub-rows: emphasize drill number first (no underline); label follows */
.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill {
    text-decoration: none;
}

.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill:hover,
.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill:focus-visible {
    text-decoration: none;
}

.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-metric-stat-num {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
}

.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill .or-kpi-metric-stat-num {
    color: var(--portal-brand-accent, #0d6efd);
}

.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill:hover .or-kpi-metric-stat-num,
.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-stat-drill:focus-visible .or-kpi-metric-stat-num {
    color: var(--portal-brand-accent-hover, #0a58ca);
}

.or-kpi-metric-cards .or-kpi-metric-sub .or-kpi-metric-stat-line {
    row-gap: 0.15rem;
}

.or-kpi-metric-cards .or-kpi-metric-sub {
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-top: 0.35rem;
}

/* Optional semantic tones on counts (e.g. Push success/fail) */
.or-kpi-metric-cards .or-kpi-metric-count.text-success {
    color: #198754 !important;
}

.or-kpi-metric-cards .or-kpi-metric-count.text-danger {
    color: #dc3545 !important;
}

#or-push-device-registrations {
    scroll-margin-top: 4.5rem;
}

.k-sprite.fa {
    font-size: 0.8125rem;
    line-height: 0.8125rem;
}

.k-sprite.far {
    font-size: 0.8125rem;
    line-height: 0.8125rem;
}

.k-sprite.fas {
    font-size: 0.8125rem;
    line-height: 0.8125rem;
}

.k-sprite.k-icon {
    font-size: 0.8125rem;
    line-height: 0.8125rem;
}

.k-sprite.glyphicon {
    font-size: 0.8125rem;
    line-height: 0.8125rem;
}

.navbar {
    padding: 0.2rem 0.9375rem;
}

/*
 * Top bar + flyout menus — track body size for links and menus. Tenant name (.navbar-brand) is
 * slightly larger (see below). Bootstrap defaults .navbar-brand to 1.25rem; we tune for density.
 */
#nav-content.navbar {
    font-size: var(--or-admin-body-font-size, 0.8125rem);
}

/* Tenant name — one step above nav links so it reads as the app context, not body copy */
#nav-content.navbar .navbar-brand {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

#nav-content.navbar .dropdown-menu {
    font-size: var(--or-admin-body-font-size, 0.8125rem);
}

/* Global search (navbar) — fixed width, icon inside field; clustered with text-size / theme / user via .or-navbar-right-cluster */
#nav-content.navbar .or-global-search-nav {
    width: 150px;
    max-width: 150px;
}

#nav-content.navbar .or-global-search-nav-field {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

#nav-content.navbar .or-global-search-nav-icon {
    position: absolute;
    left: 0.28rem;
    font-size: 1.125rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 1;
}

#nav-content.navbar .or-global-search-nav-input {
    width: 100%;
    padding-left: 1.65rem;
    padding-right: 0.35rem;
}

/* Readable field on dark chrome */
#nav-content.navbar.navbar-dark .or-global-search-nav .or-global-search-nav-input {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

#nav-content.navbar.navbar-dark .or-global-search-nav .or-global-search-nav-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#nav-content.navbar.navbar-dark .or-global-search-nav .or-global-search-nav-input:focus {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

#nav-content.navbar.navbar-dark .or-global-search-nav-field:focus-within .or-global-search-nav-icon {
    color: rgba(255, 255, 255, 0.85);
}

.e-button-expandcollapse {
    padding-right: 0.125rem;
    margin-bottom: 0.25rem;
    color: #212529;
}

/* Legacy span-based section titles — match H2 scale and section rhythm until migrated to <h2> */
.e-section-heading {
    display: block;
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: 1.25rem; /* match h2 */
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #212529;
}

.e-section-countspan {
    font-size: 0.75rem; /* 12px — one step below body for counts */
    line-height: 1.4;
    font-weight: 400;
    color: #212529;
}

/*
 * Rule below section headings (h2 + optional toolbar row). Small gap so toolbar buttons
 * don’t sit flush on the line — applies everywhere hr.e-section-rule follows a heading.
 */
main.or-app-main hr.e-section-rule {
    margin-top: 0.5rem;
}

[data-toggle="collapse"] .fa:before,
[data-bs-toggle="collapse"] .fa:before {
    content: "\f0d7";
}

[data-toggle="collapse"].collapsed .fa:before,
[data-bs-toggle="collapse"].collapsed .fa:before {
    content: "\f0da";
}

[data-toggle="collapse"]:not(.collapsed) .fa:before,
[data-bs-toggle="collapse"]:not(.collapsed) .fa:before {
    content: "\f0d7";
}

.e-expandcollapse-container-fluid {
    width: 100%;
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: 1.5rem; /* section rhythm (replaces margin on former .e-section-heading span) */
    display: flex;
    align-items: center;
}

/* h2 next to expand/collapse control: no extra block margins inside flex row */
h2.or-expandcollapse-section-heading {
    margin-top: 0;
    margin-bottom: 0;
}

.e-button-expandcollapse {
    margin-right: 0.5rem;
}

.dropdown-header {
    /* ScreenTypography.md: no italics in digital UI */
    font-style: normal;
    font-size: var(--or-admin-body-font-size, 0.8125rem);
    line-height: 1.4;
    font-weight: 700;
}

/*
 * Top nav flyout: section labels (e.g. Tools → Images, Logos) must not read like actionable rows.
 * Smaller caps + muted color + spacing / hairline separate from .dropdown-item.
 */
#nav-content.navbar .dropdown-menu .dropdown-header {
    margin-bottom: 0.2rem;
    padding-top: 0.35rem;
    padding-bottom: 0.15rem;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #6c757d;
    pointer-events: none;
    user-select: none;
}

main.or-app-main .k-button:not(.k-icon-button),
.k-window .k-button:not(.k-icon-button),
.k-dialog .k-button:not(.k-icon-button),
main.or-app-main .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--or-button-icon-gap, 3px);
}

main.or-app-main .k-button:not(.k-icon-button) .k-button-icon,
main.or-app-main .k-button:not(.k-icon-button) .k-icon,
main.or-app-main .k-button:not(.k-icon-button) .k-font-icon,
main.or-app-main .k-button:not(.k-icon-button) .k-sprite,
main.or-app-main .k-button:not(.k-icon-button) .fas,
main.or-app-main .k-button:not(.k-icon-button) .far,
main.or-app-main .k-button:not(.k-icon-button) .fa,
.k-window .k-button:not(.k-icon-button) .k-button-icon,
.k-window .k-button:not(.k-icon-button) .k-icon,
.k-window .k-button:not(.k-icon-button) .k-font-icon,
.k-window .k-button:not(.k-icon-button) .k-sprite,
.k-window .k-button:not(.k-icon-button) .fas,
.k-window .k-button:not(.k-icon-button) .far,
.k-window .k-button:not(.k-icon-button) .fa,
.k-dialog .k-button:not(.k-icon-button) .k-button-icon,
.k-dialog .k-button:not(.k-icon-button) .k-icon,
.k-dialog .k-button:not(.k-icon-button) .k-font-icon,
.k-dialog .k-button:not(.k-icon-button) .k-sprite,
.k-dialog .k-button:not(.k-icon-button) .fas,
.k-dialog .k-button:not(.k-icon-button) .far,
.k-dialog .k-button:not(.k-icon-button) .fa,
main.or-app-main .btn .k-icon,
main.or-app-main .btn .k-font-icon,
main.or-app-main .btn .k-sprite,
main.or-app-main .btn .fas,
main.or-app-main .btn .far,
main.or-app-main .btn .fa {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: var(--or-button-icon-slot-width, 0.875em);
    line-height: 1;
    flex-shrink: 0;
}

#nav-content.navbar .dropdown-menu .dropdown-divider + .dropdown-header {
    margin-top: 0.15rem;
    padding-top: 0.4rem;
}

#nav-content.navbar .dropdown-menu .dropdown-item + .dropdown-header {
    margin-top: 0.45rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(33, 37, 41, 0.12);
}