/* Unified drawer system: keeps legacy IDs/events while standardizing layout. */
:root {
  --drawer-overlay: rgba(15, 23, 42, .48);
  --drawer-panel-bg: var(--zway-surface, var(--card-bg, #fff));
  --drawer-border: var(--zway-border, var(--card-border, #dbe7df));
  --drawer-text: var(--zway-text-on-surface, var(--color-text, #172033));
  --drawer-muted: var(--zway-text-muted, var(--color-text-secondary, #64748b));
  --drawer-accent: var(--ui-accent, var(--color-primary, #16713b));
  --drawer-radius: 16px;
  --drawer-gap: 16px;
  --drawer-header-height: 68px;
  --drawer-footer-height: 72px;
}

/* All legacy drawer IDs inherit the same shell without changing their selectors. */
.drawer.open,
.modal-overlay.open,
.crm-modal-overlay.open,
.finance-receipt-modal,
#checkinModal[style*="display: flex"],
#checkinModal[style*="display:flex"] {
  color: var(--drawer-text);
}

.drawer.open > .drawer-panel,
.modal-overlay.open > .modal,
.crm-modal-overlay.open > .crm-modal,
.finance-receipt-modal > .finance-receipt-dialog,
#checkinModal > .modal {
  border: 1px solid var(--drawer-border);
  background: var(--drawer-panel-bg) !important;
  color: var(--drawer-text);
  border-radius: var(--drawer-radius);
  box-shadow: 0 24px 72px rgba(15, 42, 29, .22);
  isolation: isolate;
}

.drawer.open > .drawer-panel,
.modal-overlay.open > .modal,
.crm-modal-overlay.open > .crm-modal,
.finance-receipt-modal > .finance-receipt-dialog {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.drawer-head,
.drawer-header,
.crm-modal-head,
.modal-head,
.finance-receipt-dialog .section-title,
.preview-head,
.file-preview-head,
.quote-head,
.sc-head,
.sales-invoice-head,
.sales-contract-approval-head {
  flex: 0 0 auto;
  min-height: var(--drawer-header-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--drawer-border);
  background: color-mix(in srgb, var(--drawer-panel-bg) 94%, var(--drawer-accent) 6%);
}

.drawer-head > :first-child,
.drawer-header > :first-child,
.crm-modal-head > :first-child,
.modal-head > :first-child,
.finance-receipt-dialog .section-title > :first-child {
  min-width: 0;
  flex: 1 1 auto;
}

.drawer-head h3,
.drawer-header h3,
.crm-modal-head h3,
.modal-head h3,
.finance-receipt-dialog .section-title h3 {
  margin: 0;
  color: var(--drawer-text);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
}

.drawer-subtitle,
.overview-subtitle,
.quote-head-subtitle,
.sc-head-subtitle,
.sales-invoice-head .overview-subtitle,
.finance-receipt-dialog .section-title span {
  color: var(--drawer-muted);
  font-size: 12px;
  line-height: 1.5;
}

.drawer-head .close,
.drawer-header .close,
.crm-modal-close,
.modal-head .close,
.finance-receipt-dialog .section-title .btn.ghost {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  width: auto;
  padding: 0 10px;
  border: 1px solid var(--drawer-border);
  border-radius: 10px;
  background: transparent;
  color: var(--drawer-muted);
  font-size: 13px;
  font-weight: 700;
}

.drawer-head .close:hover,
.drawer-header .close:hover,
.crm-modal-close:hover,
.modal-head .close:hover,
.finance-receipt-dialog .section-title .btn.ghost:hover {
  border-color: var(--drawer-accent);
  color: var(--drawer-accent);
  background: color-mix(in srgb, var(--drawer-accent) 8%, transparent);
}

.drawer-panel > :not(.drawer-head):not(.drawer-header):not(.drawer-actions):not(.form-actions),
.crm-modal > .crm-modal-body,
.modal > .modal-body,
.finance-receipt-dialog > .finance-receipt-form,
.finance-receipt-dialog > .finance-receipt-steps,
.finance-receipt-dialog > .table-wrap,
.finance-receipt-dialog > .finance-receipt-voucher-upload {
  min-width: 0;
}

.drawer-panel > .drawer-body,
.drawer-panel > .quote-body,
.drawer-panel > .sales-contract-body,
.drawer-panel > .sales-invoice-body,
.crm-modal > .crm-modal-body,
.modal > .modal-body,
.finance-receipt-dialog > .finance-receipt-form,
.finance-receipt-dialog > .table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.drawer-panel > .drawer-actions,
.drawer-panel > .form-actions,
.crm-modal > .crm-modal-foot,
.modal > .modal-footer,
.finance-receipt-dialog > .finance-receipt-dialog-actions,
.sales-contract-approval-actions,
.sc-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-height: var(--drawer-footer-height);
  box-sizing: border-box;
  margin: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--drawer-border);
  background: color-mix(in srgb, var(--drawer-panel-bg) 96%, var(--drawer-accent) 4%);
}

.drawer-panel .form-grid,
.drawer-panel .finance-receipt-form,
.crm-modal .gf-form,
.modal .form-grid {
  gap: var(--drawer-gap);
}

.drawer-panel input,
.drawer-panel select,
.drawer-panel textarea,
.crm-modal input,
.crm-modal select,
.crm-modal textarea,
.modal input,
.modal select,
.modal textarea,
.finance-receipt-dialog input,
.finance-receipt-dialog select,
.finance-receipt-dialog textarea {
  min-height: 40px;
  box-sizing: border-box;
}

.drawer-panel textarea,
.crm-modal textarea,
.modal textarea,
.finance-receipt-dialog textarea {
  min-height: 88px;
}

.drawer-head .close:not(.has-text),
.drawer-header .close:not(.has-text),
.finance-receipt-dialog .section-title .btn.ghost{
  font-size:0;
}
.drawer-head .close:not(.has-text)::before,
.drawer-header .close:not(.has-text)::before,
.finance-receipt-dialog .section-title .btn.ghost::before{
  content:"×";
  font-size:22px;
  line-height:1;
  font-weight:400;
}

/* Large forms remain spacious on desktop while preserving the same shell. */
#drawer > .project-detail-panel,
#customerOverviewDrawer > .customer-overview-panel,
#salesContractApprovalDrawer > .sales-contract-approval-panel {
  width: min(1120px, calc(100vw - 48px));
}

#quoteDrawer > .quote-editor-panel,
#salesContractDrawer > .drawer-panel,
#salesInvoiceDrawer > .drawer-panel,
#purchaseRequestDrawer > .drawer-panel,
#poFormDrawer > .drawer-panel {
  width: min(960px, calc(100vw - 48px));
}

#quotePreviewDrawer > .drawer-panel,
#attachmentPreviewDrawer > .drawer-panel,
#salesInvoicePreviewDrawer > .drawer-panel {
  width: min(1200px, calc(100vw - 48px));
}

/* Horizontal workflow tabs never wrap into a tall header. */
.project-drawer-switch,
.project-form-tabs,
.sc-create-tabs,
.quote-tabs,
.sales-contract-tabs,
.invoice-tabs {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

@media (max-width: 820px) {
  .drawer.open,
  .modal-overlay.open,
  .crm-modal-overlay.open,
  .finance-receipt-modal,
  #checkinModal[style*="display: flex"],
  #checkinModal[style*="display:flex"] {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .drawer.open > .drawer-panel,
  .modal-overlay.open > .modal,
  .crm-modal-overlay.open > .crm-modal,
  .finance-receipt-modal > .finance-receipt-dialog,
  #checkinModal > .modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .drawer-head,
  .drawer-header,
  .crm-modal-head,
  .modal-head,
  .finance-receipt-dialog .section-title {
    min-height: 60px;
    padding: 10px 14px;
  }

  .drawer-head h3,
  .drawer-header h3,
  .crm-modal-head h3,
  .modal-head h3,
  .finance-receipt-dialog .section-title h3 {
    font-size: 16px;
  }

  .drawer-head .close,
  .drawer-header .close,
  .crm-modal-close,
  .modal-head .close,
  .finance-receipt-dialog .section-title .btn.ghost {
    min-height: 44px;
  }

  .drawer-panel > .drawer-actions,
  .drawer-panel > .form-actions,
  .crm-modal > .crm-modal-foot,
  .modal > .modal-footer,
  .finance-receipt-dialog > .finance-receipt-dialog-actions,
  .sales-contract-approval-actions,
  .sc-actions {
    min-height: 68px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }

  .drawer-panel .form-grid,
  .drawer-panel .finance-receipt-form,
  .crm-modal .gf-form,
  .modal .form-grid {
    grid-template-columns: 1fr !important;
  }

  .drawer-panel .span2,
  .drawer-panel .span3,
  .drawer-panel .full,
  .crm-modal .span2,
  .crm-modal .span3,
  .modal .span2,
  .modal .span3 {
    grid-column: 1 / -1 !important;
  }

  .drawer-panel input,
  .drawer-panel select,
  .drawer-panel textarea,
  .crm-modal input,
  .crm-modal select,
  .crm-modal textarea,
  .modal input,
  .modal select,
  .modal textarea,
  .finance-receipt-dialog input,
  .finance-receipt-dialog select,
  .finance-receipt-dialog textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .drawer-panel textarea,
  .crm-modal textarea,
  .modal textarea,
  .finance-receipt-dialog textarea {
    min-height: 96px;
  }
}

@media (max-width: 560px) {
  .drawer-subtitle,
  .overview-subtitle,
  .quote-head-subtitle,
  .sc-head-subtitle,
  .sales-invoice-head .overview-subtitle {
    display: none;
  }

  .drawer-panel > .drawer-actions,
  .drawer-panel > .form-actions,
  .crm-modal > .crm-modal-foot,
  .modal > .modal-footer,
  .finance-receipt-dialog > .finance-receipt-dialog-actions,
  .sales-contract-approval-actions,
  .sc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drawer-panel > .drawer-actions .btn,
  .drawer-panel > .form-actions .btn,
  .crm-modal > .crm-modal-foot .btn,
  .modal > .modal-footer .btn,
  .finance-receipt-dialog > .finance-receipt-dialog-actions .btn,
  .sales-contract-approval-actions .btn,
  .sc-actions .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }

  .drawer-panel > .drawer-actions .btn.primary:last-child,
  .drawer-panel > .form-actions .btn.primary:last-child,
  .finance-receipt-dialog > .finance-receipt-dialog-actions .btn.primary:last-child {
    grid-column: 1 / -1;
  }
}