/* Ayar POS palette shared by application screens. */
:root {
    --theme-700: #020c47;
    --theme-800: #0e4eb2;
    --theme-900: #011f65;
    --ayar-accent: #2078cf;
    --ayar-section: #f7f9fc;
    --ayar-success: #16a36a;
    --ayar-warning: #f59e0b;
    --ayar-danger: #e5484d;
    --ayar-info: #3b82f6;
}

html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) body > .thetop,
html:not([data-theme="dark"]) .thetop > main,
html:not([data-theme="dark"]) #scrollable-container {
    background-color: #f4f6f9 !important;
}

html:not([data-theme="dark"]) #side-bar .theme-sidebar-active {
    background-color: #eaf2ff;
    color: #0e4eb2;
    box-shadow: inset 3px 0 0 #0e4eb2;
}
html:not([data-theme="dark"]) #side-bar .theme-sidebar-active svg,
html:not([data-theme="dark"]) #side-bar .theme-sidebar-active i,
html:not([data-theme="dark"]) #side-bar .theme-sidebar-child-active {
    color: #0e4eb2;
}
html:not([data-theme="dark"]) #side-bar .theme-sidebar-hover:hover,
html:not([data-theme="dark"]) #side-bar .theme-sidebar-child-hover:hover {
    background-color: #eaf2ff;
    color: #0e4eb2;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 60px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.app-topbar-inner {
    min-height: 60px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.app-topbar-left,
.app-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.app-topbar-context { min-width: 0; }
.app-topbar-title {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-topbar-business {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-icon-btn,
.app-profile-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.app-icon-btn:hover,
.app-profile-btn:hover {
    background: #f7f9fc;
    border-color: #cbd5e1;
    color: #0f172a;
    text-decoration: none;
}
.app-icon-btn svg,
.app-profile-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-primary-action {
    height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--theme-800);
    border-radius: 6px;
    background: var(--theme-800);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.app-primary-action:hover { background: var(--theme-700); color: #fff; text-decoration: none; }
.app-primary-action svg { width: 17px; height: 17px; }
.app-language-switch {
    height: 34px;
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
}
.app-language-switch a {
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.app-language-switch a.is-active { background: #eef4ff; color: var(--theme-800); }
.app-profile-menu { position: relative; }
.app-profile-menu summary { list-style: none; }
.app-profile-menu summary::-webkit-details-marker { display: none; }
.app-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: 210px;
    padding: 8px;
    margin: 0;
    list-style: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.app-profile-name { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; margin-bottom: 5px; }
.app-profile-name small { display: block; color: #64748b; font-size: 11px; }
.app-profile-name strong { display: block; color: #0f172a; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-profile-link {
    width: 100%;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}
.app-profile-link:hover { background: #f7f9fc; color: #0f172a; text-decoration: none; }
.app-profile-link svg { width: 17px; height: 17px; }
.app-topbar .notifications-menu > a {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #475569 !important;
    box-shadow: none !important;
}

.sidebar-brand {
    min-height: 68px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand-mark {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--theme-800);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}
.sidebar-brand-copy { min-width: 0; }
.sidebar-brand-product { margin: 0; color: #0f172a; font-size: 13px; font-weight: 800; line-height: 1.25; }
.sidebar-brand-business { margin: 3px 0 0; color: #64748b; font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dashboard-shell { min-height: 100%; background: #f4f6f9; color: #0f172a; }
.dashboard-pagebar {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
}
.dashboard-pagebar-inner { width: 100%; }
.dashboard-heading { margin: 0; color: #0f172a; font-size: 22px; font-weight: 750; line-height: 1.25; }
.dashboard-subheading { margin: 4px 0 0; color: #64748b; font-size: 12px; line-height: 1.45; }
.dashboard-filters { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dashboard-location-wrap { min-width: 180px; }
.dashboard-filter-btn {
    height: 36px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
}
.dashboard-filter-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.dashboard-pagebar .dashboard-filter-btn,
.dashboard-pagebar .select2-container .select2-selection--single {
    background: #2078cf;
    border: 1px solid #2078cf;
    color: #fff;
    border-radius: 6px;
}
.dashboard-pagebar .select2-container .select2-selection__rendered,
.dashboard-pagebar .select2-container .select2-selection__placeholder {
    color: #fff;
}
.dashboard-pagebar .select2-container .select2-selection__arrow b {
    border-top-color: #fff;
}
.dashboard-pagebar .select2-container--open .select2-selection__arrow b {
    border-top-color: transparent;
    border-bottom-color: #fff;
}
#select2-dashboard_location-results .select2-results__option,
body:has(.dashboard-shell) .daterangepicker .ranges li {
    background: #fff;
    color: #0f172a;
}
#select2-dashboard_location-results .select2-results__option:nth-child(odd),
body:has(.dashboard-shell) .daterangepicker .ranges li:nth-child(odd) {
    background: #e0f2fe;
}
#select2-dashboard_location-results .select2-results__option--highlighted,
#select2-dashboard_location-results .select2-results__option[aria-selected="true"],
body:has(.dashboard-shell) .daterangepicker .ranges li:hover,
body:has(.dashboard-shell) .daterangepicker .ranges li.active {
    background: #2078cf;
    color: #fff;
}
.dashboard-content { padding: 18px 24px 32px; }
.dashboard-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dashboard-kpi {
    min-height: 112px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.dashboard-kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dashboard-kpi-label { color: #64748b; font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.dashboard-kpi-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 6px; background: #eef4ff; color: var(--theme-800); }
.dashboard-kpi-icon.is-positive { background: #ecfdf3; color: #067647; }
.dashboard-kpi-icon.is-warning { background: #fff7ed; color: #c2410c; }
.dashboard-kpi-icon.is-danger { background: #fff1f2; color: #e5484d; }
.dashboard-kpi-icon svg { width: 16px; height: 16px; }
.dashboard-kpi-value { margin: 14px 0 0; color: #0f172a; font-size: 24px; font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dashboard-main-grid { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 14px; align-items: stretch; }
.dashboard-card { min-width: 0; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .12); }
.dashboard-card-header { min-height: 52px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf1f6; }
.dashboard-card-title { margin: 0; color: #1e293b; font-size: 14px; font-weight: 750; line-height: 1.4; }
.dashboard-card-caption { margin: 2px 0 0; color: #64748b; font-size: 11px; }
.dashboard-chart-body { min-height: 310px; padding: 10px 12px 4px; }
.dashboard-chart-panel[hidden] { display: none !important; }
.dashboard-chart-tabs { display: inline-flex; padding: 2px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f7f9fc; }
.dashboard-chart-tab { padding: 5px 9px; border: 0; border-radius: 4px; background: transparent; color: #64748b; font-size: 11px; font-weight: 700; }
.dashboard-chart-tab.is-active { background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.dashboard-snapshot { padding: 4px 16px 10px; }
.dashboard-snapshot-row { padding: 13px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e2e8f0; }
.dashboard-snapshot-row:nth-child(odd) { background: #ffffff; }
.dashboard-snapshot-row:nth-child(even) { background: #eef1f5; }
.dashboard-snapshot-row:last-child { border-bottom: 0; }
.dashboard-snapshot-label { color: #64748b; font-size: 12px; line-height: 1.4; }
.dashboard-snapshot-value { color: #1e293b; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }

/* Ayar AI insights card (paired with the chart, stacked above Financial Snapshot) */
.dashboard-side-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Financial Snapshot (last card in the stack) absorbs any leftover height so
   the stack's total height always matches the chart card next to it, instead
   of the two columns drifting out of sync. */
.dashboard-side-stack > .dashboard-card:last-child { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dashboard-side-stack > .dashboard-card:last-child .dashboard-snapshot { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.dash-ai-card { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.dash-ai-card-header { display: flex; align-items: center; }
.dash-ai-card-title { margin: 0; display: flex; align-items: center; gap: 6px; color: #1e293b; font-size: 14px; font-weight: 750; }
.dash-ai-insights { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.dash-ai-insight-row { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); text-decoration: none !important; }
.dash-ai-insight-row:hover { background: #f7f9fc; border-color: #bfd7ff; }
.dash-ai-insight-row:focus-visible { outline: 2px solid #2078cf; outline-offset: 2px; }
.dash-ai-insight-icon { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.dash-ai-insight-icon svg { width: 14px; height: 14px; }
.dash-ai-insight-icon.amber { background: #fff4e2; color: #f59e0b; }
.dash-ai-insight-icon.blue { background: #eaf1ff; color: #2f6fed; }
.dash-ai-insight-icon.green { background: #e8f8ee; color: #16a34a; }
.dash-ai-insight-text { color: #334155; font-size: 12.5px; font-weight: 600; line-height: 1.5; padding-top: 3px; }
.dash-ai-open-btn { margin-top: auto; height: 40px; border-radius: 9px; background: var(--theme-800); color: #fff !important; border: 0; font-size: 13px; font-weight: 750; display: flex; align-items: center; justify-content: center; gap: 7px; text-decoration: none !important; }
.dash-ai-open-btn:hover { background: var(--theme-700); }
.dashboard-actions { margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-actions-copy { min-width: 150px; }
.dashboard-actions-list { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dashboard-action {
    height: 34px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.dashboard-action:hover { background: #f7f9fc; color: #0f172a; text-decoration: none; }
.dashboard-action.is-primary { border-color: var(--theme-800); background: var(--theme-800); color: #fff; }
.dashboard-action.is-primary:hover { background: var(--theme-700); color: #fff; }
.dashboard-action svg { width: 15px; height: 15px; }
.dashboard-section-heading { margin: 22px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dashboard-section-heading h2 { margin: 0; color: #1e293b; font-size: 15px; font-weight: 750; }
.dashboard-section-heading p { margin: 0; color: #64748b; font-size: 11px; }
.dashboard-table-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dashboard-table-card { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; }
.dashboard-table-card-header { min-height: 50px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #edf1f6; }
.dashboard-table-card-title { margin: 0; color: #1e293b; font-size: 13px; font-weight: 750; line-height: 1.4; }
.dashboard-table-card-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.dashboard-view-all,
.dashboard-shell .dash-view-all { display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 5px 10px; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; color: #0e4eb2; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; text-decoration: none; }
.dashboard-view-all:hover,
.dashboard-shell .dash-view-all:hover { background: #dbeafe; border-color: #93c5fd; color: #0e4eb2; text-decoration: none; }
.dashboard-view-all:focus-visible,
.dashboard-shell .dash-view-all:focus-visible { outline: 2px solid #0e4eb2; outline-offset: 2px; }
.dashboard-table-body { padding: 0 4px; overflow-x: auto; }
.dashboard-table-card table { width: 100%; margin: 0; font-size: 12px; }
.dashboard-table-card table.dataTable th { color: #64748b !important; font-size: 10px !important; font-weight: 750; text-transform: uppercase; }
.dashboard-table-card .dt-buttons { display: none !important; }
.dashboard-table-card .dataTables_info { padding: 7px 12px; color: #64748b; font-size: 10px; }
.dashboard-module-widgets { margin-top: 14px; }

/* The dashboard uses the same DOM at every viewport. */
.desktop-dash { display: block !important; }
.dashboard-shell .dash-kpi-grid {
    padding: 18px 24px 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    background: transparent;
}
.dashboard-shell .dash-kpi-card {
    --kpi-background: #eaf2ff;
    --kpi-border: #bfd7ff;
    --kpi-accent: #0e4eb2;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    column-gap: 10px;
    row-gap: 3px;
    min-width: 0;
    min-height: 94px;
    padding: 12px;
    border: 1px solid var(--kpi-border);
    border-radius: 8px;
    background: var(--kpi-background);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .12) !important;
    transform: none !important;
}
.dashboard-shell .dash-kpi-card:nth-child(2) {
    --kpi-background: #ecf8f2;
    --kpi-border: #bee5cf;
    --kpi-accent: #16a36a;
}
.dashboard-shell .dash-kpi-card:nth-child(3) {
    --kpi-background: #fff6e5;
    --kpi-border: #f4d59a;
    --kpi-accent: #f59e0b;
}
.dashboard-shell .dash-kpi-card:nth-child(4) {
    --kpi-background: #fdecef;
    --kpi-border: #f2bcc7;
    --kpi-accent: #e5484d;
}
.dashboard-shell .dash-kpi-card:nth-child(n+5) { display: none; }
.dashboard-shell .dash-kpi-card-top {
    display: contents;
}
.dashboard-shell .dash-kpi-label { grid-column: 2; grid-row: 1; color: #475569; font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.dashboard-shell .dash-kpi-value { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; color: #0f172a; font-size: 22px; font-weight: 750; line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere; }
.dashboard-shell .dash-kpi-icon { grid-column: 1; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; align-self: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kpi-border) !important; color: var(--kpi-accent); }
.dashboard-shell .dash-kpi-icon svg { width: 22px !important; height: 22px !important; stroke: currentColor; }
.dash-kpi-formula { grid-column: 1 / -1; margin: 2px 0 0; color: #64748b; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.dashboard-actions-band,
.dashboard-operations-band { background: transparent !important; }
.dashboard-actions-grid { align-items: stretch; }
.dashboard-shell .dash-actions-card,
.dashboard-shell .dash-assistant-card {
    padding: 16px;
    min-width: 0;
    min-height: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .12);
}
.dashboard-shell .dash-actions-card {
    display: flex;
    flex-direction: column;
    background: #f7f9fc;
}
.dashboard-shell .dash-actions-card-label,
.dashboard-shell .dash-assistant-card-title { margin: 0 0 11px; color: #1e293b; font-size: 13px; font-weight: 750; letter-spacing: 0; text-transform: none; }
.dashboard-shell .dash-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
    align-items: stretch;
}
.dashboard-shell .dash-qa-btn,
.dashboard-shell .dash-assistant-open-btn {
    min-height: 40px;
    padding: 9px 15px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none !important;
    white-space: normal;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dashboard-shell .dash-qa-btn { width: auto; flex: 0 0 auto; background: #fff; color: #334155; }
.dashboard-shell .dash-qa-btn:hover { background: #f7f9fc; border-color: #cbd5e1; color: #0f172a; }
.dashboard-shell .dash-qa-btn.primary { background: var(--theme-800); border-color: var(--theme-800); color: #fff; }
.dashboard-shell .dash-qa-btn.primary:hover { background: var(--theme-700); border-color: var(--theme-700); color: #fff; }
.dashboard-shell .dash-qa-btn svg,
.dashboard-shell .dash-assistant-open-btn svg { width: 15px !important; height: 15px !important; display: block; flex: 0 0 15px; }
.dashboard-shell .dash-quick-actions .dash-qa-btn {
    width: 100%;
    min-width: 0;
    text-align: center;
    overflow-wrap: anywhere;
    min-height: 52px;
    padding: 14px 22px;
    gap: 10px;
    font-size: 15px;
    line-height: 1.5;
    background: var(--action-color, #0e4eb2);
    border-color: var(--action-color, #0e4eb2);
    background: color-mix(in srgb, var(--action-color, #0e4eb2) 85%, transparent);
    border-color: color-mix(in srgb, var(--action-color, #0e4eb2) 85%, transparent);
    color: #fff;
    transition: filter .15s ease;
}
.dashboard-shell .dash-qa-btn.action-purchase { --action-color: #16a36a; }
.dashboard-shell .dash-qa-btn.action-product { --action-color: #2078cf; }
.dashboard-shell .dash-qa-btn.action-customer { --action-color: #011f65; }
.dashboard-shell .dash-qa-btn.action-expense { --action-color: #e5484d; }
.dashboard-shell .dash-qa-btn.action-profit-loss { --action-color: #f59e0b; }
.dashboard-shell .dash-quick-actions .dash-qa-btn.action-profit-loss { color: #0f172a; }
.dashboard-shell .dash-quick-actions .dash-qa-btn:hover { filter: brightness(.9); }
.dashboard-shell .dash-quick-actions .dash-qa-btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.dashboard-shell .dash-quick-actions .dash-qa-btn svg { width: 19px !important; height: 19px !important; flex: 0 0 19px; }
.dashboard-shell .dash-assistant-card { border-color: #e2e8f0; }
.dashboard-shell .dash-assistant-card { display: flex; flex-direction: column; align-items: flex-start; }
.dashboard-shell .dash-assistant-card-title { color: #1e293b; }
.dashboard-shell .dash-assistant-card-title svg { width: 15px !important; height: 15px !important; }
.dashboard-shell .dash-assistant-card-desc { margin: 0 0 13px; color: #64748b; font-size: 12px; line-height: 1.5; }
.dashboard-shell .dash-assistant-open-btn { background: #eef4ff; color: var(--theme-800); }
.dashboard-shell .dash-assistant-open-btn:hover { background: #dbeafe; color: var(--theme-900); }
.dashboard-shell .dash-table-card { min-width: 0; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -14px rgba(15, 23, 42, .12); }
.dashboard-shell .dash-table-card-header { min-height: 50px; padding: 10px 14px; }
.dashboard-shell .dash-table-card-title { margin: 0; color: #1e293b; font-size: 13px; font-weight: 700; }
.dashboard-shell .dash-table-card:has(#stock_expiry_alert_table) > .dash-table-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.dashboard-shell .dash-table-card:has(#stock_expiry_alert_table) > .dash-table-card-header > .dash-view-all {
    margin-left: auto;
}


/* Attention Needed — pill row */
.dashboard-attention-band {
    margin: 18px 24px 0;
    padding: 16px;
    background: #f7f9fc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.dash-attn-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.dash-attn-heading h2 { margin: 0; color: #1e293b; font-size: 15px; font-weight: 750; }
.dash-attn-heading p { margin: 2px 0 0; color: #64748b; font-size: 11px; }
.dash-attn-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dash-attn-pill {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 20px -14px rgba(15, 23, 42, .12);
    text-decoration: none !important;
}
.dash-attn-pill:hover { border-color: #cbd5e1; }
.dash-attn-pill-icon { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; }
.dash-attn-pill-icon svg { width: 16px; height: 16px; }
.dash-attn-pill.has-issue .dash-attn-pill-icon { background: #fff4e2; color: #f59e0b; }
.dashboard-attention-band .dash-attn-pill[data-attn-row="stock"] .dash-attn-pill-icon { background: #fff6e5; color: #f59e0b; }
.dashboard-attention-band .dash-attn-pill[data-attn-row="customer"] .dash-attn-pill-icon,
.dashboard-attention-band .dash-attn-pill[data-attn-row="supplier"] .dash-attn-pill-icon { background: #fdecef; color: #e5484d; }
.dashboard-attention-band .dash-attn-pill[data-attn-row="shipment"] .dash-attn-pill-icon { background: #e0f2fe; color: #3b82f6; }
.dash-attn-pill-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; flex: 1 1 auto; }
.dash-attn-pill-label { color: #64748b; font-size: 11.5px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-attn-pill-count { color: #0f172a; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; }
.dash-attn-pill-chev { flex-shrink: 0; color: #94a3b8; }
.dash-attn-pill-chev svg { width: 14px; height: 14px; }

/* Consistent card surfaces across the dashboard. */
.dashboard-shell .dashboard-card,
.dashboard-shell .dashboard-kpi,
.dashboard-shell .dashboard-table-card,
.dashboard-shell .dash-actions-card,
.dashboard-shell .dash-assistant-card,
.dashboard-shell .dash-table-card,
.dashboard-shell .dashboard-attention-band,
.dashboard-shell .dash-attn-pill {
    background: #f7f9fc;
    border-color: #e2e8f0;
}
.dashboard-shell .dash-attn-pill {
    background: #ffffff;
}

/* Today's Tasks: compact priority item rows (shared by stock/customer/supplier/shipment cards) */
.dash-compact-table thead { display: none; }
html:not([data-theme="dark"]) .dashboard-shell .dash-table-card table > tbody > tr:nth-child(odd) > td {
    background-color: #ffffff;
}
html:not([data-theme="dark"]) .dashboard-shell .dash-table-card table > tbody > tr:nth-child(even) > td {
    background-color: #eef1f5;
}
.dash-table-body { padding: 2px 4px 6px; }
.dash-table-count-badge { color: #94a3b8; font-size: 11px; font-weight: 700; }
.dash-priority-item { padding: 7px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dash-priority-item-main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-priority-name { color: #1e293b; font-size: 13px; font-weight: 650; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-priority-code { color: #94a3b8; font-size: 11px; line-height: 1.3; }
.dash-priority-qty { flex-shrink: 0; color: #475569; font-size: 12px; font-weight: 700; white-space: nowrap; text-align: right; }
.dash-compact-table tr:not(:last-child) .dash-priority-item { border-bottom: 1px solid #f1f5f9; }
.dash-empty-state { padding: 22px 14px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #16a34a; font-size: 12px; font-weight: 650; text-align: center; }
.dash-empty-state[hidden] { display: none !important; }
.dash-empty-state svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Payables / Receivables tabbed card (Customer Due / Supplier Due) */
.dash-due-tabs { display: flex; gap: 4px; padding: 0 14px; border-bottom: 1px solid #edf1f6; }
.dash-due-tab { padding: 8px 4px 10px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #64748b; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.dash-due-tab.is-active { background: #ffffff; color: #0f172a; border-bottom-color: #e2e8f0; border-radius: 6px 6px 0 0; }
.dash-due-tab-count { color: #94a3b8; font-size: 11px; font-weight: 650; }
.dash-due-tab.is-active .dash-due-tab-count { color: #64748b; }
.dash-due-tab-panel[hidden] { display: none !important; }
.dash-due-panel-tools { padding: 10px 14px 4px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

[data-theme="dark"] .app-topbar,
[data-theme="dark"] .sidebar-brand,
[data-theme="dark"] .dashboard-pagebar,
[data-theme="dark"] .dashboard-kpi,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .dashboard-table-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .app-topbar-title,
[data-theme="dark"] .sidebar-brand-product,
[data-theme="dark"] .dashboard-heading,
[data-theme="dark"] .dashboard-kpi-value,
[data-theme="dark"] .dashboard-card-title,
[data-theme="dark"] .dashboard-table-card-title,
[data-theme="dark"] .dashboard-section-heading h2 { color: #f1f5f9 !important; }
[data-theme="dark"] .app-topbar-business,
[data-theme="dark"] .sidebar-brand-business,
[data-theme="dark"] .dashboard-subheading,
[data-theme="dark"] .dashboard-kpi-label,
[data-theme="dark"] .dashboard-card-caption,
[data-theme="dark"] .dashboard-snapshot-label,
[data-theme="dark"] .dashboard-section-heading p { color: #94a3b8 !important; }
[data-theme="dark"] .dashboard-shell { background: #0f172a !important; }
[data-theme="dark"] .app-icon-btn,
[data-theme="dark"] .app-profile-btn,
[data-theme="dark"] .app-language-switch,
[data-theme="dark"] .dashboard-filter-btn,
[data-theme="dark"] .dashboard-action { background: #182130; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .app-profile-dropdown { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .app-profile-name { border-color: #334155; }
[data-theme="dark"] .app-profile-name strong,
[data-theme="dark"] .dashboard-snapshot-value { color: #f1f5f9; }
[data-theme="dark"] .app-profile-link { color: #cbd5e1; }
[data-theme="dark"] .app-profile-link:hover { background: #273549; color: #fff; }
[data-theme="dark"] .app-topbar .notifications-menu > a { background: #182130 !important; border-color: #334155 !important; color: #cbd5e1 !important; }
[data-theme="dark"] .dashboard-card-header,
[data-theme="dark"] .dashboard-table-card-header,
[data-theme="dark"] .dashboard-snapshot-row { border-color: #334155; }
[data-theme="dark"] .dashboard-snapshot-row:nth-child(odd) { background: #1e293b; }
[data-theme="dark"] .dashboard-snapshot-row:nth-child(even) { background: #273549; }
[data-theme="dark"] .dashboard-chart-tabs { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .dashboard-chart-tab { color: #94a3b8; }
[data-theme="dark"] .dashboard-chart-tab.is-active { background: #334155; color: #fff; }
[data-theme="dark"] .dashboard-shell .dashboard-attention-band,
[data-theme="dark"] .dashboard-shell .dash-kpi-card,
[data-theme="dark"] .dashboard-shell .dash-actions-card,
[data-theme="dark"] .dashboard-shell .dash-assistant-card,
[data-theme="dark"] .dashboard-shell .dash-table-card { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .dashboard-shell .dash-kpi-value,
[data-theme="dark"] .dashboard-shell .dash-actions-card-label,
[data-theme="dark"] .dashboard-shell .dash-assistant-card-title,
[data-theme="dark"] .dashboard-shell .dash-table-card-title { color: #f1f5f9 !important; }
[data-theme="dark"] .dashboard-shell .dash-qa-btn { background: #182130; border-color: #334155; color: #cbd5e1; }
[data-theme="dark"] .dashboard-shell .dash-qa-btn:hover { background: #273549; border-color: #475569; color: #fff; }
[data-theme="dark"] .dashboard-shell .dash-qa-btn.primary { background: var(--theme-800); border-color: var(--theme-800); color: #fff; }
[data-theme="dark"] .dashboard-shell .dash-assistant-card-desc { color: #94a3b8; }
[data-theme="dark"] .dashboard-shell .dash-assistant-open-btn { background: #273549; border-color: #334155; color: #bfdbfe; }
[data-theme="dark"] .dash-kpi-formula { color: #64748b; }
[data-theme="dark"] .dashboard-shell .dash-kpi-label,
[data-theme="dark"] .dashboard-shell .dash-kpi-formula { color: #cbd5e1; }
[data-theme="dark"] .dash-attn-heading h2 { color: #f1f5f9; }
[data-theme="dark"] .dash-attn-heading p { color: #94a3b8; }
[data-theme="dark"] .dash-attn-pill { background: #1e293b; border-color: #334155; box-shadow: none; }
[data-theme="dark"] .dash-attn-pill:hover { border-color: #475569; }
[data-theme="dark"] .dash-attn-pill-icon { background: #182130; color: #94a3b8; }
[data-theme="dark"] .dash-attn-pill.has-issue .dash-attn-pill-icon { background: #2c2213; color: #f5a524; }
[data-theme="dark"] .dash-attn-pill-label { color: #94a3b8; }
[data-theme="dark"] .dash-attn-pill-count { color: #f1f5f9; }
[data-theme="dark"] .dash-priority-name { color: #f1f5f9; }
[data-theme="dark"] .dash-priority-code { color: #64748b; }
[data-theme="dark"] .dash-priority-qty { color: #cbd5e1; }
[data-theme="dark"] .dash-ai-card-title { color: #f1f5f9; }
[data-theme="dark"] .dash-ai-insight-row { background: #182130; border-color: #334155; }
[data-theme="dark"] .dash-ai-insight-row:hover { background: #202b40; }
[data-theme="dark"] .dash-ai-insight-text { color: #cbd5e1; }
[data-theme="dark"] .dash-compact-table tr:not(:last-child) .dash-priority-item { border-color: #334155; }
[data-theme="dark"] .dash-table-count-badge { color: #64748b; }
[data-theme="dark"] .dash-due-tabs { border-color: #334155; }
[data-theme="dark"] .dash-due-tab { color: #94a3b8; }
[data-theme="dark"] .dash-due-tab-count { color: #64748b; }
[data-theme="dark"] .dash-empty-state { color: #4ade80; }

@media (max-width: 1100px) {
    .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-shell .dash-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-main-grid { grid-template-columns: 1fr; }
    .dash-attn-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .app-topbar-inner { padding: 9px 12px; gap: 8px; }
    .app-topbar-context,
    .app-language-switch,
    .app-topbar .app-calculator-btn,
    .app-topbar .app-profit-btn { display: none; }
    .app-topbar-actions { gap: 6px; }
    .app-primary-action { width: 34px; padding: 0; }
    .app-primary-action span { display: none; }
    .app-profile-btn { width: 34px; padding: 0; }
    .app-profile-btn span { display: none; }
    .dashboard-pagebar { padding: 16px 14px; }
    .dashboard-pagebar-inner { align-items: flex-start !important; flex-direction: column; }
    .dashboard-heading { font-size: 19px; }
    .dashboard-filters { width: 100%; justify-content: flex-start; }
    .dashboard-location-wrap { min-width: 0; flex: 1 1 160px; }
    .dashboard-filters > div,
    .dashboard-filters .select2-container { width: 100% !important; min-width: 0 !important; }
    .dashboard-filter-btn { flex: 1 1 auto; justify-content: center; }
    .dashboard-content { padding: 12px 14px 26px; }
    .dashboard-shell .dash-kpi-grid { padding: 12px 14px 0; }
    .dashboard-main-grid { margin-left: 14px !important; margin-right: 14px !important; }
    .dashboard-attention-band { margin-left: 14px; margin-right: 14px; }
    .dashboard-actions-band,
    .dashboard-attention-band,
    .dashboard-operations-band { padding-left: 14px !important; padding-right: 14px !important; }
    .dashboard-actions-grid { grid-template-columns: 1fr !important; }
    .dashboard-shell .dash-actions-card,
    .dashboard-shell .dash-assistant-card { min-height: 0; }
    .dash-attn-pills { grid-template-columns: 1fr; }
    .dashboard-table-grid { grid-template-columns: 1fr !important; }
    .dashboard-kpi-grid { gap: 8px; }
    .dashboard-kpi { min-height: 104px; padding: 13px; }
    .dashboard-kpi-value { font-size: 19px; }
    .dashboard-kpi-icon { width: 28px; height: 28px; }
    .dashboard-chart-body { min-height: 260px; overflow-x: auto; }
    .dashboard-card-header { align-items: flex-start; flex-direction: column; }
    .dashboard-chart-tabs { width: 100%; }
    .dashboard-chart-tab { flex: 1 1 50%; }
    .dashboard-actions { align-items: flex-start; flex-direction: column; }
    .dashboard-actions-list { width: 100%; justify-content: flex-start; }
    .dashboard-action { flex: 1 1 calc(50% - 8px); }
    .dashboard-table-grid { grid-template-columns: 1fr; }
    .dashboard-table-card-header { align-items: flex-start; }
    .dashboard-shell .dash-table-card-header { flex-direction: column; }
    .dashboard-shell .dash-table-card-header > div { width: 100%; justify-content: space-between !important; flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .dashboard-shell .dash-kpi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .dashboard-kpi-grid,
    .dashboard-shell .dash-kpi-grid { grid-template-columns: 1fr; }
    .dashboard-action { flex-basis: 100%; }
    .dashboard-shell .dash-quick-actions .dash-qa-btn { padding: 10px 6px; gap: 6px; font-size: 12px; }
    .dashboard-table-card-tools select { max-width: 108px; }
}

/* Operational screens: keep the visual language quiet and consistent.
   Marketing pages use a separate layout, so these rules only affect the app. */
main #scrollable-container .tw-bg-gradient-to-r {
    background-image: none !important;
    background-color: var(--theme-800, #17486f) !important;
}

main #scrollable-container .tw-rounded-full.tw-dw-btn,
main #scrollable-container a.tw-rounded-full,
main #scrollable-container button.tw-rounded-full {
    border-radius: 6px !important;
}

main #scrollable-container .box,
main #scrollable-container .nav-tabs-custom {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

main #scrollable-container .box-header {
    padding: 14px 16px;
    border-bottom: 1px solid #edf1f6;
}

main #scrollable-container .box-title {
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
}

main #scrollable-container .btn,
main #scrollable-container .form-control,
main #scrollable-container .select2-selection {
    border-radius: 6px !important;
}

main #scrollable-container .table > thead > tr > th {
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}

/* In-card location filters stay compact (Bootstrap .form-control is width:100%) and sit right-aligned beside View All.
   Row alignment between the Payables and Stock Alert cards is done in home/index.blade.php (alignDashboardFilterRows). */
.dashboard-shell .dash-table-card select.form-control { width: auto; max-width: 200px; }
.dashboard-shell .dash-table-card[data-priority-card] > .dash-table-card-header > div { justify-content: flex-end; }

/* Fill the sales chart card without stretching its SVG. */
.dashboard-main-grid > .dashboard-card:has(.dashboard-chart-body) { display: flex; flex-direction: column; }
.dashboard-chart-body { flex: 1; position: relative; }
.dashboard-chart-panel { position: absolute; inset: 10px 12px 4px; }
.dashboard-chart-panel > div:first-child { width: 100% !important; height: 100% !important; }
html:not([data-theme="dark"]) .dashboard-shell .dashboard-snapshot-row,
html:not([data-theme="dark"]) .dashboard-shell .dashboard-snapshot-row *,
html:not([data-theme="dark"]) .dashboard-shell .dash-table-card tbody td,
html:not([data-theme="dark"]) .dashboard-shell .dash-table-card tbody td * {
    color: #000000;
    font-weight: 400;
}

/* Consistent black table headings across app pages, POS and modals. */
html:not([data-theme="dark"]) body.hold-transition table > thead > tr > th,
html:not([data-theme="dark"]) body.hold-transition table > thead > tr > td,
html:not([data-theme="dark"]) body.hold-transition table > thead > tr > th *,
html:not([data-theme="dark"]) body.hold-transition table > thead > tr > td * {
    color: #000000 !important;
}

/* Solid sky-blue action dropdowns on operational tables. */
main #scrollable-container .dropdown-toggle.tw-dw-btn-info {
    background-color: #00bfff !important;
    border-color: #00bfff !important;
    color: #ffffff !important;
}
main #scrollable-container .dropdown-toggle.tw-dw-btn-info:hover,
main #scrollable-container .dropdown-toggle.tw-dw-btn-info:focus {
    background-color: #00ace6 !important;
    border-color: #00ace6 !important;
    color: #ffffff !important;
}

/* Date-range inputs retain their page colors and open preset dropdowns. */
input.app-date-range-dropdown {
    background-color: #ffffff !important;
    cursor: pointer;
    padding-right: 30px !important;
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4 3 3 3-3' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Purchase list "payment due" cell: label + amount rows instead of wrapped
   "MMK equivalent:" captions. Amount keeps .payment_due/.purchase_return and
   data-orig-value — purchase.js reads them for the footer totals. */
.pay-due-cell { display: grid; gap: 2px; min-width: 182px; font-size: 12px; line-height: 1.4; text-align: left; }
.pay-due-cell .pdc-line { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; }
.pay-due-cell .pdc-line + .pdc-line { border-top: 1px solid #eef2f7; }
/* No uppercase/letter-spacing here: the labels are Myanmar text, which neither suits. */
.pay-due-cell .pdc-k { flex: none; color: #8a97a8; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pay-due-cell .pdc-v { text-align: right; }
.pay-due-cell .pdc-amt { display: block; color: #0f172a; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pay-due-cell .pdc-alt { display: block; margin-top: 1px; color: #94a3b8; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.pay-due-cell .pdc-paid .pdc-amt { color: #0f7b53; }
.pay-due-cell .pdc-due .pdc-amt { color: #b42318; }
.pay-due-cell .pdc-due.is-settled .pdc-amt { color: #0f7b53; }
.pay-due-cell .pdc-return .pdc-amt { color: #b06c00; }
.pay-due-cell .pdc-return a:hover .pdc-amt { text-decoration: underline; }