/* CRM functionality removed */

      .sbc-metric-label {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
      }

      [data-theme="dark"] .sbc-metric-label {
        color: #9ca3af;
      }

      .sbc-trend {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 6px;
        font-weight: 600;
      }

      .sbc-trend.up {
        background: #d1fae5;
        color: #065f46;
      }

      .sbc-trend.down {
        background: #fee2e2;
        color: #991b1b;
      }

      .sbc-chart-container {
        background: #ffffff;
        border-radius: 16px;
        padding: 1.5rem;
        border: 1px solid #e5e7eb;
        position: relative;
        min-height: 400px;
      }

      [data-theme="dark"] .sbc-chart-container {
        background: #1f2937;
        border-color: #374151;
      }

      .sbc-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e5e7eb;
      }

      [data-theme="dark"] .sbc-chart-header {
        border-bottom-color: #374151;
      }

      .sbc-chart-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
      }

      [data-theme="dark"] .sbc-chart-title {
        color: #f9fafb;
      }

      .sbc-chart-controls {
        display: flex;
        gap: 0.5rem;
      }

      .sbc-view-btn {
        padding: 0.5rem 1rem;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        border-radius: 8px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .sbc-view-btn.active {
        background: #3b82f6;
        color: #ffffff;
        border-color: #3b82f6;
      }

      .sbc-view-btn:hover:not(.active) {
        background: #f3f4f6;
      }

      [data-theme="dark"] .sbc-view-btn {
        background: #374151;
        color: #d1d5db;
        border-color: #4b5563;
      }

      [data-theme="dark"] .sbc-view-btn:hover:not(.active) {
        background: #4b5563;
      }

      .sbc-table-container {
        background: #ffffff;
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
      }

      [data-theme="dark"] .sbc-table-container {
        background: #1f2937;
        border-color: #374151;
      }

      .sbc-table {
        width: 100%;
        border-collapse: collapse;
      }

      .sbc-table th {
        background: #f8fafc;
        color: #374151;
        font-weight: 600;
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
      }

      [data-theme="dark"] .sbc-table th {
        background: #111827;
        color: #d1d5db;
        border-bottom-color: #374151;
      }

      .sbc-table td {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        color: #1f2937;
      }

      [data-theme="dark"] .sbc-table td {
        border-bottom-color: #374151;
        color: #f9fafb;
      }

      .sbc-table tbody tr:hover {
        background: #f8fafc;
      }

      [data-theme="dark"] .sbc-table tbody tr:hover {
        background: #374151;
      }

      .sbc-customer-name {
        font-weight: 600;
        color: #1f2937;
      }

      [data-theme="dark"] .sbc-customer-name {
        color: #f9fafb;
      }

      .sbc-growth-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.875rem;
        font-weight: 500;
      }

      .sbc-growth-indicator.positive {
        color: #059669;
      }

      .sbc-growth-indicator.negative {
        color: #dc2626;
      }

      .sbc-action-btn {
        padding: 0.375rem 0.75rem;
        border: 1px solid #d1d5db;
        background: #ffffff;
        color: #374151;
        border-radius: 6px;
        font-size: 0.875rem;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .sbc-action-btn:hover {
        background: #f3f4f6;
      }

      [data-theme="dark"] .sbc-action-btn {
        background: #374151;
        color: #d1d5db;
        border-color: #4b5563;
      }

      [data-theme="dark"] .sbc-action-btn:hover {
        background: #4b5563;
      }

      .sbc-comparison-mode {
        background: #eff6ff;
        border: 1px solid #dbeafe;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      [data-theme="dark"] .sbc-comparison-mode {
        background: #1e3a8a;
        border-color: #1e40af;
      }

      .sbc-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        color: #6b7280;
      }

      .sbc-spinner {
        width: 2rem;
        height: 2rem;
        border: 2px solid #e5e7eb;
        border-top: 2px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
      }

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

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
      }

      body {
        background: var(--bg);
        color: var(--text);
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* Smooth scrolling */
      html {
        scroll-behavior: smooth;
      }

      /* Custom scrollbar */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      ::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 3px;
      }

      ::-webkit-scrollbar-thumb {
        background: var(--text-lighter);
        border-radius: 3px;
        transition: background 0.3s ease;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--text-light);
      }

      /* Security Bar */
      .security-bar {
        background: var(--gradient-success);
        color: #fff;
        font-weight: 600;
        font-size: 0.82rem;
        letter-spacing: 0.2px;
        box-shadow: var(--shadow-md);
        border-bottom: 1px solid var(--border);
        padding: 10px 15px;
        text-align: center;
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1001;
        flex-shrink: 0;
        min-height: var(--security-bar-height);
        align-items: center;
        backdrop-filter: blur(10px);
      }

      .security-item {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        padding: 4px 10px;
        border-radius: 10px;
        font-size: 0.75rem;
        white-space: nowrap;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
      }

      .security-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      /* Main Container */
      .container {
        display: flex;
        flex: 1;
        margin-top: var(--security-bar-height);
        min-height: calc(100vh - var(--security-bar-height));
      }

      /* Sidebar */
      .sidebar {
        width: 280px;
        background: rgba(15, 23, 42, 0.95);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        padding: 20px 0;
        overflow-y: auto;
        position: fixed;
        left: 0;
        top: var(--security-bar-height);
        bottom: 0;
        z-index: 1000;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(16px);
      }

      .sidebar.collapsed {
        transform: translateX(-100%);
      }

      .sidebar-header {
        padding: 0 20px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        margin-bottom: 20px;
        position: relative;
      }

      .sidebar-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        height: 2px;
        background: var(--gradient-primary);
        border-radius: 2px;
      }

      .sidebar-header h3 {
        font-size: 1.5rem;
        font-weight: 700;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 5px;
      }

      .sidebar-header p {
        color: var(--text-light);
        font-size: 1.05rem;
        font-weight: 500;
      }

      /* Sidebar header span (MODULES text) */
      .sidebar-header span {
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: rgba(255, 255, 255, 0.9);
      }

      .nav-menu {
        list-style: none;
        padding: 0;
      }

      .nav-item {
        margin-bottom: 5px;
      }

      .nav-link {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 3px solid transparent;
        font-size: 1.15rem;
        font-weight: 500;
        position: relative;
        margin: 2px 0;
        border-radius: 0 12px 12px 0;
        margin-right: 10px;
      }

      /* Sidebar module title text (main name like "Workforce Hub") */
      .nav-link div span:first-child {
        font-size: 1.3rem !important;
        font-weight: 600 !important;
      }

      /* Sidebar module subtitle text (description like "Human Resources") */
      .nav-link div span:last-child {
        font-size: 1.05rem !important;
        opacity: 0.8 !important;
      }

      .nav-link::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        background: var(--primary);
        border-radius: 0 4px 4px 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      }

      .nav-link:hover {
        background: rgba(99, 102, 241, 0.2);
        color: #fff;
        border-left-color: var(--primary);
        transform: translateX(4px);
      }

      .nav-link:hover::before {
        width: 4px;
        height: 24px;
      }

      .nav-link.active {
        background: rgba(99, 102, 241, 0.3);
        color: #fff;
        border-left-color: var(--primary);
        font-weight: 600;
        box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
      }

      .nav-link.active::before {
        width: 4px;
        height: 30px;
      }

      .nav-link .fa-chevron-down {
        margin-left: auto;
        transition: transform 0.3s ease;
      }

      .nav-link.submenu-open .fa-chevron-down {
        transform: rotate(180deg);
      }

      .nav-link.active,
      .nav-link:hover {
        background: rgba(99, 102, 241, 0.2);
        color: #fff;
      }

      .nav-link.has-submenu {
        position: relative;
      }

      .nav-link.has-submenu::after {
        content: "\f078"; /* Font Awesome chevron-down */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease;
      }

      .nav-item.submenu-open > .has-submenu::after {
        transform: translateY(-50%) rotate(-180deg); /* chevron-up */
      }

      .submenu {
        list-style: none;
        padding-left: 30px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
      }

      .nav-item.submenu-open > .submenu {
        padding-top: 10px;
        padding-bottom: 10px;
        max-height: 500px; /* Adjust as needed */
      }

      .submenu a {
        color: var(--text-light);
        text-decoration: none;
        display: block;
        padding: 8px 0;
        transition: color 0.3s ease;
      }

      .submenu a:hover {
        color: var(--text);
        padding-left: 5px;
      }

      .main-content {
        flex-grow: 1;
        padding: 30px;
        transition: margin-left 0.3s ease;
        margin-left: 0; /* full-width by default */
        max-width: 100%;
      }

      /* restore left offset only when a sidebar is present */
      .sidebar + .main-content,
      .container .sidebar + .main-content {
        margin-left: 280px;
      }

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

      /* Page Header */
      .page-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
        padding-left: 14px;
        padding-top: 6px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
        position: relative;
      }

      /* Prevent gradient-text and font-ascender clipping at top/left edges.
         Use padding (not negative margins) so first characters never get cut off. */
      .page-header h1,
      .page-header .page-title {
        padding: 0.12em 0.18em;
        line-height: 1.3;
      }

      .page-header::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 14px;
        width: 80px;
        height: 3px;
        background: var(--gradient-primary);
        border-radius: 2px;
      }

      .page-header h1 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 10px;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .page-header .header-content {
        flex-grow: 1;
      }

      .page-header p {
        color: var(--text-light);
        font-size: 1rem;
      }

      /* Mobile Toggle */
      .mobile-toggle {
        display: none;
        position: fixed;
        top: calc(var(--security-bar-height) + 15px);
        left: 15px;
        z-index: 1001;
        background: var(--gradient-primary);
        color: white;
        border: none;
        padding: 12px;
        border-radius: var(--radius);
        font-size: 1.1rem;
        box-shadow: var(--shadow-lg);
        transition: all 0.3s ease;
      }

      .mobile-toggle:hover {
        transform: scale(1.1);
        box-shadow: var(--shadow-xl);
      }



      /* Animation keyframes */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes slideIn {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(0);
        }
      }

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

      .content-section {
        animation: fadeIn 0.5s ease-out;
      }

      .sidebar {
        animation: slideIn 0.3s ease-out;
      }

      /* Content Sections */
      .content-section {
        display: none;
      }

      .content-section.active {
        display: block;
      }

      .page-header {
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border);
      }

      .page-header h1 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 10px;
      }

      .page-header p {
        color: var(--text-light);
        font-size: 1rem;
      }

      /* Cards */
      .card {
        background: var(--card);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid var(--border);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
      }

      .card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: transform 0.3s ease;
        pointer-events: none;
      }

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

      .card:hover::before {
        transform: scaleX(1);
      }

      .card-header {
        display: flex;
        justify-content: space-between; /* Main axis alignment */
        align-items: center; /* Cross axis alignment */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        padding: 16px 20px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
        gap: 16px;
        position: relative;
      }

      .card-header::after {
        content: "";
        position: absolute;
        bottom: -1px; /* Position on top of the border */
        left: 20px;
        width: 60px;
        height: 2px;
        background: var(--gradient-primary);
        border-radius: 2px;
      }

      .card-title {
        font-size: 1.25rem; /* Consolidated font size */
        font-weight: 600;
        color: var(--text);
        margin: 0;
        flex-shrink: 0; /* Prevent title from shrinking */
      }

      .card-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0; /* Prevent actions from shrinking */
        min-width: 0; /* Allow flex items to shrink below their content size */
      }

      .search-bar {
        position: relative;
        width: 250px; /* A fixed width is more stable here */
        flex-shrink: 0; /* Prevent search bar from shrinking */
        background: white; /* Ensure it's visible */
        border-radius: var(--radius);
        border: 1px solid var(--border);
      }

      .search-bar i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--text-lighter);
        font-size: 1rem;
        pointer-events: none; /* Prevent icon from blocking input clicks */
      }

      .search-bar input {
        background: white;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 16px 10px 40px;
        font-size: 0.9rem;
        color: var(--text);
        width: 100%; /* Fill the .search-bar container */
        transition: all 0.3s ease;
        box-sizing: border-box;
        display: block; /* Ensure it's displayed */
      }

      .search-bar input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
      }

      /* Modal Styles - Modified to work with Bootstrap modals */
      .modal:not(.fade) {
        display: none;
        position: fixed;
        z-index: 1002;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
      }
      
      /* Bootstrap modal overrides - ensure inputs work */
      .modal.fade {
        background: transparent !important;
        backdrop-filter: none !important;
      }
      .modal.fade .modal-content input,
      .modal.fade .modal-content select,
      .modal.fade .modal-content textarea {
        pointer-events: auto !important;
        user-select: text !important;
        position: relative !important;
        z-index: 10 !important;
      }
      .modal.fade .modal-content::before,
      .modal.fade .modal-content::after {
        pointer-events: none !important;
      }
      .modal.fade .modal-body {
        position: relative;
        z-index: 5;
      }

      .modal-content {
        background-color: var(--card);
        margin: 5% auto;
        padding: 30px;
        border: 1px solid var(--border);
        width: 80%;
        max-width: 800px;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        animation: fadeIn 0.3s;
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);
        padding-bottom: 20px;
        margin-bottom: 20px;
      }

      .modal-header h2 {
        font-size: 1.5rem;
        color: var(--text);
      }

      .close-btn {
        color: var(--text-light);
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      .close-btn:hover,
      .close-btn:focus {
        color: var(--danger);
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }

      .table-title {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 1.1rem;
        font-weight: 600;
      }

      .modal-table {
        margin-bottom: 15px;
      }

      #journal-items-table input {
        text-align: right;
      }

      .modal-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 15px;
        border-top: 1px solid var(--border);
        padding-top: 20px;
        margin-top: 20px;
      }

      .imbalance-warning {
        color: var(--danger);
        font-size: 0.9rem;
        margin-right: auto;
        display: none; /* Hidden by default */
      }

      /* VAT/GST Specific Styles */
      .vat-input {
        font-size: 0.9rem;
        padding: 0.25rem 0.5rem;
      }

      .vat-amount,
      .gross-amount {
        font-weight: 600;
        color: var(--color-primary);
      }

      .stat-card {
        background: var(--bg-primary);
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: all 0.3s ease;
      }

      .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .stat-icon {
        font-size: 2rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
      }

      .stat-content h3 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
      }

      .stat-content p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
      }

      /* Enhanced Customer Contact Book Styles */
      .customer-info .customer-name {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
      }

      .customer-info .customer-name strong {
        color: var(--text-primary);
      }

      .contact-details div {
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
      }

      .contact-details i {
        width: 16px;
        margin-right: 0.5rem;
      }

      .balance-info .balance-amount {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
      }

      .activity-info div:first-child {
        font-weight: 500;
        color: var(--text-primary);
      }

      .action-buttons .btn-group {
        display: flex;
        gap: 0.25rem;
      }

      .action-buttons .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
      }

      .customer-row:hover {
        background-color: var(--bg-secondary);
        transition: background-color 0.2s ease;
      }

      .stat-card {
        border-radius: 12px;
        padding: 1.25rem;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 100%);
      }

      .stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }

      .stat-card .stat-icon {
        font-size: 2.2rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.15);
        margin-right: 1rem;
      }

      .stat-card .stat-details h4 {
        font-size: 2rem;
        font-weight: 700;
        margin: 0 0 0.25rem 0;
        line-height: 1;
      }

      .stat-card .stat-details p {
        font-size: 0.95rem;
        margin: 0 0 0.25rem 0;
        opacity: 0.9;
      }

      .stat-card .stat-change {
        font-size: 0.8rem;
        opacity: 0.8;
        font-weight: 500;
      }

      .card-actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .card-actions .btn {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
      }

      .customer-checkbox:checked + .customer-info {
        background-color: rgba(13, 110, 253, 0.1);
      }

      #bulk-actions-panel .alert {
        border-radius: 8px;
        border: none;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        color: #1565c0;
      }

      #bulk-actions-panel .btn-group .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
      }

      .table th {
        background-color: var(--bg-dark);
        color: white;
        font-weight: 600;
        border-bottom: 2px solid var(--border-color);
        padding: 1rem 0.75rem;
      }

      .table td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
        border-bottom: 1px solid var(--border-color);
      }

      .pagination .page-link {
        color: var(--color-primary);
        border: 1px solid var(--border-color);
        padding: 0.5rem 0.75rem;
      }

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

      .input-group-text {
        background-color: var(--bg-secondary);
        border-color: var(--border-color);
        color: var(--text-secondary);
      }

      .form-select, .form-control {
        border-color: var(--border-color);
        background-color: var(--bg-primary);
        color: var(--text-primary);
      }

      .form-select:focus, .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
      }

      @media (max-width: 768px) {
        .stat-card {
          flex-direction: column;
          text-align: center;
        }

        .stat-card .stat-icon {
          margin-right: 0;
          margin-bottom: 1rem;
        }

        .action-buttons .btn-group {
          flex-direction: column;
          width: 100%;
        }

        .card-actions {
          flex-direction: column;
        }

        .card-actions .btn {
          width: 100%;
        }
      }

      /* CRM Tab System Styles */
      .crm-nav {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
      }

      .crm-nav-btn {
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        color: var(--text-secondary);
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .crm-nav-btn:hover {
        background: var(--bg-primary);
        color: var(--text-primary);
        transform: translateY(-2px);
      }

      .crm-nav-btn.active {
        background: var(--color-primary);
        color: white;
        border-color: var(--color-primary);
      }

      .crm-tab-content {
        display: none;
      }

      .crm-tab-content.active {
        display: block;
      }

      .form-group-inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-right: 1rem;
      }

      .form-group-inline label {
        font-weight: 500;
        margin: 0;
        white-space: nowrap;
      }

      .form-group-inline input {
        min-width: 120px;
      }

      .status-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      .status-success {
        background-color: #d1fae5;
        color: #065f46;
      }

      .status-warning {
        background-color: #fef3c7;
        color: #92400e;
      }

      .status-danger {
        background-color: #fee2e2;
        color: #991b1b;
      }

      .row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -0.75rem;
      }

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

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

      /* Responsive Design */
      @media (max-width: 1200px) {
        .sidebar {
          transform: translateX(-100%);
        }

        .sidebar.open {
          /* Change collapsed to open for clarity */
          transform: translateX(0);
        }

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

        .mobile-toggle {
          display: block;
        }
      }

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

        .col-md-3,
        .col-md-6 {
          flex: 0 0 100%;
          max-width: 100%;
        }

        .form-group-inline {
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: 1rem;
        }

        .stat-card {
          flex-direction: column;
          text-align: center;
        }

        .vat-input {
          font-size: 0.8rem;
          padding: 0.2rem 0.4rem;
        }

        /* Alert Messages */
        .alert {
          padding: 15px;
          margin-bottom: 20px;
          border: 1px solid transparent;
          border-radius: 4px;
        }

        .alert-success {
          color: #155724;
          background-color: #d4edda;
          border-color: #c3e6cb;
        }

        .alert-info {
          color: #0c5460;
          background-color: #d1ecf1;
          border-color: #bee5eb;
        }

        .alert-warning {
          color: #856404;
          background-color: #fff3cd;
          border-color: #ffeaa7;
        }

        .alert-danger {
          color: #721c24;
          background-color: #f8d7da;
          border-color: #f5c6cb;
        }

        /* Chart Container */
        .chart-container {
          position: relative;
          height: 400px;
          padding: 20px;
        }

        /* Tax Reports Specific Styles */
        .status-badge.status-danger {
          background-color: #fee2e2;
          color: #991b1b;
        }

        .table td,
        .table th {
          vertical-align: middle;
        }

        .btn[disabled] {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .fa-spinner {
          animation: spin 1s linear infinite;
        }

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

        .page-header h1 {
          font-size: 1.8rem;
        }

        .page-header p {
          font-size: 0.9rem;
        }


      }

      @media (max-width: 480px) {
        .sidebar {
          width: 100%;
        }

        .nav-link {
          padding: 12px 15px;
        }

        .card-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
        }

        .search-bar input {
          width: 100%;
        }

        .search-bar input:focus {
          width: 100%;
        }
      }

      /* Filing Logs Specific Styles */
      .filing-action-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 20px;
        text-align: left;
        margin-bottom: 15px;
        transition: all 0.3s ease;
        border: 2px solid transparent;
      }

      .filing-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        border-color: currentColor;
      }

      .filing-action-btn i {
        font-size: 2rem;
        opacity: 0.8;
      }

      .filing-action-btn div {
        flex: 1;
      }

      .filing-action-btn strong {
        display: block;
        font-size: 1.1rem;
        margin-bottom: 4px;
      }

      .filing-action-btn small {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.85rem;
      }

      .action-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .action-submit {
        background-color: #10b981;
        color: white;
      }

      .action-review {
        background-color: #3b82f6;
        color: white;
      }

      .action-create {
        background-color: #8b5cf6;
        color: white;
      }

      .action-update {
        background-color: #f59e0b;
        color: white;
      }

      .confirmation-number {
        font-family: "Courier New", monospace;
        font-weight: 600;
        color: #059669;
        background-color: #d1fae5;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.85rem;
      }

      .error-code {
        font-family: "Courier New", monospace;
        font-weight: 600;
        color: #dc2626;
        background-color: #fee2e2;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.85rem;
      }

      .days-remaining {
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.85rem;
      }

      .days-remaining.success {
        color: #059669;
        background-color: #d1fae5;
      }

      .days-remaining.warning {
        color: #d97706;
        background-color: #fef3c7;
      }

      .days-remaining.danger {
        color: #dc2626;
        background-color: #fee2e2;
      }

      .filing-modal {
        backdrop-filter: blur(4px);
      }

      .filing-progress-modal {
        backdrop-filter: blur(4px);
      }

      .progress-bar {
        background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 100%);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .progress-fill {
        background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
        height: 100%;
        transition: width 0.5s ease;
        border-radius: 10px;
        position: relative;
      }

      .progress-fill::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.3) 50%,
          transparent 100%
        );
        animation: progress-shine 2s infinite;
      }

      @keyframes progress-shine {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      .compliance-table .status-badge {
        white-space: nowrap;
      }

      .compliance-table .days-remaining {
        white-space: nowrap;
      }

      #audit-trail-table {
        font-size: 0.9rem;
      }

      #audit-trail-table td {
        padding: 8px 12px;
        vertical-align: middle;
      }

      #audit-trail-table .action-badge {
        margin: 0;
      }

      .filing-logs-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
      }

      .chart-container {
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
      }

      @media (max-width: 768px) {
        .filing-action-btn {
          flex-direction: column;
          text-align: center;
          gap: 8px;
        }

        .filing-action-btn i {
          font-size: 1.5rem;
        }

        .filing-logs-stats {
          grid-template-columns: 1fr;
        }

        .chart-container {
          padding: 15px;
        }
      }

      .document-upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 8px;
        padding: 40px 20px;
        text-align: center;
        background-color: #f9fafb;
        transition: all 0.3s ease;
        cursor: pointer;
      }

      .document-upload-area:hover {
        border-color: #3b82f6;
        background-color: #eff6ff;
      }

      .document-upload-area.dragover {
        border-color: #1d4ed8;
        background-color: #dbeafe;
        transform: scale(1.02);
      }

      .filing-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        max-width: 400px;
        padding: 15px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(8px);
        font-weight: 500;
        animation: slideInRight 0.3s ease-out;
      }

      @keyframes slideInRight {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .filing-notification.success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
      }

      .filing-notification.info {
        background: linear-gradient(135deg, #3b82f6, #1d4ed8);
        color: white;
      }

      .filing-notification.warning {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: white;
      }

      .filing-notification.error {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
      }

      /* Timeline Styles */
      .timeline {
        position: relative;
        padding-left: 20px;
      }

      .timeline-item {
        position: relative;
        margin-bottom: 20px;
        padding-left: 30px;
      }

      .timeline-marker {
        position: absolute;
        left: -10px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .timeline::before {
        content: "";
        position: absolute;
        left: -4px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom, #e5e7eb, #d1d5db);
      }

      .timeline-content h6 {
        margin: 0 0 5px 0;
        font-weight: 600;
        color: var(--text-primary);
      }

      .timeline-content p {
        margin: 0 0 3px 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
      }

      /* Metric Cards */
      .metric-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #f1f5f9;
        transition: all 0.3s ease;
        height: 100%;
      }

      .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      }

      .metric-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .metric-header h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-secondary);
      }

      .metric-trend {
        font-size: 0.8rem;
        font-weight: 600;
        padding: 4px 8px;
        border-radius: 12px;
      }

      .metric-trend.positive {
        background-color: #d1fae5;
        color: #059669;
      }

      .metric-trend.negative {
        background-color: #fee2e2;
        color: #dc2626;
      }

      .metric-value h2 {
        margin: 0 0 5px 0;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--color-primary);
        line-height: 1;
      }

      .metric-value p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .metric-details {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid #f1f5f9;
      }

      .metric-details small {
        color: var(--text-muted);
        font-size: 0.8rem;
      }

      /* Enhanced Alert Styles */
      .alert {
        border-radius: 8px;
        border: none;
        padding: 15px 20px;
        margin-bottom: 15px;
      }

      .alert-warning {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
        border-left: 4px solid #f59e0b;
      }

      .alert-info {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        color: #1e40af;
        border-left: 4px solid #3b82f6;
      }

      .alert strong {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
      }

      /* Enhanced Document Upload Area */
      .document-upload-area {
        position: relative;
        overflow: hidden;
      }

      .document-upload-area::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(59, 130, 246, 0.1),
          transparent
        );
        transition: left 0.5s ease;
      }

      .document-upload-area:hover::before {
        left: 100%;
      }

      /* Responsive Enhancements */
      @media (max-width: 768px) {
        .timeline {
          padding-left: 15px;
        }

        .timeline-item {
          padding-left: 25px;
        }

        .metric-card {
          padding: 20px;
          margin-bottom: 20px;
        }

        .metric-value h2 {
          font-size: 2rem;
        }

        .alert {
          padding: 12px 15px;
        }
      }

      /* Profit & Loss Specific Styles */
      .section-header td {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        font-weight: 700;
        color: var(--text-primary);
        padding: 15px 12px;
        border-bottom: 2px solid var(--border-color);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 0.9rem;
      }

      .section-total td {
        background: var(--bg-secondary);
        font-weight: 600;
        border-top: 1px solid var(--border-color);
        border-bottom: 2px solid var(--border-color);
        padding: 12px;
      }

      .gross-profit-row td {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        font-weight: 700;
        color: #065f46;
        border-top: 2px solid #10b981;
        border-bottom: 2px solid #10b981;
        padding: 15px 12px;
        font-size: 1.05rem;
      }

      .operating-profit-row td {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        font-weight: 700;
        color: #1e40af;
        border-top: 2px solid #3b82f6;
        border-bottom: 2px solid #3b82f6;
        padding: 15px 12px;
        font-size: 1.05rem;
      }

      .net-profit-row td {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        font-weight: 700;
        color: #92400e;
        border-top: 2px solid #f59e0b;
        border-bottom: 2px solid #f59e0b;
        padding: 15px 12px;
        font-size: 1.05rem;
      }

      .final-net-profit-row td {
        background: linear-gradient(135deg, #ecfdf5, #d1fae5);
        font-weight: 800;
        color: #065f46;
        border: 3px solid #10b981;
        padding: 20px 12px;
        font-size: 1.1rem;
      }

      .expandable-row {
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      .expandable-row:hover {
        background-color: rgba(59, 130, 246, 0.05);
      }

      .expand-icon {
        margin-right: 8px;
        transition: transform 0.3s ease;
        color: var(--color-primary);
      }

      .expand-icon.expanded {
        transform: rotate(90deg);
      }

      .sub-account {
        background-color: #f8fafc;
        transition: all 0.3s ease;
      }

      .sub-account.hidden {
        display: none;
      }

      .account-name {
        font-weight: 600;
        color: var(--text-primary);
      }

      .gross-margin-indicator,
      .operating-margin-indicator,
      .net-margin-indicator {
        background: rgba(16, 185, 129, 0.1);
        color: #059669;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
      }

      .performance-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .performance-badge.positive {
        background: #d1fae5;
        color: #059669;
      }

      .performance-badge.negative {
        background: #fee2e2;
        color: #dc2626;
      }

      .performance-badge.neutral {
        background: #f3f4f6;
        color: #6b7280;
      }

      .chart-legend {
        padding: 20px;
        background: #f8fafc;
        border-radius: 8px;
        height: 100%;
      }

      .insight-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;
      }

      .insight-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .insight-icon {
        margin-right: 12px;
        padding: 8px;
        border-radius: 50%;
        background: #f1f5f9;
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .insight-content {
        flex: 1;
      }

      .insight-content strong {
        display: block;
        margin-bottom: 4px;
        color: var(--text-primary);
        font-size: 0.9rem;
      }

      .insight-content p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.8rem;
        line-height: 1.4;
      }

      .drill-btn {
        transition: all 0.3s ease;
      }

      .drill-btn:hover {
        background: var(--color-primary);
        color: white;
        transform: scale(1.1);
      }

      /* P&L Metric Cards Enhancement */
      .metric-card .metric-value h2 {
        background: linear-gradient(135deg, var(--color-primary), #1d4ed8);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* Variance Colors */
      .positive-variance {
        color: #059669 !important;
        font-weight: 600;
      }

      .negative-variance {
        color: #dc2626 !important;
        font-weight: 600;
      }

      .neutral-variance {
        color: #6b7280 !important;
        font-weight: 600;
      }

      /* Interactive Table Enhancements */
      #pl-statement-table tbody tr:hover {
        background-color: rgba(59, 130, 246, 0.03);
      }

      #pl-statement-table .edit-btn {
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      #pl-statement-table tr:hover .edit-btn {
        opacity: 1;
      }

      /* Budget Comparison Styles */
      #budget-comparison-table tbody tr {
        border-left: 4px solid transparent;
        transition: border-color 0.3s ease;
      }

      #budget-comparison-table tbody tr:hover {
        border-left-color: var(--color-primary);
        background-color: var(--bg-secondary);
      }

      /* Enhanced Budget vs Actual Styles */
      .budget-row[data-department="marketing"]:hover {
        border-left-color: #e74c3c !important;
      }

      .budget-row[data-department="it"]:hover {
        border-left-color: #3498db !important;
      }

      .budget-row[data-department="operations"]:hover {
        border-left-color: #f39c12 !important;
      }

      .budget-row[data-department="hr"]:hover {
        border-left-color: #9b59b6 !important;
      }

      .budget-row[data-department="sales"]:hover {
        border-left-color: #2ecc71 !important;
      }

      .budget-row[data-department="finance"]:hover {
        border-left-color: #34495e !important;
      }

      .filter-row {
        display: flex;
        gap: 20px;
        align-items: end;
        flex-wrap: wrap;
        margin-bottom: 20px;
      }

      .filter-group {
        display: flex;
        flex-direction: column;
        min-width: 150px;
      }

      .filter-group label {
        font-weight: 600;
        margin-bottom: 5px;
        color: var(--text);
      }

      .progress-container {
        margin-top: 15px;
      }

      .progress-bar {
        width: 100%;
        height: 8px;
        background-color: var(--border-light);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 5px;
      }

      .progress-fill {
        height: 100%;
        transition: width 0.6s ease;
        border-radius: 4px;
      }

      .progress-text {
        font-size: 0.9rem;
        color: var(--text-light);
      }

      .metric-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
      }

      .metric-item {
        text-align: center;
        padding: 10px;
        background: var(--bg-secondary);
        border-radius: var(--radius);
      }

      .metric-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-light);
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .metric-value {
        display: block;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text);
      }

      .alert-list {
        max-height: 200px;
        overflow-y: auto;
      }

      .alert-item {
        display: flex;
        align-items: center;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: var(--radius);
        border-left: 4px solid;
      }

      .alert-item.alert-warning {
        background-color: rgba(245, 158, 11, 0.1);
        border-left-color: var(--warning);
        color: var(--warning);
      }

      .alert-item.alert-danger {
        background-color: rgba(220, 38, 38, 0.1);
        border-left-color: var(--danger);
        color: var(--danger);
      }

      .alert-item.alert-info {
        background-color: rgba(8, 145, 178, 0.1);
        border-left-color: var(--info);
        color: var(--info);
      }

      .alert-item i {
        margin-right: 10px;
        font-size: 1.1rem;
      }

      .alert-content {
        flex: 1;
      }

      .alert-content strong {
        display: block;
        margin-bottom: 2px;
      }

      .alert-content span {
        font-size: 0.9rem;
        opacity: 0.8;
      }

      .insight-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }

      .insight-item {
        display: flex;
        align-items: flex-start;
        gap: 15px;
      }

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

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

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

      .insight-icon.info {
        background-color: var(--info);
      }

      .insight-content h4 {
        margin: 0 0 8px 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
      }

      .insight-content p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-light);
        line-height: 1.4;
      }

      .forecast-summary {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .forecast-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-light);
      }

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

      .forecast-label {
        font-size: 0.9rem;
        color: var(--text-light);
      }

      .forecast-value {
        font-weight: 600;
        color: var(--text);
      }

      .status-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .status-badge.status-success {
        background-color: rgba(5, 150, 105, 0.1);
        color: var(--success);
        border: 1px solid rgba(5, 150, 105, 0.3);
      }

      .status-badge.status-warning {
        background-color: rgba(245, 158, 11, 0.1);
        color: var(--warning);
        border: 1px solid rgba(245, 158, 11, 0.3);
      }

      .status-badge.status-danger {
        background-color: rgba(220, 38, 38, 0.1);
        color: var(--danger);
        border: 1px solid rgba(220, 38, 38, 0.3);
      }

      @media (max-width: 768px) {
        .filter-row {
          flex-direction: column;
          align-items: stretch;
        }

        .metric-row {
          grid-template-columns: repeat(2, 1fr);
        }

        .dashboard-grid {
          grid-template-columns: 1fr;
        }
      }
        background-color: rgba(59, 130, 246, 0.02);
      }

      /* Balance Sheet Specific Styles */
      .balance-sheet-section {
        background: #fafbfc;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
      }

      .section-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--color-primary);
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      .subsection {
        margin-bottom: 25px;
      }

      .subsection-header {
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 15px;
        padding: 10px 15px;
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 1px solid #bae6fd;
      }

      .subsection-header:hover {
        background: linear-gradient(135deg, #e0f2fe, #bae6fd);
        transform: translateX(5px);
      }

      .subsection-header .expand-icon {
        margin-right: 10px;
        transition: transform 0.3s ease;
        color: var(--color-primary);
      }

      .subsection-header.expanded .expand-icon {
        transform: rotate(90deg);
      }

      .subsection-content {
        transition: all 0.3s ease;
        overflow: hidden;
      }

      .subsection-content.collapsed {
        max-height: 0;
        opacity: 0;
      }

      .balance-sheet-table {
        margin-bottom: 0;
        background: white;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }
      /* Balance Sheet Chart Container */
      .balance-sheet-chart-container {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
      }

      .balance-sheet-table tbody tr {
        border-bottom: 1px solid #f1f5f9;
        transition: background-color 0.3s ease;
      }

      .balance-sheet-table tbody tr:hover {
        background-color: rgba(59, 130, 246, 0.05);
      }

      .account-row {
        position: relative;
      }

      .account-name {
        font-weight: 600;
        color: var(--text-primary);
        position: relative;
      }

      .account-code {
        display: inline-block;
        background: #f1f5f9;
        color: #64748b;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 500;
        margin-right: 8px;
        font-family: "Monaco", "Menlo", monospace;
      }

      .sub-account-name {
        padding-left: 20px;
        font-style: italic;
        color: #64748b;
      }

      .current-amount,
      .previous-amount {
        text-align: right;
        font-weight: 600;
        font-family: "Monaco", "Menlo", monospace;
      }

      .current-amount {
        color: var(--text-primary);
        font-size: 1.05rem;
      }

      .previous-amount {
        color: #64748b;
        font-size: 0.9rem;
      }

      .variance {
        text-align: right;
        font-weight: 600;
        font-size: 0.9rem;
      }

      .variance.positive {
        color: #059669;
      }

      .variance.negative {
        color: #dc2626;
      }

      .variance.neutral {
        color: #64748b;
      }

      .subsection-total td {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        font-weight: 700;
        border-top: 2px solid var(--border-color);
        border-bottom: 2px solid var(--border-color);
        padding: 12px;
      }

      .subsection-total-major td {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        font-weight: 700;
        border-top: 3px solid #f59e0b;
        border-bottom: 3px solid #f59e0b;
        padding: 15px;
        font-size: 1.1rem;
      }

      .section-total .total-row td {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        font-weight: 800;
        color: #065f46;
        border: 3px solid #10b981;
        padding: 20px 12px;
        font-size: 1.2rem;
      }

      /* Financial Ratio Cards */
      .ratio-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        border: 2px solid #f1f5f9;
        transition: all 0.3s ease;
        height: 100%;
        margin-bottom: 20px;
      }

      .ratio-card:hover {
        border-color: var(--color-primary);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
      }

      .ratio-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-primary), #1d4ed8);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: white;
        font-size: 1.2rem;
      }

      .ratio-content .ratio-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }

      .ratio-content .ratio-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
        font-family: "Monaco", "Menlo", monospace;
      }

      .ratio-content .ratio-trend {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        margin-bottom: 8px;
      }

      .ratio-content .ratio-trend.positive {
        color: #059669;
      }

      .ratio-content .ratio-trend.negative {
        color: #dc2626;
      }

      .ratio-benchmark {
        font-size: 0.7rem;
        color: #9ca3af;
        font-style: italic;
      }

      /* Drill Down Buttons */
      .drill-down-btn {
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      .account-row:hover .drill-down-btn {
        opacity: 1;
      }

      .drill-down-btn:hover {
        background: var(--color-primary);
        color: white;
        transform: scale(1.1);
      }

      /* Chart Insights */
      .chart-insights {
        background: #f8fafc;
        padding: 20px;
        border-radius: 8px;
        height: 100%;
      }

      .chart-insights .insight-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;
      }

      .chart-insights .insight-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .chart-insights .insight-icon {
        margin-right: 12px;
        padding: 8px;
        border-radius: 50%;
        background: #f1f5f9;
        min-width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .chart-insights .insight-content strong {
        display: block;
        margin-bottom: 4px;
        color: var(--text-primary);
        font-size: 0.9rem;
      }

      .chart-insights .insight-content p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.8rem;
        line-height: 1.4;
      }

      /* Ratio Analysis */
      .ratio-group {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        height: 100%;
        margin-bottom: 20px;
      }

      .ratio-group h5 {
        color: var(--color-primary);
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e2e8f0;
        text-align: center;
      }

      .ratio-item {
        margin-bottom: 20px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 6px;
        border-left: 4px solid var(--color-primary);
      }

      .ratio-name {
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 5px;
      }

      .ratio-calculation {
        font-size: 0.8rem;
        color: #64748b;
        font-style: italic;
        margin-bottom: 8px;
      }

      .ratio-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .ratio-result .ratio-value {
        font-size: 1.25rem;
        font-weight: 700;
        font-family: "Monaco", "Menlo", monospace;
        color: var(--text-primary);
      }

      .ratio-status {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .ratio-status.excellent {
        background: #d1fae5;
        color: #065f46;
      }

      .ratio-status.good {
        background: #dbeafe;
        color: #1e40af;
      }

      .ratio-status.fair {
        background: #fef3c7;
        color: #92400e;
      }

      .ratio-status.poor {
        background: #fee2e2;
        color: #991b1b;
      }

      /* Notes Section */
      .notes-list {
        max-height: 400px;
        overflow-y: auto;
      }

      .note-item {
        margin-bottom: 20px;
        padding: 15px;
        background: #f8fafc;
        border-radius: 8px;
        border-left: 4px solid var(--color-info);
      }

      .note-item h6 {
        color: var(--color-primary);
        margin-bottom: 8px;
        font-weight: 600;
      }

      .note-item p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.9rem;
        line-height: 1.5;
      }

      /* Actions Column */
      .actions {
        text-align: center;
        white-space: nowrap;
      }

      /* Responsive Balance Sheet */
      @media (max-width: 768px) {
        .balance-sheet-section {
          padding: 15px;
        }

        .ratio-card {
          margin-bottom: 15px;
        }

        .account-code {
          display: none;
        }

        .previous-amount,
        .variance {
          display: none;
        }

        .chart-insights .insight-item {
          margin-bottom: 15px;
        }
      }

      /* Animation for Balance Sheet Elements */
      @keyframes balanceSheetSlideIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Advanced Analytics Styles */
      .analytics-card {
        background: white;
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
        height: 100%;
      }

      .analytics-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }

      .analytics-header {
        margin-bottom: 20px;
        text-align: center;
      }

      .analytics-header h5 {
        color: #1e40af;
        font-weight: 600;
        margin-bottom: 15px;
      }

      .health-score {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
      }

      .score-circle {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: conic-gradient(#10b981 0deg 306deg, #e5e7eb 306deg 360deg);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .score-circle::before {
        content: "";
        width: 70px;
        height: 70px;
        background: white;
        border-radius: 50%;
        position: absolute;
      }

      .score-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1f2937;
        z-index: 1;
      }

      .score-max {
        font-size: 0.9rem;
        color: #6b7280;
        z-index: 1;
      }

      .health-indicators {
        text-align: left;
      }

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

      .indicator span {
        font-size: 0.9rem;
        color: #4b5563;
      }

      .risk-meter {
        margin-bottom: 20px;
      }

      .risk-meter label {
        display: block;
        font-size: 0.85rem;
        color: #4b5563;
        margin-bottom: 5px;
        font-weight: 500;
      }

      .risk-meter .progress {
        height: 8px;
        background: #f3f4f6;
        border-radius: 4px;
        margin-bottom: 5px;
      }

      .risk-label {
        font-size: 0.8rem;
        color: #6b7280;
        font-weight: 500;
      }

      .growth-indicators {
        text-align: left;
      }

      .growth-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #f3f4f6;
      }

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

      .growth-label {
        font-size: 0.85rem;
        color: #4b5563;
        font-weight: 500;
      }

      .growth-value {
        font-weight: 700;
        font-size: 0.9rem;
      }

      .growth-value.positive {
        color: #059669;
      }

      .growth-value.negative {
        color: #dc2626;
      }

      .cash-flow-chart-container {
        padding: 20px;
        background: #f8fafc;
        border-radius: 8px;
        margin-bottom: 20px;
      }

      .cash-flow-metrics {
        padding: 20px;
      }

      .cash-flow-metrics h5 {
        color: #1e40af;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
      }

      .metric-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f3f4f6;
      }

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

      .metric-label {
        font-size: 0.9rem;
        color: #4b5563;
        font-weight: 500;
        flex: 1;
      }

      .metric-value {
        font-weight: 700;
        color: #1f2937;
        margin-right: 10px;
      }

      .metric-trend {
        font-size: 0.8rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 12px;
      }

      .metric-trend.positive {
        color: #059669;
        background: #d1fae5;
      }

      .metric-trend.negative {
        color: #dc2626;
        background: #fee2e2;
      }

      .metric-trend.neutral {
        color: #6b7280;
        background: #f3f4f6;
      }

      .balance-sheet-section {
        animation: balanceSheetSlideIn 0.6s ease-out;
      }

      .ratio-card {
        animation: balanceSheetSlideIn 0.4s ease-out;
      }

      .ratio-card:nth-child(1) {
        animation-delay: 0.1s;
      }
      .ratio-card:nth-child(2) {
        animation-delay: 0.2s;
      }
      .ratio-card:nth-child(3) {
        animation-delay: 0.3s;
      }
      .ratio-card:nth-child(4) {
        animation-delay: 0.4s;
      }
      .ratio-card:nth-child(5) {
        animation-delay: 0.5s;
      }
      .ratio-card:nth-child(6) {
        animation-delay: 0.6s;
      }

      /* Advanced P&L Enhancement Styles */
      .forecast-controls {
        background: #f8fafc;
        padding: 20px;
        border-radius: 8px;
        height: 100%;
      }
      /* Section header for financial forecasting */
      .forecast-section {
        margin-bottom: 20px;
      }
      .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 8px;
      }
      .section-description {
        font-size: 0.9rem;
        color: var(--text-secondary);
        margin-bottom: 16px;
      }

      .forecast-controls .form-group {
        margin-bottom: 20px;
      }

      .forecast-controls label {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
        display: block;
      }

      .forecast-chart-container {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        height: 100%;
      }

      .forecast-summary {
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #0ea5e9;
      }

      .forecast-metric {
        text-align: center;
        padding: 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .forecast-metric .metric-label {
        display: block;
        font-size: 0.8rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .forecast-metric .metric-value {
        display: block;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 4px;
      }

      .forecast-metric .metric-change {
        display: block;
        font-size: 0.75rem;
        color: #059669;
        font-weight: 600;
      }

      /* KPI Cards */
      .kpi-card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        border: 2px solid #f1f5f9;
        transition: all 0.3s ease;
        height: 100%;
      }

      .kpi-card:hover {
        border-color: var(--color-primary);
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
      }

      .kpi-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-primary), #1d4ed8);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: white;
        font-size: 1.2rem;
      }

      .kpi-content .kpi-label {
        display: block;
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .kpi-content .kpi-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 4px;
      }

      .kpi-content .kpi-trend {
        display: block;
        font-size: 0.7rem;
        font-weight: 600;
      }

      .kpi-content .kpi-trend.positive {
        color: #059669;
      }

      .kpi-content .kpi-trend.negative {
        color: #dc2626;
      }

      /* Dimensional Analysis */
      .contribution-bar {
        width: 100%;
        height: 20px;
        background: #f1f5f9;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
      }

      .contribution-fill {
        height: 100%;
        background: linear-gradient(90deg, #10b981, #059669);
        border-radius: 10px;
        transition: width 0.8s ease;
      }

      .analysis-insights {
        background: #f8fafc;
        padding: 20px;
        border-radius: 8px;
        height: 100%;
      }

      .insight-card {
        background: white;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
        border-left: 4px solid var(--color-primary);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      }

      .insight-card h6 {
        color: var(--color-primary);
        margin-bottom: 8px;
        font-size: 0.9rem;
        font-weight: 600;
      }

      .insight-card p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 0.8rem;
        line-height: 1.4;
      }

      /* Enhanced Hover Effects */
      .kpi-card,
      .forecast-metric,
      .insight-card {
        cursor: pointer;
      }

      #dimensional-analysis-table tbody tr:hover {
        background: rgba(59, 130, 246, 0.05);
        transform: translateX(5px);
        transition: all 0.3s ease;
      }

      /* Interactive Elements */
      .forecast-controls input:focus,
      .forecast-controls select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
      }

      /* Animation for New Elements */
      @keyframes slideInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .forecast-summary {
        animation: slideInUp 0.6s ease-out;
      }

      .kpi-card {
        animation: slideInUp 0.4s ease-out;
      }

      .kpi-card:nth-child(1) {
        animation-delay: 0.1s;
      }
      .kpi-card:nth-child(2) {
        animation-delay: 0.2s;
      }
      .kpi-card:nth-child(3) {
        animation-delay: 0.3s;
      }
      .kpi-card:nth-child(4) {
        animation-delay: 0.4s;
      }
      .kpi-card:nth-child(5) {
        animation-delay: 0.5s;
      }
      .kpi-card:nth-child(6) {
        animation-delay: 0.6s;
      }

      /* Responsive Enhancements */
      @media (max-width: 992px) {
        .kpi-card {
          margin-bottom: 20px;
        }

        .forecast-metric {
          margin-bottom: 15px;
        }
      }

      /* Responsive P&L Styles */
      @media (max-width: 768px) {
        .section-header td {
          font-size: 0.8rem;
          padding: 10px 8px;
        }

        .gross-profit-row td,
        .operating-profit-row td,
        .net-profit-row td,
        .final-net-profit-row td {
          font-size: 0.9rem;
          padding: 12px 8px;
        }

        .insight-item {
          flex-direction: column;
          text-align: center;
        }

        .insight-icon {
          margin: 0 0 10px 0;
          align-self: center;
        }

        .chart-legend {
          margin-top: 20px;
        }

        .performance-badge {
          font-size: 0.7rem;
          padding: 3px 8px;
        }
      }

      /* Animation for expanding rows */
      @keyframes expandRow {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .sub-account.showing {
        animation: expandRow 0.3s ease-out;
      }

      /* P&L Loading States */
      .pl-loading {
        position: relative;
        overflow: hidden;
      }

      .pl-loading::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(59, 130, 246, 0.1),
          transparent
        );
        animation: shimmer 1.5s infinite;
      }

      @keyframes shimmer {
        0% {
          left: -100%;
        }
        100% {
          left: 100%;
        }
      }

      /* ===== SETTINGS SECTION STYLES ===== */

      /* Settings Navigation */
      .settings-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        border-bottom: 2px solid #e5e7eb;
        padding-bottom: 15px;
      }

      .settings-nav-btn {
        background: none;
        border: none;
        padding: 12px 20px;
        color: #6b7280;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        font-size: 14px;
      }

      .settings-nav-btn:hover {
        background: #f3f4f6;
        color: #374151;
      }

      .settings-nav-btn.active {
        background: #3b82f6;
        color: white;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
      }

      .settings-nav-btn i {
        font-size: 16px;
      }

      /* Settings Tab Content */
      .settings-tab-content {
        display: none;
        animation: settingsSlideIn 0.3s ease-in-out;
      }

      .settings-tab-content.active {
        display: block;
      }

      @keyframes settingsSlideIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Theme Selector */
      .theme-selector {
        display: flex;
        gap: 15px;
        margin-top: 10px;
      }

      .theme-option {
        flex: 1;
      }

      .theme-card {
        display: block;
        width: 100%;
        padding: 20px;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;
        text-decoration: none;
        color: #374151;
      }

      .theme-card:hover {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        text-decoration: none;
        color: #374151;
      }

      .theme-card i {
        font-size: 24px;
        margin-bottom: 8px;
        display: block;
      }

      .theme-card.light-theme i {
        color: #f59e0b;
      }

      .theme-card.dark-theme i {
        color: #6366f1;
      }

      .theme-card.auto-theme i {
        color: #10b981;
      }

      input[type="radio"]:checked + .theme-card {
        border-color: #3b82f6;
        background: #eff6ff;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }

      /* Settings Toggles */
      .settings-toggles {
        margin-top: 20px;
      }

      .toggle-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #f3f4f6;
      }

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

      .toggle-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        cursor: pointer;
      }

      .toggle-label span {
        font-weight: 500;
        color: #374151;
      }

      .toggle-checkbox {
        display: none;
      }

      .toggle-slider {
        width: 50px;
        height: 28px;
        background: #d1d5db;
        border-radius: 34px;
        position: relative;
        transition: background 0.3s ease;
        cursor: pointer;
      }

      .toggle-slider::before {
        content: "";
        position: absolute;
        width: 22px;
        height: 22px;
        left: 3px;
        top: 3px;
        background: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .toggle-checkbox:checked + .toggle-slider {
        background: #3b82f6;
      }

      .toggle-checkbox:checked + .toggle-slider::before {
        transform: translateX(22px);
      }

      /* Company Logo Upload */
      .company-logo-section {
        text-align: center;
      }

      .logo-upload-area {
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        padding: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f9fafb;
      }

      .logo-upload-area:hover {
        border-color: #3b82f6;
        background: #eff6ff;
      }

      .current-logo {
        margin-bottom: 15px;
      }

      .company-logo-placeholder {
        font-size: 48px;
        color: #9ca3af;
        margin-bottom: 10px;
        display: block;
      }

      .logo-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
        margin-top: 15px;
      }

      /* Tax Rates Configuration */
      .tax-rates-container {
        margin-top: 20px;
      }

      .tax-rate-item {
        padding: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #f9fafb;
      }

      .tax-rate-item:last-child {
        margin-bottom: 0;
      }

      /* User Management */
      .user-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #3b82f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
      }

      .status-indicator {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
      }

      .status-indicator.active {
        background: #d1fae5;
        color: #065f46;
      }

      .status-indicator.inactive {
        background: #fee2e2;
        color: #991b1b;
      }

      /* Permissions Matrix */
      .permissions-matrix {
        margin-top: 20px;
      }

      .permission-category {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #f9fafb;
      }

      .permission-category h5 {
        color: #374151;
        margin-bottom: 15px;
        font-weight: 600;
      }

      .permission-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .permission-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: white;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
      }

      .role-permissions {
        display: flex;
        gap: 20px;
      }

      .role-permissions label {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.875rem;
        margin: 0;
      }

      /* Integrations Grid */
      .integrations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 24px;
        margin-top: 20px;
      }

      .integration-card {
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        padding: 24px;
        background: white;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .integration-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
        border-color: #3b82f6;
      }

      .integration-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
      }

      .integration-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .integration-icon i {
        font-size: 28px;
        color: #374151;
      }

      .integration-status-indicator {
        position: relative;
      }

      .status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        animation: pulse 2s infinite;
      }

      .status-dot.connected {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
      }

      .status-dot.available {
        background: #6b7280;
        animation: none;
      }

      .status-dot.error {
        background: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
      }

      .status-dot.inactive {
        background: #9ca3af;
        animation: none;
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        }
      }

      .integration-info h5 {
        margin-bottom: 8px;
        font-weight: 700;
        color: #111827;
        font-size: 1.125rem;
      }

      .integration-info p {
        color: #6b7280;
        font-size: 0.875rem;
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .integration-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }

      .integration-stats small {
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        gap: 4px;
      }

      .integration-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .integration-actions .btn {
        flex: 1;
        min-width: 80px;
      }

      /* Integration Metric Cards */
      .integration-metric {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        transition: all 0.3s ease;
      }

      .integration-metric:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .integration-metric .metric-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 12px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .integration-metric .metric-icon.bg-success {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      }

      .integration-metric .metric-icon.bg-warning {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      }

      .integration-metric .metric-icon.bg-info {
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
      }

      .integration-metric .metric-icon.bg-primary {
        background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
      }

      .integration-metric .metric-icon i {
        color: white;
        font-size: 20px;
      }

      .integration-metric h4 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #111827;
        margin-bottom: 4px;
      }

      .integration-metric p {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
      }

      /* API Management */
      .api-usage-stats {
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
        border: 1px solid #e2e8f0;
      }

      .api-usage-stats h6 {
        margin-bottom: 12px;
        color: #374151;
        font-weight: 600;
      }

      .api-usage-stats .progress {
        height: 8px;
        border-radius: 4px;
        background: #e2e8f0;
      }

      .api-usage-stats .progress-bar {
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        border-radius: 4px;
        font-size: 0.75rem;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        transition: width 0.6s ease;
      }

      /* API Keys */
      .api-keys-section {
        margin-top: 24px;
      }

      .api-keys-section h6 {
        margin-bottom: 16px;
        color: #374151;
        font-weight: 600;
      }

      .api-keys-list {
        margin-top: 16px;
      }

      .api-key-item {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: white;
        margin-bottom: 16px;
        transition: all 0.3s ease;
        overflow: hidden;
      }

      .api-key-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border-color: #d1d5db;
      }

      .api-key-info {
        padding: 20px;
      }

      .api-key-value {
        display: flex;
        align-items: center;
        margin: 8px 0;
      }

      .api-key-value code {
        background: #f3f4f6;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.875rem;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        border: 1px solid #e5e7eb;
        transition: all 0.3s ease;
      }

      .api-key-value code.blur {
        filter: blur(4px);
        transition: filter 0.3s ease;
      }

      .api-key-value code:not(.blur) {
        filter: none;
      }

      .api-key-status .badge {
        font-size: 0.75rem;
        padding: 4px 8px;
      }

      .api-key-permissions {
        margin-top: 8px;
      }

      .api-key-actions {
        padding: 0 20px 20px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      /* Webhooks */
      .webhooks-section {
        margin-top: 24px;
        padding-top: 24px;
        border-top: 1px solid #e5e7eb;
      }

      .webhooks-section h6 {
        color: #374151;
        font-weight: 600;
      }

      .webhooks-list {
        margin-top: 16px;
      }

      .webhook-item {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: white;
        margin-bottom: 12px;
        transition: all 0.3s ease;
      }

      .webhook-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        border-color: #d1d5db;
      }

      .webhook-info {
        padding: 16px 20px;
      }

      .webhook-url code {
        background: #f3f4f6;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.875rem;
        font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
        margin: 8px 0;
        display: block;
      }

      .webhook-actions {
        padding: 0 20px 16px;
        display: flex;
        gap: 8px;
      }

      /* Activity Log */
      .activity-log {
        max-height: 400px;
        overflow-y: auto;
      }

      .activity-item {
        display: flex;
        align-items: flex-start;
        padding: 16px 0;
        border-bottom: 1px solid #f3f4f6;
      }

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

      .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        flex-shrink: 0;
      }

      .activity-icon i {
        color: white;
        font-size: 16px;
      }

      .activity-content {
        flex: 1;
      }

      .activity-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
      }

      .activity-header strong {
        color: #111827;
        font-weight: 600;
      }

      .activity-description {
        color: #6b7280;
        font-size: 0.875rem;
        margin: 0;
      }

      /* List View Mode */
      .integrations-grid.list-view {
        display: block;
      }

      .integrations-grid.list-view .integration-card {
        display: flex;
        align-items: center;
        padding: 16px 20px;
        margin-bottom: 12px;
      }

      .integrations-grid.list-view .integration-header {
        margin-bottom: 0;
        margin-right: 20px;
      }

      .integrations-grid.list-view .integration-info {
        flex: 1;
        margin-right: 20px;
      }

      .integrations-grid.list-view .integration-stats {
        margin-bottom: 0;
      }

      .integrations-grid.list-view .integration-actions {
        margin-top: 0;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
        .integrations-grid {
          grid-template-columns: 1fr;
          gap: 16px;
        }

        .integration-card {
          padding: 16px;
        }

        .integration-actions {
          flex-direction: column;
        }

        .integration-actions .btn {
          width: 100%;
        }

        .api-key-actions,
        .webhook-actions {
          flex-direction: column;
        }

        .api-key-actions .btn,
        .webhook-actions .btn {
          width: 100%;
        }
      }

      /* Notifications Settings */
      .notifications-settings {
        margin-top: 20px;
      }

      .notification-category {
        margin-bottom: 30px;
      }

      .notification-category h5 {
        color: #374151;
        margin-bottom: 15px;
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e7eb;
      }

      .notification-items {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .notification-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: white;
      }

      .notification-info strong {
        display: block;
        color: #111827;
        margin-bottom: 4px;
      }

      .notification-info p {
        margin: 0;
        color: #6b7280;
        font-size: 0.875rem;
      }

      .notification-controls .toggle-label {
        margin: 0;
      }

      /* Export Options */
      .export-options {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 15px;
      }

      .export-options .btn {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Settings Actions */
      .settings-actions {
        display: flex;
        gap: 15px;
        justify-content: flex-end;
        padding: 20px;
        background: #f9fafb;
        border-radius: 8px;
      }

      /* Responsive Settings */
      @media (max-width: 768px) {
        .settings-nav {
          flex-direction: column;
        }

        .settings-nav-btn {
          justify-content: center;
          width: 100%;
        }

        .theme-selector {
          flex-direction: column;
        }

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

        .permission-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }

        .role-permissions {
          flex-direction: column;
          gap: 10px;
        }

        .notification-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }

        .settings-actions {
          flex-direction: column;
        }

        .api-key-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }

        .export-options {
          flex-direction: column;
        }
      }

      /* Settings Animation Effects */
      .settings-tab-content .card {
        margin-bottom: 20px;
        animation: settingsCardSlideIn 0.4s ease-out;
      }

      @keyframes settingsCardSlideIn {
        from {
          opacity: 0;
          transform: translateY(15px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Form Enhancements for Settings */
      .settings-tab-content .form-group {
        margin-bottom: 20px;
      }

      .settings-tab-content .form-group label {
        font-weight: 500;
        color: #374151;
        margin-bottom: 8px;
        display: block;
      }

      .settings-tab-content .form-control {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 10px 12px;
        transition: all 0.3s ease;
      }

      .settings-tab-content .form-control:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        outline: none;
      }

      /* Settings Success Messages */
      .settings-success {
        background: #d1fae5;
        color: #065f46;
        padding: 12px 16px;
        border-radius: 6px;
        margin-bottom: 20px;
        border-left: 4px solid #10b981;
        display: none;
      }

      .settings-success.show {
        display: block;
        animation: settingsMessageSlideDown 0.3s ease-out;
      }

      @keyframes settingsMessageSlideDown {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Bootstrap override for custom dropdowns */
      .language-switcher .switcher-dropdown,
      .currency-switcher .switcher-dropdown {
        position: absolute !important;
        display: block !important;
        z-index: 9999 !important;
      }

      .language-switcher .switcher-dropdown.show,
      .currency-switcher .switcher-dropdown.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
      }

      /* Prevent Bootstrap button styles from interfering */
      .language-switcher .switcher-btn,
      .currency-switcher .switcher-btn {
        outline: none !important;
        box-shadow: var(--shadow) !important;
      }

      .language-switcher .switcher-btn:focus,
      .currency-switcher .switcher-btn:focus {
        outline: none !important;
        box-shadow: var(--shadow-md) !important;
      }
      /* User Profile Dropdown */
      .user-profile {
        position: relative;
      }
      .user-profile .user-btn {
        display: flex;
        align-items: center;
        background: var(--card);
        border: 1px solid var(--border);
        padding: 5px 10px;
        border-radius: var(--radius);
        color: var(--text);
        box-shadow: var(--shadow);
      }
      .user-profile .user-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 8px;
      }
      .user-profile .user-name {
        font-weight: 500;
      }
      .user-profile .dropdown-menu {
        right: 0;
        left: auto;
      }

      /* Sales Trends Over Time Styles */
      .st-filters {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 2rem;
      }

      .st-filter-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
      }

      .st-filter-item {
        display: flex;
        flex-direction: column;
      }

      .st-filter-label {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
      }

      .st-custom-range {
        background: var(--card);
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        margin-bottom: 1rem;
      }

      .st-metric-card {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        position: relative;
        transition: all 0.3s ease;
      }

      .st-metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }

      .st-trend {
        position: absolute;
        top: 1rem;
        right: 1rem;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
      }

      .st-trend.up {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
      }

      .st-trend.down {
        background: rgba(220, 38, 38, 0.1);
        color: var(--danger);
      }

      .st-trend.neutral {
        background: rgba(100, 116, 139, 0.1);
        color: var(--text-light);
      }

      .st-metric-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
      }

      .st-metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1;
        margin-bottom: 0.5rem;
      }

      .st-metric-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text);
        margin-bottom: 0.25rem;
      }

      .st-metric-period {
        font-size: 0.75rem;
        color: var(--text-light);
      }

      .st-chart-container {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        margin-bottom: 1rem;
      }

      .st-chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
      }

      .st-chart-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text);
        margin: 0;
      }

      .st-chart-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .st-insights-container {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
      }

      .insights-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .insight-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid transparent;
      }

      .insight-item.positive {
        background: rgba(5, 150, 105, 0.05);
        border-color: rgba(5, 150, 105, 0.2);
      }

      .insight-item.warning {
        background: rgba(217, 119, 6, 0.05);
        border-color: rgba(217, 119, 6, 0.2);
      }

      .insight-item.neutral {
        background: rgba(100, 116, 139, 0.05);
        border-color: rgba(100, 116, 139, 0.2);
      }

      .insight-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
        flex-shrink: 0;
      }

      .insight-item.positive .insight-icon {
        background: var(--success);
        color: white;
      }

      .insight-item.warning .insight-icon {
        background: var(--warning);
        color: white;
      }

      .insight-item.neutral .insight-icon {
        background: var(--text-light);
        color: white;
      }

      .insight-content h4 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 0.5rem 0;
      }

      .insight-content p {
        font-size: 0.875rem;
        color: var(--text-light);
        margin: 0;
        line-height: 1.5;
      }

      .performance-indicators {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
      }

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

      .indicator-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--text);
        min-width: 120px;
      }

      .indicator-bar {
        flex: 1;
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
      }

      .indicator-progress {
        height: 100%;
        background: linear-gradient(90deg, var(--primary), var(--primary-light));
        border-radius: 4px;
        transition: width 0.3s ease;
      }

      .indicator-value {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        min-width: 40px;
        text-align: right;
      }

      .forecast-insights {
        background: var(--bg-secondary);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
      }

      .forecast-metric {
        text-align: center;
      }

      .forecast-label {
        display: block;
        font-size: 0.75rem;
        color: var(--text-light);
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .forecast-value {
        display: block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
      }

      .st-table-container {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        margin-top: 2rem;
      }

      .st-table {
        width: 100%;
        border-collapse: collapse;
      }

      .st-table th {
        background: var(--bg-secondary);
        color: var(--text);
        font-weight: 600;
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
      }

      .st-table td {
        padding: 1rem;
        border-bottom: 1px solid var(--border);
        color: var(--text);
      }

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

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

        .st-chart-header {
          flex-direction: column;
          align-items: flex-start;
        }

        .st-metric-value {
          font-size: 1.5rem;
        }

        .insight-item {
          flex-direction: column;
          text-align: center;
        }
      }

      /* Item List Management Styles */
      .il-filters {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
      }

      .il-filter-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        align-items: end;
      }

      .il-filter-item {
        display: flex;
        flex-direction: column;
      }

      .il-filter-label {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
      }

      .il-quick-actions {
        background: var(--card);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        border: 1px solid var(--border);
      }

      .il-bulk-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .il-selected-count {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        margin-right: 1rem;
      }

      .il-action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
      }

      .il-metric-card {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        transition: all 0.3s ease;
      }

      .il-metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }

      .il-metric-icon {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1rem;
      }

      .il-metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        line-height: 1;
        margin-bottom: 0.5rem;
      }

      .il-metric-label {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.25rem;
      }

      .il-metric-subtitle {
        font-size: 0.75rem;
        color: var(--text-light);
      }

      .il-table-container {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        margin-bottom: 1.5rem;
      }

      .il-table-container table {
        margin-bottom: 0;
      }

      .il-table-container .table th {
        border-top: none;
        font-weight: 600;
        color: white;
        background: var(--primary);
        padding: 1rem;
      }

      .il-table-container .table td {
        padding: 1rem;
        vertical-align: middle;
        border-color: var(--border);
      }

      .il-table-container .table tbody tr:hover {
        background: var(--bg-secondary);
      }

      .il-item-details {
        display: flex;
        align-items: center;
        gap: 0.75rem;
      }

      .il-item-image {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-light);
        flex-shrink: 0;
      }

      .il-item-info h6 {
        margin: 0;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text);
      }

      .il-item-info p {
        margin: 0;
        font-size: 0.75rem;
        color: var(--text-light);
      }

      .il-stock-badge {
        display: inline-block;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
      }

      .il-stock-badge.in-stock {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
      }

      .il-stock-badge.low-stock {
        background: rgba(217, 119, 6, 0.1);
        color: var(--warning);
      }

      .il-stock-badge.out-of-stock {
        background: rgba(220, 38, 38, 0.1);
        color: var(--danger);
      }

      .il-stock-badge.overstocked {
        background: rgba(59, 130, 246, 0.1);
        color: var(--primary);
      }

      .il-grid-container {
        margin-bottom: 1.5rem;
      }

      .il-grid-item {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        transition: all 0.3s ease;
        position: relative;
      }

      .il-grid-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }

      .il-grid-item-checkbox {
        position: absolute;
        top: 1rem;
        left: 1rem;
      }

      .il-grid-item-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: var(--text-light);
        font-size: 1.5rem;
      }

      .il-grid-item h6 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        text-align: center;
      }

      .il-grid-item-details {
        text-align: center;
        margin-bottom: 1rem;
      }

      .il-grid-item-details p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-light);
      }

      .il-grid-item-price {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--primary);
        text-align: center;
        margin-bottom: 1rem;
      }

      .il-grid-item-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
      }

      .il-pagination {
        background: var(--card);
        padding: 1rem 1.5rem;
        border-radius: 8px;
        border: 1px solid var(--border);
      }

      .il-pagination-info {
        font-size: 0.875rem;
        color: var(--text);
      }

      .il-pagination .pagination .page-link {
        color: var(--text);
        border-color: var(--border);
        background: var(--card);
      }

      .il-pagination .pagination .page-link:hover {
        background: var(--bg-secondary);
        border-color: var(--border);
      }

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

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

        .il-quick-actions {
          flex-direction: column;
          align-items: stretch;
        }

        .il-bulk-actions {
          justify-content: center;
        }

        .il-action-buttons {
          justify-content: center;
        }

        .il-metric-value {
          font-size: 1.5rem;
        }

        .il-grid-container .row {
          --bs-gutter-x: 1rem;
        }
      }

      /* Point of Sale (POS) Styles */
      .pos-search-section {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px solid var(--border);
      }

      .pos-category-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .pos-cat-btn {
        border-radius: 20px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
      }

      .pos-cat-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      .pos-products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
        max-height: 600px;
        overflow-y: auto;
        padding: 1rem;
        background: var(--bg-secondary);
        border-radius: 12px;
        border: 1px solid var(--border);
      }

      .pos-product-card {
        background: var(--card);
        border-radius: 12px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        position: relative;
      }

      .pos-product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-color: var(--primary);
      }

      .pos-product-image {
        width: 80px;
        height: 80px;
        background: var(--bg-secondary);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        font-size: 2rem;
        color: var(--text-light);
      }

      .pos-product-name {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }

      .pos-product-price {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.5rem;
      }

      .pos-product-stock {
        font-size: 0.8rem;
        color: var(--text-light);
      }

      .pos-cart-panel {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        height: fit-content;
        border: 1px solid var(--border);
        position: sticky;
        top: 2rem;
      }

      .pos-trend-card {
        background: var(--card);
        border-radius: 12px;
        border: 1px solid var(--border);
        box-shadow: var(--shadow);
        transition: all 0.3s ease;
      }

      .pos-trend-card:hover {
        box-shadow: var(--shadow-md);
      }

      .pos-trend-card canvas {
        border-radius: 8px;
        max-height: 300px;
        width: 100% !important;
      }

      .pos-trend-card {
        height: 350px;
      }

      .pos-customer-section {
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
      }

      .pos-cart-section {
        border-bottom: 1px solid var(--border);
        padding-bottom: 1rem;
      }

      .pos-cart-items {
        max-height: 300px;
        overflow-y: auto;
      }

      .pos-cart-item {
        display: flex;
        align-items: center;
        padding: 0.75rem;
        background: var(--bg-secondary);
        border-radius: 8px;
        margin-bottom: 0.5rem;
        border: 1px solid var(--border);
      }

      .pos-cart-item-image {
        width: 40px;
        height: 40px;
        background: var(--card);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
        color: var(--text-light);
      }

      .pos-cart-item-details {
        flex: 1;
      }

      .pos-cart-item-name {
        font-weight: 600;
        font-size: 0.9rem;
        color: var(--text);
        margin-bottom: 0.25rem;
      }

      .pos-cart-item-price {
        font-size: 0.8rem;
        color: var(--text-light);
      }

      .pos-cart-item-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .pos-quantity-control {
        display: flex;
        align-items: center;
        background: var(--card);
        border-radius: 6px;
        border: 1px solid var(--border);
      }

      .pos-quantity-btn {
        background: transparent;
        border: none;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        color: var(--text);
      }

      .pos-quantity-input {
        width: 50px;
        text-align: center;
        border: none;
        background: transparent;
        padding: 0.25rem;
        font-weight: 600;
      }

      .pos-remove-item {
        background: transparent;
        border: none;
        color: var(--danger);
        cursor: pointer;
        padding: 0.5rem;
      }

      .pos-cart-totals {
        background: var(--bg-secondary);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
      }

      .pos-empty-cart {
        color: var(--text-light);
      }

      .pos-quick-actions {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        border: 1px solid var(--border);
      }

      .pos-quick-actions .btn {
        height: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .pos-quick-actions .btn i {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
      }

      .pos-pagination .pagination {
        gap: 0.25rem;
      }

      .pos-pagination .page-link {
        border-radius: 6px;
        border: 1px solid var(--border);
        color: var(--text);
        background: var(--card);
      }

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

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

      @media (max-width: 768px) {
        .pos-products-grid {
          grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
          max-height: 400px;
        }

        .pos-cart-panel {
          position: static;
          margin-top: 2rem;
        }

        .pos-category-buttons {
          justify-content: center;
        }

        .pos-quick-actions .btn {
          height: 60px;
        }
      }

      /* Enhanced POS Features */
      .pos-metric-card {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
        border: 1px solid var(--border);
        transition: all 0.3s ease;
      }

      .pos-metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      }

      .pos-metric-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        margin-bottom: 1rem;
      }

      .pos-metric-value {
        font-size: 2rem;
        font-weight: bold;
        color: var(--text);
        margin-bottom: 0.5rem;
      }

      .pos-metric-label {
        color: var(--text-light);
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
      }

      .pos-metric-trend {
        font-size: 0.8rem;
        color: var(--success);
        font-weight: 600;
      }

      .pos-search-container {
        position: relative;
      }

      .pos-search-btn {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        background: var(--primary);
        color: white;
        border-radius: 6px;
        padding: 8px 12px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .pos-search-btn:hover {
        background: var(--primary-dark);
      }

      .pos-search-btn.scanning {
        background: var(--success);
        animation: scanPulse 1.5s infinite;
      }

      @keyframes scanPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.6; }
      }

      .pos-scanner-status {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1060;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        display: none;
        transition: all 0.3s ease;
      }

      .pos-scanner-status.online {
        background: var(--success);
      }

      .pos-scanner-status.offline {
        background: var(--warning);
      }

      .pos-scanner-status.scanning {
        background: var(--info);
        animation: scanPulse 1.5s infinite;
      }

      .pos-barcode-input {
        position: absolute;
        left: -9999px;
        opacity: 0;
        pointer-events: none;
      }

      .pos-scan-indicator {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--danger);
        transition: all 0.3s ease;
      }

      .pos-scan-indicator.active {
        background: var(--success);
        box-shadow: 0 0 10px var(--success);
      }

      .pos-scan-indicator.scanning {
        background: var(--warning);
        animation: scanPulse 1s infinite;
      }

      .pos-scanner-config {
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .pos-scanner-controls {
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-bottom: 1rem;
      }

      .pos-scanner-mode {
        display: flex;
        gap: 0.5rem;
      }

      .pos-scanner-mode input[type="radio"] {
        display: none;
      }

      .pos-scanner-mode label {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: var(--card);
        color: var(--text);
      }

      .pos-scanner-mode input[type="radio"]:checked + label {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      .pos-offline-queue {
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
        border-left: 4px solid var(--warning);
      }

      .pos-offline-queue h6 {
        color: var(--warning);
        margin-bottom: 0.75rem;
      }

      .pos-offline-item {
        background: var(--card);
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        border: 1px solid var(--border);
        display: flex;
        justify-content: between;
        align-items: center;
      }

      .pos-sync-button {
        background: var(--success);
        color: white;
        border: none;
        border-radius: 6px;
        padding: 0.5rem 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .pos-sync-button:hover {
        background: var(--success-dark);
      }

      .pos-sync-button:disabled {
        background: var(--text-light);
        cursor: not-allowed;
      }

      .pos-discount-section {
        background: var(--bg-secondary);
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
      }

      .pos-payment-modal .modal-content {
        border-radius: 15px;
        border: none;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      }

      .pos-payment-method {
        border: 2px solid var(--border);
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
        background: var(--card);
      }

      .pos-payment-method:hover {
        border-color: var(--primary);
        background: var(--bg-secondary);
      }

      .pos-payment-method.selected {
        border-color: var(--primary);
        background: var(--primary-light);
      }

      .pos-payment-method i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        color: var(--primary);
      }

      .pos-keypad {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-top: 1rem;
      }

      .pos-keypad-btn {
        aspect-ratio: 1;
        border: 1px solid var(--border);
        background: var(--card);
        border-radius: 8px;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        color: var(--text);
      }

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

      .pos-keypad-btn.wide {
        grid-column: span 2;
      }

      .pos-receipt {
        font-family: 'Courier New', monospace;
        font-size: 0.8rem;
        line-height: 1.4;
        white-space: pre-line;
        max-height: 400px;
        overflow-y: auto;
        background: var(--bg-secondary);
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        color: var(--text);
      }

      .pos-quick-item {
        background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 1rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 0.5rem;
      }

      .pos-quick-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(249, 115, 22, 0.3);
      }

      .pos-quick-item-price {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
      }

      .pos-quick-item-name {
        font-size: 0.9rem;
        opacity: 0.9;
      }

      .pos-discount-badge {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--success);
        color: white;
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-weight: 600;
      }

      .pos-low-stock {
        border-color: var(--warning) !important;
        background: rgba(255, 193, 7, 0.1);
      }

      .pos-out-of-stock {
        border-color: var(--danger) !important;
        background: rgba(220, 53, 69, 0.1);
        opacity: 0.7;
        cursor: not-allowed;
      }

      .pos-loyalty-card {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1rem;
      }

      .pos-loyalty-points {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
      }

      .pos-loyalty-tier {
        font-size: 0.9rem;
        opacity: 0.9;
      }

      .pos-favorite-product {
        border-color: var(--warning) !important;
        position: relative;
      }

      .pos-favorite-product::after {
        content: '\f005';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        color: var(--warning);
        font-size: 1rem;
      }

      /* Enhanced responsive design */
      @media (max-width: 992px) {
        .pos-metric-card {
          padding: 1rem;
        }

        .pos-metric-value {
          font-size: 1.5rem;
        }
      }

      @media (max-width: 576px) {
        .pos-products-grid {
          grid-template-columns: 1fr;
        }

        .pos-payment-buttons .row {
          gap: 0.5rem;
        }

        .pos-metric-card {
          padding: 0.75rem;
        }

        .pos-metric-value {
          font-size: 1.25rem;
        }
      }

      /* Inventory Management Styles */
      .inv-filters {
        background: var(--bg-secondary);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
      }

      .inv-filter-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        align-items: end;
      }

      .inv-filter-item {
        display: flex;
        flex-direction: column;
      }

      .inv-filter-label {
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }

      .inv-metric-card {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        border: 1px solid var(--border);
        transition: all 0.3s ease;
        height: 100%;
      }

      .inv-metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }

      .inv-metric-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 12px;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        color: white;
      }

      .inv-metric-icon.items {
        background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
      }

      .inv-metric-icon.value {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .inv-metric-icon.low-stock {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        color: #d97706;
      }

      .inv-metric-icon.locations {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #059669;
      }

      .inv-metric-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 0.5rem;
      }

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

      .inv-view-toggle {
        display: flex;
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 0.25rem;
        margin-bottom: 1.5rem;
      }

      .inv-view-btn {
        flex: 1;
        padding: 0.5rem 1rem;
        border: none;
        background: transparent;
        color: var(--text-light);
        border-radius: 6px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      .inv-view-btn.active {
        background: var(--primary);
        color: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .inv-bulk-actions {
        display: none;
        background: var(--bg-secondary);
        padding: 1rem 1.5rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        align-items: center;
        gap: 1rem;
      }

      .inv-bulk-actions.show {
        display: flex;
      }

      .inv-selected-count {
        font-weight: 600;
        color: var(--text);
      }

      .inv-bulk-btn {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--text);
        border-radius: 6px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .inv-bulk-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      .inv-table-container {
        background: var(--card);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        margin-bottom: 1.5rem;
      }

      .inv-table {
        width: 100%;
        margin: 0;
      }

      .inv-table th {
        background: var(--bg-secondary);
        border: none;
        padding: 1rem;
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
      }

      .inv-table td {
        padding: 1rem;
        border: none;
        border-bottom: 1px solid var(--border);
        color: var(--text);
      }

      .inv-table tbody tr:last-child td {
        border-bottom: none;
      }

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

      .inv-item-image {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-light);
      }

      .inv-stock-badge {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .inv-stock-badge.in-stock {
        background: rgba(34, 197, 94, 0.1);
        color: #16a34a;
      }

      .inv-stock-badge.low-stock {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
      }

      .inv-stock-badge.out-of-stock {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
      }

      .inv-action-btn {
        padding: 0.5rem;
        border: 1px solid var(--border);
        background: transparent;
        color: var(--text-light);
        border-radius: 6px;
        transition: all 0.3s ease;
        margin: 0 0.25rem;
      }

      .inv-action-btn:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      .inv-grid-container {
        margin-bottom: 1.5rem;
      }

      .inv-grid-item {
        background: var(--card);
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
        transition: all 0.3s ease;
        position: relative;
        height: 100%;
      }

      .inv-grid-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
      }

      .inv-grid-item-checkbox {
        position: absolute;
        top: 1rem;
        right: 1rem;
      }

      .inv-grid-item-image {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        background: var(--bg-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        color: var(--text-light);
        font-size: 1.5rem;
      }

      .inv-grid-item h6 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 0.5rem;
        text-align: center;
      }

      .inv-grid-item-details {
        text-align: center;
        margin-bottom: 1rem;
      }

      .inv-grid-item-detail {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
      }

      .inv-grid-item-detail span:first-child {
        color: var(--text-light);
      }

      .inv-grid-item-detail span:last-child {
        color: var(--text);
        font-weight: 500;
      }

      .inv-grid-item-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-top: 1rem;
      }

      .inv-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 0;
      }

      .inv-pagination-info {
        color: var(--text-light);
        font-size: 0.9rem;
      }

      .inv-pagination-controls {
        display: flex;
        gap: 0.5rem;
      }

      .inv-pagination-btn {
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--text);
        border-radius: 6px;
        transition: all 0.3s ease;
      }

      .inv-pagination-btn:hover:not(:disabled) {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

      .inv-pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .inv-pagination-btn.active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
      }

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

        .inv-view-toggle {
          margin-bottom: 1rem;
        }

        .inv-bulk-actions {
          flex-direction: column;
          align-items: stretch;
          gap: 0.75rem;
        }

        .inv-bulk-actions .d-flex {
          justify-content: center;
        }

        .inv-metric-value {
          font-size: 1.5rem;
        }

        .inv-table-container {
          overflow-x: auto;
        }

        .inv-pagination {
          flex-direction: column;
          gap: 1rem;
          text-align: center;
        }

        .inv-grid-container .row {
          --bs-gutter-x: 1rem;
        }
      }
      /* === Cash Flow Quality Metrics — ratio progress bars === */
      .ratio-bar {
        height: 7px;
        background: #e9ecef;
        border-radius: 4px;
        overflow: hidden;
      }
      .ratio-bar-fill {
        height: 100%;
        border-radius: 4px;
        transition: width 0.7s ease, background 0.4s ease;
      }
      .cf-ratio-value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        transition: color 0.3s;
      }
      .cf-ratio-status {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 8px;
        font-size: 11px;
        font-weight: 600;
        margin-left: 6px;
        vertical-align: middle;
      }
      .cf-ratio-status.excellent { background: #059669; color: #fff; }
      .cf-ratio-status.good      { background: #10b981; color: #fff; }
      .cf-ratio-status.fair      { background: #f59e0b; color: #fff; }
      .cf-ratio-status.weak      { background: #ef4444; color: #fff; }
      .cf-ratio-item             { margin-bottom: 12px; }

      /* ══════ Multi-Entity & Consolidation Engine Styles ══════ */
      .entity-tree-container {
        padding: 20px;
        min-height: 200px;
      }
      .entity-tree-node {
        position: relative;
        margin-left: 30px;
        padding: 10px 0;
      }
      .entity-tree-node:before {
        content: '';
        position: absolute;
        left: -20px;
        top: 0;
        width: 2px;
        height: 100%;
        background: var(--border, #334155);
      }
      .entity-tree-node:last-child:before {
        height: 24px;
      }
      .entity-tree-node:after {
        content: '';
        position: absolute;
        left: -20px;
        top: 24px;
        width: 18px;
        height: 2px;
        background: var(--border, #334155);
      }
      .entity-tree-root {
        margin-left: 0;
      }
      .entity-tree-root:before,
      .entity-tree-root:after {
        display: none;
      }
      .entity-tree-card {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 10px;
        background: var(--card, #1e293b);
        border: 1px solid var(--border, #334155);
        cursor: pointer;
        transition: all 0.2s;
      }
      .entity-tree-card:hover {
        border-color: var(--primary, #f97316);
        box-shadow: 0 2px 12px rgba(249,115,22,0.15);
        transform: translateY(-1px);
      }
      .entity-tree-card .entity-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
      }
      .entity-tree-card .entity-icon.parent { background: #f97316; }
      .entity-tree-card .entity-icon.subsidiary { background: #3b82f6; }
      .entity-tree-card .entity-icon.branch { background: #8b5cf6; }
      .entity-tree-card .entity-info h6 {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-primary, #f1f5f9);
      }
      .entity-tree-card .entity-info small {
        color: var(--text-secondary, #94a3b8);
        font-size: 0.7rem;
      }
      .entity-tree-card .entity-ownership {
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        background: rgba(59,130,246,0.15);
        color: #60a5fa;
      }
      .match-status-badge {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
      }
      .match-status-badge.matched { background: rgba(16,185,129,0.15); color: #10b981; }
      .match-status-badge.unmatched { background: rgba(245,158,11,0.15); color: #f59e0b; }
      .match-status-badge.partial { background: rgba(59,130,246,0.15); color: #3b82f6; }
      .match-status-badge.disputed { background: rgba(239,68,68,0.15); color: #ef4444; }
      .consolidation-status-badge {
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
      }
      .consolidation-status-badge.draft { background: rgba(148,163,184,0.15); color: #94a3b8; }
      .consolidation-status-badge.in_progress { background: rgba(59,130,246,0.15); color: #3b82f6; }
      .consolidation-status-badge.completed { background: rgba(16,185,129,0.15); color: #10b981; }
      .consolidation-status-badge.approved { background: rgba(139,92,246,0.15); color: #8b5cf6; }
      .consolidation-status-badge.rejected { background: rgba(239,68,68,0.15); color: #ef4444; }

      #multiEntityTabs .nav-link {
        color: var(--text-secondary, #94a3b8);
        border: 1px solid transparent;
        border-bottom: none;
        padding: 8px 16px;
        font-size: 0.85rem;
      }
      #multiEntityTabs .nav-link.active {
        color: var(--primary, #f97316);
        background: var(--card, #1e293b);
        border-color: var(--border, #334155);
        border-bottom-color: transparent;
      }
      #multiEntityTabs .nav-link:hover:not(.active) {
        color: var(--text-primary, #f1f5f9);
        border-color: var(--border, #334155);
        border-bottom-color: transparent;
      }
      #reporting-level-toggle .btn.active {
        background: var(--primary, #f97316) !important;
        border-color: var(--primary, #f97316) !important;
        color: #fff !important;
      }

      /* ── Responsive: Small phone (≤ 600px) ──────────────────────── */
      @media (max-width: 600px) {
        .main-content { padding: 12px; }
        .card-body { padding: 12px; }
        .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      }

      /* ── Responsive: Narrow phone (≤ 480px) ─────────────────────── */
      @media (max-width: 480px) {
        .stats-grid, .stat-cards { grid-template-columns: 1fr !important; gap: 8px; }
        .card { margin-bottom: 8px; }
      }