/*
  MediBill responsive layout system.
  Loaded last so it resolves legacy fixed-size declarations without changing
  module markup, IDs, data attributes, or JavaScript behaviour.
*/
:root {
  --mb-fluid-gutter: clamp(12px, 1.8vw, 28px);
  --mb-fluid-gap: clamp(8px, 1.1vw, 18px);
  --mb-control-height: clamp(38px, 3vw, 44px);
}

/* The document owns vertical scrolling. Reserve its gutter so page-height
   changes never resize the application content horizontally. */
html { overflow-x: clip; scrollbar-gutter: stable; }
body { min-width: 0; overflow-x: clip; }
.app-shell, .main-content, #app,
#app > *, #app :is(section, article, header, footer, form, div) { min-width: 0; }
.main-content { max-width: 100%; }
#app { padding: clamp(14px, 1.7vw, 28px) var(--mb-fluid-gutter) clamp(24px, 3vw, 44px); }

/* The app should use available desktop space without stretching text controls. */
#app :is(.billing-page,.purchase-page,.purchase-return-page,.sales-return-page,.dealer-page,.customer-page,.reports-live-page,.alerts-live-page,.reports-alerts-page,.users-page,.settings-live-page,.product-live-page,.stock-master-page,.attendance-page,.payment-allocation-page) {
  width: 100%; max-width: min(1440px, 100%); margin-inline: auto;
}
#app :is(.billing-workspace,.purchase-bottom,.purchase-dashboard-grid,.return-layout,.reports-live-layout,.reports-alerts-page .report-layout,.payment-allocation-summary,.payment-allocation-grid,.customer-payment-grid-live,.dealer-payment-grid-live) {
  gap: var(--mb-fluid-gap);
}

/* Avoid inputs increasing grid columns beyond the card width. */
#app :is(input, select, textarea, button) { max-width: 100%; }
#app :is(input, select, textarea) { min-width: 0; }
#app :is(.bill-meta,.purchase-meta,.bill-notes,.purchase-notes,.customer-payment-grid-live,.dealer-payment-grid-live,.payment-allocation-grid,.settings-live-form,.product-live-form,.stock-master-form-grid) > * { min-width: 0; }

/* Tables scroll inside their card only; the document never gains a horizontal bar. */
#app :is(.table-card,.bill-table-wrap,.purchase-table-wrap,.stock-master-table,.payment-allocation-table,.dealer-table-wrap,.customer-table-wrap,.reports-live-table-wrap,.report-table-wrap,.purchase-receipt-table-wrap) {
  max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
#app :is(.table-card,.bill-items-panel,.purchase-items-card,.stock-master-card,.payment-allocation-card,.dealer-payment-history-live,.customer-payment-history-live) { max-width: 100%; }

/* Shared modal frame: viewport-aware and centered. Module-specific content may
   scroll only when it is genuinely taller than the viewport. */
.modal-backdrop {
  padding: clamp(10px, 2vw, 24px);
  place-items: center;
  overflow: auto;
}
.modal, .customer-modal, .attendance-modal, .dealer-payment-confirm, .customer-payment-confirm {
  width: min(100%, 700px);
  max-height: calc(100dvh - clamp(20px, 4vw, 48px));
  margin: auto;
}
.modal:not(.payment-allocation-confirm), .customer-modal, .attendance-modal,
.dealer-payment-confirm, .customer-payment-confirm { overflow: auto; }

/* Payment confirmation/success are intentionally compact; no nested scroll on
   ordinary desktop screens. The document remains the fallback for long lists. */
.payment-allocation-confirm-backdrop { padding: clamp(10px, 2vw, 20px) !important; }
.payment-allocation-confirm {
  width: min(680px, calc(100vw - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  margin: auto !important;
}
.payment-allocation-success {
  width: min(100%, 980px) !important;
  margin: clamp(4px, 1vh, 12px) auto clamp(16px, 2vh, 28px) !important;
  padding: clamp(16px, 2vw, 24px) !important;
}

/* Mid-size laptops/tablets: make multi-column work areas elastic before they
   become cramped. */
@media (max-width: 1180px) {
  .topbar { padding-inline: clamp(16px, 2vw, 24px); gap: 14px; }
  .search { width: min(420px, 42vw); min-width: 0; }
  #app :is(.metric-grid,.purchase-kpis,.stock-master-kpis,.stock-master-summary) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app :is(.billing-workspace,.purchase-bottom,.purchase-dashboard-grid,.return-layout) { grid-template-columns: minmax(0, 1fr) !important; }
  #app .bill-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app :is(.bill-actions,.bill-live-note,.bill-save-status) { grid-column: 1 / -1; }
  #app :is(.bill-summary,.bill-payment) { margin: 0 !important; }
  #app .purchase-meta { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 900px) {
  .sidebar { width: 218px; padding: 16px 12px; }
  .main-content { width: calc(100% - 218px); margin-left: 218px; }
  .brand { padding-bottom: 16px; }
  .nav-item { padding: 9px 11px; }
  .nav-item i { width: 30px; font-size: 18px; }
  .topbar { min-height: 64px; height: auto; }
  #app :is(.metric-grid,.purchase-kpis,.stock-master-kpis,.stock-master-summary,.report-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app :is(.customer-payment-grid-live,.dealer-payment-grid-live,.payment-allocation-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app :is(.customer-payment-grid-live,.dealer-payment-grid-live,.payment-allocation-grid) .wide { grid-column: 1 / -1; }
}

/* Mobile/tablet drawer mode. Existing sidebar JavaScript already toggles .open. */
@media (max-width: 760px) {
  .sidebar { width: min(286px, 84vw); transform: translateX(-100%); transition: transform .22s ease; }
  .sidebar.open { transform: translateX(0); }
  .main-content { width: 100%; margin-left: 0; }
  .menu-toggle { display: grid; place-items: center; flex: 0 0 auto; }
  .topbar { position: sticky; padding: 10px 12px; gap: 10px; }
  .search { flex: 1; width: auto; min-width: 0; }
  .top-actions { gap: 7px; }
  .admin-name, .top-avatar { display: none; }
  #app { padding: 14px 12px 28px; }
  #app :is(.page-head,.billing-header,.purchase-title,.dealer-title,.customer-title,.reports-live-title,.alerts-live-title,.users-heading,.settings-live-title,.product-live-title,.stock-master-title,.payment-allocation-title) { align-items: flex-start; flex-direction: column; }
  #app :is(.page-head h1,.billing-header h1,.purchase-title h1,.dealer-title h1,.customer-title h1,.reports-live-title h1,.alerts-live-title h1,.users-heading h1,.settings-live-title h1,.product-live-title h1,.stock-master-title h1,.payment-allocation-title h1) { font-size: clamp(22px, 7vw, 28px); }
  #app :is(.bill-meta,.purchase-meta,.bill-notes,.purchase-notes,.customer-payment-grid-live,.dealer-payment-grid-live,.payment-allocation-grid,.payment-allocation-select-row,.stock-master-form-grid,.return-grid) { grid-template-columns: minmax(0, 1fr) !important; }
  #app :is(.customer-payment-grid-live,.dealer-payment-grid-live,.payment-allocation-grid) .wide { grid-column: auto; }
  #app :is(.bill-right,.payment-allocation-summary,.payment-success-total) { grid-template-columns: minmax(0, 1fr) !important; }
  #app :is(.bill-items-panel > header,.purchase-items-card > header,.purchase-dealer-info,.customer-payment-select-row,.dealer-payment-select-row,.customer-payment-customer,.dealer-payment-dealer,.payment-allocation-party) { align-items: flex-start; flex-direction: column; }
  #app :is(.bill-items-panel > header,.purchase-items-card > header,.bill-items-panel footer,.purchase-items-card footer) { flex-wrap: wrap; }
  #app :is(.bill-items-panel footer,.purchase-items-card footer) { align-items: stretch; flex-direction: column; }
  #app :is(.payment-success-actions,.bill-receipt-actions) { grid-template-columns: 1fr !important; display: grid; }
  #app :is(.payment-success-actions button,.bill-receipt-actions button) { width: 100%; }
  .payment-allocation-confirm { width: min(100%, calc(100vw - 20px)) !important; padding: 18px 16px 16px !important; }
  .payment-allocation-confirm footer { grid-template-columns: 1fr !important; }
  .payment-success-summary, .payment-success-total { grid-template-columns: minmax(0, 1fr) !important; }
  .payment-success-meta > div + div, .payment-success-total > div + div { border-left: 0 !important; border-top: 1px solid #dce7f3; }
}

@media (max-width: 480px) {
  .search { display: none; }
  .topbar { justify-content: space-between; }
  #app :is(.metric-grid,.purchase-kpis,.stock-master-kpis,.stock-master-summary,.report-grid,.reports-live-summary) { grid-template-columns: minmax(0, 1fr) !important; }
  #app :is(.stock-master-actions,.purchase-actions,.payment-allocation-card header > div:last-child) { width: 100%; flex-wrap: wrap; }
  #app :is(.stock-master-actions button,.purchase-actions button) { flex: 1 1 132px; }
  .modal-backdrop { padding: 8px; }
  .attendance-modal { width: min(100%, calc(100vw - 16px)); }
}

/* Short laptop viewports: reduce whitespace first; never scale the application. */
@media (min-width: 761px) and (max-height: 800px) {
  #app { padding-top: 14px; }
  .payment-allocation-success { padding: 16px 20px !important; }
  .payment-success-hero { padding-bottom: 11px !important; }
  .payment-success-allocations { margin-top: 12px !important; }
  .payment-success-actions { margin-top: 14px !important; }
  .payment-success-table-wrap th, .payment-success-table-wrap td { padding-block: 8px !important; }
}

/* Product catalogue filters: these controls have their own compact toolbar.
   Do not inherit the larger, shared form-control height used by edit forms. */
#app .product-live-page { display: grid; gap: clamp(12px, 1.25vw, 20px); }
#app .product-live-page > :is(.product-live-title, .product-live-filters, .product-live-card) { margin: 0; width: 100%; }
#app .product-live-filters {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(210px, 1.25fr) minmax(152px, .78fr) auto auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
}
#app .product-live-filters label,
#app .product-live-filters label:first-child,
#app .product-live-filters > select,
#app .product-live-filters > button {
  width: auto !important;
  min-width: 0 !important;
  height: var(--mb-control-height);
  min-height: var(--mb-control-height);
  margin: 0;
}
#app .product-live-filters label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 11px;
  overflow: hidden;
}
#app .product-live-filters label :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: 0;
}
#app .product-live-filters > select { padding-inline: 11px; }
#app .product-live-filters > button { padding-inline: 15px; white-space: nowrap; }
#app .product-live-card > header { min-height: 72px; padding: 15px clamp(14px, 1.5vw, 22px); }
#app .product-live-table { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }

@media (max-width: 1080px) {
  #app .product-live-filters { grid-template-columns: minmax(220px, 1.5fr) minmax(190px, 1.1fr) minmax(145px, .8fr) auto auto; }
}
@media (max-width: 820px) {
  #app .product-live-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #app .product-live-filters > select { grid-column: span 2; }
  #app .product-live-filters > button { min-width: 120px !important; }
}
@media (max-width: 520px) {
  #app .product-live-filters { grid-template-columns: minmax(0, 1fr); padding: 9px; }
  #app .product-live-filters > select { grid-column: auto; }
  #app .product-live-filters > button { width: 100% !important; }
  #app .product-live-card > header { align-items: flex-start; flex-direction: column; }
}

/* Shared filter controls. Some legacy toolbars draw their border on the label
   wrapper; the general form rule must not draw a second field inside it. */
#app :is(.customer-controls,.dealer-controls,.purchase-filters,.reports-live-filters,.alerts-live-filters,.stock-master-filters,.customer-ledger-controls,.dealer-ledger-controls) {
  align-items: end;
  gap: 10px;
  max-width: 100%;
}
#app :is(.customer-controls,.dealer-controls,.purchase-filters,.reports-live-filters,.alerts-live-filters,.stock-master-filters,.customer-ledger-controls,.dealer-ledger-controls) > :is(select,button) {
  min-height: var(--mb-control-height);
  height: var(--mb-control-height);
  margin: 0;
}
#app :is(.customer-search,.dealer-search,.purchase-invoice-search,.reports-live-search,.alerts-live-filters label,.stock-master-filters label) {
  box-sizing: border-box;
  min-width: 0;
  min-height: var(--mb-control-height);
  height: var(--mb-control-height);
  margin: 0;
  border-radius: 11px;
}
#app :is(.customer-search,.dealer-search,.purchase-invoice-search,.reports-live-search,.alerts-live-filters label,.stock-master-filters label) > input {
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}
#app :is(.alerts-live-filters,.stock-master-filters) label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 11px;
  overflow: hidden;
}
#app :is(.alerts-live-filters,.stock-master-filters) label > input[type="date"] { min-width: 130px; }
#app :is(.customer-controls,.dealer-controls,.purchase-filters,.reports-live-filters,.alerts-live-filters,.stock-master-filters,.customer-ledger-controls,.dealer-ledger-controls) button {
  padding-inline: 14px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Searches that intentionally keep an icon in the outer wrapper. */
#app :is(.customer-search,.dealer-search,.purchase-invoice-search,.reports-live-search) {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
  overflow: hidden;
}
#app :is(.customer-search,.dealer-search) { width: clamp(250px, 25vw, 340px); }
#app .purchase-invoice-search { width: clamp(230px, 22vw, 320px); }
#app .reports-live-search { width: clamp(220px, 22vw, 310px); }

/* List-search cards own one restrained focus surface; their inner inputs stay visually neutral. */
#app .purchase-page .purchase-filters .purchase-invoice-search:focus-within,
#app .dealer-page .dealer-controls .dealer-search:focus-within,
#app .customer-page .customer-controls .customer-search:focus-within {
  border-color: #57a4ff;
  box-shadow: 0 0 0 2px rgba(87, 164, 255, .14);
}
#app .purchase-page .purchase-filters .purchase-invoice-search input[name="q"]:focus,
#app .dealer-page .dealer-controls .dealer-search input[name="q"]:focus,
#app .customer-page .customer-controls .customer-search input[name="q"]:focus {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Date labels in reports and history intentionally own their input; retain one
   clean control and keep the caption outside the field. */
#app :is(.reports-live-filters,.purchase-filters,.customer-ledger-controls,.dealer-ledger-controls) > label:not(.reports-live-search):not(.purchase-invoice-search) > input,
#app :is(.reports-live-filters,.purchase-filters,.customer-ledger-controls,.dealer-ledger-controls) > label:not(.reports-live-search):not(.purchase-invoice-search) > select {
  width: 100%; min-width: 0; height: var(--mb-control-height); min-height: var(--mb-control-height);
}

@media (max-width: 960px) {
  #app :is(.customer-controls,.dealer-controls,.purchase-filters,.reports-live-filters,.alerts-live-filters,.stock-master-filters,.customer-ledger-controls,.dealer-ledger-controls) { align-items: stretch; }
  #app :is(.customer-search,.dealer-search,.purchase-invoice-search,.reports-live-search) { width: min(100%, 340px); }
}
@media (max-width: 640px) {
  #app :is(.customer-controls,.dealer-controls,.purchase-filters,.reports-live-filters,.alerts-live-filters,.stock-master-filters,.customer-ledger-controls,.dealer-ledger-controls) > * { flex: 1 1 100%; }
  #app :is(.customer-search,.dealer-search,.purchase-invoice-search,.reports-live-search) { width: 100%; }
  #app :is(.alerts-live-filters,.stock-master-filters) label > input[type="date"] { min-width: 0; }
}

@media print {
  html, body { overflow: visible !important; }
}