:root {
  --background-color: #f0f4f9;
  --background-color-dark: #2d3748;
 }

@media screen and (max-width: 700px) {
  table td {
    font-size: 10px;
  }
}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1620px;
  }
}


.navbar-brand img {
  width: 100px;
}

tr.sort-headers th {
  cursor: pointer;
}
tr.sort-headers th.sorted-asc::after {
  content: " ▲";
}
tr.sort-headers th.sorted-desc::after {
  content: " ▼";
}


table tfoot th,.table tfoot th{
  color:var(--tblr-gray-500);
  background:var(--tblr-bg-surface-tertiary);
  font-size:.625rem;
  font-weight:var(--tblr-font-weight-bold);
  text-transform:uppercase;
  letter-spacing:.04em;
  line-height:1rem;
  color:var(--tblr-secondary);
  padding-top:.5rem;
  padding-bottom:.5rem;
  white-space:nowrap
}

.td-left-border {
  border-left: 1px solid #ccc; /* Light gray border */
}



.rep-filter-field:hover {
  color: blue;
}

.rep-filter-field:hover {
  cursor: pointer;
  color: red;
  
}

#remove-rep-filter {
  display: none;
}



.google-logo {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}


.color-circle {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Makes it a circle */
    margin: 0 1px; /* Small spacing between circles */
    vertical-align: middle;
}

.color-r { background-color: #dc3545; } /* Bootstrap Red */
.color-o { background-color: #ff8f07; }
.color-y { background-color: #ffc107; } /* Bootstrap Yellow/Warning */
.color-g { background-color: #28a745; } /* Bootstrap Green/Success */
.color-0 { 
    background-color: #6c757d; /* Grey for '0' (No Data) */
    border: 1px dashed #6c757d; /* Dashed border to distinguish No Data */
}

.background-g {
    background-color: #28a745 !important;
}
.background-r {
    background-color: #dc3545 !important;
}
.background-o {
    background-color: #ff8f07 !important;
}
.background-y {
    background-color: #ffc107 !important;
}

td.indicators {
  min-width: 120px;
}

.header-logo {
  height: 20px;
  margin-right: 40px;
}

/* ===== Impersonation Mode Styling ===== */

/* Light mode impersonation navbar - darker purple */
.navbar-impersonating {
    background: linear-gradient(135deg, #6b21a8 0%, #581c87 100%) !important;
    border-bottom: 3px solid #a78bfa;
    box-shadow: 0 2px 8px rgba(107, 33, 168, 0.3);
}

.navbar-impersonating .nav-link,
.navbar-impersonating .btn,
.navbar-impersonating .text-reset,
.navbar-impersonating .dropdown-toggle {
    color: #fff !important;
}

.navbar-impersonating .nav-link:hover,
.navbar-impersonating .dropdown-toggle:hover {
    color: #e9d5ff !important;
}

.navbar-impersonating .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* Dark mode impersonation navbar - even deeper purple */
[data-bs-theme="dark"] .navbar-impersonating {
    background: linear-gradient(135deg, #581c87 0%, #3b0764 100%) !important;
    border-bottom: 3px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

[data-bs-theme="dark"] .navbar-impersonating .nav-link:hover,
[data-bs-theme="dark"] .navbar-impersonating .dropdown-toggle:hover {
    color: #ddd6fe !important;
}

/* Impersonation user info styling */
.navbar-impersonating .impersonation-user-info {
    color: #fff;
    white-space: nowrap;
}

.navbar-impersonating .impersonation-label {
    font-size: 0.8rem;
    color: #e9d5ff;
}

.navbar-impersonating .impersonation-name {
    font-size: 0.9rem;
    color: #fff;
}

/* Stop impersonation button */
.navbar-impersonating .btn-impersonation-stop {
    background-color: #c4b5fd !important;
    color: #3b0764 !important;
    border: none;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.navbar-impersonating .btn-impersonation-stop:hover {
    background-color: #ddd6fe !important;
    color: #3b0764 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Logout button when impersonating */
.navbar-impersonating .btn-impersonation-logout {
    color: #e9d5ff !important;
    background: transparent;
    border: 1px solid rgba(233, 213, 255, 0.3);
}

.navbar-impersonating .btn-impersonation-logout:hover {
    background: rgba(233, 213, 255, 0.1);
    color: #fff !important;
}

/* Divider between stop and logout */
.navbar-impersonating .impersonation-divider {
    background-color: rgba(233, 213, 255, 0.3);
}

/* Subtle pulse animation on the user icon */
.navbar-impersonating .impersonation-user-info svg {
    animation: impersonation-pulse 2s infinite;
}

@keyframes impersonation-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* ===== Merchant Detail Table ===== */
.table-merchant { font-size: 0.8125rem; }

/* ===== HTMX Indicator Styles ===== */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ===== Bigger step dots ===== */
.steps-lg .step-item::before { width: 12px; height: 12px; }

/* ===== Sparkline Chart Containers ===== */
.chart-sm { height: 40px; }

/* ===== Login Page ===== */

.login-brand-panel {
    background: linear-gradient(160deg, #00125F 0%, #0041B4 50%, #005DEA 100%);
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 80%, rgba(0, 205, 0, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 70% 20%, rgba(0, 204, 229, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.login-brand-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #00cce5, #00ef7f);
    border-radius: 1px;
}

.login-brand-tagline {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    line-height: 1.7;
}

.btn-google-signin {
    background: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
    font-weight: 500;
    padding: 10px 16px;
    font-size: 0.9375rem;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.btn-google-signin:hover {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-color: #c6c6c6;
    color: #3c4043;
}

.btn-google-signin:active {
    background: #eee;
}

[data-bs-theme="dark"] .btn-google-signin {
    background: #131314;
    color: #e3e3e3;
    border-color: #8e918f;
}

[data-bs-theme="dark"] .btn-google-signin:hover {
    background: #1f1f20;
    border-color: #a0a4a2;
    color: #e3e3e3;
}

/* Section sidebars: Koin (Pages/Admin/Koin/_KoinLayout.cshtml) and Access & activity
   (Pages/Shared/_AccessAreaLayout.cshtml).
   Scoped classes only - deliberately NOT Tabler's .navbar-vertical, whose global
   "~ .page-wrapper { margin-left: 15rem }" sibling rule would shift every other page.
   The two areas share these rules by adding a selector rather than duplicating the block:
   one place to change, and no chance of the two drifting apart visually. */
@media (min-width: 992px) {
    .koin-sidebar,
    .access-sidebar {
        width: 14rem;
        flex-shrink: 0;
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        padding-top: 1.25rem;
        padding-left: 0.75rem;   /* 2026-08-18: was 0 -- items hugged the left edge */
        padding-right: 0.5rem;   /* 2026-08-18: was 1rem -- rebalanced toward the left */
    }
}
/* Role badges in the /admin/access suite (Pages/Admin/Access/_RoleBadge.cshtml).
   Explicit solid colors rather than Tabler tints: these two roles must stand out from the
   light-blue crowd, and the values must read identically in light and dark themes, which a
   theme-swapped tint would not. Tabler's darkest shipped red (#c13339) is too bright to
   carry white text at badge size. */
.badge-role-admin {
    background-color: #8b1a1a;
    color: #fff;
}

.badge-role-salesrep {
    background-color: #000;
    color: #fff;
}

/* The flex content column must be allowed to shrink or wide tables overflow the row --
   the Koin merchant list and the access roster both do. */
.koin-content,
.access-content {
    min-width: 0;
}

/* Department contact directory (Pages/Contact.cshtml).

   Rows are top-aligned rather than Tabler's default: the "what they do" cell runs to two or
   three lines while the other three are one, and centring left the department name floating
   in the middle of its own row, which is the column the reader scans.

   An escalation row is a continuation of the department above it (Finance has no main line,
   so the guide names people instead), so the border between them is removed and only the last
   one closes the group. Without this the table reads as 17 unrelated rows instead of 15
   departments, two of which carry a named contact. */
.contact-table > tbody > tr > th,
.contact-table > tbody > tr > td {
    vertical-align: top;
}

.contact-table > tbody > tr.contact-escalation > td {
    border-top: 0;
}

.contact-table > tbody > tr:has(+ tr.contact-escalation) > th,
.contact-table > tbody > tr:has(+ tr.contact-escalation) > td {
    border-bottom: 0;
}