/* HARDWARE STORE UNIFIED THEME - COMPLETE SYSTEM */

 /* === CSS VARIABLES === */
 :root {
     /* Primary Colors */
     --primary: #007bff;
     --success: #28a745;
     --info: #17a2b8;
     --warning: #ffc107;
     --danger: #dc3545;
     --secondary: #6c757d;

     /* Background Colors */
     --bg-primary: #ffffff;
     --bg-secondary: #f8f9fa;
     --bg-light: #ffffff;
     --bg-dark: #343a40;

     /* Text Colors */
     --text-primary: #212529;
     --text-secondary: #6c757d;
     --text-muted: #6c757d;
     --text-white: #ffffff;

     /* Card System */
     --card-bg: #ffffff;
     --card-border: #dee2e6;
     --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
     --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

     /* Border Radius */
     --border-radius: 0.375rem;
     --border-radius-sm: 0.25rem;
     --border-radius-lg: 0.5rem;

     /* Transitions */
     --transition: all 0.15s ease-in-out;
     --transition-fast: all 0.1s ease-in-out;
     --theme-transition: all 0.15s ease-in-out;
 }

 [data-theme="dark"] {
     --bg-primary: #121212;
     --bg-secondary: #1e1e1e;
     --bg-light: #2d2d2d;
     --bg-dark: #000000;
     --text-primary: #ffffff;
     --text-secondary: #adb5bd;
     --text-muted: #868e96;
     --card-bg: #1e1e1e;
     --card-border: #495057;
     --card-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
     --card-shadow-hover: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
 }

 /* === RESET & BASE === */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--text-primary);
     background-color: var(--bg-primary);
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: transparent;
     transition: var(--transition);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     font-weight: 500;
     line-height: 1.2;
     color: var(--text-primary);
 }

 p {
     margin-top: 0;
     margin-bottom: 1rem;
 }

 a {
     color: var(--primary);
     text-decoration: none;
     transition: var(--transition);
 }

 a:hover {
     color: #0056b3;
     text-decoration: underline;
 }

 img {
     vertical-align: middle;
     border-style: none;
 }

 /* Prevent layout jumping for interactive elements */
 .btn:hover,
 .card:hover,
 .kpi-card:hover,
 .hardware-kpi:hover,
 .theme-card:hover,
 .content-section:hover,
 .list-group-item:hover,
 .dropdown-item:hover,
 .nav-link:hover {
     transform: none !important;
 }

 /* === GRID SYSTEM === */
 .container-fluid {
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
 }

 .row {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
 }

 /* Products table improvements: sticky header and scrollable body */
 .table-container {
     max-height: 520px;
     /* keeps table within card */
     overflow: auto;
 }

 /* Products table dropdown and header control fixes
   - Ensure dropdown menus and header buttons follow unified theme variables
   - Minimal additions only; keeps dark mode compatibility */
 .card-theme .dropdown-menu,
 .table .dropdown-menu,
 .card-header .dropdown-menu,
 .kpi-card .dropdown-menu {
     background: var(--card-bg) !important;
     color: var(--text-primary) !important;
     border: 1px solid var(--card-border) !important;
     box-shadow: var(--card-shadow) !important;
 }

 .card-header .btn,
 .card-header .dropdown-toggle,
 .card-header .btn-outline-secondary,
 .card-header .btn-outline-primary {
     color: var(--text-primary) !important;
     background: transparent !important;
     border-color: rgba(255, 255, 255, 0.06) !important;
 }

 /* Ensure dropdown items inherit readable text color */
 .card-theme .dropdown-menu .dropdown-item,
 .table .dropdown-menu .dropdown-item {
     color: var(--text-primary) !important;
 }

 /* Keep dropdowns above other elements */
 .card-theme .dropdown-menu,
 .table .dropdown-menu {
     z-index: 10550 !important;
 }

 /* Fix dropdown jumping in products table - eliminate all movement */
 table#productsTable .btn-group.dropdown {
     position: relative;
     display: inline-flex;
     white-space: nowrap;
 }

 /* Completely disable hover effects that cause jumping */
 table#productsTable .btn-group.dropdown .btn {
     float: none;
     position: relative;
     z-index: auto !important;
     margin-left: 0 !important;
     border-radius: var(--border-radius-sm) !important;
     margin-right: 1px;
 }

 table#productsTable .btn-group.dropdown .btn:hover {
     z-index: auto !important;
     transform: none !important;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
     margin-left: 0 !important;
 }

 /* Override Bootstrap btn-group negative margins for products table */
 table#productsTable .btn-group.dropdown .btn:not(:first-child) {
     margin-left: 0 !important;
     border-top-left-radius: var(--border-radius-sm) !important;
     border-bottom-left-radius: var(--border-radius-sm) !important;
 }

 table#productsTable .btn-group.dropdown .btn:not(:last-child) {
     border-top-right-radius: var(--border-radius-sm) !important;
     border-bottom-right-radius: var(--border-radius-sm) !important;
 }

 /* Stable dropdown menu positioning - prevent overlap with next row */
 table#productsTable .dropdown-menu {
     position: absolute !important;
     top: 100% !important;
     right: 0 !important;
     left: auto !important;
     z-index: 1050 !important;
     min-width: 160px;
     margin: 2px 0 0 !important;
     border: 1px solid var(--card-border);
     background-color: var(--card-bg);
     transform: none !important;
     will-change: auto !important;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175) !important;
 }

 /* Ensure dropdown shows above table content and doesn't interfere with other buttons */
 table#productsTable .dropdown.show .dropdown-menu {
     z-index: 1060 !important;
 }

 /* Add proper spacing to prevent overlap with next row */
 table#productsTable tbody tr {
     position: relative;
 }

 table#productsTable tbody tr:hover {
     z-index: 10;
 }

 /* When dropdown is open, ensure the entire row has higher z-index */
 table#productsTable tbody tr:has(.dropdown.show) {
     z-index: 20;
 }

 /* Fallback for browsers that don't support :has() */
 table#productsTable .dropdown.show {
     z-index: 20;
 }

 /* Ensure table rows have proper spacing to accommodate dropdowns */
 table#productsTable tbody tr td {
     padding: 0.45rem 0.5rem;
     vertical-align: middle;
 }

 /* Add a small gap between rows to prevent dropdown overlap */
 table#productsTable tbody tr+tr td {
     border-top: 2px solid transparent;
 }

 /* Prevent table cell from affecting dropdown */
 table#productsTable td:last-child {
     overflow: visible !important;
     position: relative;
     white-space: nowrap;
 }

 /* Stable table responsive behavior */
 .table-responsive {
     overflow-x: auto;
     overflow-y: visible;
 }

 /* Remove any transforms or transitions that cause jumping */
 table#productsTable .dropdown-toggle {
     transform: none !important;
     transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
 }

 table#productsTable .dropdown-toggle::after {
     vertical-align: middle;
     margin-left: 0.5em;
 }

 /* Ensure dropdown items have proper styling */
 table#productsTable .dropdown-item {
     color: var(--text-primary);
     padding: 0.5rem 1rem;
     transition: background-color 0.15s ease-in-out;
 }

 table#productsTable .dropdown-item:hover {
     background-color: var(--bg-secondary);
     color: var(--text-primary);
 }

 /* Global Table Dark Theme Styling */
 .table {
     background-color: var(--card-bg) !important;
     color: var(--text-primary) !important;
 }

 .table thead th {
     background-color: var(--card-header-bg) !important;
     color: var(--text-primary) !important;
     border-bottom-color: var(--card-border) !important;
 }

 .table tbody tr {
     background-color: var(--card-bg) !important;
     color: var(--text-primary) !important;
 }

 .table tbody tr:hover {
     background-color: var(--bg-secondary) !important;
 }

 .table td,
 .table th {
     border-color: var(--card-border) !important;
     color: var(--text-primary) !important;
 }

 /* DataTables Dark Theme Styling */
 .dataTables_wrapper {
     color: var(--text-primary) !important;
 }

 .dataTables_length select,
 .dataTables_filter input {
     background-color: var(--card-bg) !important;
     color: var(--text-primary) !important;
     border: 1px solid var(--card-border) !important;
 }

 .dataTables_info,
 .dataTables_length label,
 .dataTables_filter label {
     color: var(--text-primary) !important;
 }

 .dataTables_paginate .paginate_button {
     color: var(--text-primary) !important;
     background-color: var(--card-bg) !important;
     border: 1px solid var(--card-border) !important;
 }

 .dataTables_paginate .paginate_button:hover {
     background-color: var(--bg-secondary) !important;
     color: var(--text-primary) !important;
 }

 .dataTables_paginate .paginate_button.current {
     background-color: var(--primary) !important;
     color: white !important;
 }

 /* KPI Card Enhancements for borders */
 .border-left-primary {
     border-left: 0.25rem solid var(--primary) !important;
 }

 .border-left-success {
     border-left: 0.25rem solid var(--success) !important;
 }

 .border-left-warning {
     border-left: 0.25rem solid var(--warning) !important;
 }

 .border-left-info {
     border-left: 0.25rem solid var(--info) !important;
 }

 /* Text color utilities for dark theme */
 .text-gray-800 {
     color: var(--text-primary) !important;
 }

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

 /* Stronger rules for header controls (Export / Filter) to avoid white backgrounds */
 .card-theme .card-header .btn,
 .card-theme .card-header .dropdown-toggle,
 .card-theme .card-header .btn-outline-secondary,
 .card-theme .card-header .btn-outline-primary,
 .card-header .btn,
 .card-header .dropdown-toggle {
     background-color: transparent !important;
     color: var(--text-primary) !important;
     border-color: rgba(255, 255, 255, 0.06) !important;
 }

 .card-theme .card-header .btn-outline-secondary:hover,
 .card-theme .card-header .btn-outline-primary:hover,
 .card-header .btn-outline-secondary:hover,
 .card-header .btn-outline-primary:hover {
     background-color: rgba(255, 255, 255, 0.03) !important;
 }

 /* Ensure dropdown toggle icons and text are visible in dark theme */
 .card-theme .card-header .dropdown-toggle .fas,
 .card-header .dropdown-toggle .fas {
     color: var(--text-primary) !important;
 }

 /* Strongest overrides: ensure header dropdowns and export/filter controls NEVER show a white background */
 .card-theme .card-header .dropdown-menu,
 .card-theme .card-header .dropdown-toggle,
 .card-header .dropdown-menu,
 .card-header .dropdown-toggle {
     background-color: var(--card-bg) !important;
     color: var(--text-primary) !important;
 }

 .card-theme .card-header .dropdown-menu .dropdown-item,
 .card-header .dropdown-menu .dropdown-item {
     color: var(--text-primary) !important;
     background: transparent !important;
 }

 /* Input group in header should not force white backgrounds */
 .card-header .input-group .form-control {
     background: transparent !important;
     color: var(--text-primary) !important;
     border-color: rgba(255, 255, 255, 0.04) !important;
 }

 .table-container table thead th {
     position: sticky;
     top: 0;
     background: var(--card-bg);
     z-index: 5;
 }

 /* Compact column rules for the Products management table
   Reduce horizontal footprint of Stock / Reorder / Price / Margin / Suppliers / Unit columns
   Use nth-child selectors to avoid touching other tables. Keep text truncated with ellipsis. */
 table#productsTable th,
 table#productsTable td {
     padding: 0.45rem 0.5rem;
     /* slightly tighter cells */
     vertical-align: middle;
 }

 table#productsTable td:nth-child(7),
 table#productsTable th:nth-child(7),
 table#productsTable td:nth-child(8),
 table#productsTable th:nth-child(8),
 table#productsTable td:nth-child(9),
 table#productsTable th:nth-child(9),
 table#productsTable td:nth-child(10),
 table#productsTable th:nth-child(10),
 table#productsTable td:nth-child(11),
 table#productsTable th:nth-child(11),
 table#productsTable td:nth-child(12),
 table#productsTable th:nth-child(12) {
     min-width: 60px;
     max-width: 110px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 /* Make badges inside the products table more compact */
 table#productsTable .badge {
     padding: 0.18rem 0.32rem;
     font-size: 0.78rem;
 }

 /* Smart Supplier Recommendation Badges */
 .smart-recommendation-badge {
     background: linear-gradient(135deg, var(--success), #20c997);
     color: var(--text-white);
     font-size: 0.7rem;
     padding: 0.15rem 0.4rem;
     border-radius: var(--border-radius-sm);
     margin-left: 0.25rem;
     display: inline-block;
     font-weight: 500;
     box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
     transition: var(--transition-fast);
 }

 .smart-recommendation-badge:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
 }

 .smart-recommendation-badge.optimal {
     background: linear-gradient(135deg, var(--success), #28a745);
 }

 .smart-recommendation-badge.good {
     background: linear-gradient(135deg, var(--info), #17a2b8);
 }

 .smart-recommendation-badge.acceptable {
     background: linear-gradient(135deg, var(--warning), #ffc107);
     color: var(--text-primary);
 }

 /* Supplier select with recommendations */
 .supplier-select-enhanced {
     position: relative;
 }

 .supplier-select-enhanced select option.recommended {
     background-color: rgba(40, 167, 69, 0.1);
     font-weight: 600;
 }

 .supplier-select-enhanced select option.recommended::before {
     content: "⭐ ";
 }

 /* Smart recommendation reasoning tooltip */
 .recommendation-reason {
     font-size: 0.75rem;
     color: var(--text-muted);
     margin-top: 0.25rem;
     padding: 0.25rem 0.5rem;
     background-color: var(--bg-secondary);
     border-radius: var(--border-radius-sm);
     border-left: 3px solid var(--success);
     display: none;
 }

 .recommendation-reason.show {
     display: block;
     animation: fadeInUp 0.3s ease-out;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Ensure code elements like SKU don't force extra width */
 table#productsTable code {
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: 100px;
 }

 /* Compact sizing for the Linked Suppliers table (product view)
   Targets only the table populated into #linkedSuppliersTbody so we
   minimize global impact. Keeps theme variables for dark/light modes. */
 #linkedSuppliersTbody td,
 #linkedSuppliersTbody th {
     font-size: 0.875rem;
     /* slightly smaller than base */
     padding: 0.4rem 0.6rem;
     /* tighter cell padding */
     vertical-align: middle;
     color: var(--text-primary);
 }

 #linkedSuppliersTbody .cell-actions {
     white-space: nowrap;
 }

 #linkedSuppliersTbody .cell-actions .btn {
     padding: 0.25rem 0.45rem;
     font-size: 0.78rem;
     line-height: 1;
 }

 /* Compact supplier form styles (moved into unified CSS per project rules) */
 .supplier-form-compact {
     max-width: 680px;
     margin: 0 auto;
 }

 /* User avatar helper - small, inline avatar used in user lists and activity */
 .user-avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     color: var(--text-white);
     font-weight: 600;
     margin-right: var(--spacing-sm, 0.5rem);
     flex: 0 0 auto;
     text-transform: uppercase;
 }

 /* Hover / focus / active states for avatar to improve affordance and accessibility */
 .user-avatar {
     transition: var(--theme-transition);
 }

 .user-avatar:hover {
     transform: translateY(-3px);
     box-shadow: var(--card-shadow-hover);
     cursor: pointer;
 }

 .user-avatar:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.12), var(--card-shadow-hover);
 }

 .user-avatar:active {
     transform: translateY(0) scale(0.98);
 }

 .supplier-form-compact .card {
     padding: .1rem;
 }

 .supplier-form-compact h2 {
     font-size: 1rem;
     margin-bottom: .08rem
 }

 .supplier-form-compact p {
     margin-bottom: .2rem;
     color: var(--text-secondary);
     font-size: .85rem
 }

 .supplier-form-compact .form-group {
     margin-bottom: .08rem
 }

 .supplier-form-compact label {
     font-size: .82rem;
     margin-bottom: .04rem
 }

 .supplier-form-compact .form-control {
     padding: .14rem .28rem;
     font-size: .84rem
 }

 .supplier-form-compact textarea.form-control {
     min-height: 36px
 }

 .supplier-form-compact .form-text {
     font-size: .72rem
 }

 .supplier-form-compact .btn-sm {
     padding: .18rem .32rem;
     font-size: .78rem
 }

 .supplier-form-compact .supplier-form {
     margin-top: 0
 }

 @media (min-width: 768px) {
     .supplier-form-compact .form-row .col-md-6 .form-control {
         max-width: 100%;
     }
 }

 #linkedSuppliersTbody .cell-actions .btn .fas,
 #linkedSuppliersTbody .cell-actions .btn .fa {
     font-size: 0.85rem;
 }

 #linkedSuppliersTbody input.form-control-sm {
     padding: 0.25rem 0.35rem;
 }

 /* Minimal neutral brand title to restore original look */
 .sidebar-heading .brand-title {
     font-weight: 600;
     font-size: 1.05rem;
     letter-spacing: 0.5px;
     color: var(--text-primary);
     display: inline-block;
 }

 /* Center sidebar heading and stack logo above text */
 .theme-sidebar .sidebar-heading {
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     padding: 16px 12px;
     gap: 6px;
     text-align: center;
     min-height: 80px;
 }

 /* Alternative animated gradient effect for brand text (subtle, slow) */
 .sidebar-heading .brand-title {
     background-image: linear-gradient(90deg, var(--primary), var(--info), var(--success));
     background-size: 200% 100%;
     background-position: 0% 50%;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .sidebar-heading .brand-title:hover {
     background-position: 100% 50%;
     transform: translateY(-2px) scale(1.03);
 }

 /* Inner glow accent that works in light and dark themes */
 .sidebar-heading .brand-title::after {
     content: '';
     display: inline-block;
     width: 100%;
     height: 6px;
     margin-left: 8px;
     border-radius: 4px;
     opacity: 0.18;
     vertical-align: middle;
     background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
 }

 /* Make sure image and title remain visually grouped on small screens */
 @media (max-width: 576px) {
     .theme-sidebar .sidebar-heading {
         padding-left: 8px;
         padding-right: 8px;
         min-height: 64px;
     }

     .sidebar-heading .brand-title {
         font-size: 1.12rem;
         padding: 2px 4px;
     }

     .sidebar-heading img {
         max-height: 40px;
         margin-bottom: 6px;
     }
 }

 /* Stronger glass/logotype effect - layered bevel + shine
   Appended as an override block so it remains minimal and theme-safe */
 /* Neutral brand title centered and larger */
 .theme-sidebar .sidebar-heading .brand-title {
     font-weight: 700;
     font-size: 1.5rem;
     letter-spacing: 0.4px;
     color: var(--text-primary);
     display: block;
     line-height: 1.05;
 }

 /* Inner bevel and glass fill using pseudo-element behind the text */
 /* Remove decorative pseudo-elements previously used for glass effect */
 .theme-sidebar .sidebar-heading .brand-title::before,
 .theme-sidebar .sidebar-heading .brand-title::after {
     display: none !important;
 }

 /* Top highlight stripe sweep mimicking the reference image */
 /* Remove custom branding effects; restore minimal default appearance for brand title */
 .theme-sidebar .sidebar-heading .brand-title {
     font-weight: 600;
     font-size: 1.05rem;
     color: var(--text-primary);
     display: inline-block;
 }

 /* ------------------------------------------------------------------ */

 #linkedSuppliersTbody .cell-purchase-price {
     min-width: 110px;
     text-align: right;
     white-space: nowrap;
 }

 @media (max-width: 576px) {

     #linkedSuppliersTbody td,
     #linkedSuppliersTbody th {
         font-size: 0.82rem;
         padding: 0.3rem 0.45rem;
     }

     #linkedSuppliersTbody .cell-actions .btn {
         padding: 0.2rem 0.35rem;
         font-size: 0.72rem;
     }

     /* Users table specific styles (minimal additions) */
     .card-theme table#usersTable th,
     .card-theme table#usersTable td {
         vertical-align: middle;
         padding: 0.6rem 0.75rem;
         color: var(--text-primary);
     }

     .card-theme #usersTable .badge {
         font-size: 0.78rem;
         padding: 0.25rem 0.45rem;
     }

     /* Ensure users table follows card background and dark theme variables */
     .card-theme table#usersTable {
         background: transparent;
         /* allow card background to show */
     }

     .card-theme table#usersTable thead th {
         background: var(--card-bg);
         color: var(--text-primary);
         border-color: var(--card-border);
     }

     .card-theme table#usersTable tbody td {
         background: var(--card-bg);
         color: var(--text-primary);
         border-color: var(--card-border);
     }

     .card-theme table#usersTable tbody tr:nth-child(odd) td {
         background: rgba(0, 0, 0, 0.02);
         /* subtle row stripe (respects dark mode when card-bg differs) */
     }

     .category-selector .btn {
         padding: 0.28rem 0.45rem;
     }

     /* Toggle status button and active category colors should use theme variables */
     .toggle-status-btn.btn-warning {
         color: var(--text-white);
         background-color: var(--warning);
         border-color: var(--warning);
     }

     .toggle-status-btn.btn-outline-success {
         color: var(--success);
         border-color: var(--success);
     }

     /* Ensure header filter badges match the button color */
     .btn-group .badge.badge-primary {
         background-color: var(--primary);
         color: var(--text-white);
     }

     .btn-group .badge.badge-success {
         background-color: var(--success);
         color: var(--text-white);
     }

     .btn-group .badge.badge-warning {
         background-color: var(--warning);
         color: var(--text-white);
     }
 }

 .col-1,
 .col-2,
 .col-3,
 .col-4,
 .col-5,
 .col-6,
 .col-7,
 .col-8,
 .col-9,
 .col-10,
 .col-11,
 .col-12,
 .col-sm-1,
 .col-sm-2,
 .col-sm-3,
 .col-sm-4,
 .col-sm-5,
 .col-sm-6,
 .col-sm-7,
 .col-sm-8,
 .col-sm-9,
 .col-sm-10,
 .col-sm-11,
 .col-sm-12,
 .col-md-1,
 .col-md-2,
 .col-md-3,
 .col-md-4,
 .col-md-5,
 .col-md-6,
 .col-md-7,
 .col-md-8,
 .col-md-9,
 .col-md-10,
 .col-md-11,
 .col-md-12,
 .col-lg-1,
 .col-lg-2,
 .col-lg-3,
 .col-lg-4,
 .col-lg-5,
 .col-lg-6,
 .col-lg-7,
 .col-lg-8,
 .col-lg-9,
 .col-lg-10,
 .col-lg-11,
 .col-lg-12,
 .col-xl-1,
 .col-xl-2,
 .col-xl-3,
 .col-xl-4,
 .col-xl-5,
 .col-xl-6,
 .col-xl-7,
 .col-xl-8,
 .col-xl-9,
 .col-xl-10,
 .col-xl-11,
 .col-xl-12 {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
 }

 .col-1 {
     flex: 0 0 8.333333%;
     max-width: 8.333333%;
 }

 .col-2 {
     flex: 0 0 16.666667%;
     max-width: 16.666667%;
 }

 /* === KPI CARD STYLES - shared across the app === */
 /* Added: Aug 16, 2025 - kept minimal and namespaced */
 .kpi-card {
     border-radius: var(--border-radius-lg);
     overflow: hidden;
     position: relative;
     color: inherit;
     /* inherit from gradient color rules for better control */
 }

 .kpi-card .kpi-body {
     padding: 1.1rem 1.25rem;
     color: inherit;
 }

 .kpi-count {
     font-size: 1.65rem;
     font-weight: 700;
     line-height: 1;
     color: inherit;
 }

 .kpi-value {
     font-size: 0.95rem;
     opacity: 0.95;
     color: inherit;
 }

 .kpi-icon {
     opacity: 0.12;
     font-size: 4.25rem;
     position: absolute;
     right: 12px;
     bottom: 6px;
     color: inherit;
 }

 /* Ensure appropriate readable text color for each gradient */
 .kpi-gradient-warning {
     background: linear-gradient(135deg, #ffd966 0, #ffc107 100%);
     color: rgba(0, 0, 0, 0.85);
 }

 .kpi-gradient-info {
     background: linear-gradient(135deg, #85d7ff 0, #17a2b8 100%);
     color: #fff;
 }

 .kpi-gradient-success {
     background: linear-gradient(135deg, #b6f6c9 0, #28a745 100%);
     color: rgba(0, 0, 0, 0.85);
 }

 .kpi-gradient-primary {
     background: linear-gradient(135deg, #b6d9ff 0, #007bff 100%);
     color: #fff;
 }

 .kpi-gradient-danger {
     background: linear-gradient(135deg, #ffb3b3 0, #dc3545 100%);
     color: #fff;
 }

 .kpi-small-spark {
     height: 28px;
     width: 100%;
     background: rgba(255, 255, 255, 0.06);
     border-radius: 4px;
     margin-top: 6px;
 }

 /* ------------------------------------------------------------------ */
 /* Legacy KPI compatibility
   Many views still use the older `.kpi-card-header`, `.kpi-card-body`,
   `.kpi-card-value` etc. Provide lightweight shims so they inherit the
   unified KPI look without requiring mass-template edits. */
 /* ------------------------------------------------------------------ */
 .kpi-card .kpi-card-header {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 1rem;
     background: transparent;
     color: inherit;
 }

 .kpi-card .kpi-card-icon {
     font-size: 1.6rem;
     opacity: 0.12;
     color: inherit;
 }

 .kpi-card .kpi-card-title h5,
 .kpi-card .kpi-card-title h6 {
     margin: 0;
     color: inherit;
 }

 .kpi-card .kpi-card-body {
     padding: 0.9rem 1rem;
     background: transparent;
     color: inherit;
 }

 .kpi-card .kpi-card-value {
     font-size: 1.65rem;
     font-weight: 700;
     color: inherit;
 }

 .kpi-card .kpi-card-label {
     font-size: 0.95rem;
     opacity: 0.95;
     color: inherit;
 }



 .col-3 {
     flex: 0 0 25%;
     max-width: 25%;
 }

 .col-4 {
     flex: 0 0 33.333333%;
     max-width: 33.333333%;
 }

 .col-5 {
     flex: 0 0 41.666667%;
     max-width: 41.666667%;
 }

 .col-6 {
     flex: 0 0 50%;
     max-width: 50%;
 }

 .col-7 {
     flex: 0 0 58.333333%;
     max-width: 58.333333%;
 }

 .col-8 {
     flex: 0 0 66.666667%;
     max-width: 66.666667%;
 }

 .col-9 {
     flex: 0 0 75%;
     max-width: 75%;
 }

 .col-10 {
     flex: 0 0 83.333333%;
     max-width: 83.333333%;
 }

 .col-11 {
     flex: 0 0 91.666667%;
     max-width: 91.666667%;
 }

 .col-12 {
     flex: 0 0 100%;
     max-width: 100%;
 }

 /* Responsive Breakpoints */
 @media (min-width: 576px) {
     .col-sm-1 {
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
     }

     .col-sm-2 {
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
     }

     .col-sm-3 {
         flex: 0 0 25%;
         max-width: 25%;
     }

     .col-sm-4 {
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
     }

     .col-sm-5 {
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
     }

     .col-sm-6 {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .col-sm-7 {
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
     }

     .col-sm-8 {
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
     }

     .col-sm-9 {
         flex: 0 0 75%;
         max-width: 75%;
     }

     .col-sm-10 {
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
     }

     .col-sm-11 {
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
     }

     .col-sm-12 {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }

 @media (min-width: 768px) {
     .col-md-1 {
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
     }

     .col-md-2 {
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
     }

     .col-md-3 {
         flex: 0 0 25%;

         .page-top-area .btn-lg,
         .container-fluid .row.align-items-center .btn-lg {
             padding: 0.38rem 0.75rem;
             font-size: 0.95rem;
             line-height: 1;
             border-radius: var(--border-radius-sm);
         }

         /* Reduce oversized decorative icons in header/placeholder areas */
         .container-fluid .fa-6x,
         .page-top-area .fa-6x,
         .card .fa-6x {
             font-size: 3.2rem;
             /* smaller but still prominent */
             opacity: 0.7;
         }

         .container-fluid .fa-3x,
         .page-top-area .fa-3x {
             font-size: 1.6rem;
             opacity: 0.9;
         }

         /* Tweak small spacing for header icons inside titles */
         .page-top-area h1 .fa,
         .container-fluid .row.align-items-center h1 .fa,
         .container-fluid .row.align-items-center h3 .fa {
             font-size: 1.05rem;
             margin-right: 0.5rem;
             vertical-align: middle;
         }

         @media (max-width: 768px) {

             .page-top-area .btn-lg,
             .container-fluid .row.align-items-center .btn-lg {
                 padding: 0.32rem 0.6rem;
                 font-size: 0.9rem;
             }

             .container-fluid .fa-6x,
             .page-top-area .fa-6x {
                 font-size: 2.6rem;
             }
         }

         max-width: 25%;
     }

     .col-md-4 {
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
     }

     .col-md-5 {
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
     }

     .col-md-6 {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .col-md-7 {
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
     }

     .col-md-8 {
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
     }

     .col-md-9 {
         flex: 0 0 75%;
         max-width: 75%;
     }

     .col-md-10 {
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
     }

     .col-md-11 {
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
     }

     .col-md-12 {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }

 @media (min-width: 992px) {
     .col-lg-1 {
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
     }

     /* 70/30 layout helpers for two-column panes (used by purchases add view) */
     .col-lg-70 {
         flex: 0 0 70%;
         max-width: 70%;
     }

     .col-lg-30 {
         flex: 0 0 30%;
         max-width: 30%;
     }

     .col-lg-2 {
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
     }

     .col-lg-3 {
         flex: 0 0 25%;
         max-width: 25%;
     }

     .col-lg-4 {
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
     }

     .col-lg-5 {
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
     }

     .col-lg-6 {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .col-lg-7 {
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
     }

     .col-lg-8 {
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
     }

     .col-lg-9 {
         flex: 0 0 75%;
         max-width: 75%;
     }

     .col-lg-10 {
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
     }

     .col-lg-11 {
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
     }

     .col-lg-12 {
         flex: 0 0 100%;
         max-width: 100%;
     }

     /* Small utilities used by the purchases add view */
     .sticky-offset-top {
         top: 20px;
     }

     .cart-body-scroll {
         max-height: 360px;
         overflow: auto;
     }

     .d-none {
         display: none !important;
     }

     .product-avatar-sm {
         width: 40px;
         height: 40px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .product-avatar-circle {
         border-radius: 50%;
     }

     .text-truncate-max-200 {
         max-width: 200px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
     }

     .toast-pos-top-right {
         position: fixed;
         top: 20px;
         right: 20px;
         z-index: 9999;
     }

     .product-card-hover:hover {
         transform: none;
         box-shadow: var(--card-shadow-hover) !important;
         transition: var(--theme-transition);
     }
 }

 @media (min-width: 1200px) {
     .col-xl-1 {
         flex: 0 0 8.333333%;
         max-width: 8.333333%;
     }

     .col-xl-2 {
         flex: 0 0 16.666667%;
         max-width: 16.666667%;
     }

     .col-xl-3 {
         flex: 0 0 25%;
         max-width: 25%;
     }

     .col-xl-4 {
         flex: 0 0 33.333333%;
         max-width: 33.333333%;
     }

     .col-xl-5 {
         flex: 0 0 41.666667%;
         max-width: 41.666667%;
     }

     .col-xl-6 {
         flex: 0 0 50%;
         max-width: 50%;
     }

     .col-xl-7 {
         flex: 0 0 58.333333%;
         max-width: 58.333333%;
     }

     .col-xl-8 {
         flex: 0 0 66.666667%;
         max-width: 66.666667%;
     }

     .col-xl-9 {
         flex: 0 0 75%;
         max-width: 75%;
     }

     .col-xl-10 {
         flex: 0 0 83.333333%;
         max-width: 83.333333%;
     }

     .col-xl-11 {
         flex: 0 0 91.666667%;
         max-width: 91.666667%;
     }

     .col-xl-12 {
         flex: 0 0 100%;
         max-width: 100%;
     }
 }

 /* === CARD SYSTEM === */
 .card,
 .theme-card {
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 0;
     word-wrap: break-word;
     background-color: var(--card-bg);
     background-clip: border-box;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     box-shadow: var(--card-shadow);
     margin-bottom: 0.75rem;
     transition: var(--transition);
 }

 .card:hover,
 .kpi-card:hover,
 .theme-card:hover {
     box-shadow: var(--card-shadow-hover);
     transform: none;
 }

 .card-body {
     flex: 1 1 auto;
     min-height: 1px;
     padding: 1rem;
 }

 .card-header {
     padding: 0.5rem 1rem;
     margin-bottom: 0;
     background-color: var(--bg-secondary);
     border-bottom: 1px solid var(--card-border);
     border-top-left-radius: calc(var(--border-radius) - 1px);
     border-top-right-radius: calc(var(--border-radius) - 1px);
 }

 .card-header:first-child {
     border-radius: calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px) 0 0;
 }

 .card-footer {
     padding: 0.75rem 1.25rem;
     background-color: var(--bg-secondary);
     border-top: 1px solid var(--card-border);
     border-bottom-left-radius: calc(var(--border-radius) - 1px);
     border-bottom-right-radius: calc(var(--border-radius) - 1px);
 }

 /* === KPI ROW SPECIFIC STYLING === */
 .kpi-row {
     margin-bottom: 2rem;
 }

 .kpi-row .kpi-card {
     height: 100%;
     margin-bottom: 0;
     min-height: 120px;
 }

 .kpi-row .card-header {
     padding: 0.4rem 0.75rem;
     min-height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .kpi-row .card-header h6 {
     font-size: 0.9rem;
     text-align: center;
     line-height: 1.2;
     margin: 0;
 }

 .kpi-row .card-body {
     padding: 0.75rem 0.5rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     min-height: 70px;
 }

 .kpi-row h5 {
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
 }

 .kpi-row small {
     font-size: 0.9rem;
     text-align: center;
     display: block;
     line-height: 1.2;
 }

 /* Responsive adjustments for KPI cards */
 @media (max-width: 1199.98px) {
     .kpi-row .card-header h6 {
         font-size: 0.9rem;
     }

     .kpi-row h5 {
         font-size: 1.4rem;
     }

     .kpi-row small {
         font-size: 0.9rem;
     }
 }

 @media (max-width: 991.98px) {
     .kpi-row .kpi-card {
         min-height: 120px;
     }

     .kpi-row .card-header h6 {
         font-size: 0.9rem;
     }

     .kpi-row h5 {
         font-size: 1.4rem;
     }
 }

 @media (max-width: 767.98px) {
     .kpi-row {
         margin-bottom: 1.5rem;
     }

     .kpi-row .kpi-card {
         margin-bottom: 1rem;
         min-height: 110px;
     }
 }


 /* Ensure action buttons in tables align horizontally and don't stack */
 .action-buttons {
     display: inline-flex;
     align-items: center;
     gap: 0.32rem;
     flex-wrap: wrap;
     /* allow buttons to wrap to next line on narrow cells */
 }

 /* Ensure table containers can scroll horizontally when inside a parent with overflow hidden.
   This is scoped to our table wrapper so we don't change global page wrapper behavior. */
 .table-container {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }

 /* Force the inner table to use its natural width so the wrapper can scroll horizontally
   This prevents parent overflow clipping while keeping the page layout stable. */
 .table-container table {
     min-width: -webkit-max-content;
     min-width: -moz-max-content;
     min-width: max-content;
     width: 100%;
     /* allows responsive shrinking when possible */
 }

 /* Limit the actions cell so it doesn't force the whole table to widen; allow wrapping inside. */
 table#productsTable td .action-buttons {
     max-width: 140px;
     /* keeps actions compact; adjust if you need more room */
     justify-content: flex-end;
 }

 .action-buttons .btn {
     padding: 0.28rem 0.45rem;
     font-size: 0.78rem;
     line-height: 1;
     min-width: 2.1rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .action-buttons .btn i {
     font-size: 0.92rem;
 }

 @media (max-width: 480px) {
     .action-buttons .btn {
         padding: 0.2rem 0.35rem;
         font-size: 0.7rem;
         min-width: 1.8rem;
     }
 }

 /* Card Variants */
 .card.primary {
     border-left: 4px solid var(--primary);
 }

 .card.success {
     border-left: 4px solid var(--success);
 }

 .card.info {
     border-left: 4px solid var(--info);
 }

 .card.warning {
     border-left: 4px solid var(--warning);
 }

 .card.danger {
     border-left: 4px solid var(--danger);
 }

 /* Theme Card Variants */
 .theme-card-light {
     background-color: var(--card-bg);
     border: 1px solid var(--card-border);
 }

 .theme-card-header {
     background-color: var(--bg-secondary);
     border-bottom: 1px solid var(--card-border);
     font-weight: 600;
 }

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

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

 /* Ensure users table follows card background and dark theme variables on all screen sizes */
 .card-theme table#usersTable th,
 .card-theme table#usersTable td {
     vertical-align: middle;
     padding: 0.6rem 0.75rem;
     color: var(--text-primary);
     background: var(--card-bg) !important;
     border-color: var(--card-border) !important;
 }

 .card-theme table#usersTable {
     background: transparent;
 }

 .card-theme table#usersTable thead th {
     background: var(--card-bg) !important;
     color: var(--text-primary);
     border-color: var(--card-border) !important;
 }

 .card-theme table#usersTable tbody td {
     background: var(--card-bg) !important;
     color: var(--text-primary);
     border-color: var(--card-border) !important;
 }

 .card-theme table#usersTable tbody tr:nth-child(odd) td {
     background: rgba(0, 0, 0, 0.02);
 }

 /* Stronger selectors to override DataTables / Bootstrap defaults */
 .card-theme table#usersTable.dataTable tbody td,
 .card-theme table#usersTable.table.dataTable tbody td,
 .card-theme table#usersTable.table tbody td {
     background: var(--card-bg) !important;
     color: var(--text-primary) !important;
 }

 .card-theme table#usersTable.dataTable thead th,
 .card-theme table#usersTable.table.dataTable thead th {
     background: var(--card-bg) !important;
     color: var(--text-primary) !important;
 }

 /* Action Card Specific Styles for Professional Look */
 .row.mb-4 .kpi-card .card-body.text-center.p-3 {
     padding: 0.75rem !important;
 }

 .row.mb-4 .kpi-card .card-body p.text-muted {
     font-size: 0.9rem;
     margin-bottom: 0.75rem !important;
 }

 .row.mb-4 .kpi-card .d-grid.gap-2 .btn {
     margin-bottom: 0.375rem;
     padding: 0.5rem 0.75rem;
     font-size: 0.9rem;
 }

 /* === BUTTON SYSTEM === */
 .btn {
     display: inline-block;
     font-weight: 400;
     color: var(--text-primary);
     text-align: center;
     vertical-align: middle;
     user-select: none;
     background-color: transparent;
     border: 1px solid transparent;
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: var(--border-radius);
     transition: var(--transition);
     cursor: pointer;
     text-decoration: none;
 }

 .btn:hover {
     color: var(--text-primary);
     text-decoration: none;
     transform: none;
 }

 .btn:focus,
 .btn.focus {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .btn.disabled,
 .btn:disabled {
     opacity: 0.65;
     cursor: not-allowed;
 }

 /* Button Variants */
 .btn-primary {
     color: #fff;
     background-color: var(--primary);
     border-color: var(--primary);
 }

 .btn-primary:hover {
     color: #fff;
     background-color: #0069d9;
     border-color: #0062cc;
 }

 .btn-primary:focus,
 .btn-primary.focus {
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
 }

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

 .btn-secondary:hover {
     color: #fff;
     background-color: #545b62;
     border-color: #4e555b;
 }

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

 .btn-success:hover {
     color: #fff;
     background-color: #218838;
     border-color: #1e7e34;
 }

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

 .btn-info:hover {
     color: #fff;
     background-color: #138496;
     border-color: #117a8b;
 }

 .btn-warning {
     color: #212529;
     background-color: var(--warning);
     border-color: var(--warning);
 }

 .btn-warning:hover {
     color: #212529;
     background-color: #e0a800;
     border-color: #d39e00;
 }

 .btn-danger {
     color: #fff;
     background-color: var(--danger);
     border-color: var(--danger);
 }

 .btn-danger:hover {
     color: #fff;
     background-color: #c82333;
     border-color: #bd2130;
 }

 /* Outline Buttons */
 .btn-outline-primary {
     color: var(--primary);
     border-color: var(--primary);
 }

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

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

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

 /* Button Sizes */
 .btn-lg {
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: var(--border-radius);
 }

 .btn-sm {
     padding: 0.2rem 0.4rem;
     /* slightly more compact across the app */
     font-size: 0.865rem;
     line-height: 1.5;
     border-radius: var(--border-radius-sm);
 }

 /* More aggressive compaction for action buttons inside the products table */
 table#productsTable .action-buttons .btn {
     padding: 0.18rem 0.36rem;
     font-size: 0.82rem;
 }

 /* Button Groups */
 .btn-group {
     position: relative;
     display: inline-flex;
     vertical-align: middle;
 }

 .btn-group>.btn {
     position: relative;
     flex: 1 1 auto;
 }

 .btn-group>.btn:hover {
     z-index: 1;
 }

 .btn-group>.btn:not(:first-child) {
     margin-left: -1px;
 }

 .btn-group>.btn:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 }

 .btn-group>.btn:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }

 /* Special Buttons */
 .btn-outline-modern {
     color: var(--text-primary);
     border-color: var(--card-border);
     background-color: var(--card-bg);
 }

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

 .btn-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
     padding: 1rem;
     border-radius: var(--border-radius);
     text-decoration: none;
     transition: var(--transition);
     text-align: center;
     color: white;
 }

 .btn-action:hover {
     transform: none;
     box-shadow: var(--card-shadow-hover);
     text-decoration: none;
     color: white;
 }

 /* Theme Buttons */
 .btn-primary-theme {
     background-color: var(--primary);
     color: white;
 }

 .btn-success-theme {
     background-color: var(--success);
     color: white;
 }

 .btn-info-theme {
     background-color: var(--info);
     color: white;
 }

 .btn-warning-theme {
     background-color: var(--warning);
     color: #212529;
 }

 .btn-danger-theme {
     background-color: var(--danger);
     color: white;
 }

 .btn-secondary-theme {
     background-color: var(--secondary);
     color: white;
 }

 /* Floating Action Button (FAB) for theme toggle */
 .theme-toggle {
     position: fixed !important;
     bottom: 24px !important;
     left: 24px !important;
     width: 56px !important;
     height: 56px !important;
     border-radius: 50% !important;
     background: var(--primary) !important;
     color: var(--text-primary-inverse, white) !important;
     border: none !important;
     box-shadow: 0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2) !important;
     cursor: pointer !important;
     transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
     z-index: 1050 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     font-size: 1.5rem !important;
     outline: none !important;
 }

 /* Icon transition for smooth changes */
 .theme-toggle i {
     transition: all 0.3s ease !important;
     transform: scale(1) !important;
 }

 /* Force icon animation on class change */
 .theme-toggle i.fas {
     animation: iconPulse 0.3s ease !important;
 }

 @keyframes iconPulse {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Light theme styles for FAB */
 :root .theme-toggle {
     background: var(--primary) !important;
     color: white !important;
 }

 /* Dark theme styles for FAB */
 [data-theme="dark"] .theme-toggle {
     background: var(--warning, #ffc107) !important;
     color: var(--dark, #212529) !important;
     box-shadow: 0 6px 10px rgba(255, 193, 7, 0.14), 0 1px 18px rgba(255, 193, 7, 0.12), 0 3px 5px rgba(255, 193, 7, 0.2) !important;
 }

 .theme-toggle:hover {
     transform: none !important;
     box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18), 0 2px 20px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.25) !important;
 }

 /* Dark theme hover effect */
 [data-theme="dark"] .theme-toggle:hover {
     box-shadow: 0 8px 14px rgba(255, 193, 7, 0.25), 0 2px 20px rgba(255, 193, 7, 0.2), 0 4px 8px rgba(255, 193, 7, 0.3) !important;
 }

 .theme-toggle:active {
     transform: scale(0.96) !important;
     transition: transform 0.1s !important;
 }

 .theme-toggle:focus {
     outline: none !important;
 }

 /* Ensure FAB is always visible on mobile */
 @media (max-width: 768px) {
     .theme-toggle {
         bottom: 20px !important;
         left: 20px !important;
         width: 48px !important;
         height: 48px !important;
         font-size: 1.3rem !important;
     }
 }

 /* === FORM SYSTEM === */
 .form-control {
     display: block;
     width: 100%;
     height: calc(1.5em + 0.75rem + 2px);
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--text-primary);
     background-color: var(--card-bg);
     background-clip: padding-box;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     transition: var(--transition);
 }

 .form-control:focus {
     color: var(--text-primary);
     background-color: var(--card-bg);
     border-color: #80bdff;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

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

 .form-control:disabled,
 .form-control[readonly] {
     background-color: var(--bg-secondary);
     opacity: 1;
 }

 /* === SEARCH BAR SYSTEM === */
 .search-container {
     position: relative;
     display: inline-block;
     width: 100%;
     max-width: 400px;
 }

 .search-input {
     padding-right: 80px !important;
     /* Space for icons */
     width: 100%;
 }

 .search-icon-btn {
     position: absolute;
     right: 40px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     padding: 8px;
     border-radius: var(--border-radius-sm);
     transition: var(--transition);
     z-index: 5;
 }

 .search-icon-btn:hover {
     color: var(--primary);
     background-color: rgba(0, 123, 255, 0.1);
 }

 .search-icon-btn i {
     font-size: 0.9rem;
 }

 .clear-search-btn {
     position: absolute;
     right: 8px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--text-muted);
     cursor: pointer;
     padding: 8px;
     border-radius: var(--border-radius-sm);
     transition: var(--transition);
     z-index: 5;
     text-decoration: none;
     display: inline-block;
 }

 .clear-search-btn:hover {
     color: var(--danger);
     background-color: rgba(220, 53, 69, 0.1);
 }

 .search-input:focus+.search-icon-btn,
 .search-input:focus+.search-icon-btn+.clear-search-btn {
     color: var(--primary);
 }

 .search-container:focus-within .search-icon-btn {
     color: var(--primary);
 }

 .search-container:focus-within .clear-search-btn {
     color: var(--danger);
 }

 /* === PAGINATION CONTROLS === */
 .pagination-controls {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 0.5rem;
 }

 .pagination-controls .form-control-sm {
     border-radius: var(--border-radius);
     border: 1px solid var(--card-border);
     background-color: var(--card-bg);
     color: var(--text-primary);
 }

 .pagination-controls .form-control-sm:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .pagination-controls label {
     white-space: nowrap;
 }

 /* Mobile responsive pagination */
 @media (max-width: 768px) {
     .pagination-controls {
         flex-direction: column;
         align-items: stretch;
         gap: 0.75rem;
     }

     .pagination-controls .d-flex {
         justify-content: center;
     }
 }

 /* === PAGINATION LINKS === */
 .pagination {
     margin-bottom: 0;
 }

 .pagination .page-link {
     color: var(--primary);
     border-color: var(--card-border);
     background-color: var(--card-bg);
     border-radius: var(--border-radius-sm) !important;
     margin: 0 1px;
     border: 1px solid var(--card-border);
 }

 .pagination .page-link:hover {
     color: var(--primary);
     background-color: rgba(0, 123, 255, 0.1);
     border-color: var(--primary);
 }

 .pagination .page-item.active .page-link {
     background-color: var(--primary);
     border-color: var(--primary);
     color: white;
 }

 .pagination .page-item.disabled .page-link {
     color: var(--text-muted);
     background-color: var(--bg-secondary);
     border-color: var(--card-border);
 }

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

 .form-group {
     margin-bottom: 1rem;
 }

 .form-group label {
     display: inline-block;
     margin-bottom: 0.5rem;
     font-weight: 500;
     color: var(--text-primary);
 }

 .form-check {
     position: relative;
     display: block;
     padding-left: 1.25rem;
 }

 .form-check-input {
     position: absolute;
     margin-top: 0.3rem;
     margin-left: -1.25rem;
 }

 .form-check-label {
     margin-bottom: 0;
     cursor: pointer;
 }

 /* === FORM CONTROL SIZE FIXES === */
 /* Fix for form-control-sm text visibility issues */
 .form-control-sm {
     height: calc(1.5em + 0.5rem + 2px) !important;
     padding: 0.25rem 0.5rem !important;
     font-size: 0.875rem !important;
     line-height: 1.5 !important;
     border-radius: var(--border-radius-sm) !important;
     min-height: 32px !important;
     display: flex !important;
     align-items: center !important;
 }

 /* Fix for regular form-control select dropdowns */
 select.form-control {
     height: auto !important;
     min-height: calc(1.5em + 0.75rem + 2px) !important;
     padding: 0.375rem 1.75rem 0.375rem 0.75rem !important;
     background-position: right 0.75rem center !important;
     background-size: 12px !important;
     line-height: 1.5 !important;
     display: flex !important;
     align-items: center !important;
 }

 select.form-control option {
     padding: 0.375rem 0.75rem !important;
     line-height: 1.5 !important;
     font-size: 1rem !important;
 }

 /* Ensure dropdown options are properly visible */
 select.form-control-sm {
     height: auto !important;
     min-height: 32px !important;
     padding: 0.25rem 1.75rem 0.25rem 0.5rem !important;
     background-position: right 0.5rem center !important;
     background-size: 12px !important;
 }

 select.form-control-sm option {
     padding: 0.25rem 0.5rem !important;
     line-height: 1.5 !important;
     font-size: 0.875rem !important;
 }

 /* Input group fixes for small controls */
 .input-group .form-control-sm {
     height: 32px !important;
 }

 /* Textarea specific fixes */
 textarea.form-control-sm {
     height: auto !important;
     min-height: 64px !important;
     resize: vertical !important;
 }

 .input-group {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     width: 100%;
 }

 .input-group>.form-control {
     position: relative;
     flex: 1 1 auto;
     width: 1%;
     margin-bottom: 0;
 }

 .input-group-prepend,
 .input-group-append {
     display: flex;
 }

 .input-group-text {
     display: flex;
     align-items: center;
     padding: 0.375rem 0.75rem;
     margin-bottom: 0;
     font-size: 1rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--text-muted);
     text-align: center;
     white-space: nowrap;
     background-color: var(--bg-secondary);
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
 }

 /* === TABLE SYSTEM === */
 .table {
     width: 100%;
     margin-bottom: 1rem;
     color: var(--text-primary);
     border-collapse: collapse;
 }

 .table th,
 .table td {
     padding: 0.75rem;
     vertical-align: top;
     border-top: 1px solid var(--card-border);
 }

 .table thead th {
     vertical-align: bottom;
     border-bottom: 2px solid var(--card-border);
     background-color: var(--bg-secondary);
     font-weight: 600;
     cursor: help;
     transition: background-color 0.2s ease;
 }

 /* Table header hover effect for better tooltip indication */
 .table thead th:hover {
     background-color: var(--primary);
     color: white;
 }

 .table thead th[title]:hover {
     position: relative;
 }

 .table tbody+tbody {
     border-top: 2px solid var(--card-border);
 }

 .table-striped tbody tr:nth-of-type(odd) {
     background-color: rgba(0, 0, 0, 0.05);
 }

 .table-hover tbody tr:hover {
     color: var(--text-primary);
     background-color: rgba(0, 0, 0, 0.075);
 }

 .table-bordered {
     border: 1px solid var(--card-border);
 }

 .table-bordered th,
 .table-bordered td {
     border: 1px solid var(--card-border);
 }

 .table-bordered thead th,
 .table-bordered thead td {
     border-bottom-width: 2px;
 }

 /* === SIDEBAR SYSTEM === */
 #wrapper {
     display: flex;
     min-height: 100vh;
 }

 .theme-sidebar {
     min-width: 250px;
     max-width: 250px;
     background-color: var(--card-bg);
     border-right: 1px solid var(--card-border);
     transition: var(--transition);
 }

 .sidebar-heading {
     padding: 1rem;
     font-size: 1.125rem;
     font-weight: 600;
     border-bottom: 1px solid var(--card-border);
     background-color: var(--bg-secondary);
     color: var(--text-primary);
 }

 #page-content-wrapper {
     flex: 1;
     overflow-x: hidden;
 }

 .list-group {
     display: flex;
     flex-direction: column;
     padding-left: 0;
     padding-right: 0.5rem;
     padding-top: 0.5rem;
     margin-bottom: 0;
 }

 .list-group-flush {
     border-radius: 0;
 }

 .list-group-flush .list-group-item {
     border-right: 0;
     border-left: 0;
     border-radius: var(--border-radius);
     margin-bottom: 0.25rem;
 }

 .list-group-flush .list-group-item:first-child {
     border-top: 0;
 }

 .list-group-flush:last-child .list-group-item:last-child {
     border-bottom: 0;
 }

 .list-group-item {
     position: relative;
     display: block;
     padding: 0.75rem 1.25rem;
     margin-bottom: 0.25rem;
     background-color: var(--card-bg);
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     text-decoration: none;
     transition: var(--transition);
     overflow: hidden;
     border-radius: var(--border-radius);
 }

 /* Shimmer effect for sidebar items */
 .list-group-item:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(0, 123, 255, 0.1), transparent);
     transition: left 0.5s ease;
     z-index: 1;
 }

 .list-group-item:hover:before {
     left: 100%;
 }

 .list-group-item:hover,
 .list-group-item-action:hover {
     z-index: 2;
     color: var(--text-primary);
     text-decoration: none;
     background-color: var(--bg-secondary);
     transform: translateX(3px);
     box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
 }

 .list-group-item.active,
 .list-group-item-action.active {
     z-index: 2;
     color: #fff;
     background-color: var(--primary);
     border-color: var(--primary);
 }

 .theme-sidebar-item {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-weight: 500;
     position: relative;
     z-index: 3;
 }

 .theme-sidebar-item i {
     width: 1.25rem;
     text-align: center;
     font-size: 1rem;
     transition: var(--transition);
 }

 /* Hover effects - background color change and icon scale */
 .list-group-item:hover {
     background-color: rgba(0, 123, 255, 0.1) !important;
     transition: background-color 0.3s ease;
 }

 .theme-sidebar-item:hover i {
     transform: scale(1.1);
 }

 /* Dark mode hover background */
 .dark-mode .list-group-item:hover {
     background-color: rgba(255, 255, 255, 0.1) !important;
 }

 /* Active state colors - keep icons white on blue background */
 .list-group-item.active .theme-sidebar-item,
 .list-group-item.active .theme-sidebar-item i {
     color: white !important;
 }

 /* Active items on hover - keep white and add scale effect */
 .list-group-item.active:hover .theme-sidebar-item,
 .list-group-item.active:hover .theme-sidebar-item i,
 .list-group-item.active .theme-sidebar-item:hover,
 .list-group-item.active .theme-sidebar-item:hover i {
     color: white !important;
     transform: scale(1.1);
 }

 .admin-link {
     color: var(--warning) !important;
     font-weight: 600;
 }

 .admin-link:hover {
     background-color: var(--warning);
     color: white !important;
 }

 /* === NAVIGATION SYSTEM === */
 .navbar {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     padding: 0.5rem 1rem;
     background-color: var(--card-bg);
     border-bottom: 1px solid var(--card-border);
 }

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

 .navbar-expand-lg {
     flex-flow: row nowrap;
     justify-content: flex-start;
 }

 .navbar-toggler {
     padding: 0.25rem 0.5rem;
     font-size: 1rem;
     line-height: 1;
     background-color: transparent;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     transition: var(--transition);
 }

 .navbar-toggler:hover,
 .navbar-toggler:focus {
     text-decoration: none;
 }

 .navbar-toggler-icon {
     display: inline-block;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
     content: "";
     background: no-repeat center center;
     background-size: 100% 100%;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

 .navbar-collapse {
     flex-basis: 100%;
     flex-grow: 1;
     align-items: center;
 }

 .navbar-nav {
     display: flex;
     flex-direction: column;
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
 }

 .navbar-nav .nav-link {
     padding-right: 0;
     padding-left: 0;
 }

 .nav-item {
     margin-bottom: 0;
 }

 .nav-link {
     display: block;
     padding: 0.5rem 1rem;
     color: var(--text-primary);
     text-decoration: none;
     transition: var(--transition);
 }

 .nav-link:hover,
 .nav-link:focus {
     color: var(--primary);
     text-decoration: none;
 }

 .navbar-text {
     display: inline-block;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     color: var(--text-muted);
 }

 @media (min-width: 992px) {
     .navbar-expand-lg .navbar-nav {
         flex-direction: row;
     }

     .navbar-expand-lg .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem;
     }

     .navbar-expand-lg .navbar-collapse {
         display: flex !important;
         flex-basis: auto;
     }

     .navbar-expand-lg .navbar-toggler {
         display: none;
     }
 }

 /* === DROPDOWN SYSTEM === */
 .dropdown {
     position: relative;
 }

 .dropdown-toggle {
     white-space: nowrap;
 }

 /* Modern dropdown arrow using FontAwesome */
 .dropdown-toggle::after {
     display: inline-block;
     margin-left: 0.5em;
     vertical-align: middle;
     content: "\f107";
     /* FontAwesome chevron-down */
     font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 0.75em;
     transition: transform 0.3s ease;
 }

 /* Rotate arrow when dropdown is open */
 .dropdown-toggle[aria-expanded="true"]::after {
     transform: rotate(180deg);
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     z-index: 1000;
     display: none;
     float: left;
     min-width: 10rem;
     padding: 0.5rem 0;
     margin: 0.125rem 0 0;
     font-size: 1rem;
     color: var(--text-primary);
     text-align: left;
     list-style: none;
     background-color: var(--card-bg);
     background-clip: padding-box;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     box-shadow: var(--card-shadow-hover);
 }

 /* Ensure compact ellipsis dropdowns (button groups) are fully opaque and above overlapping elements */
 .btn-group .dropdown-menu,
 .table .btn-group .dropdown-menu,
 .card-theme .btn-group .dropdown-menu {
     background-color: var(--card-bg) !important;
     color: var(--text-primary) !important;
     border: 1px solid var(--card-border) !important;
     box-shadow: var(--card-shadow) !important;
     z-index: 10600 !important;
     /* sit above sticky headers and other controls */
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     opacity: 1 !important;
     /* prevent translucent backgrounds */
 }

 /* Small padding tweak for compact dropdowns triggered by the ellipsis button */
 .btn-group .dropdown-menu .dropdown-item {
     padding: 0.4rem 0.9rem !important;
 }

 .dropdown-menu-right {
     right: 0;
     left: auto;
 }

 .dropdown-item {
     display: block;
     width: 100%;
     padding: 0.25rem 1rem;
     clear: both;
     font-weight: 400;
     color: var(--text-primary);
     text-align: inherit;
     white-space: nowrap;
     background-color: transparent;
     border: 0;
     text-decoration: none;
     transition: var(--transition);
 }

 .dropdown-item:hover,
 .dropdown-item:focus {
     color: var(--text-primary);
     text-decoration: none;
     background-color: var(--bg-secondary);
 }

 .dropdown-item.active,
 .dropdown-item:active {
     color: #fff;
     text-decoration: none;
     background-color: var(--primary);
 }

 .dropdown-header {
     display: block;
     padding: 0.5rem 1rem;
     margin-bottom: 0;
     font-size: 0.875rem;
     color: var(--text-muted);
     white-space: nowrap;
 }

 .dropdown-divider {
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
     border-top: 1px solid var(--card-border);
 }

 /* === THEME BACKGROUNDS === */
 .bg-primary-theme {
     background-color: var(--primary) !important;
     color: white !important;
 }

 .bg-success-theme {
     background-color: var(--success) !important;
     color: white !important;
 }

 .bg-info-theme {
     background-color: var(--info) !important;
     color: white !important;
 }

 .bg-warning-theme {
     background-color: var(--warning) !important;
     color: #212529 !important;
 }

 .bg-danger-theme {
     background-color: var(--danger) !important;
     color: white !important;
 }

 .bg-secondary-theme {
     background-color: var(--secondary) !important;
     color: white !important;
 }

 /* === GRADIENT BACKGROUNDS === */
 .bg-gradient-primary {
     background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%) !important;
     color: white !important;
 }

 .bg-gradient-success {
     background: linear-gradient(135deg, var(--success) 0%, #1e7e34 100%) !important;
     color: white !important;
 }

 .bg-gradient-info {
     background: linear-gradient(135deg, var(--info) 0%, #117a8b 100%) !important;
     color: white !important;
 }

 .bg-gradient-warning {
     background: linear-gradient(135deg, var(--warning) 0%, #d39e00 100%) !important;
     color: #212529 !important;
 }

 .bg-gradient-danger {
     background: linear-gradient(135deg, var(--danger) 0%, #bd2130 100%) !important;
     color: white !important;
 }

 .bg-gradient-secondary {
     background: linear-gradient(135deg, var(--secondary) 0%, #495057 100%) !important;
     color: white !important;
 }

 /* === LAYOUT CLASSES === */
 .theme-header {
     margin-bottom: 2rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--card-border);
 }

 .theme-unified {
     background-color: var(--bg-primary);
     color: var(--text-primary);
 }

 /* === UTILITY CLASSES === */
 /* Display */
 .d-none {
     display: none !important;
 }

 .d-inline {
     display: inline !important;
 }

 .d-inline-block {
     display: inline-block !important;
 }

 .d-block {
     display: block !important;
 }

 .d-flex {
     display: flex !important;
 }

 /* Flexbox */
 .flex-row {
     flex-direction: row !important;
 }

 .flex-column {
     flex-direction: column !important;
 }

 .flex-wrap {
     flex-wrap: wrap !important;
 }

 .flex-nowrap {
     flex-wrap: nowrap !important;
 }

 .justify-content-start {
     justify-content: flex-start !important;
 }

 .justify-content-end {
     justify-content: flex-end !important;
 }

 .justify-content-center {
     justify-content: center !important;
 }

 .justify-content-between {
     justify-content: space-between !important;
 }

 .justify-content-around {
     justify-content: space-around !important;
 }

 .align-items-start {
     align-items: flex-start !important;
 }

 .align-items-end {
     align-items: flex-end !important;
 }

 .align-items-center {
     align-items: center !important;
 }

 .align-items-baseline {
     align-items: baseline !important;
 }

 .align-items-stretch {
     align-items: stretch !important;
 }

 /* Text */
 .text-left {
     text-align: left !important;
 }

 .text-right {
     text-align: right !important;
 }

 .text-center {
     text-align: center !important;
 }

 .text-justify {
     text-align: justify !important;
 }

 .text-nowrap {
     white-space: nowrap !important;
 }

 .text-wrap {
     white-space: normal !important;
 }

 /* Text Colors */
 .text-primary {
     color: var(--primary) !important;
 }

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

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

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

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

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

 .text-light {
     color: #f8f9fa !important;
 }

 .text-dark {
     color: #343a40 !important;
 }

 .text-white {
     color: #fff !important;
 }

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

 /* Font Weight */
 .font-weight-light {
     font-weight: 300 !important;
 }

 .font-weight-normal {
     font-weight: 400 !important;
 }

 .font-weight-medium {
     font-weight: 500 !important;
 }

 .font-weight-bold {
     font-weight: 700 !important;
 }

 .font-weight-bolder {
     font-weight: bolder !important;
 }

 /* Margins */
 .m-0 {
     margin: 0 !important;
 }

 .m-1 {
     margin: 0.25rem !important;
 }

 .m-2 {
     margin: 0.5rem !important;
 }

 .m-3 {
     margin: 1rem !important;
 }

 .m-4 {
     margin: 1.5rem !important;
 }

 .m-5 {
     margin: 3rem !important;
 }

 .m-auto {
     margin: auto !important;
 }

 .mx-0 {
     margin-left: 0 !important;
     margin-right: 0 !important;
 }

 .mx-1 {
     margin-left: 0.25rem !important;
     margin-right: 0.25rem !important;
 }

 .mx-2 {
     margin-left: 0.5rem !important;
     margin-right: 0.5rem !important;
 }

 .mx-3 {
     margin-left: 1rem !important;
     margin-right: 1rem !important;
 }

 .mx-4 {
     margin-left: 1.5rem !important;
     margin-right: 1.5rem !important;
 }

 .mx-5 {
     margin-left: 3rem !important;
     margin-right: 3rem !important;
 }

 .mx-auto {
     margin-left: auto !important;
     margin-right: auto !important;
 }

 .my-0 {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }

 .my-1 {
     margin-top: 0.25rem !important;
     margin-bottom: 0.25rem !important;
 }

 .my-2 {
     margin-top: 0.5rem !important;
     margin-bottom: 0.5rem !important;
 }

 .my-3 {
     margin-top: 1rem !important;
     margin-bottom: 1rem !important;
 }

 .my-4 {
     margin-top: 1.5rem !important;
     margin-bottom: 1.5rem !important;
 }

 .my-5 {
     margin-top: 3rem !important;
     margin-bottom: 3rem !important;
 }

 .my-auto {
     margin-top: auto !important;
     margin-bottom: auto !important;
 }

 .mt-0 {
     margin-top: 0 !important;
 }

 .mt-1 {
     margin-top: 0.25rem !important;
 }

 .mt-2 {
     margin-top: 0.5rem !important;
 }

 .mt-3 {
     margin-top: 1rem !important;
 }

 .mt-4 {
     margin-top: 1.5rem !important;
 }

 .mt-5 {
     margin-top: 3rem !important;
 }

 .mt-auto {
     margin-top: auto !important;
 }

 .mr-0 {
     margin-right: 0 !important;
 }

 .mr-1 {
     margin-right: 0.25rem !important;
 }

 .mr-2 {
     margin-right: 0.5rem !important;
 }

 .mr-3 {
     margin-right: 1rem !important;
 }

 .mr-4 {
     margin-right: 1.5rem !important;
 }

 .mr-5 {
     margin-right: 3rem !important;
 }

 .mr-auto {
     margin-right: auto !important;
 }

 .mb-0 {
     margin-bottom: 0 !important;
 }

 .mb-1 {
     margin-bottom: 0.25rem !important;
 }

 .mb-2 {
     margin-bottom: 0.5rem !important;
 }

 .mb-3 {
     margin-bottom: 1rem !important;
 }

 .mb-4 {
     margin-bottom: 1.5rem !important;
 }

 .mb-5 {
     margin-bottom: 3rem !important;
 }

 .mb-auto {
     margin-bottom: auto !important;
 }

 .ml-0 {
     margin-left: 0 !important;
 }

 .ml-1 {
     margin-left: 0.25rem !important;
 }

 .ml-2 {
     margin-left: 0.5rem !important;
 }

 .ml-3 {
     margin-left: 1rem !important;
 }

 .ml-4 {
     margin-left: 1.5rem !important;
 }

 .ml-5 {
     margin-left: 3rem !important;
 }

 .ml-auto {
     margin-left: auto !important;
 }

 /* Padding */
 .p-0 {
     padding: 0 !important;
 }

 .p-1 {
     padding: 0.25rem !important;
 }

 .p-2 {
     padding: 0.5rem !important;
 }

 .p-3 {
     padding: 1rem !important;
 }

 .p-4 {
     padding: 1.5rem !important;
 }

 .p-5 {
     padding: 3rem !important;
 }

 .px-0 {
     padding-left: 0 !important;
     padding-right: 0 !important;
 }

 .px-1 {
     padding-left: 0.25rem !important;
     padding-right: 0.25rem !important;
 }

 .px-2 {
     padding-left: 0.5rem !important;
     padding-right: 0.5rem !important;
 }

 .px-3 {
     padding-left: 1rem !important;
     padding-right: 1rem !important;
 }

 .px-4 {
     padding-left: 1.5rem !important;
     padding-right: 1.5rem !important;
 }

 .px-5 {
     padding-left: 3rem !important;
     padding-right: 3rem !important;
 }

 .py-0 {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }

 .py-1 {
     padding-top: 0.25rem !important;
     padding-bottom: 0.25rem !important;
 }

 .py-2 {
     padding-top: 0.5rem !important;
     padding-bottom: 0.5rem !important;
 }

 .py-3 {
     padding-top: 1rem !important;
     padding-bottom: 1rem !important;
 }

 .py-4 {
     padding-top: 1.5rem !important;
     padding-bottom: 1.5rem !important;
 }

 .py-5 {
     padding-top: 3rem !important;
     padding-bottom: 3rem !important;
 }

 .pt-0 {
     padding-top: 0 !important;
 }

 .pt-1 {
     padding-top: 0.25rem !important;
 }

 .pt-2 {
     padding-top: 0.5rem !important;
 }

 .pt-3 {
     padding-top: 1rem !important;
 }

 .pt-4 {
     padding-top: 1.5rem !important;
 }

 .pt-5 {
     padding-top: 3rem !important;
 }

 .pr-0 {
     padding-right: 0 !important;
 }

 .pr-1 {
     padding-right: 0.25rem !important;
 }

 .pr-2 {
     padding-right: 0.5rem !important;
 }

 .pr-3 {
     padding-right: 1rem !important;
 }

 .pr-4 {
     padding-right: 1.5rem !important;
 }

 .pr-5 {
     padding-right: 3rem !important;
 }

 .pb-0 {
     padding-bottom: 0 !important;
 }

 .pb-1 {
     padding-bottom: 0.25rem !important;
 }

 .pb-2 {
     padding-bottom: 0.5rem !important;
 }

 .pb-3 {
     padding-bottom: 1rem !important;
 }

 .pb-4 {
     padding-bottom: 1.5rem !important;
 }

 .pb-5 {
     padding-bottom: 3rem !important;
 }

 .pl-0 {
     padding-left: 0 !important;
 }

 .pl-1 {
     padding-left: 0.25rem !important;
 }

 .pl-2 {
     padding-left: 0.5rem !important;
 }

 .pl-3 {
     padding-left: 1rem !important;
 }

 .pl-4 {
     padding-left: 1.5rem !important;
 }

 .pl-5 {
     padding-left: 3rem !important;
 }

 /* Sizing */
 .w-25 {
     width: 25% !important;
 }

 .w-50 {
     width: 50% !important;
 }

 .w-75 {
     width: 75% !important;
 }

 .w-100 {
     width: 100% !important;
 }

 .w-auto {
     width: auto !important;
 }

 .h-25 {
     height: 25% !important;
 }

 .h-50 {
     height: 50% !important;
 }

 .h-75 {
     height: 75% !important;
 }

 .h-100 {
     height: 100% !important;
 }

 .h-auto {
     height: auto !important;
 }

 /* Borders */
 .border {
     border: 1px solid var(--card-border) !important;
 }

 .border-top {
     border-top: 1px solid var(--card-border) !important;
 }

 .border-right {
     border-right: 1px solid var(--card-border) !important;
 }

 .border-bottom {
     border-bottom: 1px solid var(--card-border) !important;
 }

 .border-left {
     border-left: 1px solid var(--card-border) !important;
 }

 .border-0 {
     border: 0 !important;
 }

 .border-top-0 {
     border-top: 0 !important;
 }

 .border-right-0 {
     border-right: 0 !important;
 }

 .border-bottom-0 {
     border-bottom: 0 !important;
 }

 .border-left-0 {
     border-left: 0 !important;
 }

 .rounded {
     border-radius: var(--border-radius) !important;
 }

 .rounded-top {
     border-top-left-radius: var(--border-radius) !important;
     border-top-right-radius: var(--border-radius) !important;
 }

 .rounded-right {
     border-top-right-radius: var(--border-radius) !important;
     border-bottom-right-radius: var(--border-radius) !important;
 }

 .rounded-bottom {
     border-bottom-right-radius: var(--border-radius) !important;
     border-bottom-left-radius: var(--border-radius) !important;
 }

 .rounded-left {
     border-top-left-radius: var(--border-radius) !important;
     border-bottom-left-radius: var(--border-radius) !important;
 }

 .rounded-0 {
     border-radius: 0 !important;
 }

 /* Shadows */
 .shadow-sm {
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
 }

 .shadow {
     box-shadow: var(--card-shadow) !important;
 }

 .shadow-lg {
     box-shadow: var(--card-shadow-hover) !important;
 }

 .shadow-none {
     box-shadow: none !important;
 }

 /* === BADGES === */
 .badge {
     display: inline-block;
     padding: 0.25em 0.4em;
     font-size: 75%;
     font-weight: 700;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: var(--border-radius-sm);
     transition: var(--transition);
 }

 .badge:empty {
     display: none;
 }

 .badge-primary {
     color: #fff;
     background-color: var(--primary);
 }

 .badge-secondary {
     color: #fff;
     background-color: var(--secondary);
 }

 .badge-success {
     color: #fff;
     background-color: var(--success);
 }

 .badge-info {
     color: #fff;
     background-color: var(--info);
 }

 .badge-warning {
     color: #212529;
     background-color: var(--warning);
 }

 .badge-danger {
     color: #fff;
     background-color: var(--danger);
 }

 .badge-offloading {
     color: #fff;
     background-color: #87CEEB;
     /* Light blue color for off-loading */
     border: 1px solid #5DADE2;
 }

 /* === ACTIVITY COMPONENTS === */
 .activity-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .activity-item {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .activity-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1rem;
 }

 .activity-icon.bg-primary {
     background-color: var(--primary);
 }

 .activity-icon.bg-success {
     background-color: var(--success);
 }

 .activity-icon.bg-warning {
     background-color: var(--warning);
 }

 .activity-content {
     flex: 1;
 }

 .activity-title {
     font-weight: 600;
     margin-bottom: 0.25rem;
 }

 .activity-description {
     color: var(--text-muted);
     font-size: 0.875rem;
     margin-bottom: 0.25rem;
 }

 .activity-time {
     color: var(--text-muted);
     font-size: 0.75rem;
 }

 /* === PROGRESS BARS === */
 .progress {
     display: flex;
     height: 1rem;
     overflow: hidden;
     font-size: 0.75rem;
     background-color: var(--bg-secondary);
     border-radius: var(--border-radius);
 }

 .progress-bar {
     display: flex;
     flex-direction: column;
     justify-content: center;
     overflow: hidden;
     color: #fff;
     text-align: center;
     white-space: nowrap;
     background-color: var(--primary);
     transition: width 0.6s ease;
 }

 .progress-label {
     display: flex;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 }

 .progress-label-title {
     font-weight: 500;
     color: var(--text-primary);
 }

 .progress-label-value {
     font-weight: 600;
 }

 .progress-modern {
     height: 8px;
     background-color: var(--bg-secondary);
     border-radius: 4px;
     overflow: hidden;
 }

 .progress-bar-modern {
     height: 100%;
     border-radius: 4px;
     transition: width 0.3s ease;
 }

 .progress-bar-modern.bg-success {
     background-color: var(--success);
 }

 .progress-bar-modern.bg-info {
     background-color: var(--info);
 }

 .progress-bar-modern.bg-warning {
     background-color: var(--warning);
 }

 /* === VALUE DISPLAY === */
 .value {
     font-size: 2rem;
     font-weight: 700;
     margin-bottom: 0.25rem;
     line-height: 1.2;
 }

 .label {
     font-size: 0.875rem;
     opacity: 0.7;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* === ANIMATIONS === */
 .fade-in {
     animation: fadeIn 0.3s ease-in;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* === RESPONSIVE UTILITIES === */
 @media (max-width: 575.98px) {
     .d-sm-none {
         display: none !important;
     }

     .d-sm-inline {
         display: inline !important;
     }

     .d-sm-inline-block {
         display: inline-block !important;
     }

     .d-sm-block {
         display: block !important;
     }

     .d-sm-flex {
         display: flex !important;
     }
 }

 @media (min-width: 576px) and (max-width: 767.98px) {
     .d-md-none {
         display: none !important;
     }

     .d-md-inline {
         display: inline !important;
     }

     .d-md-inline-block {
         display: inline-block !important;
     }

     .d-md-block {
         display: block !important;
     }

     .d-md-flex {
         display: flex !important;
     }
 }

 @media (min-width: 768px) {
     .text-md-left {
         text-align: left !important;
     }

     .text-md-right {
         text-align: right !important;
     }

     .text-md-center {
         text-align: center !important;
     }
 }

 @media (min-width: 992px) {
     .text-lg-left {
         text-align: left !important;
     }

     .text-lg-right {
         text-align: right !important;
     }

     .text-lg-center {
         text-align: center !important;
     }

     .mt-lg-0 {
         margin-top: 0 !important;
     }

     .mr-lg-auto {
         margin-right: auto !important;
     }

     .ml-lg-auto {
         margin-left: auto !important;
     }
 }

 @media (max-width: 991.98px) {
     .theme-sidebar {
         position: fixed;
         top: 0;
         left: -250px;
         height: 100vh;
         z-index: 1000;
         transition: left 0.3s ease;
     }

     .theme-sidebar.show {
         left: 0;
     }

     #page-content-wrapper {
         margin-left: 0;
     }

     .navbar-expand-lg .navbar-collapse {
         display: flex !important;
         flex-basis: auto;
     }

     .navbar-toggler {
         display: block;
     }
 }

 /* === ENHANCED HARDWARE STORE SPECIFIC === */
 .hardware-kpi {
     background: linear-gradient(135deg, var(--card-bg) 0%, var(--bg-secondary) 100%);
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     text-align: center;
     position: relative;
     overflow: hidden;
     transition: var(--transition);
 }

 .hardware-kpi:hover {
     transform: none;
     box-shadow: var(--card-shadow-hover);
 }

 .hardware-kpi::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: var(--primary);
 }

 .hardware-kpi.success::before {
     background: var(--success);
 }

 .hardware-kpi.info::before {
     background: var(--info);
 }

 .hardware-kpi.warning::before {
     background: var(--warning);
 }

 .hardware-kpi.danger::before {
     background: var(--danger);
 }

 .btn-group-toggle .btn {
     margin-bottom: 0;
 }

 .btn-group-toggle .btn input[type="radio"],
 .btn-group-toggle .btn input[type="checkbox"] {
     position: absolute;
     clip: rect(0, 0, 0, 0);
     pointer-events: none;
 }

 /* === UNIVERSAL CARD SYSTEM === */
 .card,
 .theme-card {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     box-shadow: 0 2px 8px var(--card-shadow);
     margin-bottom: 1.5rem;
     transition: var(--theme-transition);
     overflow: hidden;
     position: relative;
 }

 .card:hover,
 .kpi-card:hover,
 .theme-card:hover {
     transform: none;
     box-shadow: 0 8px 25px var(--card-shadow-hover);
     border-color: var(--primary);
 }

 .card-header {
     padding: 1.25rem;
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--card-border);
     display: flex;
     align-items: center;
     gap: 0.75rem;
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }

 .card-header h5,
 .card-header h6 {
     margin: 0;
     font-weight: 600;
     color: var(--text-primary);
 }

 .card-body {
     padding: 1.25rem;
     background: var(--card-bg);
 }

 .value {
     font-size: 2.25rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
     line-height: 1.2;
 }

 .label {
     font-size: 0.875rem;
     opacity: 0.8;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     font-weight: 500;
 }

 /* === COLOR VARIANTS === */
 .card.primary {
     border-left: 4px solid var(--primary);
 }

 .card.primary .card-header {
     background: var(--primary);
     color: white;
 }

 .card.primary .value {
     color: var(--primary);
 }

 .card.success {
     border-left: 4px solid var(--success);
 }

 .card.success .card-header {
     background: var(--success);
     color: white;
 }

 .card.success .value {
     color: var(--success);
 }

 .card.info {
     border-left: 4px solid var(--info);
 }

 .card.info .card-header {
     background: var(--info);
     color: white;
 }

 .card.info .value {
     color: var(--info);
 }

 .card.warning {
     border-left: 4px solid var(--warning);
 }

 .card.warning .card-header {
     background: var(--warning);
     color: white;
 }

 .card.warning .value {
     color: var(--warning);
 }

 .card.danger {
     border-left: 4px solid var(--danger);
 }

 .card.danger .card-header {
     background: var(--danger);
     color: white;
 }

 .card.danger .value {
     color: var(--danger);
 }

 /* === THEMED BACKGROUNDS === */
 .bg-primary-theme {
     background: var(--primary) !important;
     color: white !important;
 }

 .bg-success-theme {
     background: var(--success) !important;
     color: white !important;
 }

 .bg-info-theme {
     background: var(--info) !important;
     color: white !important;
 }

 .bg-warning-theme {
     background: var(--warning) !important;
     color: white !important;
 }

 .bg-danger-theme {
     background: var(--danger) !important;
     color: white !important;
 }

 .bg-secondary-theme {
     background: var(--secondary) !important;
     color: white !important;
 }

 /* === LAYOUT CLASSES === */
 .theme-header {
     margin-bottom: 2rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid var(--card-border);
 }

 /* === SIDEBAR SYSTEM === */
 /* Sidebar system is defined above in the main layout section */

 .list-group-flush {
     border-radius: 0;
 }

 .list-group-flush .list-group-item {
     border-width: 0 0 1px;
     border-radius: var(--border-radius);
     margin-bottom: 0.25rem;
 }

 /* List group items are defined above in the main layout section */

 .list-group-item.active {
     background-color: var(--primary);
     color: white;
     border-color: var(--primary);
     box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
 }

 /* Theme sidebar items are defined above in the main layout section */

 .admin-link {
     color: var(--warning) !important;
     font-weight: 600;
     position: relative;
 }

 .admin-link:before {
     content: '';
     position: absolute;
     left: 0;
     top: 0;
     height: 100%;
     width: 3px;
     background: var(--warning);
     opacity: 0;
     transition: var(--theme-transition);
 }

 .admin-link:hover {
     background-color: var(--warning);
     color: white !important;
     transform: translateX(5px);
 }

 .admin-link:hover:before {
     opacity: 1;
 }

 #page-content-wrapper {
     flex: 1;
     overflow-x: hidden;
 }

 /* === NAVBAR SYSTEM === */
 .navbar {
     padding: 0.5rem 1rem;
     background: var(--card-bg);
     border-bottom: 1px solid var(--card-border);
 }

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

 .navbar-expand-lg {
     flex-flow: row nowrap;
     justify-content: flex-start;
 }

 .navbar-toggler {
     padding: 0.25rem 0.5rem;
     font-size: 1rem;
     line-height: 1;
     background-color: transparent;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
 }

 .navbar-toggler-icon {
     display: inline-block;
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 100%;
 }

 .navbar-collapse {
     flex-basis: 100%;
     flex-grow: 1;
     align-items: center;
 }

 .navbar-nav {
     display: flex;
     flex-direction: row;
     padding-left: 0;
     margin-bottom: 0;
     list-style: none;
 }

 .nav-item {
     margin-right: 0.5rem;
 }

 .nav-link {
     display: block;
     padding: 0.5rem 1rem;
     color: var(--text-primary);
     text-decoration: none;
     transition: var(--theme-transition);
 }

 .nav-link:hover {
     color: var(--primary);
     text-decoration: none;
 }

 .navbar-text {
     display: inline-block;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     color: var(--text-muted);
 }

 .ml-auto {
     margin-left: auto !important;
 }

 .mr-auto {
     margin-right: auto !important;
 }

 /* === THEME CARD VARIANTS === */
 .theme-card-light {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
 }

 .theme-card-header {
     background: var(--bg-secondary);
     border-bottom: 1px solid var(--card-border);
     font-weight: 600;
 }

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

 .card-theme {
     background: var(--card-bg);
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     box-shadow: 0 2px 4px var(--card-shadow);
 }

 /* === BUTTONS === */
 .btn {
     padding: 0.75rem 1.5rem;
     border: none;
     border-radius: var(--border-radius);
     font-weight: 500;
     text-decoration: none;
     display: inline-block;
     cursor: pointer;
     transition: var(--theme-transition);
     font-size: 0.9rem;
     line-height: 1.5;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
     user-select: none;
     position: relative;
     overflow: hidden;
 }

 .btn:before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .btn:hover:before {
     left: 100%;
 }

 .btn-primary {
     background: var(--primary);
     color: white;
     box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
 }

 .btn-primary:hover {
     background: #0056b3;
     transform: none;
     box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
 }

 .btn-success {
     background: var(--success);
     color: white;
     box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
 }

 .btn-success:hover {
     background: #218838;
     transform: none;
     box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
 }

 .btn-secondary {
     background: var(--secondary);
     color: white;
     box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
 }

 .btn-secondary:hover {
     background: #545b62;
     transform: none;
     box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
 }

 .btn-outline-secondary {
     background: transparent;
     border: 1px solid var(--secondary);
     color: var(--secondary);
 }

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

 .btn-sm {
     padding: 0.5rem 1rem;
     font-size: 0.8rem;
     border-radius: var(--border-radius-sm);
 }

 .btn-lg {
     padding: 0.375rem 0.75rem;
     font-size: 1rem;
     line-height: 1.5;
     border-radius: var(--border-radius);
 }

 .btn-secondary:hover {
     background: #545b62;
 }

 .btn-outline-modern {
     background: transparent;
     border: 1px solid var(--card-border);
     color: var(--text-primary);
     padding: 0.5rem 1rem;
     border-radius: var(--border-radius);
     cursor: pointer;
     transition: var(--theme-transition);
 }

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

 .btn-action {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.5rem;
     padding: 1rem;
     border-radius: var(--border-radius);
     text-decoration: none;
     transition: var(--theme-transition);
     text-align: center;
     color: white;
 }

 .btn-action:hover {
     transform: none;
     box-shadow: 0 4px 8px var(--card-shadow);
 }

 .btn-primary-theme {
     background: var(--primary);
 }

 .btn-success-theme {
     background: var(--success);
 }

 .btn-info-theme {
     background: var(--info);
 }

 .btn-warning-theme {
     background: var(--warning);
 }

 .btn-danger-theme {
     background: var(--danger);
 }

 .btn-secondary-theme {
     background: var(--secondary);
 }

 /* === FORMS === */
 .form-control {
     width: 100%;
     padding: 0.75rem;
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
     background: var(--card-bg);
     color: var(--text-primary);
     font-size: 0.9rem;
     transition: var(--theme-transition);
     box-shadow: 0 1px 3px var(--card-shadow);
 }

 .form-control:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .15), 0 2px 8px var(--card-shadow);
     transform: none;
 }

 .form-control:hover {
     border-color: var(--primary);
     box-shadow: 0 2px 6px var(--card-shadow);
 }

 .form-group {
     margin-bottom: 1.5rem;
 }

 .form-group label {
     display: block;
     margin-bottom: 0.75rem;
     font-weight: 600;
     color: var(--text-primary);
     font-size: 0.9rem;
 }

 /* === TABLES === */
 .table {
     width: 100%;
     border-collapse: collapse;
     background: var(--card-bg);
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: 0 2px 8px var(--card-shadow);
 }

 .table th,
 .table td {
     padding: 1rem 0.75rem;
     border-bottom: 1px solid var(--card-border);
     text-align: left;
     transition: var(--theme-transition);
 }

 .table th {
     background: var(--bg-secondary);
     font-weight: 600;
     color: var(--text-primary);
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .table tbody tr {
     transition: var(--theme-transition);
 }

 .table tbody tr:hover {
     background: var(--bg-secondary);
     transform: scale(1.01);
 }

 .table-striped tbody tr:nth-child(odd) {
     background: rgba(0, 0, 0, 0.02);
 }

 .table-striped tbody tr:nth-child(odd):hover {
     background: var(--bg-secondary);
 }

 /* === LAYOUT === */
 /* container-fluid and row styles are defined in the grid system above */

 .col-12 {
     flex: 0 0 100%;
     max-width: 100%;
     padding: 0.75rem;
 }

 .col-6 {
     flex: 0 0 50%;
     max-width: 50%;
     padding: 0.75rem;
 }

 .col-md-3 {
     flex: 0 0 25%;
     max-width: 25%;
     padding: 0.75rem;
 }

 .col-md-4 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding: 0.75rem;
 }

 .col-md-6 {
     flex: 0 0 50%;
     max-width: 50%;
     padding: 0.75rem;
 }

 .col-lg-4 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding: 0.5rem;
 }

 .col-lg-6 {
     flex: 0 0 50%;
     max-width: 50%;
     padding: 0.5rem;
 }

 .col-lg-8 {
     flex: 0 0 66.666%;
     max-width: 66.666%;
     padding: 0.5rem;
 }

 .col-lg-9 {
     flex: 0 0 75%;
     max-width: 75%;
     padding: 0.5rem;
 }

 .col-xl-2 {
     flex: 0 0 16.666%;
     max-width: 16.666%;
     padding: 0.5rem;
 }

 .col-xl-3 {
     flex: 0 0 25%;
     max-width: 25%;
     padding: 0.5rem;
 }

 .col-xl-9 {
     flex: 0 0 75%;
     max-width: 75%;
     padding: 0.5rem;
 }

 .col-sm-6 {
     flex: 0 0 50%;
     max-width: 50%;
     padding: 0.5rem;
 }

 /* === UTILITIES === */
 .text-center {
     text-align: center;
 }

 .text-right {
     text-align: right;
 }

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

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

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

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

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

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

 .text-white {
     color: white !important;
 }

 .mb-0 {
     margin-bottom: 0;
 }

 .mb-1 {
     margin-bottom: 0.25rem;
 }

 .mb-2 {
     margin-bottom: 0.5rem;
 }

 .mb-3 {
     margin-bottom: 1rem;
 }

 .mb-4 {
     margin-bottom: 1.5rem;
 }

 .w-100 {
     width: 100% !important;
 }

 .h-100 {
     height: 100% !important;
 }

 .border-right {
     border-right: 1px solid var(--card-border) !important;
 }

 .border-bottom {
     border-bottom: 1px solid var(--card-border) !important;
 }

 .font-weight-medium {
     font-weight: 500 !important;
 }

 .font-weight-600 {
     font-weight: 600 !important;
 }

 .mr-2 {
     margin-right: 0.5rem !important;
 }

 .mt-2 {
     margin-top: 0.5rem !important;
 }

 .mt-lg-0 {
     margin-top: 0 !important;
 }

 .pt-3 {
     padding-top: 1rem !important;
 }

 .fade-in {
     animation: fadeIn 0.3s ease-in;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 /* === DISPLAY UTILITIES === */
 .d-flex {
     display: flex !important;
 }

 .d-block {
     display: block !important;
 }

 .d-none {
     display: none !important;
 }

 .flex-wrap {
     flex-wrap: wrap !important;
 }

 .flex-direction-column {
     flex-direction: column !important;
 }

 .d-flex {
     display: flex;
 }

 .align-items-center {
     align-items: center;
 }

 .gap-2 {
     gap: 0.5rem;
 }

 .justify-content-between {
     justify-content: space-between;
 }

 .align-items-center {
     align-items: center;
 }

 .text-lg-right {
     text-align: right;
 }

 .mt-3 {
     margin-top: 1rem;
 }

 .mt-lg-0 {
     margin-top: 0;
 }

 .btn-group {
     display: flex;
     gap: 0.25rem;
 }

 .btn-sm {
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
 }

 .dropdown-toggle::after {
     content: '▼';
     margin-left: 0.5rem;
     font-size: 0.75rem;
 }

 /* === ACTIVITY STYLES === */
 .activity-list {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .activity-item {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .activity-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1rem;
 }

 .activity-icon.bg-primary {
     background: var(--primary);
 }

 .activity-icon.bg-success {
     background: var(--success);
 }

 .activity-icon.bg-warning {
     background: var(--warning);
 }

 .activity-content {
     flex: 1;
 }

 .activity-title {
     font-weight: 600;
     margin-bottom: 0.25rem;
 }

 .activity-description {
     color: var(--text-muted);
     font-size: 0.875rem;
     margin-bottom: 0.25rem;
 }

 .activity-time {
     color: var(--text-muted);
     font-size: 0.75rem;
 }

 /* === PROGRESS BARS === */
 .progress-label {
     display: flex;
     justify-content: space-between;
     margin-bottom: 0.5rem;
 }

 .progress-label-title {
     font-weight: 500;
     color: var(--text-primary);
 }

 .progress-label-value {
     font-weight: 600;
 }

 .progress-modern {
     height: 8px;
     background: var(--bg-secondary);
     border-radius: 4px;
     overflow: hidden;
 }

 .progress-bar-modern {
     height: 100%;
     border-radius: 4px;
     transition: width 0.3s ease;
 }

 .progress-bar-modern.bg-success {
     background: var(--success);
 }

 .progress-bar-modern.bg-info {
     background: var(--info);
 }

 .progress-bar-modern.bg-warning {
     background: var(--warning);
 }

 /* === RESPONSIVE === */
 @media (max-width: 768px) {

     .col-md-3,
     .col-md-4,
     .col-md-6,
     .col-lg-3,
     .col-lg-4,
     .col-lg-6,
     .col-lg-8,
     .col-lg-9,
     .col-xl-2,
     .col-xl-3,
     .col-xl-9,
     .col-sm-6 {
         flex: 0 0 100%;
         max-width: 100%;
     }

     .card-header {
         padding: 0.75rem;
     }

     .card-body {
         padding: 0.75rem;
     }

     .value {
         font-size: 1.5rem;
     }

     .text-lg-right {
         text-align: left;
     }

     .mt-lg-0 {
         margin-top: 1rem;
     }

     /* Sidebar responsive behavior */
     .theme-sidebar {
         position: fixed;
         top: 0;
         left: -250px;
         height: 100vh;
         z-index: 1000;
         transition: left 0.3s ease;
     }

     .theme-sidebar.show {
         left: 0;
     }

     #page-content-wrapper {
         margin-left: 0;
     }

     .navbar-expand-lg .navbar-collapse {
         display: flex !important;
         flex-basis: auto;
     }

     .navbar-toggler {
         display: block;
     }
 }

 /* === ENHANCED COMPONENTS === */
 .page-header {
     background: var(--card-bg);
     border-radius: var(--border-radius-lg);
     padding: 2rem;
     margin-bottom: 2rem;
     box-shadow: 0 4px 12px var(--card-shadow);
     border: 1px solid var(--card-border);
 }

 .page-header h1 {
     margin: 0 0 0.5rem 0;
     color: var(--text-primary);
     font-weight: 700;
 }

 .page-header .description {
     color: var(--text-muted);
     margin: 0;
     font-size: 1.1rem;
 }

 .content-section {
     background: var(--card-bg);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     box-shadow: 0 2px 8px var(--card-shadow);
     border: 1px solid var(--card-border);
     transition: var(--theme-transition);
 }

 .content-section:hover {
     box-shadow: 0 4px 16px var(--card-shadow-hover);
     transform: none;
 }

 /* === BADGE ENHANCEMENTS === */
 .badge {
     display: inline-block;
     padding: 0.375rem 0.75rem;
     font-size: 0.75rem;
     font-weight: 600;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
     vertical-align: baseline;
     border-radius: var(--border-radius-sm);
     transition: var(--theme-transition);
 }

 /* Compact badge variant for dense table cells (tracking numbers, status chips) */
 .badge-compact {
     padding: 0.15em 0.4em;
     /* slightly smaller than default badge */
     font-size: 85%;
     font-weight: 600;
     line-height: 1;
     vertical-align: middle;
     border-radius: calc(var(--border-radius-sm) * 0.9);
 }

 /* Force compact behavior inside the active orders table to avoid full-width pills */
 #activeOrdersTable .badge-compact {
     display: inline-block !important;
     padding: 0.18rem 0.5rem !important;
     font-size: 0.85rem !important;
     max-width: 220px;
     /* prevent overflow while allowing reasonably long tracking numbers */
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     text-align: left;
 }



 .badge-primary {
     background: var(--primary);
     color: white;
 }

 .badge-success {
     background: var(--success);
     color: white;
 }

 .badge-danger {
     background: var(--danger);
     color: white;
 }

 .badge-warning {
     background: var(--warning);
     color: #212529;
 }

 .badge:hover {
     transform: scale(1.1);
 }

 /* === INPUT GROUP ENHANCEMENTS === */
 .input-group {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     width: 100%;
 }

 .input-group>.form-control {
     position: relative;
     flex: 1 1 auto;
     width: 1%;
     margin-bottom: 0;
 }

 .input-group-append {
     margin-left: -1px;
     display: flex;
 }

 .input-group-text {
     display: flex;
     align-items: center;
     padding: 0.75rem;
     margin-bottom: 0;
     font-size: 0.9rem;
     font-weight: 400;
     line-height: 1.5;
     color: var(--text-muted);
     text-align: center;
     white-space: nowrap;
     background-color: var(--bg-secondary);
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
 }

 /* === LOGIN PAGE STYLES === */
 .login-page {
     background: linear-gradient(135deg, var(--primary) 0%, #6610f2 100%);
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
 }

 .login-container {
     width: 100%;
     max-width: 400px;
     margin: 0 auto;
 }

 .login-card {
     background: var(--card-bg);
     border-radius: var(--border-radius-lg);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     padding: 2rem;
     margin-bottom: 1rem;
     border: 1px solid var(--card-border);
     transition: var(--theme-transition);
 }

 .login-header {
     margin-bottom: 1.5rem;
 }

 .login-logo {
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .login-subtitle {
     color: var(--text-muted);
     font-size: 0.95rem;
 }

 .login-form {
     width: 100%;
 }

 .login-form-group {
     margin-bottom: 1rem;
 }

 .login-form-label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
     color: var(--text-primary);
     font-size: 0.875rem;
 }

 .login-input-group {
     position: relative;
     display: flex;
     align-items: center;
 }

 .login-input-icon {
     position: absolute;
     left: 0.75rem;
     color: var(--text-muted);
     z-index: 2;
     font-size: 0.875rem;
 }

 .login-form-input {
     width: 100%;
     padding: 0.75rem 0.75rem 0.75rem 2.5rem;
     font-size: 0.875rem;
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
     background-color: var(--bg-primary);
     color: var(--text-primary);
     transition: var(--theme-transition);
 }

 .login-form-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .login-form-input.is-invalid {
     border-color: var(--danger);
     background-image: none;
 }

 .login-form-input.is-invalid:focus {
     border-color: var(--danger);
     box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
 }

 .password-toggle {
     position: absolute;
     right: 0.75rem;
     color: var(--text-muted);
     cursor: pointer;
     z-index: 2;
     font-size: 0.875rem;
     transition: var(--theme-transition);
 }

 .password-toggle:hover {
     color: var(--text-primary);
 }

 .login-invalid-feedback {
     display: block;
     width: 100%;
     margin-top: 0.25rem;
     font-size: 0.75rem;
     color: var(--danger);
 }

 .login-checkbox-group {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
 }

 .login-checkbox {
     width: 1rem;
     height: 1rem;
     margin-right: 0.5rem;
     accent-color: var(--primary);
 }

 .login-checkbox-label {
     font-size: 0.875rem;
     color: var(--text-secondary);
     cursor: pointer;
     user-select: none;
 }

 .btn-login {
     width: 100%;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     font-weight: 500;
     border: none;
     border-radius: var(--border-radius);
     background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%);
     color: white;
     cursor: pointer;
     transition: var(--theme-transition);
     margin-bottom: 1rem;
 }

 .btn-login:hover {
     background: linear-gradient(135deg, #0056b3 0%, var(--primary) 100%);
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
 }

 .btn-login:active {
     transform: translateY(0);
 }

 .login-forgot-password {
     text-align: center;
     margin-bottom: 1rem;
 }

 .login-forgot-password a {
     color: var(--text-muted);
     font-size: 0.875rem;
     text-decoration: none;
     transition: var(--theme-transition);
 }

 .login-forgot-password a:hover {
     color: var(--primary);
 }

 .login-divider {
     position: relative;
     text-align: center;
     margin: 1.5rem 0;
     color: var(--text-muted);
     font-size: 0.875rem;
 }

 .login-divider::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 1px;
     background-color: var(--card-border);
     z-index: 1;
 }

 .login-divider span {
     background-color: var(--card-bg);
     padding: 0 1rem;
     position: relative;
     z-index: 2;
 }

 .btn-register {
     width: 100%;
     padding: 0.75rem 1rem;
     font-size: 0.875rem;
     font-weight: 500;
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
     background-color: transparent;
     color: var(--text-primary);
     cursor: pointer;
     transition: var(--theme-transition);
     text-decoration: none;
     display: inline-block;
     text-align: center;
 }

 .btn-register:hover {
     border-color: var(--primary);
     color: var(--primary);
     background-color: rgba(0, 123, 255, 0.1);
 }

 .login-footer {
     text-align: center;
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.875rem;
 }

 .dev-tools {
     margin-top: 1rem;
     padding: 1rem;
     background-color: rgba(255, 193, 7, 0.1);
     border-radius: var(--border-radius);
     border: 1px solid rgba(255, 193, 7, 0.3);
 }

 .btn-dev {
     background-color: var(--warning);
     color: #212529;
     border: none;
     padding: 0.5rem 0.75rem;
     margin: 0.25rem;
     border-radius: var(--border-radius-sm);
     font-size: 0.75rem;
     font-weight: 500;
     cursor: pointer;
     transition: var(--theme-transition);
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
     min-width: 120px;
     justify-content: center;
     text-align: center;
 }

 .btn-dev:hover {
     background-color: #e0a800;
     transform: translateY(-1px);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .btn-dev:active {
     transform: translateY(0);
 }

 .btn-dev i {
     font-size: 0.875rem;
 }

 /* Modal Styles */
 .modal-modern {
     display: none;
     position: fixed;
     z-index: 1050;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.5);
     transition: var(--theme-transition);
 }

 .modal-modern.show {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .modal-dialog-modern {
     position: relative;
     width: auto;
     max-width: 500px;
     margin: 1.75rem;
 }

 .modal-content-modern {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
     background-color: var(--card-bg);
     background-clip: padding-box;
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius-lg);
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }

 .modal-header-modern {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 1rem 1.5rem;
     border-bottom: 1px solid var(--card-border);
 }

 .modal-title-modern {
     margin: 0;
     font-size: 1.25rem;
     font-weight: 500;
     color: var(--text-primary);
 }

 .modal-close-modern {
     background: none;
     border: none;
     font-size: 1.5rem;
     color: var(--text-muted);
     cursor: pointer;
     transition: var(--theme-transition);
 }

 .modal-close-modern:hover {
     color: var(--text-primary);
 }

 .modal-body-modern {
     position: relative;
     flex: 1 1 auto;
     padding: 1.5rem;
     text-align: center;
 }

 .modal-icon {
     font-size: 3rem;
     color: var(--primary);
     margin-bottom: 1rem;
 }

 .modal-footer-modern {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem 1.5rem;
     border-top: 1px solid var(--card-border);
 }

 /* Bootstrap Modal Classes for Compatibility */
 .modal {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1050;
     display: none;
     width: 100%;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     outline: 0;
 }

 .modal.fade {
     transition: opacity 0.15s linear;
     opacity: 0;
 }

 .modal.show {
     display: block !important;
     opacity: 1;
 }

 .modal-dialog {
     position: relative;
     width: auto;
     margin: 0.5rem;
     pointer-events: none;
 }

 .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
     transform: translate(0, -50px);
 }

 .modal.show .modal-dialog {
     transform: none;
 }

 .modal-dialog-scrollable {
     height: calc(100% - 1rem);
 }

 .modal-dialog-centered {
     display: flex;
     align-items: center;
     min-height: calc(100% - 1rem);
 }

 .modal-content {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
     pointer-events: auto;
     background-color: var(--bg-primary);
     background-clip: padding-box;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: var(--border-radius-lg);
     box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
     outline: 0;
 }

 .modal-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1040;
     width: 100vw;
     height: 100vh;
     background-color: #000;
 }

 .modal-backdrop.fade {
     opacity: 0;
 }

 .modal-backdrop.show {
     opacity: 0.5;
 }

 .modal-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 1rem 1rem;
     border-bottom: 1px solid var(--border-color, #dee2e6);
     border-top-left-radius: calc(var(--border-radius-lg) - 1px);
     border-top-right-radius: calc(var(--border-radius-lg) - 1px);
 }

 .modal-title {
     margin-bottom: 0;
     line-height: 1.5;
     color: var(--text-primary);
 }

 .modal-body {
     position: relative;
     flex: 1 1 auto;
     padding: 1rem;
 }

 .modal-footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: flex-end;
     padding: 0.75rem;
     border-top: 1px solid var(--border-color, #dee2e6);
     border-bottom-right-radius: calc(var(--border-radius-lg) - 1px);
     border-bottom-left-radius: calc(var(--border-radius-lg) - 1px);
 }

 .modal-lg {
     max-width: 800px;
 }

 .modal-sm {
     max-width: 300px;
 }

 .close {
     float: right;
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1;
     color: #000;
     text-shadow: 0 1px 0 #fff;
     opacity: 0.5;
     background: transparent;
     border: 0;
     cursor: pointer;
 }

 .close:hover {
     color: #000;
     text-decoration: none;
     opacity: 0.75;
 }

 @media (min-width: 576px) {
     .modal-dialog {
         max-width: 500px;
         margin: 1.75rem auto;
     }

     .modal-dialog-scrollable {
         height: calc(100% - 3.5rem);
     }

     .modal-dialog-centered {
         min-height: calc(100% - 3.5rem);
     }

     .modal-sm {
         max-width: 300px;
     }
 }

 @media (min-width: 992px) {
     .modal-lg {
         max-width: 800px;
     }

     .modal-larger {
         max-width: 1000px;
         width: 75vw;
     }
 }

 @media (max-width: 991px) {
     .modal-larger {
         max-width: 90vw;
         width: 85vw;
         margin: 0.5rem;
     }
 }

 /* Enhanced modal styling for larger modals */
 .modal-larger .modal-body {
     padding: 0.75rem;
     max-height: none;
     overflow: visible;
 }

 .modal-larger .modal-dialog {
     margin: 0.75rem auto;
 }

 /* Compact modal spacing */
 .modal-larger .row.mb-4 {
     margin-bottom: 1rem !important;
 }

 .modal-larger .row.mb-3 {
     margin-bottom: 0.75rem !important;
 }

 .modal-larger .theme-card {
     margin-bottom: 0.75rem;
 }

 .modal-larger .form-group {
     margin-bottom: 0.75rem;
 }

 .modal-larger .card-body {
     padding: 0.75rem;
 }

 .modal-larger .alert {
     padding: 0.5rem 0.75rem;
     margin-bottom: 0.75rem;
 }

 /* Creative compact form controls */
 .modal-larger .form-control {
     padding: 0.375rem 0.75rem;
     font-size: 0.875rem;
 }

 .modal-larger .form-control-lg {
     padding: 0.5rem 1rem;
     font-size: 0.95rem;
 }

 .modal-larger .input-group-text {
     padding: 0.375rem 0.75rem;
 }

 /* Creative compact design elements */
 .modal-larger .creation-mode-selector {
     display: flex;
     gap: 0.75rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .modal-larger .mode-card {
     padding: 0.75rem;
     border-radius: 8px;
     transition: all 0.2s ease;
     border: 2px solid transparent;
     text-align: center;
     min-width: 140px;
 }

 .modal-larger .mode-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }

 .modal-larger .form-check-inline {
     margin-right: 0.5rem;
 }

 .modal-larger .format-example {
     padding: 0.5rem;
     background: rgba(0, 0, 0, 0.02);
     border-radius: 6px;
     margin-bottom: 0.5rem;
 }

 /* Compact card headers */
 .modal-larger .card-header {
     padding: 0.5rem 0.75rem;
 }

 .modal-larger .card-header h6 {
     font-size: 0.9rem;
 }

 /* Reduce alert spacing */
 .modal-larger .alert {
     padding: 0.5rem 0.75rem;
     margin-bottom: 0.75rem;
     font-size: 0.85rem;
 }

 /* Compact form labels */
 .modal-larger .form-label {
     font-size: 0.8rem;
     margin-bottom: 0.25rem;
     font-weight: 600;
 }

 /* Creative button spacing */
 .modal-larger .modal-footer {
     padding: 0.75rem;
     border-top: 1px solid var(--border-color, #dee2e6);
 }

 .modal-larger .modal-footer .btn {
     padding: 0.5rem 1.5rem;
     font-size: 0.9rem;
 }

 /* Creative range preview styling */
 .modal-larger #range_preview {
     font-family: 'Courier New', monospace;
     font-size: 0.8rem;
     line-height: 1.3;
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     border: 1px solid #dee2e6;
     border-radius: 6px;
 }

 /* Compact nested cards in range form */
 .modal-larger .theme-card .theme-card {
     margin-bottom: 0.5rem;
 }

 .modal-larger .theme-card .theme-card .card-header {
     padding: 0.4rem 0.6rem;
 }

 .modal-larger .theme-card .theme-card .card-body {
     padding: 0.6rem;
 }

 /* Creative form control focus states */
 .modal-larger .form-control:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
     transform: scale(1.01);
     transition: all 0.2s ease;
 }

 /* Ultra-compact row spacing */
 .modal-larger .row {
     margin-left: -0.25rem;
     margin-right: -0.25rem;
 }

 .modal-larger .row>[class*="col-"] {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
 }

 /* Creative icon spacing */
 .modal-larger .fas {
     vertical-align: middle;
 }

 .modal-larger .form-label .fas {
     margin-right: 0.3rem;
 }

 /* Responsive Design */
 @media (max-width: 576px) {
     .login-container {
         padding: 0.5rem;
     }

     .login-card {
         padding: 1.5rem;
     }

     .login-logo {
         font-size: 1.5rem;
     }
 }

 /* Dark Theme Adjustments */
 [data-theme="dark"] .login-page {
     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
 }

 [data-theme="dark"] .login-footer {
     color: rgba(255, 255, 255, 0.6);
 }

 /* ------------------------------------------------------------------ */
 /* Added: Minimal view-specific classes discovered in app/views/*.php  */
 /* Keep small and non-invasive — prefer variables and existing utilities */
 /* ------------------------------------------------------------------ */
 .cart-section {
     padding: 0.5rem;
 }

 .cart-line {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     padding: 0.5rem 0.25rem;
     border-bottom: 1px solid var(--card-border);
 }

 .cart-line .qty {
     min-width: 48px;
     text-align: center;
 }

 .add-to-cart-btn {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0.35rem 0.6rem;
     border-radius: var(--border-radius-sm);
     transition: var(--theme-transition);
 }

 .add-to-cart-btn:hover {
     transform: translateY(-1px);
 }

 .filter-controls {
     display: flex;
     gap: var(--spacing-sm, 0.5rem);
     flex-wrap: wrap;
     align-items: center;
 }

 .filter-section {
     padding: 0.5rem 0;
 }

 .item-card,
 .existing-product-item {
     display: flex;
     gap: 0.75rem;
     padding: 0.6rem;
     align-items: center;
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
     background: var(--card-bg);
 }

 /* Product card - default block display for grid layout */
 .product-card {
     border: 1px solid transparent;
     border-radius: var(--border-radius);
     transition: box-shadow 150ms ease, border-color 150ms ease, transform 150ms ease;
     background: var(--card-bg);
 }

 /* Product card in list view - use flex layout */
 .product-item.list-view .product-card {
     display: flex;
     gap: 0.75rem;
     padding: 0.6rem;
     align-items: center;
 }

 .item-card:hover,
 .product-card:hover {
     box-shadow: var(--card-shadow-hover);
     transform: translateY(-2px);
     border-color: rgba(0, 0, 0, 0.04);
 }

 /* Override product grid to force responsive behavior */
 .product-item {
     width: 50% !important;
     /* Default: 2 columns */
     flex: 0 0 50% !important;
     max-width: 50% !important;
     min-width: 0 !important;
     box-sizing: border-box !important;
 }

 /* SM breakpoint: 4 columns */
 @media (min-width: 576px) {
     .product-item {
         width: 25% !important;
         flex: 0 0 25% !important;
         max-width: 25% !important;
     }
 }

 /* MD breakpoint: 6 columns */
 @media (min-width: 768px) {
     .product-item {
         width: 16.666667% !important;
         flex: 0 0 16.666667% !important;
         max-width: 16.666667% !important;
     }
 }

 /* LG and XL breakpoint: 6 columns */
 @media (min-width: 992px) {
     .product-item {
         width: 16.666667% !important;
         flex: 0 0 16.666667% !important;
         max-width: 16.666667% !important;
     }
 }

 .product-item .card {
     width: 100% !important;
     min-width: 0 !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
 }

 .product-avatar-sm {
     width: 48px;
     height: 48px;
     object-fit: cover;
     border-radius: 6px;
 }

 .product-avatar-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     object-fit: cover;
 }

 .inventory-badge,
 .location-badge,
 .margin-badge {
     display: inline-block;
     padding: 0.2rem 0.4rem;
     font-size: 0.75rem;
     border-radius: 0.35rem;
     background: var(--bg-secondary);
     color: var(--text-secondary);
 }

 .results-counter {
     font-size: 0.9rem;
     color: var(--text-secondary);
 }

 .enhanced-search {
     display: flex;
     gap: 0.5rem;
     align-items: center;
 }

 .enhanced-table-container {
     width: 100%;
     overflow-x: auto;
 }

 .loading-spinner {
     display: inline-block;
     width: 1rem;
     height: 1rem;
     border: 2px solid rgba(0, 0, 0, 0.08);
     border-top-color: var(--primary);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 .sticky-offset-top {
     position: sticky;
     top: 1rem;
 }

 .cart-body-scroll {
     max-height: 420px;
     overflow-y: auto;
 }

 /* 70/30 layout helpers (referenced by purchases add view) */
 .col-lg-70 {
     flex: 0 0 70%;
     max-width: 70%;
 }

 .col-lg-30 {
     flex: 0 0 30%;
     max-width: 30%;
 }

 /* small KPI card helpers */
 .kpi-card:not(.kpi-gradient-warning):not(.kpi-gradient-info):not(.kpi-gradient-success):not(.kpi-gradient-primary):not(.kpi-gradient-danger) {
     /* Only apply the default card background for KPI cards that do NOT use a gradient class */
     padding: 0.75rem;
     border-radius: var(--border-radius);
     background: var(--card-bg);
     border: 1px solid var(--card-border);
 }

 .kpi-card .kpi-card-value {
     font-size: 1.25rem;
     font-weight: 700;
 }

 /* minor helpers used across views */
 .filter-controls .form-control {
     min-width: 160px;
 }

 .flex-fill {
     flex: 1 1 auto;
 }

 .results-empty {
     padding: 2rem;
     text-align: center;
     color: var(--text-muted);
 }

 /* toast position helper used by purchase toasts */
 .toast-pos-top-right {
     position: fixed;
     top: 1rem;
     right: 1rem;
     z-index: 1055;
 }

 /* keep additions compact and theme-friendly */
 /* End additions */

 /* ------------------------------------------------------------------ */
 /* Page-specific fixes: Suppliers index (small, safe additions)        */
 /* These cover alerts, pagination, KPI sub-elements, table helpers,    */
 /* sortable header hinting, and small button / badge variants used by  */
 /* the suppliers views.                                                */
 /* ------------------------------------------------------------------ */
 .alert {
     padding: 0.65rem 1rem;
     border-radius: var(--border-radius-sm);
     margin-bottom: 0.75rem;
 }

 .alert-danger {
     background: rgba(220, 53, 69, 0.08);
     color: var(--danger);
     border: 1px solid rgba(220, 53, 69, 0.12);
 }

 .alert-info {
     background: rgba(23, 162, 184, 0.06);
     color: var(--info);
     border: 1px solid rgba(23, 162, 184, 0.08);
 }

 .badge-pill {
     padding-right: 0.6rem;
     padding-left: 0.6rem;
     border-radius: 999px;
 }

 .bg-light {
     background-color: var(--bg-light) !important;
 }

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

 .btn-group-sm>.btn,
 .btn-group-sm .btn {
     padding: 0.25rem 0.5rem;
     font-size: 0.85rem;
 }

 .btn-outline-danger {
     color: var(--danger);
     border: 1px solid rgba(220, 53, 69, 0.15);
     background: transparent;
 }

 .btn-outline-success {
     color: var(--success);
     border: 1px solid rgba(40, 167, 69, 0.12);
 }

 .btn-outline-warning {
     color: var(--warning);
     border: 1px solid rgba(255, 193, 7, 0.12);
 }

 .circular-progress {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .fa-spin,
 .fa-spinner {
     animation: spin 1s linear infinite;
 }

 .kpi-card-header {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     padding: 0.6rem;
     border-bottom: 1px solid var(--card-border);
 }

 .kpi-card-icon {
     font-size: 1.25rem;
     color: var(--primary);
 }

 .kpi-card-body {
     padding: 0.75rem;
 }

 .kpi-card-label {
     font-size: 0.8rem;
     color: var(--text-secondary);
 }

 .kpi-card-value {
     font-size: 1.15rem;
     font-weight: 700;
 }

 .pagination {
     display: flex;
     list-style: none;
     gap: 0.5rem;
     padding-left: 0;
 }

 .page-item {
     display: inline-block;
 }

 .page-link {
     display: inline-block;
     padding: 0.35rem 0.6rem;
     border-radius: 0.35rem;
     border: 1px solid var(--card-border);
     background: var(--card-bg);
     color: var(--text-primary);
 }

 .pagination-sm .page-link {
     padding: 0.25rem 0.45rem;
     font-size: 0.875rem;
 }

 .table-responsive {
     width: 100%;
     overflow-x: auto;
     /* allow vertically overflowing elements (dropdowns) to be visible
          while still enabling horizontal scrolling for wide tables */
     overflow-y: visible;
 }

 /* Ensure dropdown menus inside responsive tables are not clipped by
    the table container. This keeps ellipsis menus readable and above
    sticky headers or table content. */
 .table-responsive .dropdown-menu {
     /* keep absolute positioning but allow it to render outside the
         scrolling box */
     position: absolute;
     z-index: 10650 !important;
 }

 .sortable {
     cursor: pointer;
 }

 .sortable i.fas.fa-sort {
     opacity: 0.5;
 }

 .sortable:hover {
     background: rgba(0, 0, 0, 0.02);
 }

 .supplier-checkbox {
     width: 18px;
     height: 18px;
     accent-color: var(--primary);
 }

 .product-row,
 .products-list {
     display: block;
     width: 100%;
 }

 .score-text {
     font-weight: 600;
     color: var(--text-primary);
 }

 .special {
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
 }

 /* end suppliers page additions */

 /* ------------------------------------------------------------------ */
 /* KPI GRADIENT OVERRIDES (last-resort overrides to ensure gradients)  */
 /* Placed at end to win over earlier `.card` background resets.         */
 /* ------------------------------------------------------------------ */
 .kpi-card.kpi-gradient-warning {
     background: linear-gradient(135deg, #ffd966 0, #ffc107 100%) !important;
     color: rgba(0, 0, 0, 0.85) !important;
 }

 .kpi-card.kpi-gradient-info {
     background: linear-gradient(135deg, #85d7ff 0, #17a2b8 100%) !important;
     color: #ffffff !important;
 }

 .kpi-card.kpi-gradient-success {
     background: linear-gradient(135deg, #b6f6c9 0, #28a745 100%) !important;
     color: rgba(0, 0, 0, 0.85) !important;
 }

 .kpi-card.kpi-gradient-primary {
     background: linear-gradient(135deg, #b6d9ff 0, #007bff 100%) !important;
     color: #ffffff !important;
 }

 .kpi-card.kpi-gradient-danger {
     background: linear-gradient(135deg, #ffb3b3 0, #dc3545 100%) !important;
     color: #ffffff !important;
 }

 .kpi-card .kpi-body {
     color: inherit !important;
 }

 .kpi-card .kpi-count,
 .kpi-card .kpi-value,
 .kpi-card .kpi-icon {
     color: inherit !important;
 }

 /* === LOCATION MANAGEMENT STYLES === */
 .location-card {
     transition: all 0.2s ease;
     border-left: 4px solid var(--primary);
 }

 .location-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .location-type-dock {
     border-left-color: #e74c3c;
 }

 .location-type-receiving {
     border-left-color: #3498db;
 }

 .location-type-storage {
     border-left-color: #2ecc71;
 }

 .location-type-bin {
     border-left-color: #f39c12;
 }

 .location-card .text-right {
     min-width: 80px;
 }

 .location-card .text-right .small {
     font-size: 0.75rem;
     line-height: 1.2;
     margin-bottom: 2px;
 }

 .location-card .text-right .small i {
     width: 12px;
     text-align: center;
     margin-right: 4px;
 }

 .clickable-card:hover {
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
     background-color: rgba(var(--bs-primary-rgb), 0.02);
 }

 .clickable-card:active {
     transform: translateY(-1px);
 }

 .location-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     gap: 1rem;
     margin-top: 1rem;
 }

 /* Statistics cards for locations page */
 .stats-card {
     transition: var(--theme-transition);
     border: 1px solid var(--card-border);
     border-radius: var(--border-radius);
     background: var(--card-bg);
     color: var(--text-primary);
 }

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

 .stats-card .card-body {
     padding: 1.5rem;
 }

 .stats-card h4 {
     font-size: 2rem;
     font-weight: 700;
     color: var(--text-primary);
 }

 .stats-card .text-muted {
     color: var(--text-secondary) !important;
     font-size: 0.875rem;
     font-weight: 500;
 }

 /* 5-column grid for stats cards */
 .stats-grid-5 {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 1rem;
     margin-bottom: 1rem;
 }

 @media (max-width: 768px) {
     .stats-grid-5 {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 480px) {
     .stats-grid-5 {
         grid-template-columns: 1fr;
     }
 }

 /* Enhanced Location Modal Styles */
 .creation-mode-selector {
     display: flex;
     gap: 1rem;
     justify-content: center;
 }

 .mode-option {
     margin-right: 0 !important;
 }

 .mode-option input[type="radio"] {
     display: none;
 }

 .mode-card {
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     text-align: center;
     background: var(--card-bg);
     transition: var(--theme-transition);
     cursor: pointer;
     min-width: 180px;
 }

 .mode-option input[type="radio"]:checked+label .mode-card {
     border-color: var(--primary);
     background: rgba(0, 123, 255, 0.1);
     transform: translateY(-2px);
     box-shadow: var(--card-shadow-hover);
 }

 .mode-card:hover {
     border-color: var(--primary);
     transform: translateY(-2px);
     box-shadow: var(--card-shadow-hover);
 }

 .mode-card h6 {
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .border-left-info {
     border-left: 4px solid var(--info) !important;
 }

 .format-example {
     padding: 0.5rem 0;
 }

 .format-example .badge {
     font-size: 0.875rem;
     margin-right: 0.5rem;
 }

 .form-label {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .form-label i {
     color: var(--primary);
 }

 .input-group-text {
     background: var(--bg-secondary);
     border-color: var(--card-border);
     color: var(--text-secondary);
 }

 .custom-control-label {
     color: var(--text-primary);
     font-weight: 500;
 }

 .modal-header.bg-primary {
     background: linear-gradient(135deg, var(--primary) 0%, #0056b3 100%) !important;
 }

 .modal-footer.bg-light {
     background: var(--bg-secondary) !important;
     border-top: 1px solid var(--card-border);
 }

 .location-zone:hover {
     background-color: #e9ecef !important;
     cursor: pointer;
 }

 /* === TIMELINE STYLES === */
 .timeline {
     position: relative;
     padding-left: 30px;
 }

 .timeline::before {
     content: '';
     position: absolute;
     left: 15px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: #dee2e6;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 20px;
 }

 .timeline-marker {
     position: absolute;
     left: -23px;
     top: 0;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     border: 2px solid #fff;
 }

 /* Admin action grid - keep action cards in a single horizontal row without scrollbar
   Cards will shrink to fit; text may wrap within cards if needed. */
 .admin-action-grid {
     display: flex;
     flex-wrap: nowrap;
     /* keep on one row */
     gap: var(--spacing-sm, 0.5rem);
     overflow-x: hidden;
     /* hide horizontal scrollbar */
     padding-bottom: 0.25rem;
 }

 .admin-action-grid>div {
     /* flexible columns: allow shrinking to fit available space */
     flex: 1 1 0;
     min-width: 0;
     /* important to allow content to shrink */
     max-width: 1fr;
 }

 .admin-action-grid .card-theme {
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
 }

 .admin-action-grid .card-theme:focus,
 .admin-action-grid .card-theme:hover {
     box-shadow: var(--card-shadow-hover);
     transform: translateY(-4px);
 }

 /* Small screen tweaks - reduce padding/font to fit without scroll */
 @media (max-width: 576px) {
     .admin-action-grid {
         gap: var(--spacing-xs, 0.25rem);
     }

     .admin-action-grid .card-theme {
         padding: 0.5rem;
         font-size: 0.9rem;
     }
 }

 /* ===== ENHANCED PURCHASE HISTORY STYLES ===== */
 .purchase-history-container {
     position: relative;
 }

 .purchase-history-filters {
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
     padding: 1rem;
     margin-bottom: 1rem;
     border: 1px solid var(--card-border);
 }

 .purchase-history-table {
     background: var(--card-bg);
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--card-shadow);
 }

 .purchase-history-table th {
     background: var(--bg-secondary);
     color: var(--text-primary);
     font-weight: 600;
     border-bottom: 2px solid var(--card-border);
     padding: 0.75rem 0.5rem;
     font-size: 0.875rem;
 }

 .purchase-history-table tbody tr {
     transition: var(--transition);
     border-bottom: 1px solid var(--card-border);
 }

 .purchase-history-table tbody tr:hover {
     background: var(--bg-secondary);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .purchase-history-table td {
     padding: 0.875rem 0.5rem;
     vertical-align: middle;
     border-top: none;
 }

 /* Purchase status badges */
 .badge-purchase-pending {
     background: linear-gradient(135deg, #ffc107, #ffb300);
     color: #212529;
 }

 .badge-purchase-sent {
     background: linear-gradient(135deg, #17a2b8, #138496);
     color: white;
 }

 .badge-purchase-received {
     background: linear-gradient(135deg, #28a745, #1e7e34);
     color: white;
 }

 .badge-purchase-cancelled {
     background: linear-gradient(135deg, #dc3545, #c82333);
     color: white;
 }

 /* Purchase items modal enhancements */
 .purchase-items-modal .modal-body {
     max-height: 70vh;
     overflow-y: auto;
 }

 .purchase-items-table {
     font-size: 0.9rem;
 }

 .purchase-items-table .product-image {
     width: 40px;
     height: 40px;
     object-fit: cover;
     border-radius: var(--border-radius-sm);
     border: 1px solid var(--card-border);
 }

 .purchase-items-table .product-placeholder {
     width: 40px;
     height: 40px;
     background: var(--bg-secondary);
     border-radius: var(--border-radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid var(--card-border);
 }

 /* Enhanced search and filter styling */
 .purchase-search-container {
     position: relative;
 }

 .purchase-search-container .form-control {
     padding-right: 2.5rem;
 }

 .purchase-search-container .input-group-text {
     background: transparent;
     border-left: none;
     color: var(--text-muted);
 }

 /* Purchase timeline indicators */
 .timeline-indicator {
     position: relative;
     padding-left: 1.5rem;
 }

 .timeline-indicator::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--success);
 }

 .timeline-indicator.overdue::before {
     background: var(--danger);
     animation: pulse 2s infinite;
 }

 .timeline-indicator.due-today::before {
     background: var(--warning);
 }

 /* Purchase amount styling */
 .purchase-amount {
     font-family: 'Courier New', monospace;
     font-weight: 600;
 }

 .purchase-amount .currency {
     font-size: 0.9em;
     opacity: 0.8;
 }

 /* Export/Print button group */
 .purchase-actions {
     background: var(--bg-secondary);
     border-radius: var(--border-radius);
     padding: 0.5rem;
 }

 /* Responsive enhancements */
 @media (max-width: 768px) {
     .purchase-history-table {
         font-size: 0.8rem;
     }

     .purchase-history-table th,
     .purchase-history-table td {
         padding: 0.5rem 0.25rem;
     }

     .purchase-history-filters {
         padding: 0.75rem;
     }

     .purchase-history-filters .form-control {
         margin-bottom: 0.5rem;
     }
 }

 @media (max-width: 576px) {
     .purchase-history-table .btn-group {
         flex-direction: column;
     }

     .purchase-history-table .btn-group .btn {
         border-radius: var(--border-radius-sm) !important;
         margin-bottom: 0.25rem;
     }
 }

 /* Animation for loading states */
 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 .loading-pulse {
     animation: pulse 1.5s ease-in-out infinite;
 }

 /* Table layout fixes */
 .table-layout-fixed {
     table-layout: fixed;
     width: 100%;
 }

 .table-layout-fixed th,
 .table-layout-fixed td {
     word-wrap: break-word;
     overflow-wrap: break-word;
 }

 /* === COMPETITION REPORT STYLES === */
 .bg-warning-light {
     background-color: rgba(255, 193, 7, 0.1);
     border: 1px solid var(--warning);
 }

 [data-theme="dark"] .bg-warning-light {
     background-color: rgba(255, 212, 59, 0.15);
     border: 1px solid var(--warning);
 }

 .supplier-price-card {
     transition: all 0.2s ease;
     min-height: 40px;
     line-height: 1.2;
 }

 .supplier-price-card:hover {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .supplier-price-card .small {
     font-size: 0.85rem;
 }

 .supplier-price-card .badge-sm {
     font-size: 0.7rem;
     padding: 0.2rem 0.4rem;
 }

 .competition-product-section:last-child {
     border-bottom: none !important;
     padding-bottom: 0 !important;
 }

 .target-price-container {
     max-width: 140px;
 }

 .target-price-input {
     font-size: 0.8rem;
 }

 .update-target-btn {
     border-left: none;
     padding: 0.2rem 0.4rem;
 }

 .savings-updating {
     opacity: 0.6;
     transition: opacity 0.3s ease;
 }

 /* Compact negotiation opportunities styling */
 .opportunity-card {
     border: 1px solid var(--warning);
     line-height: 1.2;
     min-height: 60px;
     overflow: visible;
 }

 .opportunity-card .supplier-info {
     min-height: 35px;
 }

 .opportunity-card .row {
     margin-left: -0.25rem;
     margin-right: -0.25rem;
 }

 .opportunity-card .row>[class*="col-"] {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
 }

 .opportunity-card .no-gutters {
     margin-right: 0;
     margin-left: 0;
 }

 .opportunity-card .no-gutters>[class*="col-"] {
     padding-right: 0.25rem;
     padding-left: 0.25rem;
 }

 .opportunity-card .small {
     font-size: 0.8rem;
 }

 .opportunity-card .form-control-sm {
     font-size: 0.8rem;
     padding: 0.2rem 0.4rem;
     height: auto;
 }

 .opportunity-card .input-group-text {
     font-size: 0.75rem;
     padding: 0.2rem 0.3rem;
 }

 .opportunity-card .btn-sm {
     padding: 0.15rem 0.3rem;
     font-size: 0.75rem;
 }

 .opportunity-card small {
     font-size: 0.75rem;
 }

 .contact-actions {
     padding-top: 8px;
     border-top: 1px solid var(--card-border);
     font-size: 0.8rem;
     min-height: 30px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     flex-wrap: wrap;
 }

 .contact-actions .btn-sm {
     padding: 0.15rem 0.3rem;
     font-size: 0.75rem;
     white-space: nowrap;
     margin-bottom: 2px;
 }

 .email-btn {
     display: inline-block !important;
     visibility: visible !important;
 }

 .savings-info {
     text-align: right;
 }

 .delivery-time-container {
     max-width: 100px;
 }

 /* Competition report responsive styles */
 @media (max-width: 768px) {
     .opportunity-card {
         min-height: 90px;
     }

     .target-price-container {
         max-width: 100%;
     }

     .savings-info {
         text-align: left;
         margin-top: 8px;
     }

     .opportunity-card .row {
         margin-bottom: 0;
     }

     .opportunity-card .col-sm-6,
     .opportunity-card .col-sm-12 {
         margin-bottom: 8px;
     }

     .contact-actions {
         margin-top: 5px;
         border-top: none;
         padding-top: 0;
     }
 }

 @media (max-width: 576px) {
     .opportunity-card {
         min-height: 120px;
     }

     .supplier-price-card .d-flex {
         flex-direction: column;
         align-items: flex-start !important;
     }

     .supplier-price-card .text-right {
         text-align: left !important;
         margin-top: 5px;
     }

     .contact-actions {
         justify-content: flex-start;
         padding-top: 5px;
         border-top: none;
     }

     .opportunity-card .row>[class*="col-"] {
         margin-bottom: 8px;
     }
 }

 /* === PUTAWAY 5-COLUMN LAYOUT === */
 @media (min-width: 1200px) {
     .putaway-stats-grid .col-xl-2 {
         flex: 0 0 20%;
         max-width: 20%;
     }

     .putaway-stats-grid .col-xl-3 {
         flex: 0 0 20%;
         max-width: 20%;
     }
 }

 /* === PUTAWAY QUEUE STYLING === */
 #putaway-queue .list-group-item {
     transition: var(--theme-transition);
     border-left: 3px solid transparent;
 }

 #putaway-queue .list-group-item:hover {
     background-color: var(--bg-secondary);
     border-left-color: var(--primary);
     transform: translateX(2px);
 }

 .putaway-priority-normal {
     border-left-color: var(--success) !important;
 }

 .putaway-priority-warning {
     border-left-color: var(--warning) !important;
 }

 .putaway-priority-urgent {
     border-left-color: var(--danger) !important;
 }

 .putaway-queue-stats {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     border-radius: var(--border-radius);
 }

 /* Unique ID Badge Styling */
 .unique-id-badge {
     font-family: 'Courier New', monospace;
     font-size: 0.85rem;
     font-weight: 600;
     letter-spacing: 0.5px;
     padding: 0.35rem 0.6rem;
     border-radius: var(--border-radius-sm);
     background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: var(--transition);
 }

 .unique-id-badge:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

 .unique-id-badge.not-assigned {
     background: linear-gradient(135deg, #6c757d 0%, #545b62 100%);
     font-style: italic;
     font-family: inherit;
     letter-spacing: normal;
 }

 /* POS Discount & Commission System Styles */

 /* Unique ID Scanner Input */
 #unique-id-scanner {
     font-family: 'Courier New', monospace;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 1px;
     border: 2px solid #e9ecef;
     transition: all 0.3s ease;
 }

 #unique-id-scanner:focus {
     border-color: #6f42c1;
     box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.25);
     background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
 }

 #unique-id-scanner.scanning {
     background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
     border-color: #28a745;
 }

 /* Scanned User Info Card */
 #scanned-user-info {
     animation: fadeInSlide 0.3s ease-in-out;
 }

 @keyframes fadeInSlide {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Customer Discount Info */
 #customer-discount-info .row {
     margin-bottom: 0.5rem;
 }

 #customer-discount-info strong {
     font-size: 1.1em;
 }

 #available-credits {
     color: #28a745 !important;
     font-weight: bold;
 }

 #total-earned {
     color: #17a2b8 !important;
     font-weight: bold;
 }

 #credits-to-use {
     border: 2px solid #28a745;
     border-radius: 0.375rem;
 }

 #credits-to-use:focus {
     border-color: #1e7e34;
     box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
 }

 /* Contractor Commission Info */
 #contractor-commission-info .row {
     margin-bottom: 0.5rem;
 }

 #commission-rate {
     color: #ffc107 !important;
     font-weight: bold;
 }

 #pending-commission {
     color: #17a2b8 !important;
     font-weight: bold;
 }

 /* Order Summary Enhancements */
 #discount-section {
     background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
     padding: 0.5rem;
     border-radius: 0.375rem;
     margin-bottom: 1rem;
     border-left: 4px solid #28a745;
 }

 #commission-preview {
     background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
     padding: 0.5rem;
     border-radius: 0.375rem;
     margin-bottom: 1rem;
     border-left: 4px solid #ffc107;
 }

 #credits-earned-preview {
     background: linear-gradient(135deg, #d1ecf1 0%, #bee5eb 100%);
     border-color: #17a2b8;
     animation: pulseGlow 2s infinite;
 }

 @keyframes pulseGlow {
     0% {
         box-shadow: 0 0 5px rgba(23, 162, 184, 0.3);
     }

     50% {
         box-shadow: 0 0 15px rgba(23, 162, 184, 0.6);
     }

     100% {
         box-shadow: 0 0 5px rgba(23, 162, 184, 0.3);
     }
 }

 /* Discount & Commission Success Messages */
 .scan-success-notification {
     background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
     color: white;
     border-radius: 0.5rem;
     animation: slideInRight 0.3s ease-out;
 }

 @keyframes slideInRight {
     from {
         transform: translateX(100%);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 /* POS Receipt Styling for Discounts */
 .receipt-discount-line {
     border-top: 1px dashed #ccc;
     border-bottom: 1px dashed #ccc;
     background: #f8f9fa;
     padding: 0.5rem;
     margin: 0.5rem 0;
 }

 .receipt-commission-note {
     background: #fff3cd;
     border: 1px solid #ffeaa7;
     padding: 0.5rem;
     margin: 0.5rem 0;
     border-radius: 0.25rem;
     font-style: italic;
 }

 /* Responsive Design for Mobile */
 @media (max-width: 768px) {
     #unique-id-scanner {
         font-size: 16px;
         /* Prevent zoom on iOS */
     }

     #customer-discount-info .row,
     #contractor-commission-info .row {
         text-align: center;
     }

     #discount-section,
     #commission-preview {
         padding: 0.75rem;
         font-size: 0.9rem;
     }
 }

 /* High contrast mode support */
 @media (prefers-contrast: high) {
     #unique-id-scanner {
         border-width: 3px;
     }

     #available-credits,
     #total-earned,
     #commission-rate,
     #pending-commission {
         text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
     }
 }

 /* Dark mode support (if implemented) */
 @media (prefers-color-scheme: dark) {
     #discount-section {
         background: linear-gradient(135deg, #1e5128 0%, #2d5a3d 100%);
         color: #fff;
     }

     #commission-preview {
         background: linear-gradient(135deg, #5d4e00 0%, #8a7500 100%);
         color: #fff;
     }

     #credits-earned-preview {
         background: linear-gradient(135deg, #0c4a5a 0%, #155a6b 100%);
         color: #fff;
     }
 }

 @media print {
     .bg-warning-light {
         background-color: #fff3cd !important;
     }
 }

 /* === TIER SYSTEM STYLING === */
 .tier-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
     font-size: 0.75rem;
     font-weight: 600;
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius-sm);
     text-transform: uppercase;
     letter-spacing: 0.025em;
 }

 .tier-bronze {
     background: linear-gradient(135deg, #cd7f32 0%, #b8691e 100%);
     color: #fff;
     border: 1px solid #a05a1a;
 }

 .tier-silver {
     background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
     color: #333;
     border: 1px solid #999;
 }

 .tier-gold {
     background: linear-gradient(135deg, #ffd700 0%, #e6c200 100%);
     color: #333;
     border: 1px solid #ccaa00;
 }

 .tier-platinum {
     background: linear-gradient(135deg, #e5e4e2 0%, #d1d0ce 100%);
     color: #333;
     border: 1px solid #b8b7b5;
 }

 .tier-diamond {
     background: linear-gradient(135deg, #b9f2ff 0%, #00d4ff 100%);
     color: #003d4a;
     border: 1px solid #00b8d4;
 }

 .tier-icon {
     font-size: 0.875rem;
 }

 /* Tier Icons */
 .tier-bronze .tier-icon::before {
     content: "🥉";
 }

 .tier-silver .tier-icon::before {
     content: "🥈";
 }

 .tier-gold .tier-icon::before {
     content: "🥇";
 }

 .tier-platinum .tier-icon::before {
     content: "💎";
 }

 .tier-diamond .tier-icon::before {
     content: "💠";
 }

 /* === PUTAWAY SCANNER STYLES === */
 /* Enhanced 3-step putaway workflow with progress indicators and queue interaction */
 .putaway-scanner-container {
     max-width: 800px;
     margin: 0 auto;
     padding: 1rem;
 }

 .putaway-progress-container {
     margin-bottom: 2rem;
     padding: 1.5rem;
     background: var(--card-bg);
     border-radius: var(--border-radius);
     box-shadow: var(--card-shadow);
     border: 1px solid var(--card-border);
 }

 .putaway-progress-steps {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
     position: relative;
 }

 .putaway-progress-steps::before {
     content: '';
     position: absolute;
     top: 20px;
     left: 10%;
     right: 10%;
     height: 2px;
     background: var(--card-border);
     z-index: 1;
 }

 .putaway-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     z-index: 2;
     background: var(--card-bg);
     padding: 0 1rem;
 }

 .putaway-step-circle {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 600;
     margin-bottom: 0.5rem;
     border: 2px solid var(--card-border);
     background: var(--card-bg);
     color: var(--text-muted);
     transition: var(--theme-transition);
 }

 .putaway-step.active .putaway-step-circle {
     background: var(--primary);
     border-color: var(--primary);
     color: white;
     transform: scale(1.1);
 }

 .putaway-step.completed .putaway-step-circle {
     background: var(--success);
     border-color: var(--success);
     color: white;
 }

 .putaway-step-label {
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--text-muted);
     text-align: center;
 }

 .putaway-step.active .putaway-step-label {
     color: var(--primary);
     font-weight: 600;
 }

 .putaway-step.completed .putaway-step-label {
     color: var(--success);
     font-weight: 600;
 }

 .putaway-main-section {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 2rem;
     margin-bottom: 2rem;
 }

 @media (max-width: 768px) {
     .putaway-main-section {
         grid-template-columns: 1fr;
         gap: 1rem;
     }
 }

 .putaway-scanner-section {
     background: var(--card-bg);
     border-radius: var(--border-radius);
     padding: 2rem;
     box-shadow: var(--card-shadow);
     border: 1px solid var(--card-border);
 }

 .putaway-current-step {
     margin-bottom: 2rem;
     text-align: center;
 }

 .putaway-current-step h3 {
     color: var(--text-primary);
     margin-bottom: 0.5rem;
 }

 .putaway-current-step .step-description {
     color: var(--text-muted);
     font-size: 1rem;
 }

 .putaway-input-group {
     margin-bottom: 1.5rem;
 }

 .putaway-input-group label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 600;
     color: var(--text-primary);
 }

 .putaway-scanner-input {
     width: 100%;
     padding: 0.75rem;
     font-size: 1.1rem;
     border: 2px solid var(--card-border);
     border-radius: var(--border-radius);
     background: var(--card-bg);
     color: var(--text-primary);
     transition: var(--theme-transition);
 }

 .putaway-scanner-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
 }

 .putaway-scanner-input.success {
     border-color: var(--success);
     background-color: rgba(40, 167, 69, 0.1);
 }

 .putaway-scanner-input.error {
     border-color: var(--danger);
     background-color: rgba(220, 53, 69, 0.1);
 }

 .putaway-action-buttons {
     display: flex;
     gap: 1rem;
     justify-content: center;
     margin-top: 2rem;
 }

 .putaway-action-btn {
     padding: 0.75rem 2rem;
     border: none;
     border-radius: var(--border-radius);
     font-weight: 600;
     cursor: pointer;
     transition: var(--theme-transition);
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .putaway-action-btn.primary {
     background: var(--primary);
     color: white;
 }

 .putaway-action-btn.primary:hover {
     background: #0056b3;
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
 }

 .putaway-action-btn.success {
     background: var(--success);
     color: white;
 }

 .putaway-action-btn.success:hover {
     background: #218838;
     transform: translateY(-1px);
     box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
 }

 .putaway-action-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     transform: none !important;
 }

 .putaway-queue-section {
     background: var(--card-bg);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     box-shadow: var(--card-shadow);
     border: 1px solid var(--card-border);
     height: fit-content;
 }

 .putaway-queue-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
     padding-bottom: 0.5rem;
     border-bottom: 1px solid var(--card-border);
 }

 .putaway-queue-header h4 {
     margin: 0;
     color: var(--text-primary);
     font-size: 1.1rem;
 }

 .putaway-queue-count {
     background: var(--primary);
     color: white;
     padding: 0.25rem 0.5rem;
     border-radius: var(--border-radius-sm);
     font-size: 0.875rem;
     font-weight: 600;
 }

 .putaway-queue-item {
     padding: 0.75rem;
     margin-bottom: 0.5rem;
     background: var(--bg-secondary);
     border-radius: var(--border-radius-sm);
     border: 1px solid var(--card-border);
     cursor: pointer;
     transition: var(--theme-transition);
 }

 .putaway-queue-item:hover {
     background: rgba(0, 123, 255, 0.1);
     border-color: var(--primary);
     transform: translateY(-1px);
 }

 .putaway-queue-item.selected {
     background: rgba(0, 123, 255, 0.2);
     border-color: var(--primary);
     box-shadow: 0 0 0 1px var(--primary);
 }

 .putaway-queue-item-product {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 0.25rem;
 }

 .putaway-queue-item-details {
     font-size: 0.875rem;
     color: var(--text-muted);
     display: flex;
     justify-content: space-between;
 }

 .putaway-queue-empty {
     text-align: center;
     padding: 2rem;
     color: var(--text-muted);
 }

 .putaway-queue-empty i {
     font-size: 3rem;
     margin-bottom: 1rem;
     opacity: 0.3;
 }

 .putaway-alert {
     padding: 1rem;
     border-radius: var(--border-radius);
     margin-bottom: 1rem;
     border: 1px solid transparent;
 }

 .putaway-alert.success {
     background: rgba(40, 167, 69, 0.1);
     color: var(--success);
     border-color: rgba(40, 167, 69, 0.2);
 }

 .putaway-alert.error {
     background: rgba(220, 53, 69, 0.1);
     color: var(--danger);
     border-color: rgba(220, 53, 69, 0.2);
 }

 .putaway-alert.info {
     background: rgba(23, 162, 184, 0.1);
     color: var(--info);
     border-color: rgba(23, 162, 184, 0.2);
 }

 .putaway-validation-feedback {
     margin-top: 0.5rem;
     font-size: 0.875rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .putaway-validation-feedback.success {
     color: var(--success);
 }

 .putaway-validation-feedback.error {
     color: var(--danger);
 }

 .putaway-scan-animation {
     display: inline-block;
     animation: putawayScanPulse 1.5s ease-in-out infinite;
 }

 @keyframes putawayScanPulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.6;
         transform: scale(1.1);
     }
 }

 /* Mobile responsiveness for putaway scanner */
 @media (max-width: 768px) {
     .putaway-scanner-container {
         padding: 0.5rem;
     }

     .putaway-progress-container {
         padding: 1rem;
     }

     .putaway-progress-steps {
         flex-direction: column;
         gap: 1rem;
     }

     .putaway-progress-steps::before {
         display: none;
     }

     .putaway-scanner-section {
         padding: 1rem;
     }

     .putaway-action-buttons {
         flex-direction: column;
     }

     .putaway-action-btn {
         justify-content: center;
     }
 }

 /* Putaway Loading Overlay */
 .putaway-loading-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     border-radius: var(--border-radius);
     color: white;
 }

 .putaway-loading-overlay .loading-spinner {
     width: 3rem;
     height: 3rem;
     border: 4px solid rgba(255, 255, 255, 0.3);
     border-top-color: white;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 1rem;
 }

 .putaway-loading-overlay .loading-text {
     font-size: 1.1rem;
     font-weight: 600;
     text-align: center;
 }

 .putaway-loading-overlay .loading-subtext {
     font-size: 0.9rem;
     opacity: 0.8;
     margin-top: 0.5rem;
     text-align: center;
 }