/* Mobile Responsive - Teklif Pro */

/* ============ GLOBAL MOBILE ============ */
@media (max-width: 768px) {
  /* Grid system - stack everything */
  .el-row { flex-wrap: wrap !important; }
  .el-col-16, .el-col-8, .el-col-18, .el-col-6,
  .el-col-12, .el-col-14, .el-col-10, .el-col-24,
  .el-col-4, .el-col-20 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
  }

  /* Main area */
  .app-main { padding: 10px !important; }

  /* Cards */
  .el-card__body { padding: 12px !important; }
  .el-card__header { padding: 12px 14px !important; }

  /* Dialog full screen */
  .el-dialog { width: 95% !important; margin: 3vh auto !important; max-height: 90vh; }
  .el-dialog__body { padding: 14px !important; max-height: 70vh; overflow-y: auto; }
  .el-message-box { width: 90% !important; }

  /* Form compact */
  .el-form-item { margin-bottom: 12px !important; }
  .el-form-item__label { font-size: 13px !important; padding-bottom: 4px !important; }

  /* Buttons */
  .el-button--small { padding: 6px 10px !important; }

  /* Tables */
  .el-table { font-size: 13px !important; }
  .el-table .cell { padding: 0 6px !important; }

  /* Breadcrumb hide */
  .el-breadcrumb { display: none !important; }

  /* User name hide */
  .user-name { display: none !important; }

  /* ============ DASHBOARD ============ */
  .welcome-banner { flex-direction: column !important; text-align: center; padding: 16px !important; gap: 12px; }
  .stat-card { padding: 14px !important; gap: 12px; }
  .stat-value { font-size: 20px !important; }
  .stat-icon { width: 44px !important; height: 44px !important; }

  /* ============ QUOTE FORM ============ */
  /* Items - mobile card layout */
  .items-header { display: none !important; }
  .item-row {
    flex-wrap: wrap !important;
    padding: 12px !important;
    gap: 8px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    position: relative;
  }
  .col-product { flex: 0 0 100% !important; min-width: 100% !important; }
  .col-qty { flex: 0 0 calc(50% - 4px) !important; min-width: auto !important; }
  .col-price { flex: 0 0 calc(50% - 4px) !important; min-width: auto !important; }
  .col-tax { flex: 0 0 calc(50% - 4px) !important; min-width: auto !important; }
  .col-discount { flex: 0 0 calc(50% - 4px) !important; min-width: auto !important; }
  .col-total {
    flex: 0 0 calc(100% - 44px) !important;
    min-width: auto !important;
    text-align: left !important;
    font-size: 16px !important;
    padding-top: 4px;
    border-top: 1px solid #e2e8f0;
  }
  .col-action { position: absolute; top: 10px; right: 10px; }
  .line-total { font-size: 15px !important; }

  /* Type select cards */
  .type-select-cards { flex-direction: column !important; gap: 10px !important; }

  /* Totals */
  .grand-total { font-size: 16px !important; }

  /* ============ QUOTE PREVIEW ============ */
  
  

  /* ============ TEMPLATE BUILDER ============ */
  .builder-page { height: auto !important; min-height: 100vh; margin: -10px !important; }
  .builder-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .builder-header > div { flex-wrap: wrap !important; gap: 6px !important; }
  .builder-body {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  .widget-panel {
    width: 100% !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0;
    padding: 8px !important;
  }
  .widget-section {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .widget-item {
    flex: 0 0 auto !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    margin-bottom: 0 !important;
  }
  .canvas-wrapper {
    padding: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: auto !important;
  }
  .a4-canvas {
    transform-origin: top left;
    transform: scale(0.48);
    margin-bottom: -550px;
  }
  .props-panel {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #e2e8f0;
    max-height: none !important;
    padding: 12px !important;
  }

  /* ============ TABLES (QuoteList, CustomerList etc) ============ */
  .el-table-column--selection { width: 40px !important; }
  .el-table .el-button { margin: 2px !important; }

  /* ============ REPORTS ============ */
  .report-filters .el-col { margin-bottom: 8px; }

  /* ============ PAGE HEADERS ============ */
  .page-header {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  /* ============ LOGIN ============ */
  .login-container { padding: 16px !important; }
  .login-card { padding: 24px !important; }
}

/* ============ SMALL PHONES ============ */
@media (max-width: 480px) {
  .app-main { padding: 6px !important; }
  .el-card__body { padding: 10px !important; }
  .col-qty, .col-price { flex: 0 0 100% !important; }
  .col-tax, .col-discount { flex: 0 0 calc(50% - 4px) !important; }
  .el-input-number { width: 100% !important; }
  .stat-card { flex-direction: column; text-align: center; }
  .a4-canvas { transform: scale(0.38); margin-bottom: -650px; }
  .el-dialog { width: 98% !important; margin: 2vh auto !important; }
}


@media (max-width: 768px) {
  
  
}
@media (max-width: 480px) {
  
}