adminator-admin-dashboard 2.7.0

package/src/assets/styles/index.scss

@@ -0,0 +1,801 @@
+@use 'spec/settings/index' as *;
+@use 'spec/tools/index' as *;
+@use "bootstrap/scss/bootstrap" as *;
+@use 'spec/index' as *;
+@use 'vendor/index' as *;
+@import "utils/theme.css";
+@import "utils/mobile.scss";
+
+body {
+  background: var(--c-bkg-body);
+  color: var(--c-text-base);
+}
+
+.sidebar {
+  background: var(--c-bkg-sidebar);
+}
+
+.bgc-white {
+  background: var(--c-bkg-card) !important;
+}
+
+// Dark-mode aware Header & Dropdown --------------------------------
+.header {
+  background: var(--c-bkg-card);
+  border-bottom: 1px solid var(--c-border);
+
+  .dropdown-menu {
+    background: var(--c-bkg-card);
+    border: 1px solid var(--c-border);
+  }
+
+  .nav-left > li > a,
+  .nav-right > li > a {
+    color: var(--c-text-base);
+
+    &:hover,
+    &:focus {
+      color: var(--c-primary);
+    }
+  }
+
+  .notifications .counter {
+    background: var(--c-danger);
+    color: #fff;
+  }
+
+  // Theme toggle switch styling
+  .theme-toggle {
+    display: flex;
+    align-items: center;
+    height: 65px; // Match header height
+    padding: 0 15px;
+
+    .form-check {
+      margin: 0;
+      
+      .form-check-label {
+        color: var(--c-text-muted);
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        
+        i {
+          font-size: 12px;
+        }
+      }
+
+      .form-check-input {
+        width: 2.5rem;
+        height: 1.25rem;
+        background-color: var(--c-border);
+        border: 1px solid var(--c-border);
+        cursor: pointer;
+        
+        &:checked {
+          background-color: var(--c-primary);
+          border-color: var(--c-primary);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--c-primary) 25%, transparent);
+          border-color: var(--c-primary);
+        }
+      }
+    }
+
+    // Mobile theme toggle adjustments
+    @media (max-width: 991px) {
+      padding: 0 6px;
+      height: 65px;
+
+      .form-check {
+        .form-check-label {
+          font-size: 10px;
+          
+          &:first-child {
+            margin-right: 4px;
+          }
+          
+          &:last-child {
+            margin-left: 4px;
+          }
+        }
+
+        .form-check-input {
+          width: 2rem;
+          height: 1rem;
+        }
+      }
+    }
+
+    // Very small mobile adjustments
+    @media (max-width: 480px) {
+      padding: 0 4px;
+
+      .form-check {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        
+        .form-check-label {
+          font-size: 8px;
+          margin: 1px 0;
+          white-space: nowrap;
+          
+          i {
+            margin: 0 2px;
+          }
+        }
+
+        .form-check-input {
+          width: 1.5rem;
+          height: 0.8rem;
+          margin: 2px 0;
+        }
+      }
+    }
+  }
+}
+
+// Mobile dropdown menu improvements
+@media (max-width: 767px) {
+  .header {
+    .nav-right {
+      .dropdown-menu {
+        position: fixed !important;
+        top: 65px !important;
+        left: 5px !important;
+        right: 5px !important;
+        width: auto !important;
+        max-width: none !important;
+        min-width: auto !important;
+        transform: none !important;
+        z-index: 1050;
+        border-radius: 8px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        max-height: calc(100vh - 85px);
+        overflow-y: auto;
+      }
+
+      .notifications .dropdown-menu {
+        max-height: calc(100vh - 85px);
+        overflow-y: auto;
+      }
+    }
+  }
+}
+
+// Mobile search input overlay
+@media (max-width: 480px) {
+  .header {
+    .search-input {
+      &.active {
+        position: absolute;
+        top: 65px;
+        left: 0;
+        right: 0;
+        background: var(--c-bkg-card);
+        border-top: 1px solid var(--c-border);
+        padding: 10px;
+        z-index: 999;
+
+        input {
+          margin-top: 0;
+          width: 100%;
+          padding: 10px;
+          border: 1px solid var(--c-border);
+          border-radius: 4px;
+          background: var(--c-bkg-card);
+          color: var(--c-text-base);
+
+          &::placeholder {
+            color: var(--c-text-muted);
+          }
+        }
+      }
+    }
+  }
+}
+
+// Tables -------------------------------------------------
+.table {
+  background: var(--c-bkg-card);
+  color: var(--c-text-base);
+  
+  thead th {
+    background: var(--c-bkg-card);
+    color: var(--c-text-base);
+    border-color: var(--c-border);
+  }
+  
+  tbody {
+    td, th {
+      border-color: var(--c-border);
+      color: var(--c-text-base);
+      background: var(--c-bkg-card);
+    }
+    
+    tr:nth-child(even) {
+      td, th {
+        background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));
+      }
+    }
+  }
+  
+  tfoot th {
+    background: var(--c-bkg-card);
+    color: var(--c-text-base);
+    border-color: var(--c-border);
+  }
+  
+  // Bootstrap table variants
+  &.table-striped {
+    tbody tr:nth-child(odd) {
+      td, th {
+        background: var(--c-bkg-card);
+      }
+    }
+    
+    tbody tr:nth-child(even) {
+      td, th {
+        background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));
+      }
+    }
+  }
+  
+  &.table-hover {
+    tbody tr:hover {
+      td, th {
+        background: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border)) !important;
+        color: var(--c-text-base);
+      }
+    }
+  }
+  
+  &.table-bordered {
+    border: 1px solid var(--c-border);
+    
+    th, td {
+      border: 1px solid var(--c-border);
+    }
+  }
+  
+  // Table head variants
+  .table-dark {
+    background: color-mix(in srgb, var(--c-bkg-card) 80%, #000);
+    
+    th {
+      background: color-mix(in srgb, var(--c-bkg-card) 80%, #000);
+      color: var(--c-text-base);
+      border-color: var(--c-border);
+    }
+  }
+  
+  .table-light {
+    background: var(--c-bkg-card);
+    
+    th {
+      background: var(--c-bkg-card);
+      color: var(--c-text-base);
+      border-color: var(--c-border);
+    }
+  }
+}
+
+// Forms --------------------------------------------------
+.form-control,
+.form-select {
+  background: var(--c-bkg-card);
+  color: var(--c-text-base);
+  border: 1px solid var(--c-border);
+
+  &:focus {
+    border-color: var(--c-primary);
+    box-shadow: 0 0 0 0.1rem rgba(75, 124, 243, .25);
+  }
+}
+
+input::placeholder {
+  color: var(--c-text-muted);
+}
+
+// Cards --------------------------------------------------
+.card,
+.bgc-white.bd,
+.bgc-white.bdT,
+.bgc-white.bdB {
+  background: var(--c-bkg-card);
+  border-color: var(--c-border) !important;
+  color: var(--c-text-base);
+}
+
+// Alerts -------------------------------------------------
+.alert {
+  color: var(--c-text-base);
+  border-color: var(--c-border);
+  background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border));
+
+  &.alert-primary {
+    background: color-mix(in srgb, var(--c-primary) 20%, var(--c-bkg-card));
+    border-color: var(--c-primary);
+    color: var(--c-primary);
+  }
+}
+
+// Modals -------------------------------------------------
+.modal-content {
+  background: var(--c-bkg-card);
+  color: var(--c-text-base);
+  border: 1px solid var(--c-border);
+}
+
+// Logo colours ------------------------------------------
+.logo img,
+.logo-auth {
+  // Light mode: invert the "A" to make it white (if default is dark)
+  filter: invert(1) hue-rotate(180deg) brightness(1.2);
+}
+
+[data-theme="dark"] .logo img,
+[data-theme="dark"] .logo-auth {
+  // Dark mode: keep original colors (dark "A" on blue background)
+  filter: brightness(1) contrast(1);
+}
+
+.logo-text {
+  color: var(--c-text-base);
+}
+
+// Ensure auth page logos are properly sized
+.logo-auth {
+  max-width: 60px !important;
+  max-height: 60px !important;
+  width: auto;
+  height: auto;
+}
+
+// Generic border utility override -----------------------
+.bd,
+.bdT,
+.bdB,
+.bdL,
+.bdR {
+  border-color: var(--c-border) !important;
+}
+
+// Sidebar logo border -----------------------------------
+.sidebar-logo {
+  border-color: var(--c-border) !important;
+}
+
+// Grey-100 utility override -----------------------------
+.bgc-grey-100 { background: color-mix(in srgb, var(--c-bkg-body) 90%, #000) !important; }
+
+// Sales Report widget styling -------------------------------
+.sales-report-header {
+  background-color: var(--c-primary) !important;
+  color: #ffffff !important;
+  
+  h5, h3, p {
+    color: #ffffff !important;
+  }
+}
+
+// Hover background utilities for dark mode ----------------
+[data-theme="dark"] .bgcH-grey-100:hover {
+  background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;
+}
+
+// Sidebar right border ----------------------------------
+.sidebar,
+.sidebar-menu {
+  border-right: 1px solid var(--c-border);
+}
+
+// Dark mode text color overrides for better visibility -------
+[data-theme="dark"] .c-grey-900 {
+  color: var(--c-text-base) !important;
+}
+
+[data-theme="dark"] .c-grey-800 {
+  color: var(--c-text-base) !important;
+}
+
+[data-theme="dark"] .c-grey-700 {
+  color: var(--c-text-muted) !important;
+}
+
+[data-theme="dark"] .c-grey-600 {
+  color: var(--c-text-muted) !important;
+}
+
+[data-theme="dark"] .text-dark {
+  color: var(--c-text-base) !important;
+}
+
+// Ensure all headings are theme-aware ----------------------
+h1, h2, h3, h4, h5, h6 {
+  color: var(--c-text-base);
+}
+
+// Email & Compose dark mode fixes ---------------------------
+.email-app {
+  .email-side-nav {
+    background: var(--c-bkg-card);
+    border-color: var(--c-border);
+  }
+  
+  .email-list,
+  .email-content,
+  .email-wrapper {
+    background: var(--c-bkg-card) !important;
+    color: var(--c-text-base);
+  }
+  
+  .email-list-item {
+    border-color: var(--c-border) !important;
+    
+    &:hover {
+      background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;
+    }
+  }
+}
+
+// Badge colors for dark mode ---------------------------------
+[data-theme="dark"] .badge {
+  &.bgc-deep-purple-50 {
+    background: #8b5cf6 !important;
+    color: #fff !important;
+  }
+  
+  &.c-deep-purple-700 {
+    color: #fff !important;
+  }
+  
+  &.bgc-green-50 {
+    background: var(--c-success) !important;
+    color: #fff !important;
+  }
+  
+  &.c-green-700 {
+    color: #fff !important;
+  }
+  
+  &.bgc-blue-50 {
+    background: var(--c-primary) !important;
+    color: #fff !important;
+  }
+  
+  &.c-blue-700 {
+    color: #fff !important;
+  }
+  
+  &.bgc-amber-50 {
+    background: #f59e0b !important;
+    color: #000 !important;
+  }
+  
+  &.c-amber-700 {
+    color: #000 !important;
+  }
+  
+  &.bgc-red-50 {
+    background: var(--c-danger) !important;
+    color: #fff !important;
+  }
+  
+  &.c-red-700 {
+    color: #fff !important;
+  }
+}
+
+// Email buttons in dark mode ---------------------------------
+[data-theme="dark"] .email-app {
+  .btn.bgc-white {
+    background: var(--c-bkg-card) !important;
+    color: var(--c-text-base) !important;
+    border: 1px solid var(--c-border) !important;
+    
+    &:hover {
+      background: color-mix(in srgb, var(--c-bkg-card) 85%, var(--c-border)) !important;
+    }
+  }
+}
+
+// Additional table styling for consistency ----------------
+.table-responsive {
+  border: 1px solid var(--c-border);
+  border-radius: 3px;
+}
+
+// Table inside cards should blend seamlessly
+.bgc-white .table {
+  background: var(--c-bkg-card);
+  border: none;
+  
+  thead th {
+    border-top: none;
+  }
+}
+
+// Status badges in tables need proper theming
+.table .badge {
+  &.bgc-red-50.c-red-700 {
+    background: var(--c-danger) !important;
+    color: #fff !important;
+  }
+  
+  &.bgc-deep-purple-50.c-deep-purple-700 {
+    background: #8b5cf6 !important;
+    color: #fff !important;
+  }
+  
+  &.bgc-pink-50.c-pink-700 {
+    background: #ec4899 !important;
+    color: #fff !important;
+  }
+}
+
+// Chat page specific dark mode fixes ----------------------
+[data-theme="dark"] {
+  // Chat page loader
+  #loader {
+    background: var(--c-bkg-body) !important;
+  }
+
+  // Chat message bubbles - different styling for sent vs received
+  .ai-fs .pY-3.pX-10.bgc-white {
+    background: var(--c-bkg-card) !important;
+    border: 1px solid var(--c-border);
+  }
+
+  .ai-fe .pY-3.pX-10.bgc-white {
+    background: var(--c-primary) !important;
+    border: 1px solid var(--c-primary);
+    color: white !important;
+
+    small {
+      color: rgba(255, 255, 255, 0.8) !important;
+    }
+
+    span {
+      color: white !important;
+    }
+  }
+
+  // Chat status indicators (preserve their semantic colors)
+  .c-green-500 {
+    color: var(--c-success) !important;
+  }
+
+  .c-amber-500 {
+    color: #f59e0b !important;
+  }
+
+  .c-red-500 {
+    color: var(--c-danger) !important;
+  }
+
+  // Chat typing indicator
+  .lh-1 i {
+    color: var(--c-text-muted);
+  }
+
+  // Chat backgrounds  
+  .bgc-grey-200 {
+    background: var(--c-bkg-body) !important;
+  }
+}
+
+// Todo List dark mode fixes ---------------------------------
+[data-theme="dark"] {
+  .list-task {
+    background: var(--c-bkg-card);
+    border: 1px solid var(--c-border);
+
+    .list-group-item {
+      background: var(--c-bkg-card);
+      border-color: var(--c-border);
+      color: var(--c-text-base);
+
+      &:first-child {
+        border-top-color: var(--c-border);
+      }
+
+      &:last-child {
+        border-bottom-color: var(--c-border);
+      }
+
+      .form-label {
+        color: var(--c-text-base);
+      }
+
+      // Checkbox styling for dark mode
+      .checkbox {
+        input[type="checkbox"] {
+          &:checked + label::before {
+            background: var(--c-primary);
+            border-color: var(--c-primary);
+          }
+
+          &:focus + label::before {
+            border-color: var(--c-primary);
+            box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
+          }
+        }
+
+        label::before {
+          background: var(--c-bkg-card);
+          border-color: var(--c-border);
+        }
+      }
+
+      // Todo badges
+      .badge {
+        &.bg-success {
+          background: var(--c-success) !important;
+          color: white !important;
+        }
+
+        &.bg-danger {
+          background: var(--c-danger) !important;
+          color: white !important;
+        }
+
+        &.bg-warning {
+          background: #f59e0b !important;
+          color: #000 !important;
+        }
+
+        &.bg-info {
+          background: var(--c-primary) !important;
+          color: white !important;
+        }
+      }
+    }
+  }
+}
+
+// Calendar page dark mode fixes -----------------------------
+[data-theme="dark"] {
+  // Calendar event sidebar
+  .bgc-white.bd {
+    background: var(--c-bkg-card) !important;
+    border-color: var(--c-border) !important;
+
+    .bdB {
+      border-bottom-color: var(--c-border) !important;
+    }
+
+    // Calendar event items
+    .peers.ai-c.jc-sb.fxw-nw {
+      border-bottom-color: var(--c-border) !important;
+
+      .c-grey-900 {
+        color: var(--c-text-base) !important;
+      }
+
+      .c-grey-600 {
+        color: var(--c-text-muted) !important;
+      }
+
+      .c-grey-700 {
+        color: var(--c-text-muted) !important;
+      }
+
+      // Action buttons (edit, delete)
+      .c-deep-purple-500 {
+        &:hover.cH-blue-500 {
+          color: var(--c-primary) !important;
+        }
+      }
+
+      .c-red-500 {
+        &:hover.cH-blue-500 {
+          color: var(--c-danger) !important;
+        }
+      }
+    }
+
+    // Add event button
+    .btn-warning {
+      background: #f59e0b;
+      border-color: #f59e0b;
+      color: #000;
+
+      &:hover {
+        background: #d97706;
+        border-color: #d97706;
+      }
+    }
+  }
+
+  // Calendar modal
+  .modal-content {
+    background: var(--c-bkg-card);
+    border: 1px solid var(--c-border);
+    color: var(--c-text-base);
+
+    .modal-body {
+      .form-label {
+        color: var(--c-text-base);
+      }
+
+      .form-control {
+        background: var(--c-bkg-body);
+        border-color: var(--c-border);
+        color: var(--c-text-base);
+
+        &::placeholder {
+          color: var(--c-text-muted);
+        }
+
+        &:focus {
+          background: var(--c-bkg-body);
+          border-color: var(--c-primary);
+          box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
+        }
+      }
+
+      .input-group-text {
+        background: var(--c-bkg-card) !important;
+        border-color: var(--c-border);
+        color: var(--c-text-base);
+
+        &.bgc-white {
+          background: var(--c-bkg-card) !important;
+        }
+      }
+
+      .btn-primary {
+        background: var(--c-primary);
+        border-color: var(--c-primary);
+
+        &:hover {
+          background: var(--c-primary-hover);
+          border-color: var(--c-primary-hover);
+        }
+      }
+    }
+  }
+
+  // Calendar grid improvements
+  .fc {
+    // Calendar day cells
+    .fc-day {
+      background: var(--c-bkg-card);
+      
+      &:hover {
+        background: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-border));
+      }
+    }
+
+    // Calendar header
+    .fc-head {
+      background: var(--c-bkg-card);
+    }
+
+    // Weekend styling
+    .fc-sun,
+    .fc-sat {
+      background: color-mix(in srgb, var(--c-bkg-card) 95%, var(--c-border));
+    }
+
+    // Other days
+    .fc-other-month {
+      .fc-day-number {
+        color: var(--c-text-muted) !important;
+      }
+    }
+
+    // Event hover effects
+    .fc-event {
+      &:hover {
+        opacity: 0.9;
+      }
+    }
+  }
+}
+