@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

/* ============================================================
   MineFox Brand Theme Override
   ASP.NET Zero Application

   Covers three concerns:
     · MineFox theme colours and design tokens
     · Metronic framework overrides scoped to the MineFox theme
     · MF Component Library — reusable UI primitives shared across
       feature pages. Components with broad reuse potential live
       here; highly feature-specific styles belong in the dedicated
       feature sections further down.

       BEFORE ADDING NEW CSS — follow this order:
     1. Does a Metronic/Bootstrap class already cover it? (Sections 02–25)
        e.g. .btn-primary, .badge-primary, .modal-header, .form-control
        → Use it. No new CSS needed.
     2. Does an mf-* component already cover it? (Section 26)
        e.g. .mf-drawer, .mf-stat-bar, .mf-form-control, .mf-alert-banner
        → Use it. No new CSS needed.
     3. Is the new pattern generic enough to reuse on other pages?
        → Add it to Section 26 with the mf- prefix.
     4. Is it page or domain specific?
        → Add it to the feature module sub-section (Section 27+).
        → Each module gets one parent section; one lettered sub-section per page.

   Full reference: Development-Notes/MineFox-CSS-Notes.md

   ============================================================
   TABLE OF CONTENTS
   ──────────────────────────────────────────────────────────
   01. CSS Variables (Design Tokens)
   02. Global Transitions
   03. Typography & Labels
   04. Sidebar & Navigation Menu
       04a. Background & Structure
       04b. Menu Links (Default / Hover / Active)
       04c. Menu Icons (FontAwesome & Flaticon)
       04d. Menu Arrows
       04e. Submenu
       04f. Scrollbar
       04g. Brand Area & Toggle Button
       04h. Mobile Header
   05. Top Navigation
       05a. Nav Tabs
       05b. Nav Pills
       05c. Breadcrumbs
   06. Buttons
       06a. Primary / Brand / Success
       06b. Outline & Secondary
       06c. Link / Clean / Text
       06d. Icon-Only
       06e. Floating Action
       06f. Warning
       06g. Danger
       06h. Circle / Default Buttons
       06i. Export / Dropdown-Toggle Buttons
       06j. Specific Utility Buttons (Help, Refresh, Widget)
   07. Forms & Inputs
       07a. Form Control Focus
       07b. Checkboxes & Radios
       07c. Toggle Switches (switch pattern)
       07d. Bootstrap Switch (plugin)
   08. Icons
       08a. General Brand Color
       08b. White-Locked Icons (specific names)
       08c. Icon Replacements (flaticon2 → FA)
       08d. Header / Notification Icons
   09. Modals & Dialogs
       09a. Modal Structure
       09b. SweetAlert
   10. Tables & DataTables
       10a. Pagination Buttons
       10b. Sort Arrows
       10c. Responsive Controls (DTR)
       10d. Sorted Column Text Color
       10e. Table Row Highlights
   11. Bootstrap Pagination
   12. Badges & Labels
   13. Progress Bars & Spinners
   14. Cards & Panels
   15. List Groups
   16. Notification Navigation (Navi)
   17. Dropdowns
   18. Third-party Components
       18a. Bootstrap Select
       18b. Date Range Picker
       18c. Xero Connect Button
       18d. Summernote Editor
       18e. jstree
   19. Login Page
   20. Utility Classes
   21. Accessibility & Focus States
   22. Animations & Keyframes
   23. Responsive Design
   24. Print Styles
   25. Custom Theme Foundation (Typography / Inputs / Tables / Utilities)
   26. MF Component Library
   27. Supply Management
       27a. Catalogue
       27b. Locations
       27c. Item Modal
       27d. Audits
       27e. Add Inventory Items Modal
   ============================================================ */




/* ============================================================
   01. CSS Variables (Design Tokens)
   ============================================================ */
:root {
    /* ── Primary Brand Palette ── */
    --minefox-primary:           #EF4626;
    --minefox-primary-hover:     #d6451d;
    --minefox-primary-active:    #c63f1a;
    --minefox-primary-dark:      #7D200D;
    --minefox-secondary:         #063f5c;
    --minefox-dark:              #291e29;

    /* RGB values (for rgba() usage) */
    --minefox-primary-rgb:       239, 70, 38;
    --minefox-primary-hover-rgb: 214, 69, 29;
    --minefox-primary-active-rgb:198, 63, 26;

    /* ── Text ── */
    --text-on-orange:            #ffffff;
    --text-default:              #444444;
    --text-muted:                #6c757d;

    /* ── Interaction States ── */
    --brand-focus-ring:          rgba(239, 70, 38, 0.5);
    --brand-focus-ring-light:    rgba(239, 70, 38, 0.25);
    --brand-hover-bg:            rgba(239, 70, 38, 0.1);
    --brand-active-bg:           rgba(239, 70, 38, 0.15);

    /* ── Transitions ── */
    --transition-fast:           0.15s ease-in-out;
    --transition-normal:         0.3s ease-in-out;
    --transition-slow:           0.5s ease-in-out;

    /* ── Disabled States ── */
    --brand-disabled:            #f0a38a;
    --brand-disabled-opacity:    0.7;

    /* ── Layout ── */
    --sidebar-bg:                #0e1421;

    /* ── PM Component Palette ── */
    --mf-accent:           #EF4626;
    --mf-accent-light:     #fde8e3;
    --mf-accent-hover:     #d6451d;
    --mf-success:          #22c55e;
    --mf-success-light:    #dcfce7;
    --mf-warning:          #f59e0b;
    --mf-warning-light:    #fef3c7;
    --mf-danger:           #ef4444;
    --mf-danger-light:     #fee2e2;
    --mf-info:             #8b5cf6;
    --mf-info-light:       #ede9fe;
    --mf-left-panel-width: 300px;

    /* ── App Semantic Tokens ── */
    --app-text-primary:    #1e293b;
    --app-text-secondary:  #64748b;
    --app-text-muted:      #94a3b8;
    --app-border:          #e2e8f0;
    --app-surface:         #f8fafc;
    --app-surface-raised:  #f1f5f9;
    --app-success:         #22c55e;
    --app-danger:          #ef4444;
    --minefox-primary-light: rgba(239, 70, 38, 0.08);
}


/* ============================================================
   02. Global Transitions
   ============================================================ */
.menu-link,
.btn,
.dropdown-item,
.page-link,
.form-control,
.nav-link,
.list-group-item,
.card,
.badge,
[class*="flaticon"],
.fa, .fas, .far, .fal, .fab, .bi {
    transition: color var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast) !important;
}


/* ============================================================
   03. Typography & Labels
   To add a label override for a new context, add its selector
   to the list below or create a new rule in this section.
   ============================================================ */

/* Shared label style — used by .mf-form-label and inside modals */
.mf-form-label,
.modal .label {
    font-size: 12px;
    font-weight: 600;
    color: var(--app-text-secondary);
    margin-bottom: 5px;
    display: block;
}


/* ============================================================
   04. Sidebar & Navigation Menu
   ============================================================ */

/* ── 04a. Background & Structure ── */
.aside,
.aside-menu,
.menu-nav,
.aside .menu-nav,
.aside.aside-minimize,
.aside.aside-fixed {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
}

.aside .aside-brand,
.aside-brand,
.aside .aside-footer,
.aside-footer {
    background-color: var(--sidebar-bg) !important;
    border-color: #2a3f5f;
}

/* ── 04b. Menu Links — Default / Hover / Active ── */

/* Default: white text on transparent background */
.menu-link,
.menu-subnav .menu-item > .menu-link,
.menu-nav .menu-item > .menu-link,
.aside-menu .menu-nav .menu-item .menu-link {
    color: #ffffff !important;
    background-color: transparent !important;
    border-radius: 6px;
    margin: 0;
    padding: 9px 25px;
    transition: all var(--transition-fast) !important;
}

.menu-link .menu-text,
.menu-subnav .menu-item > .menu-link .menu-text,
.menu-nav .menu-item > .menu-link .menu-text {
    color: #ffffff !important;
}

/* Hover: text turns brand orange; icons stay white */
.menu-link:hover,
.menu-link:focus,
.menu-subnav .menu-item > .menu-link:hover,
.menu-subnav .menu-item > .menu-link:focus,
.menu-nav .menu-item > .menu-link:hover,
.menu-nav .menu-item > .menu-link:focus {
    background-color: transparent !important;
    color: var(--minefox-primary) !important;
    text-decoration: none;
    transform: translateX(3px);
}

.aside .aside-menu .menu-nav .menu-link:hover .menu-text,
.aside .aside-menu .menu-nav .menu-link:focus .menu-text,
.menu-link:hover .menu-text,
.menu-link:focus .menu-text,
.menu-subnav .menu-item > .menu-link:hover .menu-text,
.menu-subnav .menu-item > .menu-link:focus .menu-text,
.menu-nav .menu-item > .menu-link:hover .menu-text,
.menu-nav .menu-item > .menu-link:focus .menu-text {
    color: var(--minefox-primary) !important;
}

/* Icons stay white on hover */
.aside .aside-menu .menu-nav .menu-link:hover .menu-icon i,
.aside .aside-menu .menu-nav .menu-link:focus .menu-icon i,
.aside .aside-menu .menu-nav .menu-link:hover .menu-link-icon,
.aside .aside-menu .menu-nav .menu-link:focus .menu-link-icon,
.menu-link:hover .menu-icon,
.menu-link:hover .menu-icon i,
.menu-link:hover .menu-link-icon,
.menu-link:focus .menu-icon,
.menu-link:focus .menu-icon i,
.menu-link:focus .menu-link-icon {
    color: #ffffff !important;
}

/* Active / open / here: brand-orange background with white text */
.menu-item.menu-item-active > .menu-link,
.menu-item.menu-item-here > .menu-link,
.menu-item.menu-item-open > .menu-link,
.menu-item .menu-link[aria-expanded="true"] {
    background-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

/* Text and icons inside active/here/open links: all white */
.menu-item.menu-item-active > .menu-link .menu-text,
.menu-item.menu-item-here  > .menu-link .menu-text,
.menu-item.menu-item-open  > .menu-link .menu-text,
.menu-item.menu-item-active > .menu-link .menu-icon,
.menu-item.menu-item-active > .menu-link .menu-icon i,
.menu-item.menu-item-active > .menu-link .menu-link-icon,
.menu-item.menu-item-here  > .menu-link .menu-icon,
.menu-item.menu-item-here  > .menu-link .menu-icon i,
.menu-item.menu-item-here  > .menu-link .menu-link-icon,
.menu-item.menu-item-open  > .menu-link .menu-icon,
.menu-item.menu-item-open  > .menu-link .menu-icon i,
.menu-item.menu-item-open  > .menu-link .menu-link-icon {
    color: #ffffff !important;
}

/* Deeper submenu active/open states (more specific, scoped to .aside) */
.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-active > .menu-link,
.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-active > .menu-link .menu-text {
    color: var(--minefox-primary) !important;
}

.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-active > .menu-link .menu-icon i,
.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-here  > .menu-link .menu-icon i,
.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-active > .menu-link .menu-link-icon,
.aside .aside-menu .menu-nav .menu-subnav .menu-item.menu-item-here  > .menu-link .menu-link-icon {
    color: var(--minefox-primary) !important;
}

.aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link,
.aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
.aside .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link,
.aside .aside-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text {
    color: var(--minefox-primary) !important;
}

/* ── 04c. Menu Icons ── */

/* All menu icons: white by default */
.menu-link .menu-icon,
.menu-link .menu-icon i,
.menu-link .menu-link-icon,
.menu-subnav .menu-item > .menu-link .menu-icon,
.menu-subnav .menu-item > .menu-link .menu-icon i,
.menu-subnav .menu-item > .menu-link .menu-link-icon,
.menu-nav .menu-item > .menu-link .menu-icon,
.menu-nav .menu-item > .menu-link .menu-icon i,
.menu-nav .menu-item > .menu-link .menu-link-icon {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* FontAwesome icons in menu links */
.menu-link .fa,  .menu-link .fas, .menu-link .far,
.menu-link .fal, .menu-link .fab, .menu-link .fad,
.menu-link-icon.fa,  .menu-link-icon.fas, .menu-link-icon.far,
.menu-link-icon.fal, .menu-link-icon.fab, .menu-link-icon.fad {
    color: #ffffff !important;
    transition: color var(--transition-fast) !important;
}

/* FA icons on hover / focus → orange */
.menu-link:hover .fa,  .menu-link:hover .fas, .menu-link:hover .far,
.menu-link:hover .fal, .menu-link:hover .fab, .menu-link:hover .fad,
.menu-link:focus .fa,  .menu-link:focus .fas, .menu-link:focus .far,
.menu-link:focus .fal, .menu-link:focus .fab, .menu-link:focus .fad,
.menu-link:hover i[class*="fa-"],
.menu-link:focus i[class*="fa-"] {
    color: var(--minefox-primary) !important;
}

/* Submenu FA icons: white, orange on hover */
.menu-subnav .menu-item > .menu-link .fa,
.menu-subnav .menu-item > .menu-link .fas,
.menu-subnav .menu-item > .menu-link .far,
.menu-subnav .menu-item > .menu-link .fal,
.menu-subnav .menu-item > .menu-link .fab,
.menu-subnav .menu-item > .menu-link .fad {
    color: #ffffff !important;
}

.menu-subnav .menu-item > .menu-link:hover .fa,
.menu-subnav .menu-item > .menu-link:hover .fas,
.menu-subnav .menu-item > .menu-link:hover .far,
.menu-subnav .menu-item > .menu-link:hover .fal,
.menu-subnav .menu-item > .menu-link:hover .fab,
.menu-subnav .menu-item > .menu-link:hover .fad,
.menu-subnav .menu-item > .menu-link:focus .fa,
.menu-subnav .menu-item > .menu-link:focus .fas,
.menu-subnav .menu-item > .menu-link:focus .far,
.menu-subnav .menu-item > .menu-link:focus .fal,
.menu-subnav .menu-item > .menu-link:focus .fab,
.menu-subnav .menu-item > .menu-link:focus .fad {
    color: var(--minefox-primary) !important;
}

/* Active-state FA icons: white */
.menu-item.menu-item-active > .menu-link .fa,
.menu-item.menu-item-active > .menu-link .fas,
.menu-item.menu-item-active > .menu-link .far,
.menu-item.menu-item-active > .menu-link .fal,
.menu-item.menu-item-active > .menu-link .fab,
.menu-item.menu-item-active > .menu-link .fad,
.menu-item.menu-item-here   > .menu-link .fa,
.menu-item.menu-item-here   > .menu-link .fas,
.menu-item.menu-item-here   > .menu-link .far,
.menu-item.menu-item-here   > .menu-link .fal,
.menu-item.menu-item-here   > .menu-link .fab,
.menu-item.menu-item-here   > .menu-link .fad {
    color: #ffffff !important;
}

/* Specific flaticon classes used in the aside menu */
.aside-menu .menu-nav i.flaticon-line-graph,
.aside-menu .menu-nav i.flaticon-map,
.aside-menu .menu-nav i.flaticon-settings,
.aside-menu .menu-nav i.flaticon-more,
.aside-menu .menu-nav i.flaticon-list-3,
.aside-menu .menu-nav i.flaticon2-infographic,
.aside-menu .menu-nav i.flaticon2-menu-2,
.aside-menu .menu-nav i.flaticon2-lorry,
.aside-menu .menu-nav i.flaticon2-avatar,
.aside-menu .menu-nav i.flaticon-calendar-with-a-clock-time-tools,
.aside-menu .menu-nav i.flaticon-clock-2,
.aside-menu .menu-nav i.flaticon-calendar,
.aside-menu .menu-nav i.flaticon-list,
.aside-menu .menu-nav i.flaticon2-group,
.aside-menu .menu-nav i.flaticon-layers,
.aside-menu .menu-nav i.flaticon-interface-8,
.aside-menu .menu-nav i.flaticon-suitcase,
.aside-menu .menu-nav i.flaticon-users,
.aside-menu .menu-nav i.flaticon-tabs,
.aside-menu .menu-nav i.flaticon-folder-1,
.aside-menu .menu-nav i.flaticon-medical,
.aside-menu .menu-nav i.flaticon2-world {
    color: #ffffff !important;
}

/* ── 04d. Menu Arrows ── */

/* Default: white */
.menu-nav > .menu-item > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
    color: #ffffff !important;
}

/* Hover: brand orange */
.menu-nav > .menu-item:hover > .menu-heading .menu-arrow,
.menu-nav > .menu-item:hover > .menu-link .menu-arrow,
.menu-nav > .menu-item:focus > .menu-heading .menu-arrow,
.menu-nav > .menu-item:focus > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item:hover > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item:focus > .menu-link .menu-arrow {
    color: var(--minefox-primary) !important;
}

/* Active / open: brand orange */
.menu-nav > .menu-item.menu-item-open   > .menu-heading .menu-arrow,
.menu-nav > .menu-item.menu-item-open   > .menu-link .menu-arrow,
.menu-nav > .menu-item.menu-item-active > .menu-heading .menu-arrow,
.menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item.menu-item-open   > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow {
    color: var(--minefox-primary) !important;
}

/* Submenu open/active arrows */
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open > .menu-link .menu-arrow,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open.menu-item-active > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item .menu-submenu .menu-item.menu-item-open.menu-item-active > .menu-link .menu-arrow {
    color: var(--minefox-primary) !important;
}

/* Submenu hover arrows */
.aside-menu .menu-nav > .menu-item .menu-submenu
.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-heading .menu-arrow,
.aside-menu .menu-nav > .menu-item .menu-submenu
.menu-item:not(.menu-item-parent):not(.menu-item-open):not(.menu-item-here):not(.menu-item-active):hover > .menu-link .menu-arrow {
    color: var(--minefox-primary) !important;
}

/* ── 04e. Submenu ── */
.menu-submenu,
.menu-subnav {
    background-color: var(--sidebar-bg) !important;
}

.menu-submenu .menu-subnav .menu-item > .menu-link {
    background-color: transparent !important;
    color: #ffffff !important;
    padding-left: 25px;
}

.menu-submenu .menu-subnav .menu-item > .menu-link:hover,
.menu-submenu .menu-subnav .menu-item > .menu-link:focus {
    background-color: transparent !important;
    color: var(--minefox-primary) !important;
}

/* ── 04f. Scrollbar ── */
.aside::-webkit-scrollbar { width: 6px; }

.aside::-webkit-scrollbar-track { background: #131b2e; }

.aside::-webkit-scrollbar-thumb {
    background: #2a3f5f;
    border-radius: 3px;
}

.aside::-webkit-scrollbar-thumb:hover { background: var(--minefox-primary); }

/* ── 04g. Brand Area & Toggle Button ── */
#kt_brand.brand {
    background-color: var(--sidebar-bg) !important;
    border-bottom: 1px solid #2a3f5f;
}

.brand-logo {
    display: flex;
    align-items: center;
    padding: 10px 15px;
}

.brand-toggle,
.brand-toggle.btn,
#kt_aside_toggle {
    background-color: transparent !important;
    border: none !important;
    padding: 8px !important;
    border-radius: 6px !important;
    transition: all var(--transition-fast) !important;
}

.brand-toggle .svg-icon svg,
.brand-toggle .svg-icon svg g,
.brand-toggle .svg-icon svg path,
#kt_aside_toggle .svg-icon svg,
#kt_aside_toggle .svg-icon svg g,
#kt_aside_toggle .svg-icon svg path {
    stroke: var(--minefox-primary) !important;
    color: var(--minefox-primary) !important;
}

.brand-toggle:hover,
.brand-toggle:focus,
.brand-toggle.btn:hover,
.brand-toggle.btn:focus,
#kt_aside_toggle:hover,
#kt_aside_toggle:focus {
    background-color: var(--brand-hover-bg) !important;
    transform: translateX(2px) !important;
}

.brand-toggle:hover .svg-icon svg path,
.brand-toggle:focus .svg-icon svg path,
#kt_aside_toggle:hover .svg-icon svg path,
#kt_aside_toggle:focus .svg-icon svg path {
    fill: var(--minefox-primary) !important;
    stroke: var(--minefox-primary-hover) !important;
}

.brand-toggle:active,
.brand-toggle.btn:active,
#kt_aside_toggle:active {
    background-color: var(--brand-active-bg) !important;
    transform: translateX(1px) !important;
}

.brand-toggle:focus-visible,
#kt_aside_toggle:focus-visible {
    outline: 2px solid var(--minefox-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

.brand-toggle .svg-icon,
#kt_aside_toggle .svg-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brand-toggle .svg-icon svg,
#kt_aside_toggle .svg-icon svg {
    width: 24px !important;
    height: 24px !important;
}
#kt_header {
border-bottom: 1px solid var(--app-border);
}
/* ── 04h. Mobile Header ── */
#kt_header_mobile {
    background-color: var(--sidebar-bg) !important;
}

#kt_header_mobile .burger-icon span,
#kt_header_mobile .burger-icon span::before,
#kt_header_mobile .burger-icon span::after {
    background-color: #ffffff !important;
}

#kt_header_mobile .btn-hover-text-primary svg path { fill: #ffffff !important; }

#kt_header_mobile button:hover svg path,
#kt_header_mobile .burger-icon:hover span,
#kt_header_mobile .burger-icon:hover span::before,
#kt_header_mobile .burger-icon:hover span::after {
    background-color: var(--minefox-primary) !important;
}

#kt_header_mobile button:hover svg path { fill: var(--minefox-primary) !important; }

#kt_aside_mobile_toggle:hover span,
#kt_header_mobile_topbar_toggle:hover span,
#kt_aside_mobile_toggle.btn-hover-text-primary:hover,
#kt_header_mobile_topbar_toggle.btn-hover-text-primary:hover {
    color: var(--minefox-primary) !important;
}

#kt_aside_mobile_toggle:hover svg path,
#kt_header_mobile_topbar_toggle:hover svg path {
    fill: var(--minefox-primary) !important;
}

#kt_aside_mobile_toggle:hover span,
#kt_aside_mobile_toggle:hover span::before,
#kt_aside_mobile_toggle:hover span::after,
#kt_aside_mobile_toggle.active span,
#kt_aside_mobile_toggle.active span::before,
#kt_aside_mobile_toggle.active span::after {
    background-color: var(--minefox-primary) !important;
}

/* Offcanvas user-profile navi SVG icons (keep stable, never change on hover) */
.offcanvas-content .navi-item .symbol,
.offcanvas-content .navi-item .symbol-label,
.offcanvas-content .navi-item .svg-icon,
.offcanvas-content .navi-item .svg-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.offcanvas-content .navi-item .symbol        { width: 40px !important; height: 40px !important; min-width: 40px !important; }
.offcanvas-content .navi-item .symbol-label  { width: 100% !important; height: 100% !important; }
.offcanvas-content .navi-item .svg-icon      { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; }
.offcanvas-content .navi-item .svg-icon svg  { width: 24px !important; height: 24px !important; fill: #000000 !important; }

.offcanvas-content .navi-item a {
    transition: color var(--transition-fast) !important;
    text-decoration: none !important;
}

.offcanvas-content .navi-item a:hover .navi-text .font-weight-bold,
.offcanvas-content .navi-item a:focus .navi-text .font-weight-bold,
.offcanvas-content .navi-item .navi-text .font-weight-bold:hover,
#ManageLinkedAccountsLink:hover .font-weight-bold,
#ManageUserDelegations:hover .font-weight-bold,
#UserProfileChangePasswordLink:hover .font-weight-bold,
#ShowLoginAttemptsLink:hover .font-weight-bold,
#UserProfileChangePictureLink:hover .font-weight-bold,
#UserProfileMySettingsLink:hover .font-weight-bold,
#UserDownloadCollectedDataLink:hover .font-weight-bold,
#ArchiveCommunicatorDataLink:hover .font-weight-bold {
    color: var(--minefox-primary) !important;
    cursor: pointer;
}

/* SVG icon container: never change on hover */
.offcanvas-content .navi-item:hover .symbol,
.offcanvas-content .navi-item:hover .symbol-label,
.offcanvas-content .navi-item:hover .svg-icon,
.offcanvas-content .navi-item:hover .svg-icon svg,
.offcanvas-content .navi-item:hover .svg-icon svg path,
.offcanvas-content .navi-item:hover .svg-icon svg g,
.offcanvas-content .navi-item a:hover .symbol,
.offcanvas-content .navi-item a:hover .symbol-label,
.offcanvas-content .navi-item a:hover .svg-icon,
.offcanvas-content .navi-item a:hover .svg-icon svg,
.offcanvas-content .navi-item a:hover .svg-icon svg path,
.offcanvas-content .navi-item .navi-link:hover .symbol,
.offcanvas-content .navi-item .navi-link:hover .svg-icon svg path {
    background-color: #f8f9fa !important;
}

.offcanvas-content .navi-item .svg-icon svg path { fill: #000000 !important; opacity: 0.3; }
.offcanvas-content .navi-item .svg-icon svg path:first-child { opacity: 0.3 !important; }
.offcanvas-content .navi-item .svg-icon svg path:last-child  { opacity: 1 !important; }

/* Colored SVG icon variants — keep black in offcanvas */
.svg-icon-primary, .svg-icon-warning, .svg-icon-success,
.svg-icon-danger,  .svg-icon-info,    .svg-icon-dark {
    color: #000000 !important;
    fill:  #000000 !important;
}

.svg-icon-primary svg, .svg-icon-warning svg, .svg-icon-success svg,
.svg-icon-danger svg,  .svg-icon-info svg,    .svg-icon-dark svg {
    fill: #000000 !important;
}

/* Text-muted never changes on hover */
.offcanvas-content .navi-item .text-muted,
.offcanvas-content .navi-item:hover .text-muted,
.offcanvas-content .navi-item a:hover .text-muted,
.offcanvas-content .navi-item .navi-link:hover .text-muted {
    color: #6c757d !important;
    transition: none !important;
}

.offcanvas-content .navi-item .navi-link {
    display: flex !important;
    align-items: center !important;
    transition: none !important;
}

.offcanvas-content .navi-item .navi-text  { flex: 1 !important; margin-left: 12px !important; }
.offcanvas-content .navi-item             { min-height: 60px !important; display: flex !important; align-items: center !important; }

/* KT legacy menu helpers */
.kt-menu__item.kt-menu__item--active > .kt-menu__link {
    background-color: var(--brand-hover-bg) !important;
    color: var(--minefox-primary) !important;
}

.kt-menu__link:hover {
    background-color: transparent !important;
    color: var(--minefox-primary) !important;
}

.kt-widget .kt-widget__action .btn { color: var(--minefox-primary) !important; }
.kt-widget .kt-widget__action .btn:hover { background-color: var(--brand-hover-bg) !important; }

/* Scroll-to-top button */
#kt_scrolltop,
#kt_scrolltop:hover,
#kt_scrolltop:focus,
#kt_scrolltop:active {
    background-color: var(--minefox-primary, #EF4626) !important;
}

#kt_scrolltop i::before,
#kt_scrolltop:hover i::before,
#kt_scrolltop:focus i::before,
#kt_scrolltop:active i::before {
    color: #ffffff !important;
}


/* ============================================================
   05. Top Navigation
   ============================================================ */

/* ── 05a. Nav Tabs ── */
.nav-tabs .nav-link.active {
    color: var(--minefox-primary) !important;
    border-bottom-color: var(--minefox-primary) !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    color: var(--minefox-primary) !important;
}

/* ── 05b. Nav Pills ── */
.nav-pills .nav-link.active {
    background-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    background-color: var(--brand-hover-bg) !important;
    color: var(--minefox-primary) !important;
}

/* ── 05c. Breadcrumbs ── */
.breadcrumb.breadcrumb-transparent .breadcrumb-item a:hover {
    color: var(--minefox-primary) !important;
}

a.text-hover-primary:hover,
a.text-hover-primary:focus {
    color: var(--minefox-primary) !important;
}

a.text-hover-primary:hover *,
a.text-hover-primary:focus * {
    color: var(--minefox-primary) !important;
}

/* Global anchor hover */
a:hover,
a:focus {
    color: var(--minefox-primary-hover) !important;
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px dashed var(--minefox-primary);
    outline-offset: 2px;
}


/* ============================================================
   06. Buttons
   ============================================================ */

/* ── 06a. Primary / Brand / Success ── */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
.btn-brand,
.btn.btn-brand,
.btn-success,
.kt-btn--brand,
.kt-btn.kt-btn--brand {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus,
.btn-brand:hover,
.btn-brand:focus,
.btn.btn-brand:hover,
.btn.btn-brand:focus,
.btn-success:hover,
.btn-success:focus,
.kt-btn--brand:hover,
.kt-btn--brand:focus {
    background-color: var(--minefox-primary-hover) !important;
    border-color: var(--minefox-primary-hover) !important;
    color: var(--text-on-orange) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--minefox-primary-rgb), 0.3) !important;
}

.btn-primary:active,
.btn-primary.active,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn-brand:active,
.btn-brand.active {
    background-color: var(--minefox-primary-active) !important;
    border-color: var(--minefox-primary-active) !important;
    transform: translateY(0);
}

.btn-primary:focus-visible,
.btn.btn-primary:focus-visible,
.btn-brand:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn.btn-primary.disabled,
.btn.btn-primary:disabled {
    background-color: var(--brand-disabled) !important;
    border-color: var(--brand-disabled) !important;
    opacity: var(--brand-disabled-opacity);
    cursor: not-allowed;
    transform: none;
}

/* ── 06b. Outline & Secondary ── */
.btn-outline-primary,
.btn-secondary,
.btn-light-primary,
.kt-btn--outline-brand {
    background: transparent !important;
    color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-light-primary:hover,
.btn-light-primary:focus {
    background-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
    border-color: var(--minefox-primary) !important;
}

.btn-outline-primary:focus-visible,
.btn-secondary:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

/* Generic outline hover (covers all .btn-outline-* variants) */
.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"]:focus {
    background-color: var(--minefox-primary-hover) !important;
    border-color: var(--minefox-primary-hover) !important;
    color: var(--text-on-orange) !important;
}

.btn[class*="btn-outline-"]:active,
.btn[class*="btn-outline-"].active {
    background-color: var(--minefox-primary-active) !important;
    border-color: var(--minefox-primary-active) !important;
    color: var(--text-on-orange) !important;
}

/* Icons inside any outline button inherit text color */
.btn[class*="btn-outline-"] .fa,
.btn[class*="btn-outline-"] .fas,
.btn[class*="btn-outline-"] .far,
.btn[class*="btn-outline-"] .fal,
.btn[class*="btn-outline-"] .fab,
.btn[class*="btn-outline-"] .bi {
    color: inherit !important;
}

/* Base outline-success (transparent bg, brand color) */
.btn.btn-outline-success {
    color: var(--minefox-primary) !important;
    background-color: transparent;
    border-color: var(--minefox-primary) !important;
}

/* ── 06c. Link / Clean / Text ── */
.btn-link,
.btn-clean,
.kt-btn--clean {
    color: var(--minefox-primary) !important;
    background: transparent !important;
    border: none !important;
}

.btn-link:hover,
.btn-link:focus,
.btn-clean:hover,
.btn-clean:focus {
    color: var(--minefox-primary-hover) !important;
    background-color: var(--brand-hover-bg) !important;
    text-decoration: underline;
}

/* ── 06d. Icon-Only Buttons ── */
.btn-icon,
.btn-icon-only {
    color: var(--minefox-primary) !important;
    background: transparent !important;
    border: none !important;
}

.btn-icon:hover,
.btn-icon:focus,
.btn-icon-only:hover,
.btn-icon-only:focus {
    background-color: var(--brand-hover-bg) !important;
    color: var(--minefox-primary-hover) !important;
}

/* ── 06e. Floating Action Buttons ── */
.btn-floating {
    background-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
    box-shadow: 0 4px 8px rgba(var(--minefox-primary-rgb), 0.3);
    border-radius: 50%;
}

.btn-floating:hover {
    background-color: var(--minefox-primary-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(var(--minefox-primary-rgb), 0.4);
}

/* ── 06f. Warning Buttons ── */
.btn.btn-warning i,
.btn.btn-warning .fa,  .btn.btn-warning .fas, .btn.btn-warning .far,
.btn.btn-warning .fal, .btn.btn-warning .fab, .btn.btn-warning .bi,
.btn.btn-warning [class*="flaticon"],
.btn.btn-warning:hover i, .btn.btn-warning:focus i,
.btn.btn-warning:hover .fa,  .btn.btn-warning:focus .fa,
.btn.btn-warning:hover .fas, .btn.btn-warning:focus .fas,
.btn.btn-warning:hover .far, .btn.btn-warning:focus .far,
.btn.btn-warning:hover .fal, .btn.btn-warning:focus .fal,
.btn.btn-warning:hover .fab, .btn.btn-warning:focus .fab,
.btn.btn-warning:hover .bi,  .btn.btn-warning:focus .bi,
.btn.btn-warning:hover [class*="flaticon"],
.btn.btn-warning:focus [class*="flaticon"] {
    color: #ffffff !important;
}

/* ── 06g. Danger Buttons (brand orange instead of red) ── */
.btn.btn-danger {
    color: #ffffff !important;
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

.btn.btn-danger:hover {
    background-color: #e6360a !important;
    border-color: #e6360a !important;
    color: #ffffff !important;
}

.btn.btn-danger:active {
    background-color: var(--minefox-primary-active) !important;
    border-color: var(--minefox-primary-active) !important;
    color: #ffffff !important;
}

/* Delete button (outline-danger variant) */
.btn.btn-outline-danger.btn-icon.btn-sm {
    border-color: var(--minefox-primary) !important;
    color: var(--minefox-primary) !important;
}

.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"] {
    border: 1px solid var(--minefox-primary) !important;
    background-color: transparent !important;
    color: var(--minefox-primary) !important;
    box-shadow: none !important;
}

.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"] i,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"] i::before {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:hover,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:focus,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:active {
    background-color: var(--minefox-primary) !important;
    border: 1px solid var(--minefox-primary) !important;
    color: #ffffff !important;
}

.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:hover i,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:focus i,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:active i,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:hover i::before,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:focus i::before,
.btn.btn-outline-danger.btn-icon.btn-sm[title="Delete"]:active i::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Audit log detail button */
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"] {
    border: 1px solid var(--minefox-primary) !important;
    background-color: transparent !important;
    color: var(--minefox-primary) !important;
    box-shadow: none !important;
}

.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"] i.la-search,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"] i.la-search::before {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:hover,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:focus,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:active {
    background-color: var(--minefox-primary) !important;
    border: 1px solid var(--minefox-primary) !important;
    color: #ffffff !important;
}

.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:hover i.la-search,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:focus i.la-search,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:active i.la-search,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:hover i.la-search::before,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:focus i.la-search::before,
.btn.btn-outline-primary.btn-sm.btn-icon[title="Audit log detail"]:active i.la-search::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 06h. Circle / Default Buttons ── */

/* General circle buttons: brand orange */
.btn.btn-circle.btn-default {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.btn.btn-circle.btn-default:hover,
.btn.btn-circle.btn-default:focus {
    background-color: #e6360a !important;
    border-color: #e6360a !important;
    color: #ffffff !important;
}

/* Reset/clear buttons */
.btn.btn-default[type="reset"] {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.btn.btn-default[type="reset"]:hover,
.btn.btn-default[type="reset"]:focus {
    background-color: #e6360a !important;
    border-color: #e6360a !important;
    color: #ffffff !important;
}

/* Cancel button: gray (neutral) */
.cancelBtn.btn.btn-sm.btn-default {
    background-color: #e5eaee !important;
    border: none !important;
    color: #6c757d !important;
}

.cancelBtn.btn.btn-sm.btn-default:hover,
.cancelBtn.btn.btn-sm.btn-default:focus {
    color: var(--minefox-primary) !important;
    background-color: #e5eaee !important;
}

/* Card-toolbar circle buttons & #AddCategoryOrCodeItem: gray (not orange) */
.card-toolbar .btn.btn-circle.btn-default,
.card-toolbar .btn.btn-circle.btn-default.btn_small,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default {
    background-color: #e5eaee !important;
    border: none !important;
    color: #6c757d !important;
    box-shadow: none !important;
}

.card-toolbar .btn.btn-circle.btn-default i,
.card-toolbar .btn.btn-circle.btn-default.btn_small i,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default i,
.card-toolbar .btn.btn-circle.btn-default i::before,
.card-toolbar .btn.btn-circle.btn-default.btn_small i::before,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default i::before,
.card-toolbar .btn.btn-circle.btn-default .la::before,
.card-toolbar .btn.btn-circle.btn-default.btn_small .la::before,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default .la::before,
.card-toolbar .btn.btn-circle.btn-default .dropdown-toggle::after,
.card-toolbar .btn.btn-circle.btn-default.btn_small .dropdown-toggle::after {
    color: #6c757d !important;
    border-top-color: #6c757d !important;
}

.card-toolbar .btn.btn-circle.btn-default:hover,
.card-toolbar .btn.btn-circle.btn-default:focus,
.card-toolbar .btn.btn-circle.btn-default.btn_small:hover,
.card-toolbar .btn.btn-circle.btn-default.btn_small:focus,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default:hover,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default:focus {
    color: var(--minefox-primary) !important;
    background-color: #e5eaee !important;
    border: none !important;
}

.card-toolbar .btn.btn-circle.btn-default:hover i::before,
.card-toolbar .btn.btn-circle.btn-default:focus i::before,
.card-toolbar .btn.btn-circle.btn-default.btn_small:hover i::before,
.card-toolbar .btn.btn-circle.btn-default.btn_small:focus i::before,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default:hover i::before,
#AddCategoryOrCodeItem.btn.btn-circle.btn-default:focus i::before,
.card-toolbar .btn.btn-circle.btn-default:hover .la::before,
.card-toolbar .btn.btn-circle.btn-default.btn_small:hover .la::before,
.card-toolbar .btn.btn-default.dropdown-toggle:hover::after,
.card-toolbar .btn.btn-default.dropdown-toggle:focus::after {
    color: var(--minefox-primary) !important;
    border-top-color: var(--minefox-primary) !important;
}

/* ── 06i. Export / Dropdown-Toggle Buttons ── */

/* btn.btn-outline-success.dropdown-toggle: white bg, brand text/border */
.btn.btn-outline-success.dropdown-toggle {
    background-color: #ffffff !important;
    border: 1px solid var(--minefox-primary) !important;
    color: var(--minefox-primary) !important;
}

.btn.btn-outline-success.dropdown-toggle i,
.btn.btn-outline-success.dropdown-toggle .fa,
.btn.btn-outline-success.dropdown-toggle .fas,
.btn.btn-outline-success.dropdown-toggle .far,
.btn.btn-outline-success.dropdown-toggle .fal,
.btn.btn-outline-success.dropdown-toggle .fab {
    color: var(--minefox-primary) !important;
}

.btn.btn-outline-success.dropdown-toggle:hover,
.btn.btn-outline-success.dropdown-toggle:focus {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.btn.btn-outline-success.dropdown-toggle:hover i,
.btn.btn-outline-success.dropdown-toggle:focus i,
.btn.btn-outline-success.dropdown-toggle:hover .fa,
.btn.btn-outline-success.dropdown-toggle:focus .fa,
.btn.btn-outline-success.dropdown-toggle:hover .fas,
.btn.btn-outline-success.dropdown-toggle:focus .fas,
.btn.btn-outline-success.dropdown-toggle:hover .far,
.btn.btn-outline-success.dropdown-toggle:focus .far {
    color: #ffffff !important;
}

.btn.btn-outline-success.dropdown-toggle:active,
.btn.btn-outline-success.dropdown-toggle.active {
    background-color: var(--minefox-primary-active) !important;
    border-color: var(--minefox-primary-active) !important;
    color: #ffffff !important;
}

.btn.btn-outline-success.dropdown-toggle:hover::after,
.btn.btn-outline-success.dropdown-toggle:focus::after,
.btn.btn-outline-success.dropdown-toggle:active::after {
    color: #ffffff !important;
}

.btn.btn-outline-success.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 .25rem var(--brand-focus-ring) !important;
    outline: none;
}

/* Default icon/caret colors */
.btn.btn-outline-success.dropdown-toggle .far.fa-file-excel::before,
.btn.btn-outline-success.dropdown-toggle .fa.fa-hand-pointer::before {
    color: var(--minefox-primary) !important;
}

.btn.btn-outline-success.dropdown-toggle:hover .far.fa-file-excel::before,
.btn.btn-outline-success.dropdown-toggle:focus .far.fa-file-excel::before,
.btn.btn-outline-success.dropdown-toggle:hover .fa.fa-hand-pointer::before,
.btn.btn-outline-success.dropdown-toggle:focus .fa.fa-hand-pointer::before {
    color: #ffffff !important;
}

/* #ExportToExcelButton: white bg default, brand bg hover */
#ExportToExcelButton {
    background-color: #ffffff !important;
    border: 1px solid var(--minefox-primary) !important;
    color: var(--minefox-primary) !important;
}

#ExportToExcelButton i.fa,
#ExportToExcelButton .fa,
#ExportToExcelButton i::before,
#ExportToExcelButton .fa::before,
#ExportToExcelButton .far::before {
    color: var(--minefox-primary) !important;
}

#ExportToExcelButton:hover,
#ExportToExcelButton:focus {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

#ExportToExcelButton:hover i.fa,
#ExportToExcelButton:focus i.fa,
#ExportToExcelButton:hover i::before,
#ExportToExcelButton:focus i::before,
#ExportToExcelButton:hover .far::before,
#ExportToExcelButton:focus .far::before {
    color: #ffffff !important;
}

#ExportToExcelButton:active,
#ExportToExcelButton.active {
    background-color: var(--minefox-primary-active) !important;
    border-color: var(--minefox-primary-active) !important;
    color: #ffffff !important;
}

#ExportToExcelButton:focus-visible {
    outline: 2px solid var(--brand-focus-ring) !important;
    outline-offset: 2px !important;
}

/* ExportToExcel as dropdown item */
.dropdown-menu > a#ExportToExcelButton.dropdown-item {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: none !important;
}

.dropdown-menu > a#ExportToExcelButton.dropdown-item:hover {
    color: var(--minefox-primary) !important;
    background-color: #ECF0F3 !important;
}

/* Add Widget button (warning yellow — intentional) */
#AddWidgetButton,
#AddWidgetButton:hover,
#AddWidgetButton:focus,
#AddWidgetButton:active,
#AddWidgetButton.active {
    background-color: #FFA800 !important;
    border-color: #FFA800 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#AddWidgetButton i,
#AddWidgetButton i::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Default dropdown-toggle caret */
.btn.btn-default.dropdown-toggle::after,
.btn.btn-default.dropdown-toggle:hover::after,
.btn.btn-default.dropdown-toggle:focus::after,
.btn.btn-default.dropdown-toggle:active::after {
    color: var(--text-muted) !important;
}

/* ── 06j. Specific Utility Buttons (Help / Refresh / Subscription) ──
   These buttons intentionally stay white on hover — not brand orange.
   They live in header areas where orange-on-white would clash. */
.ShowHelpButton.btn[class*="btn-outline-"]:hover,
.ShowHelpButton.btn[class*="btn-outline-"]:focus,
#RefreshIssueActionsButton.btn[class*="btn-outline-"]:hover,
#RefreshIssueActionsButton.btn[class*="btn-outline-"]:focus,
.refreshMemberActivityButton.btn[class*="btn-outline-"]:hover,
.refreshMemberActivityButton.btn[class*="btn-outline-"]:focus,
#subscriptionStatusReload.btn[class*="btn-outline-"]:hover,
#subscriptionStatusReload.btn[class*="btn-outline-"]:focus {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--minefox-primary) !important;
}

.ShowHelpButton[class*="btn-outline-"] i[class^="flaticon2-"]::before,
.ShowHelpButton[class*="btn-outline-"] i[class^="flaticon-"]::before,
#RefreshIssueActionsButton[class*="btn-outline-"] i[class^="flaticon2-"]::before,
#RefreshIssueActionsButton[class*="btn-outline-"] i[class^="flaticon-"]::before,
.refreshMemberActivityButton[class*="btn-outline-"] i[class^="flaticon2-"]::before,
.refreshMemberActivityButton[class*="btn-outline-"] i[class^="flaticon-"]::before,
#subscriptionStatusReload[class*="btn-outline-"] i[class^="flaticon2-"]::before,
#subscriptionStatusReload[class*="btn-outline-"] i[class^="flaticon-"]::before,
.ShowHelpButton[class*="btn-outline-"]:hover i[class^="flaticon2-"]::before,
.ShowHelpButton[class*="btn-outline-"]:hover i[class^="flaticon-"]::before,
#RefreshIssueActionsButton[class*="btn-outline-"]:hover i[class^="flaticon2-"]::before,
.refreshMemberActivityButton[class*="btn-outline-"]:hover i[class^="flaticon2-"]::before,
#subscriptionStatusReload[class*="btn-outline-"]:hover i[class^="flaticon2-"]::before {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

/* btn-hover-primary pattern */
.btn-hover-primary:hover {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

.btn-hover-primary:hover i,
.btn-hover-primary.btn-light:hover i,
.btn-hover-primary.btn-light:focus i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

a.page-quick-sidebar-pinner.btn-light.btn-hover-primary:hover,
a.page-quick-sidebar-pinner.btn-light.btn-hover-primary:focus {
    background: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    background-image: none !important;
}

a.page-quick-sidebar-pinner.btn-light.btn-hover-primary:hover i,
a.page-quick-sidebar-pinner.btn-light.btn-hover-primary:focus i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Tenant/host dashboard links */
a.see-all-expiring-tenants,
a.see-all-recent-tenants {
    color: var(--minefox-primary) !important;
}

a.see-all-expiring-tenants:hover {
    color: var(--minefox-primary-hover) !important;
}

/* Start / End meeting buttons */
#StartMe .btn.btn-primary,
#EndMe .btn.btn-primary {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
}

#StartMe .btn.btn-primary:hover,
#EndMe .btn.btn-primary:hover {
    background-color: #e6360a !important;
    border-color: #e6360a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
}

/* Filter button */
#FilterByPermissionsButton:hover { color: var(--minefox-primary) !important; }

/* Download logs button (keep icon white) */
#DownloadAllLogsbutton:hover i.fa-download::before,
#DownloadAllLogsbutton:focus i.fa-download::before {
    color: #ffffff !important;
}

/* ViewHelpDoc button (keep icon white) */
#ViewHelpDocButton:hover i.flaticon2-document,
#ViewHelpDocButton:focus i.flaticon2-document {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Generic: any <i> inside a hovered button → white */
button:hover i,
.btn:hover i {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

a:hover i{
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

/* Generic: any <i> inside a hovered button → white */
button i,
.btn i {
    color: var(--minefox-secondary) !important;
    fill: var(--minefox-secondary) !important;
}

button.btn-primary i,
.btn.btn-primary i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

btn-outline-primary i:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
}

button.btn-default i,
.btn.btn-default i,
a.btn-default i{
    color: var(--text-muted) !important;
    fill: var(--text-muted) !important;
}

button.btn-default:hover,
.btn.btn-default:hover,
a.btn-default:hover {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

button.btn-default i:hover,
.btn.btn-default i:hover,
a.btn-default i:hover {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

btn-outline-primary i:hover {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.btn[class*="btn-outline-"]:hover i{
    color: #ffffff !important;
    fill: #ffffff !important;
}


button.active i,
.btn.active i,
btn-outline-primary i {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}


button i {
    margin-right: 0px !important;
}



/* ============================================================
   07. Forms & Inputs
   ============================================================ */

/* ── 07a. Form Control Focus ── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--minefox-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring-light) !important;
    outline: none;
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem var(--brand-focus-ring) !important;
}

/* ── 07b. Checkboxes & Radios ──
   Single global rule covers all contexts (modal, card, table, etc.).
   To add a new context, just add more selectors here — no need for
   separate per-context blocks. */

/* Checked state */


/* All checked states — checkbox-outline is the default class used throughout
   this project, so all variants need the same orange fill override. */
.form-check-input[type="checkbox"]:checked,
.form-check-input[type="radio"]:checked,
.checkbox > input[type="checkbox"]:checked ~ span,
.checkbox input[type="checkbox"]:checked ~ span,
.checkbox-list .checkbox > input[type="checkbox"]:checked ~ span,
.checkbox-inline > input[type="checkbox"]:checked ~ span,
.checkbox.checkbox-outline > input[type="checkbox"]:checked ~ span,
.checkbox.checkbox-fill > input[type="checkbox"]:checked ~ span,
.checkbox.checkbox-solid > input[type="checkbox"]:checked ~ span,
.checkbox-primary > input[type="checkbox"]:checked ~ span,
.checkbox.checkbox-primary > input[type="checkbox"]:checked ~ span {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

/* Native accent color fallback */
input[type="checkbox"]:checked {
    accent-color: var(--minefox-primary) !important;
}

/* Checkmark tick — Metronic draws the tick via CSS border trick (border-bottom +
   border-right rotated), so border-color controls tick colour, not color. */
.checkbox > input[type="checkbox"]:checked ~ span:after,
.checkbox input[type="checkbox"]:checked ~ span:after,
.checkbox.checkbox-outline > input[type="checkbox"]:checked ~ span:after {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* Focus state */
.form-check-input:focus,
.checkbox > input:focus ~ span,
.checkbox input:focus ~ span {
    border-color: var(--minefox-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.25) !important;
}

/* Hover state */
.checkbox > input:hover ~ span,
.checkbox input:hover ~ span {
    border-color: #ECF0F3 !important;
}

/* Form-switch (Bootstrap toggle) */
.form-switch .form-check-input:checked {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

.form-switch .form-check-input:focus {
    border-color: var(--minefox-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 152, 0, 0.25) !important;
}

/* Radio */
label.radio input[type="radio"]:checked + span {
    background-color: var(--minefox-primary) !important;
}

/* ── 07c. Toggle Switches (ABP .switch pattern) ── */
.switch input:checked + .slider,
.switch.switch-primary:not(.switch-outline) input:checked ~ span:before {
    background-color: #ECF0F3 !important;
    border-color: var(--minefox-primary) !important;
}

.switch input:checked + .slider:before {
    background-color: var(--text-on-orange) !important;
}

.switch.switch-primary:not(.switch-outline) input:checked ~ span {
    background-color: #ECF0F3;
}

/* Knob and overlay */
.switch.switch-primary:not(.switch-outline) input:checked ~ span:before {
    background-color: #EF4626 !important;
    color: #ffffff !important;
}

.switch input:checked ~ span:after {
    background-color: #ffffff !important;
    color: #EF4626 !important;
}

/* Track fix: stop grey overlay bleeding onto label text */
.switch.switch-primary:not(.switch-outline) input:checked ~ span {
    background-color: #ffffff !important;
    box-shadow: none !important;
    position: relative;
    z-index: 1;
}

.switch.switch-primary input:checked ~ span::before {
    background-color: #ffffff !important;
    box-shadow: none !important;
}

.switch.switch-primary input:checked ~ span::after {
    box-shadow: none !important;
}

.switch.switch-primary:not(.switch-outline) > span {
    margin-right: 8px;
    overflow: hidden;
    border-radius: 999px;
}

.switch.switch-primary + * {
    position: relative;
    z-index: 2;
}

/* Bootstrap Toggle */
.btn-toggle.active,
.btn-toggle:checked {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

/* ── 07d. Bootstrap Switch (plugin) ── */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
    background-color: #ef4626 !important;
    border-color: #3699FF !important;
    color: #ffffff !important;
}


/* ============================================================
   08. Icons
   ============================================================ */

/* ── 08a. General Brand Color ──
   Applies to icons outside buttons/menus (standalone, in cards, etc.) */
.fa, .fas, .far, .fal, .fab, .bi,
[class*="flaticon"],
[class*="flaticon-"],
.flaticon-line-graph, .flaticon-settings, .flaticon-more,
.flaticon-list-3,    .flaticon2-infographic, .flaticon2-menu-2,
.flaticon2-lorry,    .flaticon2-avatar,
i[class*="fa-"],
.menu-icon i,
.menu-link-icon {
    color: var(--minefox-secondary) !important;
    transition: color var(--transition-fast) !important;
}




.primary .fa, .primary .fas, .primary .far, .primary .fal, .primary .fab, .primary .bi,
.primary [class*="flaticon"], .primary [class*="flaticon-"], .primary .flaticon-line-graph,
.primary .flaticon-settings, .primary .flaticon-more, .primary .flaticon-list-3,
.primary .flaticon2-infographic, .primary .flaticon2-menu-2, .primary .flaticon2-lorry,
.primary .flaticon2-avatar, .primary i[class*="fa-"], .primary .menu-icon i,
.primary .menu-link-icon {
    color: #ffffff !important   ;
    transition: color var(--transition-fast) !important;
}


/* ── 08b. White-Locked Icons ──
   These icons must always be white (they live inside brand-colored buttons).
   Add new always-white icon classes here. */

/* FontAwesome: icons used inside primary-colored buttons */

/*.fa-plus:before   { content: "\f067"; color: #ffffff !important; }
.fa-edit:before   { content: "\f044"; color: #ffffff !important; }
.fa-trash:before  { content: "\f2ed"; color: #ffffff !important; }*/

.btn-primary .fa-plus:before   { content: "\f067"; color: #ffffff !important; }
.btn-primary .fa-edit:before   { content: "\f044"; color: #ffffff !important; }
.btn-primary .fa-trash:before  { content: "\f2ed"; color: #ffffff !important; }

.mf-add-btn .fa-plus:before   { content: "\f067"; color: #ffffff !important; }
.mf-add-btn .fa-edit:before   { content: "\f044"; color: #ffffff !important; }
.mf-add-btn .fa-trash:before  { content: "\f2ed"; color: #ffffff !important; }

.fa.fa-list,   .fa.fa-sync,   .fa.fa-search, .fa.fa-cog,
.fa.fa-copy,   .fa.fa-save,   .fa.fa-minus,  .fa.fa-print,
.flaticon2-send-1, .flaticon2-copy, .flaticon-search-1 {
    color: #ffffff !important;
}

.btn .fa.fa-list,  .btn .fa.fa-sync,  .btn .fa.fa-search, .btn .fa.fa-cog,
.btn .fa.fa-copy,  .btn .fa.fa-save,  .btn .fa.fa-minus,  .btn .fa.fa-print,
.btn .flaticon2-send-1, .btn .flaticon2-copy, .btn .flaticon-search-1,
.btn:hover .fa.fa-list,  .btn:hover .fa.fa-sync,  .btn:hover .fa.fa-search,
.btn:hover .fa.fa-cog,   .btn:hover .fa.fa-copy,  .btn:hover .fa.fa-save,
.btn:hover .fa.fa-minus, .btn:hover .fa.fa-print,
.btn:focus .fa.fa-list,  .btn:focus .fa.fa-sync,  .btn:focus .fa.fa-search,
.btn:focus .fa.fa-cog,   .btn:focus .fa.fa-copy,  .btn:focus .fa.fa-save,
.btn:focus .fa.fa-minus, .btn:focus .fa.fa-print,
.btn:hover .flaticon2-send-1, .btn:focus .flaticon2-send-1,
.btn:hover .flaticon2-copy,   .btn:focus .flaticon2-copy,
.btn:hover .flaticon-search-1, .btn:focus .flaticon-search-1 {
    color: #ffffff !important;
}

/* fa-filter and fa-calendar-day: always white */
.fa.fa-filter, .fa-filter, .fa.fa-calendar-day {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.fa.fa-filter:hover,  .fa.fa-filter:focus,
.fa-filter:hover,     .fa-filter:focus,
.fa.fa-calendar-day:hover, .fa.fa-calendar-day:focus {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.fa.fa-filter::before, .fa-filter::before, .fa.fa-calendar-day::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* fa-recycle, fa-download: always white */
.fa-recycle::before, .fa.fa-recycle::before {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: none !important;
}

.fa-recycle:hover::before, .fa.fa-recycle:hover::before,
.fa-recycle:focus::before, .fa.fa-recycle:focus::before,
.fa.fa-download:hover::before, .fa.fa-download:focus::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* fa-arrow-circle-right: always white */
.fa.fa-arrow-circle-right, .fa-arrow-circle-right,
.fa.fa-arrow-circle-right::before, .fa-arrow-circle-right::before {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: none !important;
}

.fa.fa-arrow-circle-right:hover, .fa-arrow-circle-right:hover,
.fa.fa-arrow-circle-right:focus, .fa-arrow-circle-right:focus,
.fa.fa-arrow-circle-right:hover::before, .fa-arrow-circle-right:hover::before,
.fa.fa-arrow-circle-right:focus::before, .fa-arrow-circle-right:focus::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* fa-hand-pointer: always white */
.fa.fa-hand-pointer {
    color: #ffffff !important;
    transition: none !important;
}

.fa.fa-hand-pointer::before { color: inherit !important; }

body .btn:hover .fa.fa-hand-pointer,
body .btn:focus .fa.fa-hand-pointer,
body .menu-item:hover .fa.fa-hand-pointer {
    color: #ffffff !important;
}

/* fa-play: green (intentional) */
.fa.fa-play, .fa-play,
.fa.fa-play::before, .fa-play::before,
.fa.fa-play:hover, .fa-play:hover,
.fa.fa-play:focus, .fa-play:focus,
.fa.fa-play:hover::before, .fa-play:hover::before {
    color: #008000 !important;
}

/* flaticon2-document: always white */
.flaticon2-document,
.flaticon2-document:hover,
.flaticon2-document:focus {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Line Awesome (.la) icons: white globally */
.la {
    color: #ffffff !important;
    fill: #ffffff !important;
    transition: none !important;
}

.la:hover, .la:focus, .la:active {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.la::before { color: inherit !important; fill: inherit !important; }

body .btn:hover .la,
body .btn:focus .la,
body .menu-item:hover .la,
body .menu-item:focus .la {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* la-times / la-remove pseudo-elements: brand color */
.la-times::before,
.la-remove::before {
    color: var(--minefox-primary) !important;
}

/* fa-th-large: gray */
.fa-th-large::before { color: #7b7676 !important; }

/* flaticon-alert-2 unread notification: keep color on hover */
.flaticon-alert-2.unread-notification:hover { color: var(--minefox-primary) !important; }
.flaticon-alert-2:hover::before, .btn:hover .flaticon-alert-2::before { color: var(--minefox-primary) !important; }
.flaticon-alert-2::before { text-decoration: none; }

/* flaticon2 icons: white on hover */
[class*="flaticon2-"]:hover,
[class*="flaticon2-"]:hover::before,
[class^="flaticon-"]:hover::before,
[class*=" flaticon-"]:hover::before,
[class^="flaticon2-"]:hover::before,
[class*=" flaticon2-"]:hover::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ── 08c. Icon Replacements (flaticon2 → Font Awesome) ── */

/* flaticon2-send-1 → fa-paper-plane */
.flaticon2-send-1 {
    position: relative;
    color: transparent !important;
}

.flaticon2-send-1::before { color: transparent !important; }

.flaticon2-send-1::after {
    content: "\f1d8";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: #ffffff !important;
    pointer-events: none;
}

/* flaticon2-copy → fa-copy */
.flaticon2-copy {
    position: relative;
    color: transparent !important;
}

.flaticon2-copy::before { color: transparent !important; }

.flaticon2-copy::after {
    content: "\f0c5";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
    font-weight: 900;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: #ffffff !important;
    pointer-events: none;
}

/* ── 08d. Header / Notification Icons ── */

/* Chat and alarm icons: brand orange on hover */
.btn.btn-icon.btn-clean.btn-dropdown:hover i.flaticon-chat-2,
.btn.btn-icon.btn-clean.btn-dropdown:hover i.flaticon-alarm,
.btn.btn-icon.btn-clean.btn-dropdown i.flaticon-chat-2:hover,
.btn.btn-icon.btn-clean.btn-dropdown i.flaticon-alarm:hover,
i.flaticon-chat-2:hover::before,
.btn-clean.btn-dropdown:hover i.flaticon-chat-2::before,
i.flaticon-alarm:hover::before,
.btn-clean.btn-dropdown:hover i.flaticon-alarm::before {
    color: var(--minefox-primary) !important;
    fill: var(--minefox-primary) !important;
}

/* "See all" text-hover link */
a#SendAgenda .flaticon2-send-1,
#SendAgenda:hover .flaticon2-send-1,
#SendAgenda:focus .flaticon2-send-1 {
    color: #ffffff !important;
}


/* ============================================================
   09. Modals & Dialogs
   ============================================================ */

/* ── 09a. Modal Structure ── */
.modal-backdrop {
    background-color: rgba(26, 41, 72, 0.8) !important;
}

.modal-content {
    background-color: #ffffff !important;
    border-radius: 8px !important;
}

.modal-header {
    background-color: var(--sidebar-bg) !important;
    color: #ffffff !important;
    border-bottom: 2px solid #1a2948 !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal-header .modal-title {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
}

.modal-header .modal-close,
.modal-header .close {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 1.5rem !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

.modal-header .modal-close:hover,
.modal-header .close:hover {
    color: #f0f0f0 !important;
    opacity: 0.8 !important;
}

.modal-header .btn-close:hover {
    background-color: var(--sidebar-bg) !important;
}

.modal-body {
    background-color: #f8f9fa !important;
    padding: 20px !important;
}

.modal-footer {
    background-color: #f8f9fa !important;
    border-top: 2px solid var(--minefox-primary) !important;
    padding: 15px 20px !important;
}

.modal-footer .btn-primary {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

/* Card headers inside modals */
.modal .card-header {
    background-color: #f8f9fa !important;
    color: #1a2948 !important;
}

.modal .card-title .caption-subject {
    color: #1a2948 !important;
    font-weight: 600 !important;
}

/* Card toolbar buttons inside modals */
.modal .card-toolbar .btn {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
    margin-left: 5px !important;
}

.modal .card-toolbar .btn:hover {
    background-color: #e6360a !important;
}

/* Alert inside modal */
.modal .alert.alert-warning {
    background-color: rgba(255, 152, 0, 0.1) !important;
    color: #1a2948 !important;
}

/* jstree inside modal */
.modal .jstree-default .jstree-clicked {
    background-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.modal .jstree-default .jstree-hovered {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: var(--minefox-primary) !important;
}

/* ── 09b. SweetAlert ── */
.swal-modal {
    background-color: #ffffff !important;
    border-radius: 8px !important;
}

.swal-title { color: #1a2948 !important; font-weight: 600 !important; }
.swal-text  { color: #6c757d !important; }

.swal-icon--warning         { border-color: var(--minefox-primary) !important; }
.swal-icon--warning__body   { background-color: var(--minefox-primary) !important; }
.swal-icon--warning__dot    { background-color: var(--minefox-primary) !important; }

.swal-button {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.swal-button--confirm { background-color: var(--minefox-primary) !important; color: #ffffff !important; }

.swal-button--confirm:hover,
.swal-button--confirm:focus {
    background-color: #e6360a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3) !important;
}

.swal-button--confirm:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3) !important;
}

.swal-button--cancel { background-color: #6c757d !important; color: #ffffff !important; }

.swal-button--cancel:hover,
.swal-button--cancel:focus {
    background-color: #5a6268 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

.swal-button--cancel:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(108, 117, 125, 0.3) !important;
}

.swal-button-container { margin: 0 5px !important; }

.swal-footer {
    padding: 20px !important;
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
}

.swal-button:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.swal-button:disabled:hover { transform: none !important; box-shadow: none !important; }
.swal-button:focus          { outline: 2px solid var(--minefox-primary) !important; outline-offset: 2px !important; }
.swal-button--cancel:focus  { outline: 2px solid #6c757d !important; outline-offset: 2px !important; }

.swal-button__loader { display: none !important; }
.swal-button--loading .swal-button__loader { display: block !important; }

.swal-button--loading .swal-button__loader div {
    background-color: #ffffff !important;
    width: 4px !important; height: 4px !important;
    border-radius: 50% !important;
    margin: 0 2px !important;
    animation: swal-loading 1.4s infinite ease-in-out !important;
}

.swal-button--loading .swal-button__loader div:nth-child(1) { animation-delay: -0.32s !important; }
.swal-button--loading .swal-button__loader div:nth-child(2) { animation-delay: -0.16s !important; }

@keyframes swal-loading {
    0%, 80%, 100% { transform: scale(0); }
    40%            { transform: scale(1); }
}


/* ============================================================
   10. Tables & DataTables
   ============================================================ */

/* ── 10a. DataTables Pagination Buttons ── */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: var(--brand-hover-bg) !important;
    border-color: var(--minefox-primary) !important;
    color: var(--minefox-primary) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-color: #dee2e6;
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--minefox-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--brand-focus-ring-light) !important;
}

/* ── 10b. DataTables Sort Arrows ── */

/* Unsorted: both arrows dimmed */
html body .dataTables_wrapper .dataTable th.sorting:before,
html body .dataTables_wrapper .dataTable th.sorting:after,
html body .dataTables_wrapper .dataTable td.sorting:before,
html body .dataTables_wrapper .dataTable td.sorting:after {
    opacity: 0.25 !important;
    color: #b5b5c3 !important;
    border-color: #b5b5c3 !important;
}

/* Sorted ASC: up arrow highlighted, down dimmed */
html body .dataTables_wrapper .dataTable th.sorting_asc:before,
html body .dataTables_wrapper .dataTable td.sorting_asc:before {
    opacity: 1 !important;
    color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

html body .dataTables_wrapper .dataTable th.sorting_asc:after,
html body .dataTables_wrapper .dataTable td.sorting_asc:after {
    opacity: 0.25 !important;
    color: #b5b5c3 !important;
    border-color: #b5b5c3 !important;
}

/* Sorted DESC: down arrow highlighted, up dimmed */
html body .dataTables_wrapper .dataTable th.sorting_desc:after,
html body .dataTables_wrapper .dataTable td.sorting_desc:after {
    opacity: 1 !important;
    color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

html body .dataTables_wrapper .dataTable th.sorting_desc:before,
html body .dataTables_wrapper .dataTable td.sorting_desc:before {
    opacity: 0.25 !important;
    color: #b5b5c3 !important;
    border-color: #b5b5c3 !important;
}

/* Disabled: always dimmed */
html body .dataTables_wrapper .dataTable th.sorting_asc_disabled:before,
html body .dataTables_wrapper .dataTable th.sorting_asc_disabled:after,
html body .dataTables_wrapper .dataTable th.sorting_desc_disabled:before,
html body .dataTables_wrapper .dataTable th.sorting_desc_disabled:after,
html body .dataTables_wrapper .dataTable td.sorting_asc_disabled:before,
html body .dataTables_wrapper .dataTable td.sorting_asc_disabled:after,
html body .dataTables_wrapper .dataTable td.sorting_desc_disabled:before,
html body .dataTables_wrapper .dataTable td.sorting_desc_disabled:after {
    opacity: 0.25 !important;
    color: #b5b5c3 !important;
    border-color: #b5b5c3 !important;
}

/* Hover unsorted: faint preview */
html body .dataTables_wrapper .dataTable th.sorting:hover:before,
html body .dataTables_wrapper .dataTable th.sorting:hover:after {
    opacity: 0.5 !important;
}

/* ── 10c. DataTables Responsive Controls (DTR) ── */
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
    background-color: var(--minefox-primary) !important;
}

table.dataTable.dtr-column > tbody > tr.shown > td.control:before,
table.dataTable.dtr-column > tbody > tr.shown > th.control:before {
    background-color: var(--minefox-primary-hover) !important;
}

table.dataTable.dtr-column > tbody > tr > td.control:hover:before,
table.dataTable.dtr-column > tbody > tr > th.control:hover:before {
    background-color: var(--minefox-primary-dark) !important;
}

/* Inline collapsed expand icon */
.dataTables_wrapper table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
    background-color: #ffffff !important;
    color: var(--minefox-primary) !important;
}

.dataTables_wrapper table.dataTable.dtr-inline.shown > tbody > tr[role="row"] > td:first-child:before {
    background-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

/* ── 10d. Sorted Column Text Color ── */
.dataTables_wrapper .dataTable thead th.sorting_asc,
.dataTables_wrapper .dataTable tbody td.sorting_asc,
.dataTables_wrapper .dataTable thead th.sorting_desc,
.dataTables_wrapper .dataTable tbody td.sorting_desc {
    color: var(--minefox-primary) !important;
    font-weight: 600 !important;
}

/* ── 10e. Table Row Highlights ── */
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active {
    color: #ffffff !important;
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

/* jstree icon inside table */
.jstree-icon.jstree-themeicon.fa.fa-list.jstree-themeicon-custom::before {
    color: #7b7676 !important;
}


/* ============================================================
   11. Bootstrap Pagination
   ============================================================ */

/* Base link color */
.page-link {
    color: var(--minefox-primary) !important;
}

.page-link:hover,
.page-link:focus {
    color: var(--text-on-orange) !important;
    background-color: var(--minefox-primary-hover) !important;
    border-color: var(--minefox-primary-hover) !important;
}

/* Remove sticky focus shadow */
.pagination .page-link:focus {
    box-shadow: none !important;
}

/* Active page */
.pagination .page-item.active .page-link,
.page-item.active .page-link {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

/* Icon color inside page-links */
.pagination .page-item .page-link i {
    color: var(--minefox-primary) !important;
}

/* Disabled arrows */
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled .page-link:hover,
.pagination .page-item.disabled .page-link:focus,
.pagination .page-item.disabled .page-link:active {
    background-color: #ffffff !important;
    color: #adb5bd !important;
    border-color: #dee2e6 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
}

.pagination .page-item.disabled .page-link i {
    color: #adb5bd !important;
}

/* Prev / Next / First / Last arrows — enabled */
.pagination .page-item.prev .page-link,
.pagination .page-item.next .page-link {
    background-color: #ffffff !important;
    color: var(--minefox-primary) !important;
    border-color: #dee2e6 !important;
}

.pagination .page-item.prev .page-link:focus,
.pagination .page-item.prev .page-link:active,
.pagination .page-item.prev .page-link:focus-visible,
.pagination .page-item.prev .page-link.focus,
.pagination .page-item.next .page-link:focus,
.pagination .page-item.next .page-link:active,
.pagination .page-item.next .page-link:focus-visible,
.pagination .page-item.next .page-link.focus {
    background-color: #ffffff !important;
    color: var(--minefox-primary) !important;
    box-shadow: none !important;
}

.pagination .page-item.prev .page-link:hover,
.pagination .page-item.next .page-link:hover {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.pagination .page-item.prev .page-link i,
.pagination .page-item.next .page-link i {
    color: var(--minefox-primary) !important;
}

.pagination .page-item.prev .page-link:hover i,
.pagination .page-item.next .page-link:hover i {
    color: #ffffff !important;
}

/* Enabled arrows hover (all variants including DataTables li.paginate_button) */
.pagination .page-item.prev:not(.disabled)   > .page-link:hover,
.pagination .page-item.next:not(.disabled)   > .page-link:hover,
.pagination .page-item.first:not(.disabled)  > .page-link:hover,
.pagination .page-item.last:not(.disabled)   > .page-link:hover,
.pagination li.paginate_button.previous:not(.disabled) > a.page-link:hover,
.pagination li.paginate_button.next:not(.disabled)     > a.page-link:hover,
.pagination li.paginate_button.first:not(.disabled)    > a.page-link:hover,
.pagination li.paginate_button.last:not(.disabled)     > a.page-link:hover,
.pagination .page-item:not(.disabled) .page-link:hover {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.pagination .page-item.prev:not(.disabled)   > .page-link:hover i,
.pagination .page-item.next:not(.disabled)   > .page-link:hover i,
.pagination .page-item.first:not(.disabled)  > .page-link:hover i,
.pagination .page-item.last:not(.disabled)   > .page-link:hover i,
.pagination li.paginate_button.previous:not(.disabled) > a.page-link:hover i,
.pagination li.paginate_button.next:not(.disabled)     > a.page-link:hover i,
.pagination li.paginate_button.first:not(.disabled)    > a.page-link:hover i,
.pagination li.paginate_button.last:not(.disabled)     > a.page-link:hover i,
.pagination .page-item:not(.disabled) .page-link:hover i {
    color: #ffffff !important;
}

/* Disabled arrows (all variants) */
.pagination .page-item.prev.disabled  > .page-link,
.pagination .page-item.next.disabled  > .page-link,
.pagination .page-item.first.disabled > .page-link,
.pagination .page-item.last.disabled  > .page-link,
.pagination li.paginate_button.previous.disabled > a.page-link,
.pagination li.paginate_button.next.disabled     > a.page-link,
.pagination li.paginate_button.first.disabled    > a.page-link,
.pagination li.paginate_button.last.disabled     > a.page-link {
    background-color: #f1f3f5 !important;
    border-color: #e9ecef !important;
    color: #adb5bd !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none;
}

.pagination .page-item.prev.disabled  > .page-link i,
.pagination .page-item.next.disabled  > .page-link i,
.pagination .page-item.first.disabled > .page-link i,
.pagination .page-item.last.disabled  > .page-link i,
.pagination li.paginate_button.previous.disabled > a.page-link i,
.pagination li.paginate_button.next.disabled     > a.page-link i,
.pagination li.paginate_button.first.disabled    > a.page-link i,
.pagination li.paginate_button.last.disabled     > a.page-link i {
    color: #adb5bd !important;
}


/* ============================================================
   12. Badges & Labels
   ============================================================ */

.badge-primary,
.label-primary,
.badge.badge-primary {
    background-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

.badge-light-primary,
.badge-outline-primary {
    background-color: var(--brand-hover-bg) !important;
    color: var(--minefox-primary) !important;
    border: 1px solid var(--minefox-primary);
}


/* ============================================================
   13. Progress Bars & Spinners
   ============================================================ */

.progress-bar {
    background-color: var(--minefox-primary) !important;
}

.progress-bar-striped {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%, transparent 75%,
        transparent
    );
}

.btn.btn-primary.spinner::after,
.btn.btn-primary .spinner-border {
    border-color: var(--text-on-orange) transparent var(--text-on-orange) transparent;
}


/* ============================================================
   14. Cards & Panels
   ============================================================ */

.card-toolbar .btn {
    transition: all var(--transition-fast);
}

.card-toolbar .btn:hover {
    transform: translateY(-1px);
}

/* Card toolbar dropdown items */
.card-toolbar .dropdown-menu .dropdown-item {
    color: #6c757d !important;
}

.card-toolbar .dropdown-menu .dropdown-item:hover,
.card-toolbar .dropdown-menu .dropdown-item:focus {
    color: var(--minefox-primary) !important;
    background-color: inherit !important;
}

.kt-portlet__head {
    border-bottom-color: var(--minefox-primary);
}

.kt-portlet__head .kt-portlet__head-toolbar .btn-primary {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}


/* ============================================================
   15. List Groups
   ============================================================ */

.list-group-item.active {
    background-color: #FFECEC !important;
    border-color: var(--minefox-primary) !important;
    color: #464E5F !important;
}

.list-group-item:hover {
    background-color: var(--brand-hover-bg) !important;
    color: var(--minefox-primary) !important;
}


/* ============================================================
   16. Notification Navigation (Navi)
   To add overrides for new navi contexts, add selectors here.
   ============================================================ */

.navi.navi-hover { background-color: transparent !important; }

.navi-item {
    border-radius: 6px;
    margin: 2px 0;
    transition: all var(--transition-fast) !important;
}

.navi-item .navi-link {
    padding: 12px 15px !important;
    border-radius: 6px;
    background-color: transparent !important;
    transition: all var(--transition-fast) !important;
}

.navi-item:hover,
.navi-item:focus {
    background-color: transparent !important;
    transform: translateX(3px);
}

.navi-item:hover .navi-link,
.navi-item:focus .navi-link {
    background-color: rgba(255, 152, 0, 0.1) !important;
}

.navi-item:hover .navi-text,
.navi-item:focus .navi-text,
.navi-item:hover .navi-text .font-weight-bold,
.navi-item:focus .navi-text .font-weight-bold {
    color: var(--minefox-primary) !important;
}

.navi-item:hover .navi-icon,
.navi-item:hover .navi-icon i,
.navi-item:focus .navi-icon,
.navi-item:focus .navi-icon i,
.navi-item:hover .navi-icon i.text-info,
.navi-item:focus .navi-icon i.text-info {
    color: var(--minefox-primary) !important;
}

/* Muted text stays muted */
.navi-item:hover .navi-text .text-muted,
.navi-item:focus .navi-text .text-muted {
    color: #6c757d !important;
}

.navi-item .btn.btn-link-success {
    color: #28a745 !important;
    transition: all var(--transition-fast) !important;
}

.navi-item:hover .btn.btn-link-success,
.navi-item:focus .btn.btn-link-success {
    color: var(--minefox-primary) !important;
    background-color: rgba(255, 152, 0, 0.1) !important;
}

/* Unread indicator */
.navi-item.user-notification-item-unread {
    border-left: 3px solid var(--minefox-primary);
}

.navi-item.user-notification-item-unread:hover,
.navi-item.user-notification-item-unread:focus {
    border-left-color: var(--minefox-primary) !important;
}

.navi-item:active .navi-link {
    background-color: rgba(255, 152, 0, 0.2) !important;
    transform: scale(0.98);
}

/* Navi scrollbar */
.navi.scroll::-webkit-scrollbar       { width: 6px; }
.navi.scroll::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
.navi.scroll::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
.navi.scroll::-webkit-scrollbar-thumb:hover { background: var(--minefox-primary); }

/* Unread bell icon hover */
.flaticon-alert-2.unread-notification:hover { color: var(--minefox-primary) !important; }


/* ============================================================
   17. Dropdowns
   ============================================================ */

/* Active / selected item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: #FFECEC !important;
    color: #ffffff !important;
}

/* "Filter by role" dropdown toggle */
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"] {
    color: #6c757d !important;
}

button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]::after {
    border-top-color: #6c757d !important;
}

button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:focus,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:focus-visible,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:active {
    outline: 0 !important;
    box-shadow: 0 0 0 .2rem rgba(239, 70, 38, .25) !important;
}

button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:hover,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:focus,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"][aria-expanded="true"] {
    background-color: #FFECEC !important;
    color: #ffffff !important;
    border-color: var(--minefox-primary) !important;
}

button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:hover::after,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"]:focus::after,
button.btn.dropdown-toggle.btn-light[data-id="RoleSelectionCombo"][aria-expanded="true"]::after {
    border-top-color: #ffffff !important;
}

/* "Add to" small circular links */
a.btn.btn-circle.btn-default.btn_small i        { color: #ffffff; }
a.btn.btn-circle.btn-default.btn_small          { background-color: #e5eaee; border: none; }
a.btn.btn-circle.btn-default.btn_small:hover i  { color: var(--minefox-primary); }


/* ============================================================
   18. Third-party Components
   ============================================================ */

/* ── 18a. Bootstrap Select ── */
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus,
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item:active {
    background-color: #FFECEC !important;
    color: #ffffff !important;
}

/* ── 18b. Date Range Picker ── */

/* Today (not selected): brand outline + tint */
.daterangepicker .drp-calendar td.today.today:not(.active) {
    color: var(--minefox-primary) !important;
    background: rgba(239, 70, 38, 0.12) !important;
    border: 1px solid var(--minefox-primary) !important;
    border-radius: 0.42rem !important;
}

/* In-range days: light brand wash */
.daterangepicker .drp-calendar td.in-range {
    background: rgba(239, 70, 38, 0.08) !important;
    color: inherit !important;
}

/* Hover on available days: brand text, no blue bg */
.daterangepicker .drp-calendar td.available:hover {
    color: var(--minefox-primary) !important;
    background: transparent !important;
}

/* Range endpoints on hover: brand bg + white text */
.daterangepicker .drp-calendar td.start-date:hover,
.daterangepicker .drp-calendar td.end-date:hover {
    background-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

/* Disabled / off-month days */
.daterangepicker .drp-calendar td.off,
.daterangepicker .drp-calendar td.disabled {
    color: #b5b5c3 !important;
    background: transparent !important;
}

/* Preset ranges */
.ranges ul li:hover  { color: var(--minefox-primary) !important; }
.ranges ul li.active { color: var(--minefox-primary) !important; }

/* ── 18c. Xero Connect Button ── */
button[onclick="location.href='/App/XeroUtils/Connect'"] {
    background-color: var(--minefox-primary) !important;
    border: 1px solid var(--minefox-primary) !important;
    color: #ffffff !important;
    border-radius: .25rem;
    padding: .5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color .15s ease-in-out, transform .15s ease-in-out;
}

button[onclick="location.href='/App/XeroUtils/Connect'"]:hover {
    background-color: var(--minefox-primary-hover) !important;
    transform: translateY(-1px);
}

button[onclick="location.href='/App/XeroUtils/Connect'"]:active {
    background-color: var(--minefox-primary-active) !important;
    transform: translateY(0);
}

/* ── 18d. Summernote Editor ── */
.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"] {
    background-color: var(--minefox-primary) !important;
    border: 1px solid var(--minefox-primary) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"] i,
.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"] i::before {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"]:hover,
.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"]:focus,
.note-btn.btn.btn-default.btn-sm[aria-label="Print or export to PDF"]:active {
    background-color: var(--minefox-primary-hover) !important;
    border-color: var(--minefox-primary-hover) !important;
    color: #ffffff !important;
}

/* ── 18e. jstree ── */
/* (modal-scoped rules already in section 09a) */
/*.jstree-default .jstree-clicked {
    background-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.jstree-default .jstree-hovered {
    background-color: rgba(255, 152, 0, 0.2) !important;
    color: var(--minefox-primary) !important;
}*/

.jstree-default .jstree-anchor, .jstree-default .jstree-animated, .jstree-default .jstree-wholerow {
    transition: background-color .0s, box-shadow .0s; 
}


/* ============================================================
   19. Login Page
   ============================================================ */

/* Primary submit button */
.login-form .btn-primary,
#kt_login_signin_submit {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
    color: #ffffff !important;
}

.login-form .btn-primary:hover,
#kt_login_signin_submit:hover {
    background-color: var(--minefox-primary-hover) !important;
    border-color: var(--minefox-primary-hover) !important;
}

/* Tenant-change / forgot-password links */
.login__signup-label a,
.login-form a#forget-password,
.login-form a.text-primary,
.login-form a.text-hover-primary {
    color: var(--minefox-primary) !important;
}

.login__signup-label a:hover,
.login-form a#forget-password:hover,
.login-form a.text-primary:hover,
.login-form a.text-hover-primary:hover {
    color: var(--minefox-primary-hover) !important;
}

/* Input borders */
.login-form .form-control {
    border: 1px solid var(--minefox-primary) !important;
}

.login-form .form-control:focus {
    border-color: var(--minefox-primary) !important;
    box-shadow: 0 0 0 2px rgba(239, 70, 38, 0.2) !important;
    outline: none !important;
}

/* Remember-me checkbox */
.login-form .checkbox input[type="checkbox"] + span {
    border: 2px solid var(--minefox-primary) !important;
}

.login-form .checkbox input[type="checkbox"]:checked + span {
    background-color: var(--minefox-primary) !important;
    border-color: var(--minefox-primary) !important;
}

/* Focus outlines on login interactive elements */
.login-form button:focus,
.login-form a:focus,
.login-form input:focus {
    outline: 2px solid var(--minefox-primary) !important;
    outline-offset: 2px !important;
}


/* ============================================================
   20. Utility Classes
   Add new single-purpose brand utility classes here.
   ============================================================ */

.text-brand   { color: var(--minefox-primary) !important; }
.text-on-orange { color: var(--text-on-orange) !important; }

.bg-brand {
    background-color: var(--minefox-primary) !important;
    color: var(--text-on-orange) !important;
}

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

/* Text selection */
::selection      { background-color: var(--minefox-primary); color: #ffffff; }
::-moz-selection { background-color: var(--minefox-primary); color: #ffffff; }

/* Global brand color override for Bootstrap CSS variables */
*[class*="primary"]:not(.no-brand-override) {
    --bs-primary:     var(--minefox-primary) !important;
    --bs-primary-rgb: var(--minefox-primary-rgb) !important;
}

/* Sidebar anchor overrides (force brand on all menu anchors) */
.menu-subnav a,
.menu-subnav a:hover,
.menu-subnav a:focus,
.menu-nav a,
.menu-nav a:hover,
.menu-nav a:focus {
    color: var(--minefox-primary) !important;
    text-decoration: none !important;
}


/* ============================================================
   21. Accessibility & Focus States
   ============================================================ */

:focus-visible {
    outline: 2px solid var(--minefox-primary);
    outline-offset: 2px;
}

.btn:focus-visible,
.menu-link:focus-visible {
    outline: 2px solid var(--minefox-primary);
    outline-offset: 2px;
}


/* ============================================================
   22. Animations & Keyframes
   ============================================================ */

@keyframes minefox-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(var(--minefox-primary-rgb), 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--minefox-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0    rgba(var(--minefox-primary-rgb), 0); }
}

/* Apply to any element that should pulse with brand color */
.pulse-brand { animation: minefox-pulse 2s infinite; }

@keyframes swal-loading {
    0%, 80%, 100% { transform: scale(0); }
    40%           { transform: scale(1); }
}


/* ============================================================
   23. Responsive Design
   ============================================================ */

@media (max-width: 768px) {
    .menu-link:hover {
        transform: none;
        padding-left: 15px;
    }

    .btn:hover,
    .btn-floating:hover {
        transform: none;
    }
}


/* ============================================================
   24. Print Styles
   ============================================================ */

@media print {
    .btn-primary,
    .badge-primary,
    .bg-brand {
        background-color: var(--minefox-primary) !important;
        -webkit-print-color-adjust: exact;
    }

    .text-brand {
        color: var(--minefox-primary) !important;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}


/* ============================================================
   25. Custom Theme Foundation
   Integrated from custom-theme.css. Contains typography,
   base input styles, table header styles, button sizing, and
   additional utility classes. Overlapping variables and
   conflicting menu/button rules were excluded.
   ============================================================ */

.menu-text {
    font-weight: 600
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--minefox-secondary);
}



/* ── Table Header & Cell Fonts ── */
.table th {
    background-color: var(--minefox-secondary) !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
}


.btn-sm { padding: 4px 10px;  font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 16px; font-weight: 600; }

/* ── Additional Utility Classes ── */
.text-accent   { color: var(--minefox-secondary) !important; }
.text-dark     { color: var(--minefox-dark) !important; }

.bg-accent  { background-color: var(--minefox-secondary) !important; color: #ffffff !important; }
.bg-white   { background-color: #ffffff !important; }

.border-accent { border-color: var(--minefox-secondary) !important; }

.rounded { border-radius: 8px !important; }
.shadow  { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; }

/* ============================================================
   ABP Busy Overlay — MineFox SVG spinner
   ============================================================ */
.abp-custom-busy {
    position: absolute;
    inset: 0;
    background: rgba(200, 200, 200, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    border-radius: inherit;
}
.abp-custom-busy-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.abp-custom-busy-icon svg {
    width: 100%;
    height: 100%;
}

/* SVG-shaped pulse — orange glow follows the full logo outline */
@keyframes minefox-pulse-svg {
    0%   { filter: drop-shadow(0 0 0px  rgba(var(--minefox-primary-rgb), 0.96)); }
    50%  { filter: drop-shadow(0 0 12px rgba(var(--minefox-primary-rgb), 0.48)); }
    100% { filter: drop-shadow(0 0 0px  rgba(var(--minefox-primary-rgb), 0)); }
}
.pulse-brand-svg {
    animation: minefox-pulse-svg 1.6s ease-in-out infinite;
}

/* White elements inside the SVG pulse white */
@keyframes minefox-pulse-white {
    0%   { filter: drop-shadow(0 0 0px  rgba(255, 255, 255, 1)); }
    50%  { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.84)); }
    100% { filter: drop-shadow(0 0 0px  rgba(255, 255, 255, 0)); }
}
.abp-custom-busy-icon svg .mfb0 {
    animation: minefox-pulse-white 1.6s ease-in-out infinite;
}


/* ============================================================
   26. MF Component Library
   Reusable components shared across feature pages.
   Future pages: use mf-* classes and set --mf-left-panel-width
   on their page wrapper if 300px default doesn't fit.
   ============================================================ */

/* ── Search bar ── */
.mf-search-wrap { position: relative; margin-bottom: 8px; }
.mf-search-wrap .fa-search {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); font-size: 11px;
    color: var(--app-text-muted); pointer-events: none;
}
.mf-search-input {
    width: 100%; border: 1px solid var(--app-border); border-radius: 8px;
    padding: 6px 10px 6px 30px; font-size: 12px; color: var(--app-text-primary);
    background: var(--app-surface, #f8fafc); outline: none; transition: border-color 0.15s;
}
.mf-search-input:focus { border-color: var(--mf-accent); }

/* ── Filter chips (toggle pills) ── */
.mf-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mf-filter-chip {
    padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--app-border); background: #fff;
    color: var(--app-text-secondary); cursor: pointer; transition: all 0.15s;
}
.mf-filter-chip:hover { border-color: var(--mf-accent); color: var(--mf-accent); }
.mf-filter-chip.active { background: var(--mf-accent); border-color: var(--mf-accent); color: #fff; }

/* ── Stat bar ── */
.mf-stat-bar {
    background: #fff; border-bottom: 1px solid var(--app-border);
    padding: 12px 20px; display: flex; gap: 16px; flex-shrink: 0;
}
.mf-stat-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--app-surface, #f8fafc); border: 1px solid var(--app-border);
    border-radius: 12px; padding: 10px 16px; flex: 1; min-width: 0;
}
.mf-stat-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; flex-shrink: 0;
}
.mf-stat-icon.accent  { background: var(--mf-accent-light);  color: var(--mf-accent);  }
.mf-stat-icon.danger  { background: var(--mf-danger-light);  color: var(--mf-danger);  }
.mf-stat-icon.success { background: var(--mf-success-light); color: var(--mf-success); }
.mf-stat-icon.warning { background: var(--mf-warning-light); color: var(--mf-warning); }
.mf-stat-label { font-size: 11px; color: var(--app-text-muted); font-weight: 500; white-space: nowrap; }
.mf-stat-value { font-size: 20px; font-weight: 700; color: var(--app-text-primary); line-height: 1.1; }
.mf-stat-value.danger  { color: var(--mf-danger);  }
.mf-stat-value.success { color: var(--mf-success); }
.mf-stat-value.warning { color: var(--mf-warning); }

/* ── Split panel layout ── */
.mf-panels-row { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.mf-left-panel {
    width: var(--mf-left-panel-width, 300px);
    flex-shrink: 0; min-height: 0; background: #fff;
    border-right: 1px solid var(--app-border);
    display: flex; flex-direction: column; overflow: hidden;
}
.mf-panel-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--app-border); flex-shrink: 0;
}
.mf-panel-title-row {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 10px;
}
.mf-panel-title {
    font-size: 13px; font-weight: 700; color: var(--app-text-primary);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.mf-left-list { flex: 1; overflow-y: auto; padding: 10px; }
.mf-right-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; background: var(--app-surface, #f8fafc); }

/* ── Section card ── */
.mf-section-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 16px 20px; margin-bottom: 16px;
}
.mf-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mf-section-title { font-size: 14px; font-weight: 700; color: var(--app-text-primary); }
.mf-section-actions { margin-left: auto; display: flex; gap: 8px; }
.mf-view-all-link { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--mf-accent); text-decoration: none; cursor: pointer; }
.mf-view-all-link:hover { text-decoration: underline; color: var(--mf-accent); }

/* ── Count badge ── */
.mf-count-badge {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
    background: var(--app-surface, #f8fafc); border: 1px solid var(--app-border);
    color: var(--app-text-secondary);
}

/* ── Status badges ── */
.mf-status-badge { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; }
.mf-status-badge.active   { background: var(--mf-success-light); color: var(--mf-success); }
.mf-status-badge.inactive { background: #f1f5f9; color: var(--app-text-muted); }

/* ── Buttons ── */
.mf-icon-btn {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid var(--app-border); background: #fff;
    color: var(--app-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mf-icon-btn:hover { background: var(--mf-accent); border-color: var(--mf-accent); color: #fff; }
.mf-add-btn {
    background: var(--minefox-primary); color: #fff;
    border: none; border-radius: 20px; padding: 7px 16px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: background 0.15s, transform 0.1s; white-space: nowrap;
}
.mf-add-btn:hover { background: var(--minefox-primary-hover); transform: translateY(-1px); }
.mf-pill-btn {
    font-size: 11px; font-weight: 600; padding: 4px 12px;
    border-radius: 20px; cursor: pointer; transition: all 0.15s; border: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.mf-pill-btn.accent { background: var(--mf-accent); color: #fff; }
.mf-pill-btn.accent:hover { background: var(--mf-accent-hover); }
.mf-pill-btn.outline { border: 1px solid var(--app-border); background: #fff; color: var(--app-text-secondary); }
.mf-pill-btn.outline:hover { border-color: var(--mf-accent); color: var(--mf-accent); }

/* ── Empty / placeholder state ── */
.mf-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 40px 20px;
    color: var(--app-text-muted); text-align: center;
}
.mf-empty-state .fa,
.mf-empty-state .fas { font-size: 40px; margin-bottom: 14px; opacity: 0.35; }
.mf-empty-state p { font-size: 14px; margin: 0; }


/* ── Toolbar (sticky right-panel header: title + search + action buttons) ── */
.mf-toolbar {
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    padding: 12px 20px;
    flex-shrink: 0;
}
.mf-toolbar-top { display: flex; align-items: center; gap: 12px; }
.mf-toolbar-title { font-size: 16px; font-weight: 600; color: var(--app-text-primary); flex: 1; }
.mf-toolbar-count { font-size: 13px; color: var(--app-text-muted); font-weight: 400; }
.mf-toolbar-search-wrap { position: relative; }
.mf-toolbar-search-wrap .fa-search {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%); font-size: 12px;
    color: var(--app-text-muted); pointer-events: none;
}
.mf-toolbar-search {
    border: 1px solid var(--app-border); border-radius: 8px;
    padding: 6px 12px 6px 32px; font-size: 13px; width: 200px;
    outline: none; background: var(--app-surface); transition: border-color 0.15s;
}
.mf-toolbar-search:focus { border-color: var(--mf-accent); }
.mf-toolbar-filter-toggles { display: flex; gap: 6px; }

/* ── Filter toggles (Active / Has Variance / etc.) ── */
.mf-filter-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--app-border);
    background: var(--app-surface); color: var(--app-text-secondary);
    transition: all 0.15s; white-space: nowrap;
}
.mf-filter-toggle:hover { border-color: var(--app-text-muted); color: var(--app-text-primary); }
.mf-filter-toggle.active { background: var(--mf-success-light); border-color: #16a34a; color: #15803d; }
.mf-filter-toggle.active.accent   { background: var(--mf-accent-light);   border-color: var(--mf-accent-hover); color: var(--minefox-primary-dark); }
.mf-filter-toggle.active.warning  { background: var(--mf-warning-light);  border-color: #d97706; color: #92400e; }
.mf-filter-toggle.active.danger   { background: var(--mf-danger-light);   border-color: #dc2626; color: #991b1b; }

/* ── View toggle (grid / list switcher) ── */
.mf-view-toggle { display: flex; border: 1px solid var(--app-border); border-radius: 8px; overflow: hidden; }
.mf-view-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--app-text-muted); cursor: pointer;
    background: #fff; border: none; transition: background 0.12s, color 0.12s;
}
.mf-view-btn.active { background: var(--minefox-secondary); color: #fff; }
.mf-view-btn:first-child { border-right: 1px solid var(--app-border); }

/* ── Drawer (slide-in detail panel) ── */
.mf-drawer-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 1100;
    opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.mf-drawer-backdrop.open { opacity: 1; pointer-events: all; }
.mf-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 480px;
    background: #fff; z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    display: flex; flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.15);
}
.mf-drawer.open { transform: translateX(0); }
.mf-drawer-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--app-border); flex-shrink: 0; }
.mf-drawer-title-row { display: flex; align-items: flex-start; gap: 10px; }
.mf-drawer-title { font-size: 17px; font-weight: 700; color: var(--app-text-primary); flex: 1; line-height: 1.3; }
.mf-drawer-close {
    width: 30px; height: 30px; border-radius: 8px;
    border: 1px solid var(--app-border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; color: var(--app-text-muted); flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.mf-drawer-close:hover { background: #f1f5f9; color: var(--app-text-primary); }
.mf-drawer-actions { display: flex; gap: 8px; margin-top: 10px; }
.mf-drawer-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid var(--app-border); background: #fff;
    color: var(--app-text-secondary); transition: background 0.12s, color 0.12s;
}
.mf-drawer-btn:hover { background: var(--app-surface); color: var(--app-text-primary); }
.mf-drawer-btn.primary { background: var(--minefox-primary); border-color: var(--minefox-primary); color: #fff; }
.mf-drawer-btn.primary:hover { background: var(--minefox-primary-hover); }
.mf-drawer-btn.danger { border-color: transparent; color: var(--app-danger); }
.mf-drawer-btn.danger:hover { background: #fef2f2; }
.mf-drawer-body { flex: 1; overflow-y: auto; padding: 20px; }
.mf-drawer-section { margin-bottom: 24px; }
.mf-drawer-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--app-border);
}
.mf-drawer-section-title {
    font-size: 13px; font-weight: 600; color: var(--app-text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Info grid (key / value detail display) ── */
.mf-info-grid { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; }
.mf-info-label { font-size: 12px; color: var(--app-text-muted); font-weight: 500; padding-top: 1px; }
.mf-info-value { font-size: 13px; color: var(--app-text-primary); font-weight: 500; }
.mf-info-value.mono { font-family: monospace; }

/* ── Linked item row (icon + name + subtitle + optional delete) ── */
.mf-linked-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    background: var(--app-surface); margin-bottom: 6px; border: 1px solid var(--app-border);
}
.mf-linked-row-icon {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    background: var(--mf-accent-light); display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: var(--mf-accent);
}
.mf-linked-row-info { flex: 1; min-width: 0; }
.mf-linked-row-name { font-size: 13px; font-weight: 500; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-linked-row-sub { font-size: 11px; color: var(--app-text-muted); }
.mf-linked-row-del { font-size: 12px; color: var(--app-text-muted); cursor: pointer; background: none; border: none; padding: 4px; border-radius: 4px; }
.mf-linked-row-del:hover { color: var(--app-danger); }
.mf-linked-row-empty { font-size: 12px; color: var(--app-text-muted); padding: 8px 0; }

/* ── Alert banner (coloured callout strip) ── */
.mf-alert-banner {
    border-radius: 10px; padding: 10px 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 500; margin-bottom: 14px; border: 1px solid transparent;
}
.mf-alert-banner .fa { font-size: 14px; }
.mf-alert-banner.warning { background: var(--mf-warning-light); border-color: #fcd34d; color: #92400e; }
.mf-alert-banner.warning .fa { color: var(--mf-warning); }
.mf-alert-banner.danger  { background: var(--mf-danger-light);  border-color: #fca5a5; color: #991b1b; }
.mf-alert-banner.danger  .fa { color: var(--mf-danger); }
.mf-alert-banner.success { background: var(--mf-success-light); border-color: #86efac; color: #15803d; }
.mf-alert-banner.success .fa { color: var(--mf-success); }
.mf-alert-banner.info    { background: var(--mf-info-light);    border-color: #c4b5fd; color: #6b21a8; }
.mf-alert-banner.info    .fa { color: var(--mf-info); }
.mf-alert-banner.accent  { background: var(--mf-accent-light);  border-color: var(--mf-accent-hover); color: var(--minefox-primary-dark); }
.mf-alert-banner.accent  .fa { color: var(--mf-accent); }

/* ── Avatar (small circular user-initial badge) ── */
.mf-avatar { border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.mf-avatar.sm { width: 20px; height: 20px; font-size: 8px; }
.mf-avatar.md { width: 28px; height: 28px; font-size: 11px; }
.mf-avatar.lg { width: 36px; height: 36px; font-size: 14px; }


/* ── Detail card (large header card: title + badges + meta chips) ── */
.mf-detail-card {
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 20px 24px; margin-bottom: 16px;
}

/* ── Count badge colour variants ── */
.mf-count-badge.success { background: var(--mf-success-light); border-color: #86efac; color: #15803d; }
.mf-count-badge.warning { background: var(--mf-warning-light); border-color: #fcd34d; color: #92400e; }
.mf-count-badge.danger  { background: var(--mf-danger-light);  border-color: #fca5a5; color: #991b1b; }

/* ── Timeline (vertical dot-and-line audit/event list) ── */
.mf-timeline { position: relative; padding-left: 18px; }
.mf-timeline::before {
    content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
    width: 2px; background: var(--app-border);
}
.mf-timeline-entry { position: relative; display: flex; gap: 12px; padding-bottom: 16px; }
.mf-timeline-dot {
    position: absolute; left: -15px; top: 3px;
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid #fff; flex-shrink: 0; z-index: 1;
}
.mf-timeline-dot.success { background: var(--mf-success); }
.mf-timeline-dot.warning { background: var(--mf-warning); }
.mf-timeline-dot.danger  { background: var(--mf-danger);  }
.mf-timeline-dot.accent  { background: var(--mf-accent);  }
.mf-timeline-content {
    flex: 1; background: var(--app-surface, #f8fafc);
    border: 1px solid var(--app-border); border-radius: 8px; padding: 8px 12px;
}
.mf-timeline-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3px; }
.mf-timeline-date { font-size: 11px; font-weight: 600; color: var(--app-text-primary); }
.mf-timeline-meta { font-size: 11px; color: var(--app-text-muted); }

/* ── Form group wrapper ── */
.mf-form-group { margin-bottom: 14px; }

/* ── Form label ── */
.mf-form-label {
    font-size: 12px; font-weight: 600; color: var(--app-text-secondary);
    margin-bottom: 5px; display: block;
}

/* ── Form control (input / select / textarea) ── */
.mf-form-control {
    width: 100%; border: 1px solid var(--app-border); border-radius: 8px;
    padding: 8px 12px; font-size: 13px;
    color: var(--app-text-primary); outline: none; transition: border-color 0.15s;
    background: #fff; font-family: inherit;
}
.mf-form-control:focus { border-color: var(--minefox-primary); }
textarea.mf-form-control { resize: vertical; min-height: 70px; }
select.mf-form-control { appearance: auto; }

/* ── Field validation error ── */
.mf-form-error { font-size: 12px; color: var(--app-danger); margin-top: 4px; display: none; }
.mf-form-error.visible { display: block; }

/* ── 2-column form grid ── */
.mf-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Toggle switch ── */
.mf-toggle-row { display: flex; align-items: center; gap: 10px; }
.mf-toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.mf-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.mf-toggle-track {
    position: absolute; inset: 0;
    background: var(--app-border); border-radius: 11px;
    cursor: pointer; transition: background 0.2s;
}
.mf-toggle-track::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform 0.2s;
}
.mf-toggle-switch input:checked + .mf-toggle-track { background: var(--app-success); }
.mf-toggle-switch input:checked + .mf-toggle-track::before { transform: translateX(18px); }
.mf-toggle-label { font-size: 13px; font-weight: 500; color: var(--app-text-primary); }

/* ── Inner tabs (non-Bootstrap; for modals, cards, side panels) ── */
.mf-inner-tabs {
    display: flex; border-bottom: 2px solid var(--app-border); margin-bottom: 16px;
}
.mf-inner-tab {
    padding: 8px 16px; font-size: 13px; font-weight: 500;
    color: var(--app-text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: color 0.12s, border-color 0.12s;
}
.mf-inner-tab:hover { color: var(--app-text-primary); }
.mf-inner-tab.active { color: var(--minefox-primary); border-bottom-color: var(--minefox-primary); }
.mf-inner-tab-pane { display: none; }
.mf-inner-tab-pane.active { display: block; }

/* ── Info banner (brand-tinted callout strip) ── */
.mf-info-banner {
    background: var(--minefox-primary-light); border: 1px solid rgba(var(--minefox-primary-rgb), 0.2);
    border-radius: 8px; padding: 10px 12px; font-size: 12px;
    color: var(--minefox-primary-dark); display: flex; align-items: flex-start; gap: 8px;
}
.mf-info-banner .fa { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── File upload zone ── */
.mf-upload-zone {
    border: 2px dashed var(--app-border); border-radius: 10px;
    padding: 24px 16px; text-align: center; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative; color: var(--app-text-secondary);
}
.mf-upload-zone:hover, .mf-upload-zone.drag-over {
    border-color: var(--minefox-primary); background: var(--minefox-primary-light);
}
.mf-upload-zone i { font-size: 28px; color: var(--app-text-muted); display: block; margin-bottom: 6px; }
.mf-upload-zone p { font-size: 13px; margin: 0 0 2px; }
.mf-upload-zone input[type=file] { display: none; }
.mf-upload-browse { color: var(--minefox-primary); font-weight: 600; }
.mf-upload-hint { font-size: 11px; color: var(--app-text-muted); }

/* ── Image grid & thumbnail ── */
.mf-image-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px; margin-top: 12px;
}
.mf-img-thumb {
    position: relative; border-radius: 8px; overflow: hidden;
    aspect-ratio: 1; background: var(--app-surface); border: 1px solid var(--app-border);
}
.mf-img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-img-primary-badge {
    position: absolute; top: 4px; left: 4px;
    background: var(--minefox-primary); color: #fff;
    font-size: 9px; font-weight: 700; padding: 2px 5px; border-radius: 4px; text-transform: uppercase;
}
.mf-img-actions {
    position: absolute; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    opacity: 0; transition: opacity 0.15s;
}
.mf-img-thumb:hover .mf-img-actions { opacity: 1; }
.mf-img-actions button {
    width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.mf-img-btn-primary { background: var(--minefox-primary); color: #fff; }
.mf-img-btn-remove  { background: #ef4444; color: #fff; }


/* ── Split panel (two-panel modal body for picker modals) ── */
.mf-split-panel { display: flex; min-height: 400px; max-height: 58vh; overflow: hidden; }
.mf-split-left  { width: 55%; border-right: 1px solid var(--app-border); display: flex; flex-direction: column; overflow: hidden; }
.mf-split-right { width: 45%; display: flex; flex-direction: column; overflow: hidden; }
.mf-split-panel-hd {
    padding: 14px 16px 10px; border-bottom: 1px solid var(--app-border); flex-shrink: 0;
}
.mf-split-panel-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--app-text-muted); margin-bottom: 8px;
}
.mf-split-staging-hd {
    padding: 12px 16px; border-bottom: 1px solid var(--app-border);
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.mf-split-staging-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--app-text-muted);
    display: flex; align-items: center; gap: 6px;
}

/* ── Pick list (scrollable checkable row list) ── */
.mf-pick-list { flex: 1; overflow-y: auto; }
.mf-pick-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; cursor: pointer;
    border-bottom: 1px solid var(--app-border); transition: background 0.12s;
}
.mf-pick-row:last-child { border-bottom: none; }
.mf-pick-row:hover { background: var(--app-surface); }
.mf-pick-row.selected { background: var(--mf-accent-light); }
.mf-pick-checkbox {
    width: 16px; height: 16px; border: 1.5px solid var(--app-border);
    border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; background: #fff;
}
.mf-pick-row.selected .mf-pick-checkbox {
    background: var(--mf-accent); border-color: var(--mf-accent); color: #fff;
}
.mf-pick-row.selected .mf-pick-checkbox::after { content: '✓'; font-size: 10px; font-weight: 700; line-height: 1; }
.mf-pick-info { flex: 1; min-width: 0; }
.mf-pick-name { font-size: 12px; font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-pick-sub  { display: flex; align-items: center; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.mf-pick-cat-chip { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--mf-accent-light); color: var(--mf-accent); }
.mf-pick-filters { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.mf-pick-filter-chip {
    font-size: 10px; font-weight: 600; padding: 2px 8px;
    border-radius: 10px; border: 1px solid; cursor: pointer; transition: all 0.12s; opacity: 0.7;
}
.mf-pick-filter-chip:hover  { opacity: 1; }
.mf-pick-filter-chip.active { opacity: 1; }

/* ── Staging area (selected items awaiting save) ── */
.mf-pick-staging { flex: 1; overflow-y: auto; }
.mf-staging-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--app-border);
    animation: mf-slide-in 0.15s ease;
}
.mf-staging-row:last-child { border-bottom: none; }
@keyframes mf-slide-in {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mf-staging-info { flex: 1; min-width: 0; }
.mf-staging-name { font-size: 12px; font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-staging-meta { font-size: 10px; color: var(--app-text-muted); margin-top: 1px; }
.mf-staging-remove {
    width: 24px; height: 24px; border: none; background: none;
    color: var(--app-text-muted); cursor: pointer; border-radius: 6px; font-size: 11px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
}
.mf-staging-remove:hover { background: var(--mf-danger-light); color: var(--app-danger); }

/* ── Quantity stepper (−/input/+) ── */
.mf-qty-stepper {
    display: flex; align-items: center;
    border: 1.5px solid var(--app-border); border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
.mf-qty-btn {
    width: 28px; height: 28px; border: none; background: var(--app-surface);
    color: var(--app-text-secondary); font-size: 15px; font-weight: 600; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.12s, color 0.12s;
}
.mf-qty-btn:hover { background: var(--mf-accent-light); color: var(--mf-accent); }
.mf-qty-input {
    width: 36px; height: 28px; border: none;
    border-left: 1px solid var(--app-border); border-right: 1px solid var(--app-border);
    text-align: center; font-size: 12px; font-weight: 700;
    color: var(--app-text-primary); font-family: inherit; background: #fff; outline: none;
    -moz-appearance: textfield;
}
.mf-qty-input::-webkit-inner-spin-button,
.mf-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── Clear/reset text button ── */
.mf-clear-btn {
    font-size: 11px; color: var(--app-text-muted);
    background: none; border: none; cursor: pointer; padding: 0; transition: color 0.15s;
}
.mf-clear-btn:hover { color: var(--app-danger); }


/* ============================================================
   27. Supply Management
   ============================================================ */


/* ── 27a. Catalogue ── */

/* ===== ABP LAYOUT OVERRIDES ===== */
.cat-page-content {
    padding: 0 !important;
    overflow: hidden;
    min-height: 0;
    flex-basis: 0 !important;
}
/*
#kt_subheader { display: none !important; }
@media (min-width: 992px) {
    .header-fixed.subheader-fixed.subheader-enabled .wrapper {
        padding-top: 65px !important;
    }
}*/

/* ===== LAYOUT ===== */
.cat-wrapper {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

/* ===== LEFT PANEL ===== */
.cat-left-inner {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}
.cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
    margin-bottom: 2px;
}
.cat-row:hover { background: var(--app-surface); }
.cat-row:hover .cat-edit-btn { opacity: 1; }
.cat-row.selected { background: var(--minefox-primary-light); }
.cat-check-input {
    width: 15px; height: 15px;
    flex-shrink: 0;
    accent-color: var(--minefox-primary);
    cursor: pointer;
}
.cat-icon {
    width: 22px; height: 22px;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.cat-name-label { font-size: 13px; font-weight: 500; flex: 1; line-height: 1; }
.cat-count-badge {
    font-size: 11px;
    background: #f1f5f9;
    color: var(--app-text-secondary);
    border-radius: 10px;
    padding: 1px 7px;
    font-weight: 500;
}
.cat-edit-btn {
    opacity: 0; transition: opacity 0.12s;
    font-size: 11px; color: var(--app-text-muted);
    background: none; border: none; padding: 0; cursor: pointer;
}
.cat-edit-btn:hover { color: var(--minefox-primary); }
.cat-panel-divider { border: none; border-top: 1px solid var(--app-border); margin: 12px 0; }
.cat-clear-link {
    font-size: 12px; color: var(--minefox-primary); cursor: pointer;
    margin-top: 6px; display: none;
}
.cat-clear-link.visible { display: block; }
.cat-showing-label { font-size: 12px; color: var(--app-text-muted); margin-bottom: 2px; }
.cat-total-label { font-size: 11px; color: var(--app-text-muted); }

/* ===== RIGHT PANEL ===== */
.cat-right-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Catalogue: hasEquipment toggle uses accent colour when active */
.mf-filter-toggle.active[data-filter="hasEquipment"] { background: var(--mf-accent-light); border-color: var(--mf-accent-hover); color: var(--minefox-primary-dark); }
.cat-chips-row {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.cat-chips-row:empty { margin-top: 0; }
.cat-filter-chip {
    display: flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 3px 10px 3px 8px;
    font-size: 12px; font-weight: 500; color: #fff; cursor: pointer;
}
.cat-filter-chip .chip-x { font-size: 10px; opacity: 0.8; margin-left: 2px; }
.cat-filter-chip .chip-x:hover { opacity: 1; }

/* ===== CONTENT AREA ===== */
.cat-content-area { flex: 1; overflow-y: auto; padding: 14px 16px; }

/* ===== GRID VIEW ===== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.cat-grid.hidden { display: none; }
@media (max-width: 1400px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-item-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    border: 1px solid var(--app-border);
}
.cat-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.cat-card-img {
    height: 95px;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
.cat-card-img.has-image { background: linear-gradient(135deg, var(--minefox-primary) 0%, var(--minefox-primary-hover) 100%); }
.cat-card-img-placeholder { text-align: center; color: var(--app-text-muted); }
.cat-card-img-placeholder .fa { font-size: 22px; display: block; margin-bottom: 4px; }
.cat-card-img-placeholder span { font-size: 11px; }
.cat-primary-badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--minefox-primary); color: #fff;
    font-size: 9px; font-weight: 700; border-radius: 4px;
    padding: 2px 6px; letter-spacing: 0.04em;
}
.cat-card-body { padding: 6px 10px 8px; }
.cat-card-name {
    font-size: 13px; font-weight: 600; color: var(--app-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.cat-card-part { font-family: 'Courier New', monospace; font-size: 11px; color: var(--app-text-muted); margin-bottom: 4px; }
.cat-card-barcode {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--app-text-muted); margin-bottom: 7px; overflow: hidden;
}
.cat-card-barcode span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-chip-row { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; min-height: 20px; }
.cat-chip {
    display: inline-flex; align-items: center; gap: 3px;
    border-radius: 4px; padding: 2px 6px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.01em;
}
.cat-chip .fa { font-size: 9px; }
.cat-card-foot { display: flex; align-items: center; gap: 6px; }
.cat-uom-chip {
    font-size: 10px; font-weight: 600;
    border: 1px solid var(--app-border); border-radius: 4px;
    padding: 2px 6px; color: var(--app-text-secondary);
}
.cat-has-equipment-badge { background: var(--mf-accent-light); color: var(--minefox-primary-dark); font-size: 10px; font-weight: 600; border-radius: 10px; padding: 2px 8px; }
.cat-card-actions { margin-left: auto; display: flex; gap: 8px; opacity: 0; transition: opacity 0.15s; }
.cat-item-card:hover .cat-card-actions { opacity: 1; }
.cat-card-action { font-size: 12px; color: var(--app-text-muted); cursor: pointer; transition: color 0.12s; background: none; border: none; padding: 0; }
.cat-card-action:hover { color: var(--minefox-primary); }
.cat-card-action.del:hover { color: var(--app-danger); }

/* ===== LIST VIEW ===== */
.cat-list-wrap { display: none; }
.cat-list-wrap.visible { display: block; }
.cat-list-header {
    display: grid;
    grid-template-columns: 50px 1fr 160px 130px 80px 90px 70px;
    gap: 10px;
    padding: 6px 28px 6px 28px;
    font-size: 11px; font-weight: 600;
    color: var(--app-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 2px solid var(--app-border);
    background: #fff;
    flex-shrink: 0;
}
.cat-list-header.hidden { display: none; }
.cat-list-row {
    display: grid;
    grid-template-columns: 50px 1fr 160px 130px 80px 90px 70px;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border-bottom: 1px solid var(--app-border);
    align-items: center;
    cursor: pointer;
    transition: background 0.12s;
}
.cat-list-row:hover { background: var(--app-surface); }
.cat-list-row:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.cat-list-thumb {
    width: 36px; height: 36px; border-radius: 8px;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: var(--app-text-muted); flex-shrink: 0;
}
.cat-list-thumb.has-img { background: linear-gradient(135deg, var(--minefox-primary), var(--minefox-primary-hover)); color: rgba(255,255,255,0.9); }
.cat-list-name-col { overflow: hidden; }
.cat-list-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-list-part { font-family: monospace; font-size: 11px; color: var(--app-text-muted); }
.cat-list-cats { display: flex; flex-wrap: wrap; gap: 3px; }
.cat-list-barcode { font-size: 12px; color: var(--app-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-list-uom { font-size: 12px; color: var(--app-text-secondary); }
.cat-list-actions { display: flex; gap: 10px; }
.cat-list-action { font-size: 13px; color: var(--app-text-muted); cursor: pointer; background: none; border: none; padding: 0; }
.cat-list-action:hover { color: var(--minefox-primary); }
.cat-list-action.del:hover { color: var(--app-danger); }

/* ===== EMPTY STATE ===== */

/* ===== DRAWER (uses mf-drawer-* from section 26) ===== */

.cat-copy-icon { font-size: 11px; color: var(--app-text-muted); cursor: pointer; margin-left: 6px; transition: color 0.12s; }
.cat-copy-icon:hover { color: var(--minefox-primary); }
.cat-drawer-cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-drawer-chip {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 8px; padding: 5px 12px;
    font-size: 12px; font-weight: 600;
}
.cat-drawer-chip .fa { font-size: 12px; }
.cat-no-cats { font-size: 13px; color: var(--app-text-muted); font-style: italic; }

/* ===== CARD IMAGE ===== */
.cat-card-primary-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== DRAWER IMAGE GRID ===== */
.cat-drawer-section-upload-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; color: var(--app-text-secondary);
    border: 1px solid var(--app-border); border-radius: 6px;
    padding: 3px 10px; cursor: pointer; background: #fff;
    transition: border-color 0.12s, color 0.12s;
}
.cat-drawer-section-upload-btn:hover { border-color: var(--minefox-primary); color: var(--minefox-primary); }
.cat-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cat-img-card {
    border-radius: 10px; border: 2px solid var(--app-border);
    overflow: hidden; position: relative;
}
.cat-img-card.primary { border-color: var(--minefox-primary); }
.cat-img-thumb-src { width: 100%; height: 80px; object-fit: cover; display: block; background: var(--app-surface); }
.cat-img-ribbon {
    position: absolute; top: 0; left: 0; right: 0;
    background: var(--minefox-primary); color: #fff;
    font-size: 9px; font-weight: 700; text-align: center;
    padding: 2px 0; letter-spacing: 0.05em;
}
.cat-img-actions {
    padding: 5px 8px; display: flex; align-items: center;
    justify-content: space-between; font-size: 11px;
}
.cat-img-set-primary { color: var(--minefox-primary); cursor: pointer; font-weight: 500; }
.cat-img-set-primary:hover { text-decoration: underline; }
.cat-img-del { color: var(--app-text-muted); cursor: pointer; }
.cat-img-del:hover { color: var(--app-danger); }
.cat-img-add-card {
    border: 2px dashed var(--app-border); border-radius: 10px;
    height: calc(80px + 28px + 4px); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    font-size: 11px; color: var(--app-text-muted); cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.cat-img-add-card:hover { border-color: var(--minefox-primary); color: var(--minefox-primary); }
.cat-img-add-card .fa-plus::before { color: var(--app-text-muted) !important; }
.cat-img-add-card:hover .fa-plus::before { color: var(--minefox-primary) !important; }
.cat-img-loading { padding: 20px; text-align: center; color: var(--app-text-muted); font-size: 13px; }

/* ===== DRAWER EQUIPMENT (uses mf-linked-row-* from section 26) ===== */


/* ── 27b. Locations ── */

/* ── Left panel width overrides ── */
.cat-page-content { --mf-left-panel-width: 280px; }
.loc-page-content { --mf-left-panel-width: 280px; overflow: hidden; min-height: 0; flex-basis: 0 !important; }
.aud-page-content { overflow: hidden; min-height: 0; flex-basis: 0 !important; }

/* ── Loc wrapper ── */
.loc-wrapper {
    display: flex; flex-direction: column;
    flex: 1; min-height: 0; overflow: hidden;
}

/* ── Location card ── */
.loc-card {
    display: flex; border-radius: 10px;
    border: 1.5px solid var(--app-border); background: #fff;
    margin-bottom: 8px; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    overflow: hidden;
}
.loc-card:hover { border-color: var(--mf-accent); box-shadow: 0 2px 8px rgba(239,70,38,0.1); }
.loc-card.selected { border-color: var(--mf-accent); background: var(--mf-accent-light); box-shadow: 0 2px 8px rgba(239,70,38,0.12); }
.loc-card-bar { width: 4px; flex-shrink: 0; }
.loc-card-bar.niche { background: var(--mf-accent); }
.loc-card-bar.store { background: var(--mf-info); }
.loc-card-body { flex: 1; padding: 9px 11px 8px; min-width: 0; }
.loc-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 6px; }
.loc-card-name { font-size: 13px; font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-type-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.loc-type-badge.niche { background: var(--mf-accent-light); color: var(--mf-accent); }
.loc-type-badge.store { background: var(--mf-info-light); color: var(--mf-info); }
.loc-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.loc-meta-chip { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--app-text-secondary); }
.loc-meta-chip .fa { font-size: 9px; color: var(--app-text-muted); }
.loc-plan-chip {
    display: flex; align-items: center; gap: 4px; font-size: 10px;
    background: var(--app-surface, #f8fafc); border: 1px solid var(--app-border);
    border-radius: 6px; padding: 2px 6px; color: var(--app-text-secondary); margin-bottom: 4px;
}
.loc-plan-chip .fa { font-size: 9px; color: var(--app-text-muted); }
.loc-chainage { font-size: 10px; color: var(--app-text-muted); margin-bottom: 4px; }
.loc-below-min-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--mf-warning); background: rgba(255,193,7,0.12); border-radius: 10px; padding: 2px 7px; }
.loc-below-min-badge i { font-size: 9px; }
.loc-card-bottom { display: flex; align-items: center; justify-content: space-between; }
.loc-last-audit { font-size: 10px; color: var(--app-text-muted); }

/* ── Detail header card: uses mf-detail-card from section 26 ── */
.loc-detail-header-top {
    display: flex; align-items: flex-start;
    justify-content: space-between; margin-bottom: 14px;
}
.loc-detail-name { font-size: 24px; font-weight: 700; color: var(--app-text-primary); line-height: 1.1; margin-bottom: 6px; }
.loc-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-detail-chips-row { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-detail-chip {
    display: flex; align-items: center; gap: 5px;
    background: var(--app-surface, #f8fafc); border: 1px solid var(--app-border);
    border-radius: 8px; padding: 5px 10px; font-size: 12px; color: var(--app-text-secondary);
}
.loc-detail-chip .fa { font-size: 11px; color: var(--mf-accent); }
.loc-edit-btn {
    font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 8px;
    border: 1px solid var(--app-border); background: #fff;
    color: var(--app-text-secondary); cursor: pointer; transition: all 0.15s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.loc-edit-btn:hover { border-color: var(--mf-accent); color: var(--mf-accent); }
.loc-delete-btn {
    font-size: 12px; font-weight: 500; padding: 5px 14px; border-radius: 8px;
    border: 1px solid var(--app-border); background: #fff;
    color: var(--mf-danger); cursor: pointer; transition: all 0.15s; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.loc-delete-btn:hover { border-color: var(--mf-danger); background: var(--mf-danger-light, #fee2e2); }

/* ── Location type combobox ── */
.loc-type-combo { position: relative; }
.loc-type-combo-arrow {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--app-text-muted); pointer-events: none;
}
.loc-type-dropdown {
    display: none;
    position: absolute; top: calc(100% + 2px); left: 0; right: 0;
    background: #fff; border: 1px solid var(--app-border); border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1060;
    max-height: 200px; overflow-y: auto;
}
.loc-type-option {
    padding: 8px 14px; font-size: 13px; cursor: pointer;
    color: var(--app-text-primary); transition: background 0.1s;
}
.loc-type-option:hover { background: var(--app-surface, #f8fafc); }

/* ── Inventory rows ── */
.loc-inventory-list { display: flex; flex-direction: column; }
.loc-inv-row {
    display: grid; grid-template-columns: 4px 1fr auto auto auto;
    align-items: center; gap: 0 14px;
    padding: 10px 12px 10px 0;
    border-bottom: 1px solid var(--app-border);
    background: #fff; transition: background 0.12s;
}
.loc-inv-row:last-child { border-bottom: none; }
.loc-inv-row:hover { background: #f8fafc; }
.loc-inv-bar { align-self: stretch; border-radius: 2px; min-height: 100%; }
.loc-inv-bar.good     { background: var(--mf-success); }
.loc-inv-bar.low      { background: var(--mf-warning); }
.loc-inv-bar.critical { background: var(--mf-danger); }
.loc-inv-info { min-width: 0; padding-left: 10px; }
.loc-inv-name { font-size: 13px; font-weight: 600; color: var(--app-text-primary); }
.loc-inv-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.loc-inv-updated { font-size: 10px; color: var(--app-text-muted); white-space: nowrap; text-align: right; }
.loc-inv-qty-col { text-align: right; min-width: 80px; }
.loc-inv-qty-num { font-size: 20px; font-weight: 700; line-height: 1; display: block; }
.loc-inv-qty-num.good     { color: var(--mf-success); }
.loc-inv-qty-num.low      { color: var(--mf-warning); }
.loc-inv-qty-num.critical { color: var(--mf-danger); }
.loc-inv-uom { font-size: 10px; color: var(--app-text-muted); font-weight: 500; }
.loc-inv-bar-track { height: 3px; background: var(--app-border); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.loc-inv-min-label { font-size: 9px; color: var(--app-text-muted); text-align: right; margin-top: 2px; }
.loc-inv-warning { font-size: 10px; font-weight: 600; color: var(--mf-danger); margin-top: 3px; }
.loc-inv-bar-fill { height: 100%; border-radius: 2px; }
.loc-inv-bar-fill.good     { background: var(--mf-success); }
.loc-inv-bar-fill.low      { background: var(--mf-warning); }
.loc-inv-bar-fill.critical { background: var(--mf-danger); }
.loc-inv-adjust { display: flex; align-items: center; gap: 8px; }
.loc-qty-btn {
    width: 24px; height: 24px; border-radius: 50%;
    border: 1.5px solid var(--app-border); background: #fff;
    color: var(--app-text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; cursor: pointer; transition: all 0.15s; flex-shrink: 0;
}
.loc-qty-btn:hover { border-color: var(--mf-accent); color: var(--mf-accent); background: var(--mf-accent-light); }
.loc-qty-input {
    width: 40px; text-align: center;
    font-size: 12px; font-weight: 600; color: var(--app-text-primary);
    border: 1px solid transparent; border-radius: 4px;
    background: transparent; padding: 2px 0;
    -moz-appearance: textfield;
}
.loc-qty-input::-webkit-outer-spin-button,
.loc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.loc-qty-input:focus { outline: none; border-color: var(--mf-accent); background: #fff; }
.loc-inv-empty { font-size: 13px; color: var(--app-text-muted); padding: 20px 0; text-align: center; }

/* ── Audit timeline: uses mf-timeline-* and mf-count-badge.warning/.success from section 26 ── */
.loc-audit-collapse { cursor: pointer; font-size: 11px; color: var(--app-text-muted); user-select: none; }
.loc-audit-collapse:hover { color: var(--mf-accent); }


/* ── 27c. Item Modal ── */

/* ── Custom modal overlay (standalone / non-ABP usage) ── */
.imod-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1400;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
}
.imod-overlay.open { opacity: 1; pointer-events: all; }
.imod-box {
    background: #fff; border-radius: 14px;
    width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s;
}
.imod-overlay.open .imod-box { transform: scale(1) translateY(0); }
.imod-header {
    padding: 20px 20px 0;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.imod-title { font-size: 16px; font-weight: 700; color: var(--app-text-primary); }
.imod-close {
    width: 28px; height: 28px; border-radius: 7px;
    border: 1px solid var(--app-border); background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 12px; color: var(--app-text-muted); flex-shrink: 0;
}
.imod-close:hover { background: var(--app-surface); }
.imod-body { padding: 0 20px 20px; }
.imod-footer {
    padding: 14px 20px; border-top: 1px solid var(--app-border);
    display: flex; justify-content: flex-end; gap: 8px;
    position: sticky; bottom: 0; background: #fff;
}
.imod-btn-cancel {
    background: #fff; border: 1px solid var(--app-border); border-radius: 8px;
    padding: 8px 16px; font-size: 13px; font-weight: 500;
    color: var(--app-text-secondary); cursor: pointer; transition: background 0.12s;
}
.imod-btn-cancel:hover { background: var(--app-surface); }
.imod-btn-save {
    background: var(--minefox-primary); border: none; border-radius: 8px;
    padding: 8px 20px; font-size: 13px; font-weight: 600;
    color: #fff; cursor: pointer; transition: background 0.12s;
    display: flex; align-items: center; gap: 6px;
}
.imod-btn-save:hover { background: var(--minefox-primary-hover); }
.imod-btn-save:disabled { background: var(--brand-disabled); cursor: not-allowed; }

/* ── Category selection rows (supply-item-specific) ── */
.imod-cat-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px; cursor: pointer;
    transition: background 0.12s; margin-bottom: 2px;
}
.imod-cat-row:hover { background: var(--app-surface); }
.imod-cat-row input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--minefox-primary); cursor: pointer; }
.imod-cat-icon { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.imod-cat-name { font-size: 13px; font-weight: 500; flex: 1; }


/* ── 27d. Audits ── */

/* ── Layout (reuses loc-wrapper / mf-left-panel / loc-right-panel) ── */
.aud-wrapper { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── Audit timeline list entries ── */
.aud-entry {
    display: flex; border-radius: 10px;
    border: 1.5px solid var(--app-border);
    background: #fff; margin-bottom: 8px;
    cursor: pointer; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.aud-entry:hover { border-color: var(--minefox-primary); box-shadow: 0 2px 8px rgba(239,70,38,0.1); background: #fffaf8; }
.aud-entry.selected { border-color: var(--minefox-primary); background: #fff5f2; box-shadow: 0 2px 8px rgba(239,70,38,0.12); }
.aud-entry-bar { width: 4px; flex-shrink: 0; }
.aud-entry-bar.no-variance { background: var(--mf-success); }
.aud-entry-bar.has-variance { background: var(--mf-warning); }
.aud-entry-body { flex: 1; padding: 10px 12px; min-width: 0; }
.aud-entry-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; gap: 6px; }
.aud-entry-location { font-size: 13px; font-weight: 600; color: var(--app-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-entry-datetime { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--app-text-secondary); margin-bottom: 5px; }
.aud-entry-datetime .fa { font-size: 10px; color: var(--app-text-muted); }
.aud-entry-auditor { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.aud-auditor-name { font-size: 11px; color: var(--app-text-secondary); font-weight: 500; }
.aud-entry-stats { display: flex; align-items: center; gap: 8px; }
.aud-items-count { font-size: 11px; color: var(--app-text-muted); }

/* ── Variance pill ── */
.aud-variance-pill { font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.aud-variance-pill.has { background: var(--mf-warning-light); color: var(--mf-warning); }
.aud-variance-pill.none { background: var(--mf-success-light); color: var(--mf-success); }

/* ── Detail header card (reuses mf-detail-card base) ── */
.aud-detail-name { font-size: 22px; font-weight: 700; color: var(--app-text-primary); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.aud-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 12px; }
.aud-info-row { display: flex; align-items: center; gap: 8px; }
.aud-info-label { font-size: 11px; color: var(--app-text-muted); font-weight: 500; min-width: 90px; }
.aud-info-value { font-size: 12px; color: var(--app-text-primary); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.aud-info-value.variance { color: var(--mf-warning); font-weight: 700; font-size: 13px; }
.aud-info-value.no-variance { color: var(--mf-success); }
.aud-notes-card { border-left: 3px solid var(--mf-warning); background: var(--mf-warning-light); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12px; color: #92400e; line-height: 1.5; margin-top: 12px; }
.aud-notes-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mf-warning); margin-bottom: 4px; }

/* ── Variance banner ── */
.aud-variance-banner { background: var(--mf-warning-light); border: 1px solid #fcd34d; border-radius: 10px; padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 12px; color: #92400e; font-weight: 500; margin-bottom: 14px; }
.aud-variance-banner .fa { color: var(--mf-warning); font-size: 14px; }

/* ── Audit item cards ── */
.aud-item-card { border: 1.5px solid var(--app-border); border-radius: 10px; overflow: hidden; margin-bottom: 6px; transition: box-shadow 0.15s; }
.aud-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.aud-item-card.no-variance { border-left: 4px solid var(--mf-success); }
.aud-item-card.has-variance { border-left: 4px solid var(--mf-danger); }
.aud-item-inner { padding: 8px 12px; }
.aud-item-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; gap: 8px; }
.aud-item-name { font-size: 12px; font-weight: 600; color: var(--app-text-primary); }
.aud-item-part { font-size: 10px; color: var(--app-text-muted); font-family: 'Courier New', monospace; white-space: nowrap; }

/* ── Comparison bars ── */
.aud-comparison-bars { margin-bottom: 5px; }
.aud-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.aud-bar-label { font-size: 10px; font-weight: 600; width: 52px; flex-shrink: 0; text-align: right; }
.aud-bar-label.prev { color: var(--app-text-muted); }
.aud-bar-label.match { color: var(--mf-success); }
.aud-bar-label.less  { color: var(--mf-danger); }
.aud-bar-label.more  { color: var(--minefox-primary); }
.aud-bar-track { flex: 1; height: 6px; background: var(--app-border); border-radius: 3px; overflow: hidden; }
.aud-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.aud-bar-fill.prev  { background: #cbd5e1; }
.aud-bar-fill.match { background: var(--mf-success); }
.aud-bar-fill.less  { background: var(--mf-danger); }
.aud-bar-fill.more  { background: var(--minefox-primary); }
.aud-bar-qty { font-size: 11px; font-weight: 600; min-width: 28px; text-align: right; }
.aud-bar-qty.prev  { color: var(--app-text-muted); }
.aud-bar-qty.match { color: var(--mf-success); }
.aud-bar-qty.less  { color: var(--mf-danger); }
.aud-bar-qty.more  { color: var(--minefox-primary); }

/* ── Variance result row ── */
.aud-variance-result { display: flex; align-items: center; gap: 6px; padding-top: 4px; border-top: 1px solid var(--app-border); font-size: 11px; }
.aud-result-check { display: flex; align-items: center; gap: 5px; color: var(--mf-success); font-weight: 600; }
.aud-result-check .fa { font-size: 14px; }
.aud-deficit-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--mf-danger-light); color: var(--mf-danger); }
.aud-deficit-label { font-size: 12px; font-weight: 500; color: var(--mf-danger); }
.aud-surplus-pill { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: #fff5f2; color: var(--minefox-primary); }
.aud-surplus-label { font-size: 12px; font-weight: 500; color: var(--minefox-primary); }

/* ── Inventory impact cards ── */
.aud-impact-row { display: flex; gap: 12px; flex-wrap: wrap; }
.aud-impact-card { flex: 0 0 auto; background: var(--app-bg); border: 1.5px solid var(--app-border); border-radius: 10px; padding: 12px 16px; min-width: 160px; }
.aud-impact-name { font-size: 12px; font-weight: 600; color: var(--app-text-primary); margin-bottom: 6px; }
.aud-impact-change { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.aud-impact-prev { color: var(--app-text-secondary); }
.aud-impact-part { font-size: 10px; color: var(--app-text-muted); font-family: 'Courier New', monospace; margin-top: 4px; }

/* ── Auditor avatar (reuses mf-avatar concept) ── */
.aud-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--minefox-primary); color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Date range filter row ── */
.aud-date-row { display: flex; gap: 6px; margin-bottom: 8px; }
.aud-date-input { flex: 1; min-width: 0; border: 1px solid var(--app-border); border-radius: 8px; padding: 4px 4px; font-size: 11px; color: var(--app-text-primary); background: var(--app-bg); outline: none; transition: border-color 0.15s; }
.aud-date-input:focus { border-color: var(--minefox-primary); }

/* ── New Audit Modal – section header ── */
.aud-setup-row { display: flex; gap: 12px; }
.aud-setup-row .mf-form-group { flex: 1; margin-bottom: 0; }
.aud-section-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; }
.aud-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--app-text-secondary); white-space: nowrap; }
.aud-section-line { flex: 1; height: 1px; background: var(--app-border); }

/* ── Items placeholder ── */
.aud-items-placeholder { text-align: center; padding: 28px 0 20px; color: var(--app-text-muted); border: 1.5px dashed var(--app-border); border-radius: 10px; margin-bottom: 4px; }
.aud-items-placeholder .fa { font-size: 26px; margin-bottom: 8px; display: block; }
.aud-items-placeholder p { font-size: 12px; margin: 0; }

/* ── Items scrollable list ── */
.aud-items-list { max-height: 300px; overflow-y: auto; margin-bottom: 10px; }

/* ── Audit count row ── */
.aud-count-row { display: flex; align-items: center; border: 1.5px solid var(--app-border); border-radius: 10px; overflow: hidden; margin-bottom: 7px; background: #fff; transition: border-color 0.15s; }
.aud-count-row:hover { border-color: #cbd5e1; }
.aud-count-row.has-variance { border-color: var(--mf-danger); }
.aud-count-bar { width: 4px; align-self: stretch; flex-shrink: 0; transition: background 0.2s; }
.aud-count-info { flex: 1; padding: 10px 12px; min-width: 0; }
.aud-count-name { font-size: 12px; font-weight: 600; color: var(--app-text-primary); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-count-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.aud-count-prev { text-align: center; padding: 0 14px; flex-shrink: 0; border-left: 1px solid var(--app-border); }
.aud-count-prev-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--app-text-muted); margin-bottom: 2px; }
.aud-count-prev-qty { font-size: 15px; font-weight: 700; color: var(--app-text-secondary); line-height: 1; }

/* ── Stepper ── */
.aud-count-stepper { display: flex; align-items: center; gap: 5px; padding: 0 12px; flex-shrink: 0; border-left: 1px solid var(--app-border); }
.aud-step-btn { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--app-border); background: #fff; color: var(--app-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; transition: all 0.12s; }
.aud-step-btn:hover { border-color: var(--minefox-primary); color: var(--minefox-primary); background: #fff5f2; }
.aud-count-input { width: 54px; text-align: center; border: 1.5px solid var(--app-border); border-radius: 8px; padding: 4px; font-size: 16px; font-weight: 700; color: var(--app-text-primary); outline: none; transition: border-color 0.15s; -moz-appearance: textfield; }
.aud-count-input:focus { border-color: var(--minefox-primary); }
.aud-count-input::-webkit-outer-spin-button, .aud-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Variance pill ── */
.aud-variance-display { padding: 0 12px; flex-shrink: 0; min-width: 110px; text-align: center; border-left: 1px solid var(--app-border); }
.aud-var-pill { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; display: inline-block; }
.aud-var-pill.match   { background: var(--mf-success-light); color: var(--mf-success); }
.aud-var-pill.deficit { background: var(--mf-danger-light);  color: var(--mf-danger);  }
.aud-var-pill.surplus { background: #fff5f2; color: var(--minefox-primary); }

/* ── Summary strip ── */
.aud-summary-strip { display: flex; align-items: center; gap: 8px; background: var(--app-surface, #f8fafc); border: 1px solid var(--app-border); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 500; color: var(--app-text-secondary); }
.aud-summary-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--app-border); flex-shrink: 0; }

/* ── Modal body scroll ── */
.audit-modal-body { max-height: calc(100vh - 200px); overflow-y: auto; padding: 20px; }

/* ── Add Item during audit ── */
.aud-no-inv-msg { padding: 16px 12px; font-size: 12px; color: var(--app-text-muted); text-align: center; }
.aud-add-item-picker { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.aud-add-item-footer { padding: 4px 0 8px; }
.aud-count-row-new { border-color: var(--mf-accent-light, #fde8e2); }
.aud-new-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 6px; background: var(--mf-accent-light, #fde8e2); color: var(--mf-accent); text-transform: uppercase; letter-spacing: 0.04em; }
.aud-remove-new-btn { margin-left: 4px; margin-right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--app-border); background: #fff; color: var(--app-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; transition: all 0.12s; }
.aud-remove-new-btn:hover { border-color: var(--mf-danger); color: var(--mf-danger); }

/* ── 27e. Add Inventory Items Modal ── */

/* Widen the dialog for the split-panel layout */
#AddInventoryItemsModalArea .modal-dialog { max-width: 720px; }

/* Footer hint text */
.add-inv-footer-hint { font-size: 11px; color: var(--app-text-muted); }
.add-inv-footer-hint strong { color: var(--app-text-secondary); }