/* Driven by :root vars from layouts/partials/theme_chrome_vars.blade.php */
.theme-chrome-strip {
    background-image: linear-gradient(to right, var(--theme-header-from), var(--theme-header-to)) !important;
    background-color: var(--theme-header-from) !important;
}

.theme-chrome-solid {
    background-color: var(--theme-header-from) !important;
    background-image: none !important;
}

.theme-chrome-chip {
    background-color: var(--theme-header-chip) !important;
    transition: background-color 0.2s ease;
}

.theme-chrome-chip:hover {
    background-color: var(--theme-header-chip-hover) !important;
}

.theme-chrome-fill {
    background-image: linear-gradient(to right, var(--theme-header-from), var(--theme-header-to)) !important;
}

/* Force header/sidebar brand to follow selected System theme (not only AdminLTE skin) */
.main-header.theme-chrome-strip,
.main-header .theme-chrome-strip,
.side-bar > a.theme-chrome-solid,
aside.side-bar > a.theme-chrome-solid,
.main-header .logo,
.main-header .navbar,
body[class*='skin-'] .main-header .navbar,
body[class*='skin-'] .main-header .logo {
    background-color: var(--theme-header-from) !important;
    background-image: linear-gradient(to right, var(--theme-header-from), var(--theme-header-to)) !important;
}

/* Active / hover cues in sidebar use theme accent */
.side-bar .treeview-menu > li.active > a,
.side-bar .sidebar-menu > li.active > a,
.side-bar .sidebar-menu > li.menu-open > a,
.side-bar .sidebar-menu > li:hover > a {
    border-left-color: var(--hms-primary, var(--theme-header-from)) !important;
}

.side-bar .sidebar-menu > li.active > a {
    color: var(--hms-primary-dark, var(--theme-header-to)) !important;
}

/* Buttons / accents that still use AdminLTE primary should pick up theme */
.btn-primary,
.bg-primary,
.label-primary,
.progress-bar-primary {
    background-color: var(--hms-primary, var(--theme-header-from)) !important;
    border-color: var(--hms-primary-dark, var(--theme-header-to)) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--hms-primary-dark, var(--theme-header-to)) !important;
    border-color: var(--hms-primary-dark, var(--theme-header-to)) !important;
}

/*
 * daisyUI "primary" defaults to purple and does not read AdminLTE / HMS theme vars.
 * Map filled primary buttons + the indigo Add-button gradient to the selected theme.
 */
.tw-dw-btn-primary:not(.tw-dw-btn-outline):not(.tw-dw-btn-ghost),
.tw-bg-gradient-to-r.tw-from-indigo-600 {
    background-color: var(--hms-primary, var(--theme-header-from)) !important;
    background-image: linear-gradient(
        to right,
        var(--theme-header-from, var(--hms-primary)),
        var(--theme-header-to, var(--hms-primary-dark))
    ) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.tw-dw-btn-primary:not(.tw-dw-btn-outline):not(.tw-dw-btn-ghost):hover,
.tw-bg-gradient-to-r.tw-from-indigo-600:hover {
    background-color: var(--hms-primary-dark, var(--theme-header-to)) !important;
    filter: brightness(0.97);
}

.tw-dw-btn-outline.tw-dw-btn-primary {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--hms-primary, var(--theme-header-from)) !important;
    border-color: var(--hms-primary, var(--theme-header-from)) !important;
}

@media (min-width: 1280px) {
    .theme-chrome-strip--xl-neutral {
        background-image: none !important;
        background-color: #f3f4f6;
    }
}

/* POS: drawer triggers / headings (sale_pos/partials/pos_sidebar) */
.theme-pos-accent-gradient {
    background-image: linear-gradient(to right, var(--hms-primary-dark), var(--hms-primary));
}
.theme-pos-accent-gradient:hover {
    filter: brightness(0.97);
}
.theme-pos-accent-gradient:active {
    filter: brightness(0.92);
}
.theme-pos-accent-text-gradient {
    background-image: linear-gradient(to right, var(--hms-primary-dark), var(--hms-primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* POS header (layouts/partials/header-pos) */
.pos-theme-datetime-pill {
    background-color: var(--hms-primary);
    transition: background-color 0.15s ease;
}
.pos-theme-datetime-pill:hover {
    background-color: var(--hms-primary-dark);
}
.pos-theme-icon-accent {
    color: var(--hms-primary) !important;
}
.pos-theme-icon-action {
    color: var(--hms-secondary) !important;
}

/* —— NCS / Multi Branch home (break UltimatePOS card pattern) —— */
.content-wrapper > .content:has(.mb-home-dashboard) {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #e6eeeb !important;
}

.mb-home-dashboard {
    --mb-ink: #0f1f1c;
    --mb-muted: #4d635c;
    --mb-panel: #ffffff;
    --mb-accent: #0d9488;
    --mb-accent-deep: #0f766e;
    --mb-warn: #c2410c;
    --mb-danger: #dc2626;
    --mb-ok: #059669;
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    background:
        radial-gradient(900px 320px at 0% 0%, rgba(13, 148, 136, 0.22), transparent 60%),
        radial-gradient(700px 280px at 100% 5%, rgba(15, 31, 28, 0.07), transparent 55%),
        #e6eeeb !important;
    margin: 0 !important;
    padding: 0 0 2.5rem !important;
    width: 100%;
    box-sizing: border-box;
}

.mb-home-dashboard .mb-dash-hero {
    padding: 1.5rem 1.5rem 0.75rem;
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.mb-home-dashboard .mb-dash-brand {
    font-family: "Fraunces", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    font-size: clamp(1.85rem, 3.2vw, 2.6rem) !important;
    letter-spacing: -0.035em;
    color: var(--mb-ink) !important;
    line-height: 1.1;
    margin: 0 !important;
}

.mb-home-dashboard .mb-dash-welcome {
    margin: 0.4rem 0 0 !important;
    color: var(--mb-muted) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
}

.mb-home-dashboard .mb-dash-controls {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.mb-home-dashboard .mb-dash-controls .select2-container {
    min-width: 160px;
}

.mb-home-dashboard .mb-dash-date-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1rem;
    background: #0f1f1c !important;
    color: #f0fdf9 !important;
    border: none !important;
    border-radius: 0.4rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mb-home-dashboard .mb-dash-date-btn:hover {
    background: var(--mb-accent-deep) !important;
    transform: translateY(-1px);
}

.mb-home-dashboard .mb-dash-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    padding: 0.5rem 1.5rem 0.25rem !important;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 992px) {
    .mb-home-dashboard .mb-dash-kpi-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.9rem !important;
    }
}

.mb-home-dashboard .mb-dash-kpi {
    background: var(--mb-panel) !important;
    border-radius: 0.25rem !important;
    border: 1px solid rgba(15, 31, 28, 0.08) !important;
    border-left: 5px solid var(--mb-accent) !important;
    padding: 1rem 1.15rem !important;
    margin: 0 !important;
    box-shadow: 0 1px 2px rgba(15, 31, 28, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;
}

.mb-home-dashboard .mb-dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 31, 28, 0.1);
}

.mb-home-dashboard .mb-dash-kpi--sell { border-left-color: var(--mb-accent) !important; }
.mb-home-dashboard .mb-dash-kpi--ok { border-left-color: var(--mb-ok) !important; }
.mb-home-dashboard .mb-dash-kpi--warn { border-left-color: var(--mb-warn) !important; }
.mb-home-dashboard .mb-dash-kpi--danger { border-left-color: var(--mb-danger) !important; }
.mb-home-dashboard .mb-dash-kpi--ink { border-left-color: var(--mb-ink) !important; }

.mb-home-dashboard .mb-dash-kpi-label {
    margin: 0 !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--mb-muted) !important;
    line-height: 1.3;
}

.mb-home-dashboard .mb-dash-kpi p[data-original-value],
.mb-home-dashboard .mb-dash-kpi .total_sell,
.mb-home-dashboard .mb-dash-kpi .net,
.mb-home-dashboard .mb-dash-kpi .invoice_due,
.mb-home-dashboard .mb-dash-kpi .total_sell_return,
.mb-home-dashboard .mb-dash-kpi .total_purchase,
.mb-home-dashboard .mb-dash-kpi .purchase_due,
.mb-home-dashboard .mb-dash-kpi .total_purchase_return,
.mb-home-dashboard .mb-dash-kpi .total_expense {
    font-family: "Fraunces", Georgia, serif !important;
    font-weight: 600 !important;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem) !important;
    color: var(--mb-ink) !important;
    margin: 0.4rem 0 0 !important;
    letter-spacing: -0.02em;
    line-height: 1.25 !important;
    word-break: break-word;
}

.mb-home-dashboard .mb-dash-section {
    padding: 0.5rem 0 0 !important;
}

.mb-home-dashboard .mb-dash-section .tw-px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Chart / widget panels inside home */
.mb-home-dashboard .tw-rounded-xl {
    border-radius: 0.35rem !important;
    border: 1px solid rgba(15, 31, 28, 0.08) !important;
    box-shadow: none !important;
    ring: none;
}

.mb-home-dashboard .tw-ring-1,
.mb-home-dashboard .tw-ring-gray-200 {
    --tw-ring-shadow: 0 0 #0000 !important;
    box-shadow: none !important;
}

.mb-home-dashboard h3.tw-font-bold {
    font-family: "Source Sans 3", "Segoe UI", sans-serif !important;
    font-weight: 700 !important;
    color: var(--mb-ink) !important;
}

@keyframes mb-dash-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mb-home-dashboard .mb-dash-hero {
    animation: mb-dash-fade-up 0.4s ease both;
}

.mb-home-dashboard .mb-dash-kpi-grid > .mb-dash-kpi {
    animation: mb-dash-fade-up 0.45s ease both;
}

.mb-home-dashboard .mb-dash-kpi-grid > .mb-dash-kpi:nth-child(2) { animation-delay: 0.04s; }
.mb-home-dashboard .mb-dash-kpi-grid > .mb-dash-kpi:nth-child(3) { animation-delay: 0.08s; }
.mb-home-dashboard .mb-dash-kpi-grid > .mb-dash-kpi:nth-child(4) { animation-delay: 0.12s; }