/* ============================================================
   Pricing Engine Admin Portal — Site Overrides
   Always loaded last, after Homer and IM-Theme CSS.

   RULE: This file contains ONLY non-Kendo styling:
     - Homer shell layout adjustments (sidebar, topbar)
     - Bootstrap overrides (form controls, checkboxes)
     - Custom HTML components (grid-add-btn, filter pills)
     - Auth page layout

   All Kendo/Telerik component appearance belongs in:
     src/Web/IM.Platform.Web.CommerceAdmin/Styles/im-theme.scss
   ============================================================ */

/* ── Base font size ─────────────────────────────────────── */

/* Homer defaults to 13 px which feels tight on modern displays.
   Override the core size tokens to 14 px across the board.
   The Kendo grid stays at its own compact 12 px (im-theme.scss). */
:root {
    --ins-body-font-size:       0.875rem;    /* 14 px (was 13 px) */
    --ins-font-size-base:       14px;
    --ins-font-size-sm:         13px;        /* was 12 px / 0.75 rem  */
    --ins-font-size-lg:         16px;        /* was 15 px             */
    --ins-sidenav-item-font-size:       0.8125rem; /* 13 px (was 12 px) */
    --ins-sidenav-item-font-weight:     700;       /* bold (was 600)    */
    --ins-sidenav-sub-item-font-size:   0.8125rem; /* 13 px             */
    --ins-sidenav-sub-item-font-weight: 700;       /* bold (was 400)    */
}
body {
    font-size: 0.875rem;
}

/* ── Topbar — scrollable (not sticky) ───────────────────── */

/* Homer sets position:sticky on .app-topbar. Override so the
   header scrolls with the page instead of staying pinned. */
.app-topbar {
    position: relative !important;
    top: auto !important;
}

/* ── Horizontal area navigation bar ─────────────────────── */

/* Bar sits below the topbar; dark background matches Homer's
   topnav-navbar-dark aesthetic without requiring the Homer variant. */
.ca-topnav {
    background-color: #313a46;
    border-bottom: 1px solid #3d4654;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.ca-topnav .container-fluid {
    display: flex;
    align-items: center;
    width: 100%;
}

.ca-topnav .navbar-nav-scroll {
    /* overflow must remain visible so absolutely-positioned dropdown menus
       are not clipped. The "More" overflow JS collapses items that don't fit. */
    display: flex;
    overflow: visible;
    width: 100%;
}

.ca-topnav .navbar-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 0;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

.ca-topnav .nav-item {
    position: relative;
}

.ca-topnav .nav-link {
    display: flex;
    align-items: center;
    padding: 10px 11px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
    border-bottom: 2px solid transparent;
}

.ca-topnav .nav-link:hover,
.ca-topnav .nav-link:focus {
    color: #fff;
}

.ca-topnav .nav-link.active {
    color: #fff;
    border-bottom-color: #0ea5e9;
}

/* Dropdown toggle caret */
.ca-topnav .nav-link.dropdown-toggle::after {
    margin-left: 4px;
    vertical-align: middle;
}

/* Dropdown menus from the topnav */
.ca-topnav .dropdown-menu {
    margin-top: 0;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Content page — full width, no left margin (sidebar is gone) */
.ca-content-page {
    margin-left: 0 !important;
}

/* ── Soft utility classes (area pill + area switcher) ────── */

/* Soft primary badge — area pill in topbar */
.badge-soft-primary {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.15);
    color: var(--bs-primary, #0a66c2);
}

/* Soft primary button — grid-icon area switcher launcher */
.btn-soft-primary {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.12);
    color: var(--bs-primary, #0a66c2);
    border: none;
    line-height: 1;
    padding: 5px 7px;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.22);
    color: var(--bs-primary, #0a66c2);
}

/* Area tile active state (in _AreaSwitcher) */
.bg-soft-primary {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.1) !important;
}

/* ── Area launcher (app-switcher panel) ─────────────────── */

.ca-area-launcher {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 4px;
}

.ca-area-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 22px;
    border-radius: 8px;
    text-decoration: none;
    min-width: 110px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}

.ca-area-tile:hover {
    background-color: #f4f6f9;
    border-color: #e2e7ef;
    text-decoration: none;
}

.ca-area-tile--active {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.08);
    border-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.3);
}

.ca-area-tile--active:hover {
    background-color: rgba(var(--bs-primary-rgb, 10, 102, 194), 0.13);
}

.ca-area-icon {
    width: 48px;
    height: 48px;
    color: var(--bs-primary, #0a66c2);
    stroke-width: 1.5;
}

.ca-area-label {
    font-size: 12px;
    font-weight: 500;
    color: #313a46;
    text-align: center;
    white-space: nowrap;
}

/* ── Grid link (clickable name column) ──────────────────── */

/* Entity names in grids are clickable links that open the edit
   page. Always blue and semibold so they stand out at a glance,
   regardless of link state (link/visited/hover/active/focus).
   Underline appears on hover as the only affordance change. */
.grid-link,
.grid-link:link,
.grid-link:visited,
.grid-link:hover,
.grid-link:active,
.grid-link:focus {
    color: #337ab7;
    font-weight: 400;
    text-decoration: none;
}
.grid-link:hover,
.grid-link:focus {
    text-decoration: underline;
}

/* ── Grid row selection ──────────────────────────────────── */

/* Single-row click selection (enabled via .Selectable() on every
   grid). Use a soft blue tint so the selected row is obvious on
   the white card surface without competing with .grid-link. */
.homer-grid .k-grid tr.k-selected > td,
.homer-grid .k-grid tr.k-selected:hover > td {
    background-color: #dbeafe;
}

/* ── Grid card wrapper ───────────────────────────────────── */

/* The .homer-grid wrapper provides the card/shadow context.
   Kendo component styles (k-grid, k-pager, etc.) live in
   im-theme.scss — do not add .k-* rules here. */
.homer-grid .card-body {
    padding: 0;
}

/* ── Grid toolbar — custom HTML components ───────────────── */

/* "+ Add X" button — small, neutral pill-style button */
.homer-grid .k-grid-toolbar .grid-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 12px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
    transition: background 0.12s, border-color 0.12s;
}
.homer-grid .k-grid-toolbar .grid-add-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #111827;
    text-decoration: none;
}

/* Primary (green) toolbar buttons rendered as <a> — keep their label white,
   overriding the Kendo/theme toolbar link colour. */
.homer-grid .k-grid-toolbar a.btn-primary,
.homer-grid .k-grid-toolbar a.btn-primary:hover,
.homer-grid .k-grid-toolbar a.btn-primary:focus {
    color: #fff;
}

/* Count badge inside a pill — neutral in inactive, white in active */
.homer-grid .grid-filter-pills .pill .pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.09);
    color: inherit;
}
.homer-grid .grid-filter-pills .pill.active .pill-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Active / All filter pills */
.homer-grid .grid-filter-pills {
    display: inline-flex;
    margin-left: auto;
}
.homer-grid .grid-filter-pills .pill {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 14px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    white-space: nowrap;
    line-height: 1.5;
}
.homer-grid .grid-filter-pills .pill:first-child {
    border-radius: 4px 0 0 4px;
}
.homer-grid .grid-filter-pills .pill:not(:first-child) {
    border-left: none;
}
.homer-grid .grid-filter-pills .pill:last-child {
    border-radius: 0 4px 4px 0;
}
.homer-grid .grid-filter-pills .pill.active {
    background: #0ea5e9;
    border-color: #0ea5e9;
    color: #fff;
}
.homer-grid .grid-filter-pills .pill:hover:not(.active) {
    background: #f0f9ff;
    border-color: #7dd3fc;
    color: #0ea5e9;
}

/* ── Forms ───────────────────────────────────────────────── */

/* Checkbox: coral tint instead of Bootstrap blue */
.form-check-input:checked {
    background-color: #f87171;
    border-color: #f87171;
}

/* Read-only fields: lighter than Bootstrap's default #e9ecef */
.form-control[readonly] {
    background: #f9fafb;
    color: #9ca3af;
    cursor: default;
}

/* ── Auth page ───────────────────────────────────────────── */
.auth-box {
    min-height: 100vh;
    background: #f8fafc;
}

/* ============================================================
   Insightful brand theme — green primary
   Loaded after im-theme.css so all rules here win.

   Bootstrap 5 primary:  #198754 (Bootstrap success green)
   Kendo primary:        same green cascaded via CSS variables
   Dark nav:             #313a46 (unchanged — already matches)
   Danger/delete:        #dc3545 (unchanged — already matches)
   ============================================================ */

/* ── 1. CSS custom properties — Bootstrap + Kendo ─────────── */
:root {
    /* Bootstrap primary */
    --bs-primary:     #198754;
    --bs-primary-rgb: 25, 135, 84;

    /* Kendo theme primary ramp (cascades over im-theme.css) */
    --kendo-color-primary-subtle:        #d1e7dd;
    --kendo-color-primary-subtle-hover:  #a3cfbb;
    --kendo-color-primary-subtle-active: #74b89d;
    --kendo-color-primary:               #198754;
    --kendo-color-primary-hover:         #157347;
    --kendo-color-primary-active:        #0f5132;
    --kendo-color-primary-emphasis:      #20c997;
    --kendo-color-primary-on-subtle:     #0a3622;
    --kendo-color-on-primary:            #ffffff;
    --kendo-color-primary-on-surface:    #198754;
}

/* ── 2. btn-primary → green ───────────────────────────────── */
.btn-primary {
    background-color: #198754;
    border-color:     #198754;
    color:            #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #157347;
    border-color:     #146c43;
    color:            #fff;
}
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #146c43;
    border-color:     #13633b;
    color:            #fff;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #198754;
    border-color:     #198754;
}

/* ── 3. btn-outline-primary → green ──────────────────────── */
.btn-outline-primary {
    color:        #198754;
    border-color: #198754;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #198754;
    border-color:     #198754;
    color:            #fff;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #157347;
    border-color:     #157347;
    color:            #fff;
}

/* ── 4. Nav active underline → green ─────────────────────── */
.ca-topnav .nav-link.active {
    border-bottom-color: #198754;
}

/* ── 5. Filter pills → green ─────────────────────────────── */
.homer-grid .grid-filter-pills .pill.active {
    background:   #198754;
    border-color: #198754;
    color:        #fff;
}
.homer-grid .grid-filter-pills .pill:hover:not(.active) {
    background:   #d1e7dd;
    border-color: #a3cfbb;
    color:        #0f5132;
}

/* ── 6. Form checkbox → green ────────────────────────────── */
.form-check-input:checked {
    background-color: #198754;
    border-color:     #198754;
}

/* ── 7. Grid link → cleaner modern blue ──────────────────── */
/* Links stay blue (matching reference portal) — just freshen the hue */
.grid-link,
.grid-link:link,
.grid-link:visited,
.grid-link:hover,
.grid-link:active,
.grid-link:focus {
    color: #0066cc;
}

/* ── 8. Grid selected row → light green ──────────────────── */
.homer-grid .k-grid tr.k-selected > td,
.homer-grid .k-grid tr.k-selected:hover > td {
    background-color: #d1e7dd;
}

/* ── 9. Kendo grid header → green ────────────────────────── */
.k-grid-header .k-table-th,
.k-grid-header th.k-header {
    color: #198754;
}
.k-grid-header .k-icon.k-i-filter,
.k-grid-header .k-svg-icon {
    color:   #198754;
    opacity: 0.7;
}
.k-grid-header .k-icon.k-i-filter-clear,
.k-grid-header th.k-filtered .k-icon {
    opacity: 1;
}

/* ── 10. Kendo grid row hover → light green ──────────────── */
.k-grid tbody tr:hover td,
.k-grid tbody tr:hover .k-table-td {
    background: #f0fff4 !important;
}

/* ── 11. Kendo pager → green ─────────────────────────────── */
.k-pager-numbers .k-button:hover,
.k-pager .k-button:hover {
    background:   #d1e7dd;
    border-color: #a3cfbb;
    color:        #0f5132;
}
.k-pager-numbers .k-selected,
.k-pager-numbers .k-button.k-selected {
    background:   #198754 !important;
    border-color: #198754 !important;
    color:        #ffffff !important;
}

/* ── Detail-page tabs (.ca-tabs) — clean underline style ──────────────────
   Applied to right-hand card-header tab navs on the Store / Store User
   detail pages. Scoped class so it never affects other nav-tabs. */
.ca-tabs {
    border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
    gap: .25rem;
    flex-wrap: wrap;
}
.ca-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    padding: .65rem .95rem;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    font-size: .8rem;
    background: transparent;
    transition: color .15s ease, border-color .15s ease;
}
.ca-tabs .nav-link:hover {
    color: var(--bs-emphasis-color, #1f2937);
    border-bottom-color: var(--bs-border-color, #d1d5db);
}
.ca-tabs .nav-link.active {
    color: #198754;
    background: rgba(25, 135, 84, .06);
    border-bottom-color: #198754;
    border-bottom-width: 3px;
    border-top-left-radius: .35rem;
    border-top-right-radius: .35rem;
}
.ca-tabs .nav-link .badge {
    font-size: 9px;
    vertical-align: middle;
}