/* ============================================================================
   MBW ERP CLOUD - Global Theme System (FINAL COMPLETE VERSION)
   ============================================================================
   Roman Urdu: Yeh file COMPLETE hai - kuch bhi missing nahi!
   
   INCLUDES:
   ? All original components (Cards, Tables, Badges, etc.)
   ? Updated color tokens from UI demo
   ? Floating label form system
   ? Custom dropdown with selected/hover states
   ? Confirmation dialogs (updated colors)
   ? Toast messages
   ? Modal component
   ? Alert component
   ? Avatar component
   ? Spinner/Loading component
   ? All utilities, grid, spacing
   ? Responsive & Print styles
   
   VERSION: 3.0 - FINAL COMPLETE
   Design by mbw6.com | Contact Now 0347-3663130
   ============================================================================ */

/* ============================================================================
   FILE MAP ? mbw-theme.css (line numbers approximate; Ctrl+G se jump karo)
   ============================================================================
   A)   Fonts → mbw-typography.css (+ tokens here) .... ~44?92
   B)   Global tokens LIGHT (:root) ................... ~98+
   C)   Global tokens DARK ............................ ~273?380
   D?U) Components A?Spinner (cards, forms, tables?) .. ~382?3306
        I) TABLES ? .table + .mbw-data-table ......... ~1339?1570
        I-v3) TRANSACTION UI (scroll, totals, empty) . ~1571?2021
   V?W) Utilities + responsive ........................ ~3053?3370
   0)   DESIGN TOKENS ? module variables .............. ~3373?3652
        :root ~3385  |  dark ~3532  |  light-only ~3620
        ? Items table colors ............... ~3449?3456
        ? Totals box colors ................ ~3465?3481
        ? List table (mbw-rv) colors ....... ~3490?3496
   PAGE HEADER + FORM LAYOUT (mbw-section-*) .......... ~3654?4520
   RECORD VIEW + PAGER + mbwdd + bank ................. ~4632?5288
   FLATPICKR overrides ................................ ~5290?5818
   ============================================================================ */

/* ==========================================================
   A) GLOBAL FONTS — see assets/css/mbw-typography.css
   ==========================================================
   Inter (English) + Noto Nastaliq Urdu + Noto Naskh Arabic
   are declared once in mbw-typography.css (loaded first in header).
   Tokens below remain for standalone pages that only load this file.
   ========================================================== */

:root {
  --font-sans: "Inter", "Roboto", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, "Noto Sans", sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Jameel Noori Nastaleeq", "Urdu Typesetting", serif;
  --font-arabic: "Noto Naskh Arabic", "Noto Nastaliq Urdu", serif;
  --font-mono: "Consolas", "Monaco", "Courier New", Courier, monospace;
}

html, body{
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  width: 100%;
}

.font-urdu,
.urdu-text{
  font-family: var(--font-urdu);
  letter-spacing: 0;
}

:lang(ur){
  font-family: var(--font-urdu);
}

input, select, textarea, button{
  font-family: var(--font-sans);
}

input.urdu-text,
textarea.urdu-text,
select.urdu-text,
input.font-urdu,
textarea.font-urdu,
select.font-urdu{
  font-family: var(--font-urdu) !important;
  direction: rtl;
  text-align: right;
}
/* ============================================================================
   B) GLOBAL TOKENS (CSS Variables) - LIGHT MODE
   ============================================================================
   Roman Urdu: Yeh saare colors UI demo se match karte hain */

:root {
    /* Color Scheme */
    color-scheme: light;

    /* === Brand Colors === */
    --primary: #2563eb;
    --primary-2: #1d4ed8;
    --primary-soft: rgba(37, 99, 235, 0.1);

    /* Accent */
    --accent: #22c55e;

    /* === Signature Header === */
    --sig-bg: #2563eb;
    --sig-bg-2: #1e40af;
    --sig-text: #ffffff;
    --sig-muted: rgba(255, 255, 255, 0.75);
    --sig-border: rgba(255, 255, 255, 0.15);
    --sig-ring: rgba(255, 255, 255, 0.4);

    /* === Surfaces / Backgrounds === */
    --page-bg: #f4f4f4;
    --card-bg: #ffffff;
    --surface-soft: #f8fafc;
    --input-bg: #ffffff;

    /* === Text Colors === */
    --text-main: #1e293b;        /* Body text - Dark Slate */
    --text-muted: #64748b;       /* Subtitle - Slate Grey */
    --text-soft: #94a3b8;        /* Muted - Light Grey */
    --text-inverse: #ffffff;

    /* === Borders === */
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.4);

    /* Button Hover Shadows - NO ANIMATION, ONLY SHADOW */
    --shadow-btn-primary  : none;
    --shadow-btn-danger   : none;
    --shadow-btn-success  : none;
    --shadow-btn-warning  : none;
    --shadow-btn-secondary: none;
    --shadow-btn-record   : none;

    /* Record View Button - Emerald Green (mbw-sh-btns header area) */
    --record-btn-bg   : #059669;
    --record-btn-text : #ffffff;
    --record-btn-soft : rgba(5, 150, 105, 0.12);

    /* Print Button - Slate Gray (mbw-sh-btns header area) */
    --print-btn-bg    : #475569;
    --print-btn-text  : #ffffff;
    --print-btn-soft  : rgba(71, 85, 105, 0.12);

    /* === Focus Ring === */
    --ring: rgba(37, 99, 235, 0.2);

    /* === Border Radius === */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    /* === Layout Dimensions === */
    --header-h: 56px;
    --sidebar-w: 240px;
    --sidebar-collapsed-w: 64px;

    /* === Status Colors === */
    /* Success - Green */
    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.1);
    --success-border: rgba(34, 197, 94, 0.3);

    /* Danger - Red */
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.1);
    --danger-border: rgba(239, 68, 68, 0.3);

    /* Warning - Orange */
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.3);

    /* Info - Light Blue */
    --info: #3b82f6;
    --info-soft: rgba(59, 130, 246, 0.1);
    --info-border: rgba(59, 130, 246, 0.3);

    /* === Dropdown Tokens === */
    --dd-bg: #ffffff;
    --dd-border: #e2e8f0;
    --dd-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    --dd-text: #1e293b;
    --dd-muted: #64748b;
    --dd-opt-hover-bg: #f1f5f9;
    --dd-opt-selected-bg: rgba(37, 99, 235, 0.1);
    --dd-opt-selected-text: #2563eb;
    --dd-ring: rgba(37, 99, 235, 0.2);

    /* Custom Dropdown - UI Demo Colors */
    --dd-opt-normal-bg: transparent;
    --dd-opt-normal-text: #1e293b;
    --dd-opt-selected-bg-new: rgba(37, 99, 235, 0.18);      /* Blue 18% - improved visibility */
    --dd-opt-selected-text-new: #2563eb;
    --dd-opt-hover-bg-new: rgba(37, 99, 235, 0.12);         /* Blue 12% ? hover visible */
    --dd-opt-hover-text: #2563eb;
    --dd-opt-selected-hover-bg: rgba(37, 99, 235, 0.28);    /* Blue 28% ? selected+hover clearly stronger */

    /* === Table Tokens === */
    --table-header-bg: #f8fafc;
    --table-border: #e2e8f0;
    --row-hover: #f1f5f9;
    --row-stripe: #fafbfc;

    /* === Filter Bar === */
    --filter-bg: #f8fafc;
    --filter-border: #e2e8f0;
    --filter-label-bg: rgba(37, 99, 235, 0.08);
    --filter-label-text: #475569;

    /* === Meta Chip === */
    --chip-bg: #f1f5f9;
    --chip-border: #e2e8f0;
    --chip-text: #475569;
}

/* ============================================================================
   C) DARK MODE TOKENS
   ============================================================================ */

html[data-theme="dark"] {
    color-scheme: dark;

    /* === Brand Colors === */
    --primary: #3b82f6;
    --primary-2: #2563eb;
    --primary-soft: rgba(59, 130, 246, 0.15);

    /* === Signature Header === */
    --sig-bg: #1e3a5f;
    --sig-bg-2: #172e4d;
    --sig-text: #f1f5f9;
    --sig-muted: rgba(241, 245, 249, 0.7);
    --sig-border: rgba(255, 255, 255, 0.1);
    --sig-ring: rgba(59, 130, 246, 0.4);

    /* === Surfaces === */
    --page-bg: #0f172a;
    --card-bg: #1e293b;
    --surface-soft: #1e293b;
    --input-bg: #1e293b;

    /* === Text === */
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-soft: #64748b;
    --text-inverse: #0f172a;

    /* === Borders === */
    --border-subtle: #334155;
    --border-strong: #475569;

    /* === Shadows === */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);

    /* Button shadows - same */
    --shadow-btn-secondary: none;
    --shadow-btn-record   : none;

    /* Record View Button - dark mode (Emerald) */
    --record-btn-bg   : #10b981;
    --record-btn-text : #000000;
    --record-btn-soft : rgba(16, 185, 129, 0.15);

    /* Print Button - dark mode (Slate Gray) */
    --print-btn-bg    : #94a3b8;
    --print-btn-text  : #0f172a;
    --print-btn-soft  : rgba(148, 163, 184, 0.15);

    /* === Focus Ring === */
    --ring: rgba(59, 130, 246, 0.2);

    /* === Status Colors === */
    --success-soft: rgba(34, 197, 94, 0.15);
    --success-border: rgba(34, 197, 94, 0.35);
    --danger-soft: rgba(239, 68, 68, 0.15);
    --danger-border: rgba(239, 68, 68, 0.35);
    --warning-soft: rgba(245, 158, 11, 0.15);
    --warning-border: rgba(245, 158, 11, 0.35);
    --info-soft: rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.35);

    /* === Dropdown (Dark) === */
    --dd-bg: #1e293b;
    --dd-border: #334155;
    --dd-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    --dd-text: #f1f5f9;
    --dd-muted: #94a3b8;
    --dd-opt-hover-bg: #334155;
    --dd-opt-selected-bg: rgba(59, 130, 246, 0.2);
    --dd-opt-selected-text: #60a5fa;
    --dd-ring: rgba(59, 130, 246, 0.2);

    /* Custom Dropdown Dark */
    --dd-opt-normal-text: #f1f5f9;
    --dd-opt-selected-bg-new: rgba(59, 130, 246, 0.30);     /* Blue 30% ? dark mode selected */
    --dd-opt-selected-text-new: #60a5fa;
    --dd-opt-hover-bg-new: rgba(59, 130, 246, 0.22);        /* Blue 22% ? dark mode visible hover */
    --dd-opt-hover-text: #60a5fa;
    --dd-opt-selected-hover-bg: rgba(59, 130, 246, 0.42);   /* Blue 42% ? dark mode selected+hover */

    /* === Table (Dark) === */
    --table-header-bg: #1e293b;
    --table-border: #334155;
    --row-hover: #334155;
    --row-stripe: #1a2536;

    /* === Filter Bar (Dark) === */
    --filter-bg: #1e293b;
    --filter-border: #334155;
    --filter-label-bg: rgba(59, 130, 246, 0.12);
    --filter-label-text: #94a3b8;

    /* === Chip (Dark) === */
    --chip-bg: #334155;
    --chip-border: #475569;
    --chip-text: #cbd5e1;
}

/* ============================================================================
   D) CARDS
   ============================================================================ */

.card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-soft);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}

.card-body {
    padding: 18px;
}

.card-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-soft);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ============================================================================
   E) BUTTONS (UPDATED - Shadow Only on Hover)
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Primary - Blue */
.btn-primary {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
    background  : var(--primary-soft);
    color       : var(--primary);
    border-color: var(--primary);
    box-shadow  : none;
}

/* Secondary - Outline Primary (Record View, navigation buttons) */
.btn-secondary {
    background  : transparent;
    color       : var(--primary);
    border-color: var(--primary);
}

.btn-secondary:hover:not(:disabled) {
    background  : var(--primary-soft);
    color       : var(--primary);
    border-color: var(--primary);
    box-shadow  : none;
}

/* Success - Green */
.btn-success {
    background: var(--success);
    color: #ffffff;
    border-color: var(--success);
}

.btn-success:hover:not(:disabled) {
    background  : var(--success-soft);
    color       : var(--success);
    border-color: var(--success);
    box-shadow  : none;
}

/* Danger - Red */
.btn-danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

.btn-danger:hover:not(:disabled) {
    background  : var(--danger-soft);
    color       : var(--danger);
    border-color: var(--danger);
    box-shadow  : none;
}

/* Delete button alias */
.btn-delete {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}

.btn-delete:hover:not(:disabled) {
    box-shadow: none;
}

/* Light button */
.btn-light {
    background: var(--card-bg);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

.btn-light:hover:not(:disabled) {
    background  : var(--surface-soft);
    border-color: var(--border-strong);
}

/* Warning - Orange */
.btn-warning {
    background: var(--warning);
    color: #ffffff;
    border-color: var(--warning);
}

.btn-warning:hover:not(:disabled) {
    background  : var(--warning-soft);
    color       : var(--warning);
    border-color: var(--warning);
    box-shadow  : none;
}

/* Update button alias */
.btn-update {
    background: var(--warning);
    color: #ffffff;
    border-color: var(--warning);
}

.btn-update:hover:not(:disabled) {
    background  : var(--warning-soft);
    color       : var(--warning);
    border-color: var(--warning);
    box-shadow  : none;
}

/* Save button alias */
.btn-save {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

.btn-save:hover:not(:disabled) {
    box-shadow: var(--shadow-btn-primary);
}

/* Info button */
.btn-info {
    background: var(--info);
    color: #ffffff;
    border-color: var(--info);
}

.btn-info:hover:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: var(--shadow-md);
}

/* Record View Button - Emerald Green (mbw-sh-btns header area) */
.record-btn {
    background  : var(--record-btn-bg);
    color       : var(--record-btn-text);
    border-color: var(--record-btn-bg);
}

.record-btn:hover:not(:disabled) {
    background  : var(--record-btn-soft);
    color       : var(--record-btn-bg);
    border-color: var(--record-btn-bg);
    box-shadow  : none;
}

/* Record View Button - Outline variant */
.btn-outline-record {
    background  : transparent;
    color       : var(--record-btn-bg);
    border-color: var(--record-btn-bg);
}

.btn-outline-record:hover:not(:disabled) {
    background: var(--record-btn-soft);
    box-shadow: var(--shadow-sm);
}

/* Print Button - Slate Gray (mbw-sh-btns header area) */
.print-btn {
    background  : var(--print-btn-bg);
    color       : var(--print-btn-text);
    border-color: var(--print-btn-bg);
}

.print-btn:hover:not(:disabled) {
    background  : var(--print-btn-soft);
    color       : var(--print-btn-bg);
    border-color: var(--print-btn-bg);
    box-shadow  : none;
}

/* Print Button - Outline variant */
.btn-outline-print {
    background  : transparent;
    color       : var(--print-btn-bg);
    border-color: var(--print-btn-bg);
}

.btn-outline-print:hover:not(:disabled) {
    background: var(--print-btn-soft);
    box-shadow: var(--shadow-sm);
}

/* Button Sizes */
.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    gap: 4px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-lg {
    padding: 10px 20px;
    font-size: 15px;
}

/* Icon only button */
.btn-icon {
    padding: 8px;
    min-width: 36px;
    min-height: 36px;
}

.btn-icon.btn-xs {
    padding: 4px;
    min-width: 36px;
    min-height: 36px;
}

/* Outline variants */
.btn-outline-primary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover:not(:disabled) {
    background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}

.btn-outline-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover:not(:disabled) {
    background: var(--danger-soft);
    box-shadow: var(--shadow-sm);
}

.btn-outline-success {
    background: transparent;
    color: var(--success);
    border-color: var(--success);
}

.btn-outline-success:hover:not(:disabled) {
    background: var(--success-soft);
    box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-secondary:hover:not(:disabled) {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.btn-outline-warning {
    background: transparent;
    color: var(--warning);
    border-color: var(--warning);
}

.btn-outline-warning:hover:not(:disabled) {
    background: var(--warning-soft);
    color: var(--warning);
    border-color: var(--warning);
    box-shadow: var(--shadow-sm);
}

.btn-outline-info {
    background: transparent;
    color: var(--info);
    border-color: var(--info);
}

.btn-outline-info:hover:not(:disabled) {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info);
    box-shadow: var(--shadow-sm);
}

/* ============================================================================
   F) FORMS (BASIC - KEPT FROM ORIGINAL)
   ============================================================================ */

.form-group {
    margin-bottom: 16px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
}

.form-label .required,
.form-label.required::after {
    color: var(--danger);
}

.form-label.required::after {
    content: ' *';
}

.form-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder {
    color: var(--text-soft);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-input:disabled {
    background: var(--surface-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-input[readonly] {
    background: var(--surface-soft);
    color: var(--text-muted);
    cursor: default;
}

.form-select {
    display: block;
    width: 100%;
    padding: 9px 32px 9px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-main);
    background: var(--input-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-select:disabled {
    background-color: var(--surface-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-textarea {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-main);
    background: var(--input-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-textarea::placeholder {
    color: var(--text-soft);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.form-textarea:disabled {
    background: var(--surface-soft);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Error state */
.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--danger);
}

.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.form-feedback {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.form-feedback.is-invalid {
    color: var(--danger);
}

.form-feedback.is-valid {
    color: var(--success);
}

/* Checkbox/Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.form-check-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.form-check-label {
    font-size: 13px;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;
}

/* ============================================================================
   G) FLOATING LABEL FORM SYSTEM (NEW - FROM UI DEMO)
   ============================================================================ */

.float-group {
    position: relative;
    margin-bottom: 20px;
}

.float-icon {
    position: absolute;
    left: 12px;
    top: 22px;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    transition: color 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

.float-input {
    width: 100%;
    height: var(--mbw-control-height-lg, 44px);
    box-sizing: border-box;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 14px;
    line-height: 22px;
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.float-select {
    width: 100%;
    height: var(--mbw-control-height-lg, 44px);
    box-sizing: border-box;
    padding: 10px 40px 10px 40px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 14px;
    line-height: 22px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.float-textarea {
    width: 100%;
    padding: 14px 14px 14px 40px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 14px;
    outline: none;
    min-height: 110px;
    resize: vertical;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Roman Urdu: Textarea ke andar icon top pe ho ? multi-line field mein center sahi nahi lagta */
.float-group:has(.float-textarea) .float-icon {
    top      : 18px;
    transform: none;
}

/* Roman Urdu: Float-hint--static wale groups mein float-group ki height input + hint dono
   milake hoti hai. Icon top:50% is pure group ka center calculate karta hai ? neeche chala
   jaata hai. Fix: input ki fixed height (44px) ka center hardcode karo ? top:22px.
   Textarea exclude karo ? woh auto-grow hoti hai, top:50% wahan sahi kaam karta hai. */
.float-group:has(.float-hint--static):not(:has(.float-textarea)) .float-icon {
    top      : 22px;
    transform: translateY(-50%);
}

.float-label {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    pointer-events: none;
    transition: all 0.2s ease;
    padding: 0 4px;
    background: transparent;
}

.float-label.required::after {
    content: " *";
    color: var(--danger);
}

/* FOCUS STATE */
.float-input:focus,
.float-select:focus,
.float-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

/* Roman Urdu: Select labels hamesha upar rahein (position) lekin focus pe primary color */
.float-select ~ .float-label {
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--card-bg);
    padding: 0 6px;
}

.float-select ~ .float-icon {
    color: var(--text-muted);
}

.float-input:focus ~ .float-label,
.float-input:not(:placeholder-shown) ~ .float-label,
.float-select:focus ~ .float-label,
.float-textarea:focus ~ .float-label,
.float-textarea:not(:placeholder-shown) ~ .float-label {
    top: 0;
    left: 12px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    background: var(--card-bg);
    padding: 0 6px;
}

.float-input:focus ~ .float-icon,
.float-input:not(:placeholder-shown) ~ .float-icon,
.float-select:focus ~ .float-icon,
.float-textarea:focus ~ .float-icon,
.float-textarea:not(:placeholder-shown) ~ .float-icon {
    color: var(--primary);
}

/* ERROR STATE */
.float-group.has-error .float-input,
.float-group.has-error .float-select,
.float-group.has-error .float-textarea {
    border-color: var(--danger);
}

.float-group.has-error .float-label {
    color: var(--danger);
}

.float-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
}

/* ============================================================================
   G1) FLOAT HINT ? Field ke andar hint text (absolute positioned)
   Roman Urdu: Hint field ke ANDAR bottom mein position:absolute hoti hai.
   Hover pe VISIBLE rehti hai (layout reflow nahi ? screen vibration fix).
   Focus pe hide hoti hai. Value hone pe hide hoti hai.
   .float-hint--static: Date/number/file fields ke liye ? neeche hamesha visible.
   CSS :has() selector use karta hai ? modern browsers support karte hain.
   ============================================================================ */

/* Roman Urdu: Default state ? hint field ke andar exactly vertical center pe (icons jaise) */
.float-hint {
    position      : absolute;
    top           : 50%;
    transform     : translateY(-50%);
    bottom        : auto;
    left          : 40px;
    right         : 12px;
    font-size     : var(--mbw-hint-font-size, 11px);
    font-weight   : normal;
    color         : var(--mbw-hint-color, #94a3b8);
    line-height   : 1.4;
    pointer-events: none;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    z-index       : 1;
}

/* Roman Urdu: Hover pe hint visible rehti hai ? koi hover-hide rule nahi */

/* Roman Urdu: Focus pe (koi bhi child focus mein ho) hint hide karo */
.float-group:focus-within .float-hint {
    display: none;
}

/* Roman Urdu: Jab field mein value ho (has-value class) hint hide karo */
.float-group:has(.has-value) .float-hint {
    display: none;
}

/* Roman Urdu: Jab float-input ya float-textarea mein text value ho
   (:placeholder-shown nahi dikh raha) tab bhi hint hide karo.
   Yeh rule tab trigger hota hai jab user type kare aur blur kare ?
   placeholder=" " (space) sirf empty field par shown hota hai.
   Label ke liye line 1032 pe :not(:placeholder-shown) use hoti hai,
   hint ke liye wahi logic yahan apply hota hai taake overlap na ho. */
.float-group:has(.float-input:not(:placeholder-shown)) .float-hint,
.float-group:has(.float-textarea:not(:placeholder-shown)) .float-hint {
    display: none;
}

/* Static hints stay below the field even when a sibling/hidden float-input
   already has a value (e.g. Profile Branch: Global scope input remains in DOM). */
.float-group:has(.float-input:not(:placeholder-shown)) .float-hint--static,
.float-group:has(.float-textarea:not(:placeholder-shown)) .float-hint--static {
    display: block;
}

/* Roman Urdu: Static hint ? date/number/file fields ke liye, hamesha neeche visible */
.float-hint--static {
    position      : static;
    transform     : none;
    display       : block;
    margin-top    : 6px;
    padding-left  : 40px;
    font-weight   : normal;
    white-space   : normal;
    overflow      : visible;
    text-overflow : unset;
    z-index       : auto;
}
.float-group:focus-within .float-hint--static,
.float-group:has(.has-value) .float-hint--static {
    display: block;
}

/* ============================================================================
   G2) MBW-CODE-FIELD ? Read-only Reference Number Field
   Roman Urdu: Har module mein Invoice/PO/PR code ka readonly field.
   Generate function bilkul nahi chhuegi ? sirf styling yahan se.
   Monospace font, primary-soft bg, user-select:all (easy copy).
   ============================================================================ */
.mbw-code-field {
    background    : rgba(37, 99, 235, 0.04) !important;
    cursor        : default !important;
    font-family   : 'Courier New', Courier, monospace !important;
    font-weight   : 600 !important;
    color         : var(--mbw-primary, #2563eb) !important;
    border-color  : var(--mbw-border-subtle, #e2e8f0) !important;
    user-select   : all;
    caret-color   : transparent;
}

html[data-theme="dark"] .mbw-code-field {
    background  : rgba(96, 165, 250, 0.06) !important;
    color       : #60a5fa !important;
    border-color: #334155 !important;
}

/* ??? ID / Code text utility class ??????????????????????????????????????????? */
/* Use on any element (input, span, td, label) that displays an auto-generated  */
/* code / ID value ? same color as mbw-code-field input text.                   */
.mbw-id-text {
    color      : var(--mbw-primary, #2563eb) !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-weight: 600 !important;
}
html[data-theme="dark"] .mbw-id-text {
    color: #60a5fa !important;
}

/* ============================================================================
   H) CUSTOM DROPDOWN SYSTEM (NEW - FROM UI DEMO)
   ============================================================================ */

.custom-select-wrapper {
    position: relative;
    margin-bottom: 20px;
}

/* Roman Urdu: Custom select ke baad wala native sibling select hamesha hide karo */
.custom-select-wrapper + select {
    display: none !important;
}

.custom-select-wrapper select {
    display: none;
}

.custom-select-trigger {
    width: 100%;
    height: var(--mbw-control-height-lg, 44px);
    min-height: var(--mbw-control-height-lg, 44px);
    max-height: var(--mbw-control-height-lg, 44px);
    box-sizing: border-box;
    padding: 0 36px 0 40px;
    border: 1px solid var(--mbw-field-border, var(--border-subtle));
    border-radius: var(--r-md);
    background: var(--mbw-field-bg, var(--input-bg));
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    line-height: 22px;
    min-width: 0;
    transition: all 0.2s ease;
}

.custom-select-value {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}

.custom-select-arrow {
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    color: var(--text-muted);
    font-size: 12px;
}

.custom-select-trigger:hover {
    border-color: var(--primary);
}

.custom-select-trigger.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--ring);
}

.custom-select-trigger.active .custom-select-arrow {
    transform: rotate(180deg);
    color: var(--primary);
}

.custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--dd-bg);
    border: 1px solid var(--dd-border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.custom-select-dropdown.open {
    display: block;
}

.custom-select-option {
    padding: 9px 14px;
    font-size: 13.5px;
    line-height: 1.4;
    white-space: normal;
    word-break: break-word;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--dd-opt-normal-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dd-opt-normal-bg);
}

/* SELECTED OPTION */
.custom-select-option.selected {
    background: var(--dd-opt-selected-bg-new);
    color: var(--dd-opt-selected-text-new);
    font-weight: 600;
    border-left: 3px solid var(--dd-opt-selected-text-new);
    padding-left: 13px;
}

/* HOVER OPTION */
.custom-select-option:hover {
    background: var(--dd-opt-hover-bg-new);
    color: var(--dd-opt-hover-text);
}

/* SELECTED + HOVER */
.custom-select-option.selected:hover {
    background: var(--dd-opt-selected-hover-bg);
    color: var(--dd-opt-selected-text-new);
}

.custom-select-option .option-icon {
    color: var(--text-muted);
    font-size: 12px;
}

.custom-select-option.selected .option-icon {
    color: var(--dd-opt-selected-text-new);
}

.custom-select-check {
    margin-left: auto;
    color: var(--dd-opt-selected-text-new);
    font-size: 14px;
}

/* Scrollbar */
.custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: var(--surface-soft);
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Roman Urdu: filter-bar ke andar custom-select-trigger ko form-input jaisa banao */
.filter-bar .custom-select-trigger {
    padding: 7px 10px;
    font-size: 12px;
    height: 36px;
    box-sizing: border-box;
}

.filter-bar .custom-select-value {
    font-size: 12px;
}

/* Roman Urdu: filter-bar mein custom-select ka form-wala margin hatao ? alignment fix */
.filter-bar .custom-select-wrapper {
    margin-bottom: 0;
}

/* ============================================================================
   I) TABLES
   ============================================================================ */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--table-border);
    border-radius: var(--r-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table thead {
    background: var(--table-header-bg);
}

.table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-main);
    border-bottom: 2px solid var(--table-border);
    white-space: nowrap;
}

.table td {
    padding: 10px 12px;
    color: var(--text-main);
    border-bottom: 1px solid var(--table-border);
}

.table tbody tr:hover {
    background: var(--row-hover);
}

.table tbody tr:nth-child(even) {
    background: var(--row-stripe);
}

.table tbody tr:nth-child(even):hover {
    background: var(--row-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table .text-center {
    text-align: center;
}

.table .text-right {
    text-align: right;
}

.table th.sortable {
    cursor: pointer;
    user-select: none;
    padding: 0;
}

.table th.sortable a.sort-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    color: var(--text-main) !important;
    text-decoration: none !important;
    white-space: nowrap;
    width: 100%;
    height: 100%;
    font-weight: 600;
}

.table th.sortable a.sort-link:hover {
    opacity: 0.80;
}

/* Sort icons - same color as header text (white in dark / dark in light) */
.table th.sortable a.sort-link i.sort-idle,
.table th.sortable a.sort-link i.sort-asc,
.table th.sortable a.sort-link i.sort-desc {
    color: var(--text-main) !important;
    font-size: 10px;
    opacity: 1;
}

/* ============================================================
   MBW DATA TABLE ? .mbw-data-table
   Roman Urdu: Items entry table ke liye global self-contained class.
   Sale, Quotation, Purchase, Stock ? har module ki items entry table
   mein sirf yeh class lagao. Koi doosri class zaroorat nahi.
   Column widths sirf module ki apni CSS mein likhein.
   Usage: <table class="mbw-data-table si-items-tbl" id="itemsTable">
   ============================================================ */

/* Roman Urdu: Table structure ? self-contained, koi dependency nahi */
.mbw-data-table {
    width          : 100%;
    table-layout   : auto;
    border         : 1px solid var(--mbw-table-border);
    border-collapse: collapse;
}

/* Roman Urdu: Shared padding + vertical-align ? sab cells uniform */
.mbw-data-table thead th,
.mbw-data-table tbody td,
.mbw-data-table tfoot td {
    padding       : 6px 8px;
    vertical-align: middle;
    box-sizing    : border-box;
}

/* Roman Urdu: Header row ? colors from --mbw-table-head-* variables (line ~3444) */
.mbw-data-table thead th {
    color         : var(--mbw-table-head-text);
    background    : var(--mbw-table-head-bg);
    font-size     : var(--mbw-table-head-size);
    font-weight   : 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space   : nowrap;
    border-bottom : 1px solid var(--mbw-table-border);
    border-right  : 1px solid var(--mbw-table-border);
}

.mbw-data-table thead th:last-child {
    border-right: none;
}

/* Roman Urdu: Odd rows (1, 3, 5?) ? --mbw-table-row-bg + cell text tokens (~3468) */
.mbw-data-table tbody td {
    color        : var(--mbw-table-cell-text);
    background   : var(--mbw-table-row-bg);
    font-size    : var(--mbw-table-cell-size);
    vertical-align: top;
    border-bottom: 1px solid var(--mbw-table-border);
    border-right : 1px solid var(--mbw-table-border);
}

.mbw-data-table tbody td:last-child {
    border-right: none;
}

/* Roman Urdu: tr pe koi background nahi ? td ka background sahi dikhega */
.mbw-data-table tbody tr,
.mbw-data-table tbody tr:nth-child(even),
.mbw-data-table tbody tr:nth-child(even):hover {
    background: transparent;
}

/* Roman Urdu: Even rows (2, 4, 6?) ? zebra stripe */
.mbw-data-table tbody tr:nth-child(even) td {
    background: var(--mbw-table-row-alt);
}

/* Roman Urdu: Row hover ? sab rows pe (odd + even) */
.mbw-data-table tbody tr:hover td {
    background: var(--mbw-table-row-hover);
}

/* Roman Urdu: Footer / sub-total row ? header se ALAG colors (--mbw-table-foot-*) */
.mbw-data-table tfoot td {
    background  : var(--mbw-table-foot-bg);
    color       : var(--mbw-table-foot-text);
    font-size   : var(--mbw-table-foot-size);
    border-top  : 1px solid var(--mbw-table-border);
    border-right: 1px solid var(--mbw-table-border);
}

/* Roman Urdu: Dark mode ? header */
html[data-theme="dark"] .mbw-data-table thead th {
    background: var(--mbw-table-head-bg);
    color     : var(--mbw-table-head-text);
}

/* Roman Urdu: Dark mode ? body cells */
html[data-theme="dark"] .mbw-data-table tbody td {
    background: var(--mbw-table-row-bg);
    color     : var(--mbw-table-cell-text);
}

html[data-theme="dark"] .mbw-data-table tbody tr:nth-child(even) td {
    background: var(--mbw-table-row-alt);
}

html[data-theme="dark"] .mbw-data-table tbody tr:hover td {
    background: var(--mbw-table-row-hover);
}

html[data-theme="dark"] .mbw-data-table tfoot td {
    background: var(--mbw-table-foot-bg);
    color     : var(--mbw-table-foot-text);
}

/* Roman Urdu: Borderless inputs inside table cells ? "spreadsheet" look
   .mbw-field (standard), .si-tbl-input (sale legacy), .form-input (old pattern) */
.mbw-data-table tbody td .mbw-field,
.mbw-data-table tbody td .mbw-tbl-input,
.mbw-data-table tbody td .si-tbl-input,
.mbw-data-table tbody td .form-input {
    border        : none;
    background    : transparent;
    box-shadow    : none;
    border-radius : 0;
    padding-left  : 2px;
    padding-right : 2px;
}

/* Roman Urdu: Focus pe bhi koi glow/border nahi ? sirf text cursor */
.mbw-data-table tbody td .mbw-field:focus,
.mbw-data-table tbody td .mbw-tbl-input:focus,
.mbw-data-table tbody td .si-tbl-input:focus,
.mbw-data-table tbody td .form-input:focus {
    border    : none;
    box-shadow: none;
    outline   : none;
}

/* Roman Urdu: Remove button ? 22x22px compact size (vs default 32x32) */
.mbw-data-table .btn-icon.btn-sm {
    min-width  : 22px;
    min-height : 22px;
    padding    : 4px;
    font-size  : 10px;
    line-height: 1;
}

/* Roman Urdu: Items table horizontal scroll wrapper */
.mbw-data-table-scroll {
    overflow-x            : auto;
    margin-bottom         : 4px;
    border                : 1px solid var(--border-subtle);
    border-radius         : 8px;
    -webkit-overflow-scrolling: touch;
    width                 : 100%;
    max-width             : 100%;
    min-width             : 0;
    box-sizing            : border-box;
}

/* Roman Urdu: Compact input inside .mbw-data-table cells ? size/color from table tokens */
.mbw-tbl-input {
    padding    : 4px 6px !important;
    font-size  : var(--mbw-table-cell-size) !important;
    color      : var(--mbw-table-cell-text);
    width      : 100%;
    box-sizing : border-box;
    min-height : 30px;
}

.mbw-tbl-input[type="number"] {
    text-align: right;
    height    : 30px;
}

/*
 * ERP-FINANCIAL-TABLE-VALUE-PRESENTATION-001
 * Readonly / system-calculated amounts in data tables → display text (not fake inputs).
 */
.mbw-data-table .mbw-tbl-num {
    display             : block;
    width               : 100%;
    box-sizing          : border-box;
    text-align          : right;
    white-space         : nowrap;
    overflow            : visible;
    font-size           : var(--mbw-table-cell-size);
    color               : var(--mbw-table-cell-text);
    font-variant-numeric: tabular-nums;
    line-height         : 1.35;
    padding             : 4px 2px;
    margin              : 0;
    border              : none;
    background          : transparent;
}

/*
 * Editable table number inputs: suppress browser spinner gutter that clips digits
 * while the TD still shows free padding space. Scoped to data-table controls only.
 */
.mbw-data-table input.mbw-tbl-input[type="number"],
.mbw-data-table input.si-tbl-input[type="number"],
.mbw-data-table input.pi-tbl-input[type="number"],
.mbw-data-table input.po-tbl-input[type="number"],
.mbw-data-table input.pr-tbl-input[type="number"],
.mbw-data-table input.sr-tbl-input[type="number"],
.mbw-data-table input.qt-tbl-input[type="number"],
.mbw-data-table input.dm-tbl-input[type="number"],
.mbw-data-table input.st-tbl-input[type="number"] {
    -moz-appearance: textfield;
    appearance     : textfield;
}

.mbw-data-table input.mbw-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.mbw-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.si-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.si-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.pi-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.pi-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.po-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.po-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.pr-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.pr-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.sr-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.sr-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.qt-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.qt-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.dm-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.dm-tbl-input[type="number"]::-webkit-inner-spin-button,
.mbw-data-table input.st-tbl-input[type="number"]::-webkit-outer-spin-button,
.mbw-data-table input.st-tbl-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

textarea.mbw-tbl-input {
    resize    : vertical;
    overflow  : hidden;
    height    : auto;
    min-height: 30px;
    line-height: 1.4;
}

/* Roman Urdu: Lambay column headers wrap (Customer Payment, Purchase, etc.) */
.mbw-data-table thead th {
    white-space  : normal;
    line-height  : 1.25;
    word-break   : break-word;
}

/* Roman Urdu: Compact custom-select inside data table cells */
.mbw-data-table .custom-select-wrapper {
    margin-bottom: 0;
    width          : 100%;
    min-width      : 0;
}

.mbw-data-table .custom-select-trigger {
    padding    : 5px 32px 5px 8px;
    font-size  : 12px;
    min-height : 30px;
    height     : auto;
    line-height: 1.35;
}

.mbw-data-table .custom-select-value {
    font-size    : 12px;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
    display      : block;
}

.mbw-data-table .custom-select-dropdown {
    min-width: 180px;
    z-index  : 2000;
}

.mbw-data-table .custom-select-option {
    padding  : 7px 12px;
    font-size: 12px;
}

/* Roman Urdu: Line-item date field ? calendar icon + Flatpickr alt input */
.mbw-tbl-date-cell {
    position: relative;
    width   : 100%;
}

.mbw-tbl-date-cell .mbw-tbl-date-icon {
    position      : absolute;
    left          : 8px;
    top           : 50%;
    transform     : translateY(-50%);
    color         : var(--text-muted, var(--mbw-table-cell-text));
    font-size     : 12px;
    pointer-events: none;
    z-index       : 2;
}

.mbw-tbl-date-cell .flatpickr-wrapper {
    display: block;
    width  : 100%;
}

.mbw-tbl-date-cell .flatpickr-wrapper .mbw-tbl-input,
.mbw-tbl-date-cell > .mbw-tbl-input {
    width       : 100%;
    padding-left: 28px !important;
    cursor      : pointer;
}

.mbw-tbl-date-cell .mbw-tbl-fp.flatpickr-input,
.mbw-tbl-date-cell input.flatpickr-input[type="hidden"] {
    position: absolute !important;
    opacity : 0 !important;
    width   : 0 !important;
    height  : 0 !important;
    padding : 0 !important;
    border  : none !important;
    pointer-events: none;
}

/* Roman Urdu: Jab cheque columns hide hon ? width 0 taake table full stretch ho */
.mbw-data-table[data-cheque-cols="hidden"] .cheque-col {
    width      : 0 !important;
    max-width  : 0 !important;
    min-width  : 0 !important;
    padding    : 0 !important;
    border     : none !important;
    overflow   : hidden !important;
    font-size  : 0 !important;
    line-height: 0 !important;
}

.mbw-data-table[data-cheque-cols="hidden"] {
    width    : 100%;
    min-width: 0;
}

/* ============================================================
   MBW TRANSACTION UI v3 ? totals, links, empty states, attachments
   Roman Urdu: Sale/Quotation/Purchase ? module CSS sirf column widths (%)
   Table shell: .mbw-data-table (upar) | Colors: DESIGN TOKENS ~3449+
   ============================================================ */

/* --- Totals card (Sub Total, Net Payable?) ? colors: --mbw-totals-* ~3465 --- */
.mbw-totals-card {
    min-width    : min(380px, 100%);
    max-width    : min(500px, 100%);
    width        : 100%;
    border       : 1px solid var(--mbw-totals-border);
    border-radius: 8px;
    background   : var(--mbw-totals-card-bg);
    overflow     : hidden;
    box-sizing   : border-box;
}

@media (max-width: 600px) {
    .mbw-totals-card {
        min-width: 100%;
        max-width: 100%;
    }
}

.mbw-totals-section {
    margin-top     : 16px;
    display        : flex;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .mbw-totals-section {
        justify-content: stretch;
    }
}

.mbw-totals-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 8px 16px;
    font-size      : var(--mbw-totals-row-size);
    border-bottom  : 1px solid var(--mbw-totals-row-border);
}

.mbw-totals-row:last-child {
    border-bottom: none;
}

.mbw-totals-row > span:first-child {
    color      : var(--mbw-totals-label-color);
    font-weight: 500;
    display    : flex;
    align-items: center;
    gap        : 4px;
    flex-wrap  : wrap;
}

.mbw-totals-row > span:last-child {
    font-weight: 600;
    color      : var(--mbw-totals-value-color);
    text-align : right;
}

.mbw-totals-row--net {
    background: var(--mbw-totals-net-bg);
    font-size : var(--mbw-totals-net-row-size);
}

.mbw-totals-row--net > span:first-child {
    color: var(--mbw-totals-net-label-color);
}

.mbw-totals-row--net > span:last-child {
    color      : var(--mbw-totals-net-value-color);
    font-size  : var(--mbw-totals-net-value-size);
    font-weight: 700;
}

.mbw-totals-row--words {
    font-size: var(--mbw-totals-words-size);
}

.mbw-totals-row--words > span:last-child {
    font-style : italic;
    font-weight: 500;
    color      : var(--mbw-totals-words-value-color);
    max-width  : 260px;
    text-align : right;
}

.mbw-totals-row--discount > span:first-child {
    color: var(--mbw-totals-discount-color);
}

.mbw-totals-row--discount {
    gap: 8px;
}

.mbw-totals-row--discount > span:last-child {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.mbw-discount-inputs {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex       : 1 1 auto;
    min-width  : 0;
    flex-wrap  : wrap;
}

.mbw-discount-inputs label {
    font-weight  : 600;
    margin       : 0;
    white-space  : nowrap;
}

/* Compact Fixed/Percentage custom-select inside totals (overrides form-field select chrome). */
.mbw-discount-inputs .mbw-disc-custom-select {
    position     : relative;
    min-width    : 7.5rem;
    max-width    : 9.5rem;
    width        : auto;
    flex         : 0 0 auto;
    margin-bottom: 0;
}

.mbw-discount-inputs .mbw-disc-custom-select .custom-select-trigger {
    width      : 100%;
    box-sizing : border-box;
    padding    : 4px 28px 4px 8px;
    min-height : 30px;
    height     : auto;
    font-size  : var(--mbw-totals-row-size, 13px);
    border-radius: 4px;
}

.mbw-discount-inputs .mbw-disc-custom-select .custom-select-arrow {
    right    : 8px;
    font-size: 10px;
}

.mbw-discount-inputs .mbw-disc-custom-select .custom-select-dropdown {
    z-index: 50;
}

.mbw-disc-select,
.mbw-disc-input {
    padding      : 4px 8px;
    border       : 1px solid var(--mbw-totals-input-border);
    border-radius: 4px;
    font-size    : var(--mbw-totals-row-size);
    background   : var(--mbw-totals-input-bg);
    color        : var(--mbw-totals-input-text);
}

.mbw-disc-select {
    min-width: 70px;
}

.mbw-disc-input {
    width     : 100px;
    text-align: right;
}

/* Keep disc value compact even when also tagged .mbw-field */
.mbw-discount-inputs .mbw-disc-input.mbw-field {
    width      : 100px;
    max-width  : 100px;
    min-height : 30px;
    padding    : 4px 8px;
    font-size  : var(--mbw-totals-row-size, 13px);
    box-sizing : border-box;
    flex       : 0 0 auto;
}

/* ============================================================================
   INFO GRID ? .mbw-info-grid (readonly context panel: return/refund snapshot, etc.)
   Roman Urdu: Form mein linked record ki summary ? 3-col grid, theme tokens se rang
   ============================================================================ */
.mbw-info-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 0;
    margin-top           : 12px;
    border               : 1px solid var(--mbw-info-grid-border);
    border-radius        : var(--mbw-info-grid-radius);
    overflow             : hidden;
    background           : var(--mbw-info-grid-bg);
}

.mbw-info-grid__item {
    display       : flex;
    flex-direction: column;
    gap           : 3px;
    padding       : 10px 14px;
    border-right  : 1px solid var(--mbw-info-grid-border);
    border-bottom : 1px solid var(--mbw-info-grid-border);
}

.mbw-info-grid__item:nth-child(3n) {
    border-right: none;
}

.mbw-info-grid__item:nth-last-child(-n+3) {
    border-bottom: none;
}

.mbw-info-grid__label {
    font-size     : var(--mbw-info-grid-label-size);
    font-weight   : 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color         : var(--mbw-info-grid-label-color);
}

.mbw-info-grid__value {
    font-size  : var(--mbw-info-grid-value-size);
    font-weight: 500;
    color      : var(--mbw-info-grid-value-color);
    word-break : break-word;
}

.mbw-info-grid__value--amount {
    color      : var(--mbw-totals-net-value-color);
    font-weight: 700;
}

.mbw-info-grid__value--paid {
    color      : var(--success);
    font-weight: 600;
}

.mbw-info-grid__value--remaining {
    color      : var(--danger);
    font-weight: 700;
}

@media (max-width: 767px) {
    .mbw-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mbw-info-grid__item:nth-child(3n) {
        border-right: 1px solid var(--mbw-info-grid-border);
    }

    .mbw-info-grid__item:nth-child(2n) {
        border-right: none;
    }
}

.mbw-record-link {
    color          : var(--primary);
    text-decoration: none;
    font-weight    : 500;
}

.mbw-record-link:hover {
    text-decoration: underline;
}

.mbw-empty {
    text-align: center;
    padding   : 40px 20px;
}

.mbw-empty-inner {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 8px;
    color         : var(--text-muted);
}

.mbw-empty-inner i {
    font-size: 32px;
}

.mbw-empty-items {
    text-align: center;
    padding   : 30px 20px;
    color     : var(--text-muted);
}

.mbw-data-table .mbw-empty-items {
    color: var(--mbw-table-cell-text-muted);
}

.mbw-data-table .mbw-empty-title {
    color: var(--mbw-table-cell-text);
}

.mbw-data-table .mbw-empty-hint {
    color: var(--mbw-table-cell-text-muted);
}

.mbw-empty-items-inner {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 8px;
}

.mbw-empty-items-inner i {
    font-size: 28px;
    color    : var(--warning);
}

.mbw-empty-title {
    font-size  : 14px;
    font-weight: 600;
    color      : var(--text-main);
}

.mbw-empty-hint {
    font-size: 12px;
    color    : var(--text-muted);
}

.mbw-item-name {
    display    : block;
    font-weight: 500;
    font-size  : var(--mbw-table-cell-size);
    line-height: 1.3;
    color      : var(--mbw-table-cell-text);
}

.mbw-item-code {
    display   : block;
    font-size : var(--mbw-table-hint-size);
    color     : var(--mbw-table-cell-text-muted);
    font-family: monospace;
    margin-top: 1px;
}

.mbw-measure-hint,
.mbw-rate-unit {
    font-size: var(--mbw-table-hint-size);
    color    : var(--mbw-table-cell-text-muted);
}

.mbw-tfoot-label {
    text-align : right;
    font-weight: 600;
}

.mbw-tfoot-value {
    font-weight: 600;
}

.mbw-items-add-row {
    margin-bottom: 16px;
}

.mbw-items-add-fields {
    display    : flex;
    gap        : 10px;
    align-items: center;
    flex-wrap  : wrap;
}

.mbw-items-add-fields .form-select,
.mbw-items-add-fields .form-input {
    flex    : 1;
    min-width: 120px;
}

.mbw-checkbox-label {
    display    : inline-flex;
    align-items: center;
    gap        : 6px;
    cursor     : pointer;
}

.mbw-prev-balance-label {
    display: flex;
    align-items: center;
}

.mbw-md-toolbar {
    display      : flex;
    gap          : 4px;
    padding      : 6px 8px;
    background   : var(--surface-soft, #f8fafc);
    border       : 1px solid var(--border-subtle);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}

.mbw-md-btn {
    background   : var(--card-bg);
    border       : 1px solid var(--border-subtle);
    border-radius: 4px;
    padding      : 4px 8px;
    cursor       : pointer;
    color        : var(--text-muted);
    font-size    : 12px;
    transition   : all 0.15s;
    line-height  : 1;
}

.mbw-md-btn:hover {
    background  : var(--primary-soft);
    color       : var(--primary);
    border-color: var(--primary);
}

.mbw-terms-textarea {
    min-height   : 120px;
    border-radius: 0 0 6px 6px !important;
    font-family  : monospace;
    font-size    : 13px;
    line-height  : 1.6;
    overflow     : hidden;
    resize       : none;
    width        : 100%;
    box-sizing   : border-box;
}

.mbw-md-preview-wrap {
    margin-top   : -4px;
    margin-bottom: 8px;
}

.mbw-md-preview-label {
    font-size     : 11px;
    font-weight   : 600;
    color         : var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom : 4px;
}

.mbw-md-preview-label--urdu {
    direction   : rtl;
    text-align  : right;
    font-family : var(--font-urdu);
}

.mbw-md-preview {
    border       : 1px solid var(--border-subtle);
    border-radius: 8px;
    padding      : 12px 14px;
    min-height   : 60px;
    max-height   : 300px;
    overflow-y   : auto;
    background   : var(--surface-soft, #f8fafc);
    font-size    : 13px;
    line-height  : 1.6;
    color        : var(--text-main);
}

.mbw-md-preview-urdu {
    font-family   : var(--font-urdu);
    font-size     : 15px;
    line-height   : 2;
    direction     : rtl;
    text-align    : right;
    unicode-bidi  : plaintext;
    overflow-wrap : break-word;
}

.mbw-md-preview-urdu ul,
.mbw-md-preview-urdu ol {
    margin              : 4px 0;
    padding             : 0;
    padding-inline-start: 1.4rem;
    list-style-position : inside;
}

.mbw-md-preview-empty {
    color     : var(--text-muted);
    font-style: italic;
    font-size : 12px;
}

.mbw-md-preview h1, .mbw-md-preview h2, .mbw-md-preview h3,
.mbw-md-preview h4, .mbw-md-preview h5, .mbw-md-preview h6 {
    margin     : 8px 0 4px;
    font-weight: 600;
    color      : var(--text-main);
}

.mbw-md-preview h1 { font-size: 20px; }
.mbw-md-preview h2 { font-size: 17px; }
.mbw-md-preview h3 { font-size: 15px; }

.mbw-md-preview p  { margin: 4px 0; }
.mbw-md-preview ul,
.mbw-md-preview ol { margin: 4px 0 4px 20px; padding: 0; }
.mbw-md-preview li { margin: 2px 0; }
.mbw-md-preview strong { font-weight: 700; }
.mbw-md-preview em { font-style: italic; }

.mbw-textarea-urdu {
    font-family: var(--font-urdu);
    font-size  : 16px;
    line-height: 2;
    text-align : right;
}

.mbw-label-urdu {
    font-family: var(--font-urdu);
}

.mbw-existing-attachments {
    margin-top: 8px;
}

.mbw-existing-att-row {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    margin-bottom: 4px;
}

.mbw-att-link {
    font-size: 13px;
}

.mbw-att-remove-label {
    font-size  : 12px;
    color      : var(--text-muted);
    display    : flex;
    align-items: center;
    gap        : 4px;
    cursor     : pointer;
}

.mbw-icon-primary {
    color: var(--primary);
}

.mbw-att-preview-file-icon {
    font-size: 40px;
    opacity  : 0.5;
}

.mbw-att-preview-more {
    font-size: 12px;
}

html[data-theme="dark"] .mbw-md-toolbar {
    background: var(--card-bg);
}

html[data-theme="dark"] .mbw-md-btn {
    background  : var(--surface-soft);
    border-color: var(--border-subtle);
    color       : var(--text-muted);
}

html[data-theme="dark"] .mbw-md-btn:hover {
    background: var(--primary-soft);
    color     : var(--primary);
}

/* ============================================================================
   J) BADGES & PILLS
   ============================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.badge-primary {
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.badge-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-warning {
    background: var(--warning-soft);
    color     : var(--warning);   /* Roman Urdu: Alert warning jaise ? linked */
    border    : 1px solid var(--warning-border);
}

/* Roman Urdu: badge-secondary ? Draft / inactive status ke liye muted gray */
.badge-secondary {
    background: var(--chip-bg);
    color     : var(--chip-text, var(--text-muted));
    border    : 1px solid var(--chip-border, var(--border-subtle));
}

.badge-info {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid var(--info-border);
}

.badge-light {
    background: var(--surface-soft);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: var(--r-pill);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pill-primary {
    background: var(--primary);
    color: var(--text-inverse);
}

.pill-success {
    background: var(--success);
    color: #ffffff;
}

.pill-danger {
    background: var(--danger);
    color: #ffffff;
}

.pill-warning {
    background: var(--warning);
    color: #ffffff;
}

.pill-info {
    background: var(--info);
    color: #ffffff;
}

.pill-light {
    background: var(--surface-soft);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

/* ============================================================================
   K) PAGE HEAD COMPONENT
   ============================================================================ */

.page-head {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}

.page-head--gradient {
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--card-bg) 100%);
    border-color: var(--primary-soft);
}

.page-head__title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
}

.page-head__sub {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.page-head--flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-head__content {
    flex: 1;
    min-width: 200px;
}

.page-head__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================================================
   L) FILTER BAR COMPONENT
   ============================================================================ */

.filter-bar {
    background: var(--filter-bg);
    border: 1px solid var(--filter-border);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin-bottom: 16px;
}

.filter-bar--flex {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
}

/* Roman Urdu: Safety rule ? purane modules mein form outer div ka child hai.
   Width 100% ensure karta hai ke form poori filter-bar pe faili rahe. */
.filter-bar > form {
    width: 100%;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 140px;
    justify-content: flex-end;
}

.filter-bar .form-label,
.filter-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--filter-label-text);
    background: var(--filter-label-bg);
    border-radius: var(--r-sm);
    margin-bottom: 0;
    width: fit-content;
}

.filter-bar .form-input:not(.mbw-fp-my-display):not(.mbw-fp-filter-alt),
.filter-bar .form-select {
    padding: 7px 10px;
    font-size: 12px;
    height: 36px;
    box-sizing: border-box;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    align-self: flex-end;
}

/* Roman Urdu: Customer search autocomplete ? form add row (shared across payment modules) */
.mbw-customer-add-row {
    margin-bottom: 16px;
}

.mbw-customer-add-fields {
    display    : flex;
    gap        : 10px;
    align-items: center;
    flex-wrap  : wrap;
}

.mbw-customer-search-wrap {
    position : relative;
    flex     : 0 1 50%;
    min-width: 200px;
    max-width: 50%;
}

.mbw-customer-search-wrap .form-input {
    width: 100%;
}

.mbw-customer-dropdown {
    position     : absolute;
    top          : 100%;
    left         : 0;
    right        : 0;
    max-height   : 250px;
    overflow-y   : auto;
    background   : var(--card-bg, var(--bg-main));
    border       : 1px solid var(--border-subtle);
    border-radius: 6px;
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index      : 100;
    margin-top   : 2px;
}

.mbw-customer-option {
    padding      : 8px 12px;
    cursor       : pointer;
    font-size    : 13px;
    color        : var(--text-main);
    border-bottom: 1px solid var(--border-subtle);
    display      : flex;
    align-items  : center;
    gap          : 8px;
}

.mbw-customer-option:last-child { border-bottom: none; }
.mbw-customer-option:hover { background: var(--primary-soft); color: var(--primary); }
.mbw-customer-option.mbw-customer-no-result { color: var(--text-muted); cursor: default; font-style: italic; }
.mbw-customer-option.mbw-customer-no-result:hover { background: transparent; color: var(--text-muted); }

.mbw-customer-opt-name { font-weight: 500; }
.mbw-customer-opt-code { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.mbw-customer-opt-bal  { font-size: 11px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.mbw-customer-bal-positive { color: var(--danger); }
.mbw-customer-bal-negative { color: var(--success); }

@media (max-width: 600px) {
    .mbw-customer-add-fields { flex-direction: column; }
    .mbw-customer-search-wrap { flex: 1 1 100%; max-width: 100%; }
}

/* ============================================================================
   M) META CHIPS
   ============================================================================ */

.meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 400;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    color: var(--chip-text);
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    border-radius: var(--r-sm);
    white-space: nowrap;
}

.meta-chip--primary {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary-soft);
}

.meta-chip--success {
    background: var(--success-soft);
    color: var(--success);
    border-color: var(--success-border);
}

.meta-chip--danger {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-border);
}

.meta-chip--warning {
    background: var(--warning-soft);
    color: #92400e;
    border-color: var(--warning-border);
}

html[data-theme="dark"] .meta-chip--warning {
    color: var(--warning);
}

.meta-chip--info {
    background: var(--info-soft);
    color: var(--info);
    border-color: var(--info-border);
}

.mbw-multi-select-empty {
    margin: 0;
    color: var(--text-muted);
}

/* ============================================================================
   M2) MULTI-SELECT SELECTED CHIPS (reusable)
   ============================================================================ */

.mbw-multi-select-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.65rem;
}

.mbw-multi-select-chip {
    gap: 0.35rem;
    font-family: inherit;
}

.mbw-multi-select-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    opacity: 0.75;
    cursor: pointer;
    line-height: 1;
}

.mbw-multi-select-chip-remove:hover {
    opacity: 1;
}

/* ============================================================================
   N) ACTION ICON SYSTEM
   ============================================================================ */

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.action-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ring);
}

.action-btn--view {
    color: var(--info);
}

.action-btn--view:hover {
    background: var(--info-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--edit {
    color: var(--warning);
}

.action-btn--edit:hover {
    background: var(--warning-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--delete {
    color: var(--danger);
}

.action-btn--delete:hover {
    background: var(--danger-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--pdf {
    color: var(--danger);
}

.action-btn--pdf:hover {
    background: var(--danger-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--print {
    color: var(--primary);
}

.action-btn--print:hover {
    background: var(--primary-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--download {
    color: var(--success);
}

.action-btn--download:hover {
    background: var(--success-soft);
    box-shadow: var(--shadow-sm);
}

.action-btn--email {
    color: var(--info);
}

.action-btn--email:hover {
    background: var(--info-soft);
    box-shadow: var(--shadow-sm);
}

.action-btns {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Roman Urdu: 2-row stack ? Print+Edit upar, Delete neeche center (list tables) */
.action-btns--stack {
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.action-btns--stack .action-btns-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.action-btns--stack .action-btns-row--solo {
    justify-content: center;
}

/* ============================================================================
   O) CONFIRMATION DIALOG (UPDATED FROM UI DEMO)
   ============================================================================ */

.confirm-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.7) !important;
    backdrop-filter: blur(4px);
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999999 !important;
    padding: 20px;
}

.confirm-modal.is-open {
    display: flex !important;
}

html[data-theme="dark"] .confirm-modal {
    background: rgba(0, 0, 0, 0.85) !important;
}

.confirm-dialog {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 100%;
}

.confirm-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 16px;
}

.confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 24px;
}

.confirm-icon.danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.confirm-icon.warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.confirm-icon.success {
    background: var(--success-soft);
    color: var(--success);
}

.confirm-icon.info {
    background: var(--info-soft);
    color: var(--info);
}

.confirm-title-wrap {
    flex: 1;
}

.confirm-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px 0;
}

.confirm-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

.confirm-body {
    padding: 24px;
}

.confirm-message {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
}

.confirm-footer {
    padding: 20px 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}

/* UAT-UI-FIX-05: equal action sizing; Cancel left / Confirm right via space-between */
.confirm-footer .btn {
    min-height: 40px;
    min-width: 7.5rem;
    flex: 0 1 auto;
}

/*
 * Dialog Cancel must stay a visible NEUTRAL control.
 * Global .btn-secondary is a transparent primary outline (Record View style) and can
 * disappear against the dialog surface — that made Cancel look missing during UAT.
 */
.confirm-footer .btn-secondary,
.confirm-footer #mbwConfirmCancel {
    background: var(--surface-soft, #f1f5f9);
    color: var(--text-main);
    border-color: var(--border-strong, var(--border-subtle));
}

.confirm-footer .btn-secondary:hover:not(:disabled),
.confirm-footer #mbwConfirmCancel:hover:not(:disabled) {
    background: var(--border-subtle, #e2e8f0);
    color: var(--text-main);
    border-color: var(--border-strong, #94a3b8);
    box-shadow: none;
}

/* Dark: --surface-soft equals --card-bg — use border tone so Cancel stays visible */
html[data-theme="dark"] .confirm-footer .btn-secondary,
html[data-theme="dark"] .confirm-footer #mbwConfirmCancel {
    background: var(--border-subtle);
    color: var(--text-main);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .confirm-footer .btn-secondary:hover:not(:disabled),
html[data-theme="dark"] .confirm-footer #mbwConfirmCancel:hover:not(:disabled) {
    background: var(--border-strong);
    color: var(--text-main);
    border-color: var(--text-muted);
}

.confirm-icon.primary {
    background: var(--info-soft, var(--primary-soft));
    color: var(--info, var(--primary));
}

/* ============================================================================
   P) TOAST NOTIFICATION SYSTEM (MBW GLOBAL)
   Roman Urdu: Har page pe globally available toast notifications.
   Usage: MBW.toastSuccess/Error/Warning/Info(msg, {title, duration})
   All styling yahan se ? ek jagah change karo, poore ERP mein update.
   ============================================================================ */

/* Roman Urdu: Toast container ? screen ke top-center mein fixed, toasts stack hote hain */
.mbw-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
    width: max-content;
    max-width: min(420px, calc(100vw - 40px));
}

/* Roman Urdu: Individual toast ? slide-in from top with spring animation */
.mbw-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--card-bg);
    border-radius: var(--r-md);
    padding: 14px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.07);
    border-left: 4px solid var(--primary);
    pointer-events: all;
    transform: translateY(-24px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.25s ease;
    width: 100%;
}

.mbw-toast.mbw-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

.mbw-toast.mbw-toast--hiding {
    transform: translateY(-16px);
    opacity: 0;
    transition: transform 0.25s ease-in, opacity 0.2s ease-in;
}

/* Roman Urdu: Toast type colors ? border-left color */
.mbw-toast--success { border-left-color: var(--success); }
.mbw-toast--error   { border-left-color: var(--danger);  }
.mbw-toast--warning { border-left-color: var(--warning); }
.mbw-toast--info    { border-left-color: var(--info);    }

/* Roman Urdu: Toast icon ? colored circle */
.mbw-toast__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.mbw-toast--success .mbw-toast__icon { background: var(--success-soft); color: var(--success); }
.mbw-toast--error   .mbw-toast__icon { background: var(--danger-soft);  color: var(--danger);  }
.mbw-toast--warning .mbw-toast__icon { background: var(--warning-soft); color: var(--warning); }
.mbw-toast--info    .mbw-toast__icon { background: var(--info-soft);    color: var(--info);    }

/* Roman Urdu: Toast text content */
.mbw-toast__body {
    flex: 1;
    min-width: 0;
}

.mbw-toast__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-main);
    margin: 0 0 3px 0;
    line-height: 1.4;
}

.mbw-toast__msg {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    word-break: break-word;
}

/* Roman Urdu: Close button */
.mbw-toast__close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    flex-shrink: 0;
    transition: color 0.2s ease;
    line-height: 1;
    margin-top: 2px;
}

.mbw-toast__close:hover { color: var(--text-main); }

/* Roman Urdu: Progress bar ? auto-dismiss countdown (duration CSS variable se set hoti hai) */
.mbw-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 2px 0 4px;
    animation: mbwToastProgress var(--toast-duration, 4s) linear forwards;
}

.mbw-toast--success .mbw-toast__progress { background: var(--success); }
.mbw-toast--error   .mbw-toast__progress { background: var(--danger);  }
.mbw-toast--warning .mbw-toast__progress { background: var(--warning); }
.mbw-toast--info    .mbw-toast__progress { background: var(--info);    }

@keyframes mbwToastProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* Roman Urdu: Dark mode */
html[data-theme="dark"] .mbw-toast {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Roman Urdu: Mobile ? full width, top-center same rakho */
@media (max-width: 520px) {
    .mbw-toast-container {
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 20px);
        width: max-content;
    }
}

/* Roman Urdu: Purane .toast-message classes backward compat ke liye hidden */
.toast-message { display: none !important; }

/* ============================================================================
   Q) MODAL COMPONENT (NEW - ADDED)
   ============================================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-backdrop.show {
    opacity: 1;
    visibility: visible;
}

html[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal.show,
.modal.is-open {
    opacity: 1;
    visibility: visible;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-soft);
}

.modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.modal-body {
    padding: 18px;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-soft);
}

.modal-sm {
    max-width: 360px;
}

.modal-lg {
    max-width: 700px;
}

.modal-xl {
    max-width: 900px;
}

/* ============================================================================
   R) ALERT COMPONENT (NEW - ADDED)
   ============================================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid;
    border-radius: var(--r-md);
    margin-bottom: 16px;
}

.alert-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.alert-dismiss {
    flex-shrink: 0;
    padding: 0;
    font-size: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.alert-dismiss:hover {
    opacity: 1;
}

.alert-success {
    background: var(--success-soft);
    border-color: var(--success-border);
    color: var(--success);
}

.alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger-border);
    color: var(--danger);
}

.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning-border);
    color: #92400e;
}

html[data-theme="dark"] .alert-warning {
    color: var(--warning);
}

.alert-info {
    background: var(--info-soft);
    border-color: var(--info-border);
    color: var(--info);
}

/* ============================================================================
   S) AVATAR COMPONENT (NEW - ADDED)
   ============================================================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-inverse);
    background: var(--primary);
    border-radius: var(--r-pill);
    overflow: hidden;
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-xs {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-lg {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.avatar-xl {
    width: 72px;
    height: 72px;
    font-size: 24px;
}

.avatar-group {
    display: flex;
}

.avatar-group .avatar {
    border: 2px solid var(--card-bg);
    margin-left: -10px;
}

.avatar-group .avatar:first-child {
    margin-left: 0;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================================
   T) SPINNER / LOADING COMPONENT (NEW - ADDED)
   ============================================================================ */

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Spinner colors */
.spinner-primary {
    border-top-color: var(--primary);
}

.spinner-success {
    border-top-color: var(--success);
}

.spinner-danger {
    border-top-color: var(--danger);
}

.spinner-warning {
    border-top-color: var(--warning);
}

/* ============================================================================
   U) DROPDOWN COMPONENT (BASIC)
   ============================================================================ */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 160px;
    padding: 6px 0;
    background: var(--dd-bg);
    border: 1px solid var(--dd-border);
    border-radius: var(--r-md);
    box-shadow: var(--dd-shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.dropdown-menu.show,
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--dd-text);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.dropdown-item:hover {
    background: var(--dd-opt-hover-bg);
}

.dropdown-item.active,
.dropdown-item.selected {
    background: var(--dd-opt-selected-bg);
    color: var(--dd-opt-selected-text);
}

.dropdown-item:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dd-ring);
}

.dropdown-item .icon {
    color: var(--dd-muted);
    font-size: 14px;
}

.dropdown-divider {
    height: 1px;
    margin: 6px 0;
    background: var(--dd-border);
}

.dropdown-header {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--dd-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ============================================================================
   V) UTILITIES
   ============================================================================ */

/* Flex */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Grid */
.d-grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-5 { gap: 20px; }
.gap-6 { gap: 24px; }

/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-auto { margin-left: auto; }
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pl-0 { padding-left: 0; }
.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pr-0 { padding-right: 0; }
.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

/* Text */
.text-main { color: var(--text-main); }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-inverse { color: var(--text-inverse); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-base { font-size: 13px; }
.text-lg { font-size: 15px; }
.text-xl { font-size: 17px; }
.text-2xl { font-size: 20px; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.text-nowrap { white-space: nowrap; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Display */
.hidden { display: none !important; visibility: hidden !important; }
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }

/* Width/Height */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-50 { width: 50%; }
.max-w-full { max-width: 100%; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-0 { min-height: 0; }

/* Borders */
.border { border: 1px solid var(--border-subtle); }
.border-0 { border: none; }
.border-top { border-top: 1px solid var(--border-subtle); }
.border-bottom { border-bottom: 1px solid var(--border-subtle); }
.border-left { border-left: 1px solid var(--border-subtle); }
.border-right { border-right: 1px solid var(--border-subtle); }
.border-strong { border-color: var(--border-strong); }
.border-primary { border-color: var(--primary); }
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--r-sm); }
.rounded { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-full { border-radius: var(--r-pill); }

/* Backgrounds */
.bg-page { background-color: var(--page-bg); }
.bg-card { background-color: var(--card-bg); }
.bg-surface { background-color: var(--surface-soft); }
.bg-primary { background-color: var(--primary); }
.bg-primary-soft { background-color: var(--primary-soft); }
.bg-success { background-color: var(--success); }
.bg-success-soft { background-color: var(--success-soft); }
.bg-danger { background-color: var(--danger); }
.bg-danger-soft { background-color: var(--danger-soft); }
.bg-warning { background-color: var(--warning); }
.bg-warning-soft { background-color: var(--warning-soft); }
.bg-info { background-color: var(--info); }
.bg-info-soft { background-color: var(--info-soft); }
.bg-transparent { background-color: transparent; }

/* Shadows */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Z-index */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-move { cursor: move; }

/* Transitions */
.transition {
    transition: background-color 0.15s ease, 
                border-color 0.15s ease, 
                color 0.15s ease, 
                box-shadow 0.15s ease,
                opacity 0.15s ease;
}

.transition-fast {
    transition: background-color 0.1s ease, 
                border-color 0.1s ease, 
                color 0.1s ease, 
                box-shadow 0.1s ease,
                opacity 0.1s ease;
}

.transition-none {
    transition: none;
}

/* ============================================================================
   W) RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
}

@media (max-width: 575.98px) {
    .page-head--flex {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-bar--flex {
        flex-direction: column;
        align-items: stretch;
    }
    
    .filter-group {
        min-width: 100%;
    }
    
    .confirm-dialog {
        max-width: 95%;
    }
    
    .confirm-header {
        padding: 20px 16px;
    }
    
    .confirm-body {
        padding: 20px 16px;
    }
    
    .confirm-footer {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }
    
    .confirm-footer .btn {
        width: 100%;
        min-width: 0;
    }
    
    .toast-message {
        min-width: 280px;
        max-width: 90%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================================
   MBW MODULE FRAMEWORK ? Shifted from sale-test.css
   Roman Urdu: Yeh classes SaleTest module mein test ho kar finalize hui hain.
   Ab saare modules (Sale, Purchase, Receipt, etc.) mein use hongi.
   ============================================================================ */

/* ============================================================================
   0. DESIGN TOKEN CONTROL PANEL ? module variables (:root)
   Roman Urdu: Module/form/table/totals COLORS yahan se control karo.
   Light defaults neeche | Dark overrides ~3532 | Field surfaces ~3620
   ============================================================================ */
:root {
    /* Roman Urdu: Brand / Primary Color */
    --mbw-primary         : #2563eb;                      /* Blue ? icon, label, header, focus */
    --mbw-primary-soft    : rgba(37, 99, 235, 0.10);      /* Light blue ? section header bg */

    /* Roman Urdu: Left Accent Border Colors ? do jagah use hote hain:
       1. .page-header  ? page-header-accent (primary blue)
       2. .mbw-section-card ? section-card-accent (teal)
       Dark mode mein lighter versions override karte hain neeche. */
    --mbw-page-header-accent  : #2563eb;                  /* Blue ? page header left border */
    --mbw-section-card-accent : #0d9488;                  /* Teal ? section card left border */

    /* Roman Urdu: Danger / Error Color */
    --mbw-danger          : #ef4444;                      /* Red ? error border, error text */

    /* Roman Urdu: Border Radius */
    --mbw-r-sm            : 4px;                          /* Small ? chips, small buttons */
    --mbw-r-md            : 8px;                          /* Medium ? buttons, title bar */
    --mbw-r-lg            : 12px;                         /* Large ? section cards */

    /* Roman Urdu: Shadow */
    --mbw-shadow-xs       : 0 1px 2px rgba(0, 0, 0, 0.04); /* Title bar ka shadow */

    /* Roman Urdu: Field Font Size */
    --mbw-field-size      : 14px;                         /* Sab fields ka font size (compact 14px) */

    /* Roman Urdu: Field label aur icon color ? default primary blue.
       Dark mode block mein override hota hai lighter blue se.
       Ye variables change karo ? sab modules mein label/icon color update ho jata hai. */
    --mbw-field-label-color : var(--mbw-primary);             /* Float label ka text color */
    --mbw-field-icon-color  : var(--mbw-primary);             /* Float icon ka color */

    /* =========================================================
       GLOBAL FORM LAYOUT VARIABLES ? Task #26 (P1 CSS Foundation)
       Roman Urdu: Yeh 11 variables har module task mein use honge.
       Ek jagah change karo ? poora ERP form layout update ho jata hai.
       ========================================================= */

    /* Form Header Card (mbw-form-header) */
    --mbw-form-header-bg          : var(--mbw-primary-soft);  /* "Add New..." header ka bg */
    --mbw-form-header-title-color : var(--mbw-text-main);     /* Header title text color */
    --mbw-form-header-border      : var(--mbw-border-subtle); /* Header bottom border */

    /* Section Cards (mbw-section-card) */
    --mbw-section-card-bg         : var(--mbw-card-bg);       /* Section card background */
    --mbw-section-card-border     : var(--mbw-border-subtle); /* Section card border */

    /* Section Headers (mbw-section-header) */
    --mbw-section-header-bg           : transparent;              /* Inner section header ? transparent */
    --mbw-section-header-title-color  : var(--mbw-text-main);     /* Section title text */
    --mbw-section-header-border       : var(--mbw-border-subtle); /* Section header bottom border */

    /* Float Hint */
    --mbw-hint-color    : #94a3b8;  /* Hint text color (muted) */
    --mbw-hint-font-size: 12px;     /* Hint font size (compact 12px) */

    /* Form Button Actions */
    --mbw-form-btn-accent : var(--mbw-page-header-accent);    /* Left border accent */

    /* =========================================================
       TABLE VARIABLES ? .mbw-data-table (items / product lines table)
       Roman Urdu: LIGHT MODE colors ? yahan badlo, header + rows + border
       Dark mode alag block mein hai (~line 3536)
       ========================================================= */
    --mbw-table-head-bg   : #00245f;                      /* Header row background */
    --mbw-table-head-text : #ffffff;                      /* Header row text */
    --mbw-table-foot-bg   : #dedede;                      /* Sub-total row background (header se alag) */
    --mbw-table-foot-text : #0059e8;                      /* Sub-total row text */
    --mbw-table-row-bg    : #ffffff;                      /* Odd rows (1, 3, 5?) */
    --mbw-table-row-alt   : #f4f4f4;                      /* Even rows (2, 4, 6?) ? zebra stripe */
    --mbw-table-row-hover : #e4effe;                      /* Row hover */
    --mbw-table-border    : #acacac;                      /* Table border (light default) */
    --mbw-table-head-size : 13px;                         /* Header font size */
    --mbw-table-cell-size : 14px;                         /* Data cell + input font size */
    --mbw-table-cell-text : #000000;                      /* Data row main text (site se alag) */
    --mbw-table-cell-text-muted : #717171;                /* Product code, hints, rate unit */
    --mbw-table-hint-size : 12px;                         /* Code + measure/rate hint size */
    --mbw-table-foot-size : 13px;                         /* Sub-total row font size */

    /* =========================================================
       TOTALS CARD VARIABLES ? .mbw-totals-card (Sub Total, Net Payable?)
       Roman Urdu: LIGHT MODE ? poora totals box yahan se control karo
       Dark mode alag block (~line 3558)
       ========================================================= */
    --mbw-totals-card-bg         : #ffffff;               /* Box ka background */
    --mbw-totals-border          : #acacac;               /* Box ki outer border */
    --mbw-totals-row-border      : #e2e8f0;               /* Har row ke neeche line */
    --mbw-totals-label-color     : #64748b;               /* Left labels (Sub Total, Tax?) */
    --mbw-totals-value-color     : #1e293b;               /* Right amounts (Rs. 0.00) */
    --mbw-totals-row-size        : 13px;                  /* Normal row font */
    --mbw-totals-discount-color  : #dc2626;               /* Discount label (laal) */
    --mbw-totals-net-bg          : rgba(37, 99, 235, 0.10); /* Net Payable row background */
    --mbw-totals-net-label-color : #64748b;               /* Net Payable label */
    --mbw-totals-net-value-color : #2563eb;               /* Net Payable amount (neela) */
    --mbw-totals-net-row-size    : 15px;                  /* Net Payable row font */
    --mbw-totals-net-value-size  : 16px;                  /* Net Payable amount font */
    --mbw-totals-words-size      : 12px;                  /* Amount in Words row */
    --mbw-totals-words-value-color: #1e293b;              /* Amount in Words text */
    --mbw-totals-input-bg        : #ffffff;               /* Discount dropdown/input bg */
    --mbw-totals-input-border    : #c5c5c5;               /* Discount dropdown/input border */
    --mbw-totals-input-text      : #000000;               /* Discount dropdown/input text */

    /* =========================================================
       INFO GRID VARIABLES ? .mbw-info-grid (readonly snapshot panel)
       Roman Urdu: Return/refund context box ? label + value cells
       ========================================================= */
    --mbw-info-grid-bg           : #f8fafc;               /* Panel background */
    --mbw-info-grid-border       : #e2e8f0;               /* Cell borders */
    --mbw-info-grid-label-color  : #94a3b8;               /* Uppercase labels */
    --mbw-info-grid-value-color  : #1e293b;               /* Value text */
    --mbw-info-grid-label-size   : 12px;                  /* Label font */
    --mbw-info-grid-value-size   : 14px;                  /* Value font */
    --mbw-info-grid-radius       : 8px;                   /* Outer radius */

    /* =========================================================
       RECORD VIEW TABLE VARIABLES ? .mbw-rv-table ke liye
       Roman Urdu: Sab modules ke record view tables ka common look.
       Ek jagah change karo ? sab modules mein apply hoga.
       ========================================================= */
    --mbw-rv-header-font-size  : 15px;                      /* Header text size */
    --mbw-rv-header-font-weight: 600;                       /* Header bold */
    --mbw-rv-header-bg         : #06674b;   /* Header background */
    --mbw-rv-header-text       : #ffffff;                  /* Header text (items table se alag) */
    --mbw-rv-row-font-size     : 14px;                      /* Data row font size */
    --mbw-rv-cell-text         : #000000;                  /* Data row main text */
    --mbw-rv-cell-text-muted   : #4b4b4b;                  /* Muted cells, empty hint */
    --mbw-rv-link-color        : var(--mbw-primary);        /* Invoice # link color */
    --mbw-rv-cell-padding      : 8px 10px;                  /* Cell padding (th + td) */
    --mbw-rv-border-color      : #d3d3d3; /* Table border */
    --mbw-rv-row-bg            : #ffffff;                   /* Odd rows (1, 3, 5?) */
    --mbw-rv-row-alt           : #d4d4d4;                   /* Even rows ? zebra stripe */
    --mbw-rv-row-hover         : #eff6ff;                   /* Row hover */
    --mbw-rv-sort-icon-size    : 9px;                       /* Legacy FA sort icons only (LEG-SORT-005) */

    /* =========================================================
       PAGINATION VARIABLES ? .mbw-pager ke liye
       Roman Urdu: Record view ke neeche pagination bar ka look.
       Ek jagah change karo ? har module mein same dikhega.
       ========================================================= */
    --mbw-pager-btn-size       : 34px;                        /* Button min-width + height */
    --mbw-pager-btn-font-size  : 13px;                        /* Button text size */
    --mbw-pager-btn-font-weight: 500;                         /* Button text weight */
    --mbw-pager-btn-radius     : 6px;                         /* Button border radius */
    --mbw-pager-btn-padding    : 0 10px;                      /* Button padding */
    --mbw-pager-btn-bg         : var(--mbw-card-bg);          /* Button background */
    --mbw-pager-btn-border     : var(--mbw-field-border);     /* Button border color */
    --mbw-pager-btn-text       : var(--mbw-text-main);        /* Button text color */
    --mbw-pager-active-bg      : var(--mbw-primary);          /* Active page bg */
    --mbw-pager-active-text    : #ffffff;                     /* Active page text */
    --mbw-pager-active-shadow  : 0 2px 6px rgba(59, 130, 246, 0.35); /* Active glow */
    --mbw-pager-hover-bg       : var(--mbw-primary-soft);     /* Hover background */
    --mbw-pager-hover-text     : var(--mbw-primary);          /* Hover text + border */
    --mbw-pager-nav-font-size  : 12px;                        /* Nav icon size */
    --mbw-pager-nav-color      : var(--mbw-text-muted);       /* Nav icon color */
    --mbw-pager-disabled-opacity: 0.38;                       /* Disabled button opacity */
    --mbw-pager-info-font-size : 13px;                        /* Info text size */
    --mbw-pager-info-color     : var(--mbw-text-muted);       /* Info text color */
    --mbw-pager-count-color    : var(--mbw-text-main);        /* Count bold text color */

}

/* ============================================================================
   0b. MODULE VARIABLES ? Dark Mode
   Roman Urdu: Yeh variables sirf dark mode mein apply hote hain.
   mbw-theme.css ke dark mode values se match karte hain ? float label
   background aur borders dark card ke saath proper dikhte hain.
   ============================================================================ */
html[data-theme="dark"] {
    /* Roman Urdu: Dark card background ? float label ke background mein use hota hai */
    --mbw-card-bg         : #1e293b;

    /* Roman Urdu: Dark mode borders */
    --mbw-border-subtle   : #334155;
    --mbw-container-border: #334155;

    /* Roman Urdu: Left Accent Border ? dark mode mein lighter versions */
    --mbw-page-header-accent  : #60a5fa;                  /* Light blue ? dark bg pe readable */
    --mbw-section-card-accent : #14b8a6;                  /* Light teal ? dark bg pe readable */

    /* Roman Urdu: Dark mode primary-soft ? outer header background */
    --mbw-primary-soft    : rgba(59, 130, 246, 0.15);

    /* Roman Urdu: Dark mode text colors */
    --mbw-text-main       : #e2e8f0;
    --mbw-text-muted      : #94a3b8;

    /* Roman Urdu: Dark mode field styling */
    --mbw-field-bg        : transparent;                  /* Field bg: transparent ? section body ka bg dikhega */
    --mbw-field-border    : #334155;
    --mbw-field-text      : #e2e8f0;

    /* Roman Urdu: Dark mode mein primary lighter blue hota hai (dark bg pe readable).
       --mbw-primary override se .mbw-field focus ring aur custom-select border bhi update */
    --mbw-primary           : #60a5fa;                        /* Light blue ? dark bg pe readable */
    --mbw-field-label-color : #60a5fa;                        /* Float label: lighter blue */
    --mbw-field-icon-color  : #60a5fa;                        /* Float icon: lighter blue */

    /* Roman Urdu: Dark mode danger */
    --mbw-danger-soft     : rgba(239, 68, 68, 0.12);

    /* Roman Urdu: Table variables ? dark mode overrides */
    --mbw-table-head-bg   : var(--mbw-primary-soft);      /* Header row background */
    --mbw-table-head-text : #e2e8f0;                      /* Header row text */
    --mbw-table-foot-bg   : #1a2744;                      /* Sub-total row (header se alag) */
    --mbw-table-foot-text : #e2e8f0;                      /* Sub-total text */
    --mbw-table-row-bg    : var(--mbw-card-bg);           /* Odd rows */
    --mbw-table-row-alt   : #192438;                      /* Even rows ? zebra stripe */
    --mbw-table-row-hover : #1e2d44;                      /* Row hover */
    --mbw-table-border    : var(--mbw-field-border);      /* Border: field border se match */
    --mbw-table-cell-text : #e2e8f0;                      /* Data row main text */
    --mbw-table-cell-text-muted : #94a3b8;                /* Product code, hints */

    /* Roman Urdu: Totals card ? dark mode overrides */
    --mbw-totals-card-bg         : var(--mbw-card-bg);
    --mbw-totals-border          : var(--mbw-field-border);
    --mbw-totals-row-border      : var(--mbw-border-subtle);
    --mbw-totals-label-color     : var(--mbw-text-muted);
    --mbw-totals-value-color     : var(--mbw-text-main);
    --mbw-totals-discount-color  : #f87171;
    --mbw-totals-net-bg          : rgba(96, 165, 250, 0.15);
    --mbw-totals-net-label-color : var(--mbw-text-muted);
    --mbw-totals-net-value-color : #60a5fa;
    --mbw-totals-words-value-color: var(--mbw-text-main);
    --mbw-totals-input-bg        : var(--mbw-card-bg);
    --mbw-totals-input-border    : var(--mbw-field-border);
    --mbw-totals-input-text      : var(--mbw-text-main);

    /* Roman Urdu: Info grid ? dark mode overrides */
    --mbw-info-grid-bg           : var(--mbw-card-bg);
    --mbw-info-grid-border       : var(--mbw-field-border);
    --mbw-info-grid-label-color  : var(--mbw-hint-color);
    --mbw-info-grid-value-color  : var(--mbw-text-main);

    /* Roman Urdu: Record view table ? dark mode overrides */
    --mbw-rv-header-bg         : var(--mbw-primary-soft);   /* Dark primary-soft */
    --mbw-rv-header-text       : #e2e8f0;                  /* Header text */
    --mbw-rv-border-color      : var(--mbw-field-border);   /* Dark field border */
    --mbw-rv-cell-text         : #e2e8f0;                  /* Data row main text */
    --mbw-rv-cell-text-muted   : #94a3b8;                  /* Muted / empty hint */
    --mbw-rv-link-color        : #60a5fa;                   /* Invoice link */
    --mbw-rv-row-bg            : transparent;               /* Odd rows */
    --mbw-rv-row-alt           : #192438;                   /* Even rows ? zebra */
    --mbw-rv-row-hover         : var(--mbw-table-row-hover); /* Row hover */

    /* Roman Urdu: Pagination ? dark mode overrides */
    --mbw-pager-btn-bg         : var(--mbw-card-bg);          /* Dark card bg */
    --mbw-pager-btn-border     : var(--mbw-field-border);     /* Dark field border */
    --mbw-pager-btn-text       : var(--mbw-text-main);        /* Dark text */
    --mbw-pager-active-bg      : var(--mbw-primary);          /* Same primary */
    --mbw-pager-active-text    : #ffffff;                     /* White stays */
    --mbw-pager-hover-bg       : var(--mbw-primary-soft);     /* Dark primary-soft */
    --mbw-pager-hover-text     : var(--mbw-primary);          /* Dark primary */
    --mbw-pager-nav-color      : var(--mbw-text-muted);       /* Dark muted */
    --mbw-pager-info-color     : var(--mbw-text-muted);       /* Dark muted info */
    --mbw-pager-count-color    : var(--mbw-text-main);        /* Dark main text */

        /* Roman Urdu: Dropdown ke liye --dd-* variables ab mbw-theme.css se aate hain
       Wahan dark mode mein already sahi values hain ? yahan kuch define nahi karna */
}

/* ============================================================================
   0c. MODULE VARIABLES ? Light Mode Only
   Roman Urdu: Yeh variables sirf light mode mein change karte hain.
   Dark mode mein mbw-theme.css ke global variables naturally apply hote hain.
   Agar field ka background, border, ya koi bhi color change karna ho ?
   sirf yahan aao ? sirf yeh ek jagah badlo.
   ============================================================================ */
html:not([data-theme="dark"]) {
    /* Roman Urdu: Surface / Background Colors */
    --mbw-card-bg         : #ffffff;                      /* Cards, field label bg */
    --mbw-danger-soft     : rgba(239, 68, 68, 0.08);      /* Reset button hover bg */

    /* Roman Urdu: Border Colors */
    --mbw-border-subtle   : #e2e8f0;                      /* Section cards, dividers, buttons */
    --mbw-container-border: #c5d5ea;                      /* White-bg containers ki border */

    /* Roman Urdu: Text Colors */
    --mbw-text-main       : #1e293b;                      /* Body / field text */
    --mbw-text-muted      : #64748b;                      /* Muted text, reset button */

    /* Roman Urdu: Form Field ? sab inputs aur selects */
    --mbw-field-bg        : #ffffff;                      /* Field ka background */
    --mbw-field-border    : #b8c8d8;                      /* Field ka border */
    --mbw-field-text      : var(--mbw-text-main);         /* Field ke andar ka text */

    /* Roman Urdu: Table / RV / Pager colors ? :root block ~3449+ se aate hain.
       Yahan dubara mat likho (pehle override conflict hota tha). */
}

/* ============================================================================
   PAGE HEADER ? Global Title Bar System
   Roman Urdu: Har module ka page title bar ? naam, icon, right mein buttons.
   Ek hi jagah define hai ? layout + visual + dark mode + responsive sab yahan.
   Source: mbw-theme.css | Globally available ? kisi module CSS ki zaroorat nahi.
   layout.css se hata di ? woh sirf app shell ke liye hai.
   ============================================================================ */

/* Roman Urdu: Outer card ? white bg, border, shadow, flex row */
.page-header,
.content-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 12px;
    flex-wrap       : wrap;
    margin-bottom   : 16px;
    background      : var(--card-bg);
    border          : 1px solid var(--border-subtle);
    border-left     : 3px solid var(--mbw-page-header-accent);
    border-radius   : var(--r-md);
    padding         : 12px 18px;
    box-shadow      : var(--shadow-xs);
}

/* Roman Urdu: Left side ? icon + title group */
.page-header-left {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex        : 1;
    min-width   : 0;
}

/* Roman Urdu: Icon box ? 38?38px rounded, primary-soft bg, primary color */
/* Light mode: rgba(37,99,235,0.10) bg, #2563eb icon */
/* Dark mode:  rgba(59,130,246,0.15) bg, #3b82f6 icon ? auto via --primary-soft + --primary vars */
.page-header-icon {
    width           : 38px;
    height          : 38px;
    border-radius   : var(--r-md);
    background      : var(--primary-soft);
    color           : var(--primary);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 16px;
    flex-shrink     : 0;
}

/* Roman Urdu: Title + subtitle vertical stack */
.page-header-text {
    display        : flex;
    flex-direction : column;
    min-width      : 0;
}

/* Roman Urdu: Page title ? primary blue, bold */
.page-title {
    margin      : 0 0 2px 0;
    font-size   : var(--mbw-font-page-title-size, 22px);
    font-weight : 700;
    color       : var(--primary);
    line-height : 1.25;
}

/* Roman Urdu: Subtitle ? muted, 14px */
.page-subtitle,
.page-breadcrumb {
    margin      : 0;
    font-size   : var(--mbw-font-page-subtitle-size, 14px);
    color       : var(--text-muted);
    line-height : 1.4;
}

/* Roman Urdu: Breadcrumb links */
.page-breadcrumb a {
    color           : var(--primary);
    text-decoration : none;
}
.page-breadcrumb a:hover {
    text-decoration : underline;
}
.page-breadcrumb .separator {
    margin : 0 6px;
    color  : var(--text-soft);
}

/* Roman Urdu: Right side ? buttons */
.page-header-right,
.page-header-actions {
    display     : flex;
    align-items : center;
    gap         : 10px;
    flex-wrap   : wrap;
    flex-shrink : 0;
}

/* Roman Urdu: Tablet ? column stack */
@media (max-width: 767.98px) {
    .page-header,
    .content-header {
        flex-direction : column;
        align-items    : flex-start;
    }
    .page-header-right,
    .page-header-actions {
        width           : 100%;
        justify-content : flex-start;
    }
}

/* Roman Urdu: Mobile ? tighter gap, smaller title */
@media (max-width: 575.98px) {
    .page-header,
    .content-header {
        flex-direction : column;
        align-items    : flex-start;
        gap            : 12px;
    }
    .page-header-right,
    .page-header-actions {
        width           : 100%;
        justify-content : flex-start;
    }
    .page-title {
        font-size : 15px;
    }
}

/* ============================================================================
   2. .mbw-section-card
   Roman Urdu: Collapsible section wrapper ? border, border-radius, bg.
   JS se .mbw-section-body ka display toggle hota hai.
   ============================================================================ */
/* ============================================================================
   2b. .mbw-form-btn-actions
   Roman Urdu: Form ke end mein Save/Cancel buttons ka global container.
   Page-header jaisi styling ? white bg, border, left accent, shadow.
   Tamam modules isi ek class se buttons wrap karte hain. (Task #6)
   ============================================================================ */
.mbw-form-btn-actions {
    display         : flex;
    align-items     : center;
    justify-content : flex-start;
    gap             : 10px;
    flex-wrap       : wrap;
    margin-top      : 8px;
    background      : var(--mbw-card-bg);
    border          : 1px solid var(--mbw-border-subtle);
    border-left     : 3px solid var(--mbw-page-header-accent);
    border-radius   : var(--mbw-r-lg);
    padding         : 14px 18px;
    box-shadow      : var(--mbw-shadow-xs);
}

/* Roman Urdu: overflow:visible zaroor hai ? custom-select-dropdown bahar dikhna chahiye */
.mbw-section-card {
    border        : 1px solid var(--mbw-border-subtle);
    border-left   : 3px solid var(--mbw-section-card-accent);
    border-radius : var(--mbw-r-lg);
    margin-bottom : 12px;
    overflow      : visible;
    background    : var(--mbw-card-bg);
}

/* Roman Urdu: mbwFormCard aur uske baad pehla section card visually merge hote hain
   ? koi gap nahi, ek continuous card lagta hai (Sale.php + Profile.php dono mein) */
.mbwFormCard {
    margin-bottom              : 0;
    border-bottom-left-radius  : 0;
    border-bottom-right-radius : 0;
    border-bottom              : none;
}
/* Roman Urdu: Form tag ke andar pehla section card ? top corners flat + top border hata do (double border avoid) */
/* Also handles direct sibling (no form wrapper) ? e.g. AccessControl.php permission matrix */
.mbwFormCard + form > .mbw-section-card:first-of-type,
.mbwFormCard + .mbw-section-card {
    border-top-left-radius  : 0;
    border-top-right-radius : 0;
}

/* ============================================================================
   3. .mbw-form-header
   Roman Urdu: OUTER form card ka title bar ? "Add New Sale Invoice" wala.
   Primary-soft bg (light blue), border-bottom, flex row.
   Is class mein reset button + collapse button dono hote hain.
   Reset: muted gray ? red hover. Collapse: primary blue hamesha.
   Sirf mbwFormCard ke direct header pe lagti hai ? inner sections pe nahi.
   ============================================================================ */
.mbw-form-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 10px 16px;
    background      : var(--mbw-primary-soft);
    border-bottom   : 1.5px solid var(--mbw-border-subtle);
    border-radius   : var(--mbw-r-lg) var(--mbw-r-lg) 0 0;
    cursor          : pointer;
    user-select     : none;
    gap             : 10px;
}

/* Roman Urdu: Reset button ? mbw-form-header ke andar, gray ? red hover */
.mbw-form-header .mbw-reset-btn {
    color : var(--mbw-text-muted);
}
.mbw-form-header .mbw-reset-btn:hover {
    color : var(--mbw-danger);
}

/* Roman Urdu: Collapse button ? mbw-form-header ke andar, primary blue hamesha */
.mbw-form-header .mbw-collapse-btn {
    color : var(--mbw-primary);
}
.mbw-form-header .mbw-collapse-btn:hover {
    color : var(--mbw-primary);
}

/* ============================================================================
   4. .mbw-section-header
   Roman Urdu: INNER section bars ka title bar ? Invoice Info, Customer, etc.
   Transparent bg (mbwFormCard ke andar chipkay hue sections dikhte hain).
   border-bottom: title aur content ke darmiyan dividing line.
   Sirf collapse button hota hai ? reset button nahi.
   ============================================================================ */
.mbw-section-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 10px 16px;
    background      : transparent;
    border-bottom   : 1.5px solid var(--mbw-border-subtle);
    cursor          : pointer;
    user-select     : none;
    gap             : 10px;
}

/* Roman Urdu: RTL section header ? Urdu title bar ke liye (right-to-left layout) */
.mbw-section-header--rtl {
    flex-direction: row-reverse;
}

.mbw-section-header--rtl .mbw-sh-title {
    justify-content: flex-end;
}

/* Roman Urdu: Urdu text helper ? RTL direction + Nastaliq font */
.mbw-sh-urdu-text {
    font-family: var(--font-urdu);
    direction   : rtl;
}

/* ============================================================================
   4. .mbw-section-body
   Roman Urdu: Section content area ? 3px top gap + side aur bottom padding.
   3px top: title border aur field ke top border ke darmiyan breathing space.
   Border-top hata di ? section-header ka border-bottom yeh kaam karta hai.
   CSS transition: max-height + opacity se collapse animate hoti hai.
   ============================================================================ */
/* Roman Urdu: overflow:visible ? dropdown bahar dikhna chahiye, clip nahi hona chahiye */
.mbw-section-body {
    padding    : 15px 10px 10px 10px;
    overflow   : visible;
    max-height : 5000px;
    opacity    : 1;
    transition : max-height 0.35s ease, opacity 0.25s ease;
}

/* ============================================================================
   5. .mbw-collapse-btn
   Roman Urdu: Collapse/expand button ? sirf icon, koi border/bg nahi.
   Hover pe koi animation/bg nahi ? sirf primary blue icon hamesha.
   ============================================================================ */
.mbw-collapse-btn {
    background    : transparent;
    border        : none;
    color         : var(--mbw-primary);
    border-radius : var(--mbw-r-sm);
    padding       : 4px 6px;
    font-size     : 13px;
    cursor        : pointer;
    display       : inline-flex;
    align-items   : center;
    line-height   : 1;
    transition    : none;
}
/* Roman Urdu: Chevron icon rotate transition */
.mbw-collapse-btn i {
    transition : transform 0.3s ease;
}

.mbw-collapse-btn:hover {
    background : transparent;
    color      : var(--mbw-primary);
    border     : none;
}

/* ============================================================================
   6. .mbw-reset-btn
   Roman Urdu: Reset button ? sirf icon, koi border/bg nahi.
   Default: muted (gray) icon. Hover: sirf red color ? koi bg/border nahi.
   ============================================================================ */
.mbw-reset-btn {
    background    : transparent;
    border        : none;
    color         : var(--mbw-text-muted);
    border-radius : var(--mbw-r-sm);
    padding       : 4px 6px;
    font-size     : 13px;
    cursor        : pointer;
    display       : inline-flex;
    align-items   : center;
    line-height   : 1;
    transition    : color 0.15s;
}

.mbw-reset-btn:hover {
    background : transparent;
    color      : var(--mbw-danger);
    border     : none;
}

/* ============================================================================
   7. RESPONSIVE BREAKPOINTS ? Form Header + Section Header
   Roman Urdu: Mobile (<=600px) adjustments ? form-header + section-header.
   ============================================================================ */
@media (max-width: 600px) {
    /* Roman Urdu: Outer form header ? mobile pe wrap ho jata hai */
    .mbw-form-header {
        flex-wrap : wrap;
        row-gap   : 6px;
        padding   : 8px 12px;
    }
    /* Roman Urdu: Inner section headers ? same wrap */
    .mbw-section-header {
        flex-wrap : wrap;
        row-gap   : 6px;
    }
    .mbw-section-body {
        padding : 15px 12px 10px 12px;
    }
    .mbw-section-card .mbw-section-header + .mbw-section-body.mbw-rv-list-body,
    .mbw-section-card .mbw-section-header + .mbw-rv-list-body {
        padding : 0;
    }
    .mbw-collapse-btn,
    .mbw-reset-btn {
        font-size : 12px;
        padding   : 3px 5px;
    }
}

/* ============================================================================
   8b. WHITE CONTAINERS ? Border Color Override (Light Mode Only)
   Roman Urdu: Sab white-background containers ki border ek hi color se aati hai:
   --mbw-container-border. Colored backgrounds (section-header, alerts) yahan
   shamil nahi ? unka background white nahi hai.
   ============================================================================ */
html:not([data-theme="dark"]) .filter-bar,
html:not([data-theme="dark"]) .mbw-section-card,
html:not([data-theme="dark"]) .mbw-form-btn-actions,
html:not([data-theme="dark"]) .mbw-page-title-bar,
html:not([data-theme="dark"]) .card {
    border-color: var(--mbw-container-border);
}

/* Roman Urdu: Left accent border preserve karo ? upar wala border-color override
   section-card aur form-btn-actions ka left border bhi gray kar deta hai. Yeh rules accent wapas laate hain.
   NOTE: Agar future mein .page-header bhi is block mein add ho jaye, to iske liye bhi
   ek alag border-left-color rule add karna hoga: border-left-color: var(--mbw-page-header-accent) */
html:not([data-theme="dark"]) .mbw-section-card {
    border-left-color: var(--mbw-section-card-accent);
}
html:not([data-theme="dark"]) .mbw-form-btn-actions {
    border-left-color: var(--mbw-page-header-accent);
}

/* Roman Urdu: Filter bar ka background bhi white */
html:not([data-theme="dark"]) .filter-bar {
    background: var(--mbw-card-bg);
}

/* ============================================================================
   9. .mbw-field ? MASTER CLASS for all form fields
   Roman Urdu: Yeh ek class field pe lagao ? sab kuch apply ho jata hai:
     Field khud     : background, border, border-radius, text color, font-size
     Sibling label  : hamesha primary (blue) color, 11px, bold ? position bhi
     Sibling icon   : hamesha primary (blue) color
   Koi bhi change? Sirf yahan update karo ? poora module update ho jata hai.
   ============================================================================ */

/* Roman Urdu: Field element ki styling (light mode) */
html:not([data-theme="dark"]) .mbw-field {
    background    : var(--mbw-field-bg);
    border        : 1px solid var(--mbw-field-border);
    border-radius : 6px;
    color         : var(--mbw-field-text);
    font-size     : var(--mbw-field-size);
}

/* Roman Urdu: Field element ki styling (dark mode) */
html[data-theme="dark"] .mbw-field {
    background    : var(--mbw-field-bg);
    border        : 1px solid var(--mbw-field-border);
    border-radius : 6px;
    color         : var(--mbw-field-text);
    font-size     : var(--mbw-field-size);
}

/* Roman Urdu: Focus state ? primary border + soft glow (light mode) */
html:not([data-theme="dark"]) .mbw-field:focus {
    border-color : var(--mbw-primary);
    outline      : none;
    box-shadow   : 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* Roman Urdu: Focus state ? primary border + soft glow (dark mode) */
html[data-theme="dark"] .mbw-field:focus {
    border-color : var(--mbw-primary);
    outline      : none;
    box-shadow   : 0 0 0 3px rgba(59, 130, 246, 0.20);
}

/* Roman Urdu: .mbw-field ka sibling label ? hamesha primary (blue) color.
   .mbw-field ~ .float-label: field ke baad aane wala label automatically
   primary color le leta hai. Section title jaise same blue. */
.mbw-field ~ .float-label {
    color       : var(--mbw-field-label-color, var(--mbw-primary));
    font-size   : var(--mbw-font-float-label-size, 13px);
    font-weight : 500;
}

/* Roman Urdu: .mbw-field ka sibling icon ? hamesha primary (blue) color.
   Focus pe ho ya na ho, icon hamesha blue rahega. */
.mbw-field ~ .float-icon {
    color: var(--mbw-field-icon-color, var(--mbw-primary));
}

/* Roman Urdu: Textarea ka icon ? hamesha vertically center.
   Textarea ki height JS (siAutoGrow) se badhti/ghatati hai.
   Float-group position:relative hai ? top:50% hamesha current height ka
   center track karta hai. Auto-grow ke baad bhi icon center rehta hai.
   (Pehle top:14px fixed tha ? sirf pehli line pe tha, auto-grow pe neeche reh jaata tha.) */
.float-textarea.mbw-field ~ .float-icon {
    top       : 50%;
    transform : translateY(-50%);
}

/* Roman Urdu: .si-terms-textarea ? Terms & Conditions (EN + UR) ka icon.
   Textarea ke andar icon vertically center mein ho (regular input jaise).
   Globally define ? Sale, Purchase, aur kisi bhi future module mein kaam kare. */
.float-textarea.mbw-terms-textarea ~ .float-icon,
.float-textarea.si-terms-textarea ~ .float-icon {
    top       : 50%;
    transform : translateY(-50%);
}

/* ============================================================================
   10. FLOAT LABELS ? Hamesha Top Pe Fixed (Always at Top)
   Roman Urdu: float-input aur float-textarea ke labels default mein field ke
   andar (50% height pe) dikhte hain. Hum inhe hamesha top border pe fix karte
   hain ? float-select jaise ? koi animation nahi, hamesha upar.
   Color yahan nahi ? .mbw-field ~ .float-label sibling rule control karta hai.
   ============================================================================ */

/* Roman Urdu: float-input label ? hamesha top pe (position fix) */
.float-input ~ .float-label {
    top       : 0;
    left      : 12px;
    transform : translateY(-50%);
    background: var(--mbw-card-bg);
    padding   : 0 6px;
}

/* Roman Urdu: float-textarea label ? hamesha top pe (position fix) */
.float-textarea ~ .float-label {
    top       : 0;
    left      : 12px;
    transform : translateY(-50%);
    background: var(--mbw-card-bg);
    padding   : 0 6px;
}

/* ============================================================================
   11. TEXTAREA ? Reduced Height + Auto-Grow
   Roman Urdu: float-textarea ki default height 110px thi ? bahut zyada.
   Ab min-height field jitni (48px). JS se height content ke saath badhegi.
   resize: none ? manual resize band kiya; overflow: hidden ? scroll nahi.
   ============================================================================ */
.float-textarea.mbw-field {
    min-height : 48px;
    height     : 48px;
    resize     : none;
    overflow-y : hidden;
}

/* ============================================================================
   12. FORM GRID ? Float-Group Align Fix (Icon Centering)
   Roman Urdu: CSS Grid default behavior ? sab float-groups ek row mein
   sabse unche item jitne lamba ho jaate hain (align-items: stretch).
   Masalan: Customer field ke neeche error message hai ? woh float-group
   lamba ho gaya ? grid ne baki fields ko bhi stretch kiya ?
   icon top:50% ab lamba float-group ke 50% pe aaya ? visually neeche lag raha tha.
   Fix: align-self: start ? har float-group sirf apni height jitna rahe.
   Dono selectors: mbw-section-form-grid (naya global) + si-form-grid (legacy).
   ============================================================================ */
.mbw-section-form-grid > .float-group,
.si-form-grid > .float-group {
    align-self: start;
}

/* ============================================================================
   13. HAS-ERROR ? Float-Select Icon Position Fix
   Roman Urdu: .has-error float-group ki total height = select field (50px)
   + float-error span (36px) = ~76px hoti hai.
   Default top:50% = 38px ? jo select ke center (25px) se neeche jaata hai.
   Fix: icon ko select field ke center (25px) pe manually pin karo.
   Yeh sirf float-select ke baad wale icon pe lagta hai (float-input pe nahi).
   ============================================================================ */
.float-group.has-error .float-select ~ .float-icon {
    top       : 22px;
    transform : translateY(-50%);
}

/* ============================================================================
   13b. CUSTOM-SELECT + FLOAT-GROUP INTEGRATION
   Roman Urdu: Native <select> ko custom-select-wrapper mein convert kiya.
   Float-group ke andar custom-select-wrapper rakhne se floating label
   aur icon wahi kaam karte hain jaisa float-select ke saath karte the.
   CSS aur JS (mbw-theme.css + mbw-global.js) mein pehle se maujood hain.
   ============================================================================ */

/* Roman Urdu: float-group ke andar wrapper ka margin zero ? float-group khud handle kare */
.float-group .custom-select-wrapper {
    margin-bottom : 0;
}

/* Roman Urdu: float-group mein custom-select-wrapper ke baad wala native select hide karo.
   Custom-select-wrapper ne visual UI provide kar di ? original select sirf value hold karta hai.
   .custom-select-wrapper select { display:none } sirf DESCENDANTS pe lagta hai (select inside wrapper).
   Yeh rule sibling select (float-group ka child, wrapper ke baad) ko hide karta hai. */
.float-group .custom-select-wrapper ~ select {
    display       : none;
}

/* Roman Urdu: Floating label hamesha top pe ? same style as float-select label.
   Color --mbw-field-label-color se aata hai (primary blue) ? dark mode mein auto #60a5fa */
.custom-select-wrapper ~ .float-label {
    top           : 0;
    left          : 12px;
    transform     : translateY(-50%);
    font-size     : var(--mbw-font-float-label-size, 13px);
    font-weight   : 500;
    color         : var(--mbw-field-label-color, var(--mbw-primary));
    background    : var(--mbw-card-bg);
    padding       : 0 6px;
}

/* Roman Urdu: Icon color primary ? --mbw-field-icon-color variable se.
   Dark mode mein #60a5fa (lighter blue), light mode mein #2563eb (brand blue). */
.custom-select-wrapper ~ .float-icon {
    color         : var(--mbw-field-icon-color, var(--mbw-primary));
}

/* Roman Urdu: has-error state ? trigger border red, label red */
.float-group.has-error .custom-select-trigger {
    border-color  : var(--mbw-danger);
}
.float-group.has-error .custom-select-wrapper ~ .float-label {
    color         : var(--mbw-danger);
}
.float-group.has-error .custom-select-wrapper ~ .float-icon {
    top           : 22px;
    transform     : translateY(-50%);
}

/* Roman Urdu: Global utility ? kisi bhi element ko hide karne ke liye */
.is-hidden { display: none !important; }

/* ============================================================================
   14. mbw-section-form-grid ? Global Form Grid System
   Roman Urdu: Yeh poore ERP ka standard form grid system hai.
   Har module isko use karega ? koi module apna alag grid CSS nahi likhega.

   Base class   : mbw-section-form-grid  ? grid container (gap, row-gap, margin)
   Column mods  : mbw-4col               ? 4 columns DEFAULT (smart auto-fill akhri row)
                  mbw-3col               ? 3 columns (optional ? jahan zaroori ho)
                  mbw-2col               ? 2 columns (optional ? kam fields ke liye)
   Helpers      : .form-full             ? poori row ki width (textarea, address)
                  .form-half             ? 2 cols wide (sirf mbw-3col mein)
   Auto-fill    : Akhri row mein 3 fields ? 33.3% each, 2 ? 50% each, 1 ? 100%

   Responsive:
     Desktop (>992px)  : jo bhi col class ? 2 ya 3 ya 4
     Tablet (?992px)   : 2 col (mbw-3col) ya 1 col (mbw-2col)
     Mobile (?600px)   : hamesha 1 col

   RULE: Har module ke float-input / float-select / float-textarea pe
         mbw-field class bhi lagani hai ? tab hi icon + label primary blue honge.
   ============================================================================ */

/* Roman Urdu: Base grid container */
.mbw-section-form-grid {
    display       : grid;
    gap           : 16px;
    row-gap       : 5px;
    margin-bottom : 8px;
}

/* Roman Urdu: mbw-3col ? 3 barabar columns */
.mbw-section-form-grid.mbw-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Roman Urdu: mbw-2col ? 2 barabar columns */
.mbw-section-form-grid.mbw-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* Roman Urdu: form-full ? hamesha poori row ki width (textarea, address, remarks) */
.mbw-section-form-grid > .form-full {
    grid-column: 1 / -1;
}

/* Roman Urdu: form-half ? 2 columns ki width (sirf mbw-3col ke saath use karo) */
.mbw-section-form-grid.mbw-3col > .form-half {
    grid-column: span 2;
}

/* Roman Urdu: Tablet ?992px ? mbw-3col 2 col pe aa jata hai */
@media (max-width: 992px) {
    .mbw-section-form-grid.mbw-3col {
        grid-template-columns: repeat(2, 1fr);
    }
    .mbw-section-form-grid.mbw-3col > .form-half {
        grid-column: 1 / -1;
    }
}

/* Roman Urdu: Mobile ?600px ? sab 1 col */
@media (max-width: 600px) {
    .mbw-section-form-grid.mbw-3col,
    .mbw-section-form-grid.mbw-2col {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   MBW Toggle Field — central Active/Inactive form control
   Visual SoT: Product.php Active toggle (prd-active-* footprint).
   Helper: mbw_ui_toggle_field() → includes/ui/partials/toggle_field.php
   Tokens only: --primary, --primary-soft, --surface, --surface-soft, --text-*, --border-subtle, --r-md
   ============================================================================ */
.mbw-active-control {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-height: 56px;
    box-sizing: border-box;
}

.mbw-active-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--r-md, 10px);
    border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.12));
    background: var(--surface-soft, rgba(15, 23, 42, 0.03));
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.mbw-active-switch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    clip: rect(0, 0, 0, 0);
}

.mbw-active-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    border-radius: 999px;
    background: var(--border-subtle, rgba(100, 116, 139, 0.45));
    border: 1px solid var(--border-subtle, rgba(100, 116, 139, 0.35));
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.mbw-active-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface, var(--card-bg, #fff));
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease;
}

.mbw-active-switch__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mbw-active-switch__state {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.mbw-active-switch__on {
    display: none;
    align-items: center;
    gap: 6px;
}

.mbw-active-switch__off {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.mbw-active-switch__hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.mbw-active-switch__input:checked ~ .mbw-active-switch__track {
    background: var(--primary, var(--mbw-brand-primary));
    border-color: var(--primary, var(--mbw-brand-primary));
    box-shadow: 0 0 0 3px var(--primary-soft, rgba(13, 148, 136, 0.18));
}

.mbw-active-switch__input:checked ~ .mbw-active-switch__track .mbw-active-switch__thumb {
    transform: translateX(20px);
}

.mbw-active-switch__input:checked ~ .mbw-active-switch__meta .mbw-active-switch__on {
    display: inline-flex;
    color: var(--primary, var(--mbw-brand-primary));
}

.mbw-active-switch__input:checked ~ .mbw-active-switch__meta .mbw-active-switch__off {
    display: none;
}

.mbw-active-switch__input:checked ~ .mbw-active-switch__meta .mbw-active-switch__hint {
    color: var(--text-muted);
}

.mbw-active-switch:hover {
    border-color: color-mix(in srgb, var(--primary, var(--mbw-brand-primary)) 35%, var(--border-subtle, #cbd5e1));
}

.mbw-active-switch__input:focus-visible ~ .mbw-active-switch__track {
    outline: 2px solid var(--primary, var(--mbw-brand-primary));
    outline-offset: 3px;
}

.mbw-active-switch:has(.mbw-active-switch__input:checked) {
    background: var(--primary-soft, rgba(13, 148, 136, 0.10));
    border-color: color-mix(in srgb, var(--primary, var(--mbw-brand-primary)) 40%, transparent);
}

.mbw-active-switch:has(.mbw-active-switch__input:disabled),
.mbw-active-switch.is-disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.mbw-active-switch__input:disabled ~ .mbw-active-switch__track {
    cursor: not-allowed;
}

.mbw-active-control.has-error .mbw-active-switch {
    border-color: var(--danger, #dc2626);
}

.mbw-active-control > .float-error {
    margin: 0;
}

@media (max-width: 600px) {
    .mbw-active-switch {
        padding: 10px;
        gap: 10px;
    }
}

/* Roman Urdu: float-group margin-bottom 20px ? 8px (sab grids pe apply) */
.float-group {
    margin-bottom: 8px;
}

/* Roman Urdu: si-form-grid ? legacy backward compat, row-gap override */
.si-form-grid {
    row-gap: 5px;
}

/* ============================================================================
   15. .mbw-4col ? 4 Column Auto-Fill Grid
   Roman Urdu: Yeh class module ke sab regular field rows pe lagayi gayi hai.
   Textarea rows pe nahi (Remarks, Terms) ? woh form-full se puri width lete hain.

   TECHNIQUE ? 12-column internal grid:
     Normal field: span 3  (3?4=12) = 25% ? 4 columns standard
     1 remaining : span 12          = 100% ? puri width
     2 remaining : span 6  each     = 50%  ? do barabar hisse
     3 remaining : span 4  each     = 33%  ? teen barabar hisse
   Yeh sab automatically apply hota hai ? koi manual class nahi lagani.

   Responsive:
     Desktop (>992px) : 4 col (span 3)
     Tablet (<=992px) : 2 col (span 6)
     Mobile (<=600px) : 1 col (span 12)
   ============================================================================ */

/* Roman Urdu: 12 column grid base ? mbw-section-form-grid (naya) + si-form-grid (legacy) */
.mbw-section-form-grid.mbw-4col,
.si-form-grid.mbw-4col {
    grid-template-columns: repeat(12, 1fr);
}

/* Roman Urdu: Default ? har field 3 columns leta hai (12 mein se) = 25% */
.mbw-section-form-grid.mbw-4col > .float-group,
.si-form-grid.mbw-4col > .float-group,
.mbw-section-form-grid.mbw-4col > .mbw-active-control,
.si-form-grid.mbw-4col > .mbw-active-control {
    grid-column: span 3;
}

.mbw-section-form-grid > .mbw-active-control,
.si-form-grid > .mbw-active-control {
    align-self: start;
    min-width: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

/* Roman Urdu: form-full (textarea etc.) ? hamesha apni row mein, 100% width.
   !important zaruri hai: nth-last-child auto-fill rules zyada specific hain
   aur form-full ko override kar dete the. */
.mbw-section-form-grid.mbw-4col > .form-full,
.si-form-grid.mbw-4col > .form-full,
.mbw-section-form-grid.mbw-4col > .mbw-active-control.form-full,
.si-form-grid.mbw-4col > .mbw-active-control.form-full {
    grid-column: 1 / -1 !important;
}

/* ============
   LAST ROW AUTO-FILL ? Desktop (4 col mode)
   Roman Urdu: nth-last-child + nth-child ka combination ? last row detect karta hai.
   ============ */

/* Roman Urdu: 1 field bachi akhri row mein ? 100% width */
.mbw-section-form-grid.mbw-4col > .float-group:last-child:nth-child(4n+1),
.si-form-grid.mbw-4col > .float-group:last-child:nth-child(4n+1) {
    grid-column: span 12;
}

/* Roman Urdu: 2 fields bachi akhri row mein ? 50% 50% */
.mbw-section-form-grid.mbw-4col > .float-group:nth-last-child(2):nth-child(4n+1),
.mbw-section-form-grid.mbw-4col > .float-group:nth-last-child(1):nth-child(4n+2),
.si-form-grid.mbw-4col > .float-group:nth-last-child(2):nth-child(4n+1),
.si-form-grid.mbw-4col > .float-group:nth-last-child(1):nth-child(4n+2) {
    grid-column: span 6;
}

/* Roman Urdu: 3 fields bachi akhri row mein ? 33% 33% 33% */
.mbw-section-form-grid.mbw-4col > .float-group:nth-last-child(3):nth-child(4n+1),
.mbw-section-form-grid.mbw-4col > .float-group:nth-last-child(2):nth-child(4n+2),
.mbw-section-form-grid.mbw-4col > .float-group:nth-last-child(1):nth-child(4n+3),
.si-form-grid.mbw-4col > .float-group:nth-last-child(3):nth-child(4n+1),
.si-form-grid.mbw-4col > .float-group:nth-last-child(2):nth-child(4n+2),
.si-form-grid.mbw-4col > .float-group:nth-last-child(1):nth-child(4n+3) {
    grid-column: span 4;
}

/* ============
   RESPONSIVE ? Tablet (<=992px): 2 columns
   ============ */
@media (max-width: 992px) {
    /* Roman Urdu: Tablet pe 2 col ? har field span 6 (12 mein se 6 = 50%) */
    .mbw-section-form-grid.mbw-4col > .float-group,
    .si-form-grid.mbw-4col > .float-group,
    .mbw-section-form-grid.mbw-4col > .mbw-active-control,
    .si-form-grid.mbw-4col > .mbw-active-control {
        grid-column: span 6;
    }
    /* Roman Urdu: Tablet pe 1 field bachi ? 100% */
    .mbw-section-form-grid.mbw-4col > .float-group:last-child:nth-child(2n+1),
    .si-form-grid.mbw-4col > .float-group:last-child:nth-child(2n+1) {
        grid-column: span 12;
    }
}

/* ============
   RESPONSIVE ? Mobile (<=600px): 1 column
   ============ */
@media (max-width: 600px) {
    /* Roman Urdu: Mobile pe sab fields full width */
    .mbw-section-form-grid.mbw-4col > .float-group,
    .si-form-grid.mbw-4col > .float-group,
    .mbw-section-form-grid.mbw-4col > .mbw-active-control,
    .si-form-grid.mbw-4col > .mbw-active-control {
        grid-column: span 12;
    }
    /* Roman Urdu: Mobile pe preview bhi full width */
    .mbw-section-form-grid.mbw-4col > .mbw-att-preview,
    .si-form-grid.mbw-4col > .mbw-att-preview {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   15b. ATTACHMENT SECTION ? mbw-att-wrap, mbw-att-field, mbw-att-preview
   Roman Urdu: File upload section ka GLOBAL layout system.
   mbw-att-wrap ? flex row container (file input + preview side by side)
   mbw-att-field ? file input column ? 30% globally
   mbw-att-preview ? live preview column ? 30% globally
   Module mein alag size chahiye ? wahan override karo.
   ============================================================================ */

/* Roman Urdu: mbw-file-input ? global file input field styling */
.mbw-file-input {
    padding: 8px;
    width  : 100%;
}

/* Roman Urdu: mbw-file-hint ? file input ke neeche hint text */
.mbw-file-hint {
    color      : var(--text-muted);
    display    : block;
    margin-top : 4px;
    font-size  : 12px;
}

/* Roman Urdu: mbw-att-wrap ? file input aur preview ko side by side rakhta hai */
.mbw-att-wrap {
    display    : flex;
    gap        : 16px;
    align-items: flex-start;
}

/* Roman Urdu: mbw-att-field ? file input column, 30% width */
.mbw-att-field {
    width    : 30%;
    min-width: 180px;
    flex     : 0 1 30%;
}

/* Roman Urdu: Mobile pe dono full width */
@media (max-width: 600px) {
    .mbw-att-wrap {
        flex-direction: column;
    }
    .mbw-att-field,
    .mbw-att-preview {
        width    : 100% !important;
        max-width: 100% !important;
    }
}

/* Roman Urdu: Backward compat ? jab mbw-att-preview grid ke andar ho (purane modules) */
.mbw-section-form-grid.mbw-4col > .mbw-att-preview,
.si-form-grid.mbw-4col > .mbw-att-preview {
    grid-column : span 6;
}

.mbw-att-preview {
    width           : 30%;
    min-width       : 180px;
    flex            : 0 1 30%;
    min-height      : 120px;
    background      : var(--input-bg);
    border          : 1.5px dashed var(--border-subtle);
    border-radius   : 8px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 12px;
    gap             : 8px;
    flex-wrap       : wrap;
    overflow        : hidden;
}

.mbw-att-preview-empty {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 6px;
    color          : var(--text-muted, #94a3b8);
    font-size      : 13px;
    text-align     : center;
}

.mbw-att-preview-empty i {
    font-size : 28px;
    opacity   : 0.4;
}

.mbw-att-preview img {
    max-width     : 100%;
    max-height    : 180px;
    object-fit    : contain;
    border-radius : 6px;
}

.mbw-att-preview iframe {
    width         : 100%;
    height        : 180px;
    border        : none;
    border-radius : 6px;
}

.mbw-att-preview-item {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 4px;
    text-align     : center;
}

.mbw-att-preview-item small {
    font-size  : 11px;
    color      : var(--text-muted);
    word-break : break-all;
    max-width  : 90px;
}

/* ============================================================================
   16. BARCODE ? .mbw-barcode-group (wrapper) + .mbw-barcode-group svg (child)
   Roman Urdu: Barcode ka standardized pattern:
     HTML: <div class="mbw-barcode-group"><svg id="[mod]-barcode-form"></svg></div>
     SVG pe koi class nahi ? .mbw-barcode-group svg child selector se style milti hai.
     JsBarcode SVG ke height attribute ko CSS override na kare.
   overflow:hidden ? JsBarcode ka SVG kabhi grid cell se bahar nahi jayega.
   ============================================================================ */
/* Roman Urdu: barcode hamesha center ? sidebar open/close se fark nahi padta */
.mbw-barcode-group {
    display         : flex;
    align-items     : center;
    justify-content : center;
    min-height      : 80px;
    padding         : 6px 0;
    overflow        : hidden;
}

/* Roman Urdu: .mbw-barcode-group ka direct SVG child ? SVG pe koi extra class/ID CSS nahi chahiye.
   width:100% ? container ke mutabiq fill karo.
   max-width:320px ? barcode zyada wide na ho (invoice/code barcode ke liye).
   height/display ? JsBarcode ka SVG height attribute preserve karo; CSS height:auto nahi lagate. */
.mbw-barcode-group svg {
    width     : 100%;
    max-width : 320px;
    display   : block;
}

/* Roman Urdu: mbw-4col grid ke andar barcode ? span 3 dena zaroori hai
   Wajah: mbw-4col internally repeat(12,1fr) use karta hai; .float-group ko span 3 milta hai.
   .mbw-barcode-group ko koi rule nahi tha to default span 1 = 1/12 width = barcode chhota.
   Yeh rule barcode group ko float-group ki tarah treat karta hai (= 25% width). */
.mbw-section-form-grid.mbw-4col > .mbw-barcode-group,
.si-form-grid.mbw-4col > .mbw-barcode-group {
    grid-column: span 3;
}

/* Roman Urdu: Mobile pe barcode ? already center hai (upar justify-content:center lagaya) */
/* ============================================================================
   X) PRINT STYLES
   ============================================================================ */

@media print {
    html[data-theme="dark"] {
        color-scheme: light;
    }
    
    .no-print,
    .sidebar,
    .header,
    .action-btns,
    .btn,
    .filter-bar,
    .confirm-modal,
    .toast-message,
    .modal {
        display: none !important;
    }
    
    body,
    .card,
    .page-head,
    .table-wrap {
        background: #ffffff !important;
        box-shadow: none !important;
    }
    
    @page {
        margin: 1cm;
    }
}

/* ============================================================================
   END OF FILE - FINAL COMPLETE VERSION
   ============================================================================
   
   FILE STATISTICS:
   ----------------
   Total Sections: 23+ major sections
   Components Included:
   ? Fonts (Urdu + Sans)
   ? Color Tokens (Light + Dark)
   ? Cards
   ? Buttons (with shadow hovers)
   ? Forms (basic + floating labels)
   ? Custom Dropdowns (selected/hover states)
   ? Tables
   ? Badges & Pills
   ? Page Head
   ? Filter Bar
   ? Meta Chips
   ? Action Icons
   ? Confirmation Dialogs (updated)
   ? Toast Messages (NEW)
   ? Modal Component (NEW)
   ? Alert Component (NEW)
   ? Avatar Component (NEW)
   ? Spinner Component (NEW)
   ? Basic Dropdown
   ? All Utilities (Flex, Grid, Spacing, Text, etc.)
   ? Responsive Breakpoints
   ? Print Styles
   
   NOTHING IS MISSING!
   
   Design by mbw6.com | Contact Now 0347-3663130
   Version: 3.0 - FINAL COMPLETE
   ============================================================================ */

/* ============================================================================
   PAGE TITLE BAR ? inner element classes
   Roman Urdu: mbw-ptb-* classes hata di gayi hain ? page-header system mein
   merge ho gayi hain. Sale.php bhi ab page-header classes use karta hai.
   See: PAGE HEADER section upar (line ~2839)
   ============================================================================ */

/* ============================================================================
   SECTION HEADER ? inner element classes
   Roman Urdu: mbw-section-header ke andar title aur buttons ke liye classes.
   Pehle inline styles the, ab external CSS mein hain.
   ============================================================================ */

/* Roman Urdu: Section title text ? primary color, bold, flex wrap */
.mbw-sh-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    flex-wrap: wrap;
    color: var(--primary);
    font-weight: 700;
    font-size: var(--mbw-font-section-title-size, 16px);
}

/* Roman Urdu: Section header buttons wrapper ? collapse + reset */
.mbw-sh-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Roman Urdu: Collapse arrow ? smooth rotation transition */
.mbw-collapse-arrow {
    transition: transform 0.2s;
}

/* ============================================================================
   RECORD VIEW TABLE ? mbw-rv-table (Global)
   Roman Urdu: List/record view table ? invoices, purchases, stock transfers
   ki list dikhane ke liye. Har module mein same class use hoti hai.
   --mbw-rv-* variables se light/dark mode auto switch hota hai.
   Ek jagah variable change karo ? sab modules update ho jaate hain.
   ============================================================================ */

/* Roman Urdu: Record view list body ? card-body ka padding zero karo
   Sab modules mein XX-list-body { padding: 0; } tha ? ab global class hai */
.mbw-rv-list-body {
    padding: 0;
}

/* Roman Urdu: Section header ke neeche list table ? side padding kabhi na aaye */
.mbw-section-card .mbw-section-header + .mbw-section-body.mbw-rv-list-body,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body {
    padding: 0;
}

/* Roman Urdu: Pager / notes table ke neeche ? breathing room */
.mbw-section-card .mbw-section-header + .mbw-rv-list-body > :not(.product-table-wrap) {
    padding: 10px 12px 12px;
}

/* Roman Urdu: Jab section card mein sirf list table ho ? rounded corners visual
   (overflow:hidden NAHI ? warna product-table-wrap ki scrollbar clip/displace hoti hai) */
.mbw-section-card > .mbw-rv-list-body:only-child {
    border-radius : calc(var(--mbw-r-lg) - 1px);
}

/* Roman Urdu: Horizontal scroll yahi pe ? table ke bilkul neeche left/right scroll */
.mbw-rv-list-body .product-table-wrap {
    width                     : 100%;
    max-width                 : 100%;
    min-width                 : 0;
    box-sizing                : border-box;
    overflow-x                : auto;
    overflow-y                : visible;
    -webkit-overflow-scrolling: touch;
    border-radius             : calc(var(--mbw-r-lg) - 1px);
}

/* Roman Urdu: Section title ke neeche table ? sharp corners (total/data rows square) */
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .product-table-wrap {
    overflow-x                : auto;
    overflow-y                : visible;
    border-radius             : 0;
}

/* Roman Urdu: List-only tables ? separate borders taake th/td radius + clip sahi kaam kare */
.mbw-rv-list-body .mbw-rv-table {
    border-collapse : separate;
    border-spacing  : 0;
}

/* Roman Urdu: Section header ke baad table ? card border outer; table side borders hatao */
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table {
    border-top   : none;
    border-left  : none;
    border-right : none;
    border-bottom: none;
}

/* Roman Urdu: tfoot wali list table ? outer bottom border hatao (radius cells pe) */
.mbw-rv-list-body .mbw-rv-table:has(tfoot) {
    border-bottom: none;
}

/* Roman Urdu: Table structure ? self-contained, koi doosri class zaroorat nahi */
.mbw-rv-table {
    width           : 100%;
    min-width       : 1100px;
    table-layout    : auto;
    border          : 1px solid var(--mbw-rv-border-color);
    border-collapse : collapse;
}

/* Roman Urdu: Header row ? --mbw-rv-header-* variables se drive hota hai */
.mbw-rv-table thead th {
    background   : var(--mbw-rv-header-bg);
    color        : var(--mbw-rv-header-text);
    font-size    : var(--mbw-rv-header-font-size);
    font-weight  : var(--mbw-rv-header-font-weight);
    padding      : var(--mbw-rv-cell-padding);
    white-space  : nowrap;
    border-bottom: 1px solid var(--mbw-rv-border-color);
    border-right : 1px solid var(--mbw-rv-border-color);
}

.mbw-rv-table thead th:last-child {
    border-right: none;
}

/* Roman Urdu: List card ke andar table header corners ? card radius ke sath match
   (overflow clip ke sath ? separate border-collapse pe radius ab apply hota hai) */
.mbw-rv-list-body .mbw-rv-table thead th:first-child {
    border-top-left-radius: calc(var(--mbw-r-lg) - 1px);
}

.mbw-rv-list-body .mbw-rv-table thead th:last-child {
    border-top-right-radius: calc(var(--mbw-r-lg) - 1px);
}

/* Roman Urdu: Section header ke neeche ? thead top square (title bar upar hai) */
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table thead th:first-child,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table thead th:last-child {
    border-top-left-radius : 0;
    border-top-right-radius: 0;
}

.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table thead th {
    border-top: none;
}

/* Roman Urdu: List table last row ? bottom corners card ke sath match */
.mbw-rv-list-body .mbw-rv-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: calc(var(--mbw-r-lg) - 1px);
}

.mbw-rv-list-body .mbw-rv-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: calc(var(--mbw-r-lg) - 1px);
}

/* Roman Urdu: tfoot ho to tbody last row square (pehle se) */
.mbw-rv-list-body .mbw-rv-table:has(tfoot) tbody tr:last-child td:first-child,
.mbw-rv-list-body .mbw-rv-table:has(tfoot) tbody tr:last-child td:last-child {
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
}

/* Roman Urdu: tfoot / section tables ? bottom corners sharp (rounded nahi) */
.mbw-rv-list-body .mbw-rv-table tfoot tr:last-child td:first-child,
.mbw-rv-list-body .mbw-rv-table tfoot tr:last-child td:last-child,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table tbody tr:last-child td:first-child,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table tbody tr:last-child td:last-child,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table tfoot tr:last-child td:first-child,
.mbw-section-card .mbw-section-header + .mbw-rv-list-body .mbw-rv-table tfoot tr:last-child td:last-child {
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
}

.mbw-rv-list-body .mbw-rv-table tfoot tr:last-child td {
    border-bottom: none;
}

/* Roman Urdu: Data cells ? color/size from --mbw-rv-cell-* tokens (~3522).
   Wrap / nowrap / overflow containment SoT: assets/css/design-system/semantics.css
   (Design System loads after this file — do not re-own those rules here). */
.mbw-rv-table tbody td {
    color        : var(--mbw-rv-cell-text);
    background   : var(--mbw-rv-row-bg);
    font-size    : var(--mbw-rv-row-font-size);
    padding      : var(--mbw-rv-cell-padding);
    white-space  : nowrap;
    border-bottom: 1px solid var(--mbw-rv-border-color);
    border-right : 1px solid var(--mbw-rv-border-color);
}

/* Roman Urdu: Even rows ? zebra stripe */
.mbw-rv-table tbody tr:nth-child(even) td {
    background: var(--mbw-rv-row-alt);
}

/* Roman Urdu: Row hover */
.mbw-rv-table tbody tr:hover td {
    background: var(--mbw-rv-row-hover);
}

/* Roman Urdu: List table primary link (invoice #) */
.mbw-rv-table .mbw-record-link {
    color: var(--mbw-rv-link-color);
}

.mbw-rv-table .mbw-record-link:hover {
    color: var(--mbw-rv-link-color);
    opacity: 0.85;
}

/* Roman Urdu: Empty list row ? list table tokens */
.mbw-rv-table .mbw-empty,
.mbw-rv-table .mbw-empty-inner {
    color: var(--mbw-rv-cell-text-muted);
}

.mbw-rv-table .mbw-empty-title {
    color: var(--mbw-rv-cell-text);
}

/* LEGACY COMPAT note: mbw-col-wrap / mbw-col-nowrap / mbw-rv-col-* / mbw-audit-cell
   overflow geometry lives in design-system/semantics.css (permanent SoT). */

.mbw-rv-table .mbw-audit-name {
    color    : var(--mbw-rv-cell-text);
    font-size: var(--mbw-rv-row-font-size);
}

.mbw-rv-table .mbw-audit-time {
    color      : var(--mbw-rv-cell-text-muted);
    font-size  : var(--mbw-table-hint-size);
    margin-top : 2px;
}

/* Roman Urdu: Two-line stack cells ? date+code, name+code (list tables) */
.mbw-rv-table .mbw-rv-cell-stack {
    display        : flex;
    flex-direction : column;
    gap            : 2px;
    min-width      : 0;
    white-space    : normal;
}

.mbw-rv-table td.mbw-rv-cell-stack-col,
.mbw-rv-table th.mbw-rv-cell-stack-col {
    white-space   : normal !important;
    overflow-wrap : anywhere;
    word-break    : break-word;
    min-width     : 0;
    max-width     : 0;
    vertical-align: middle;
}

.mbw-rv-table .mbw-rv-cell-primary {
    color         : var(--mbw-rv-cell-text);
    font-size     : var(--mbw-rv-row-font-size);
    font-weight   : 600;
    line-height   : 1.3;
    overflow-wrap : anywhere;
    word-break    : break-word;
    max-width     : 100%;
}

.mbw-rv-table .mbw-rv-cell-sub {
    color         : var(--mbw-rv-cell-text-muted);
    font-size     : var(--mbw-table-hint-size);
    line-height   : 1.25;
    overflow-wrap : anywhere;
    word-break    : break-word;
    max-width     : 100%;
}

.mbw-rv-table .mbw-rv-amount {
    font-weight: 600;
    color      : var(--success);
    font-family: 'Courier New', Courier, monospace;
}

/* Roman Urdu: List actions column ? chhote icon buttons + stack layout support.
   Overflow visibility for actions: design-system/semantics.css */
.mbw-rv-table .col-actions {
    text-align     : center;
    vertical-align : middle;
    white-space    : nowrap;
    min-width      : 100px;
    padding-left   : 4px;
    padding-right  : 4px;
}

.mbw-rv-table .col-actions .btn-sm.btn-icon {
    width      : 36px;
    height     : 36px;
    min-width  : 36px;
    min-height : 36px;
    padding    : 0;
    font-size  : 11px;
}

.mbw-rv-table .col-actions .inline-form {
    display: inline-flex;
    margin : 0;
}

.mbw-rv-table tbody td:last-child {
    border-right: none;
}

.mbw-rv-table tfoot td {
    color        : var(--mbw-rv-cell-text);
    font-size    : var(--mbw-rv-row-font-size);
    padding      : var(--mbw-rv-cell-padding);
    white-space  : nowrap;
    border-top   : 2px solid var(--mbw-rv-border-color);
    border-right : 1px solid var(--mbw-rv-border-color);
    background   : var(--mbw-rv-row-alt);
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
}

.mbw-rv-table tfoot td:last-child {
    border-right: none;
}

.mbw-rv-table tr.row-deleted {
    opacity   : 0.65;
    background: rgba(239, 68, 68, 0.04);
}

/* Roman Urdu: Global column width utility ? inline style="width:..." ki jagah use karo */
.mbw-col-w36 { width: 36px; }
.mbw-col-w52 { width: 52px; }

/* Roman Urdu: GLOBAL Sort Icon + Sort Link — canonical SVG in design-system/components.css (LEG-SORT-001) */
/* Legacy Font Awesome sort glyphs (.mbw-sort-icon) — modules not yet migrated (LEG-SORT-005) */
/* Roman Urdu: .mbw-sort-icon: Font Awesome sort glyph size
   .mbw-sort-link: header text + icon ka clickable link style
   Purane module-specific classes (.si-sort-icon, .pi-sort-icon etc) bhi kaam karenge */
.mbw-sort-icon,
.mbw-rv-table .si-sort-icon,
.mbw-rv-table .prd-sort-link i {
    font-size: var(--mbw-rv-sort-icon-size);
}

.mbw-sort-link {
    color          : inherit;
    text-decoration: none;
    white-space    : nowrap;
}

/* Sort link hover color: design-system/components.css (LEG-SORT-001) — do not reintroduce --mbw-primary here */

/* Legacy bridge: modules not yet on DS bundle may still load mbw-theme only */
/* Roman Urdu: tr pe row-stripe background transparent ? td ka apna bg dikhega */
.mbw-rv-table tbody tr,
.mbw-rv-table tbody tr:nth-child(even),
.mbw-rv-table tbody tr:nth-child(even):hover {
    background: transparent;
}

/* ============================================================================
   LIVE TABLE HIGHLIGHT ? .mbw-search-mark (Global)
   Roman Urdu: Jab user search field mein type kare, matching text ko <mark>
   tag se highlight karta hai. Yellow/amber background, rounded corners.
   mbw-global.js mein MBW_liveTableHighlight() auto-attach karta hai.
   ============================================================================ */

.mbw-rv-table mark.mbw-search-mark {
    background   : var(--warning-soft);
    color        : var(--mbw-rv-cell-text);
    padding      : 1px 3px;
    border-radius: var(--r-sm);
    border       : 1px solid var(--warning-border);
    font-weight  : 600;
}

html[data-theme="dark"] .mbw-rv-table mark.mbw-search-mark {
    background   : rgba(245, 158, 11, 0.25);
    border-color : rgba(245, 158, 11, 0.45);
}

/* ============================================================================
   TERMS LABEL ? mbw-terms-wrapper / mbw-terms-label (Global)
   Roman Urdu: Terms & Conditions (EN + UR) ka label system.
   Wrapper ke top-left border pe positioned label ? float-label jaise dikhta hai.
   ============================================================================ */

/* Roman Urdu: Wrapper ? toolbar + textarea ka combined container */
.mbw-terms-wrapper {
    position : relative;
    width    : 100%;
}

/* Roman Urdu: Terms label ? wrapper ke top-left border pe fixed */
.mbw-terms-label {
    position   : absolute !important;
    top        : 0        !important;
    left       : 12px     !important;
    transform  : translateY(-50%) !important;
    background : var(--mbw-card-bg);
    padding    : 0 6px;
    color      : var(--mbw-primary);
    font-size  : 11px;
    font-weight: 600;
    z-index    : 3;
}

/* Roman Urdu: Terms float-group ke andar sirf textarea + icon ? label bahar hai */
.mbw-terms-wrapper .float-group {
    margin-bottom: 0;
}


/* ============================================================================
   PAGINATION — mbw-pager-* System
   Canonical component rules: assets/css/design-system/components.css
   Token variables remain here for legacy shell compatibility (LEG-PAGER-001).
   ============================================================================ */

/* Rules migrated to design-system/components.css — do not duplicate here. */

/* ============================================================================
   GLOBAL UTILITIES ? product-common.css se shift kiye gaye (Task #8)
   ============================================================================
   Roman Urdu: Yeh classes pehle product-common.css mein thi ? ab globally
   har module ke liye yahan available hain.
   ============================================================================ */

/* Roman Urdu: Table horizontal scroll wrapper ? har module use karta hai.
   Mobile pe table side scroll karta hai is container ki wajah se. */
.product-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Roman Urdu: Dual-name cell ? English naam upar (bold), Urdu naam neeche (RTL).
   Har module mein jahan English + Urdu naam ek saath dikhana ho, yeh class lagao. */
.prd-name-cell {
    white-space: normal !important;
    min-width: 180px;
    max-width: 300px;
}

.prd-name-cell strong {
    font-weight: 600;
    color: var(--text-main);
}

.prd-name-cell .urdu-text {
    font-family   : var(--font-urdu); /* Same Nastaliq font ? "Noto Nastaliq Urdu" ? jo mbw-theme.css mein define hai */
    letter-spacing: 0;               /* Nastaliq ke liye zaroor ? spacing zero rakhni hai */
    direction     : rtl;
    text-align    : right;
    font-size     : 13px;
    line-height   : 1.4;
    color         : var(--text-muted);
}

.prd-name-cell .prd-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================================================
   GLOBAL LIVE SEARCH DROPDOWN ? mbwdd-* system
   Roman Urdu: Yeh GLOBAL dropdown system hai ? Products, Customers, Employees,
   Vendors ? sab ke liye ek hi CSS. Har module mein mbwdd-wrap ka size/flex
   module CSS mein set hoga, lekin visual styling (list, items, hover) yahan se.

   KAISE KAAM KARTA HAI:
   1. User field pe click kare ? JS focus event ? sab data foran show ho
   2. User type kare ? 250ms debounce ? filtered results
   3. User item click kare ? value set, dropdown band
   4. Wrap ke bahar click kare ? dropdown band

   CSS Variables (--dd-*) upar :root mein defined hain ? light/dark auto switch.
   ============================================================================ */

/* Roman Urdu: mbwdd-wrap ? search field + dropdown ka container.
   position:relative zaruri hai taake mbwdd-list is ke neeche absolute position le.
   Default width 35% ? module mein zyada/kam chahiye toh wahan override karo. */
.mbwdd-wrap {
    position : relative;
    flex     : 0 1 35%;
    min-width: 180px;
    max-width: 35%;
}

@media (max-width: 600px) {
    .mbwdd-wrap {
        flex     : 1 1 100%;
        max-width: 100%;
    }
}

.mbwdd-wrap .form-input {
    width: 100%;
}

/* Roman Urdu: mbwdd-list ? default hidden, JS se is-visible class add hogi tab show hoga.
   Wrap ke neeche absolute position ? 175px max height + scroll */
.mbwdd-list {
    position     : absolute;
    top          : 100%;
    left         : 0;
    right        : 0;
    max-height   : 175px;
    overflow-y   : auto;
    background   : var(--dd-bg, #ffffff);
    border       : 1px solid var(--dd-border, #e2e8f0);
    border-radius: 6px;
    box-shadow   : var(--dd-shadow, 0 4px 16px rgba(0,0,0,0.12));
    z-index      : 1050;
    margin-top   : 2px;
    display      : none;
}

.mbwdd-list.is-visible {
    display: block;
}

.mbwdd-list.is-hidden {
    display: none;
}

/* Roman Urdu: Har dropdown option / result item */
.mbwdd-item {
    padding      : 8px 12px;
    cursor       : pointer;
    font-size    : 13px;
    color        : var(--dd-opt-normal-text, #1e293b);
    background   : var(--dd-opt-normal-bg, transparent);
    border-bottom: 1px solid var(--dd-border, #e2e8f0);
    transition   : background 0.15s, color 0.15s;
    display      : flex;
    align-items  : center;
    gap          : 8px;
}

.mbwdd-item:last-child {
    border-bottom: none;
}

.mbwdd-item:hover {
    background: var(--dd-opt-hover-bg-new, rgba(37,99,235,0.12));
    color     : var(--dd-opt-hover-text, #2563eb);
}

.mbwdd-item.selected {
    background  : var(--dd-opt-selected-bg-new, rgba(37,99,235,0.18));
    color       : var(--dd-opt-selected-text-new, #2563eb);
    font-weight : 600;
    border-left : 3px solid var(--dd-opt-selected-text-new, #2563eb);
    padding-left: 9px;
}

.mbwdd-item.selected:hover {
    background: var(--dd-opt-selected-hover-bg, rgba(37,99,235,0.28));
    color     : var(--dd-opt-selected-text-new, #2563eb);
}

/* Roman Urdu: Jab koi result na mile */
.mbwdd-item.mbwdd-no-result {
    color     : var(--dd-muted, #64748b);
    cursor    : default;
    font-style: italic;
}

.mbwdd-item.mbwdd-no-result:hover {
    background: transparent;
    color     : var(--dd-muted, #64748b);
}

/* Roman Urdu: Product/Customer naam ? bold */
.mbwdd-name {
    font-weight: 500;
    color      : inherit;
}

/* Roman Urdu: Product code / Customer ID ? small monospace */
.mbwdd-code {
    font-size  : 11px;
    color      : var(--dd-muted, #64748b);
    font-family: monospace;
}

/* Roman Urdu: Price / amount ? right align, primary blue */
.mbwdd-price {
    font-size  : 11px;
    color      : var(--dd-opt-selected-text-new, #2563eb);
    font-weight: 600;
    margin-left: auto;
}

/* ============================================================================
   GLOBAL BANK PREVIEW ? .mbw-bank-preview system
   Roman Urdu: Yeh global class hai ? pehle sirf sale.css mein si-bank-preview thi.
   Ab tamam modules (Sale, Quotation, Purchase, future) ise use karein.
   Sale.php mein si-bank-preview ? mbw-bank-preview migrate hoga module task mein.
   ============================================================================ */

/* Roman Urdu: Outer container ? border, rounded, surface bg */
.mbw-bank-preview {
    margin-top   : 8px;
    margin-bottom: 8px;
    border       : 1px solid var(--border-subtle);
    border-radius: 8px;
    background   : var(--surface-soft, #f8fafc);
    overflow     : hidden;
}

/* Roman Urdu: 4-column grid ? bank fields side by side */
.mbw-bank-preview-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 0;
}

/* Roman Urdu: Single bank field ? label + value vertical stack */
.mbw-bank-field {
    display       : flex;
    flex-direction: column;
    padding       : 10px 14px;
    border-right  : 1px solid var(--border-subtle);
}

.mbw-bank-field:last-child {
    border-right: none;
}

/* Roman Urdu: Label ? uppercase, small, muted */
.mbw-bank-label {
    font-size     : 10px;
    font-weight   : 600;
    color         : var(--text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom : 3px;
}

/* Roman Urdu: Value ? main text, medium weight */
.mbw-bank-value {
    font-size  : 13px;
    font-weight: 500;
    color      : var(--text-main);
    word-break : break-all;
}

/* Roman Urdu: is-hidden ? JS se toggle karo */
.mbw-bank-preview.is-hidden {
    display: none;
}

/* Roman Urdu: Tablet ? 2 columns */
@media (max-width: 768px) {
    .mbw-bank-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mbw-bank-field:nth-child(2) {
        border-right: none;
    }
    .mbw-bank-field:nth-child(1),
    .mbw-bank-field:nth-child(2) {
        border-bottom: 1px solid var(--border-subtle);
    }
}

/* Roman Urdu: Mobile ? single column */
@media (max-width: 480px) {
    .mbw-bank-preview-grid {
        grid-template-columns: 1fr;
    }
    .mbw-bank-field {
        border-right : none;
        border-bottom: 1px solid var(--border-subtle);
    }
    .mbw-bank-field:last-child {
        border-bottom: none;
    }
}

/* Roman Urdu: Dark mode override */
html[data-theme="dark"] .mbw-bank-preview {
    background: var(--card-bg);
}

/* Roman Urdu: Bank note row ? bank preview card ke andar payment instructions ka row */
.mbw-bank-note-row {
    padding       : 8px 14px 10px;
    border-top    : 1px solid var(--border-subtle);
    display       : flex;
    flex-direction: column;
    gap           : 3px;
}

.mbw-bank-note-row .mbw-bank-label {
    font-size     : 10px;
    text-transform: uppercase;
    font-weight   : 600;
    color         : var(--text-muted, #94a3b8);
    letter-spacing: 0.5px;
    margin-bottom : 3px;
}

.mbw-bank-note-row .mbw-bank-value {
    font-size  : 13px;
    font-weight: 500;
    color      : var(--text-main);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break : break-word;
}

.mbwdd-item:hover .mbwdd-code {
    color  : var(--dd-opt-hover-text, #2563eb);
    opacity: 0.80;
}

/* Roman Urdu: Loading spinner ? data fetch hone tak */
.mbwdd-loading {
    padding   : 12px;
    text-align: center;
    color     : var(--text-muted);
}

.mbwdd-loading.is-hidden {
    display: none;
}

/* ============================================================
   MBW Flatpickr Calendar Overrides ? Sage Enterprise Theme
   Roman Urdu: Yeh sab Flatpickr calendar popup styles MBW brand
   ke mutabiq override karti hain ? Sage Enterprise (deep teal-green).
   Ek jagah se change karo ? poore ERP par effect aaye.
   Light + dark mode dono yahan define hain.
   ============================================================ */

/* ??? Light Mode (default) ??????????????????????????????????? */
:root {
    --mbw-fp-bg:               #fafcfb;
    --mbw-fp-text:             #29413b;
    --mbw-fp-soft-text:        #3d5a52;
    --mbw-fp-border:           #d8e4e0;
    --mbw-fp-shell-border:     #b5cbc4;
    --mbw-fp-shell-radius:     14px;
    --mbw-fp-shell-shadow:     0 2px 6px rgba(20, 50, 40, 0.08), 0 12px 32px rgba(20, 50, 40, 0.10);
    --mbw-fp-divider-subtle:   #e4ece9;
    --mbw-fp-shadow:           var(--mbw-fp-shell-shadow);
    --mbw-fp-panel-shadow:     0 8px 24px rgba(20, 50, 40, 0.10), 0 2px 6px rgba(20, 50, 40, 0.05);
    --mbw-fp-hover-bg:         #edf5f2;
    --mbw-fp-today-bg:         #d4eeea;
    --mbw-fp-today-text:       #0d7a6a;
    --mbw-fp-sel-bg:           #0d7a6a;
    --mbw-fp-sel-text:         #ffffff;
    --mbw-fp-sel-shadow:       0 2px 8px rgba(13, 122, 106, 0.28);
    --mbw-fp-nav-text:         #2e4a42;
    --mbw-fp-nav-hover:        #0d7a6a;
    --mbw-fp-muted:            #7a9690;
    --mbw-fp-control-bg:       #f2f8f6;
    --mbw-fp-control-border:   #c8dbd5;
    --mbw-fp-control-hover:    #e4f0ec;
    --mbw-fp-control-active:   #d8ebe6;
    --mbw-fp-control-shadow:   0 1px 2px rgba(20, 50, 40, 0.06);
    --mbw-fp-time-bg:          #f5faf8;
    --mbw-fp-focus-ring:       0 0 0 2px rgba(13, 122, 106, 0.22);
    --mbw-fp-transition:       background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    --mbw-fp-span-bg:          #e8f4f1;
    --mbw-fp-span-hover:      #dceeea;
}

/* ??? Calendar shell ??????????????????????????????????????????? */
/* MBW-SHARED-DATE-DATETIME-PREMIUM-POPUP-BOUNDARY-SHADOW-01
   One premium floating shell: shell-border + two-layer shell-shadow.
   Internal dividers use weaker --mbw-fp-divider-subtle / --mbw-fp-border. */
.flatpickr-calendar {
    background   : var(--mbw-fp-bg);
    border       : 1px solid var(--mbw-fp-shell-border);
    border-radius: var(--mbw-fp-shell-radius);
    box-shadow   : var(--mbw-fp-shell-shadow);
    box-sizing   : border-box;
    font-family  : inherit;
    font-size    : 13px;
    overflow     : hidden;
    transition   : var(--mbw-fp-transition);
}

/* ??? Month header ????????????????????????????????????????????? */
.flatpickr-months {
    display      : flex;
    align-items  : center;
    padding      : 12px 10px 10px;
    border-bottom: 1px solid var(--mbw-fp-border);
}

.flatpickr-months .flatpickr-month {
    background: var(--mbw-fp-bg);
    color     : var(--mbw-fp-nav-text);
    fill      : var(--mbw-fp-nav-text);
}

/* ??? Nav arrows ??????????????????????????????????????????????? */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    width          : 30px;
    height         : 30px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 8px;
    border         : 1px solid transparent;
    color          : var(--mbw-fp-nav-text);
    fill           : var(--mbw-fp-nav-text);
    transition     : all .15s;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color       : var(--mbw-fp-nav-hover);
    fill        : var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-border);
    background  : var(--mbw-fp-hover-bg);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--mbw-fp-nav-hover);
}

/* ??? Month / year dropdowns ??????????????????????????????????? */
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color      : var(--mbw-fp-nav-text);
    font-weight: 600;
    background : transparent;
    border     : none;
    outline    : none;
    cursor     : pointer;
}

/* ??? Month dropdown ? scrollbar hide ?????????????????????????? */
/* Roman Urdu: Native <select> scroll bar ko Chrome/Safari mein hide karo */
.flatpickr-monthDropdown-months::-webkit-scrollbar {
    display: none;
}

/* Roman Urdu: Firefox mein scrollbar hide karo */
.flatpickr-monthDropdown-months {
    scrollbar-width: none;
}

/* ??? Month dropdown ? option elements ????????????????????????? */
/* Roman Urdu: Firefox + partial Chrome ? option background/color.
   Chrome/Safari native OS dropdown options ko poori tarah style
   nahi kiya ja sakta ? yeh browser limitation hai. */
.flatpickr-monthDropdown-months option {
    background-color: var(--mbw-fp-bg);
    color           : var(--mbw-fp-text);
    font-weight     : 500;
    padding         : 4px 8px;
}

/* Roman Urdu: Selected/checked month option */
.flatpickr-monthDropdown-months option:checked {
    background-color: var(--mbw-fp-sel-bg);
    color           : var(--mbw-fp-sel-text);
    font-weight     : 700;
}

/* ??? Weekday header row ??????????????????????????????????????? */
.flatpickr-weekdays {
    background   : var(--mbw-fp-bg);
    padding      : 8px 10px 6px;
    border-bottom: 1px solid var(--mbw-fp-divider-subtle);
}

span.flatpickr-weekday {
    background    : transparent;
    color         : var(--mbw-fp-muted);
    font-weight   : 650;
    font-size     : 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ??? Day cells ???????????????????????????????????????????????? */
.flatpickr-day {
    color        : var(--mbw-fp-text);
    font-weight  : 500;
    border-radius: 9px;
    border       : 1px solid transparent;
    transition   : var(--mbw-fp-transition);
    user-select  : none;
    position     : relative;
    isolation    : isolate;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background  : var(--mbw-fp-hover-bg);
    border-color: var(--mbw-fp-border);
    outline     : none;
}

/* ??? Today ???????????????????????????????????????????????????? */
.flatpickr-day.today {
    background  : var(--mbw-fp-today-bg);
    color       : var(--mbw-fp-today-text);
    border-color: transparent;
    font-weight : 600;
    position    : relative;
}

/* Roman Urdu: Aaj wale din ke neeche ek chhota dot dikhao */
.flatpickr-day.today::after {
    content      : '';
    position     : absolute;
    bottom       : 4px;
    left         : 50%;
    transform    : translateX(-50%);
    width        : 4px;
    height       : 4px;
    border-radius: 50%;
    background   : var(--mbw-fp-today-text);
}

.flatpickr-day.today:hover {
    background  : var(--mbw-fp-today-bg);
    color       : var(--mbw-fp-today-text);
    border-color: var(--mbw-fp-control-border);
    filter      : none;
}

/* ??? Selected ????????????????????????????????????????????????? */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background  : var(--mbw-fp-sel-bg);
    border-color: var(--mbw-fp-sel-bg);
    color       : var(--mbw-fp-sel-text);
    font-weight : 600;
    box-shadow  : var(--mbw-fp-sel-shadow);
}

.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background  : var(--mbw-fp-sel-bg);
    border-color: var(--mbw-fp-sel-bg);
    color       : var(--mbw-fp-sel-text);
    filter      : brightness(1.06);
    box-shadow  : var(--mbw-fp-sel-shadow);
}

.flatpickr-day.selected.today,
.flatpickr-day.startRange.today,
.flatpickr-day.endRange.today {
    background  : var(--mbw-fp-sel-bg);
    border-color: var(--mbw-fp-sel-bg);
    color       : var(--mbw-fp-sel-text);
}

.flatpickr-day.selected.today::after,
.flatpickr-day.startRange.today::after,
.flatpickr-day.endRange.today::after {
    background: var(--mbw-fp-sel-text);
    opacity   : 0.88;
}

/* ??? Disabled days ???????????????????????????????????????????? */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color      : var(--mbw-fp-muted);
    background : transparent;
    border-color: transparent;
    cursor     : not-allowed;
    opacity    : 0.42;
}

/* ??? Prev / next month overflow days ?????????????????????????? */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color  : var(--mbw-fp-muted);
    opacity: 0.55;
}

/* MBW-SHARED-DATE-TODAY-TO-SELECTED-SPAN-HIGHLIGHT-01
   Optional opt-in visual band between Today and the selected calendar day.
   Cell-based ::before ribbon; row-start/row-end rounding per weekly segment. */
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-day::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    right: 0;
    background: var(--mbw-fp-span-bg);
    pointer-events: none;
    z-index: -1;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-row-start::before {
    left: 3px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-row-end::before {
    right: 3px;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-row-start.mbw-fp-span-row-end::before {
    left: 3px;
    right: 3px;
    border-radius: 9px;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-mid {
    background: transparent;
    border-color: transparent;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-mid:hover,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.mbw-fp-span-mid:focus {
    background: var(--mbw-fp-span-hover);
    border-color: var(--mbw-fp-control-border);
    color: var(--mbw-fp-text);
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.prevMonthDay.mbw-fp-span-mid,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.nextMonthDay.mbw-fp-span-mid {
    color: var(--mbw-fp-muted);
    opacity: 0.72;
}

/* MBW-SHARED-DATE-SPAN-LIGHT-ENDPOINT-CONTRAST-FIX-01
   Light Mode endpoint precedence: Selected > Today > Span.
   Endpoints keep solid MBW fills; span ::before is suppressed on endpoints in Light only. */
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.startRange.mbw-fp-span-selected,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.endRange.mbw-fp-span-selected,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected:hover,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected:focus {
    background: var(--mbw-fp-sel-bg);
    border-color: var(--mbw-fp-sel-bg);
    color: var(--mbw-fp-sel-text);
    box-shadow: var(--mbw-fp-sel-shadow);
    z-index: 2;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today:hover,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today:focus {
    background: var(--mbw-fp-today-bg);
    color: var(--mbw-fp-today-text);
    border-color: transparent;
    z-index: 2;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected::before,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.startRange.mbw-fp-span-selected::before,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.endRange.mbw-fp-span-selected::before,
.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today::before {
    content: none;
    display: none;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today::after {
    z-index: 3;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.today.mbw-fp-span-selected.mbw-fp-span-today {
    background: var(--mbw-fp-sel-bg);
    border-color: var(--mbw-fp-sel-bg);
    color: var(--mbw-fp-sel-text);
    box-shadow: var(--mbw-fp-sel-shadow);
    z-index: 2;
}

.flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.today.mbw-fp-span-selected.mbw-fp-span-today::before {
    content: none;
    display: none;
}

/* Dark Mode — preserve approved endpoint + span continuity (unchanged intent) */
[data-theme="dark"] .flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today,
[data-theme="dark"] .flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected {
    z-index: 1;
}

[data-theme="dark"] .flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.today.mbw-fp-span-today::before,
[data-theme="dark"] .flatpickr-calendar.mbw-fp-has-today-span .flatpickr-day.selected.mbw-fp-span-selected::before {
    content: '';
    display: block;
    opacity: 0.72;
}

/* ??? Inner container border ??????????????????????????????????? */
.flatpickr-innerContainer {
    border-top: 1px solid var(--mbw-fp-border);
}

/* ??? Dark Mode ???????????????????????????????????????????????? */
[data-theme="dark"] {
    --mbw-fp-bg:               #141c1a;
    --mbw-fp-text:             #c8d8d4;
    --mbw-fp-soft-text:        #9eb8b2;
    --mbw-fp-border:           #1e2e2a;
    --mbw-fp-shell-border:     #3d5650;
    --mbw-fp-shell-radius:     14px;
    --mbw-fp-shell-shadow:     0 2px 8px rgba(0, 0, 0, 0.42), 0 14px 36px rgba(0, 0, 0, 0.48);
    --mbw-fp-divider-subtle:   #243532;
    --mbw-fp-shadow:           var(--mbw-fp-shell-shadow);
    --mbw-fp-panel-shadow:     0 10px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    --mbw-fp-hover-bg:         #1a2824;
    --mbw-fp-today-bg:         #0d3d35;
    --mbw-fp-today-text:       #4dcfbe;
    --mbw-fp-sel-bg:           #0fa08d;
    --mbw-fp-sel-text:         #030f0d;
    --mbw-fp-sel-shadow:       0 2px 10px rgba(15, 160, 141, 0.24);
    --mbw-fp-nav-text:         #7a9a92;
    --mbw-fp-nav-hover:        #4dcfbe;
    --mbw-fp-muted:            #4a6660;
    --mbw-fp-control-bg:       rgba(15, 160, 141, 0.10);
    --mbw-fp-control-border:   #2a403a;
    --mbw-fp-control-hover:    rgba(15, 160, 141, 0.16);
    --mbw-fp-control-active:   rgba(15, 160, 141, 0.22);
    --mbw-fp-control-shadow:   0 1px 3px rgba(0, 0, 0, 0.28);
    --mbw-fp-time-bg:          #111917;
    --mbw-fp-focus-ring:       0 0 0 2px rgba(77, 207, 190, 0.28);
    --mbw-fp-span-bg:          rgba(15, 160, 141, 0.14);
    --mbw-fp-span-hover:       rgba(15, 160, 141, 0.22);
}
/* ============================================================
   MBW Date Field Inner Wrapper ? Sage Enterprise
   Roman Urdu: Input + icon ko unified container mein rakhta hai.
   Focus ring inner wrapper par lagti hai ? tighter Sage design.
   JS is wrapper ko nahi dhundta ? Flatpickr safe hai.
   ============================================================ */

/* Roman Urdu: Relative container ? icon absolute position ke liye */
.mbw-date-field-inner {
    position   : relative;
    display    : flex;
    align-items: center;
}


/* Roman Urdu: Filter variant — report cards stretch; compact only outside reports */
.mbw-date-field-inner--filter {
    width  : 100%;
    display: flex;
    align-items: center;
}

/* Non-report compact filter bars keep inline width */
.filter-bar .mbw-date-field-inner--filter {
    width  : auto;
    display: inline-flex;
}

/* Roman Urdu: Filter calendar icon ? field ke andar left side centered */
.mbw-date-field-inner--filter .float-icon--filter {
    position      : absolute;
    left          : 12px;
    right         : auto;
    top           : 50%;
    transform     : translateY(-50%);
    color         : var(--mbw-field-icon-color, var(--mbw-primary));
    pointer-events: none;
    font-size     : 13px;
    z-index       : 2;
}

/* Roman Urdu: Filter flatpickr ? sirf alt input dikhe, native Y-m-d chip na ho */
.mbw-date-field-inner--filter .flatpickr-input {
    display: none !important;
}

.mbw-date-field-inner--filter .flatpickr-wrapper {
    display: block;
    width: 100%;
    position: relative;
}

/* Roman Urdu: Flatpickr filter altInput + month/year display — left icon spacing */
.mbw-date-field-inner--filter .mbw-fp-filter-alt,
.mbw-date-field-inner--filter .mbw-fp-my-display {
    width         : 100%;
    min-width     : 0;
    padding-left  : 36px;
    padding-right : 16px;
    color         : var(--mbw-field-text);
    background    : var(--mbw-field-bg);
    border-color  : var(--mbw-field-border);
    box-sizing    : border-box;
}

.filter-bar .mbw-date-field-inner--filter .mbw-fp-filter-alt,
.filter-bar .mbw-date-field-inner--filter .mbw-fp-my-display {
    width     : 22ch;
    min-width : 22ch;
}

.filter-bar .mbw-date-field-inner--filter .mbw-fp-filter-alt {
    width     : 18ch;
    min-width : 18ch;
}

/* Roman Urdu: Placeholder / format hint color */
.mbw-date-field-inner--filter .mbw-fp-filter-alt::placeholder {
    color: var(--text-soft);
}

/* Roman Urdu: Focus state ? global field focus */
.mbw-date-field-inner--filter .mbw-fp-filter-alt:focus {
    color        : var(--mbw-field-text);
    border-color : var(--mbw-primary);
}

/* Roman Urdu: Selected date text ? dark grey issue fix */
.mbw-date-field-inner--filter input.form-input[readonly],
.mbw-date-field-inner--filter .mbw-fp-filter-alt[readonly],
.mbw-date-field-inner--filter .mbw-fp-my-display {
    color: var(--mbw-field-text);
    cursor: pointer;
}

.mbwr-filter-card .mbw-date-field-inner--filter .mbw-fp-filter-alt,
.mbwr-filter-card .mbw-date-field-inner--filter .mbw-fp-my-display {
    min-height: 36px;
}

@media (max-width: 767px) {
    .mbwr-filter-card .mbw-date-field-inner--filter .mbw-fp-filter-alt,
    .mbwr-filter-card .mbw-date-field-inner--filter .mbw-fp-my-display,
    .mbwr-filter-card .mbwr-filter-date-input {
        min-height: 44px;
        font-size: 16px;
    }
}
.mbw-fp-footer {
    display: none !important;
}

.mbw-fp-today-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--mbw-fp-control-border);
    background: var(--mbw-fp-control-bg);
    color: var(--mbw-fp-today-text);
    border-radius: 999px;
    padding: 0 12px;
    min-height: 34px;
    font-size: 12px;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--mbw-fp-control-shadow);
    transition: var(--mbw-fp-transition);
    flex-shrink: 0;
}

.mbw-fp-today-btn::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.mbw-fp-today-btn:hover {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-today-btn:focus-visible {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
    outline: none;
}

.mbw-fp-today-btn:active {
    background: var(--mbw-fp-control-active);
    transform: translateY(1px);
}

/* ============================================================
   MBW Shared Date / Date-Time enterprise header + Time sidebar
   Task: MBW-SHARED-DATE-DATETIME-ENGINE-ENTERPRISE-REDESIGN-01
   Visual polish: MBW-SHARED-DATE-DATETIME-PREMIUM-VISUAL-POLISH-01
   ============================================================ */

.flatpickr-calendar.mbw-fp-cal {
    width: min(348px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    direction: ltr;
    border: 1px solid var(--mbw-fp-shell-border);
    border-radius: var(--mbw-fp-shell-radius);
    box-shadow: var(--mbw-fp-shell-shadow);
    box-sizing: border-box;
}

/* SHARED-FLATPICKR-CLOSED-STATE-AND-COMPLAINT-DATETIME-POSITION-FIX-01
   Closed non-inline MBW calendars must consume zero document scroll extent.
   Prior unconditional display:grid on Date-Time calendars kept a ~318px absolute
   box in layout while closed (visibility:hidden), inflating html.scrollHeight past footer. */
.flatpickr-calendar.mbw-fp-cal:not(.open):not(.inline) {
    display: none !important;
}

.flatpickr-calendar.mbw-fp-cal.hasTime.open,
.flatpickr-calendar.mbw-fp-datetime-cal.open {
    width: min(540px, calc(100vw - 16px)) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    grid-template-areas:
        "header time"
        "days time";
    align-items: stretch;
}

/* Form Time-only popup (noCalendar) — compact TIME controls only */
.flatpickr-calendar.mbw-fp-time-only-cal {
    width: min(280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    direction: ltr;
    border: 1px solid var(--mbw-fp-shell-border);
    border-radius: var(--mbw-fp-shell-radius);
    box-shadow: var(--mbw-fp-shell-shadow);
    box-sizing: border-box;
}

.flatpickr-calendar.mbw-fp-time-only-cal:not(.open):not(.inline) {
    display: none !important;
}

.flatpickr-calendar.mbw-fp-time-only-cal.open {
    display: block !important;
    width: min(280px, calc(100vw - 16px)) !important;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-header,
.flatpickr-calendar.mbw-fp-time-only-cal .flatpickr-months,
.flatpickr-calendar.mbw-fp-time-only-cal .flatpickr-innerContainer,
.flatpickr-calendar.mbw-fp-time-only-cal .flatpickr-rContainer,
.flatpickr-calendar.mbw-fp-time-only-cal .flatpickr-weekdays,
.flatpickr-calendar.mbw-fp-time-only-cal .dayContainer,
.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-cal-selector-overlay {
    display: none !important;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-section {
    grid-area: auto;
    border-left: none;
    border-top: none;
    padding: 14px 12px 16px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    align-self: stretch;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls.flatpickr-time,
.flatpickr-calendar.mbw-fp-time-only-cal.hasTime .mbw-fp-time-controls.flatpickr-time {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    height: auto;
    max-height: none;
    overflow: visible;
    line-height: 1.2;
    border-top: none;
    float: none;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls .mbw-fp-time-field {
    flex: 0 0 auto;
    width: 100%;
    float: none;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls .numInputWrapper {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    float: none;
    display: block;
    position: relative;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls .numInputWrapper span.arrowUp,
.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls .numInputWrapper span.arrowDown {
    opacity: 0.85;
    width: 22px;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls input.numInput {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 44px;
    padding: 0 28px 0 10px;
    text-align: left;
    box-sizing: border-box;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls input.numInput:hover,
.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls input.numInput:focus {
    outline: none;
}

.flatpickr-calendar.mbw-fp-time-only-cal .mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 0;
    float: none;
}

.flatpickr-calendar.mbw-fp-cal .flatpickr-months {
    display: none !important;
}

.mbw-fp-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 9px;
    border-bottom: 1px solid var(--mbw-fp-divider-subtle);
    background: var(--mbw-fp-bg);
}

.flatpickr-calendar.mbw-fp-cal:not(.hasTime) .mbw-fp-header {
    display: flex;
}

.flatpickr-calendar.mbw-fp-cal .flatpickr-innerContainer {
    grid-area: days;
    border-top: none;
    position: relative;
}

.mbw-fp-month-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.mbw-fp-month-prev,
.mbw-fp-month-next,
.mbw-fp-year-prev,
.mbw-fp-year-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mbw-fp-control-border);
    border-radius: 9px;
    background: var(--mbw-fp-control-bg);
    color: var(--mbw-fp-nav-hover);
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    box-shadow: var(--mbw-fp-control-shadow);
    transition: var(--mbw-fp-transition);
}

.mbw-fp-month-prev:hover,
.mbw-fp-month-next:hover,
.mbw-fp-year-prev:hover,
.mbw-fp-year-next:hover {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-month-prev:focus-visible,
.mbw-fp-month-next:focus-visible,
.mbw-fp-year-prev:focus-visible,
.mbw-fp-year-next:focus-visible {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
    outline: none;
}

.mbw-fp-month-prev:active,
.mbw-fp-month-next:active,
.mbw-fp-year-prev:active,
.mbw-fp-year-next:active {
    background: var(--mbw-fp-control-active);
    transform: translateY(1px);
}

.mbw-fp-month-prev:disabled,
.mbw-fp-month-next:disabled,
.mbw-fp-year-prev:disabled,
.mbw-fp-year-next:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: transparent;
    border-color: var(--mbw-fp-border);
    color: var(--mbw-fp-muted);
    box-shadow: none;
}

.mbw-fp-month-name,
.mbw-fp-year-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 1px solid var(--mbw-fp-control-border);
    background: var(--mbw-fp-control-bg);
    color: var(--mbw-fp-nav-text);
    font-weight: 650;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 9px;
    min-width: 0;
    box-shadow: var(--mbw-fp-control-shadow);
    transition: var(--mbw-fp-transition);
}

.mbw-fp-month-name {
    flex: 1 1 auto;
    max-width: 132px;
}

.mbw-fp-month-name::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}

.mbw-fp-month-name:hover,
.mbw-fp-year-trigger:hover {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-month-name:focus-visible,
.mbw-fp-year-trigger:focus-visible {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
    outline: none;
}

.mbw-fp-month-name[aria-expanded="true"],
.mbw-fp-year-trigger[aria-expanded="true"] {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
}

.mbw-fp-month-name:active,
.mbw-fp-year-trigger:active {
    background: var(--mbw-fp-control-active);
    transform: translateY(1px);
}

.mbw-fp-year-trigger {
    flex-shrink: 0;
}

.mbw-fp-year-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.85;
}

.mbw-fp-year-trigger:hover .mbw-fp-year-arrow,
.mbw-fp-year-trigger[aria-expanded="true"] .mbw-fp-year-arrow {
    border-top-color: currentColor;
}

.mbw-fp-view-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    background: var(--mbw-fp-bg);
    padding: 12px;
    box-shadow: var(--mbw-fp-panel-shadow);
}

.mbw-fp-month-panel,
.mbw-fp-year-panel {
    height: 100%;
}

.mbw-fp-month-panel-year,
.mbw-fp-year-range {
    text-align: center;
    font-weight: 650;
    font-size: 13px;
    color: var(--mbw-fp-soft-text);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.mbw-fp-year-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.mbw-fp-month-grid,
.mbw-fp-year-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.mbw-fp-year-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mbw-fp-month-cell,
.mbw-fp-year-cell {
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--mbw-fp-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 4px;
    cursor: pointer;
    min-height: 36px;
    transition: var(--mbw-fp-transition);
}

.mbw-fp-month-cell:hover,
.mbw-fp-year-cell:hover {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-control-border);
}

.mbw-fp-month-cell:focus-visible,
.mbw-fp-year-cell:focus-visible {
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    border-color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
    outline: none;
}

.mbw-fp-month-cell.is-selected,
.mbw-fp-year-cell.is-selected {
    background: var(--mbw-fp-sel-bg);
    color: var(--mbw-fp-sel-text);
    border-color: var(--mbw-fp-sel-bg);
    font-weight: 650;
    box-shadow: var(--mbw-fp-sel-shadow);
}

.mbw-fp-time-section {
    grid-area: time;
    border-top: none;
    border-left: 1px solid var(--mbw-fp-border);
    padding: 14px 12px 16px;
    background: var(--mbw-fp-time-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-shadow: none;
}

.mbw-fp-datetime-alt {
    cursor: pointer;
}

.mbw-fp-time-label {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mbw-fp-muted);
    margin: 0 0 14px;
    text-align: center;
}

.mbw-fp-time-controls.flatpickr-time {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    max-height: none;
    height: auto;
    overflow: visible;
    line-height: 1.2;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

/* MBW-SHARED-DATETIME-TIME-SIDEBAR-RENDERING-FIX-01
   Flatpickr CDN sets .flatpickr-time { max-height:40px; overflow:hidden }
   and .flatpickr-calendar.hasTime .flatpickr-time { height:40px } for the
   native horizontal bar. Beat those rules only inside the MBW Date-Time sidebar. */
.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-section {
    overflow: visible;
    align-self: stretch;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls.flatpickr-time,
.flatpickr-calendar.mbw-fp-datetime-cal.hasTime .mbw-fp-time-controls.flatpickr-time {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 14px;
    height: auto;
    max-height: none;
    overflow: visible;
    line-height: 1.2;
    border-top: none;
    float: none;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls .mbw-fp-time-field {
    flex: 0 0 auto;
    width: 100%;
    float: none;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls .numInputWrapper {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    float: none;
    display: block;
    position: relative;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls .numInputWrapper span.arrowUp,
.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls .numInputWrapper span.arrowDown {
    opacity: 0.85;
    width: 22px;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls input.numInput {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 44px;
    padding: 0 28px 0 10px;
    text-align: left;
    box-sizing: border-box;
    float: none;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls input.numInput:hover,
.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls input.numInput:focus {
    background: transparent;
}

.flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    float: none;
    line-height: normal;
}

.mbw-fp-time-controls .flatpickr-time-separator {
    display: none;
}

.mbw-fp-time-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mbw-fp-time-field-label {
    font-size: 11px;
    font-weight: 650;
    color: var(--mbw-fp-soft-text);
    letter-spacing: 0.01em;
}

.mbw-fp-time-controls .numInputWrapper {
    flex: 0 0 auto;
    width: 100%;
    height: 44px;
    border: 1px solid var(--mbw-fp-control-border);
    border-radius: 10px;
    background: var(--mbw-fp-control-bg);
    transition: var(--mbw-fp-transition);
    box-shadow: var(--mbw-fp-control-shadow);
}

.mbw-fp-time-controls .numInputWrapper:hover {
    border-color: var(--mbw-fp-nav-hover);
    background: var(--mbw-fp-control-hover);
}

.mbw-fp-time-controls .numInputWrapper:focus-within {
    border-color: var(--mbw-fp-sel-bg);
    box-shadow: var(--mbw-fp-focus-ring);
    background: var(--mbw-fp-control-bg);
}

.mbw-fp-time-controls .numInputWrapper span.arrowUp,
.mbw-fp-time-controls .numInputWrapper span.arrowDown {
    border-color: var(--mbw-fp-control-border);
    border-left: 1px solid var(--mbw-fp-control-border);
    background: var(--mbw-fp-control-hover);
    opacity: 1;
    width: 24px;
}

.mbw-fp-time-controls .numInputWrapper span.arrowUp:after {
    border-bottom-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-time-controls .numInputWrapper span.arrowDown:after {
    border-top-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-time-controls .numInputWrapper span.arrowUp:hover,
.mbw-fp-time-controls .numInputWrapper span.arrowDown:hover {
    background: var(--mbw-fp-control-active);
}

.mbw-fp-time-controls input.numInput {
    color: var(--mbw-fp-text);
    font-weight: 650;
    font-size: 14px;
    background: transparent;
}

.mbw-fp-time-controls input.numInput:focus {
    outline: none;
    background: transparent;
}

.mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mbw-fp-control-border);
    border-radius: 10px;
    background: var(--mbw-fp-control-bg);
    color: var(--mbw-fp-text);
    font-weight: 650;
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: var(--mbw-fp-transition);
    outline: none;
    box-shadow: var(--mbw-fp-control-shadow);
}

.mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem:hover,
.mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem:focus-visible {
    border-color: var(--mbw-fp-nav-hover);
    background: var(--mbw-fp-control-hover);
    color: var(--mbw-fp-nav-hover);
    box-shadow: var(--mbw-fp-focus-ring);
}

@media (max-width: 639px) {
    .flatpickr-calendar.mbw-fp-cal.hasTime,
    .flatpickr-calendar.mbw-fp-datetime-cal {
        width: min(348px, calc(100vw - 16px)) !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "header"
            "days"
            "time";
    }

    .mbw-fp-time-section {
        border-left: none;
        border-top: 1px solid var(--mbw-fp-border);
    }

    .flatpickr-calendar.mbw-fp-datetime-cal .mbw-fp-time-controls.flatpickr-time,
    .mbw-fp-time-controls.flatpickr-time {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .mbw-fp-time-field {
        flex: 1 1 30%;
        min-width: 72px;
    }

    .mbw-fp-header {
        gap: 6px;
        padding: 8px;
        flex-wrap: wrap;
    }

    .mbw-fp-today-btn {
        min-height: 40px;
    }

    .mbw-fp-month-prev,
    .mbw-fp-month-next,
    .mbw-fp-year-prev,
    .mbw-fp-year-next {
        width: 36px;
        height: 36px;
    }

    .mbw-fp-month-name,
    .mbw-fp-year-trigger {
        min-height: 36px;
    }

    .mbw-fp-month-name {
        max-width: 108px;
        font-size: 12px;
    }

    .mbw-fp-month-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mbw-fp-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mbw-fp-time-controls .numInputWrapper,
    .mbw-fp-time-controls .flatpickr-am-pm.mbw-fp-meridiem {
        height: 44px;
    }
}
/* ============================================================
   Sage Enterprise Date Field ? Float Label Fix
   Roman Urdu: .float-input ~ .float-label sibling selector
   .mbw-date-field-inner wrapper ki wajah se kaam nahi karta.
   Input aur label alag parents mein hain ? sibling selector
   different parent mein work nahi karta.
   Fix: [data-mbw-theme="sage"] .float-group pe direct descendant
   rule ? sirf date fields affect hote hain, koi aur nahi.
   ============================================================ */

/* Roman Urdu: Label ko hamesha top-border pe rakh ? float-input
   sibling rule ka replacement. Sirf sage date fields pe apply. */
.float-group[data-mbw-theme="sage"] .float-label {
    top        : 0;
    left       : 12px;
    transform  : translateY(-50%);
    background : var(--mbw-card-bg);
    padding    : 0 6px;
    color      : var(--mbw-field-label-color, var(--mbw-primary));
    font-size  : 11px;
    font-weight: 600;
}

/* Roman Urdu: Jab inner wrapper focused ho ? label color primary rahe */
.float-group[data-mbw-theme="sage"]:focus-within .float-label {
    color: var(--mbw-field-label-color, var(--mbw-primary));
}

/* Roman Urdu: Error state mein label danger color */
.float-group[data-mbw-theme="sage"].has-error .float-label {
    color: var(--danger);
}

/* Roman Urdu: Float icon ? inner wrapper ke andar positioned correctly.
   .mbw-field ~ .float-icon sibling rule kaam karta hai (same parent mein).
   Sirf color confirm karo ? icon color override */
.float-group[data-mbw-theme="sage"] .float-icon {
    color: var(--mbw-field-icon-color, var(--mbw-primary));
}

.float-group[data-mbw-theme="sage"] .mbw-date-field-inner {
    width: 100%;
}

.float-group[data-mbw-theme="sage"] .mbw-date-field-inner input.flatpickr-input:not(.mbw-fp-datetime-alt):not(.mbw-fp-filter-alt) {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: 0;
}

.float-group[data-mbw-theme="sage"] .mbw-date-field-inner .flatpickr-wrapper {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
}

.float-group[data-mbw-theme="sage"] .mbw-date-field-inner .flatpickr-wrapper input,
.float-group[data-mbw-theme="sage"] .mbw-date-field-inner .mbw-fp-datetime-alt {
    width: 100%;
    cursor: pointer;
}

.float-group[data-mbw-theme="sage"] .mbw-date-field-inner .float-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}
/* ============================================================
   MBW Custom Month Dropdown ? Sage Enterprise
   Roman Urdu: Flatpickr ke native month <select> ko poori
   tarah replace karta hai. Light + dark dono modes support.
   Position:fixed use karta hai taa ke calendar overflow:hidden
   se affect na ho.
   ============================================================ */

/* Roman Urdu: Wrapper ? trigger + list ka container */
.mbw-fp-month-wrap {
    position   : relative;
    display    : inline-flex;
    align-items: center;
}

/* Roman Urdu: Trigger button ? month naam + chevron */
.mbw-fp-month-trigger {
    display        : inline-flex;
    align-items    : center;
    gap            : 5px;
    background     : transparent;
    border         : none;
    color          : var(--mbw-fp-nav-text);
    font-weight    : 700;
    font-size      : 14px;
    font-family    : inherit;
    cursor         : pointer;
    padding        : 3px 7px;
    border-radius  : 6px;
    transition     : background .15s, color .15s;
    outline        : none;
    letter-spacing : -.01em;
    user-select    : none;
}

.mbw-fp-month-trigger:hover {
    background: var(--mbw-fp-hover-bg);
    color     : var(--mbw-fp-nav-hover);
}

.mbw-fp-month-trigger:focus-visible {
    outline: 2px solid var(--mbw-fp-sel-bg);
    outline-offset: 2px;
}

/* Roman Urdu: Down arrow ? CSS se banaya, SVG nahi */
.mbw-fp-month-arrow {
    display       : inline-block;
    width         : 0;
    height        : 0;
    border-left   : 4px solid transparent;
    border-right  : 4px solid transparent;
    border-top    : 5px solid var(--mbw-fp-nav-text);
    transition    : transform .15s, border-top-color .15s;
    margin-top    : 1px;
    flex-shrink   : 0;
}

.mbw-fp-month-trigger:hover .mbw-fp-month-arrow {
    border-top-color: var(--mbw-fp-nav-hover);
}

.mbw-fp-month-trigger[aria-expanded="true"] .mbw-fp-month-arrow {
    transform: rotate(180deg);
}

/* Roman Urdu: Dropdown list ? body mein append hoti hai, position:fixed */
.mbw-fp-month-list {
    position     : fixed;
    z-index      : 99999;
    background   : var(--mbw-fp-bg);
    border       : 1px solid var(--mbw-fp-border);
    border-radius: 10px;
    box-shadow   : var(--mbw-fp-shadow);
    min-width    : 130px;
    max-height   : 240px;
    overflow-y   : auto;
    scrollbar-width: none;
    padding      : 5px;
    animation    : mbwFpMonthIn .12s ease;
}

/* Roman Urdu: Firefox scrollbar hide */
.mbw-fp-month-list {
    scrollbar-width: none;
}

/* Roman Urdu: Chrome/Safari scrollbar hide */
.mbw-fp-month-list::-webkit-scrollbar {
    display: none;
}

@keyframes mbwFpMonthIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Roman Urdu: Single month option row */
.mbw-fp-month-option {
    padding      : 8px 12px;
    border-radius: 7px;
    font-size    : 13px;
    font-weight  : 500;
    color        : var(--mbw-fp-text);
    cursor       : pointer;
    transition   : background .1s, color .1s;
    white-space  : nowrap;
    user-select  : none;
}

/* Roman Urdu: Hover state ? light teal highlight */
.mbw-fp-month-option:hover {
    background: var(--mbw-fp-hover-bg);
    color     : var(--mbw-fp-nav-hover);
}

/* Roman Urdu: Selected/active month ? solid teal Sage color */
.mbw-fp-month-option.is-selected {
    background : var(--mbw-fp-sel-bg);
    color      : var(--mbw-fp-sel-text);
    font-weight: 700;
}

.mbw-fp-month-option.is-selected:hover {
    background: var(--mbw-fp-sel-bg);
    filter    : brightness(1.08);
}

/* ============================================================
   MBW Month/Year Filter Panel ? no day grid (filter bars only)
   Roman Urdu: Account Transfer waghera ke Month/Year filter ke
   liye ? sirf year nav + 12 month buttons + Clear / This month.
   ============================================================ */

.mbw-date-field-inner--filter:has(.mbw-fp-my-display) {
    position: relative;
    cursor: pointer;
}

.mbw-fp-my-display {
    display       : block;
    width         : 100%;
    text-align    : left;
    border        : 1px solid var(--mbw-field-border);
    border-radius : var(--mbw-r-md, 8px);
    font-size     : 13px;
    font-family   : inherit;
    line-height   : 1.4;
    min-height    : 36px;
    height        : 36px;
    box-sizing    : border-box;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    -webkit-appearance: none;
    appearance    : none;
}

.mbw-fp-my-display:not(.has-value) {
    color: var(--text-soft);
}

.mbw-fp-my-display:hover {
    border-color: var(--mbw-primary);
}

.mbw-fp-my-display:focus-visible {
    outline       : none;
    border-color  : var(--mbw-primary);
    box-shadow    : 0 0 0 2px var(--primary-soft, rgba(37, 99, 235, 0.15));
}

.mbw-fp-my-panel {
    position     : fixed;
    z-index      : 99999;
    background   : var(--mbw-fp-bg);
    border       : 1px solid var(--mbw-fp-border);
    border-radius: 12px;
    box-shadow   : var(--mbw-fp-shadow);
    padding      : 12px;
    min-width    : 260px;
    animation    : mbwFpMonthIn .12s ease;
}

.mbw-fp-my-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    margin-bottom  : 10px;
    padding        : 0 2px;
}

.mbw-fp-my-year {
    font-weight: 700;
    font-size  : 15px;
    color      : var(--mbw-fp-nav-text);
}

.mbw-fp-my-year-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 28px;
    height         : 28px;
    background     : transparent;
    border         : none;
    border-radius  : 6px;
    cursor         : pointer;
    color          : var(--mbw-fp-nav-text);
    font-size      : 12px;
    transition     : background .15s, color .15s;
}

.mbw-fp-my-year-btn:hover {
    background: var(--mbw-fp-hover-bg);
    color     : var(--mbw-fp-nav-hover);
}

.mbw-fp-my-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 4px;
}

.mbw-fp-my-cell {
    padding      : 10px 4px;
    border       : none;
    border-radius: 8px;
    background   : transparent;
    font-size    : 13px;
    font-weight  : 500;
    cursor       : pointer;
    color        : var(--mbw-fp-text);
    transition   : background .1s, color .1s;
    font-family  : inherit;
}

.mbw-fp-my-cell:hover:not(.is-selected) {
    background: var(--mbw-fp-hover-bg);
    color     : var(--mbw-fp-nav-hover);
}

.mbw-fp-my-cell.is-selected {
    background : var(--mbw-fp-sel-bg);
    color      : var(--mbw-fp-sel-text);
    font-weight: 700;
}

.mbw-fp-my-footer {
    display        : flex;
    justify-content: space-between;
    margin-top     : 10px;
    padding-top    : 8px;
    border-top     : 1px solid var(--mbw-fp-border);
}

.mbw-fp-my-clear,
.mbw-fp-my-this {
    background : none;
    border     : none;
    color      : var(--mbw-primary);
    font-size  : 13px;
    font-weight: 600;
    cursor     : pointer;
    padding    : 4px 6px;
    font-family: inherit;
}

.mbw-fp-my-clear:hover,
.mbw-fp-my-this:hover {
    text-decoration: underline;
}
/* ???????????????????????????????????????????????????????????????????????????????
   Roman Urdu: Expense Items Table -- compact custom-select-wrapper
   ??????????????????????????????????????????????????????????????????????????????? */
#expItemsTable .custom-select-wrapper {
    margin-bottom: 0;
    min-width: 100px;
}
#expItemsTable .custom-select-trigger {
    padding: 5px 36px 5px 8px;
    font-size: 12px;
    min-height: 30px;
    height: auto;
    line-height: 1.4;
}
#expItemsTable .custom-select-value {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
    display: block;
}
#expItemsTable .custom-select-dropdown {
    min-width: 160px;
    z-index: 2000;
}
#expItemsTable .custom-select-option {
    padding: 7px 12px;
    font-size: 12px;
}

/* Roman Urdu: Expense Items Table scroll wrapper -- sirf horizontal scroll, vertical overflow visible */
.exp-table-scroll {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* ============================================================================
   UNIFIED PASSWORD UI (Profile / Customer / Vendor / Employee)
   Roman Urdu: Customer/Vendor pattern ? ek jagah change = char modules update.
   Lock + eye input center pe (top:25px) ? strength/match hint se shift nahi hote.
   ============================================================================ */
.mbw-hidden {
    display: none !important;
}

/*
 * Roman Urdu: display:contents mat use karo ?
 * mbw-4col sirf direct > .float-group ko span 3 deta hai.
 * Suite bina span ke 1 track mein aa jati thi ? Password/Confirm bohot patli.
 * Fix: suite nested 2-col grid + parent mein baqi columns span.
 */
.mbw-pw-suite {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    row-gap: 5px;
    min-width: 0;
    width: 100%;
    align-items: start;
}
/* Roman Urdu: "Password is set" card poori suite width */
.mbw-pw-suite > [data-mbw-pw="set-info"] {
    grid-column: 1 / -1;
}

/* Roman Urdu: 4-col (Vendor/Customer portal) ? Username span 3, suite baqi 9 */
.mbw-section-form-grid.mbw-4col > .mbw-pw-suite,
.si-form-grid.mbw-4col > .mbw-pw-suite {
    grid-column: span 9 !important;
}
.mbw-section-form-grid.mbw-4col > .float-group:has(+ .mbw-pw-suite),
.si-form-grid.mbw-4col > .float-group:has(+ .mbw-pw-suite) {
    grid-column: span 3 !important;
}

/* Roman Urdu: 3-col (Employee portal / Profile) ? suite 2 fields barabar */
.mbw-section-form-grid.mbw-3col > .mbw-pw-suite {
    grid-column: span 2;
}
.mbw-section-form-grid.mbw-3col > .mbw-pw-suite:only-child {
    grid-column: 1 / -1;
}

/* Roman Urdu: Tablet ? 4col 2-col mode mein suite poori width */
@media (max-width: 992px) {
    .mbw-section-form-grid.mbw-4col > .mbw-pw-suite,
    .si-form-grid.mbw-4col > .mbw-pw-suite {
        grid-column: span 6 !important;
    }
}
@media (max-width: 600px) {
    .mbw-pw-suite {
        grid-template-columns: 1fr;
    }
    .mbw-section-form-grid.mbw-4col > .mbw-pw-suite,
    .si-form-grid.mbw-4col > .mbw-pw-suite,
    .mbw-section-form-grid.mbw-3col > .mbw-pw-suite {
        grid-column: 1 / -1 !important;
    }
}

.mbw-pw-field {
    position: relative;
    --mbw-pw-ok: #22c55e;
    --mbw-pw-bad: #ef4444;
    --mbw-pw-warn: #f59e0b;
    min-width: 0;
}
.mbw-pw-field .float-input {
    padding-right: 96px;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Roman Urdu: Browser ka native black eye hide ? sirf hamara custom toggle */
.mbw-pw-field .float-input::-ms-reveal,
.mbw-pw-field .float-input::-ms-clear {
    display: none;
}
.mbw-pw-field .float-input::-webkit-credentials-auto-fill-button,
.mbw-pw-field .float-input::-webkit-strong-password-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
}
/* Roman Urdu: Hint hamesha field ke NEECHE (andar fake-placeholder nahi) */
.mbw-pw-field > .float-hint,
.mbw-pw-field > .float-hint--static {
    position: static;
    transform: none;
    display: block;
    margin-top: 6px;
    padding-left: 40px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    left: auto;
    right: auto;
    top: auto;
    z-index: auto;
}
.mbw-pw-field:focus-within > .float-hint,
.mbw-pw-field:focus-within > .float-hint--static,
.mbw-pw-field:has(.float-input:not(:placeholder-shown)) > .float-hint,
.mbw-pw-field:has(.float-input:not(:placeholder-shown)) > .float-hint--static {
    display: block;
}
/* Roman Urdu: Icons hamesha input (44px) ke center ? poori float-group ka nahi */
.mbw-pw-field > .float-icon {
    top: 22px;
    transform: translateY(-50%);
}
.mbw-pw-field .btn-toggle-password,
.btn-toggle-password {
    position: absolute;
    right: 10px;
    top: 22px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    z-index: 2;
    line-height: 1;
}
.mbw-pw-field .btn-toggle-password:hover,
.btn-toggle-password:hover {
    color: var(--primary);
}
/* Roman Urdu: Empty field pe eye + copy hide ? type karte hi dikhe */
.mbw-pw-field .btn-toggle-password,
.mbw-pw-field .btn-copy-field {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mbw-pw-field.is-pw-filled .btn-toggle-password,
.mbw-pw-field:has(.float-input:not(:placeholder-shown)) .btn-toggle-password,
.mbw-pw-field.is-pw-filled .btn-copy-field,
.mbw-pw-field:has(.float-input:not(:placeholder-shown)) .btn-copy-field {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Roman Urdu: Copy button ? screenshot jaisa rounded square */
.btn-copy-field {
    position: absolute;
    right: 10px;
    top: 25px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg, #f8fafc);
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    z-index: 2;
    line-height: 1;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn-copy-field:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.btn-copy-field.is-copied {
    color: var(--success, #22c55e);
    border-color: var(--success, #22c55e);
}
/* Username: copy right edge */
.mbw-portal-username {
    position: relative;
}
.mbw-portal-username .float-input {
    padding-right: 48px;
}
.mbw-portal-username > .float-icon {
    top: 25px;
    transform: translateY(-50%);
}
.mbw-portal-username > .float-hint,
.mbw-portal-username > .float-hint--static {
    position: static;
    transform: none;
    display: block;
    margin-top: 6px;
    padding-left: 40px;
}
/* Password: copy left of eye; state left of copy */
.mbw-pw-field .btn-copy-field {
    right: 38px;
}
.mbw-pw-field-state {
    position: absolute;
    right: 70px;
    top: 25px;
    transform: translateY(-50%);
    font-size: 14px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/*
 * Roman Urdu: Hide mode mein password dots + border color sync
 * color / caret-color bullets ko tint karte hain (Chrome/Edge/Firefox)
 */
.mbw-pw-field.is-pw-ok .float-input,
.mbw-pw-field.is-pw-ok .float-input:focus {
    border-color: var(--mbw-pw-ok) !important;
    color: var(--mbw-pw-ok);
    caret-color: var(--mbw-pw-ok);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mbw-pw-ok) 35%, transparent);
}
.mbw-pw-field.is-pw-ok .btn-copy-field,
.mbw-pw-field.is-pw-ok .btn-toggle-password,
.mbw-pw-field.is-pw-ok .mbw-pw-field-state {
    color: var(--mbw-pw-ok);
}
.mbw-pw-field.is-pw-ok .btn-copy-field {
    border-color: color-mix(in srgb, var(--mbw-pw-ok) 45%, #fff);
}

.mbw-pw-field.is-pw-bad .float-input,
.mbw-pw-field.is-pw-bad .float-input:focus {
    border-color: var(--mbw-pw-bad) !important;
    color: var(--mbw-pw-bad);
    caret-color: var(--mbw-pw-bad);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mbw-pw-bad) 35%, transparent);
}
.mbw-pw-field.is-pw-bad > .float-icon,
.mbw-pw-field.is-pw-bad .btn-toggle-password,
.mbw-pw-field.is-pw-bad .mbw-pw-field-state {
    color: var(--mbw-pw-bad);
}

.mbw-pw-field.is-pw-warn .float-input,
.mbw-pw-field.is-pw-warn .float-input:focus {
    border-color: var(--mbw-pw-warn) !important;
    color: var(--mbw-pw-warn);
    caret-color: var(--mbw-pw-warn);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--mbw-pw-warn) 35%, transparent);
}
.mbw-pw-field.is-pw-warn > .float-icon,
.mbw-pw-field.is-pw-warn .btn-toggle-password,
.mbw-pw-field.is-pw-warn .mbw-pw-field-state {
    color: var(--mbw-pw-warn);
}

.password-strength-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    width: 100%;
}
.password-strength-bar .strength-meter,
.strength-meter {
    flex: 1;
    height: 6px;
    background: var(--border-subtle, #ddd);
    border-radius: 3px;
    overflow: hidden;
}
.password-strength-bar .strength-fill,
.strength-fill {
    height: 100%;
    width: 0;
    border-radius: 3px;
    transition: width 0.3s ease, background 0.3s ease;
}
.password-strength-bar .strength-text,
.strength-text {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    min-width: 70px;
}

.password-match-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
}

.mbw-pw-set-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
.mbw-pw-set-icon {
    color: var(--success);
    font-size: 18px;
    flex-shrink: 0;
}
.mbw-pw-set-info {
    flex: 1;
}
.mbw-pw-set-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.mbw-pw-set-mask {
    font-size: 11px;
    color: var(--text-muted);
}

/* ============================================================================
   UNIFIED UPLOAD UI ? theme-aware (light + dark)
   Light: soft card surfaces (not heavy dark neon)
   Dark: elevated card surfaces (not hardcoded white)
   ============================================================================ */
.mbw-upl { width: 100%; min-width: 0; }
.mbw-upl.is-error {
    outline: 1px solid var(--danger);
    outline-offset: 4px;
    border-radius: var(--r-md, 8px);
}
.mbw-upl-section-label {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.mbw-upl-section-sub {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--text-muted);
    opacity: .9;
}
.mbw-upl-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mbw-upl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    background: var(--surface-soft, #f1f5f9);
    color: var(--text-main);
    line-height: 1.2;
    user-select: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
/* Roman Urdu: Choose/Add/Change ? Record View (.record-btn) jaisa emerald + hover invert */
.mbw-upl-btn--change {
    background  : var(--record-btn-bg);
    color       : var(--record-btn-text);
    border-color: var(--record-btn-bg);
}
.mbw-upl-btn--change:hover {
    background  : var(--record-btn-soft);
    color       : var(--record-btn-bg);
    border-color: var(--record-btn-bg);
}
.mbw-upl-btn--change.is-disabled,
.mbw-upl-docs-add.is-maxed .mbw-upl-btn--change {
    opacity: 0.45;
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(0.15);
}
.mbw-upl-btn--change.is-disabled:hover,
.mbw-upl-docs-add.is-maxed .mbw-upl-btn--change:hover {
    background  : var(--record-btn-bg);
    color       : var(--record-btn-text);
    border-color: var(--record-btn-bg);
}
.mbw-upl-max-warn {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fcd34d;
}
.mbw-upl-max-warn i {
    margin-top: 2px;
    color: #d97706;
    flex-shrink: 0;
}
.mbw-upl-max-warn.mbw-hidden { display: none !important; }
.mbw-upl-btn--remove {
    background: color-mix(in srgb, #e11d48 10%, var(--card-bg));
    border-color: color-mix(in srgb, #e11d48 28%, var(--border-subtle));
    color: #e11d48;
}
.mbw-upl-btn--remove:hover {
    background: color-mix(in srgb, #e11d48 16%, var(--card-bg));
}

/* Shared card surface ? light default uses theme card */
.mbw-upl-image-card,
.mbw-doc-card {
    position: relative;
    border-radius: 14px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .05));
}

.mbw-upl-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--surface-soft, #f1f5f9);
    color: var(--text-muted);
    cursor: pointer;
    z-index: 2;
}
.mbw-upl-dismiss:hover {
    color: #e11d48;
    border-color: color-mix(in srgb, #e11d48 35%, var(--border-subtle));
}

.mbw-upl-image-top {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}
.mbw-upl-image-visual {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 70%, #38bdf8), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
}
.mbw-upl-image-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mbw-upl-image-placeholder {
    color: #fff;
    font-size: 26px;
}
.mbw-upl-files-tag {
    position: absolute;
    left: 4px;
    bottom: 4px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .6px;
    background: rgba(255, 255, 255, .92);
    color: #0f172a;
    padding: 2px 5px;
    border-radius: 4px;
}
.mbw-upl-image-meta { min-width: 0; flex: 1; padding-right: 28px; }
.mbw-upl-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mbw-upl-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.mbw-upl-progress-panel {
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--surface-soft, #f8fafc);
    border: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.mbw-upl-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--text-main);
}
.mbw-upl-status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.mbw-upl-pct { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-main); }
.mbw-upl-bar {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-subtle) 80%, transparent);
    overflow: hidden;
}
.mbw-upl-bar-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--primary);
    transition: width .12s linear, background .2s ease;
}
.mbw-upl-progress-panel.is-complete .mbw-upl-bar-fill {
    background: #22c55e;
}
.mbw-upl-progress-panel.is-complete .mbw-upl-status {
    color: #16a34a;
}
.mbw-upl-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.mbw-upl-docs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mbw-doc-card-main { display: flex; gap: 12px; align-items: flex-start; }
.mbw-doc-icon { width: 44px; flex-shrink: 0; }
.mbw-doc-icon img {
    width: 44px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
}
.mbw-doc-pdf-badge,
.mbw-doc-file-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 44px;
    height: 52px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    background: var(--surface-soft, #f8fafc);
    text-decoration: none;
    color: var(--text-muted);
    font-size: 16px;
    overflow: hidden;
    position: relative;
}
.mbw-doc-pdf-badge span,
.mbw-doc-file-badge span {
    width: 100%;
    text-align: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 3px 0;
    margin-top: auto;
}
.mbw-doc-pdf-badge span { background: #ef4444; color: #fff; }
.mbw-doc-file-badge span { background: var(--primary); color: #fff; }
.mbw-doc-pdf-badge i,
.mbw-doc-file-badge i { margin: 8px 0 4px; }
.mbw-doc-body { flex: 1; min-width: 0; }
.mbw-doc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.mbw-doc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mbw-doc-status {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
}
.mbw-doc-status.is-ok {
    color: #16a34a;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mbw-doc-bar {
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-subtle) 85%, transparent);
    overflow: hidden;
    margin-bottom: 6px;
}
.mbw-doc-bar-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #f97316;
    transition: width .12s linear, background .2s ease;
}
.mbw-doc-bar-fill.is-ok { background: #22c55e; }
.mbw-doc-size { font-size: 11px; color: var(--text-muted); }
.mbw-doc-actions { display: flex; gap: 8px; margin-top: 10px; }
.mbw-upl-docs-add { margin-top: 4px; }

.mbw-uploads-row,
.mbw-docs-grid { align-items: start; }

/* Dark mode ? premium elevated cards, readable text */
html[data-theme="dark"] .mbw-upl-image-card,
html[data-theme="dark"] .mbw-doc-card {
    background: color-mix(in srgb, var(--card-bg) 88%, #0b1220);
    border-color: var(--border-subtle);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .mbw-upl-progress-panel {
    background: rgba(15, 23, 42, .55);
    border-color: var(--border-subtle);
}
html[data-theme="dark"] .mbw-upl-dismiss {
    background: rgba(255, 255, 255, .08);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
html[data-theme="dark"] .mbw-upl-btn {
    background: rgba(255, 255, 255, .06);
    border-color: var(--border-subtle);
    color: var(--text-main);
}
html[data-theme="dark"] .mbw-upl-btn--change {
    background  : var(--record-btn-bg);
    color       : var(--record-btn-text);
    border-color: var(--record-btn-bg);
}
html[data-theme="dark"] .mbw-upl-btn--change:hover {
    background  : var(--record-btn-soft);
    color       : var(--record-btn-bg);
    border-color: var(--record-btn-bg);
}
html[data-theme="dark"] .mbw-upl-max-warn {
    color: #fcd34d;
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .35);
}
html[data-theme="dark"] .mbw-upl-max-warn i { color: #fbbf24; }
html[data-theme="dark"] .mbw-upl-btn--remove {
    background: rgba(225, 29, 72, .14);
    border-color: rgba(225, 29, 72, .35);
    color: #fb7185;
}
html[data-theme="dark"] .mbw-doc-pdf-badge,
html[data-theme="dark"] .mbw-doc-file-badge {
    background: rgba(15, 23, 42, .65);
    border-color: var(--border-subtle);
    color: var(--text-muted);
}
html[data-theme="dark"] .mbw-doc-status.is-ok,
html[data-theme="dark"] .mbw-upl-progress-panel.is-complete .mbw-upl-status {
    color: #4ade80;
}

/* ==========================================================================
   MBW Action Required — reusable pending-workflow CTA panel
   Token-only; Light + Dark via theme variables. Not module-specific.
   ========================================================================== */

.mbw-action-required {
    background: var(--primary-soft);
    border: 1px solid var(--primary);
    border-left-width: 4px;
    border-radius: var(--r-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}

.mbw-action-required__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mbw-action-required__copy {
    min-width: 0;
    flex: 1 1 220px;
}

.mbw-action-required__title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mbw-action-required__title i {
    color: var(--primary);
    flex-shrink: 0;
}

.mbw-action-required__text {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.mbw-action-required__actions {
    flex: 0 0 auto;
}

.mbw-action-required__actions .inline-form {
    display: inline-block;
    margin: 0;
}

@media (max-width: 640px) {
    .mbw-action-required__body {
        flex-direction: column;
        align-items: stretch;
    }

    .mbw-action-required__actions .btn {
        width: 100%;
    }
}

/* ============================================================================
   MBW Unified Upload UI companion: shared file action card + Premium Download
   Task: MBW-SHARED-UPLOAD-DOWNLOAD-UI-CORRECTION-COMPLAINTS-PORTAL-01
   Canonical picker remains .mbw-upl / mbw_upload_ui.php. Historical .mbw-att-wrap
   / .mbw-att-field / .mbw-att-preview layout helpers stay above as legacy.
   Tokens only.
   ============================================================================ */
.mbw-file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mbw-file-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md, 8px);
    background: var(--card-bg);
    box-shadow: var(--shadow-xs);
}
.mbw-file-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 16px;
}
.mbw-file-meta {
    flex: 1 1 160px;
    min-width: 0;
}
.mbw-file-name {
    font-weight: 600;
    overflow-wrap: anywhere;
    color: var(--text-main);
}
.mbw-file-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}
.mbw-file-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
}

.mbw-dl {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    box-sizing: border-box;
    margin: 0;
    min-width: 148px;
    min-height: 42px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    vertical-align: middle;
    text-decoration: none;
}
.mbw-dl:hover,
.mbw-dl:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
    outline: none;
    box-shadow: var(--shadow-sm);
}
.mbw-dl:visited { color: var(--text-main); }
.mbw-dl:visited:hover,
.mbw-dl:visited:focus-visible { color: var(--primary); }
.mbw-dl.is-loading,
.mbw-dl:disabled {
    cursor: progress;
    pointer-events: none;
}
.mbw-dl.is-complete {
    border-color: var(--success-border);
    background: var(--success-soft);
    color: var(--success);
}
.mbw-dl-ring {
    position: relative;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
}
.mbw-dl--compact {
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px 4px 4px;
    gap: 8px;
    font-size: 12px;
}
.mbw-dl--compact .mbw-dl-ring {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}
.mbw-dl--full .mbw-dl-ring { width: 36px; height: 36px; flex-basis: 36px; }
.mbw-dl-ring svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}
.mbw-dl-track {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 2.75;
}
.mbw-dl-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-dasharray: 81.68;
    stroke-dashoffset: 81.68;
}
.mbw-dl.is-complete .mbw-dl-fill { stroke: var(--success); stroke-dashoffset: 0; }
.mbw-dl-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--primary);
}
.mbw-dl--compact .mbw-dl-icon { font-size: 11px; }
.mbw-dl.is-complete .mbw-dl-icon { color: var(--success); }
.mbw-dl-label {
    white-space: nowrap;
    min-width: 6.2em;
    text-align: left;
}
.mbw-dl.is-indeterminate .mbw-dl-ring svg {
    animation: mbw-dl-spin 0.9s linear infinite;
}
.mbw-dl.is-indeterminate .mbw-dl-fill { stroke-dashoffset: 54; }
@keyframes mbw-dl-spin {
    to { transform: rotate(270deg); }
}
@media (prefers-reduced-motion: reduce) {
    .mbw-dl.is-indeterminate .mbw-dl-ring svg { animation: none; }
}
@media (max-width: 600px) {
    .mbw-file-card { align-items: flex-start; }
    .mbw-file-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .mbw-dl { max-width: 100%; }
}