:root {
  --blue-1: #0c58df;
  --blue-2: #13b2ee;
  --orange-1: #ff7a2f;
  --orange-2: #ffbf2f;
  --ink: #1f2d3d;
  --muted: #6f7f92;
  --border: rgba(18, 58, 115, 0.12);
  --bg: #eef5fb;
  --card: rgba(255, 255, 255, 0.96);
  --shadow: 0 18px 40px rgba(14, 65, 128, 0.12);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(19,178,238,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(255,122,47,.18), transparent 28%),
    linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%);
  color: var(--ink);
}
.page-shell {
  max-width: 1280px;
  margin: 18px auto;
  padding: 16px;
}
.hero-card, .form-card, .table-card, .summary-card, .action-bar, .crm-card {
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: var(--shadow);
}
.hero-card {
  width: 100%;
  max-height: 250px;
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-header-image {
  width: 100%;
  height: 250px;
  max-height: 250px;
  display:block;
  object-fit: cover;
  object-position: center;
}
.app-grid {
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
}
.form-card, .table-card, .summary-card, .crm-card {
  border-radius: 24px;
  padding: 22px;
}
.customer-card, .quote-card { min-height: 320px; }
.table-card, .notes-card, .signature-card { grid-column: 1 / -1; }
.notes-card { grid-column: 1 / 2; }
.summary-card { grid-column: 2 / 3; align-self:start; }
.signature-card { margin-top: 0; }
.card-title-row {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.card-title-row h2 { margin: 2px 0 0; font-size: 26px; }
.micro-label {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 700;
}
.card-icon {
  width: 50px;
  height: 50px;
  display:grid;
  place-items:center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(12,88,223,.12), rgba(255,122,47,.18));
  font-size: 24px;
}
.form-grid { display:grid; gap: 14px; }
.two-col { grid-template-columns: 1fr 1fr; }
.full { grid-column: 1 / -1; }
label span, .status-caption {
  display:block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #42556b;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  color: var(--ink);
  outline: none;
  transition: .2s ease;
}
textarea { min-height: 140px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: rgba(14, 103, 220, .45);
  box-shadow: 0 0 0 4px rgba(13, 126, 223, .08);
}
.stat-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.search-inline { display:flex; gap: 10px; }
.status-chip-wrap {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.status-chip {
  display:inline-flex;
  width: fit-content;
  align-items:center;
  justify-content:center;
  min-width: 120px;
  padding: 11px 16px;
  border-radius: 999px;
  font-weight: 800;
  color: #fff;
}
.draft { background: linear-gradient(145deg, #5488f2, #1ea8ff); }
.sent { background: linear-gradient(145deg, #fd9b3f, #ff6d3f); }
.approved { background: linear-gradient(145deg, #17b76e, #1ed09b); }
.rejected { background: linear-gradient(145deg, #f04438, #ff6c62); }
.expired { background: linear-gradient(145deg, #7a8699, #576273); }
.table-wrap, .crm-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--border);
}
.table-wrap table, .crm-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
thead th, .crm-table thead th {
  background: linear-gradient(135deg, rgba(12,88,223,.08), rgba(255,122,47,.16));
  color: #122d54;
  text-align:left;
  padding: 16px 12px;
  font-size: 16px;
}
tbody td, .crm-table tbody td {
  border-top: 1px solid rgba(12, 49, 96, .08);
  padding: 8px;
  vertical-align: middle;
}
.table-wrap tbody input {
  min-height: 50px;
  height: 50px;
  border-radius: 12px;
  background: #fbfdff;
  line-height: 1.4;
  font-size: 15px;
  overflow: visible;
}
#itemsBody input.desc { white-space: nowrap; }
.summary-grid { display:grid; gap: 14px; }
.currency-wrap { position: relative; }
.currency-wrap::before {
  content: '$';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #000;
  font-weight: 400;
  font-size: 15px;
  pointer-events: none;
  z-index: 2;
}
.currency-wrap input { padding-left: 40px !important; }
.grand-total-row input {
  min-height: 58px;
  font-size: 28px;
  font-weight: 800;
  color: #0d4bc7;
  background: linear-gradient(135deg, rgba(12,88,223,.05), rgba(255,122,47,.08));
}
.thank-box {
  margin-top: 18px;
  border-top: 1px dashed rgba(12, 49, 96, .14);
  padding-top: 18px;
}
.thank-box h3 {
  margin: 0 0 10px;
  color: #f07b10;
  font-size: 28px;
}
.thank-box p {
  margin: 0;
  color: #1b3694;
  font-size: 18px;
}
.signature-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  border: 1px dashed rgba(12, 88, 223, .28);
  border-radius: 20px;
  padding: 8px;
}
#signaturePad {
  width: 100%;
  height: 220px;
  display: block;
  background: #fff;
  border-radius: 14px;
  cursor: crosshair;
}
.signature-actions { display:flex; justify-content:flex-end; }
.crm-card { margin-top: 18px; }
.crm-tools {
  display:flex;
  gap: 10px;
  width: min(520px, 100%);
}
.crm-tools input { min-width: 220px; }
.crm-badge {
  display:inline-flex;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.crm-row-actions { display:flex; gap: 8px; flex-wrap: wrap; }
.action-bar {
  margin-top: 20px;
  border-radius: 22px;
  padding: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  justify-content:center;
}
.btn {
  min-height: 48px;
  border: none;
  border-radius: 14px;
  padding: 0 20px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--blue-1), var(--blue-2));
  box-shadow: 0 12px 24px rgba(12,88,223,.22);
}
.btn-soft {
  color: #143966;
  background: linear-gradient(135deg, rgba(12,88,223,.12), rgba(255,122,47,.22));
}
.btn-danger {
  color: #fff;
  background: linear-gradient(135deg, #e43d33, #ff7a59);
}
.btn-ghost {
  color: #8c5c00;
  background: linear-gradient(135deg, rgba(255,191,47,.22), rgba(255,122,47,.28));
}
.btn-mini {
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 10px;
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  padding: 14px 18px;
  border-radius: 14px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  transform: translateY(120px);
  opacity: 0;
  transition: .28s ease;
  z-index: 999;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.ok { background: linear-gradient(135deg, #0c9a5e, #18c98d); }
.toast.error { background: linear-gradient(135deg, #e43d33, #ff7a59); }

/* PDF render */
.pdf-render-mode {
  position: relative !important;
  width: 1050px !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
  padding: 6px 10px 10px !important;
  background: #fff !important;
  overflow: visible !important;
}
.pdf-render-mode .hero-card {
  margin-bottom: 12px !important;
}
.pdf-render-mode .hero-header-image {
  height: 200px !important;
  max-height: 200px !important;
}
.pdf-render-mode .app-grid {
  gap: 12px !important;
  grid-template-columns: 1.24fr 1fr !important;
}
.pdf-render-mode .form-card,
.pdf-render-mode .table-card,
.pdf-render-mode .summary-card {
  padding: 14px !important;
  box-shadow: none !important;
}
.pdf-render-mode .card-title-row { margin-bottom: 10px !important; }
.pdf-render-mode .card-title-row h2 { font-size: 22px !important; }
.pdf-render-mode .micro-label { font-size: 10px !important; }
.pdf-render-mode input,
.pdf-render-mode textarea,
.pdf-render-mode select {
  min-height: 38px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
}
.pdf-render-mode .table-wrap tbody input {
  min-height: 38px !important;
  height: 38px !important;
  font-size: 13px !important;
}
.pdf-render-mode .currency-wrap::before {
  left: 10px !important;
  font-size: 14px !important;
}
.pdf-render-mode .currency-wrap input {
  padding-left: 34px !important;
}
.pdf-render-mode textarea {
  min-height: 80px !important;
}
.pdf-render-mode .thank-box {
  margin-top: 10px !important;
  padding-top: 10px !important;
}
.pdf-render-mode .thank-box h3 { font-size: 22px !important; margin-bottom: 6px !important; }
.pdf-render-mode .thank-box p { font-size: 15px !important; }
.pdf-render-mode #signaturePad {
  height: 120px !important;
}
.pdf-render-mode .signature-wrap {
  padding: 4px !important;
}
.pdf-render-mode .notes-card { grid-column: 1 / 2 !important; }
.pdf-render-mode .summary-card { grid-column: 2 / 3 !important; }
.pdf-render-mode .signature-card { grid-column: 1 / -1 !important; }
.pdf-render-mode .pdf-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.pdf-render-mode .pdf-watermark img {
  width: 42%;
  max-width: 460px;
  opacity: .08;
  filter: grayscale(.05);
}
.pdf-render-mode > *:not(.pdf-watermark) {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; }
  .notes-card, .summary-card, .signature-card { grid-column: 1 / -1; }
  .two-col, .stat-grid { grid-template-columns: 1fr; }
  .crm-tools { width: 100%; flex-direction: column; }
  .hero-card { max-height: 220px; }
  .hero-header-image { height: 220px; max-height: 220px; }
}

@media print {
  .no-pdf, .action-bar, .crm-card, #toast {
    display: none !important;
  }
}


.pdf-signature-image{
  display:block;
  width:100%;
  height:220px;
  object-fit:contain;
  background:#fff;
  border-radius:14px;
}
.pdf-render-mode .pdf-signature-image{
  height:120px !important;
}


.req{
  color:#e53935;
  font-style:normal;
  font-weight:800;
  margin-left:4px;
}
input.is-invalid, textarea.is-invalid, select.is-invalid{
  border-color:#e53935 !important;
  box-shadow:0 0 0 4px rgba(229,57,53,.08) !important;
  background:#fff8f8 !important;
}
input.is-valid{
  border-color:rgba(23,183,110,.5);
}


/* Search box improvements */
.search-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
}

.search-icon{
  position:absolute;
  left:12px;
  font-size:16px;
  opacity:.7;
}

.search-box input{
  padding-left:34px !important;
  min-width:260px;
}

@media (min-width:1000px){
  .search-box input{
    min-width:320px;
  }
}


.search-results-box{
  margin-top:10px;
  border:1px solid rgba(18,58,115,.12);
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(14,65,128,.10);
  overflow:hidden;
}
.search-result-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid rgba(12,49,96,.08);
}
.search-result-item:first-child{
  border-top:none;
}
.search-result-meta{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.search-result-meta strong{
  color:#143966;
  font-size:14px;
}
.search-result-meta span{
  font-size:12px;
  color:#6f7f92;
}
.search-empty{
  padding:14px;
  color:#6f7f92;
  font-size:14px;
}


.summary-header-tools{
  display:flex;
  align-items:center;
  gap:10px;
}
.lang-toggle-btn{
  min-height:44px;
  border:none;
  border-radius:14px;
  padding:0 14px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  color:#143966;
  background:linear-gradient(135deg, rgba(12,88,223,.12), rgba(255,122,47,.22));
  box-shadow:0 10px 20px rgba(12,88,223,.10);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.lang-toggle-btn:hover{
  transform:translateY(-1px);
}
.lang-flag{
  font-size:16px;
  line-height:1;
}
.lang-sep{
  opacity:.55;
  font-weight:700;
}


.lang-flag-img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
  display:inline-block;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  vertical-align:middle;
}


.action-modal-overlay[hidden]{display:none !important;}
.action-modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:5000;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:20px;
  background:rgba(10,25,47,.45);
  backdrop-filter:blur(8px);
}
.action-modal-card{
  transform:translateY(0);
  animation:modalFadeIn .25s ease;

  width:min(460px,100%); background:rgba(255,255,255,.98);
  border:1px solid rgba(255,255,255,.72); border-radius:24px;
  box-shadow:0 24px 56px rgba(12,55,112,.24); padding:24px;
}
.action-modal-header h3{margin:0 0 10px; font-size:24px; color:#16345f;}
.action-modal-message{margin:0 0 20px; color:#53657b; font-size:15px; line-height:1.6;}
.action-modal-actions{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap;}
.btn-accept-gradient{color:#fff !important; background:linear-gradient(135deg, var(--blue-1), var(--orange-1)) !important;}
.btn-cancel-gradient{color:#143966 !important; background:linear-gradient(135deg, rgba(12,88,223,.12), rgba(255,122,47,.22)) !important;}
.pdf-signature-image{display:block; width:100%; height:220px; object-fit:contain; background:#fff; border-radius:14px;}
.pdf-render-mode .pdf-signature-image{height:120px !important;}


@keyframes modalFadeIn{
  from{
    opacity:0;
    transform:translateY(20px) scale(.96);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


#btnInstallApp{
  color:#143966;
  background:linear-gradient(135deg, rgba(12,88,223,.12), rgba(255,122,47,.22));
}


.pdf-textarea-render{
  display:block;
  width:100%;
  max-width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  min-height:140px;
  height:auto;
  padding:12px 14px;
  font:inherit;
  color:var(--ink);
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
  overflow:hidden;
  box-sizing:border-box;
}

.pdf-render-mode .pdf-textarea-render{
  display:block;
  min-height:80px !important;
  height:auto !important;
  padding:8px 10px !important;
  font-size:14px !important;
  line-height:1.4 !important;
}


.items-actions{
  display:flex;
  justify-content:flex-start;
  margin-top:14px;
}
.btn-add-row{
  min-height:44px;
}