/* ============================================
   HartPulse Enterprise Design System
   ============================================

   Design Intent:
   - Maroon is brand anchor only
   - Page headers are calm and neutral
   - Content surfaces are light and readable
   - Buttons have clear hierarchy
   - Cards feel structured not flat
   - Works for dense back office UIs

   ============================================ */

:root {
    /* === Brand Layer === */
    --brand-maroon: #7B1E23;
    --brand-maroon-hover: #5F1519;
    --brand-header-text: #FFFFFF;

    /* === Page Header System === */
    --page-header-bg: #3E4045;
    --page-header-text: #FFFFFF;
    --page-header-icon: #D6D7DA;
    --page-header-border: #2B2D31;

    /* === Application Backgrounds === */
    --bg-main: #F4F5F7;
    --bg-section: #ECEDEF;
    --bg-inset: #E2E3E6;

    /* === Card System === */
    --card-bg: #FFFFFF;
    --card-border: #D1D3D8;
    --card-header-bg: #F1F2F4;
    --card-header-text: #1F1F23;
    --card-footer-bg: #F6F7F9;

    /* === Typography Colors === */
    --text-primary: #1E1F22;
    --text-secondary: #5A5D63;
    --text-muted: #8A8F98;
    --text-inverse: #FFFFFF;

    /* === Button System === */
    --btn-primary-bg: #7B1E23;
    --btn-primary-hover: #5F1519;
    --btn-primary-text: #FFFFFF;

    --btn-secondary-bg: #4A4D53;
    --btn-secondary-hover: #35373C;
    --btn-secondary-text: #FFFFFF;

    --btn-tertiary-bg: transparent;
    --btn-tertiary-border: #4A4D53;
    --btn-tertiary-hover-bg: #E6E7EA;
    --btn-tertiary-text: #4A4D53;

    --btn-disabled-bg: #B8BBC2;
    --btn-disabled-text: #FFFFFF;

    /* === Form Controls === */
    --input-bg: #FFFFFF;
    --input-border: #C9CCD2;
    --input-focus-border: #7B1E23;
    --input-focus-glow: rgba(123, 30, 35, 0.25);
    --input-placeholder: #9A9DA3;

    /* === Navigation Elements === */
    --nav-secondary-bg: #3E4045;
    --nav-secondary-active: #7B1E23;
    --nav-secondary-hover: #2B2D31;
    --nav-secondary-text: #FFFFFF;

    /* === Status Colors === */
    --status-success: #2F7D4E;
    --status-warning: #B36A00;
    --status-error: #B3261E;
    --status-info: #5E6772;

    /* === Dividers and Lines === */
    --divider-standard: #DADCE0;
    --divider-strong: #2B2D31;

    /* === Shadows === */
    --shadow-low: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-medium: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-high: 0 8px 16px rgba(0,0,0,0.18);
}

/* ============================================
   Global Site Header
   ============================================ */

.site-header {
    background: var(--brand-maroon);
    color: var(--brand-header-text);
}

.site-header a,
.site-header .nav-link {
    color: var(--brand-header-text);
}

.site-header a:hover,
.site-header .nav-link:hover {
    background: var(--brand-maroon-hover);
}

/* ============================================
   Page Header Component
   Warm slate background for page titles
   ============================================ */

.page-header {
    background: var(--page-header-bg);
    padding: 1.5rem 2rem;
    margin: -1rem -1rem 1.5rem -1rem;
    color: var(--page-header-text);
    border-bottom: 3px solid var(--page-header-border);
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--page-header-text);
}

.page-header .subtitle {
    color: var(--page-header-icon);
    font-size: 0.95rem;
}

.page-header i {
    color: var(--page-header-icon);
}

.page-header .btn-light {
    background: var(--card-bg);
    border: none;
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: var(--shadow-low);
}

.page-header .btn-light:hover {
    background: var(--bg-section);
}

/* Page header filter/type cards */
.page-header .type-cards {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.page-header .type-card {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    min-width: 100px;
    text-align: center;
    color: var(--page-header-text);
}

.page-header .type-card:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.page-header .type-card.active {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--card-border);
    box-shadow: var(--shadow-medium);
}

.page-header .type-card .type-icon {
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
    opacity: 0.9;
}

.page-header .type-card.active .type-icon {
    opacity: 1;
    color: var(--brand-maroon);
}

.page-header .type-card .type-count {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.page-header .type-card .type-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.page-header .type-card.active .type-label {
    opacity: 1;
    color: var(--text-secondary);
}

/* ============================================
   Application Background
   ============================================ */

.app-background {
    background: var(--bg-main);
}

.section-background {
    background: var(--bg-section);
}

.inset-panel {
    background: var(--bg-inset);
    border-radius: 8px;
    padding: 1rem;
}

/* ============================================
   Card System
   ============================================ */

.surface-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: var(--shadow-low);
    overflow: hidden;
}

.surface-card .card-header,
.card-header-styled {
    background: var(--card-header-bg);
    color: var(--card-header-text);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--card-border);
}

.surface-card .card-footer,
.card-footer-styled {
    background: var(--card-footer-bg);
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--card-border);
}

/* ============================================
   Filter Banner
   ============================================ */

.filter-banner {
    background: var(--bg-section);
    border-left: 4px solid var(--brand-maroon);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-banner .filter-text {
    font-weight: 500;
    color: var(--text-primary);
}

.filter-banner .filter-type {
    font-weight: 700;
    color: var(--brand-maroon);
}

/* ============================================
   Button System
   ============================================ */

.btn-brand {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--btn-primary-hover);
    color: var(--btn-primary-text);
}

.btn-brand-secondary {
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-brand-secondary:hover,
.btn-brand-secondary:focus {
    background: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
}

.btn-brand-tertiary {
    background: var(--btn-tertiary-bg);
    color: var(--btn-tertiary-text);
    border: 1px solid var(--btn-tertiary-border);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-brand-tertiary:hover,
.btn-brand-tertiary:focus {
    background: var(--btn-tertiary-hover-bg);
    color: var(--btn-tertiary-text);
}

.btn-brand:disabled,
.btn-brand-secondary:disabled,
.btn-brand-tertiary:disabled {
    background: var(--btn-disabled-bg);
    color: var(--btn-disabled-text);
    border-color: var(--btn-disabled-bg);
    cursor: not-allowed;
}

/* ============================================
   Form Controls
   ============================================ */

.form-control:focus,
.e-input:focus,
.e-input-group.e-input-focus {
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--input-focus-glow) !important;
}

/* ============================================
   Status Indicators
   ============================================ */

.status-success { color: var(--status-success); }
.status-warning { color: var(--status-warning); }
.status-error { color: var(--status-error); }
.status-info { color: var(--status-info); }

.bg-status-success { background-color: var(--status-success); color: white; }
.bg-status-warning { background-color: var(--status-warning); color: white; }
.bg-status-error { background-color: var(--status-error); color: white; }
.bg-status-info { background-color: var(--status-info); color: white; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pill.enabled,
.status-pill.active,
.status-pill.success {
    background: rgba(47, 125, 78, 0.12);
    color: var(--status-success);
}

.status-pill.disabled,
.status-pill.inactive,
.status-pill.error {
    background: rgba(179, 38, 30, 0.1);
    color: var(--status-error);
}

.status-pill.warning {
    background: rgba(179, 106, 0, 0.1);
    color: var(--status-warning);
}

.status-pill.info {
    background: rgba(94, 103, 114, 0.1);
    color: var(--status-info);
}

.status-pill i {
    font-size: 0.65rem;
}

/* ============================================
   Text Utilities
   ============================================ */

.text-brand { color: var(--brand-maroon); }
.text-primary-brand { color: var(--text-primary); }
.text-secondary-brand { color: var(--text-secondary); }
.text-muted-brand { color: var(--text-muted); }

/* ============================================
   Price Display
   ============================================ */

.price-positive {
    font-weight: 600;
    color: var(--status-success);
}

.price-negative {
    font-weight: 600;
    color: var(--status-error);
}

/* ============================================
   Dividers
   ============================================ */

.divider {
    border-top: 1px solid var(--divider-standard);
}

.divider-strong {
    border-top: 2px solid var(--divider-strong);
}

hr {
    border-color: var(--divider-standard);
}

/* ============================================
   Navigation Secondary
   ============================================ */

.nav-secondary {
    background: var(--nav-secondary-bg);
}

.nav-secondary .nav-link {
    color: var(--nav-secondary-text);
}

.nav-secondary .nav-link:hover {
    background: var(--nav-secondary-hover);
}

.nav-secondary .nav-link.active {
    background: var(--nav-secondary-active);
}

/* ============================================
   Type Dots (for grids)
   ============================================ */

.type-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.type-dot.service { background: var(--btn-secondary-bg); }
.type-dot.item { background: var(--status-success); }
.type-dot.equipment { background: var(--status-info); }
.type-dot.kit { background: var(--status-warning); }
.type-dot.discount { background: var(--status-error); }
.type-dot.coupon { background: var(--text-muted); }

/* ============================================
   Bootstrap Overrides
   Map Bootstrap to brand colors
   ============================================ */

:root {
    --bs-primary: var(--brand-maroon);
    --bs-primary-rgb: 123, 30, 35;
    --bs-secondary: var(--btn-secondary-bg);
    --bs-secondary-rgb: 74, 77, 83;
    --bs-success: var(--status-success);
    --bs-success-rgb: 47, 125, 78;
    --bs-warning: var(--status-warning);
    --bs-warning-rgb: 179, 106, 0;
    --bs-danger: var(--status-error);
    --bs-danger-rgb: 179, 38, 30;
    --bs-info: var(--status-info);
    --bs-info-rgb: 94, 103, 114;
    --bs-body-color: var(--text-primary);
    --bs-body-bg: var(--bg-main);
    --bs-border-color: var(--card-border);
}

.btn-primary {
    background-color: var(--brand-maroon);
    border-color: var(--brand-maroon);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-maroon-hover);
    border-color: var(--brand-maroon-hover);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--btn-secondary-hover);
    border-color: var(--btn-secondary-hover);
}

.btn-outline-primary {
    color: var(--brand-maroon);
    border-color: var(--brand-maroon);
}

.btn-outline-primary:hover {
    background-color: var(--brand-maroon);
    border-color: var(--brand-maroon);
    color: white;
}

.btn-outline-secondary {
    color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
}

.btn-outline-secondary:hover {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: white;
}

.text-primary {
    color: var(--brand-maroon) !important;
}

.bg-primary {
    background-color: var(--brand-maroon) !important;
}

.border-primary {
    border-color: var(--brand-maroon) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

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

.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-low);
}

.card-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-border);
}

.card-footer {
    background: var(--card-footer-bg);
    border-top: 1px solid var(--card-border);
}

/* Links use brand maroon */
a {
    color: var(--brand-maroon);
}

a:hover {
    color: var(--brand-maroon-hover);
}

/* Focus states use brand */
.form-control:focus {
    border-color: var(--brand-maroon);
    box-shadow: 0 0 0 0.2rem var(--input-focus-glow);
}

.form-select:focus {
    border-color: var(--brand-maroon);
    box-shadow: 0 0 0 0.2rem var(--input-focus-glow);
}

/* Badge colors */
.badge.bg-primary {
    background-color: var(--brand-maroon) !important;
}

.badge.bg-secondary {
    background-color: var(--btn-secondary-bg) !important;
}

.badge.bg-success {
    background-color: var(--status-success) !important;
}

.badge.bg-warning {
    background-color: var(--status-warning) !important;
}

.badge.bg-danger {
    background-color: var(--status-error) !important;
}

.badge.bg-info {
    background-color: var(--status-info) !important;
}

/* Alert colors */
.alert-primary {
    background-color: rgba(123, 30, 35, 0.1);
    border-color: rgba(123, 30, 35, 0.2);
    color: var(--brand-maroon);
}

.alert-success {
    background-color: rgba(47, 125, 78, 0.1);
    border-color: rgba(47, 125, 78, 0.2);
    color: var(--status-success);
}

.alert-warning {
    background-color: rgba(179, 106, 0, 0.1);
    border-color: rgba(179, 106, 0, 0.2);
    color: var(--status-warning);
}

.alert-danger {
    background-color: rgba(179, 38, 30, 0.1);
    border-color: rgba(179, 38, 30, 0.2);
    color: var(--status-error);
}

.alert-info {
    background-color: rgba(94, 103, 114, 0.1);
    border-color: rgba(94, 103, 114, 0.2);
    color: var(--status-info);
}

/* Progress bars */
.progress-bar {
    background-color: var(--brand-maroon);
}

/* ============================================
   Syncfusion Grid Overrides - White Backgrounds
   ============================================ */

.e-grid {
    background-color: #FFFFFF !important;
}

.e-grid .e-gridheader {
    background-color: #FFFFFF !important;
}

.e-grid .e-headercell {
    background-color: #FFFFFF !important;
}

.e-grid .e-rowcell {
    background-color: #FFFFFF !important;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: #f8f9fa !important;
}

.e-grid .e-altrow .e-rowcell {
    background-color: #FFFFFF !important;
}

.e-grid .e-gridcontent {
    background-color: #FFFFFF !important;
}

.e-grid .e-pager {
    background-color: #FFFFFF !important;
}

/* ============================================
   Remove ALL Alternating Row Styling Globally
   ============================================ */

/* Bootstrap table-striped override */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent !important;
    --bs-table-accent-bg: transparent !important;
}

/* Bootstrap table rows - all white */
.table > tbody > tr > td,
.table > tbody > tr > th {
    background-color: #FFFFFF !important;
}

/* Table elements */
table {
    background-color: #FFFFFF;
}

.table {
    background-color: #FFFFFF;
}

/* Generic alternating row overrides */
tr:nth-child(odd),
tr:nth-child(even),
li:nth-child(odd),
li:nth-child(even) {
    background-color: inherit;
}

/* List group items - white background, no alternating */
.list-group-item {
    background-color: #FFFFFF !important;
}

.list-group-item:nth-child(odd),
.list-group-item:nth-child(even) {
    background-color: #FFFFFF !important;
}

.list-group-item:hover {
    background-color: #f8f9fa !important;
}

/* Card body scrolling areas */
.card-body {
    background-color: #FFFFFF;
}

/* Override bg-light in card headers to be white */
.card-header.bg-light {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--card-border);
}

/* List groups */
.list-group-item.active {
    background-color: var(--brand-maroon);
    border-color: var(--brand-maroon);
}

/* Nav pills and tabs */
.nav-pills .nav-link.active {
    background-color: var(--brand-maroon);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--brand-maroon);
}

/* Pagination */
.page-link {
    color: var(--brand-maroon);
}

.page-item.active .page-link {
    background-color: var(--brand-maroon);
    border-color: var(--brand-maroon);
}

.page-link:hover {
    color: var(--brand-maroon-hover);
}