/* Content Area */
   .content-wrapper {
       padding: 2.25rem;
   }

   .page-header {
       margin-bottom: 2.25rem;
   }

   .page-title {
       font-size: 2.5rem;
       font-weight: 900;
       color: var(--text-dark);
       margin-bottom: 0.625rem;
       letter-spacing: -1px;
   }

   .page-subtitle {
       color: var(--text);
       font-size: 1.05rem;
       font-weight: 400;
   }

   /* Stats Cards */
   .stats-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
       gap: 1.75rem;
       margin-bottom: 2.25rem;
   }

   .stats-card {
       background: white;
       border-radius: 16px;
       padding: 2rem;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       transition: all 0.3s ease;
       border: 2px solid var(--border);
       position: relative;
       overflow: hidden;
   }

   .stats-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 5px;
       height: 100%;
       background: var(--primary);
   }

   .stats-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 12px 30px rgba(220, 38, 38, 0.15);
       border-color: var(--primary);
   }

   .stat-header {
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
       margin-bottom: 1.5rem;
   }

   .stat-title {
       font-size: 0.875rem;
       color: var(--text);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.8px;
   }

   .stat-icon {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.5rem;
       color: white;
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
   }

   .stat-icon img {
       width: 100%;
       height: 100%;
       object-fit: contain;
   }

   .stats-card.primary .stat-icon {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
   }

   .stats-card.success .stat-icon {
       background: linear-gradient(135deg, var(--success) 0%, #f87171 100%);
   }

   .stats-card.warning .stat-icon {
       background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
   }

   .stats-card.danger .stat-icon {
       background: linear-gradient(135deg, var(--danger) 0%, #fb7185 100%);
   }

   .stat-number {
       font-size: 2.5rem;
       font-weight: 900;
       color: var(--text-dark);
       margin-bottom: 0.625rem;
       letter-spacing: -1.5px;
   }

   .stat-label {
       color: var(--text);
       font-size: 0.9rem;
       font-weight: 500;
   }

   .stat-change {
       display: flex;
       align-items: center;
       gap: 0.625rem;
       font-size: 0.9rem;
       font-weight: 700;
       margin-top: 0.625rem;
   }

   .stat-change.positive {
       color: var(--success);
   }

   .stat-change.negative {
       color: var(--danger);
   }

   /* Charts Section */
   .charts-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
       gap: 1.75rem;
       margin-bottom: 2.25rem;
   }

   .chart-section {
       background: white;
       border-radius: 20px;
       padding: 24px;
       border: none;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
       background-image: linear-gradient(to right bottom, #ffffff, #f8fafc);
       transition: transform 0.2s, box-shadow 0.2s;
   }

   .chart-section:hover {
       transform: translateY(-2px);
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
   }

   .chart-section h3 {
       font-size: 1.1rem;
       font-weight: 800;
       color: #1e293b;
       margin-bottom: 1.5rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid #f1f5f9;
   }

   .chart-placeholder {
       background: var(--light);
       border: 2px dashed var(--border);
       border-radius: 8px;
       padding: 4rem 2rem;
       text-align: center;
       color: var(--text);
   }

   .chart-placeholder i {
       font-size: 3rem;
       color: var(--border);
       margin-bottom: 1rem;
   }

   .btn-primary {
       background: var(--primary);
       border: none;
       padding: 0.75rem 2rem;
       border-radius: 6px;
       font-weight: 600;
       font-size: 1rem;
       transition: all 0.3s ease;
   }

   .btn-primary:hover {
       background: var(--primary-dark);
       transform: translateY(-1px);
       box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
   }

   .btn-outline-primary {
       border: 2px solid var(--primary);
       color: var(--primary);
       background: transparent;
       padding: 0.75rem 2rem;
       border-radius: 6px;
       font-weight: 600;
       font-size: 1rem;
       transition: all 0.3s ease;
   }

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

   .filter-section {
       background: white;
       padding: 2rem;
       border-radius: 16px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       margin-bottom: 2.25rem;
       border: 2px solid var(--border);
   }

   .form-select,
   .form-control {
       border-radius: 6px;
       border: 1px solid var(--border);
       padding: 0.75rem 1rem;
       transition: all 0.3s ease;
   }

   .form-select:focus,
   .form-control:focus {
       border-color: var(--danger);
       box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
       outline: none;
   }

   /* Custom Dropdown Styles */
   .filter-box {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
       position: relative;
       z-index: 1;
   }

   .filter-box:has(.custom-dropdown.active) {
       z-index: 10001;
   }

   .filter-label {
       font-weight: 600;
       color: var(--text-dark);
       font-size: 0.95rem;
       margin: 0;
   }

   .custom-dropdown {
       position: relative;
       width: 100%;
       z-index: 1;
   }

   .custom-dropdown.active {
       z-index: 10001 !important;
       position: relative;
   }

   .custom-dropdown.active .custom-dropdown-menu {
       z-index: 10001 !important;
   }

   .custom-dropdown-btn {
       width: 100%;
       border: 2px solid var(--border);
       border-radius: 12px;
       padding: 0.75rem 1rem;
       font-size: 0.9rem;
       background: white;
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
       color: var(--text-dark);
       font-weight: 500;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       text-align: left;
   }

   .custom-dropdown-btn:hover {
       border-color: var(--primary);
       box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
   }

   .custom-dropdown-btn:focus {
       outline: none;
       border-color: var(--primary);
       box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
       background: white;
   }

   .custom-dropdown-btn:disabled {
       background: var(--light);
       color: var(--text);
       cursor: not-allowed;
       opacity: 0.7;
   }

   .custom-dropdown-btn i {
       font-size: 0.75rem;
       transition: transform 0.3s ease;
       color: var(--text);
   }

   .custom-dropdown.active .custom-dropdown-btn i {
       transform: rotate(180deg);
   }

   .custom-dropdown-menu {
       position: absolute;
       top: calc(100% + 5px);
       left: 0;
       right: 0;
       background: white !important;
       border: 2px solid var(--border);
       border-radius: 12px;
       box-shadow: 0 8px 25px rgba(220, 38, 38, 0.2);
       z-index: 10001 !important;
       max-height: 300px;
       overflow-y: auto;
       overflow-x: hidden;
       display: none;
   }

   .custom-dropdown.active .custom-dropdown-menu {
       display: block;
   }

   .custom-dropdown-items {
       max-height: 300px;
       overflow-y: auto;
       background: white !important;
   }

   .custom-dropdown-item {
       padding: 0.75rem 1rem;
       cursor: pointer;
       transition: all 0.2s ease;
       border-bottom: 1px solid var(--border);
       color: var(--text-dark);
       font-weight: 500;
       background: white !important;
   }

   .custom-dropdown-item:last-child {
       border-bottom: none;
   }

   .custom-dropdown-item:hover {
       background: var(--light) !important;
       color: var(--primary);
   }

   .custom-dropdown-item.selected {
       color: var(--primary);
       font-weight: 600;
       background: rgba(220, 38, 38, 0.08) !important;
   }

   /* Sidebar Toggle States */
   .sidebar.hidden {
       transform: translateX(-100%);
       left: -100%;
   }

   .main-content.sidebar-hidden {
       margin-left: 0;
   }

   /* Desktop toggle support */
   @media (min-width: 1025px) {
       .sidebar.hidden {
           transform: translateX(-100%);
           left: -100%;
       }

       .main-content.sidebar-hidden {
           margin-left: 0;
       }
   }

   /* Responsive */
   @media (max-width: 1024px) {
       .sidebar {
           left: -100%;
       }

       .sidebar.active {
           left: 0;
       }

       .main-content {
           margin-left: 0;
       }

       .menu-toggle {
           display: block;
       }

       .charts-grid {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 768px) {
       .stats-grid {
           grid-template-columns: 1fr;
       }

       .content-wrapper {
           padding: 1.5rem;
       }
   }

   .sidebar::-webkit-scrollbar {
       width: 6px;
   }

   .sidebar::-webkit-scrollbar-track {
       background: transparent;
   }

   .sidebar::-webkit-scrollbar-thumb {
       background: var(--border);
       border-radius: 3px;
   }

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

   .sidebar-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.5);
       z-index: 999;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .sidebar-overlay.active {
       display: block;
       opacity: 1;
   }

   /* Design 62: Circle Progress Card (Design G) */
   .stat-card-design-g {
       background: white;
       border-radius: 16px;
       padding: 1.5rem;
       display: flex;
       align-items: center;
       gap: 1.5rem;
       border: 2px solid var(--border);
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
       min-height: 160px;
   }

   .design-g-ring {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       border: 4px solid #f1f5f9;
       border-top-color: #3b82f6;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 0.8rem;
       font-weight: 700;
       color: var(--text-dark);
       flex-shrink: 0;
   }

   .design-g-content {
       flex: 1;
   }

   .design-g-content h4 {
       margin: 0;
       font-size: 0.9rem;
       color: var(--text);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }

   .design-g-content .design-g-value {
       font-size: 2rem;
       font-weight: 700;
       color: var(--text-dark);
       margin-top: 0.25rem;
       line-height: 1.2;
   }

   .design-g-change {
       font-size: 0.8rem;
       color: #10b981;
       margin-top: 6px;
       display: flex;
       align-items: center;
       gap: 6px;
       font-weight: 600;
   }

   /* Color variants */
   .design-g-ring.primary {
       border-top-color: #3b82f6;
   }

   .design-g-ring.success {
       border-top-color: #10b981;
   }

   .design-g-ring.warning {
       border-top-color: #f59e0b;
   }

   .design-g-ring.danger {
       border-top-color: #ef4444;
   }

   .design-g-change.positive {
       color: #10b981;
   }

   .design-g-change.negative {
       color: #ef4444;
   }

   .design-g-change.neutral {
       color: #94a3b8;
   }

   /* Loading Overlay */
   .page-loading-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #ffffff;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 9999;
       transition: opacity 0.5s ease, visibility 0.5s ease;
   }

   .page-loading-overlay.hidden {
       opacity: 0;
       visibility: hidden;
   }

   .loading-content {
       text-align: center;
       color: #333;
   }

   .logo-container {
       margin-bottom: 3rem;
   }

   .logo-container img {
       max-width: 200px;
       height: auto;
   }

   /* Modern Spinner */
   .modern-spinner {
       position: relative;
       width: 60px;
       height: 60px;
       margin: 0 auto 2rem auto;
   }

   .spinner-ring {
       position: absolute;
       width: 100%;
       height: 100%;
       border: 3px solid transparent;
       border-top: 3px solid #dc3545;
       border-radius: 50%;
       animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
   }

   .spinner-ring:nth-child(1) {
       animation-delay: -0.45s;
       border-top-color: #dc3545;
   }

   .spinner-ring:nth-child(2) {
       animation-delay: -0.3s;
       border-top-color: #28a745;
       width: 80%;
       height: 80%;
       top: 10%;
       left: 10%;
   }

   .spinner-ring:nth-child(3) {
       animation-delay: -0.15s;
       border-top-color: #007bff;
       width: 60%;
       height: 60%;
       top: 20%;
       left: 20%;
   }

   @keyframes spin {
       0% {
           transform: rotate(0deg);
       }

       100% {
           transform: rotate(360deg);
       }
   }

   .loading-content h4 {
       font-size: 1.5rem;
       color: #333;
       margin-bottom: 0.5rem;
       font-weight: 600;
   }

   /* Modal Scrolling */
   .modal-body {
       max-height: calc(100vh - 200px);
       overflow-y: auto;
       padding: 1.5rem;
   }

   .modal-body::-webkit-scrollbar {
       width: 8px;
   }

   .modal-body::-webkit-scrollbar-track {
       background: #f1f1f1;
       border-radius: 4px;
   }

   .modal-body::-webkit-scrollbar-thumb {
       background: #888;
       border-radius: 4px;
   }

   .modal-body::-webkit-scrollbar-thumb:hover {
       background: #555;
   }

   /* Ensure modals are scrollable on mobile */
   @media (max-height: 600px) {
       .modal-body {
           max-height: calc(100vh - 150px);
       }
   }

   .loading-content p {
       font-size: 1rem;
       color: #666;
       margin: 0;
   }

   /* Mobile responsive */
   @media (max-width: 768px) {
       .modern-spinner {
           width: 50px;
           height: 50px;
       }

       .loading-content h4 {
           font-size: 1.25rem;
       }

       .loading-content p {
           font-size: 0.9rem;
       }

       .logo-container img {
           max-width: 150px;
       }
   }


   .card-d1 {
       background: white;
       border-radius: 20px;
       padding: 24px;
       border: none;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
       background-image: linear-gradient(to right bottom, #ffffff, #f8fafc);
       /* Layout for Design 1 */
       display: flex;
       align-items: center;
       gap: 20px;
   }

   .card-d1:hover {
       transform: translateY(-5px);
   }

   /* Design 1 Elements */
   .d1-ring {
       width: 60px;
       height: 60px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       position: relative;
       flex-shrink: 0;
   }

   .d1-ring::before {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 4px solid currentColor;
       opacity: 0.2;
   }

   .d1-ring::after {
       content: '';
       position: absolute;
       inset: 0;
       border-radius: 50%;
       border: 4px solid currentColor;
       border-right-color: transparent;
       border-bottom-color: transparent;
       transform: rotate(-45deg);
   }

   .d1-content {
       flex: 1;
   }

   .d1-content h3 {
       margin: 0;
       font-size: 1.8rem;
       font-weight: 800;
       color: var(--text-dark);
       line-height: 1;
   }

   .d1-content p {
       margin: 4px 0 0 0;
       color: #64748b;
       font-size: 0.9rem;
       font-weight: 500;
   }

   .d1-change {
       font-size: 0.8rem;
       margin-top: 5px;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 0.25rem;
   }

   .d1-change.positive {
       color: #10b981;
   }

   .d1-change.negative {
       color: #ef4444;
   }

   .d1-change.neutral {
       color: #94a3b8;
   }

   .table-d1 {
       border-collapse: separate;
       border-spacing: 0 12px;
   }

   .table-d1 th {
       font-size: 0.75rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: #94a3b8;
       font-weight: 700;
       padding: 0 24px 12px;
       border: none;
       background: transparent;
   }

   .table-d1 td {
       background: white;
       padding: 20px 24px;
       border: none;
       vertical-align: middle;
       font-size: 0.95rem;
       color: #334155;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
       transition: transform 0.2s;
   }

   .table-d1 tr td:first-child {
       border-top-left-radius: 12px;
       border-bottom-left-radius: 12px;
   }

   .table-d1 tr td:last-child {
       border-top-right-radius: 12px;
       border-bottom-right-radius: 12px;
   }

   .table-d1 tr:hover td {
       transform: translateY(-2px);
       box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
       z-index: 10;
   }

   .badge-brand-modern {
       background: #f1f5f9;
       color: #475569;
       padding: 6px 14px;
       border-radius: 20px;
       font-weight: 600;
       font-size: 0.8rem;
       letter-spacing: 0.3px;
   }

   .badge-status-modern {
       background: #dcfce7;
       color: #15803d;
       padding: 6px 14px;
       border-radius: 20px;
       font-weight: 700;
       font-size: 0.75rem;
       text-transform: uppercase;
   }

   /* --- Category Statistics (Design 2: Grid Cards) --- */
   .grid-d2 {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 20px;
   }

   .card-d2 {
       background: white;
       border-radius: 16px;
       padding: 20px;
       border: 1px solid #e2e8f0;
       transition: transform 0.2s;
   }

   .card-d2:hover {
       transform: translateY(-3px);
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
   }

   .d2-header {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 15px;
   }

   .d2-icon {
       width: 40px;
       height: 40px;
       background: #eff6ff;
       color: #3b82f6;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .d2-stats {
       display: flex;
       justify-content: space-between;
       margin-top: 10px;
       padding-top: 10px;
       border-top: 1px solid #f1f5f9;
       font-size: 0.85rem;
       color: #64748b;
   }

   .d2-val {
       font-weight: 700;
       color: #1e293b;
   }