html[data-theme="dark"] body {
    background: #111827;
    color: #d1d5db;
}

.theme-mode-toggle {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

.theme-mode-toggle .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 86px;
    justify-content: center;
    border-radius: 6px;
}

.login-theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 86px;
    justify-content: center;
    border-radius: 6px;
}

.theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-icon-sun {
    display: inline-block;
}

html[data-theme="dark"] .header-container,
html[data-theme="dark"] .header-container .navbar,
html[data-theme="dark"] .sub-header-container,
html[data-theme="dark"] .sub-header-container .navbar {
    background: #0f172a;
    border-color: #1f2937;
}

html[data-theme="dark"] .main-container,
html[data-theme="dark"] #content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] .layout-px-spacing {
    background: #111827;
}

html[data-theme="dark"] .sidebar-wrapper,
html[data-theme="dark"] .sidebar-theme,
html[data-theme="dark"] #sidebar {
    background: #0f172a;
}

html[data-theme="dark"] #sidebar ul.menu-categories li.menu > a,
html[data-theme="dark"] #sidebar ul.menu-categories ul.submenu > li a,
html[data-theme="dark"] .navbar .theme-brand li.theme-text a,
html[data-theme="dark"] .navbar .navbar-item .nav-item .nav-link,
html[data-theme="dark"] .breadcrumb-one .breadcrumb-item a,
html[data-theme="dark"] .breadcrumb-one .breadcrumb-item.active span {
    color: #d1d5db;
}

html[data-theme="dark"] #sidebar ul.menu-categories li.menu > a:hover,
html[data-theme="dark"] #sidebar ul.menu-categories ul.submenu > li a:hover,
html[data-theme="dark"] #sidebar ul.menu-categories ul.submenu > li.active a {
    color: #ffffff;
    background: #1f2937;
}

html[data-theme="dark"] .widget,
html[data-theme="dark"] .widget-content,
html[data-theme="dark"] .widget-three,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .table {
    background: #172033;
    color: #d1d5db;
    border-color: #2d3748;
}

html[data-theme="dark"] .widget-heading h1,
html[data-theme="dark"] .widget-heading h2,
html[data-theme="dark"] .widget-heading h3,
html[data-theme="dark"] .widget-heading h4,
html[data-theme="dark"] .widget-heading h5,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] label,
html[data-theme="dark"] .modal-title {
    color: #f9fafb;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text {
    color: #9ca3af !important;
}

html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
    border-color: #2d3748;
    color: #d1d5db;
}

html[data-theme="dark"] .table thead th {
    color: #f9fafb;
    background: #111827;
}

html[data-theme="dark"] .table-hover tbody tr:hover {
    background: #1f2937;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] textarea.form-control {
    background: #0f172a;
    border-color: #374151;
    color: #f9fafb;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] textarea.form-control:focus {
    background: #111827;
    border-color: #4361ee;
    color: #f9fafb;
}

html[data-theme="dark"] .form-control::placeholder {
    color: #6b7280;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .dropdown-item a,
html[data-theme="dark"] .dropdown-menu .media-body h5,
html[data-theme="dark"] .dropdown-menu .media-body p {
    color: #d1d5db;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: #1f2937;
}

html[data-theme="dark"] .footer-wrapper {
    background: #111827;
    color: #9ca3af;
    border-color: #1f2937;
}

/* Light theme overrides — the base template ships dark by default,
   so the app pages need an explicit light palette (login/form pages
   already had one below). */
html[data-theme="light"] body {
    background: #f1f5f9;
    color: #3b3f5c;
}

html[data-theme="light"] .main-container,
html[data-theme="light"] #content,
html[data-theme="light"] .main-content,
html[data-theme="light"] .layout-px-spacing {
    background: #f1f5f9;
}

html[data-theme="light"] .widget,
html[data-theme="light"] .widget-content,
html[data-theme="light"] .widget-three,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .table {
    background: #ffffff;
    color: #3b3f5c;
    border-color: #e0e6ed;
}

html[data-theme="light"] .widget-heading h1,
html[data-theme="light"] .widget-heading h2,
html[data-theme="light"] .widget-heading h3,
html[data-theme="light"] .widget-heading h4,
html[data-theme="light"] .widget-heading h5,
html[data-theme="light"] .card-title,
html[data-theme="light"] label,
html[data-theme="light"] .modal-title {
    color: #0e1726;
}

html[data-theme="light"] .table th,
html[data-theme="light"] .table td {
    border-color: #e0e6ed;
    color: #3b3f5c;
}

html[data-theme="light"] .table thead th {
    color: #0e1726;
    background: #f1f5f9;
}

html[data-theme="light"] .table-hover tbody tr:hover {
    background: #f1f5f9;
}

html[data-theme="light"] .form-control,
html[data-theme="light"] .custom-select,
html[data-theme="light"] textarea.form-control {
    background: #ffffff;
    border-color: #e0e6ed;
    color: #3b3f5c;
}

html[data-theme="light"] .form-control:focus,
html[data-theme="light"] textarea.form-control:focus {
    background: #ffffff;
    border-color: #4361ee;
    color: #0e1726;
}

html[data-theme="light"] .form-control::placeholder {
    color: #888ea8;
}

html[data-theme="light"] .dropdown-item,
html[data-theme="light"] .dropdown-item a,
html[data-theme="light"] .dropdown-menu .media-body h5,
html[data-theme="light"] .dropdown-menu .media-body p {
    color: #3b3f5c !important;
}

html[data-theme="light"] .dropdown-item:hover,
html[data-theme="light"] .dropdown-item:focus {
    background: #f1f5f9;
}

html[data-theme="light"] .language-dropdown .dropdown-menu a span {
    color: #3b3f5c !important;
}

html[data-theme="light"] .footer-wrapper {
    background: #f1f5f9;
    color: #888ea8;
    border-color: #e0e6ed;
}

html[data-theme="dark"] body.form {
    background: #111827;
}

html[data-theme="dark"] body.form .form-form,
html[data-theme="dark"] body.form .form-container,
html[data-theme="dark"] body.form .form-content {
    background: #172033;
    color: #d1d5db;
}

html[data-theme="dark"] body.form .form-content h1,
html[data-theme="dark"] body.form .form-content label {
    color: #f9fafb;
}

html[data-theme="dark"] body.form .form-content p {
    color: #9ca3af;
}

html[data-theme="light"] body.form {
    background: #f1f2f3;
}

html[data-theme="light"] body.form .form-form,
html[data-theme="light"] body.form .form-container,
html[data-theme="light"] body.form .form-content {
    background: #ffffff;
    color: #3b3f5c;
}

html[data-theme="light"] body.form .form-content h1,
html[data-theme="light"] body.form .form-content label {
    color: #3b3f5c;
}

html[data-theme="light"] body.form .form-content p {
    color: #888ea8;
}

.cgc-product-card {
    overflow: hidden;
    border: 1px solid rgba(67, 97, 238, 0.08);
    box-shadow: 0 10px 24px rgba(31, 45, 61, 0.08);
}

.cgc-product-card:before {
    content: "";
    display: block;
    height: 5px;
    background: var(--accent);
}

.product-image-wrap {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
}

.product-image-wrap img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.product-size-badge {
    color: var(--accent);
    background: var(--soft);
}

.product-card-footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
}

.product-card-footer h3 {
    color: var(--accent);
    font-weight: 700;
}

.product-containers {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #ffffff;
    font-weight: 700;
}

.top-controller-card {
    border-radius: 8px;
    padding: 18px;
    background: linear-gradient(135deg, #e7fff3 0%, #eef3ff 100%);
    border: 1px solid rgba(0, 171, 85, 0.16);
}

html[data-theme="dark"] .top-controller-card {
    background: linear-gradient(135deg, #12362b 0%, #172033 100%);
    border-color: #275846;
}

.cgc-delivery-widget {
    min-height: 348px;
}

.cgc-delivery-widget .w-chart {
    padding: 0 12px 8px;
}

.cgc-controller-widget .widget-heading {
    margin-bottom: 28px;
}

.cgc-controller-widget .browser-list:nth-child(n) .w-icon {
    background: #1b55e2;
}

.cgc-controller-widget .browser-list:nth-child(2n) .w-icon {
    background: #e7515a;
}

.cgc-controller-widget .browser-list:nth-child(3n) .w-icon {
    background: #e2a03f;
}

.cgc-controller-widget .browser-list:nth-child(4n) .w-icon {
    background: #009688;
}

.cgc-controller-widget .browser-list:nth-child(5n) .w-icon {
    background: #2196f3;
}

.cgc-top-controller-note {
    margin-top: 20px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
}

.cgc-stat-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    box-shadow: 0 10px 24px rgba(31, 45, 61, 0.06);
    border: 1px solid rgba(67, 97, 238, 0.08);
}

.cgc-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--soft);
    color: var(--accent);
    flex-shrink: 0;
}

.cgc-stat-tile h3 {
    color: #3b3f5c;
    font-weight: 700;
}

.cgc-stat-tile .text-muted {
    font-size: 13px;
}

html[data-theme="dark"] .cgc-stat-tile {
    background: #172033;
    border-color: #2d3748;
}

html[data-theme="dark"] .cgc-stat-tile h3 {
    color: #f9fafb;
}