.dark-theme,
body.dark-theme {
  background: $dark-bg;
  color: $dark-heading !important;

  .text-muted {
    color: $dark-heading !important;
  }

  // Core chrome + cards
  .sidebar-left,
  .sidebar-left-secondary,
  .main-header,
  .card {
    background: $dark-bg;
    color: $dark-heading !important;
  }

  // Ensure card headers/footers/body also switch to dark palette
  .card-header,
  .card-footer,
  .card-body {
    background-color: $dark-forground !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;
  }

  .border-bottom {
    border-bottom: 1px solid $dark-forground !important;
  }

  .main-content-wrap {
    background-color: $dark-forground;
    color: $dark-heading !important;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .card-title,
  .text-title {
    color: $dark-heading;
  }
  .card-title {
    color: $dark-heading !important;
  }
  a {
    // background: $dark-bg;
    color: $dark-heading !important;
  }
  input,
  textarea {
    background: $dark-forground !important;
    border-color: $dark-bg;
    color: $dark-heading !important;
  }

  .app-footer {
    background: $dark-bg;

    .footer-bottom {
      .logo {
      }
    }
  }

  //   sidebar

  .navigation-left {
    .nav-item {
      color: $dark-heading !important;

      border-bottom: 1px solid $dark-forground !important;

      .nav-item-hold {
        color: $dark-heading !important;

        a {
          color: $dark-heading !important;
        }
      }
    }
  }

  .sidebar-left-secondary {
    .childNav {
      li.nav-item {
        display: block;
        a {
          color: $dark-heading;

          &:hover {
            background: $dark-forground;
          }
          &.open {
            color: $primary;
          }
          &.router-link-active {
            color: $primary;
            .nav-icon {
              color: $primary;
            }
          }

          .nav-icon {
            color: $dark-heading;
          }
          .item-name {
          }
          .dd-arrow {
          }
        }
      }
    }
  }

  //   search

  .search-ui {
    position: fixed;
    background: $dark-forground;

    input.search-input {
      background: $dark-forground;
      &::placeholder {
        color: $dark-heading;
      }
    }
  }
  //   header search
  .search-bar {
    background: $dark-bg !important;
    border: 1px solid $dark-forground !important;

    input {
      color: $dark-heading !important;
      background: $dark-bg !important;
    }
    .search-icon {
    }
  }
  //   utilites
  .border-top {
    border-top: 1px solid $dark-bg !important;
  }
  // tab
  .tab-border {
    border: 1px dashed $dark-forground !important;
  }

  //   table
  table.vgt-table {
    background: $dark-bg !important;
    
    thead {
      background: $dark-forground !important;
      
      tr th {
        background: $dark-forground !important;
        color: $dark-heading !important;
        border-bottom-color: $dark-bg !important;
        border-right: none !important;
        
        &:hover {
          background: $dark-bg !important;
        }
        
        &.sortable {
          color: $dark-heading !important;
          
          &:hover {
            color: $primary !important;
          }
          
          button {
            color: $dark-heading !important;
          }
        }
      }
    }
    
    tbody {
      tr {
        background: $dark-bg !important;
        color: $dark-heading !important;
        
        &:hover {
          background: $dark-forground !important;
        }
        
        &:nth-child(even) {
          background: $dark-forground !important;
          
          &:hover {
            background: $dark-bg !important;
          }
        }
        
        td {
          color: $dark-heading !important;
          border-bottom-color: $dark-forground !important;
          border-right: none !important;
        }
      }
    }
  }
  
  .vgt-table thead th {
    color: $dark-heading !important;
  }
  
  table.tableOne.vgt-table thead tr th {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }
  //   list
  .list-group-item {
    background-color: $dark-bg;
    border: 1px solid $dark-forground;
  }
  //   pagination

  .page-link {
    color: $dark-heading;
    background-color: $dark-forground;
    border: 1px solid $dark-bg;
  }

  //   header dropdoen
  .dropdown-menu {
    color: $dark-heading;

    background-color: $dark-forground;

    border: 1px solid $dark-forground;
  }

  // table
  .table {
    td {
      border-top: 1px solid $dark-forground;
    }
    thead {
      th {
        border-bottom: 2px solid $dark-forground;
      }
    }
    .thead-light {
      th {
        color: $dark-heading;
        background-color: $dark-forground;
        border-color: $dark-forground;
      }
    }
  }

  .apexcharts-xaxis-label {
    fill: $dark-heading;
  }
  .apexcharts-yaxis-label {
    fill: $dark-heading;
  }

  .apexcharts-tooltip.light {
    border: 1px solid $dark-bg;
    background: $dark-forground;
  }

  .apexcharts-tooltip.light .apexcharts-tooltip-title {
    background: $dark-bg;
    border-bottom: 1px solid $dark-bg;
  }

  .apexcharts-legend-text {
    color: $dark-heading !important;
  }

  // input group
  .input-group-text {
    color: $dark-heading;
    background-color: $dark-forground;
    border: 1px solid $dark-forground;
  }

  .custom-select {
    color: $dark-heading;
    background-color: $dark-forground;
    border: 1px solid $dark-forground;
  }

  // v-select (vue-select component)
  .v-select {
    background: $dark-forground !important;
    
    .vs__dropdown-toggle {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .vs__search,
    .vs__search:focus {
      color: $dark-heading !important;
      background: transparent !important;
    }
    
    .vs__selected {
      color: $dark-heading !important;
    }
    
    .vs__actions {
      .vs__clear,
      .vs__open-indicator {
        fill: $dark-heading !important;
      }
    }
    
    .vs__dropdown-menu {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      
      .vs__dropdown-option {
        color: $dark-heading !important;
        
        &:hover,
        &.highlighted {
          background: $dark-forground !important;
          color: $dark-heading !important;
        }
        
        &--selected {
          background: $dark-forground !important;
          color: $primary !important;
        }
      }
    }
  }

  // section-row
  .section-row {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // stat-card and sales-card
  .stat-card {
    background: $dark-forground !important;
    color: $dark-heading !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    
    &:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    .stat-card-content {
      color: $dark-heading !important;
    }
    
    .stat-card-label {
      color: $dark-heading !important;
      opacity: 0.8;
    }
    
    .stat-card-value {
      color: $dark-heading !important;
    }
    
    .stat-card-link {
      color: $primary !important;
      
      &:hover {
        color: lighten($primary, 10%) !important;
      }
    }
    
    // Icon containers maintain their gradient backgrounds but ensure text is visible
    .stat-card-icon {
      // Icon backgrounds remain colorful (gradients), only text color needs adjustment
      // The gradients are already defined and work well in dark mode
    }
  }
  
  // Specific variants (sales-card, purchases-card, etc.)
  .sales-card,
  .purchases-card,
  .returns-card,
  .revenue-card,
  .sales-due-card,
  .purchase-due-card,
  .invoices-card,
  .profit-card {
    background: $dark-forground !important;
    
    .stat-card-content {
      color: $dark-heading !important;
    }
    
    .stat-card-label {
      color: $dark-heading !important;
      opacity: 0.8;
    }
    
    .stat-card-value {
      color: $dark-heading !important;
    }
    
    .stat-card-link {
      color: $primary !important;
      
      &:hover {
        color: lighten($primary, 10%) !important;
      }
    }
  }

  // chart-card
  .chart-card {
    background: $dark-forground !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    
    &:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    .chart-card-header {
      background: $dark-forground !important;
      border-bottom-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .chart-card-title {
        color: $dark-heading !important;
      }
      
      .chart-card-header-filter {
        .form-control.reportrange-text {
          color: $dark-heading !important;
          background: transparent !important;
        }
      }
      
      .btn {
        color: $dark-heading !important;
        background: $dark-bg !important;
        border-color: $dark-forground !important;
        
        &:hover {
          background: $dark-forground !important;
          border-color: $primary !important;
          color: $primary !important;
        }
      }
    }
    
    .chart-card-body {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
    
    .chart-card-legend {
      .legend-item {
        color: $dark-heading !important;
        opacity: 0.9;
      }
    }
  }

  // table-card
  .table-card {
    background: $dark-forground !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    
    &:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    .table-card-header {
      background: $dark-forground !important;
      border-bottom-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .table-card-title {
        color: $dark-heading !important;
      }
      
      .table-card-link {
        color: $primary !important;
        
        &:hover {
          color: lighten($primary, 10%) !important;
        }
        
        i {
          color: $primary !important;
        }
      }
    }
    
    .table-card-body {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
  }

  // bg-gray-300 utility class (commonly used for table headers)
  .bg-gray-300 {
    background-color: $dark-forground !important;
    color: $dark-heading !important;
    
    // When used in table headers, ensure text is readable
    th {
      color: $dark-heading !important;
    }
  }

  // autocomplete-result-list (autocomplete dropdown)
  .autocomplete-result-list {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: $dark-heading !important;
    
    .autocomplete-result {
      color: $dark-heading !important;
      
      &:hover {
        background-color: $dark-bg !important;
        color: $primary !important;
      }
    }
  }

  // modal-content and related modal components
  .modal-content {
    background-color: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    
    .modal-header {
      background-color: $dark-forground !important;
      border-bottom-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .modal-title {
        color: $dark-heading !important;
      }
      
      .close {
        color: $dark-heading !important;
        opacity: 0.8;
        
        &:hover,
        &:focus {
          color: $dark-heading !important;
          opacity: 1;
        }
      }
    }
    
    .modal-body {
      background-color: $dark-forground !important;
      color: $dark-heading !important;
    }
    
    .modal-footer {
      background-color: $dark-forground !important;
      border-top-color: $dark-bg !important;
      color: $dark-heading !important;
    }
  }
  
  // modal backdrop
  .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
    
    &.show {
      opacity: 0.7 !important;
    }
  }

  .header-icon:hover {
    background: $dark-forground !important;
  }

  // calender
  .calendar-parent {
    background-color: $dark-bg;
  }
  .cv-day,
  .cv-event,
  .cv-header-day,
  .cv-header-days,
  .cv-week,
  .cv-weeks {
    border-style: solid;
    border-color: $dark-forground;
  }
  .theme-default {
    .cv-day.outsideOfMonth,
    .cv-day.past {
      background-color: $dark-bg;
    }
    .cv-day.today {
      background-color: $dark-forground;
    }
    .cv-header,
    .cv-header-day {
      background-color: $dark-forground;
    }
  }
  .cv-header,
  .cv-header button {
    border-style: solid;
    border-color: $dark-bg;
    background: $dark-forground;
  }

  // vg-table (enhanced)
  .vgt-global-search.vgt-clearfix {
    background: $dark-bg !important;
    
    input.vgt-input {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &::placeholder {
        color: $dark-heading !important;
        opacity: 0.85;
      }
    }
  }
  
  table.tableOne tbody tr th.line-numbers {
    background: $dark-bg !important;
    color: $dark-heading !important;
    border-color: $dark-forground !important;
  }

  div.vgt-wrap__footer.vgt-clearfix {
    background: $dark-bg !important;
    border-top-color: $dark-forground !important;
    color: $dark-heading !important;
    
    .footer__row-count__label,
    .footer__row-count__select,
    .footer__navigation__page-btn,
    .footer__navigation__page-info {
      color: $dark-heading !important;
    }
    
    .footer__row-count__select {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .footer__navigation__page-btn {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:hover:not(:disabled) {
        background: $dark-bg !important;
        color: $primary !important;
      }
      
      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  table.vgt-table td {
    border-bottom: 1px solid $dark-forground !important;
    color: $dark-heading !important;
  }
  
  table.tableOne tbody tr th.vgt-checkbox-col {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
  }

  th.line-numbers {
    border-bottom: 1px solid $dark-forground !important;
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  th.vgt-checkbox-col {
    border-bottom: 1px solid $dark-forground !important;
    background: $dark-forground !important;
  }
  
  .ul-widget__item {
    border-bottom: 0.07rem dashed $dark-forground;
  }

  .order-table.vgt-table {
    tbody tr:hover {
      background: $dark-forground !important;
      border-radius: 10px;
    }
  }
  
  // vgt-wrap and inner wrap
  .vgt-wrap {
    background: $dark-bg !important;
    
    .vgt-inner-wrap {
      background: $dark-bg !important;
    }
  }
  
  // vgt-table bordered variant
  table.vgt-table.bordered {
    border-color: $dark-forground !important;
    
    th,
    td {
      border-color: $dark-forground !important;
    }
  }

  .page-item.disabled .page-link {
    background-color: $dark-bg;
    border-color: $dark-bg;
  }
  ul.gull-pagination li .page-link {
    border-color: $dark-bg !important;
    &:hover {
      background: $dark-bg;
    }
  }

  .layout-sidebar-compact {
    .sidebar-left {
      background: $dark-forground;
      .navigation-left {
      }
    }

    .sidebar-left-secondary {
      .childNav {
        li.nav-item {
          a {
            &.open {
              color: $primary;
              background: $dark-forground;
              .nav-icon {
                color: $primary;
              }
            }
            .nav-icon {
              color: $dark-heading;
            }
          }
        }
      }
    }
  }

  // chat
  .chat-sidebar-container {
    height: calc(100vh - 140px);
    min-height: unset;
    .chat-topbar {
      height: 52px;
    }
    .chat-content-wrap {
      .chat-content {
        .message {
          background: $dark-forground;

          &:before {
            border-color: transparent transparent $dark-forground transparent;
          }
        }
      }
    }

    .chat-sidebar-wrap {
      .contacts-scrollable {
        .contact {
          position: relative;
          cursor: pointer;
          transition: 0.15s all ease-in;
          &:hover {
            background: $dark-forground;
          }
          &:before {
            background: $dark-bg;
            border-radius: 50%;
          }
          &.online {
            &:before {
              background: $success;
            }
          }
        }
      }
    }
  }
  // Vertical sidebar Layout

  .layout-sidebar-vertical {
    .sidebar-panel {
      box-shadow: 0 1px 15px $dark-forground, 0 1px 6px $dark-forground;
      background: $dark-bg;
    }
    .main-content-wrap {
      .main-header {
        background: $dark-bg !important;
      }
    }
  }

  // vertical sidebar layout two 
  .layout-sidebar-vertical-two {
    .sidebar-panel {
      box-shadow: 0 1px 15px $dark-forground, 0 1px 6px $dark-forground;
      background: $dark-bg;
    }
    .main-content-wrap {
      .main-header {
        background: $dark-bg !important;
      }
    }
  }
  .layout-horizontal-bar {
    .header-topnav {
      background: $dark-bg;
      box-shadow: 0 1px 15px transparent, 0 1px 6px transparent;
      .topnav a {
        color: $dark-heading !important;
      }
      .topnav ul ul {
        background: $dark-bg;
        color: $dark-heading;
      }
      .topnav ul li ul li:hover {
        background: $dark-forground;
      }
    }
  }
  .main-header {
    .show {
      .header-icon {
        background: $dark-forground;
      }
    }
    .notification-dropdown {
      color: $dark-heading;
      .dropdown-item {
        border-bottom: 1px solid $dark-bg;
        color: $dark-heading;
      }
      .notification-icon {
        background: $dark-bg !important;
      }
    }
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    color: $dark-heading;
    text-decoration: none;
    background-color: $dark-bg;
  }

  // subheader 
  .subheader {
    background-color: $dark-bg;
    .subheader-navbar{
        background-color: $dark-bg;
    }
   position: fixed;
   top: 80px;
   z-index:50;
   width: 100%;
   @media (max-width: 577px) {
       top: 70px;
   }
}

  // plugins vue-navigation-bar 
  .vnb {
    background-color: $dark-bg;
    .tippy-box{
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        background-color: $dark-bg !important;
    }
    &__menu-options {
      
      &__option {
        
        &__link {
          color: $dark-heading;
          .vnb__menu-options__option__arrow{
            fill: $dark-heading;
          }
          &:focus {
            outline: none;
            border: 1px solid none;
          }
          &:hover {
            color: $dark-heading;
            .vnb__menu-options__option__arrow{
              fill: $dark-heading;
            }
          }
          
          &__icon {
            svg {
              fill:$primary !important;
            }
          }
        }
   
       
   
        
   
        
      }
    }
   
    &__sub-menu-options {
      background-color: $dark-bg;
     
      &__option {
        &__link {
          border-left: 2px solid #8B5CF6;
          color: $dark-heading;
          &:focus {
            outline: none;
            border: 1px solid none;
          }
         
         
          &:hover {
            background-color:#8B5CF6 ;
            color: $dark-heading  !important;
            
          }
        }
      }
    }
   
   
   
  
  }
  
  .vnb__popup{
      height: 80vh !important;
      overflow-x:hidden !important;
      overflow-y: scroll !important;
      .vnb__popup__top__close-button{
        &:focus{
          border: 1px solid none;
          outline: none;
        }
        top: 20px;
        right: -33px;
        svg{
          // In dark mode the close icon should be light so it remains visible on dark backgrounds
          fill: $dark-heading !important;
        }
      }
  }

  // hero-bg (hero background gradient)
  .hero-bg {
    background: linear-gradient(135deg, $dark-forground 0%, $dark-bg 60%, $dark-forground 100%) !important;
    opacity: 0.9 !important;
  }

  // dropzone (file upload dropzone)
  .dropzone {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &:hover {
      background: $dark-bg !important;
      border-color: $primary !important;
      box-shadow: 0 1px 6px rgba(102, 126, 234, 0.2) !important;
    }
    
    &.is-dragover {
      border-color: $primary !important;
      background: $dark-bg !important;
    }
    
    &.has-file {
      border-color: $dark-bg !important;
    }
    
    .dz-icon {
      color: $primary !important;
    }
  }
  
  // file-pill (file display pill in dropzone)
  .file-pill {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }
  
  // hero-body and hero-icon
  .hero-body {
    color: $dark-heading !important;
  }
  
  .hero-icon {
    background: rgba(102, 126, 234, 0.15) !important;
    color: $primary !important;
  }

  // ============================================
  // System Settings Page Dark Mode Styles
  // ============================================
  
  // Settings Container
  .settings-container {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  // Left Sidebar - Vertical Tabs
  .settings-sidebar {
    background: $dark-forground !important;
    border-right-color: $dark-bg !important;
  }

  .settings-tabs-nav {
    background: $dark-forground !important;
  }

  // Settings Header (with gradient)
  .settings-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%) !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
    
    h5 {
      color: #ffffff !important;
    }
  }

  // Settings Navigation
  .settings-nav {
    background: $dark-forground !important;
  }

  .settings-nav-item {
    background: transparent !important;
    color: $dark-heading !important;
    border-left-color: transparent !important;
    
    i {
      color: $dark-heading !important;
    }
    
    &:hover {
      background: rgba(102, 126, 234, 0.15) !important;
      color: $primary !important;
      border-left-color: $primary !important;
      
      i {
        color: $primary !important;
      }
    }
    
    &.active {
      background: linear-gradient(90deg, rgba(102, 126, 234, 0.25) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
      color: $primary !important;
      border-left-color: $primary !important;
      
      i {
        color: $primary !important;
      }
      
      &::before {
        border-right-color: $dark-forground !important;
      }
    }
  }

  // Right Content Panel
  .settings-content {
    background: $dark-forground !important;
  }

  .settings-content-wrapper {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  .settings-content-header {
    border-bottom-color: $dark-bg !important;
    
    h4 {
      color: $dark-heading !important;
    }
    
    p {
      color: $dark-heading !important;
      opacity: 0.8;
    }
  }

  .settings-content-body {
    color: $dark-heading !important;
  }

  // Tab Content
  .tab-content {
    color: $dark-heading !important;
    
    .form-group {
      label {
        color: $dark-heading !important;
      }
    }
    
    .form-control,
    .vs__dropdown-toggle {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &::placeholder {
        color: rgba($dark-heading, 0.5) !important;
      }
      
      &:focus {
        background: $dark-bg !important;
        border-color: $primary !important;
        color: $dark-heading !important;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
      }
    }
    
    .vs__selected {
      color: $dark-heading !important;
    }
    
    .vs__search {
      color: $dark-heading !important;
    }
    
    .vs__dropdown-menu {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
    }
    
    .vs__dropdown-option {
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        color: $primary !important;
      }
      
      &--highlight {
        background: rgba(102, 126, 234, 0.25) !important;
        color: $primary !important;
      }
    }
  }

  // System Actions Card
  .system-actions-card {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    
    h5 {
      color: $dark-heading !important;
    }
  }

  // Settings Footer
  .settings-footer {
    border-top-color: $dark-bg !important;
  }

  // Mobile Tab Selector
  .mobile-tab-selector {
    background: $dark-forground !important;
    border-bottom-color: $dark-bg !important;
  }

  .mobile-tab-select {
    background: $dark-bg !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &:focus {
      background: $dark-bg !important;
      border-color: $primary !important;
      color: $dark-heading !important;
      box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
    }
    
    option {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
  }

  // Custom Scrollbar for Settings Nav
  .settings-nav {
    &::-webkit-scrollbar-track {
      background: $dark-bg !important;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $primary !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.8) !important;
      }
    }
  }

  // Backup Table Wrapper
  .backup-table-wrapper {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
  }

  // POS Receipt Demo
  .pos-receipt-demo {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Bootstrap Vue Form Elements in Settings
  .settings-content {
    .form-group {
      label {
        color: $dark-heading !important;
      }
    }
    
    .form-control,
    .custom-select,
    select {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:focus {
        background: $dark-bg !important;
        border-color: $primary !important;
        color: $dark-heading !important;
      }
    }
    
    .form-text,
    .text-muted {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .invalid-feedback {
      color: #f56565 !important;
    }
    
    .valid-feedback {
      color: #48bb78 !important;
    }
  }

  // Bootstrap Vue Alert in Settings
  .settings-content {
    .alert {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &.alert-danger {
        background: rgba(245, 101, 101, 0.1) !important;
        border-color: rgba(245, 101, 101, 0.3) !important;
        color: #f56565 !important;
      }
      
      &.alert-success {
        background: rgba(72, 187, 120, 0.1) !important;
        border-color: rgba(72, 187, 120, 0.3) !important;
        color: #48bb78 !important;
      }
      
      &.alert-warning {
        background: rgba(237, 137, 54, 0.1) !important;
        border-color: rgba(237, 137, 54, 0.3) !important;
        color: #ed8936 !important;
      }
      
      &.alert-info {
        background: rgba(66, 153, 225, 0.1) !important;
        border-color: rgba(66, 153, 225, 0.3) !important;
        color: #4299e1 !important;
      }
      
      code {
        background: $dark-bg !important;
        color: $primary !important;
        padding: 0.125rem 0.25rem;
        border-radius: 0.25rem;
      }
      
      pre {
        background: $dark-bg !important;
        color: $dark-heading !important;
        border-color: $dark-bg !important;
      }
    }
  }

  // Bootstrap Vue Tabs in Settings
  .settings-content {
    .nav-tabs {
      border-bottom-color: $dark-bg !important;
      
      .nav-link {
        color: $dark-heading !important;
        border-color: transparent !important;
        
        &:hover {
          border-color: $dark-bg $dark-bg transparent !important;
          color: $primary !important;
        }
        
        &.active {
          background: $dark-forground !important;
          border-color: $dark-bg $dark-bg transparent !important;
          color: $primary !important;
        }
      }
    }
    
    .tab-content {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
  }

  // Bootstrap Vue Card in Settings
  .settings-content {
    .card {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .card-header {
        background: $dark-bg !important;
        border-bottom-color: $dark-bg !important;
        color: $dark-heading !important;
      }
      
      .card-body {
        background: $dark-forground !important;
        color: $dark-heading !important;
      }
      
      .card-footer {
        background: $dark-bg !important;
        border-top-color: $dark-bg !important;
        color: $dark-heading !important;
      }
    }
  }

  // Button Groups in Settings
  .settings-content {
    .btn-group-toggle {
      .btn {
        background: $dark-bg !important;
        border-color: $dark-bg !important;
        color: $dark-heading !important;
        
        &:hover {
          background: rgba(102, 126, 234, 0.15) !important;
          border-color: $primary !important;
          color: $primary !important;
        }
        
        &.active {
          background: $primary !important;
          border-color: $primary !important;
          color: #ffffff !important;
        }
      }
    }
  }

  // Custom Switch in Settings
  .settings-content {
    .custom-switch {
      .custom-control-label {
        color: $dark-heading !important;
        
        &::before {
          background: $dark-bg !important;
          border-color: $dark-bg !important;
        }
        
        &::after {
          background: $dark-heading !important;
        }
      }
      
      .custom-control-input:checked ~ .custom-control-label {
        &::before {
          background: $primary !important;
          border-color: $primary !important;
        }
      }
    }
  }

  // Breadcrumb in Settings
  .main-content {
    .breadcrumb {
      background: transparent !important;
      
      .breadcrumb-item {
        color: $dark-heading !important;
        
        a {
          color: $primary !important;
          
          &:hover {
            color: rgba(102, 126, 234, 0.8) !important;
          }
        }
        
        &.active {
          color: rgba($dark-heading, 0.7) !important;
        }
      }
    }
  }

  // ============================================
  // Store Settings Page Dark Mode Styles
  // ============================================
  
  // Settings Card
  .settings-card {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    
    .card-header {
      background: $dark-bg !important;
      border-bottom-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .h6 {
        color: $dark-heading !important;
      }
    }
    
    .card-body {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
  }

  // Social Links Section Row
  .section-row {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;
  }

  .pill-type {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Empty State
  .empty-state {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: rgba($dark-heading, 0.7) !important;
    
    .title {
      color: $dark-heading !important;
    }
  }

  // Simple Row (Homepage Blocks List)
  .simple-row {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    .text-dark {
      color: $dark-heading !important;
    }
    
    .muted-row {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .a-muted {
      color: rgba($dark-heading, 0.7) !important;
      
      &:hover {
        color: $primary !important;
      }
    }
  }

  // Sticky Save Bar
  .savebar {
    background: linear-gradient(180deg, rgba($dark-forground, 0) 0%, rgba($dark-forground, 0.95) 20%) !important;
    border-top-color: $dark-bg !important;
    color: $dark-heading !important;
    
    .text-muted {
      color: rgba($dark-heading, 0.7) !important;
    }
  }

  // Store Settings Form Elements
  .wrapper {
    .form-group {
      label {
        color: $dark-heading !important;
      }
    }
    
    .form-control,
    .form-control:focus {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &::placeholder {
        color: rgba($dark-heading, 0.5) !important;
      }
    }
    
    .form-control[type="color"] {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
    }
    
    .form-control:focus {
      border-color: $primary !important;
      box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
    }
    
    textarea.form-control {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .custom-file-label {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &::after {
        background: $dark-forground !important;
        border-color: $dark-bg !important;
        color: $dark-heading !important;
      }
    }
    
    .text-muted {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .text-warning {
      color: #ed8936 !important;
    }
    
    // Custom Switch Checkbox
    .custom-switch {
      .custom-control-label {
        color: $dark-heading !important;
        
        &::before {
          background: $dark-bg !important;
          border-color: $dark-bg !important;
        }
        
        &::after {
          background: $dark-heading !important;
        }
      }
      
      .custom-control-input:checked ~ .custom-control-label {
        &::before {
          background: $primary !important;
          border-color: $primary !important;
        }
      }
    }
    
    // Bootstrap Vue Checkbox Switch
    .custom-control-input:checked ~ .custom-control-label::before {
      background: $primary !important;
      border-color: $primary !important;
    }
  }

  // Images in Store Settings
  .settings-card {
    img {
      border: 1px solid $dark-bg !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    }
  }

  // Badge adjustments for dark mode
  .settings-card {
    .badge {
      &.badge-light {
        background: $dark-bg !important;
        color: $dark-heading !important;
      }
    }
  }

  // Button Groups in Store Settings
  .simple-row {
    .btn-group {
      .btn {
        background: $dark-bg !important;
        border-color: $dark-bg !important;
        color: $dark-heading !important;
        
        &:hover:not(:disabled) {
          background: rgba(102, 126, 234, 0.15) !important;
          border-color: $primary !important;
          color: $primary !important;
        }
        
        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }
    }
  }

  // Transition animations (fade)
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.15s ease;
  }
  
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(-4px);
  }

  // ============================================
  // Store Pages Dark Mode Styles
  // ============================================
  
  // Banner Form - Position Info Box
  .bg-light {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;
    
    .small {
      color: $dark-heading !important;
    }
  }

  // Collections - Card Soft
  .card-soft {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
  }

  // Finder (Product Search)
  .finder {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;
  }

  // Result Row (Product Search Results)
  .result-row {
    border-bottom-color: $dark-forground !important;
    color: $dark-heading !important;
    
    .thumb {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
    }
  }

  // Empty State (Collections Create/Edit)
  .empty-state {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: rgba($dark-heading, 0.7) !important;
    
    .title {
      color: $dark-heading !important;
    }
    
    .subtitle {
      color: rgba($dark-heading, 0.6) !important;
    }
  }

  // Table Thumbnails
  .table .thumb {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
  }

  // Badge Outline Secondary (Collections Index)
  .badge-outline-secondary {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Messages - Message Body
  .msg-body {
    color: $dark-heading !important;
    background: $dark-bg !important;
    padding: 0.75rem;
    border-radius: 0.375rem;
  }

  // Orders - Error Alert
  .wrapper {
    .alert {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &.alert-danger {
        background: rgba(245, 101, 101, 0.1) !important;
        border-color: rgba(245, 101, 101, 0.3) !important;
        color: #f56565 !important;
      }
      
      ul {
        color: #f56565 !important;
      }
    }
  }

  // Order Show - Summary List
  .list-unstyled {
    li {
      color: $dark-heading !important;
      border-top-color: $dark-bg !important;
      
      strong {
        color: $dark-heading !important;
      }
    }
  }

  // Input Group Text (Collections Create/Edit slug prefix)
  .input-group-text {
    background: $dark-bg !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Date Picker in Orders
  .b-form-datepicker {
    .form-control {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
  }

  // Helper Text (Collections Create/Edit)
  .helper {
    .text-muted {
      color: rgba($dark-heading, 0.7) !important;
    }
  }

  // Sticky Side (Collections Create/Edit)
  .side {
    .card {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      
      .card-body {
        background: $dark-forground !important;
        color: $dark-heading !important;
      }
    }
  }

  // Collections Index - Table Headers
  .table {
    thead.thead-light {
      background: $dark-bg !important;
      
      th {
        color: $dark-heading !important;
        border-color: $dark-forground !important;
      }
    }
    
    tbody {
      tr {
        background: $dark-forground !important;
        color: $dark-heading !important;
        
        &:hover {
          background: $dark-bg !important;
        }
        
        td {
          border-color: $dark-bg !important;
          color: $dark-heading !important;
          
          code {
            background: $dark-bg !important;
            color: $primary !important;
            border-color: $dark-forground !important;
          }
        }
      }
    }
  }

  // Collections Index - Badge Light
  .badge-light {
    background: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Banner Form - Image Thumbnail
  .img-thumbnail {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
  }

  // Store Pages - Wrapper Card
  .wrapper {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Store Pages - All Cards
  .main-content {
    .card {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .card-header {
        background: $dark-bg !important;
        border-bottom-color: $dark-bg !important;
        color: $dark-heading !important;
      }
      
      .card-body {
        background: $dark-forground !important;
        color: $dark-heading !important;
      }
    }
  }

  // Store Pages - Form Controls
  .main-content {
    .form-control,
    .custom-select,
    select {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:focus {
        background: $dark-bg !important;
        border-color: $primary !important;
        color: $dark-heading !important;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
      }
      
      &::placeholder {
        color: rgba($dark-heading, 0.5) !important;
      }
    }
    
    .form-group {
      label {
        color: $dark-heading !important;
      }
    }
    
    textarea.form-control {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
  }

  // Store Pages - Input Groups
  .input-group {
    .form-control {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .input-group-prepend,
    .input-group-append {
      .input-group-text {
        background: $dark-bg !important;
        border-color: $dark-bg !important;
        color: $dark-heading !important;
      }
      
      .btn {
        background: $dark-bg !important;
        border-color: $dark-bg !important;
        color: $dark-heading !important;
        
        &:hover:not(:disabled) {
          background: rgba(102, 126, 234, 0.15) !important;
          border-color: $primary !important;
          color: $primary !important;
        }
      }
    }
  }

  // Store Pages - Custom Checkbox Switch
  .custom-switch {
    .custom-control-label {
      color: $dark-heading !important;
      
      &::before {
        background: $dark-bg !important;
        border-color: $dark-bg !important;
      }
      
      &::after {
        background: $dark-heading !important;
      }
    }
    
    .custom-control-input:checked ~ .custom-control-label {
      &::before {
        background: $primary !important;
        border-color: $primary !important;
      }
    }
  }

  // Store Pages - Button Groups
  .btn-group {
    .btn {
      background: $dark-bg !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:hover:not(:disabled) {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: $primary !important;
        color: $primary !important;
      }
      
      &.btn-outline-primary {
        border-color: $primary !important;
        color: $primary !important;
        
        &:hover:not(:disabled) {
          background: $primary !important;
          color: #ffffff !important;
        }
      }
      
      &.btn-outline-danger {
        border-color: #f56565 !important;
        color: #f56565 !important;
        
        &:hover:not(:disabled) {
          background: #f56565 !important;
          color: #ffffff !important;
        }
      }
      
      &.btn-outline-secondary {
        border-color: rgba($dark-heading, 0.3) !important;
        color: $dark-heading !important;
        
        &:hover:not(:disabled) {
          background: rgba(102, 126, 234, 0.15) !important;
          border-color: $primary !important;
          color: $primary !important;
        }
      }
    }
  }

  // Store Pages - Modal (Messages)
  .modal-content {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    .modal-header {
      background: $dark-bg !important;
      border-bottom-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .modal-body {
      background: $dark-forground !important;
      color: $dark-heading !important;
    }
    
    .modal-footer {
      background: $dark-bg !important;
      border-top-color: $dark-bg !important;
    }
  }

  // Store Pages - Text Utilities
  .text-muted {
    color: rgba($dark-heading, 0.7) !important;
  }
  
  .text-dark {
    color: $dark-heading !important;
  }
  
  .fw-600 {
    color: $dark-heading !important;
  }

  // Store Pages - Border Utilities
  .border {
    border-color: $dark-bg !important;
  }
  
  .border-rounded {
    border-color: $dark-bg !important;
  }

  // Store Pages - Results List Scrollbar
  .results-list {
    &::-webkit-scrollbar-track {
      background: $dark-bg !important;
    }
    
    &::-webkit-scrollbar-thumb {
      background: $primary !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.8) !important;
      }
    }
  }

  // ============================================
  // POS (Point of Sale) Page Dark Mode Styles
  // ============================================
  
  // Main POS Container
  .pos-codecanyon {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  // POS Header (Desktop/Tablet)
  .pos-header {
    background: $dark-forground !important;
    border-bottom-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // POS Header Mobile
  .pos-header-mobile {
    background: $dark-forground !important;
    border-bottom-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Header Left - Brand
  .header-left {
    .brand {
      .brand-icon {
        background: $dark-bg !important;
        color: $dark-heading !important;
        border-color: $dark-bg !important;
      }
    }
  }

  // Search Wrapper
  .search-wrapper {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    
    .search-icon {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .search-input {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &::placeholder {
        color: rgba($dark-heading, 0.5) !important;
      }
      
      &:focus {
        border-color: $primary !important;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
      }
    }
    
    .action-btn-icon {
      background: transparent !important;
      color: $dark-heading !important;
      border-color: transparent !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        color: $primary !important;
      }
    }
  }

  // POS Autocomplete Results
  .pos-autocomplete-results {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  }

  .pos-autocomplete-item {
    background: $dark-forground !important;
    color: $dark-heading !important;
    border-bottom-color: $dark-bg !important;
    
    &:hover {
      background: rgba(102, 126, 234, 0.15) !important;
      color: $primary !important;
    }
  }

  // Header Right - Action Buttons
  .header-right {
    .action-btn-icon {
      background: transparent !important;
      color: $dark-heading !important;
      border-color: transparent !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        color: $primary !important;
      }
      
      &.is-offline {
        color: #f56565 !important;
      }
    }
    
    .offline-badge {
      background: #f56565 !important;
      color: #ffffff !important;
    }
    
    .user-profile {
      background: $dark-bg !important;
      color: $dark-heading !important;
      border-color: $dark-forground !important;
    }
  }

  // Register Status
  .register-status {
    .register-toggle-icon,
    .register-toggle-btn {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: $primary !important;
        color: $primary !important;
      }
    }
  }

  // Warehouse & Customer Select (v-select)
  .warehouse-select,
  .customer-select-header {
    .vs__dropdown-toggle {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
    }
    
    .vs__selected {
      color: $dark-heading !important;
    }
    
    .vs__search {
      color: $dark-heading !important;
    }
    
    .vs__dropdown-menu {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
    }
    
    .vs__dropdown-option {
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        color: $primary !important;
      }
      
      &--highlight {
        background: rgba(102, 126, 234, 0.25) !important;
        color: $primary !important;
      }
    }
  }

  // Dropdown Menus
  .dropdown-menu-left {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    
    .dropdown-header {
      background: $dark-bg !important;
      color: $dark-heading !important;
      border-bottom-color: $dark-bg !important;
    }
    
    .dropdown-item {
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        color: $primary !important;
      }
    }
  }

  // Language Menu
  .lang-menu {
    .lang-item {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: $primary !important;
        color: $primary !important;
      }
      
      .title-lang {
        color: $dark-heading !important;
      }
    }
  }

  // POS Container
  .pos-container {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  // Products Container & Grid
  .products-container {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  .products-grid {
    background: $dark-forground !important;
  }

  // Product Card
  .product-card {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &:hover {
      border-color: $primary !important;
      box-shadow: 0 12px 32px rgba(102, 126, 234, 0.2) !important;
    }
  }

  .product-image-wrapper {
    background: $dark-bg !important;
    border-bottom-color: $dark-forground !important;
    
    .product-image-placeholder {
      color: rgba(102, 126, 234, 0.3) !important;
    }
  }

  .product-details {
    background: $dark-forground !important;
    color: $dark-heading !important;
    
    .product-name {
      color: $dark-heading !important;
    }
    
    .product-brand {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .product-stock {
      color: rgba($dark-heading, 0.6) !important;
    }
  }

  .product-footer {
    background: $dark-bg !important;
    border-top-color: $dark-forground !important;
    
    .product-price {
      color: $dark-heading !important;
    }
  }

  // Cart Section
  .cart-section {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  .cart-items-grid {
    background: $dark-forground !important;
  }

  .cart-item-card {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &:hover {
      border-color: $primary !important;
    }
  }

  // Summary Section
  .summary-section {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  .card-summary {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  .charges-section {
    background: $dark-forground !important;
    border-bottom-color: $dark-bg !important;
  }

  .charge-row {
    border-bottom-color: $dark-bg !important;
    
    label {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .flat-input {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &:focus {
        border-color: $primary !important;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
      }
    }
    
    .input-suffix {
      color: rgba($dark-heading, 0.6) !important;
    }
    
    .discount-type-toggle {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &:hover {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: $primary !important;
        color: $primary !important;
      }
    }
  }

  .summary-totals {
    background: $dark-bg !important;
    border-top-color: $dark-forground !important;
    
    .total-label {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .total-value {
      color: $dark-heading !important;
    }
  }

  // POS Footer Bar
  .pos-footer-bar {
    background: $dark-forground !important;
    border-top-color: $dark-bg !important;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .footer-status-indicator {
    color: $dark-heading !important;
    
    &.is-offline {
      color: #f56565 !important;
    }
    
    .status-text {
      color: $dark-heading !important;
    }
  }

  .footer-main-group {
    .action-btn {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &:hover:not(:disabled) {
        background: rgba(102, 126, 234, 0.15) !important;
        border-color: $primary !important;
        color: $primary !important;
      }
      
      &.action-btn-primary {
        background: linear-gradient(135deg, $primary 0%, rgba(118, 75, 162, 0.9) 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
        
        &:hover:not(:disabled) {
          box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4) !important;
        }
      }
      
      &.action-btn-secondary {
        background: $dark-bg !important;
        border-color: $dark-forground !important;
        color: $dark-heading !important;
        
        &:hover:not(:disabled) {
          background: rgba(102, 126, 234, 0.15) !important;
          border-color: $primary !important;
          color: $primary !important;
        }
      }
    }
  }

  .total-payable-section {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    
    .payable-label {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .payable-amount {
      color: $dark-heading !important;
    }
  }

  // POS Price Select
  .pos-price-select {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;
    
    &:focus {
      border-color: $primary !important;
      box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
    }
  }

  // Reset Filters Button
  .reset-filters-btn {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    svg {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    &:hover {
      border-color: $primary !important;
      background: rgba(102, 126, 234, 0.15) !important;
      
      svg {
        color: $primary !important;
      }
    }
  }

  // Points Convert UI
  .points-group {
    .convert-points-btn {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      &:hover {
        border-color: $primary !important;
        background: rgba(102, 126, 234, 0.15) !important;
      }
      
      &.converted {
        border-color: rgba($dark-heading, 0.3) !important;
        color: rgba($dark-heading, 0.6) !important;
      }
    }
  }

  .points-convert-row {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &.converted {
      border-color: rgba($dark-heading, 0.3) !important;
      background: $dark-bg !important;
    }
  }

  // Today Sales Modal
  .today-sales-grid {
    .ts-card {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .ts-label {
      color: rgba($dark-heading, 0.7) !important;
    }
    
    .ts-value {
      color: $dark-heading !important;
    }
  }

  // Card Loading Overlay
  .card-loading-overlay {
    background: rgba($dark-forground, 0.8) !important;
    backdrop-filter: saturate(150%) blur(2px);
  }

  // POS Gate Loader
  .pos-gate-loader {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  // New Customer Form
  .new-customer-form {
    .form-control {
      background: $dark-bg !important;
      border-color: $dark-forground !important;
      color: $dark-heading !important;
      
      &:focus {
        border-color: $primary !important;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
      }
    }
    
    .loyalty-eligible-row {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
    }
    
    .loyalty-title {
      color: $dark-heading !important;
    }
    
    .loyalty-help {
      color: rgba($dark-heading, 0.7) !important;
    }
  }

  // Mobile Rows
  .mobile-row {
    background: $dark-forground !important;
    border-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // POS Modals (Bootstrap Vue)
  .pos-codecanyon {
    .modal-content {
      background: $dark-forground !important;
      border-color: $dark-bg !important;
      color: $dark-heading !important;
      
      .modal-header {
        background: $dark-bg !important;
        border-bottom-color: $dark-bg !important;
        color: $dark-heading !important;
      }
      
      .modal-body {
        background: $dark-forground !important;
        color: $dark-heading !important;
        
        .form-control,
        .form-select {
          background: $dark-bg !important;
          border-color: $dark-forground !important;
          color: $dark-heading !important;
          
          &:focus {
            border-color: $primary !important;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25) !important;
          }
        }
        
        label {
          color: $dark-heading !important;
        }
      }
      
      .modal-footer {
        background: $dark-bg !important;
        border-top-color: $dark-bg !important;
      }
    }
  }

  // Discount Badge
  .discount-badge {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%) !important;
    color: #ffffff !important;
  }

  // Item Amount (Gradient Text)
  .item-amount {
    background: linear-gradient(135deg, $primary 0%, rgba(118, 75, 162, 0.9) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }

  // Footer Divider
  .footer-divider {
    border-color: $dark-bg !important;
  }

  // ============================================
  // Dashboard Info Cards (Sales by Payment & Stock Value) Dark Mode Styles
  // ============================================
  
  // Info Card Container
  .info-card {
    background: $dark-forground !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    color: $dark-heading !important;
    
    &:hover {
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
    }
  }

  // Info Card Header
  .info-card-header {
    background: $dark-forground !important;
    border-bottom-color: $dark-bg !important;
    color: $dark-heading !important;
  }

  // Info Card Title
  .info-card-title {
    color: $dark-heading !important;
  }

  // Info Card Menu Icon
  .info-card-menu {
    color: rgba($dark-heading, 0.7) !important;
    
    &:hover {
      color: $primary !important;
    }
  }

  // Info Card Body
  .info-card-body {
    background: $dark-forground !important;
    color: $dark-heading !important;
  }

  // Info Card Item
  .info-card-item {
    color: $dark-heading !important;
  }

  // Info Card Item Header
  .info-card-item-header {
    color: $dark-heading !important;
  }

  // Info Card Item Label
  .info-card-item-label {
    color: $dark-heading !important;
    opacity: 0.9;
  }

  // Info Card Item Value
  .info-card-item-value {
    color: $dark-heading !important;
  }

  // Info Card Percentage
  .info-card-percentage {
    color: rgba($dark-heading, 0.7) !important;
  }

  // Info Card Progress Bar Container
  .info-card-progress {
    background: $dark-bg !important;
  }

  // Info Card Progress Bars (maintain colors but ensure visibility)
  .info-card-progress-bar {
    &.progress-orange {
      background: #F59E0B !important;
    }
    
    &.progress-blue {
      background: #3B82F6 !important;
    }
    
    &.progress-green {
      background: #10B981 !important;
    }
    
    &.progress-grey {
      background: #6B7280 !important;
    }
  }

  // Info Card Dots (maintain colors)
  .info-card-dot {
    &.dot-orange {
      background: #F59E0B !important;
    }
    
    &.dot-blue {
      background: #3B82F6 !important;
    }
    
    &.dot-green {
      background: #10B981 !important;
    }
    
    &.dot-grey {
      background: #6B7280 !important;
    }
  }

  // Stock Value Item
  .stock-value-item {
    border-bottom-color: $dark-bg !important;
    color: $dark-heading !important;
    
    &:last-child {
      border-bottom: none !important;
    }
  }

  // Info Card Icon (Stock Value Icons)
  .info-card-icon {
    &.stock-icon-cost {
      background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%) !important;
      color: white !important;
    }
    
    &.stock-icon-retail {
      background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
      color: white !important;
    }
    
    &.stock-icon-wholesale {
      background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%) !important;
      color: white !important;
    }
  }

  // Stock Value Item Label
  .stock-value-item .info-card-item-label {
    color: $dark-heading !important;
    opacity: 0.9;
  }

  // Stock Value Item Value
  .stock-value-item .info-card-item-value {
    color: $dark-heading !important;
  }

  // Global daterangepicker positioning in dark mode
  .daterangepicker.opensright {
    z-index: 2055 !important;
    color: #111827 !important;
  }

  // Ensure stat summary icons remain readable in dark mode
  .stat-icon {
    color: #111827 !important;
  }

  // ============================================
  // Vue-good-table action buttons (View/Edit/Duplicate/Delete)
  // _vue-good-table.scss hard-codes background:#fff and a light border on
  // .action-btn.btn and the legacy :has() fallback, leaving white squares on
  // the dark table. Re-skin them so the colored outline reads against the
  // dark row, and keep the icon visible on hover (Bootstrap fills the bg
  // with the variant color, so the icon must flip to white).
  .action-cell .action-btn.btn,
  .vgt-table td a:not(.btn):has(> .text-20),
  .vgt-table td a:not(.btn):has(> .text-25),
  .vgt-table td button:not(.btn):has(> .text-20),
  .vgt-table td button:not(.btn):has(> .text-25) {
    background: $dark-bg !important;
    border-color: $dark-forground !important;
    color: $dark-heading !important;

    &:hover,
    &:focus {
      background: $dark-forground !important;
    }
  }

  .action-cell .action-btn.btn {
    &.btn-outline-info {
      border-color: $info !important;
      color: $info !important;
      &:hover,
      &:focus {
        background: $info !important;
        color: #fff !important;
        .text-info { color: #fff !important; }
      }
    }
    &.btn-outline-success {
      border-color: $success !important;
      color: $success !important;
      &:hover,
      &:focus {
        background: $success !important;
        color: #fff !important;
        .text-success { color: #fff !important; }
      }
    }
    &.btn-outline-warning {
      border-color: $warning !important;
      color: $warning !important;
      &:hover,
      &:focus {
        background: $warning !important;
        color: #fff !important;
        .text-warning { color: #fff !important; }
      }
    }
    &.btn-outline-danger {
      border-color: $danger !important;
      color: $danger !important;
      &:hover,
      &:focus {
        background: $danger !important;
        color: #fff !important;
        .text-danger { color: #fff !important; }
      }
    }
  }

  // Outline + solid Bootstrap button variants. The global
  // `.dark-theme a { color: $dark-heading !important }` rule earlier in
  // this file hijacks every <router-link>- or <a>-rendered button and
  // collapses it to the muted heading color, which destroys the variant
  // tint (a `btn-outline-info` anchor reads as plain dark-heading instead
  // of cyan, etc.). Restore the colors globally so any page using these
  // classes — vgt toolbars, hero "Download example" links, modal footers,
  // etc. — looks correct in dark mode.
  a.btn-outline-info,
  button.btn-outline-info,
  .btn-outline-info {
    background: transparent !important;
    border-color: $info !important;
    color: $info !important;
    &:hover,
    &:focus,
    &:not(:disabled):not(.disabled):active {
      background: $info !important;
      border-color: $info !important;
      color: #fff !important;
    }
  }
  a.btn-outline-success,
  button.btn-outline-success,
  .btn-outline-success {
    background: transparent !important;
    border-color: $success !important;
    color: $success !important;
    &:hover,
    &:focus,
    &:not(:disabled):not(.disabled):active {
      background: $success !important;
      border-color: $success !important;
      color: #fff !important;
    }
  }
  a.btn-outline-warning,
  button.btn-outline-warning,
  .btn-outline-warning {
    background: transparent !important;
    border-color: $warning !important;
    color: $warning !important;
    &:hover,
    &:focus,
    &:not(:disabled):not(.disabled):active {
      background: $warning !important;
      border-color: $warning !important;
      color: #fff !important;
    }
  }
  a.btn-outline-danger,
  button.btn-outline-danger,
  .btn-outline-danger {
    background: transparent !important;
    border-color: $danger !important;
    color: $danger !important;
    &:hover,
    &:focus,
    &:not(:disabled):not(.disabled):active {
      background: $danger !important;
      border-color: $danger !important;
      color: #fff !important;
    }
  }

  // Solid variants rendered as <a> get their text repainted dark by the
  // global `a {}` rule. Force white back so the contrast against the
  // saturated fill stays correct.
  a.btn-primary,
  a.btn-info,
  a.btn-success,
  a.btn-warning,
  a.btn-danger {
    color: #fff !important;
    &:hover,
    &:focus {
      color: #fff !important;
    }
  }

  // Global override for .btn-outline-secondary. Bootstrap's default
  // (#6c757d border + text on transparent) reads as gray-on-gray against
  // any dark background, so it's effectively invisible. Brighten the
  // border + text and give it a clearly visible filled hover state.
  // Applies everywhere the variant is used (Cancel buttons, back buttons,
  // toolbar actions, etc.) so we don't have to repeat per-page.
  .btn-outline-secondary,
  a.btn-outline-secondary,
  button.btn-outline-secondary {
    background: transparent !important;
    border-color: rgba(216, 216, 216, 0.35) !important;
    color: $dark-heading !important;

    &:hover,
    &:focus,
    &:not(:disabled):not(.disabled):active,
    &:not(:disabled):not(.disabled).active {
      background: rgba(216, 216, 216, 0.1) !important;
      border-color: rgba(216, 216, 216, 0.55) !important;
      color: #fff !important;
      box-shadow: none !important;
    }

    &:disabled,
    &.disabled {
      opacity: 0.45;
    }
  }
}