/**
 * Sarker Software Solution - Brand & Dashboard Stylesheet
 * Custom CSS for White-labeling and Dashboard UI Redesign
 */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* Sarker Brand Colors (Extracted from Sarker Software Solution Official Logo) */
    --sarker-navy: #003399;
    --sarker-sidebar-bg: #003399;
    --sarker-sidebar-hover: #00287a;
    --sarker-sidebar-active: #001f5c;
    --sarker-blue: #003399;          /* Brand Royal Blue */
    --sarker-blue-dark: #001f5c;     /* Brand Royal Deep Navy */
    --sarker-blue-light: #2563EB;
    --sarker-blue-glow: rgba(27, 68, 156, 0.3);
    --sarker-green: #10B981;         /* Tech Circuit Green */
    --sarker-green-dark: #059669;
    --sarker-amber: #D97706;         /* Growth Arrow Amber */
    --sarker-teal: #0D9488;
    --sarker-bg: #F4F7FB;
    --sarker-card-bg: #FFFFFF;
    --sarker-heading: #0F2A66;       /* Primary Headings Color */
    --sarker-text-primary: #1E293B;
    --sarker-text-muted: #64748B;
    --sarker-border: #E2E8F0;
    --sarker-radius-sm: 8px;
    --sarker-radius: 14px;
    --sarker-radius-lg: 20px;
    --sarker-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --sarker-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --sarker-shadow-hover: 0 10px 24px -4px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
}

/* Global Typography & Headings */
body, .skin-blue-light, .tw-font-sans {
    font-family: var(--app-font-family, 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    background-color: var(--sarker-bg) !important;
    color: var(--sarker-text-primary);
}

/* =========================================================
   BRAND HEADINGS ACROSS ALL PAGES & MODULES
   ========================================================= */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--sarker-heading) !important;
    font-family: var(--app-font-family, 'Hind Siliguri', 'Inter', sans-serif);
    font-weight: 700;
}

.content-header > h1,
.content-header h1 {
    color: var(--sarker-heading) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    letter-spacing: -0.2px;
}

.content-header > h1 > small,
.content-header h1 small {
    color: #64748B !important;
    font-weight: 500 !important;
}

.box-header .box-title,
.box .box-header .box-title,
.box-title,
.card-title,
.panel-title,
.modal-title {
    color: var(--sarker-heading) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.1px;
}

.box-header .box-title i,
.box-title i {
    color: var(--sarker-blue) !important;
    margin-right: 6px;
}

/* ====================================================================
   BRANDED TABLE HEADERS (Add/Edit Entry Screens & All Reports)
   Matching Gradient: linear-gradient(90deg, #58BF00 0%, #16A34A 18%, #0D9488 45%, #0284C7 75%, #003399 100%)
   Extreme Compact / Minimum Padding
   ==================================================================== */

/* 1. Header Gradient Row across all Add & Report Tables */
#pos_table thead tr,
#purchase_entry_table thead tr,
#stock_adjustment_product_table thead tr,
#pricing_table_single thead tr,
#product_variation_form_part thead tr,
.add-product-price-table thead tr,
.table-th-green thead tr,
table.dataTable thead tr,
.dataTables_wrapper table thead tr,
.dataTables_scrollHead table thead tr,
.table-striped thead tr,
.table-bordered thead tr,
.table thead tr {
    background: linear-gradient(90deg, #58BF00 0%, #16A34A 18%, #0D9488 45%, #0284C7 75%, #003399 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* 2. Header Cells (th) - Pure White Bold Text, Subtle Dividers */
#pos_table thead th,
#purchase_entry_table thead th,
#stock_adjustment_product_table thead th,
#pricing_table_single thead th,
#product_variation_form_part thead th,
.add-product-price-table thead th,
.table-th-green thead th,
.table-th-green th,
table.dataTable thead th,
.dataTables_wrapper table thead th,
.dataTables_scrollHead table thead th,
.table-striped thead th,
.table-bordered thead th,
.table > thead > tr > th,
.table thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    line-height: 1.3 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-left: none !important;
    vertical-align: middle !important;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    white-space: nowrap !important;
}

/* Pricing Table body stays clean white - only the head has color */
.add-product-price-table tbody,
.add-product-price-table tbody tr,
.add-product-price-table tbody td,
#pricing_table_single tbody,
#pricing_table_single tbody tr,
#pricing_table_single tbody td {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1e293b !important;
}

/* ====================================================================
   PRODUCT VIEW & SALES VIEW (AND ALL DETAILS/SHOW MODALS) TABLE HEAD BAR
   Color: #003399 (Sarker Royal Navy Blue) with Pure White Bold Text
   Matching user request: "product view ba sales view er head bar er color tao 003399 rakho"
   ==================================================================== */
table tr.bg-green,
table thead tr.bg-green,
table.bg-gray tr.bg-green,
.modal table tr.bg-green,
.modal-body table tr.bg-green,
.view_modal table tr.bg-green,
#view_product_modal table tr.bg-green,
#view_sale_modal table tr.bg-green,
.modal-dialog table tr.bg-green {
    background: #003399 !important;
    background-color: #003399 !important;
    color: #FFFFFF !important;
    border: none !important;
}

table tr.bg-green th,
table thead tr.bg-green th,
table.bg-gray tr.bg-green th,
.modal table tr.bg-green th,
.modal-body table tr.bg-green th,
.view_modal table tr.bg-green th,
.view_modal table thead th,
#view_product_modal table tr.bg-green th,
#view_product_modal table thead th,
#view_sale_modal table tr.bg-green th,
#view_sale_modal table thead th,
.modal-dialog table tr.bg-green th {
    background: #003399 !important;
    background-color: #003399 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    line-height: 1.35 !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-left: none !important;
    vertical-align: middle !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

table tr.bg-green th:last-child,
table thead tr.bg-green th:last-child,
.view_modal table tr.bg-green th:last-child,
.view_modal table thead th:last-child,
#view_product_modal table tr.bg-green th:last-child,
#view_product_modal table thead th:last-child,
#view_sale_modal table tr.bg-green th:last-child,
#view_sale_modal table thead th:last-child {
    border-right: none !important;
}

table tr.bg-green th *,
table tr.bg-green th i,
table tr.bg-green th span,
.view_modal table tr.bg-green th *,
#view_product_modal table tr.bg-green th *,
#view_sale_modal table tr.bg-green th * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Ensure ALL inner elements in table headers are forced to pure white */
table.dataTable thead th *,
.dataTables_wrapper table thead th *,
.dataTables_scrollHead table thead th *,
.table thead th * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* Sortable columns: Reserve right space so sorting arrows sit beside the text without overlapping */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
.dataTables_wrapper table thead th.sorting,
.dataTables_wrapper table thead th.sorting_asc,
.dataTables_wrapper table thead th.sorting_desc,
.dataTables_scrollHead thead th.sorting,
.dataTables_scrollHead thead th.sorting_asc,
.dataTables_scrollHead thead th.sorting_desc {
    padding-right: 16px !important;
    position: relative !important;
}

/* DataTables FixedColumns (Action column) - Brand Green Background with White Text */
.DTFC_LeftHeadWrapper,
.DTFC_LeftHeadWrapper table,
.DTFC_LeftHeadWrapper table thead tr,
.DTFC_LeftHeadWrapper th,
.DTFC_Cloned thead th,
table.dataTable thead th:first-child {
    background: #58BF00 !important;
    background-color: #58BF00 !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

table.dataTable.no-footer {
    border-bottom: none !important;
}

/* Header Action / Delete Column */
#pos_table thead th:last-child,
#purchase_entry_table thead th:last-child,
#stock_adjustment_product_table thead th:last-child,
.table thead th i.fa-trash,
.table thead th i.fa-times,
.table thead th i.fas {
    color: #FFFFFF !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* DataTables Sorting Arrows in Reports - Pure White & Positioned beside text */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    position: absolute !important;
    right: 7px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    bottom: auto !important;
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    opacity: 0.95 !important;
}

table.dataTable thead th i,
table.dataTable thead th svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    opacity: 0.95 !important;
}

/* 3. Table Body Cells - Comfortable Padding */
#pos_table tbody td,
#purchase_entry_table tbody td,
#stock_adjustment_product_table tbody td,
.table-th-green tbody td,
table.dataTable tbody td,
.table > tbody > tr > td,
.table tbody td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* Compact Date (Col 2) & Status (Col 7) Columns for Sells Table with reduced left/right padding */
#sell_table th:nth-child(2),
#sell_table td:nth-child(2),
.dataTables_scrollHead table#sell_table th:nth-child(2),
.dataTables_scrollBody table#sell_table td:nth-child(2),
#sell_table_wrapper .dataTables_scrollHead th:nth-child(2),
#sell_table_wrapper .dataTables_scrollBody td:nth-child(2) {
    padding-left: 3px !important;
    padding-right: 3px !important;
    width: 85px !important;
    min-width: 80px !important;
    max-width: 95px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#sell_table th:nth-child(7),
#sell_table td:nth-child(7),
.dataTables_scrollHead table#sell_table th:nth-child(7),
.dataTables_scrollBody table#sell_table td:nth-child(7),
#sell_table_wrapper .dataTables_scrollHead th:nth-child(7),
#sell_table_wrapper .dataTables_scrollBody td:nth-child(7) {
    padding-left: 3px !important;
    padding-right: 3px !important;
    width: 75px !important;
    min-width: 70px !important;
    max-width: 85px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#sell_table td:nth-child(2) small {
    display: block;
    color: #64748B;
    font-size: 11px;
    margin-top: 1px;
}

/* ====================================================================
   PRODUCT LIST TABLE (#product_table) BALANCED PADDING & COMPACT HEADERS
   ==================================================================== */
/* 1. Header Cells: comfortable vertical padding (for clean multi-line text) & compact left/right padding */
#product_table thead th,
.dataTables_scrollHead table#product_table thead th,
#product_table_wrapper .dataTables_scrollHead thead th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    vertical-align: middle !important;
    text-align: center !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

/* 2. Body Cells: compact balanced padding across all columns */
#product_table tbody td,
.dataTables_scrollBody table#product_table tbody td,
#product_table_wrapper .dataTables_scrollBody tbody td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

/* 3. Business Location Column: keep ample padding & space ("Business location bad diye") */
#product_table th.col-product-location,
#product_table td.col-product-location,
.dataTables_scrollHead table#product_table th.col-product-location,
.dataTables_scrollBody table#product_table td.col-product-location,
#product_table_wrapper .dataTables_scrollHead th.col-product-location,
#product_table_wrapper .dataTables_scrollBody td.col-product-location {
    padding-left: 10px !important;
    padding-right: 10px !important;
    min-width: 125px !important;
    text-align: left !important;
}

/* 4. Unit Purchase Price: ensure it NEVER breaks into 3 lines (max 2 lines) */
#product_table th.col-purchase-price,
#product_table td.col-purchase-price,
.dataTables_scrollHead table#product_table th.col-purchase-price,
.dataTables_scrollBody table#product_table td.col-purchase-price,
#product_table_wrapper .dataTables_scrollHead th.col-purchase-price,
#product_table_wrapper .dataTables_scrollBody td.col-purchase-price {
    min-width: 100px !important;
    width: 105px !important;
    text-align: center !important;
}

/* Checkbox column compact */
#product_table th:first-child,
#product_table td:first-child,
.dataTables_scrollHead table#product_table th:first-child,
.dataTables_scrollBody table#product_table td:first-child {
    width: 32px !important;
    max-width: 36px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center !important;
}

/* 5. Action Column: Compact space */
#product_table th.col-action,
#product_table td.col-action,
.dataTables_scrollHead table#product_table th.col-action,
.dataTables_scrollBody table#product_table td.col-action,
#product_table_wrapper .dataTables_scrollHead th.col-action,
#product_table_wrapper .dataTables_scrollBody td.col-action {
    width: 65px !important;
    min-width: 60px !important;
    max-width: 72px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center !important;
}

#product_table td.col-action .btn-group,
#product_table td.col-action button.dropdown-toggle {
    margin: 0 !important;
    padding: 2px 5px !important;
    font-size: 11px !important;
}

/* 6. Current Stock (Box Pcs) Column: 2 lines & Compact space */
#product_table th.col-stock-box-pcs,
#product_table td.col-stock-box-pcs,
.dataTables_scrollHead table#product_table th.col-stock-box-pcs,
.dataTables_scrollBody table#product_table td.col-stock-box-pcs,
#product_table_wrapper .dataTables_scrollHead th.col-stock-box-pcs,
#product_table_wrapper .dataTables_scrollBody td.col-stock-box-pcs {
    width: 82px !important;
    min-width: 78px !important;
    max-width: 90px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center !important;
    line-height: 1.15 !important;
}

/* 4. Minimum Padding for Inputs / Selects inside Tables (Add & Report Screens) */
#pos_table tbody td input.form-control,
#pos_table tbody td select.form-control,
#purchase_entry_table tbody td input.form-control,
#purchase_entry_table tbody td select.form-control,
#stock_adjustment_product_table tbody td input.form-control,
#stock_adjustment_product_table tbody td select.form-control,
.table tbody td input.form-control,
.table tbody td select.form-control {
    height: 28px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    border-radius: 4px !important;
    margin: 0 !important;
}

/* Quantity column in POS/Sell tables: ample space to prevent overlapping onto Unit Price */
#pos_table th.pos_qty_th,
#pos_table th:nth-child(3) {
    min-width: 175px !important;
    width: 175px !important;
}

#pos_table td:nth-child(3),
#pos_table .pos_qty_wrapper {
    white-space: nowrap !important;
}

#pos_table .pos_qty_wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#pos_table .input-group.input-number,
.table td .input-group.input-number {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    height: 30px !important;
    margin: 0 !important;
}

#pos_table .input-group.input-number .form-control.pos_quantity {
    width: 49px !important;
    min-width: 40px !important;
    height: 30px !important;
    line-height: 28px !important;
    padding: 2px 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
}

#pos_table .input-group.input-number .btn {
    height: 30px !important;
    width: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    margin: 0 !important;
    border: 1px solid #CBD5E1 !important;
}

#pos_table .sub_unit {
    width: 58px !important;
    height: 30px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px !important;
    background-color: #FFFFFF !important;
    display: inline-block !important;
}

#pos_table .base_unit_name {
    display: inline-block !important;
    padding: 4px 8px !important;
    background: #E2E8F0 !important;
    color: #334155 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    border: 1px solid #CBD5E1 !important;
    line-height: 1.2 !important;
}

#pos_table .box_pcs_text {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #DC2626 !important;
    margin-top: 3px !important;
    display: block !important;
    clear: both !important;
    white-space: normal !important;
}

/* Unit Price column in POS/Sell tables */
#pos_table th:nth-child(4),
#pos_table td:nth-child(4) {
    min-width: 120px !important;
}

/* Quantity increment/decrement buttons & addons inside tables */
#pos_table tbody td .input-group:not(.input-number),
#purchase_entry_table tbody td .input-group {
    margin: 0 !important;
}

#pos_table tbody td .input-group-addon,
#pos_table tbody td .input-group-btn .btn,
#purchase_entry_table tbody td .input-group-addon,
#purchase_entry_table tbody td .input-group-btn .btn,
.table tbody td .input-group-addon,
.table tbody td .input-group-btn .btn {
    padding: 1px 6px !important;
    height: 28px !important;
    line-height: 24px !important;
    font-size: 12px !important;
}

/* Red Delete Action in Body Rows (Matching Mockup) */
#pos_table tbody td i.fa-times,
#pos_table tbody td .pos_remove_row,
#purchase_entry_table tbody td i.fa-times,
#purchase_entry_table tbody td i.fa-trash,
#purchase_entry_table tbody td .remove_purchase_entry_row,
.table tbody td i.text-danger,
.table tbody td .fa-times.text-danger {
    color: #EF4444 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease;
}

#pos_table tbody td .pos_remove_row:hover,
#purchase_entry_table tbody td .remove_purchase_entry_row:hover {
    transform: scale(1.2);
}

/* 5. Compact Box and Panel Padding across Add and Report Pages */
.box,
.card,
.panel {
    margin-bottom: 12px !important;
    border-radius: 10px !important;
}

.box-header {
    padding: 6px 14px !important;
}

.box-header .box-title {
    font-size: 14.5px !important;
}

.box-body {
    padding: 10px 14px !important;
}

.box-body .form-group {
    margin-bottom: 8px !important;
}

.box-footer {
    padding: 8px 14px !important;
}

/* Breadcrumbs with Brand Color */
.breadcrumb > li > a {
    color: var(--sarker-blue) !important;
    font-weight: 600;
}

.breadcrumb > li > a:hover {
    color: var(--sarker-blue-dark) !important;
    text-decoration: underline;
}

/* =========================================================
   SIDEBAR BRAND STYLING (Matching Sarker Logo Navy & Emerald)
   ========================================================= */
aside.side-bar,
.main-sidebar,
.side-bar {
    background: #003399 !important;
    background-color: #003399 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 2px 0 16px rgba(0, 51, 153, 0.3) !important;
}

.sarker-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    background: #ffffff;
    margin: 12px 12px 16px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.sarker-sidebar-brand img {
    height: 52px;
    max-height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Sidebar menu links */
aside.side-bar .sidebar-menu > li > a,
.sidebar-menu > li > a {
    color: #CBD5E1 !important;
    font-weight: 500;
    font-size: 13.5px;
    padding: 10px 14px !important;
    margin: 3px 10px;
    border-radius: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

aside.side-bar .sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > a {
    color: #FFFFFF !important;
    background: #00287a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

aside.side-bar .sidebar-menu > li.active > a,
aside.side-bar .sidebar-menu > li.active:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.active:hover > a {
    background: linear-gradient(135deg, #001f5c 0%, #00143d 100%) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    border-left: 3px solid var(--sarker-green) !important;
}

aside.side-bar .sidebar-menu > li > a > i,
.sidebar-menu > li > a > i {
    font-size: 16px;
    margin-right: 10px;
    opacity: 0.9;
}

/* Submenu / Treeview dropdown styling */
aside.side-bar .sidebar-menu .treeview-menu,
.sidebar-menu .treeview-menu {
    background: #002266 !important;
    padding: 4px 0 6px 0;
    margin: 2px 10px 4px 10px;
    border-radius: 8px;
    border-left: 2px solid rgba(255, 255, 255, 0.3);
}

aside.side-bar .sidebar-menu .treeview-menu > li > a,
.sidebar-menu .treeview-menu > li > a {
    color: #CBD5E1 !important;
    font-size: 13px;
    padding: 7px 12px 7px 18px !important;
    transition: all 0.18s ease;
}

aside.side-bar .sidebar-menu .treeview-menu > li:hover > a,
aside.side-bar .sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li:hover > a,
.sidebar-menu .treeview-menu > li.active > a {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.15) !important;
    font-weight: 600;
}

/* Sidebar bottom inspiration badge */
.sidebar-inspire-badge {
    margin-top: auto;
    padding: 12px 14px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(27, 68, 156, 0.25);
    border-radius: 12px;
    text-align: center;
}

.sidebar-inspire-badge p {
    color: #CBD5E1;
    font-size: 11.5px;
    margin: 0;
    font-weight: 500;
}

/* ====================================================================
   BRANDED TOP NAVBAR (Matching Brand Deep Navy & Emerald Green)
   ==================================================================== */
.sarker-top-navbar {
    background: #003399 !important;
    border-bottom: 2px solid #10B981 !important;
    padding: 10px 24px !important;
    box-shadow: 0 4px 20px rgba(0, 51, 153, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    z-index: 1050 !important;
}

/* Toggle / Hamburger Buttons */
.sarker-top-navbar .side-bar-collapse,
.sarker-top-navbar .small-view-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.sarker-top-navbar .side-bar-collapse:hover,
.sarker-top-navbar .small-view-button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #10B981 !important;
    border-color: #10B981 !important;
    transform: scale(1.05) !important;
}

.sarker-top-navbar details {
    position: relative;
    z-index: 1051 !important;
}

.sarker-top-navbar details ul,
.sarker-user-dropdown-menu {
    position: absolute !important;
    z-index: 99999 !important;
}

/* Modern Brand Dark Glass Search Bar */
.sarker-search-bar {
    position: relative;
    width: 380px;
    max-width: 100%;
}

.sarker-search-bar input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 30px !important;
    padding: 8px 52px 8px 38px !important;
    font-size: 13px !important;
    color: #FFFFFF !important;
    width: 100% !important;
    outline: none !important;
    transition: all 0.22s ease !important;
}

.sarker-search-bar input::placeholder {
    color: #94A3B8 !important;
}

.sarker-search-bar input:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

.sarker-search-bar .search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #10B981;
    font-size: 14px;
}

.sarker-search-bar .kbd-shortcut {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    color: #CBD5E1;
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Brand Date Widget */
.sarker-date-widget {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-size: 12px;
    font-weight: 500;
    color: #F1F5F9 !important;
}

.sarker-date-widget i {
    color: #10B981 !important;
}

/* Sleek Compact Navbar Payment Buttons */
.sarker-nav-pay-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.sarker-nav-pay-btn.btn-supplier-pay {
    background: rgba(37, 99, 235, 0.18) !important;
    border: 1px solid rgba(96, 165, 250, 0.35) !important;
    color: #F1F5F9 !important;
}

.sarker-nav-pay-btn.btn-supplier-pay:hover {
    background: rgba(37, 99, 235, 0.35) !important;
    border-color: #60A5FA !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
}

.sarker-nav-pay-btn.btn-customer-pay {
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(52, 211, 153, 0.35) !important;
    color: #F1F5F9 !important;
}

.sarker-nav-pay-btn.btn-customer-pay:hover {
    background: rgba(16, 185, 129, 0.35) !important;
    border-color: #34D399 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.sarker-top-navbar #btnCalculator {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #F8FAFC !important;
    transition: all 0.2s ease !important;
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}

.sarker-top-navbar #btnCalculator:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #10B981 !important;
    border-color: #10B981 !important;
    transform: translateY(-1px) !important;
}

/* Notification icon in header */
.sarker-top-navbar .notifications-menu a.dropdown-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.sarker-top-navbar .notifications-menu a.dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #10B981 !important;
    color: #10B981 !important;
}

/* User Profile Badge in Header */
.sarker-user-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

.sarker-user-pill:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: #10B981 !important;
}

.sarker-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1.5px solid #10B981 !important;
}

.sarker-user-avatar img.sarker-user-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
}

.sarker-user-meta {
    line-height: 1.2;
    text-align: left;
}

.sarker-user-meta .name {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF !important;
}

.sarker-user-meta .role {
    font-size: 11px;
    color: #10B981 !important;
    font-weight: 500;
}

.sarker-user-pill i.fa-chevron-down {
    color: #94A3B8 !important;
}

/* ====================================================================
   DASHBOARD CARDS & COMPONENTS (Matching Image 1 Mockup)
   ==================================================================== */

.sarker-dashboard-wrap {
    padding: 20px 24px 40px 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* Hero Greeting Banner - 3-Part Smart Professional Layout */
.sarker-hero-banner {
    position: relative;
    background: linear-gradient(135deg, #EFF6FF 0%, #F0FDF4 50%, #F8FAFC 100%);
    border: 1px solid #D6E4F0;
    border-radius: 16px;
    padding: 14px 20px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: minmax(310px, 360px) 1fr minmax(230px, 280px);
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 16px -2px rgba(15, 42, 102, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    min-height: 110px;
}

/* Part 1: Left - User Info & Filters */
.sarker-hero-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    z-index: 2;
}

.sarker-hero-user-info .sarker-hero-title {
    margin: 0 0 2px 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sarker-hero-user-info .sarker-hero-subtitle {
    margin: 0;
    font-size: 12.5px;
    color: #64748B;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sarker-hero-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.sarker-hero-filter-col {
    flex: 1;
    min-width: 0;
}

.sarker-hero-location-col .select2-container {
    width: 100% !important;
}

.sarker-hero-location-col .select2-container .select2-selection--single {
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.sarker-hero-location-col .select2-container .select2-selection--single .select2-selection__rendered {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 32px !important;
    padding-left: 10px !important;
}

.sarker-hero-date-col #dashboard_date_filter {
    height: 34px !important;
    padding: 0 12px !important;
    background: #FFFFFF !important;
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.sarker-hero-date-col #dashboard_date_filter:hover {
    border-color: #94A3B8 !important;
    background: #F8FAFC !important;
}

/* Part 2: Center - Custom Banner / Logo / Illustration */
.sarker-hero-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    padding: 0 12px;
    overflow: hidden;
    z-index: 1;
}

.sarker-hero-custom-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 88px;
    width: 100%;
}

.sarker-hero-custom-img {
    max-height: 85px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
    transition: transform 0.25s ease;
}

.sarker-hero-custom-img:hover {
    transform: scale(1.03);
}

.sarker-hero-default-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 85px;
    opacity: 0.85;
}

/* Part 3: Right - Compact Stylish Message / Slogan Card */
.sarker-hero-right {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    z-index: 2;
}

.sarker-hero-message-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 9px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 270px;
    text-align: right;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sarker-hero-message-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.12);
}

.sarker-hero-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-end;
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.sarker-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.3);
    display: inline-block;
}

.sarker-hero-message-text {
    font-size: 13px;
    font-weight: 800;
    color: #0F2A66;
    line-height: 1.35;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sarker-hero-branding-sub {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #059669;
}

/* Responsive adjustments */
@media (max-width: 1199px) {
    .sarker-hero-banner {
        grid-template-columns: 1fr 1fr;
    }
    .sarker-hero-center {
        display: none;
    }
}

@media (max-width: 767px) {
    .sarker-hero-banner {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        gap: 12px;
    }
    .sarker-hero-center {
        display: flex;
        order: 2;
    }
    .sarker-hero-right {
        order: 3;
        justify-content: stretch;
    }
    .sarker-hero-message-card {
        max-width: 100%;
        text-align: left;
    }
    .sarker-hero-badge-pill,
    .sarker-hero-branding-sub {
        align-self: flex-start;
        justify-content: flex-start;
    }
    .sarker-hero-filter-row {
        flex-direction: column;
    }
}

/* Primary Metric Cards Grid - 4 cards per row */
.sarker-metrics-grid-6 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
    width: 100%;
}

@media (max-width: 1024px) {
    .sarker-metrics-grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .sarker-metrics-grid-6 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.sarker-metric-card-sm {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 16px 15px 14px 15px;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 146px;
    border: 1px solid #E2E8F0;
    border-top: 3.5px solid #CBD5E1;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none !important;
}

.sarker-metric-card-sm:hover {
    transform: translateY(-4px);
}

.sarker-metric-card-sm .card-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sarker-metric-card-sm .card-header-top > div:first-child,
.sarker-metric-card-sm .card-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex: 1;
    min-width: 0;
}

.sarker-metric-card-sm .card-header-top > div:first-child .card-title,
.sarker-metric-card-sm .card-header-left .card-title {
    margin: 0 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3D Icon and 3D Badge Styling */
.sarker-3d-box-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
    transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.sarker-metric-card-sm:hover .sarker-3d-box-icon {
    transform: scale(1.18) translateY(-2px) rotate(3deg);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.18));
}

.sarker-icon-box-3d {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.sarker-metric-card-sm:hover .sarker-icon-box-3d {
    transform: scale(1.12) translateY(-2px);
}

.sarker-metric-card-sm .card-title {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--sarker-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
}

.sarker-metric-card-sm .card-subtitle {
    font-size: 10px;
    color: #64748B;
    font-weight: 600;
    line-height: 1.1;
    display: block;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

.sarker-metric-card-sm .card-value {
    font-size: 20px;
    font-weight: 800;
    margin: 10px 0 12px 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.4px;
    color: #0F172A;
    font-family: var(--app-font-family, 'Hind Siliguri', -apple-system, sans-serif);
}

.sarker-metric-card-sm .card-value .currency-symbol {
    font-size: 15px;
    font-weight: 700;
    margin-right: 2px;
    opacity: 0.85;
}

.sarker-metric-card-sm .card-trend {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, 0.07);
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
}

.sarker-metric-card-sm .trend-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
}

.sarker-metric-card-sm .trend-link {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: transform 0.2s;
}

.sarker-metric-card-sm:hover .trend-link {
    transform: translateX(3px);
}

.sarker-chevron-arrow {
    font-size: 11px;
    opacity: 0.35;
    transition: all 0.2s;
}

.sarker-metric-card-sm:hover .sarker-chevron-arrow {
    opacity: 0.85;
    transform: translateX(2px);
}

/* ====================================================================
   STANDARD THEMES WITH REFINED CORPORATE COLOR PALETTES
   ==================================================================== */

/* 1. Total Sales (Emerald Green) */
.sarker-theme-sales {
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 60%);
    border-color: #BBF7D0;
    border-top: 3.5px solid #10B981;
}
.sarker-theme-sales:hover {
    border-color: #86EFAC;
    border-top-color: #059669;
    box-shadow: 0 12px 24px -4px rgba(16, 185, 129, 0.16), 0 4px 6px -2px rgba(16, 185, 129, 0.04);
}
.sarker-theme-sales .card-title {
    color: #065F46;
}
.sarker-theme-sales .card-subtitle {
    color: #059669;
}
.sarker-theme-sales .currency-symbol {
    color: #10B981;
}
.sarker-theme-sales .trend-badge {
    background: #DCFCE7;
    color: #15803D;
}
.sarker-theme-sales .trend-link {
    color: #059669;
}
.sarker-theme-sales .sarker-icon-box-3d {
    background: linear-gradient(135deg, #DCFCE7 0%, #BBF7D0 100%);
    color: #10B981;
    border: 1px solid #86EFAC;
}

/* 2. Total Purchase (Sky Blue) */
.sarker-theme-purchase {
    background: linear-gradient(180deg, #F0F9FF 0%, #FFFFFF 60%);
    border-color: #BAE6FD;
    border-top: 3.5px solid #0284C7;
}
.sarker-theme-purchase:hover {
    border-color: #7DD3FC;
    border-top-color: #0369A1;
    box-shadow: 0 12px 24px -4px rgba(2, 132, 199, 0.16), 0 4px 6px -2px rgba(2, 132, 199, 0.04);
}
.sarker-theme-purchase .card-title {
    color: #075985;
}
.sarker-theme-purchase .card-subtitle {
    color: #0284C7;
}
.sarker-theme-purchase .currency-symbol {
    color: #0284C7;
}
.sarker-theme-purchase .sarker-icon-box-3d {
    background: linear-gradient(135deg, #E0F2FE 0%, #BAE6FD 100%);
    color: #0284C7;
    border: 1px solid #7DD3FC;
}
.sarker-theme-purchase .trend-badge {
    background: #E0F2FE;
    color: #0369A1;
}
.sarker-theme-purchase .trend-link {
    color: #0284C7;
}

/* 3. Sell Due (Rose / Red) */
.sarker-theme-selldue {
    background: linear-gradient(180deg, #FFF1F2 0%, #FFFFFF 60%);
    border-color: #FECDD3;
    border-top: 3.5px solid #F43F5E;
}
.sarker-theme-selldue:hover {
    border-color: #FDA4AF;
    border-top-color: #E11D48;
    box-shadow: 0 12px 24px -4px rgba(244, 63, 94, 0.16), 0 4px 6px -2px rgba(244, 63, 94, 0.04);
}
.sarker-theme-selldue .card-title {
    color: #9F1239;
}
.sarker-theme-selldue .card-subtitle {
    color: #E11D48;
}
.sarker-theme-selldue .currency-symbol {
    color: #E11D48;
}
.sarker-theme-selldue .sarker-icon-box-3d {
    background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%);
    color: #E11D48;
    border: 1px solid #FDA4AF;
}
.sarker-theme-selldue .trend-badge {
    background: #FFE4E6;
    color: #BE123C;
}
.sarker-theme-selldue .trend-link {
    color: #E11D48;
}

/* 4. Purchase Due (Amber / Warm Gold) */
.sarker-theme-purchasedue {
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 60%);
    border-color: #FDE68A;
    border-top: 3.5px solid #F59E0B;
}
.sarker-theme-purchasedue:hover {
    border-color: #FCD34D;
    border-top-color: #D97706;
    box-shadow: 0 12px 24px -4px rgba(245, 158, 11, 0.16), 0 4px 6px -2px rgba(245, 158, 11, 0.04);
}
.sarker-theme-purchasedue .card-title {
    color: #92400E;
}
.sarker-theme-purchasedue .card-subtitle {
    color: #D97706;
}
.sarker-theme-purchasedue .currency-symbol {
    color: #D97706;
}
.sarker-theme-purchasedue .sarker-icon-box-3d {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
    border: 1px solid #FCD34D;
}
.sarker-theme-purchasedue .trend-badge {
    background: #FEF3C7;
    color: #B45309;
}
.sarker-theme-purchasedue .trend-link {
    color: #D97706;
}

/* 5. Profit (Violet / Purple) */
.sarker-theme-profit {
    background: linear-gradient(180deg, #FAF5FF 0%, #FFFFFF 60%);
    border-color: #DDD6FE;
    border-top: 3.5px solid #8B5CF6;
}
.sarker-theme-profit:hover {
    border-color: #C4B5FD;
    border-top-color: #7C3AED;
    box-shadow: 0 12px 24px -4px rgba(139, 92, 246, 0.16), 0 4px 6px -2px rgba(139, 92, 246, 0.04);
}
.sarker-theme-profit .card-title {
    color: #5B21B6;
}
.sarker-theme-profit .card-subtitle {
    color: #7C3AED;
}
.sarker-theme-profit .currency-symbol {
    color: #7C3AED;
}
.sarker-theme-profit .sarker-icon-box-3d {
    background: linear-gradient(135deg, #EDE9FE 0%, #DDD6FE 100%);
    color: #7C3AED;
    border: 1px solid #C4B5FD;
}
.sarker-theme-profit .trend-badge {
    background: #EDE9FE;
    color: #6D28D9;
}
.sarker-theme-profit .trend-link {
    color: #7C3AED;
}

/* 6. Closing Stock (Teal / Cyan) */
.sarker-theme-stock {
    background: linear-gradient(180deg, #F0FDFA 0%, #FFFFFF 60%);
    border-color: #99F6E4;
    border-top: 3.5px solid #14B8A6;
}
.sarker-theme-stock:hover {
    border-color: #5EEAD4;
    border-top-color: #0D9488;
    box-shadow: 0 12px 24px -4px rgba(20, 184, 166, 0.16), 0 4px 6px -2px rgba(20, 184, 166, 0.04);
}
.sarker-theme-stock .card-title {
    color: #115E59;
}
.sarker-theme-stock .card-subtitle {
    color: #0D9488;
}
.sarker-theme-stock .currency-symbol {
    color: #0D9488;
}
.sarker-theme-stock .sarker-icon-box-3d {
    background: linear-gradient(135deg, #CCFBF1 0%, #99F6E4 100%);
    color: #0D9488;
    border: 1px solid #5EEAD4;
}
.sarker-theme-stock .trend-badge {
    background: #CCFBF1;
    color: #0F766E;
}
.sarker-theme-stock .trend-link {
    color: #0D9488;
}

/* 5. Gross Profit (Emerald / Forest Green) */
.sarker-theme-grossprofit {
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 60%);
    border-color: #A7F3D0;
    border-top: 3.5px solid #059669;
}
.sarker-theme-grossprofit:hover {
    border-color: #6EE7B7;
    border-top-color: #047857;
    box-shadow: 0 12px 24px -4px rgba(5, 150, 105, 0.16), 0 4px 6px -2px rgba(5, 150, 105, 0.04);
}
.sarker-theme-grossprofit .card-title {
    color: #065F46;
}
.sarker-theme-grossprofit .card-subtitle {
    color: #059669;
}
.sarker-theme-grossprofit .currency-symbol {
    color: #059669;
}
.sarker-theme-grossprofit .sarker-icon-box-3d {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #059669;
    border: 1px solid #6EE7B7;
}
.sarker-theme-grossprofit .trend-badge {
    background: #D1FAE5;
    color: #047857;
}
.sarker-theme-grossprofit .trend-link {
    color: #059669;
}

/* 7. Current Cash (Indigo / Blue-Violet) */
.sarker-theme-cash {
    background: linear-gradient(180deg, #EEF2FF 0%, #FFFFFF 60%);
    border-color: #C7D2FE;
    border-top: 3.5px solid #4F46E5;
}
.sarker-theme-cash:hover {
    border-color: #A5B4FC;
    border-top-color: #4338CA;
    box-shadow: 0 12px 24px -4px rgba(79, 70, 229, 0.16), 0 4px 6px -2px rgba(79, 70, 229, 0.04);
}
.sarker-theme-cash .card-title {
    color: #3730A3;
}
.sarker-theme-cash .card-subtitle {
    color: #4F46E5;
}
.sarker-theme-cash .currency-symbol {
    color: #4F46E5;
}
.sarker-theme-cash .sarker-icon-box-3d {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #4F46E5;
    border: 1px solid #A5B4FC;
}
.sarker-theme-cash .trend-badge {
    background: #E0E7FF;
    color: #3730A3;
}
.sarker-theme-cash .trend-link {
    color: #4F46E5;
}

/* Sparklines, Value Wrap & Arrow Animation */
.card-value-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0 6px 0;
}
.card-value-wrap .card-value {
    margin: 0 !important;
}
.card-mini-chart {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sparkline-svg {
    width: 62px;
    height: 26px;
    overflow: visible;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}
.sarker-metric-card-sm:hover .sparkline-svg {
    transform: scale(1.12) translateX(2px);
}

.sarker-sales-arrow-img,
.sarker-box-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.sarker-box-truck-img {
    mix-blend-mode: multiply;
}

.sarker-sales-arrow-img {
    animation: sarkerArrowBounce 2.5s ease-in-out infinite;
}

@keyframes sarkerArrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.sarker-metric-card-sm:hover .sarker-sales-arrow-img,
.sarker-metric-card-sm:hover .sarker-box-icon-img {
    transform: translateY(-4px) scale(1.18);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.14));
}

.sarker-mini-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.08));
}

.sarker-mini-card:hover .sarker-mini-icon-img {
    transform: scale(1.15) translateY(-2px);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

/* Secondary Compact Metrics Grid (3 per row) */
.sarker-sub-metrics-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
    width: 100%;
}

/* Secondary Compact Metrics Grid (4 per row) */
.sarker-sub-metrics-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
    width: 100%;
}

@media (max-width: 1200px) {
    .sarker-sub-metrics-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .sarker-sub-metrics-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 576px) {
    .sarker-sub-metrics-grid-3,
    .sarker-sub-metrics-grid-4 {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

.sarker-mini-card {
    background: #FFFFFF;
    border: 1px solid var(--sarker-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 72px;
}

.sarker-mini-card:hover {
    box-shadow: 0 6px 14px -3px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
    border-color: #CBD5E1;
}

.sarker-mini-card .mini-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.sarker-mini-card .mini-content {
    flex: 1;
    min-width: 0;
}

.sarker-mini-card .mini-label {
    font-size: 11px;
    color: var(--sarker-text-muted);
    margin: 0 0 2px 0;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
}

.sarker-mini-card .mini-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--sarker-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sarker-mini-card .mini-badge {
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
    display: inline-block;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
}

.sarker-mini-card .mini-decor-icon {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 26px;
    opacity: 0.12;
    pointer-events: none;
}

/* Primary Metric Summary Cards */
.sarker-metric-card {
    border-radius: var(--sarker-radius);
    padding: 20px;
    position: relative;
    transition: all 0.25s ease;
    box-shadow: var(--sarker-shadow-sm);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 145px;
    margin-bottom: 20px;
}

.sarker-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sarker-shadow-hover);
}

/* Card 1: Today's Sale (Green Gradient) */
.sarker-card-green {
    background: linear-gradient(135deg, #059669 0%, #10B981 100%);
    color: #FFFFFF;
}

.sarker-card-green .card-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sarker-card-green .card-header-top .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sarker-card-green .card-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.sarker-card-green .card-value {
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 12px 0 8px 0;
    letter-spacing: -0.5px;
}

.sarker-card-green .card-trend {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Card 2: Today's Profit (Light Blue) */
.sarker-card-blue {
    background: #FFFFFF;
    border: 1px solid #BAE6FD;
}

.sarker-card-blue .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #E0F2FE;
    color: #0284C7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sarker-card-blue .card-title {
    font-size: 14px;
    font-weight: 600;
    color: #0369A1;
    margin: 0;
}

.sarker-card-blue .card-value {
    font-size: 26px;
    font-weight: 700;
    color: #0C4A6E;
    margin: 12px 0 8px 0;
}

.sarker-card-blue .card-trend {
    font-size: 12px;
    color: #0284C7;
    font-weight: 500;
}

/* Card 3: Cash in Hand (Soft Purple) */
.sarker-card-purple {
    background: #FFFFFF;
    border: 1px solid #E9D5FF;
}

.sarker-card-purple .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #F3E8FF;
    color: #7E22CE;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sarker-card-purple .card-title {
    font-size: 14px;
    font-weight: 600;
    color: #6B21A8;
    margin: 0;
}

.sarker-card-purple .card-value {
    font-size: 26px;
    font-weight: 700;
    color: #581C87;
    margin: 12px 0 8px 0;
}

.sarker-card-purple .card-trend {
    font-size: 12px;
    color: #7E22CE;
    font-weight: 500;
}

/* Card 4: Total Due (Soft Rose) */
.sarker-card-rose {
    background: #FFFFFF;
    border: 1px solid #FECDD3;
}

.sarker-card-rose .icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #FFE4E6;
    color: #E11D48;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sarker-card-rose .card-title {
    font-size: 14px;
    font-weight: 600;
    color: #BE123C;
    margin: 0;
}

.sarker-card-rose .card-value {
    font-size: 26px;
    font-weight: 700;
    color: #881337;
    margin: 12px 0 8px 0;
}

.sarker-card-rose .card-trend {
    font-size: 12px;
    color: #E11D48;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Secondary Compact Metrics Row */
.sarker-mini-card {
    background: #FFFFFF;
    border: 1px solid var(--sarker-border);
    border-radius: var(--sarker-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--sarker-shadow-sm);
    transition: all 0.2s;
    margin-bottom: 20px;
}

.sarker-mini-card:hover {
    box-shadow: var(--sarker-shadow);
}

.sarker-mini-card .mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sarker-mini-card .mini-content {
    flex: 1;
}

.sarker-mini-card .mini-label {
    font-size: 12px;
    color: var(--sarker-text-muted);
    margin: 0;
}

.sarker-mini-card .mini-val {
    font-size: 17px;
    font-weight: 700;
    color: var(--sarker-text-primary);
    margin: 2px 0;
}

.sarker-mini-card .mini-badge {
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Analytics Panels (Charts & Info Boxes) */
.sarker-panel {
    background: #FFFFFF;
    border: 1px solid var(--sarker-border);
    border-radius: var(--sarker-radius-lg);
    padding: 22px;
    box-shadow: var(--sarker-shadow-sm);
    margin-bottom: 24px;
}

.sarker-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F1F5F9;
}

.sarker-panel-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--sarker-heading) !important;
    margin: 0;
}

.sarker-panel-header a {
    font-size: 12px;
    color: var(--sarker-blue);
    font-weight: 600;
    text-decoration: none;
}

.sarker-panel-header a:hover {
    text-decoration: underline;
}

/* Quick Actions Grid */
.sarker-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
}

.sarker-action-btn {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--sarker-radius);
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: var(--sarker-shadow-sm);
}

.sarker-action-btn:hover {
    border-color: var(--sarker-blue);
    transform: translateY(-2px);
    box-shadow: var(--sarker-shadow);
    text-decoration: none;
}

.sarker-action-btn .btn-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.sarker-action-btn:hover .btn-icon-box {
    transform: scale(1.08);
}

.sarker-action-btn span {
    font-size: 13px;
    font-weight: 600;
    color: var(--sarker-text-primary);
}

/* Stock Alert Widget */
.sarker-alert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sarker-alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--sarker-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

.sarker-alert-danger {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FEE2E2;
}

.sarker-alert-warning {
    background: #FFFBEB;
    color: #92400E;
    border: 1px solid #FEF3C7;
}

.sarker-alert-info {
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #DCFCE7;
}

/* Recent Activities Widget */
.sarker-activity-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sarker-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sarker-activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.sarker-activity-content {
    flex: 1;
}

.sarker-activity-content .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sarker-text-primary);
    margin: 0;
}

.sarker-activity-content .amount {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
}

.sarker-activity-content .subtitle {
    font-size: 11px;
    color: var(--sarker-text-muted);
    margin: 0;
}

.sarker-activity-time {
    font-size: 11px;
    color: var(--sarker-text-muted);
}

/* Ribbon for Slogan */
.sarker-ribbon-flag {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-top: 4px;
}

.sarker-ribbon-flag svg {
    height: 10px;
    width: 140px;
}

/* Card Chevron Indicator */
.sarker-chevron {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    transition: transform 0.2s;
}

.sarker-card-blue .sarker-chevron {
    color: #94A3B8;
}

.sarker-card-purple .sarker-chevron {
    color: #A855F7;
}

.sarker-card-rose .sarker-chevron {
    color: #FB7185;
}

.sarker-metric-card:hover .sarker-chevron {
    transform: translateX(4px);
}

/* Card SVG Wave Charts */
.sarker-wave-chart {
    height: 32px;
    width: 100px;
    margin-left: auto;
}

/* Mini Cards Side Decorative Icon */
.sarker-mini-card .mini-decor-icon {
    font-size: 26px;
    opacity: 0.15;
    margin-left: auto;
}

/* Donut Chart Container */
.sarker-donut-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.sarker-donut-circle {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.sarker-donut-circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.sarker-donut-center-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.sarker-donut-center-text .amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--sarker-text-primary);
}

.sarker-donut-center-text .label {
    font-size: 11px;
    color: var(--sarker-text-muted);
}

.sarker-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.sarker-donut-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
}

.sarker-donut-legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

/* App Promo Card in Dashboard */
.sarker-promo-card {
    background: linear-gradient(135deg, #002B36 0%, #064E5E 100%);
    border-radius: var(--sarker-radius);
    padding: 18px 20px;
    color: #FFFFFF !important;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 4px 14px rgba(0, 43, 54, 0.2);
}

.sarker-promo-card h4 {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    margin: 0 0 4px 0;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.sarker-promo-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    margin: 0 0 6px 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sarker-promo-card p {
    font-size: 12.5px;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 0.95;
    margin: 0 0 14px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sarker-promo-card .promo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(45, 212, 191, 0.2);
    border: 1px solid rgba(45, 212, 191, 0.4);
    color: #2DD4BF;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s;
}

.sarker-promo-card .promo-btn:hover {
    background: #2DD4BF;
    color: #002B36;
}

.sarker-promo-card .promo-device {
    position: absolute;
    right: 12px;
    bottom: -10px;
    width: 76px;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3));
}

/* ====================================================================
   FULL-SYSTEM 3D MODERN & PROFESSIONAL DESIGN FRAMEWORK
   Adds rich tactile depth, glassmorphism, 3D shadows, and lighting
   ==================================================================== */

/* --- 1. 3D Tactile Interactive Buttons (.btn) --- */
.btn {
    border-radius: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active, .btn.active {
    transform: translateY(1.5px) !important;
}

/* Primary 3D Button (Sapphire / Royal Blue) */
.btn-primary {
    background: linear-gradient(180deg, #2563EB 0%, #1D4ED8 100%) !important;
    border-color: #1E40AF !important;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.35), 0 2px 4px -1px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
}
.btn-primary:hover {
    background: linear-gradient(180deg, #3B82F6 0%, #1D4ED8 100%) !important;
    box-shadow: 0 8px 16px -2px rgba(37, 99, 235, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.btn-primary:active {
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Success 3D Button (Emerald Green) */
.btn-success {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
    border-color: #047857 !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.35), 0 2px 4px -1px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
}
.btn-success:hover {
    background: linear-gradient(180deg, #34D399 0%, #059669 100%) !important;
    box-shadow: 0 8px 16px -2px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.btn-success:active {
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Danger 3D Button (Crimson Red) */
.btn-danger {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%) !important;
    border-color: #B91C1C !important;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.35), 0 2px 4px -1px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
}
.btn-danger:hover {
    background: linear-gradient(180deg, #F87171 0%, #DC2626 100%) !important;
    box-shadow: 0 8px 16px -2px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}
.btn-danger:active {
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Warning 3D Button (Warm Amber) */
.btn-warning {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
    border-color: #B45309 !important;
    box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.35), 0 2px 4px -1px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
}
.btn-warning:hover {
    background: linear-gradient(180deg, #FBBF24 0%, #D97706 100%) !important;
    box-shadow: 0 8px 16px -2px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Info 3D Button (Teal / Cyan) */
.btn-info {
    background: linear-gradient(180deg, #0EA5E9 0%, #0284C7 100%) !important;
    border-color: #0369A1 !important;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.35), 0 2px 4px -1px rgba(14, 165, 233, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
}
.btn-info:hover {
    background: linear-gradient(180deg, #38BDF8 0%, #0284C7 100%) !important;
    box-shadow: 0 8px 16px -2px rgba(14, 165, 233, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* Default / White 3D Button */
.btn-default {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.btn-default:hover {
    background: #FFFFFF !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
    box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.08), inset 0 1px 0 #FFFFFF !important;
}

/* --- 2. 3D Elevated Cards, Boxes & Panels (.box, .card) --- */
.box, .card, .panel, .sarker-panel {
    border-radius: 14px !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.03) !important;
    background: #FFFFFF !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.box:hover, .sarker-panel:hover {
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03) !important;
}

.box-header {
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 16px 20px !important;
    background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%) !important;
    border-radius: 14px 14px 0 0 !important;
}

.box-header .box-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    letter-spacing: -0.2px;
}

/* --- 3. 3D Interactive Form Inputs, Select2 & Unified Input Groups --- */
.form-control, 
input[type="text"]:not(.form-control), 
input[type="number"]:not(.form-control), 
input[type="email"]:not(.form-control), 
input[type="password"]:not(.form-control) {
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    padding: 7px 12px !important;
    color: #1E293B !important;
    font-size: 13px !important;
    height: 38px !important;
    box-shadow: inset 0 1.5px 2px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Standalone inputs have full rounded corners */
.form-control:not(.input-group *), 
select.form-control:not(.input-group *),
input[type="text"]:not(.input-group *),
input[type="number"]:not(.input-group *),
input[type="email"]:not(.input-group *),
input[type="password"]:not(.input-group *) {
    border-radius: 8px !important;
}

.form-control:focus, 
select.form-control:focus, 
input:focus {
    border-color: #10B981 !important;
    background: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18), inset 0 1px 1px rgba(0, 0, 0, 0.02) !important;
    outline: none !important;
    position: relative !important;
    z-index: 3 !important;
}

/* --- Seamless Unified Bootstrap Input Groups (Fix Broken Split Boxes) --- */
/* --- Seamless Unified Bootstrap Input Groups (Fix Broken Split Boxes) --- */
.input-group {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    position: relative !important;
}

.input-group > .input-group-addon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border: 1px solid #CBD5E1 !important;
    color: #64748B !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    height: 38px !important;
    min-height: 38px !important;
    white-space: nowrap !important;
    width: auto !important;
    flex-shrink: 0 !important;
    float: none !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-right: none !important;
}

.input-group > .form-control {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    height: 38px !important;
    margin-bottom: 0 !important;
    float: none !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 !important;
}

.input-group > .form-control:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group > .form-control:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Select2 inside .input-group: stretches full width seamlessly */
.input-group > .select2-container {
    flex: 1 1 auto !important;
    width: 1% !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    position: relative !important;
    float: none !important;
}

.input-group > .select2-container .selection {
    display: block !important;
    width: 100% !important;
    height: 38px !important;
}

.input-group > .select2-container .select2-selection--single {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0 !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
}

.input-group > .select2-container:first-child .select2-selection--single {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.input-group > .select2-container:last-child .select2-selection--single {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.input-group > .input-group-btn {
    display: flex !important;
    align-items: stretch !important;
    width: auto !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin-left: -1px !important;
}

.input-group > .input-group-btn > .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    margin: 0 !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: #FFFFFF !important;
}

/* Select2 Standard Single Selection (both inside and outside input-group) */
.select2-container--default .select2-selection--single {
    display: block !important;
    position: relative !important;
    height: 38px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1E293B !important;
    line-height: 36px !important;
    padding-left: 12px !important;
    padding-right: 32px !important;
    font-size: 13px !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 1px !important;
    right: 8px !important;
    width: 20px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #10B981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important;
    outline: none !important;
}

/* Small input-group variation */
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group.input-group-sm > .form-control,
.input-group.input-group-sm > .input-group-addon {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 8px !important;
    font-size: 12px !important;
}

/* --- Multi-Input Styling (Pay Term: label on top, input + dropdown in one unified row below) --- */
.multi-input {
    display: block !important;
    width: 100% !important;
    position: relative !important;
}

.multi-input::after {
    content: " " !important;
    display: table !important;
    clear: both !important;
}

.multi-input > label {
    display: inline-block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    font-size: 13px !important;
}

.multi-input > br {
    display: block !important;
    content: "" !important;
}

.multi-input > input.width-40,
.multi-input > .width-40 {
    width: 45% !important;
    float: left !important;
    height: 38px !important;
    border: 1px solid #CBD5E1 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.multi-input > select.width-60,
.multi-input > .width-60 {
    width: 55% !important;
    float: left !important;
    height: 38px !important;
    border: 1px solid #CBD5E1 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Clearfix rule to ensure full line breaks between rows */
.clearfix {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Styled Compact Customer & Supplier Address Box */
.customer-address-box,
#supplier_address_div:not(:empty) {
    margin-top: 6px;
    padding: 6px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #475569;
}
.customer-address-box strong,
#supplier_address_div strong {
    color: #1E293B;
}
#supplier_address_div:empty {
    display: none !important;
}


/* --- Global Ample Space for Date Columns and Date Inputs across all Sections --- */
table.dataTable th.transaction_date,
table.dataTable td.transaction_date,
#purchase_table th:nth-child(2),
#purchase_table td:nth-child(2),
#purchase_entry_table th:nth-child(2),
#purchase_entry_table td:nth-child(2),
#sell_return_table th:nth-child(2),
#sell_return_table td:nth-child(2),
#expense_table th:nth-child(2),
#expense_table td:nth-child(2),
#stock_adjustment_table th:nth-child(2),
#stock_adjustment_table td:nth-child(2),
.dataTables_scrollHead th:nth-child(2),
.dataTables_scrollBody td:nth-child(2) {
    min-width: 145px !important;
    width: 145px !important;
    white-space: nowrap !important;
}

#sell_list_filter_date_range,
#purchase_list_filter_date_range,
.paid_on,
input[name*="date_range"],
.date_range {
    min-width: 200px !important;
    white-space: nowrap !important;
}

/* --- 4. 3D Modern DataTables & Grids --- */
/* --- 4. 3D Modern DataTables & Grids --- */
.table, table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 8px;
}

/* Ensure table header text is ALWAYS pure white across all tables and DataTables */
.table thead th,
table.dataTable thead th,
.dataTables_scrollHead thead th,
.table thead th *,
table.dataTable thead th *,
.dataTables_scrollHead thead th * {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

.table tbody tr {
    transition: all 0.18s ease-in-out;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FAFCFE !important;
}

.table tbody tr:hover, table.dataTable tbody tr:hover {
    background-color: #F0FDF4 !important;
    box-shadow: inset 0 1px 0 #BBF7D0, inset 0 -1px 0 #BBF7D0;
}

.table tbody td {
    padding: 8px 10px !important;
    vertical-align: middle !important;
    border-top: 1px solid #F1F5F9 !important;
    color: #334155 !important;
    font-size: 13px !important;
}

/* DataTables Pagination 3D Pills */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    color: #334155 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    font-weight: 600 !important;
    margin: 0 3px !important;
    transition: all 0.18s ease !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #10B981 !important;
    border-color: #059669 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.35) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
    border-color: #047857 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.35) !important;
}

/* --- 5. 3D Floating Modals & Dialogs --- */
.modal-content {
    border-radius: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 18px 24px !important;
}

.modal-header .modal-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}

.modal-footer {
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    padding: 16px 24px !important;
}

/* --- 6. 3D Capsule Badges & Labels --- */
.badge, .label {
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.label-success, .badge-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
}

.label-danger, .badge-danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    color: #FFFFFF !important;
}

.label-warning, .badge-warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    color: #FFFFFF !important;
}

.label-info, .badge-info {
    background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
    color: #FFFFFF !important;
}

.label-primary, .badge-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
}

/* --- 7. 3D Quick Action Cards (Dashboard) --- */
.sarker-action-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.sarker-action-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 24px -4px rgba(16, 185, 129, 0.18), 0 4px 6px -2px rgba(16, 185, 129, 0.08);
    border-color: #86EFAC;
}

.sarker-action-card .action-icon-3d {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: transform 0.25s ease;
}

.sarker-action-card:hover .action-icon-3d {
    transform: scale(1.15) rotate(4deg);
}

.sarker-action-card span {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
}

/* --- 8. 3D Sidebar Enhancement --- */
.sarker-sidebar {
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
}

.sarker-menu-link {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
}

.sarker-menu-link:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.08) !important;
}

.sarker-menu-link.active {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    box-shadow: inset 3px 0 0 #10B981, 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

.sarker-menu-link.active .menu-icon-box {
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
}

/* --- Professional Ultra-Smooth Sidebar Animation --- */
aside.side-bar {
    width: 256px !important;
    min-width: 256px !important;
    max-width: 256px !important;
    flex-shrink: 0 !important;
    transition: margin-left 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.28s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.35s ease !important;
    will-change: margin-left, opacity;
    overflow-x: hidden !important;
    z-index: 99;
}

aside.side-bar.no-transition {
    transition: none !important;
}

/* When collapsed / auto-hidden on desktop: smoothly slide out to the left */
aside.side-bar.sidebar-anim-hidden {
    margin-left: -256px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Top header hamburger button animation */
.side-bar-collapse {
    cursor: pointer !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease !important;
}

.side-bar-collapse:hover {
    background-color: #E2E8F0 !important;
    color: #10B981 !important;
    transform: scale(1.08) !important;
}

.side-bar-collapse:active {
    transform: scale(0.92) !important;
}

/* Mobile responsive drawer sliding animation (<1024px) */
@media (max-width: 1023px) {
    aside.side-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transform: translateX(-100%) !important;
        margin-left: 0 !important;
        opacity: 1 !important;
        transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease !important;
        display: flex !important;
    }
    aside.side-bar.small-view-side-active {
        transform: translateX(0) !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.6) !important;
    }
}

/* Top Brand Logo Container (Original Brand Color, Larger Display & Professional Specular Sheen) */
.sarker-sidebar-brand {
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    margin: 14px 14px 16px 14px !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease !important;
    cursor: pointer !important;
}

/* Professional Specular Glass Sheen / Smooth Light Sweep across the brand card */
.sarker-sidebar-brand::after {
    content: '';
    position: absolute;
    top: 0;
    left: -110%;
    width: 65%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.45) 46%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(255, 255, 255, 0.45) 54%,
        transparent 80%
    );
    pointer-events: none;
    animation: sarkerLogoShimmer 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes sarkerLogoShimmer {
    0%, 65% {
        left: -110%;
        opacity: 0;
    }
    68% {
        opacity: 1;
    }
    82% {
        left: 160%;
        opacity: 1;
    }
    83%, 100% {
        left: 160%;
        opacity: 0;
    }
}

.sarker-sidebar-brand:hover {
    background: #FFFFFF !important;
    border-color: #10B981 !important;
    box-shadow: 0 10px 25px -2px rgba(10, 25, 47, 0.3), 0 4px 14px rgba(27, 68, 156, 0.2), 0 0 0 1px #10B981 !important;
    transform: translateY(-2px) scale(1.02);
}

.sarker-sidebar-brand:active {
    transform: translateY(0) scale(0.985);
    transition: transform 0.1s ease !important;
}

/* Larger, high-clarity logo rendering */
.sarker-sidebar-brand img,
.sarker-sidebar-brand .sarker-brand-img {
    height: 52px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04)) !important;
}

.sarker-sidebar-brand:hover img,
.sarker-sidebar-brand:hover .sarker-brand-img {
    transform: scale(1.04);
    filter: drop-shadow(0 2px 8px rgba(27, 68, 156, 0.18)) !important;
}

/* --- Sarker Dark Sidebar Full Menu System (admin-sidebar-menu) --- */
.side-bar #side-bar {
    background: transparent !important;
    border-right: none !important;
    padding: 0 8px !important;
}

/* Base styling for all sidebar links and dropdown toggles */
.side-bar #side-bar a,
.side-bar #side-bar .drop_down {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    color: #E2E8F0 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 2px !important;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif) !important;
}

.side-bar #side-bar a:hover,
.side-bar #side-bar .drop_down:hover {
    color: #FFFFFF !important;
    background: #0E4759 !important;
}

/* Active / Open Dropdown & Active Parent Menus - Exact Emerald Green Pill from Mockup */
.side-bar #side-bar > a.tw-bg-gray-200,
.side-bar #side-bar > a.active,
.side-bar #side-bar .drop_down.tw-bg-gray-200,
.side-bar #side-bar .drop_down.active-dropdown,
.side-bar #side-bar .drop_down.active,
.side-bar #side-bar .menu-item-group.has-active-child > .drop_down {
    background: #10B981 !important;
    background-color: #10B981 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
}

/* Prevent outer container div from having a solid background */
.side-bar #side-bar .menu-item-group,
.side-bar #side-bar .tw-bg-gray-200 {
    background: transparent !important;
    box-shadow: none !important;
}

/* Parent menu active icons: pure white */
.side-bar #side-bar > a.tw-bg-gray-200 svg,
.side-bar #side-bar > a.active svg,
.side-bar #side-bar .drop_down.tw-bg-gray-200 svg,
.side-bar #side-bar .drop_down.active-dropdown svg,
.side-bar #side-bar .menu-item-group.has-active-child > .drop_down svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    fill: none !important;
}

.side-bar #side-bar > a.tw-bg-gray-200 i,
.side-bar #side-bar > a.active i,
.side-bar #side-bar .drop_down.tw-bg-gray-200 i,
.side-bar #side-bar .drop_down.active-dropdown i,
.side-bar #side-bar .menu-item-group.has-active-child > .drop_down i {
    color: #FFFFFF !important;
}

/* Menu icons general size & alignment */
.side-bar #side-bar svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    flex-shrink: 0 !important;
}

.side-bar #side-bar i {
    font-size: 15px !important;
    width: 18px !important;
    text-align: center !important;
    color: currentColor !important;
    flex-shrink: 0 !important;
}

/* Chevron arrow on dropdowns */
.side-bar #side-bar .drop_down svg.svg {
    margin-left: auto !important;
    width: 16px !important;
    height: 16px !important;
    stroke: currentColor !important;
    transition: transform 0.2s ease !important;
}

.side-bar #side-bar .drop_down.active-dropdown svg.svg,
.side-bar #side-bar .drop_down.tw-bg-gray-200 svg.svg,
.side-bar #side-bar .menu-item-group.has-active-child > .drop_down svg.svg {
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
}

/* --- Child Menus: Compact Spacing & Minimal Padding (Clean, No Extra Vertical Lines) --- */
.side-bar #side-bar .chiled {
    margin: 2px 0 4px 6px !important;
    padding-left: 8px !important;
    border-left: none !important;
}

.side-bar #side-bar .chiled .tw-absolute {
    display: none !important;
}

.side-bar #side-bar .chiled .tw-space-y-3\.5,
.side-bar #side-bar .chiled .tw-space-y-0\.5,
.side-bar #side-bar .chiled > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.side-bar #side-bar .chiled a {
    font-size: 13px !important;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
    color: #CBD5E1 !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    margin: 1px 0 !important;
    min-height: 26px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

.side-bar #side-bar .chiled a span {
    white-space: nowrap !important;
}

.side-bar #side-bar .chiled a:hover {
    color: #FFFFFF !important;
    background: rgba(16, 185, 129, 0.18) !important;
    padding-left: 12px !important;
}

/* Active Child Menu Link (e.g. All sales / Add Sale when active - vibrant emerald bold text) */
.side-bar #side-bar .chiled a.tw-text-primary-700,
.side-bar #side-bar .chiled a.child-active,
.side-bar #side-bar .chiled a.active {
    color: #34D399 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
    background: rgba(16, 185, 129, 0.12) !important;
    box-shadow: none !important;
    border: none !important;
}

/* --- 9. 3D Quick Action Grid & Buttons --- */
.sarker-actions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

@media (max-width: 1200px) {
    .sarker-actions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .sarker-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sarker-action-btn {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none !important;
    box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.05), inset 0 1px 0 #FFFFFF;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.sarker-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 18px -3px rgba(16, 185, 129, 0.2), inset 0 1px 0 #FFFFFF;
    border-color: #86EFAC;
    background: #FFFFFF;
}

.sarker-action-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sarker-action-btn .btn-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sarker-action-btn:hover .btn-icon-box {
    transform: scale(1.15) rotate(3deg);
}

.sarker-action-btn span {
    font-size: 12.5px;
    font-weight: 700;
    color: #1E293B;
    font-family: var(--app-font-family, 'Hind Siliguri', sans-serif);
    white-space: nowrap;
}

/* --- 10. 3D Stock Alert & Timeline Items --- */
.sarker-alert-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sarker-alert-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: all 0.2s;
}

.sarker-alert-item:hover {
    transform: translateX(3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.sarker-alert-danger {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    color: #991B1B;
    border: 1px solid #FECDD3;
}

.sarker-alert-warning {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    color: #92400E;
    border: 1px solid #FDE68A;
}

/* --- 11. POS Screen 3D Aesthetics --- */
.pos-form-actions, .pos-express-btn {
    border-radius: 10px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.pos-express-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.18) !important;
}

.pos-express-btn:active {
    transform: translateY(1.5px) !important;
}

/* ====================================================================
   PRODUCT STOCK ALERT & COMPACT REPORT TABLE HEADER FIX
   Seamless 100% width edge-to-edge gradient header without broken gaps
   ==================================================================== */
#stock_alert_table,
#product_stock_alert_page_table,
.stock_alert_table_wrap table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

#stock_alert_table thead tr,
#product_stock_alert_page_table thead tr,
.stock_alert_table_wrap table thead tr {
    background: linear-gradient(90deg, #58BF00 0%, #16A34A 35%, #0284C7 75%, #003399 100%) !important;
    color: #FFFFFF !important;
    display: table-row !important;
    width: 100% !important;
    border: none !important;
}

#stock_alert_table thead th,
#product_stock_alert_page_table thead th,
.stock_alert_table_wrap table thead th {
    background: transparent !important;
    background-color: transparent !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-top: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-left: none !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
}

/* Explicit column width distribution: 50% Product, 30% Location, 20% Current Stock */
#stock_alert_table thead th:nth-child(1),
#product_stock_alert_page_table thead th:nth-child(1),
.stock_alert_table_wrap table thead th:nth-child(1) {
    background: transparent !important;
    background-color: transparent !important;
    width: 50% !important;
    text-align: left !important;
    padding-left: 16px !important;
}

#stock_alert_table thead th:nth-child(2),
#product_stock_alert_page_table thead th:nth-child(2),
.stock_alert_table_wrap table thead th:nth-child(2) {
    background: transparent !important;
    background-color: transparent !important;
    width: 30% !important;
    text-align: left !important;
}

#stock_alert_table thead th:nth-child(3),
#product_stock_alert_page_table thead th:nth-child(3),
.stock_alert_table_wrap table thead th:nth-child(3) {
    background: transparent !important;
    background-color: transparent !important;
    width: 20% !important;
    text-align: right !important;
    padding-right: 18px !important;
    border-right: none !important;
}

/* Body column alignment and padding */
#stock_alert_table tbody td,
#product_stock_alert_page_table tbody td,
.stock_alert_table_wrap table tbody td {
    padding: 9px 14px !important;
    vertical-align: middle !important;
    font-size: 13px !important;
    border-color: #E2E8F0 !important;
}

#stock_alert_table tbody td:nth-child(1),
#product_stock_alert_page_table tbody td:nth-child(1),
.stock_alert_table_wrap table tbody td:nth-child(1) {
    width: 50% !important;
    text-align: left !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    word-break: break-word !important;
    white-space: normal !important;
}

#stock_alert_table tbody td:nth-child(2),
#product_stock_alert_page_table tbody td:nth-child(2),
.stock_alert_table_wrap table tbody td:nth-child(2) {
    width: 30% !important;
    text-align: left !important;
    color: #64748B !important;
    word-break: break-word !important;
    white-space: normal !important;
}

#stock_alert_table tbody td:nth-child(3),
#product_stock_alert_page_table tbody td:nth-child(3),
.stock_alert_table_wrap table tbody td:nth-child(3) {
    width: 20% !important;
    text-align: right !important;
    font-weight: 700 !important;
}

/* Stock Alert Footer Totals */
#stock_alert_table tfoot tr,
#product_stock_alert_page_table tfoot tr {
    background-color: #F8FAFC !important;
    border-top: 2px solid #CBD5E1 !important;
}

#stock_alert_table tfoot td,
#product_stock_alert_page_table tfoot td {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

#stock_alert_table tfoot td:last-child p,
#product_stock_alert_page_table tfoot td:last-child p {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #DC2626 !important;
}

/* Reset default right-col background */
.right-col {
    background: transparent !important;
}

/* Top Navbar Styling in Auth Layout */
.sarker-auth-brand-link {
    text-decoration: none !important;
    display: inline-block;
}

.sarker-auth-brand-card {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 6px 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: hidden;
}

.sarker-auth-brand-card:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(27, 68, 156, 0.35), 0 0 0 1.5px #10B981 !important;
}

.sarker-auth-logo-img {
    max-height: 44px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Auth Top Right Action Buttons */
.sarker-auth-btn-signin {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
    border-radius: 9999px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sarker-auth-btn-signin:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
    color: #FFFFFF !important;
}

.sarker-auth-btn-register {
    display: inline-flex !important;
    align-items: center !important;
    color: #E2E8F0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    border-radius: 9999px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.sarker-auth-btn-register:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Welcome Landing Wrapper & Orbs */
.sarker-welcome-wrapper {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 30px 16px;
    z-index: 1;
}

.sarker-glow-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 0;
}

.sarker-glow-orb.orb-1 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, transparent 70%);
    top: 10%;
    left: 15%;
    animation: orbFloat 12s ease-in-out infinite alternate;
}

.sarker-glow-orb.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(27, 68, 156, 0.35) 0%, transparent 70%);
    bottom: 10%;
    right: 15%;
    animation: orbFloat 14s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -25px) scale(1.1); }
}

/* Central Luxury Glassmorphic Welcome Card */
.sarker-welcome-card {
    position: relative;
    z-index: 2;
    max-width: 860px;
    width: 100%;
    background: rgba(6, 40, 51, 0.55);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    padding: 48px 36px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sarker-welcome-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6), 
                0 0 30px rgba(16, 185, 129, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Top Tech Badge */
.sarker-welcome-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 6px 18px;
    border-radius: 9999px;
    color: #A7F3D0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.12);
}

.sarker-pulse-dot-green {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: greenDotPulse 2s infinite;
}

@keyframes greenDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* 3D Decorative Store & Tiles Emblem */
.sarker-welcome-emblem {
    margin: 0 auto 16px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sarker-emblem-inner {
    width: 68px;
    height: 68px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sarker-welcome-card:hover .sarker-emblem-inner {
    transform: translateY(-3px) scale(1.06);
    border-color: #10B981;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

.sarker-emblem-svg {
    width: 38px;
    height: 38px;
}

/* Welcome Landing Title */
.sarker-welcome-title {
    font-family: var(--app-font-family, 'Hind Siliguri', 'Inter', sans-serif) !important;
    font-weight: 800 !important;
    font-size: clamp(26px, 4.2vw, 46px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
    background: linear-gradient(135deg, #FFFFFF 20%, #F1F5F9 55%, #93C5FD 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 0 14px 0 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Location Badge */
.sarker-welcome-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(27, 68, 156, 0.25);
    border: 1px solid rgba(59, 130, 246, 0.4);
    padding: 6px 18px;
    border-radius: 9999px;
    color: #BFDBFE;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.sarker-pin-icon {
    width: 16px;
    height: 16px;
    color: #60A5FA;
}

/* Welcome Subtitle */
.sarker-welcome-subtitle {
    color: #94A3B8 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    max-width: 640px;
    margin: 0 auto 30px auto !important;
    line-height: 1.65 !important;
}

/* CTA Action Button */
.sarker-welcome-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.sarker-welcome-btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #FFFFFF !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 36px !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sarker-welcome-btn-primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 35px rgba(16, 185, 129, 0.55), 0 0 20px rgba(16, 185, 129, 0.3) !important;
    color: #FFFFFF !important;
}

.sarker-welcome-btn-primary i {
    transition: transform 0.25s ease;
}

.sarker-welcome-btn-primary:hover i {
    transform: translateX(4px);
}

/* Feature Badges */
.sarker-welcome-features {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sarker-feature-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 12px;
    color: #CBD5E1;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.25s ease;
}

.sarker-feature-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

/* Footer Attribution */
.sarker-welcome-footer {
    margin-top: 28px;
    color: #64748B;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

/* ====================================================================
   PRINT STYLES FOR ALL REPORTS & TABLES
   Ensures table header background & text are 100% visible and readable in print.
   Table header text is forced to BLACK (#000000) regardless of screen color.
   User request: "sell report ba purchase report j kono report print er khetre jeno head er bg & text valo moto bujha jai, report j rokom color e dekha jak print e text black"
   ==================================================================== */
@media print {
    /* Reset body and remove dark backgrounds */
    body, html {
        color: #000000 !important;
        background: #FFFFFF !important;
    }

    /* All Table Header Rows across all tables, reports, modals */
    table thead tr,
    table.dataTable thead tr,
    .dataTables_scrollHead table thead tr,
    .table-striped thead tr,
    .table-bordered thead tr,
    .table thead tr,
    table tr.bg-green,
    table thead tr.bg-green,
    table.bg-gray tr.bg-green,
    .table-th-green thead tr,
    .view_modal table tr.bg-green,
    #view_product_modal table tr.bg-green,
    #view_sale_modal table tr.bg-green,
    .DTFC_LeftHeadWrapper table thead tr,
    #product_sell_report_table thead tr,
    #product_sell_report_with_purchase_table thead tr,
    #product_sell_report_by_product thead tr,
    #purchase_table thead tr,
    #sell_table thead tr,
    #product_table thead tr {
        background: #F2F4F7 !important;
        background-color: #F2F4F7 !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        box-shadow: none !important;
        border: 1px solid #333333 !important;
        border-bottom: 2px solid #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* All Table Header Cells */
    table thead th,
    table.dataTable thead th,
    .dataTables_wrapper table thead th,
    .dataTables_scrollHead table thead th,
    .table-striped thead th,
    .table-bordered thead th,
    .table > thead > tr > th,
    .table thead th,
    table tr.bg-green th,
    table thead tr.bg-green th,
    table.bg-gray tr.bg-green th,
    .table-th-green thead th,
    .table-th-green th,
    .view_modal table tr.bg-green th,
    .view_modal table thead th,
    #view_product_modal table tr.bg-green th,
    #view_product_modal table thead th,
    #view_sale_modal table tr.bg-green th,
    #view_sale_modal table thead th,
    .DTFC_LeftHeadWrapper th,
    .DTFC_Cloned thead th,
    table.dataTable thead th:first-child,
    #product_sell_report_table thead th,
    #product_sell_report_with_purchase_table thead th,
    #product_sell_report_by_product thead th,
    #purchase_table thead th,
    #sell_table thead th,
    #product_table thead th {
        background: #F2F4F7 !important;
        background-color: #F2F4F7 !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-weight: 700 !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        padding: 6px 8px !important;
        text-shadow: none !important;
        border: 1px solid #333333 !important;
        border-bottom: 2px solid #000000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Force ALL inner elements inside headers to pure black */
    table thead th *,
    table.dataTable thead th *,
    .dataTables_wrapper table thead th *,
    .dataTables_scrollHead thead th *,
    .table thead th *,
    table tr.bg-green th *,
    .view_modal table thead th *,
    .view_modal table tr.bg-green th *,
    table thead th span,
    table thead th i,
    table thead th strong,
    table thead th b {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        text-shadow: none !important;
    }

    /* All Table Body Cells: Crisp black text with light gray borders */
    table tbody td,
    table.dataTable tbody td,
    .dataTables_scrollBody tbody td,
    .table tbody td,
    .table > tbody > tr > td {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-size: 11.5px !important;
        border: 1px solid #D1D5DB !important;
        padding: 5px 8px !important;
    }

    table tbody td *,
    table.dataTable tbody td *,
    .table tbody td * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }

    /* Footer Totals in Print */
    table tfoot tr,
    table tfoot th,
    table tfoot td,
    .table tfoot tr,
    .table tfoot td,
    .table tfoot th,
    tr.footer-total,
    tr.footer-total td {
        background: #F9FAFB !important;
        background-color: #F9FAFB !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        font-weight: 700 !important;
        font-size: 11.5px !important;
        border: 1px solid #333333 !important;
        border-top: 2px solid #000000 !important;
        padding: 6px 8px !important;
    }

    table tfoot * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
}

/* ==========================================================================
   Contact Page - Action Buttons (#003399 Brand Color)
   ========================================================================== */
.pay_purchase_due,
.pay_sale_due,
button[data-target="#add_discount_modal"] {
    background-color: #003399 !important;
    background: #003399 !important;
    border-color: #003399 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(0, 51, 153, 0.25) !important;
}

.pay_purchase_due:hover,
.pay_sale_due:hover,
button[data-target="#add_discount_modal"]:hover,
.pay_purchase_due:focus,
.pay_sale_due:focus,
button[data-target="#add_discount_modal"]:focus {
    background-color: #002266 !important;
    background: #002266 !important;
    border-color: #002266 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 51, 153, 0.4) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Contact Ledger - Purchase & Sales Row Distinct Darker Styling
   ========================================================================== */
#ledger_table tbody tr.ledger-row-sale-purchase,
#ledger_table tbody tr.bg-gray,
.table-striped tbody tr.ledger-row-sale-purchase,
.table tbody tr.ledger-row-sale-purchase {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
    border-top: 1.5px solid #94a3b8 !important;
    border-bottom: 1.5px solid #94a3b8 !important;
}

#ledger_table tbody tr.ledger-row-sale-purchase > td,
#ledger_table tbody tr.bg-gray > td,
.table-striped tbody tr.ledger-row-sale-purchase > td,
.table tbody tr.ledger-row-sale-purchase > td {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

#ledger_table tbody tr.ledger-row-sale-purchase:hover,
#ledger_table tbody tr.ledger-row-sale-purchase:hover > td,
#ledger_table tbody tr.bg-gray:hover,
#ledger_table tbody tr.bg-gray:hover > td {
    background-color: #cbd5e1 !important;
    background: #cbd5e1 !important;
}

#ledger_table tbody tr > td.bg-light-gray {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
}