/* ============================================================
   B3 Brand Component Overrides
   Applies design tokens to Bootstrap 4 + Syncfusion components.
   Values mapped from MAUI Colors.xaml, Styles.xaml, ButtonStyles.xaml,
   SurfaceStyles.xaml, StatusStyles.xaml, BadgeStyles.xaml.
   ============================================================ */

/* ── Global ──
   MAUI: PageBackgroundGradientBrush = warm cream (#FDF6EC → #FDF6EC)
   MAUI: Label font = OpenSansRegular, 14px, TextPrimary #2D2D2D
*/

html, body {
    font-family: var(--b3-font-family);
    font-size: var(--b3-font-size-sm);
    color: var(--b3-text-primary);
    background: var(--b3-background); /* warm cream #FDF6EC */
}

/* Page content area — warm gradient matching MAUI HeaderSectionGradient */
.page-content {
    background: var(--b3-gradient-page-subtle) !important;
}

/* Generic content containers on the warm background */
.page-content > div {
    background: transparent;
}

a {
    color: var(--b3-accent);
}

a:hover {
    color: var(--b3-accent-dark);
}

/* ============================================================
   Bootstrap 4 — Buttons
   MAUI DefaultButtonStyle: CornerRadius=3, Padding=10,12,
     FontSize=16, bg=Gray550, text=TextPrimary (#2D2D2D)
   MAUI PrimaryButtonStyle: bg=Primary (Gold), text=TextPrimary, Bold
   MAUI AccentButtonStyle:  bg=Accent (Blue), text=TextPrimary, Bold
   ============================================================ */

.btn {
    border-radius: var(--b3-radius-sm);
    min-height: var(--b3-btn-min-height);
    padding: var(--b3-btn-padding-v) var(--b3-btn-padding-h);
    font-family: var(--b3-font-family);
    font-size: var(--b3-font-size-base);
    font-weight: 400;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: scale(0.97);
}

/* MAUI DefaultButtonStyle: bg=Gray550, text=TextPrimary */
.btn-secondary {
    background-color: var(--b3-gray-550);
    border-color: var(--b3-gray-550);
    color: #fff;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--b3-gray-600);
    border-color: var(--b3-gray-600);
    color: #fff;
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--b3-primary) !important;
    border-color: var(--b3-primary) !important;
    color: var(--b3-text-primary) !important;
}

/* MAUI PrimaryButtonStyle: bg=Gold, text=dark, Bold
   Gold (#E7A643) is light enough for dark text */
.btn-primary {
    background-color: var(--b3-primary);
    border-color: var(--b3-primary);
    color: var(--b3-text-primary); /* dark text on gold, matching MAUI */
    font-weight: 700;
}

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

.btn-primary:active,
.btn-primary.active {
    background-color: var(--b3-gray-550) !important;
    border-color: var(--b3-gray-550) !important;
    color: #fff !important;
}

/* MAUI AccentButtonStyle: bg=Blue, Bold — white text for contrast on blue */
.btn-b3-accent {
    background-color: var(--b3-accent);
    border-color: var(--b3-accent);
    color: #fff;
    font-weight: 700;
}

.btn-b3-accent:hover,
.btn-b3-accent:focus {
    background-color: var(--b3-accent-dark);
    border-color: var(--b3-accent-dark);
    color: #fff;
}

/* MAUI AccentAltButtonStyle: bg=Teal, Bold */
.btn-b3-accent-alt {
    background-color: var(--b3-accent-alt);
    border-color: var(--b3-accent-alt);
    color: #fff;
    font-weight: 700;
}

.btn-b3-accent-alt:hover,
.btn-b3-accent-alt:focus {
    background-color: var(--b3-accent-alt-dark);
    border-color: var(--b3-accent-alt-dark);
    color: #fff;
}

/* ── Outline Variants ──
   MAUI: BorderWidth=2, Bold, transparent bg */

.btn-outline-secondary {
    color: var(--b3-gray-550);
    border: 2px solid var(--b3-gray-550);
    background-color: transparent;
    font-weight: 700;
}

.btn-outline-secondary:hover {
    background-color: var(--b3-gray-550);
    color: #fff;
}

.btn-outline-primary {
    color: var(--b3-primary-darker);
    border: 2px solid var(--b3-primary);
    background-color: transparent;
    font-weight: 700;
}

.btn-outline-primary:hover {
    background-color: var(--b3-primary);
    border-color: var(--b3-primary);
    color: var(--b3-text-primary);
}

.btn-b3-outline-accent {
    color: var(--b3-accent);
    border: 2px solid var(--b3-accent);
    background-color: transparent;
    font-weight: 700;
}

.btn-b3-outline-accent:hover {
    background-color: var(--b3-accent);
    color: #fff;
}

.btn-b3-outline-accent-alt {
    color: var(--b3-accent-alt);
    border: 2px solid var(--b3-accent-alt);
    background-color: transparent;
    font-weight: 700;
}

.btn-b3-outline-accent-alt:hover {
    background-color: var(--b3-accent-alt);
    color: #fff;
}

/* ── Semantic Buttons ── */

.btn-success {
    background-color: var(--b3-success);
    border-color: var(--b3-success);
    color: #fff;
    font-weight: 700;
}

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

.btn-danger {
    background-color: var(--b3-error);
    border-color: var(--b3-error);
    color: #fff;
    font-weight: 700;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: var(--b3-error-dark);
    border-color: var(--b3-error-dark);
}

.btn-warning {
    background-color: var(--b3-warning);
    border-color: var(--b3-warning);
    color: #fff;
    font-weight: 700;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--b3-warning-dark);
    border-color: var(--b3-warning-dark);
    color: #fff;
}

.btn-info {
    background-color: var(--b3-info);
    border-color: var(--b3-info);
    color: #fff;
    font-weight: 700;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--b3-info-dark);
    border-color: var(--b3-info-dark);
    color: #fff;
}

.btn-outline-success {
    color: var(--b3-success);
    border: 2px solid var(--b3-success);
}

.btn-outline-success:hover {
    background-color: var(--b3-success);
    color: #fff;
}

.btn-outline-danger {
    color: var(--b3-error);
    border: 2px solid var(--b3-error);
}

.btn-outline-danger:hover {
    background-color: var(--b3-error);
    color: #fff;
}

/* ============================================================
   Bootstrap 4 — Alerts (MAUI StatusStyles)
   ============================================================ */

.alert-primary {
    background-color: var(--b3-primary-lighter);
    border-color: var(--b3-primary-light);
    color: var(--b3-primary-darker);
}

.alert-success {
    background-color: var(--b3-success-lighter);
    border-color: var(--b3-success-light);
    color: var(--b3-success-dark);
}

.alert-warning {
    background-color: var(--b3-warning-lighter);
    border-color: var(--b3-warning-light);
    color: var(--b3-warning-darker);
}

.alert-danger {
    background-color: var(--b3-error-lighter);
    border-color: var(--b3-error-light);
    color: var(--b3-error-dark);
}

.alert-info {
    background-color: var(--b3-info-lighter);
    border-color: var(--b3-info-light);
    color: var(--b3-info-dark);
}

/* ============================================================
   Bootstrap 4 — Cards
   MAUI LocationCardStyle: RoundRectangle 12, no stroke, shadow
   White cards pop against the warm cream page background.
   ============================================================ */

.card {
    border-radius: var(--b3-radius-card);
    box-shadow: var(--b3-shadow-card);
    border: none;
    background-color: var(--b3-card-bg);
}

/* ============================================================
   Bootstrap 4 — Forms (MAUI DefaultBorderStyle + Entry)
   ============================================================ */

.form-control {
    border-radius: var(--b3-radius-sm);
    border-color: var(--b3-border-color);
    font-family: var(--b3-font-family);
    font-size: var(--b3-font-size-sm);
    min-height: var(--b3-btn-min-height);
    color: var(--b3-text-primary);
    background-color: var(--b3-card-bg);
}

.form-control::placeholder {
    color: var(--b3-text-muted);
}

.form-control:focus {
    border-color: var(--b3-accent);
    box-shadow: 0 0 0 0.2rem rgba(81, 133, 229, 0.25);
    background-color: var(--b3-card-bg);
}

/* ============================================================
   Syncfusion — Toolbar
   MAUI HeaderGradientBrush: Primary → PrimaryLight, white text
   ============================================================ */

.e-control.e-toolbar.e-lib,
.e-toolbar {
    background: var(--b3-gradient-header) !important;
    border-color: var(--b3-primary-dark) !important;
}

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-tbar-btn-text,
.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn .e-btn-icon,
.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text,
.e-toolbar .e-toolbar-items .e-toolbar-item .e-btn-icon {
    color: var(--b3-toolbar-text) !important;
}

.e-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn {
    color: var(--b3-toolbar-text) !important;
}

/* Toolbar icon override — make sure hamburger and other icons are white */
.e-toolbar .e-toolbar-items .e-toolbar-item .e-icons {
    color: var(--b3-toolbar-text) !important;
}

/* ============================================================
   Syncfusion — Sidebar / Menu
   MAUI: Sidebar gets warm surface tint, not pure white
   ============================================================ */

.e-sidebar {
    background-color: var(--b3-surface-warm) !important; /* warm off-white #fdfbf7 */
    border-right: 1px solid var(--b3-border-color);
    transform: translateX(0) !important;
    visibility: visible !important;
}

.e-menu-wrapper ul .e-menu-item:hover,
.e-menu-container ul .e-menu-item:hover {
    background-color: var(--b3-sidebar-hover) !important; /* PrimaryLighter #FFF2D8 */
}

.e-menu-wrapper ul .e-menu-item.e-selected,
.e-menu-container ul .e-menu-item.e-selected,
.e-menu-wrapper ul .e-menu-item.e-focused,
.e-menu-container ul .e-menu-item.e-focused {
    background-color: var(--b3-sidebar-active) !important; /* PrimaryLight #F7CE86 */
}

/* ============================================================
   Syncfusion — Grid
   ============================================================ */

.e-grid .e-headercell,
.e-grid .e-headercelldiv {
    background-color: var(--b3-surface) !important;
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-row.e-altrow:hover .e-rowcell {
    background-color: var(--b3-primary-lighter) !important;
}

.e-grid .e-rowcell.e-selectionbackground,
.e-grid .e-row.e-altrow .e-rowcell.e-selectionbackground {
    background-color: var(--b3-accent-lighter) !important;
}

.e-grid .e-pager .e-currentitem {
    background-color: var(--b3-primary) !important;
    color: var(--b3-text-primary) !important;
}

/* ============================================================
   Syncfusion — Dialog
   ============================================================ */

.e-dialog .e-dlg-header-content {
    background: var(--b3-gradient-header) !important;
    color: #fff !important;
}

.e-dialog .e-dlg-header {
    color: #fff !important;
}

.e-dialog .e-btn.e-primary {
    background-color: var(--b3-primary) !important;
    border-color: var(--b3-primary) !important;
    color: var(--b3-text-primary) !important;
}

.e-dialog .e-btn.e-primary:hover {
    background-color: var(--b3-primary-dark) !important;
    border-color: var(--b3-primary-dark) !important;
}

.e-dialog {
    border-radius: var(--b3-radius-card) !important;
    overflow: hidden;
}

/* ============================================================
   Syncfusion — Buttons
   ============================================================ */

.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background-color: var(--b3-primary) !important;
    border-color: var(--b3-primary) !important;
    color: var(--b3-text-primary) !important; /* dark text on gold */
    border-radius: var(--b3-radius-sm);
    font-weight: 700;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background-color: var(--b3-primary-dark) !important;
    border-color: var(--b3-primary-dark) !important;
}

.e-btn.e-danger {
    background-color: var(--b3-error) !important;
    border-color: var(--b3-error) !important;
    border-radius: var(--b3-radius-sm);
}

.e-btn.e-danger:hover {
    background-color: var(--b3-error-dark) !important;
    border-color: var(--b3-error-dark) !important;
}

.e-btn.e-success {
    background-color: var(--b3-success) !important;
    border-color: var(--b3-success) !important;
    border-radius: var(--b3-radius-sm);
}

.e-btn.e-success:hover {
    background-color: var(--b3-success-dark) !important;
    border-color: var(--b3-success-dark) !important;
}

/* Syncfusion progress button */
.e-progress-btn.e-primary,
.e-progress-btn .e-btn.e-primary {
    background-color: var(--b3-primary) !important;
    border-color: var(--b3-primary) !important;
    color: var(--b3-text-primary) !important;
}

/* ============================================================
   Syncfusion — Tabs
   MAUI: SelectedTabColor=AccentAlt (Teal), bar bg=SurfaceLight
   ============================================================ */

.e-tab .e-tab-header {
    background-color: var(--b3-surface) !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--b3-accent-alt) !important;
    border-bottom: 2px solid var(--b3-accent-alt);
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--b3-text-muted);
}

/* Tab header inside the take-inventory wizard should not get gold gradient */
.e-tab .e-tab-header.e-toolbar {
    background: var(--b3-surface) !important;
}

/* ============================================================
   Syncfusion — Menu links
   ============================================================ */

.e-menu-wrapper .e-menu .e-menu-item .e-menu-url,
.e-menu-container .e-menu .e-menu-item .e-menu-url {
    color: var(--b3-text-primary);
}

.e-menu-wrapper .e-menu .e-menu-item:hover .e-menu-url,
.e-menu-container .e-menu .e-menu-item:hover .e-menu-url {
    color: var(--b3-primary-darker);
}

/* ============================================================
   Syncfusion — ListView (PickLocation)
   ============================================================ */

.e-listview .e-list-item:hover {
    background-color: var(--b3-primary-lighter) !important;
}

.e-listview .e-list-item.e-active,
.e-listview .e-list-item.e-focused {
    background-color: var(--b3-primary-light) !important;
    color: var(--b3-text-primary) !important;
}

/* ============================================================
   Syncfusion — DropDownButton (tenant switcher in toolbar)
   ============================================================ */

.e-toolbar .e-dropdown-btn {
    color: var(--b3-toolbar-text) !important;
}

.e-dropdown-popup .e-item:hover {
    background-color: var(--b3-primary-lighter) !important;
}

/* ============================================================
   Inventory Item Count Boxes (InventoryCountsByGroup)
   Brand the hardcoded gray/green/yellow with tokens.
   ============================================================ */

.item-type-box {
    border-color: var(--b3-border-color) !important; /* was #828E9A */
    color: var(--b3-text-muted-darker) !important; /* was #828E9A */
    background-color: var(--b3-card-bg);
    border-radius: var(--b3-radius-md) !important;
}

.item-type-box-selected {
    border-color: var(--b3-success-dark) !important; /* was black */
    background: var(--b3-success-lighter) !important; /* was lightgreen */
    color: var(--b3-text-primary) !important; /* was #828E9A */
}

.partially-counted {
    background: var(--b3-warning-lighter) !important; /* was yellow */
}

.item-type-box-clicked {
    border-color: var(--b3-success) !important; /* was green */
    color: var(--b3-text-primary) !important; /* was #828E9A */
}

.item-type-box-number-border {
    background: var(--b3-accent) !important; /* was #828E9A */
}

/* ============================================================
   Badge Utility Classes (MAUI BadgeStyles)
   ============================================================ */

.b3-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: var(--b3-font-size-xs);
    font-weight: 700;
    border: 1px solid transparent;
}

.b3-badge-scheduled {
    background-color: #E5F3FF;
    color: #005A9E;
    border-color: #005A9E;
}

.b3-badge-in-progress {
    background-color: #E6FAFB;
    color: #027B85;
    border-color: #027B85;
}

.b3-badge-completed {
    background-color: #E9F7EA;
    color: #0F6A10;
    border-color: #0F6A10;
}

.b3-badge-blocked {
    background-color: #FDEEEE;
    color: #B72227;
    border-color: #B72227;
}

/* ============================================================
   Utility Classes
   ============================================================ */

.b3-card {
    background: var(--b3-card-bg);
    border-radius: var(--b3-radius-card);
    box-shadow: var(--b3-shadow-card);
    padding: var(--b3-card-padding);
}

.b3-card-interactive {
    background: var(--b3-card-bg);
    border-radius: var(--b3-radius-card);
    box-shadow: var(--b3-shadow-card);
    padding: var(--b3-card-padding);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.b3-card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--b3-shadow-popup);
}

.b3-card-icon {
    background-color: var(--b3-primary-lighter);
    border-radius: var(--b3-radius-md);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b3-surface {
    background-color: var(--b3-surface);
}

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

.b3-gradient-header {
    background: var(--b3-gradient-header);
    color: #fff;
}

.b3-gradient-accent {
    background: var(--b3-gradient-accent);
    color: #fff;
}

.b3-primary-box {
    background-color: var(--b3-surface);
    border: 2px solid var(--b3-primary);
    border-radius: var(--b3-radius-sm);
}

.b3-success-box {
    background-color: var(--b3-success-lighter);
    border: 1px solid var(--b3-success-light);
    border-radius: var(--b3-radius-sm);
    padding: var(--b3-card-padding);
}

.b3-warning-box {
    background-color: var(--b3-warning-lighter);
    border: 1px solid var(--b3-warning-light);
    border-radius: var(--b3-radius-sm);
    padding: var(--b3-card-padding);
}

.b3-error-box {
    background-color: var(--b3-error-lighter);
    border: 1px solid var(--b3-error-light);
    border-radius: var(--b3-radius-sm);
    padding: var(--b3-card-padding);
}

/* ============================================================
   Playwright DOM Audit Fixes
   Overrides for Bootstrap/Syncfusion defaults detected at runtime
   ============================================================ */

/* Fix: rgb(248, 249, 250) #f8f9fa on toolbar items bg */
.e-toolbar .e-toolbar-items {
    background: transparent !important;
}

.e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn,
.e-toolbar .e-toolbar-items .e-toolbar-item button.e-btn {
    background: transparent !important;
}

/* Fix: rgb(0, 123, 255) #007bff — Bootstrap primary leaking into sidebar menu */
.e-menu-wrapper ul .e-menu-item,
.e-menu-container ul .e-menu-item {
    color: var(--b3-text-primary) !important;
}

.e-menu-wrapper .e-menu,
.e-menu-container .e-menu {
    color: var(--b3-text-primary) !important;
}

/* Fix: rgb(108, 117, 125) #6c757d — Bootstrap .text-muted default */
.text-muted {
    color: var(--b3-text-muted) !important;
}

/* Fix: rgb(108, 117, 125) on Syncfusion dropdown input */
.e-ddl.e-input-group input.e-dropdownlist,
.e-ddl input.e-control {
    color: var(--b3-text-primary) !important;
}

/* Fix: rgb(108, 117, 125) #6c757d — Bootstrap .btn-secondary disabled state */
.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: var(--b3-gray-400) !important;
    border-color: var(--b3-gray-400) !important;
    color: var(--b3-card-bg) !important;
}

/* Fix: rgb(33, 37, 41) #212529 — Bootstrap body text in Syncfusion list items */
.e-listview .e-list-item,
.e-listview .e-list-item .e-text-content,
.e-listview .e-list-item .e-list-text {
    color: var(--b3-text-primary) !important;
}

/* Fix: rgb(206, 212, 218) #ced4da — Bootstrap form-control border on Syncfusion inputs */
.e-input-group,
.e-ddl.e-input-group,
.e-input-group.e-control-wrapper {
    border-color: var(--b3-border-color) !important;
}

/* Fix: #ced4da on Syncfusion dropdown <input> element directly */
input.e-control.e-dropdownlist,
.e-ddl.e-input-group input {
    border-color: var(--b3-border-color) !important;
}

/* Fix: rgb(73, 80, 87) #495057 — Bootstrap input text on Syncfusion dropdowns */
.e-ddl.e-input-group,
.e-ddl.e-input-group .e-input-group-icon {
    color: var(--b3-text-primary) !important;
}

/* Fix: rgb(222, 226, 230) #dee2e6 — Sidebar right border default */
.e-sidebar.e-right,
.e-sidebar {
    border-right-color: var(--b3-border-color) !important;
}

/* Fix: rgba(0, 0, 0, 0.13) — Syncfusion ListView border */
.e-listview {
    border-color: var(--b3-border-color) !important;
}

.e-listview .e-list-item {
    border-color: var(--b3-gray-100) !important;
}

/* Fix: rgb(233, 236, 239) #e9ecef — Menu separator */
.e-menu-wrapper ul .e-menu-item.e-separator,
.e-menu-container ul .e-menu-item.e-separator {
    border-bottom-color: var(--b3-gray-100) !important;
}