html,
body {
    font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Force everything including Tabler components */
*, 
*::before, 
*::after {
    font-family: inherit !important;
}

/* Tabler override (important) */
:root {
    --tblr-body-font-family: 'DM Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* =========================================================
   SAAS PRIMARY BUTTON (CHARCOAL THEME)
   Used globally across dashboard
========================================================= */

.btn-app-primary {
    background-color: #1f2937 !important; /* charcoal */
    border-color: #1f2937 !important;
    color: #ffffff !important;

    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-weight: 500 !important;

    box-shadow: 0 4px 10px rgba(31, 41, 55, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover */
.btn-app-primary:hover {
    background-color: #111827 !important;
    border-color: #111827 !important;

    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(31, 41, 55, 0.25) !important;
}

/* Icon alignment */
.btn-app-primary i {
    font-size: 16px;
    vertical-align: -2px;
}



/* =========================================================
   DASHBOARD ONLY
========================================================= */

.page-wrapper {
    background: #F9FAFB !important;
    min-height: 100vh !important;
}

/* =========================================================
   DASHBOARD WELCOME + ACTIVITY STRIP
========================================================= */

.dashboard-hero h1 {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

.dashboard-hero p {
    font-size: 14px !important;
    color: var(--tblr-muted) !important;
    max-width: 720px;
}

.activity-strip {
    border-radius: 12px !important;
    border: 1px solid var(--tblr-border-color) !important;
    background: #fff !important;
}

.activity-strip .small {
    font-size: 13px !important;
}

.activity-strip .badge {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 999px !important;
}

.activity-strip i {
    font-size: 16px;
}
/* =========================================================
   KPI CARDS ONLY (DO NOT affect other cards)
========================================================= */

.kpi-card {
    border-radius: 14px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* hover lift effect (SaaS feel) */
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
}

/* small badge (growth %) */
.kpi-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.1);
}

/* chart spacing */
.kpi-chart {
    margin-top: 10px;
    height: 50px;
}



/* KPI badge colors (safe scoped) */
.kpi-badge.text-success {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #16a34a !important;
}

.kpi-badge.text-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #d97706 !important;
}

.kpi-badge.text-primary {
    background: rgba(79, 70, 229, 0.12) !important;
    color: var(--app-primary) !important;
}


/* =========================================================
   QUICK ACTIONS
========================================================= */

.quick-action-card {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 20px;

    border: 1px solid var(--tblr-border-color);
    border-radius: 12px;

    background: #fff;

    text-decoration: none !important;

    transition: all .2s ease;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.quick-action-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: rgba(79,70,229,.10);

    color: #4f46e5;

    font-size: 22px;
}

.quick-action-title {
    color: #111827;
    font-weight: 600;
}

.quick-action-text {
    color: #6b7280;
    font-size: 13px;
}


/* =========================================================
   RECENT ORDERS (TABLER-COMPATIBLE SAAS POLISH)
========================================================= */

/* Table spacing improvement */
.table-vcenter td,
.table-vcenter th {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    vertical-align: middle !important;
}

/* Row hover (soft SaaS feel) */
.table-hover tbody tr:hover {
    background: rgba(31, 41, 55, 0.03) !important;
}

/* Order ID emphasis */
.table td .fw-semibold {
    color: #111827 !important;
    font-weight: 600 !important;
}

/* Total emphasis */
.table td.fw-medium {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* =========================================================
   BADGES (ENHANCED TABLER LT STYLE)
========================================================= */

.badge {
    font-weight: 500 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
}

/* Slight improvement per status type (optional polish) */
.badge.bg-warning-lt {
    background: rgba(245, 159, 0, 0.12) !important;
    color: #b45309 !important;
}

.badge.bg-success-lt {
    background: rgba(47, 179, 68, 0.12) !important;
    color: #15803d !important;
}

.badge.bg-primary-lt {
    background: rgba(6, 111, 209, 0.12) !important;
    color: #1d4ed8 !important;
}

.badge.bg-danger-lt {
    background: rgba(214, 57, 57, 0.12) !important;
    color: #b91c1c !important;
}

/* =========================================================
   ACTION BUTTON POLISH (KEEP YOUR CURRENT STYLE)
========================================================= */

.btn-outline-primary {
    border-radius: 10px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-color: rgba(6, 111, 209, 0.25) !important;
    color: #066fd1 !important;
}

.btn-outline-primary:hover {
    background-color: rgba(6, 111, 209, 0.08) !important;
    transform: translateY(-1px);
}

/* Icon alignment */
.btn-outline-primary i {
    font-size: 14px;
    vertical-align: -1px;
}

/* =========================================================
   EMPTY STATE IMPROVEMENT
========================================================= */

.table tbody td.text-center {
    padding: 40px 0 !important;
}

.table .ti-package {
    opacity: 0.35;
}


/* =========================================================
   ORDERS PAGE HEADER TYPOGRAPHY
========================================================= */

.orders-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-size: 26px !important;
    margin: 0 !important;
    color: var(--tblr-body-color) !important;
}

.orders-subtitle {
    font-size: 14px !important;
    color: var(--tblr-muted) !important;
}



/* =========================================================
   ORDERS TABLE SAAS STYLE
========================================================= */

/* Card refinement */
.orders-table-card {
    border-radius: 12px !important;
    border: 1px solid var(--tblr-border-color) !important;
}

/* Table spacing */
.orders-table {
    margin-bottom: 0 !important;
}

/* Row hover (Shopify feel) */
.orders-table tbody tr {
    transition: all 0.15s ease-in-out !important;
}

.orders-table tbody tr:hover {
    background: #f9fafb !important;
}

/* Header styling */
.orders-table thead th {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tblr-muted) !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

/* Order ID */
.orders-table td.fw-semibold {
    font-weight: 600 !important;
}

/* =========================================================
   STATUS PILLS (SAAS STYLE)
========================================================= */

.status-pill {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 500;
}

/* Pending */
.status-pending {
    background: rgba(245, 159, 0, 0.12);
    color: #b45309;
}

/* Completed */
.status-completed {
    background: rgba(47, 179, 68, 0.12);
    color: #15803d;
}

/* Processing */
.status-processing {
    background: rgba(6, 111, 209, 0.12);
    color: #1d4ed8;
}

/* Default */
.status-default {
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}

/* =========================================================
   FORCE SAAS SECONDARY BUTTON (TABLER OVERRIDE SAFE)
========================================================= */


.btn.btn-app-secondary {
    background: transparent !important;
    border-color: rgba(6, 111, 209, 0.25) !important;
    color: #066fd1 !important;

    border-radius: 10px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;

    box-shadow: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover */
.btn.btn-app-secondary:hover {
    background: rgba(31, 41, 55, 0.08) !important;
    background-color: rgba(6, 111, 209, 0.08) !important;
    color: #066fd1 !important;

    transform: translateY(-1px) !important;
}

/* Icon fix */
.btn.btn-app-secondary i {
    font-size: 14px !important;
    vertical-align: -1px !important;
}




/* =========================================================
DEALER-ORDERS.PHP
   BULK ORDER PAGE HEADER
========================================================= */

.bulk-order-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    font-size: 26px !important;
    color: var(--tblr-body-color) !important;
}

.bulk-order-subtitle {
    font-size: 14px !important;
    color: var(--tblr-muted) !important;
}

/* Badge polish */
.bulk-order-header .badge {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
}


/* =========================================================
   PRODUCT SEARCH (SAAS UX STYLE)
========================================================= */

.product-search-card {
    border-radius: 12px !important;
}

/* Input focus upgrade */
.product-search-input {
    border-radius: 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    transition: all 0.2s ease-in-out !important;
}

/* Focus state (important SaaS feel) */
.product-search-input:focus {
    border-color: rgba(6, 111, 209, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(6, 111, 209, 0.10) !important;
}


/* =========================================================
   PRODUCT SEARCH RESULT ITEM (SAAS SAFE)
========================================================= */

#searchResults {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* each item */
#searchResults .border,
#searchResults .search-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    padding: 12px !important;
    border: 1px solid var(--tblr-border-color) !important;
    border-radius: 10px !important;

    background: #fff !important;

    transition: all 0.15s ease-in-out !important;
}

/* hover */
#searchResults .search-item:hover {
    background: rgba(31, 41, 55, 0.03) !important;
    transform: translateY(-1px);
}

/* left content */
.search-item-info .title {
    font-weight: 500 !important;
    color: #111827 !important;
}

.search-item-info .meta {
    font-size: 12px !important;
    color: #6b7280 !important;
}

/* select button */
.select-product {
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
}


/* =========================================================
   ORDER CART (FINAL SAAS POLISH LAYER)
========================================================= */


/* CART CARD */
.cart-card {
    border-radius: 12px !important;
    overflow: hidden !important;
}


/* HEADER ALIGNMENT (MATCH ALL CARDS) */
.cart-card .card-header {
    padding: 14px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

/* TITLE (Order Cart) */
.cart-card .card-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* RIGHT SIDE META TEXT */
.cart-card .card-header .text-muted {
    font-size: 12px !important;
    color: var(--tblr-muted) !important;
}


/* =========================================================
   TABLE SYSTEM INSIDE CART
========================================================= */

.cart-table {
    margin-bottom: 0 !important;
}

.cart-table thead th {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    background: #f9fafb !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

.cart-table td,
.cart-table th {
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

.cart-table tbody tr:hover {
    background: rgba(17, 24, 39, 0.03) !important;
}


/* =========================================================
   ATTRIBUTES STYLE BADGES
========================================================= */


.attr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.attr-pill {
    background: #f1f1f1;
    border: 1px solid #ddd;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    color: #333;
    white-space: nowrap;
}
/* =========================================================
   EMPTY STATE
========================================================= */

.empty-cart {
    font-size: 14px !important;
    color: var(--tblr-muted) !important;
}

.empty-cart i {
    opacity: 0.6 !important;
}


/* =========================================================
   FOOTER SECTION
========================================================= */

.cart-footer {
    padding: 14px 16px !important;
    border-top: 1px solid var(--tblr-border-color) !important;
    background: #fff !important;
}

/* footer text */
.cart-footer .text-muted {
    font-size: 12px !important;
}


/* =========================================================
   BUTTON CONSISTENCY (CHARCOAL PRIMARY)
========================================================= */

.btn-app-primary {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
}

.btn-app-primary:hover {
    background: #0b0f14 !important;
}


/* =========================================================
   ICON ALIGNMENT INSIDE HEADER
========================================================= */

.cart-card .card-header i {
    font-size: 16px !important;
    color: var(--tblr-primary) !important;
}



/* =========================================================
   ORDER VIEW PAGE HEADER (SAAS STYLE)
========================================================= */

.order-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #111827 !important;
}

.order-subtitle {
    font-size: 13px !important;
    color: var(--tblr-muted) !important;
}

/* badge alignment polish */
.order-header .badge {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
}

/* spacing consistency */
.order-header {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}



/* =========================================================
   DEALER INFO CARD (SAAS STYLE)
========================================================= */

.dealer-info-card .card-header {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

/* grid layout */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* individual field */
.info-item {
    padding: 10px 12px;
    border: 1px solid var(--tblr-border-color);
    border-radius: 10px;
    background: #fff;
}

/* label */
.info-label {
    font-size: 11px;
    color: var(--tblr-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* value */
.info-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* responsive */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}



/* =========================================================
   ORDER SUMMARY KPI CARDS (SAAS STYLE)
========================================================= */

.summary-card {
    border-radius: 12px !important;
    border: 1px solid var(--tblr-border-color) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

/* label */
.summary-label {
    font-size: 11px !important;
    color: var(--tblr-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

/* value */
.summary-value {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* badge refinement */
.summary-value .badge {
    font-size: 12px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
}

/* hover effect (subtle SaaS feel) */
.summary-card:hover {
    transform: translateY(-1px);
    transition: 0.2s ease;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
}


/* =========================================================
   ORDER ITEMS TABLE (SAAS / SHOPIFY STYLE)
========================================================= */

.order-items-card {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* header */
.order-items-card .card-header {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--tblr-border-color) !important;
}

/* table spacing */
.order-items-table td,
.order-items-table th {
    padding: 14px 12px !important;
    vertical-align: middle !important;
}

/* header background */
.order-items-table thead th {
    font-size: 12px !important;
    color: #6b7280 !important;
    background: #f9fafb !important;
    font-weight: 600 !important;
}

/* product name */
.order-items-table td.fw-medium {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* qty badge */
.qty-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
}

/* total alignment */
.order-items-table td.text-end {
    font-weight: 600 !important;
}

/* row hover (soft SaaS feel) */
.order-items-table tbody tr:hover {
    background: rgba(17, 24, 39, 0.03) !important;
    transition: 0.15s ease;
}


/* =========================================================
   ORDER BACK NAV (SAAS STYLE)
========================================================= */

.order-back-nav {
    margin-top: 10px;
}

/* reuse your secondary system button */
.btn-app-secondary {
    border: 1px solid #d1d5db !important;
    background: transparent !important;
    color: #111827 !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    transition: 0.15s ease;
}

/* hover effect */
.btn-app-secondary:hover {
    background: rgba(17, 24, 39, 0.04) !important;
    border-color: inherit !important;
}

/* icon alignment */
.btn-app-secondary i {
    font-size: 16px !important;
    vertical-align: -2px;
}