:root{
  --ink:#10182d;
  --muted:#6c778a;
  --blue:#007aff;
  --blue-legacy:#3278e8;
  --line:#d9deea;
  --canvas:#eef1f6;
  --paper:#fff;
  --accent:#d8d5c7;
  --mac-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Roboto",Arial,sans-serif;
  --mac-mono:"SF Mono","Menlo",Monaco,ui-monospace,monospace;
  --mac-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
  --mac-ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --mac-duration-fast:150ms;
  --mac-duration-normal:250ms;
  --mac-radius-window:10px;
  --mac-radius-modal:12px;
  --mac-radius-card:10px;
  --mac-radius-control:6px;
  --mac-shadow-card:0 0 0 0.5px rgba(0,0,0,0.07),0 1px 3px rgba(0,0,0,0.04);
  --mac-shadow-card-hover:0 0 0 0.5px rgba(0,0,0,0.09),0 6px 16px rgba(0,0,0,0.07);
  --mac-shadow-modal:0 0 0 0.5px rgba(0,0,0,0.1),0 8px 30px rgba(0,0,0,0.15),0 24px 60px rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:var(--mac-font);
  color:var(--ink);
  background:var(--canvas);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Native macOS Overlay Scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.28)}

/* Native macOS Keyboard Shortcut Hints */
kbd,.kbd-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1px 5px;
  font-size:10px;
  font-family:var(--mac-font);
  font-weight:600;
  background:rgba(15,23,42,0.07);
  border:0.5px solid rgba(15,23,42,0.16);
  border-radius:4px;
  color:inherit;
  opacity:0.75;
  letter-spacing:0.3px;
  line-height:1.2;
  margin-left:5px;
  vertical-align:middle;
}
.primary kbd,.primary .kbd-pill{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.28);
  color:#fff;
  opacity:0.9;
}
button:hover kbd,button:hover .kbd-pill{
  opacity:1;
}

/* macOS Window Chrome & Draggable App Regions */
.platform-mac .app-sidebar .sidebar-brand{
  padding-top:44px !important;
  -webkit-app-region:drag;
}
.platform-mac .app-sidebar.collapsed .sidebar-brand{
  padding-top:44px !important;
}
.platform-mac .sidebar-brand button,
.platform-mac .sidebar-brand .brand-mark,
.platform-mac .sidebar-brand-mark,
.platform-mac .sidebar-toggle-btn{
  -webkit-app-region:no-drag;
}
.platform-mac .preview-toolbar,
.platform-mac .quotes-header,
.platform-mac .catalog-top-bar,
.platform-mac .customers-header,
.platform-mac .insights-header,
.platform-mac .insights-top-bar{
  -webkit-app-region:drag;
}
.platform-mac .preview-toolbar *,
.platform-mac .quotes-header button,
.platform-mac .quotes-header input,
.platform-mac .quotes-header select,
.platform-mac .quotes-header a,
.platform-mac .catalog-top-bar *,
.platform-mac .customers-header *,
.platform-mac .insights-header *,
.platform-mac .insights-top-bar *{
  -webkit-app-region:no-drag;
}

.app-shell{display:flex;height:100vh;overflow:hidden;width:100%}.main-workspace{flex:1;min-width:0;display:flex;height:100%;overflow:hidden;position:relative}.workspace-view{width:100%;height:100%;display:none}.workspace-view.active{display:flex}#viewQuotation.active{display:grid;grid-template-columns:440px minmax(700px,1fr);width:100%;height:100%;overflow:hidden}.editor{background:#fff;overflow-y:auto;border-right:1px solid var(--line);padding:0 24px 45px}.brand-lockup{display:flex;align-items:center;gap:12px;margin-top:25px;margin-bottom:26px}.brand-mark{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#f0eee5;display:grid;place-items:center;font:600 20px "Roboto"}.brand-lockup h1{font-size:17px;margin:0}.brand-lockup p{margin:2px 0 0;color:var(--muted);font-size:11px}.new-btn{width:100%;padding:11px;background:var(--ink);border:0;border-radius:7px;color:#fff;font:600 13px inherit;cursor:pointer;margin-bottom:17px}.section{border-top:1px solid var(--line);padding:16px 0}.section:first-of-type{border-top:0;padding-top:0}.section-title{display:flex;justify-content:space-between;align-items:center;font-weight:700;letter-spacing:.02em;margin-bottom:12px}.section-title button,.link-button{border:0;background:none;color:var(--blue);font:600 12px inherit;cursor:pointer;padding:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-grid.single{grid-template-columns:1fr}.field label{display:block;font-size:10px;text-transform:uppercase;font-weight:700;letter-spacing:.06em;color:#778195;margin:0 0 5px}.field input,.field textarea,.field select{width:100%;font:500 12px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;padding:7px 10px;color:var(--ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}.field textarea{resize:vertical;min-height:62px;line-height:1.4}.field input:focus,.field textarea:focus,.field select:focus{border-color:#007aff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}.customer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.customer-card{border:1px solid var(--line);border-radius:8px;padding:12px;box-shadow:var(--mac-shadow-card)}.customer-card h3{font-size:12px;margin:0 0 9px}.customer-card textarea{min-height:88px}.item-editor{border:1px solid var(--line);border-radius:8px;margin-bottom:9px;overflow:hidden;box-shadow:var(--mac-shadow-card);transition:box-shadow .12s}.item-summary{width:100%;background:#fff;border:0;padding:10px 12px;display:flex;text-align:left;align-items:flex-start;justify-content:space-between;gap:8px;cursor:pointer;color:var(--ink);transition:background .1s}.item-summary:hover{background:#f8fafd}.item-index{width:22px;height:22px;border-radius:50%;background:#eff4ff;color:var(--blue);display:grid;place-items:center;font-size:10px;font-weight:bold;flex-shrink:0;margin-top:1px}.item-summary-left{display:flex;align-items:flex-start;gap:9px;flex:1;min-width:0}.item-summary-content{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}.item-summary-name{font-size:12.5px;font-weight:700;color:#0f172a;line-height:1.35;word-break:break-word;white-space:normal}.item-summary-sub{display:flex;align-items:center;flex-wrap:wrap;gap:4px}.item-summary-right{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:2px}.item-summary-meta{font-size:11px;color:var(--muted);background:#f1f5f9;padding:2px 8px;border-radius:12px;font-weight:500;border:1px solid #e2e8f0;display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}.item-margin-val{font-weight:600}.item-margin-val.pos{color:#059669}.item-margin-val.neg{color:#dc2626}.item-margin-val.zero{color:#64748b}.item-summary-chevron{color:var(--muted);font-size:12px}.item-details{padding:0 10px 10px;border-top:1px solid #edf0f3}.item-actions{display:flex;gap:8px;padding-top:10px}.tiny{font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;background:#fff;cursor:pointer}.tiny.danger{color:#c44545}.custom-row{display:flex;gap:6px;margin-bottom:7px;align-items:center}.catalog-row{display:grid;grid-template-columns:1.5fr 2fr 0.8fr 0.8fr auto auto;gap:8px;margin-bottom:8px;align-items:center}.catalog-row input, .catalog-row select{min-width:0}.custom-row input{min-width:0}.custom-row select{width:95px}.add-item{border:1px dashed #9fb6dd;background:#f6f9ff;color:#275da9;padding:9px;width:100%;border-radius:6px;font:600 12px inherit;cursor:pointer}.upload-btn{display:inline-grid;place-items:center;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:5px;color:var(--blue);font:600 12px inherit;cursor:pointer;transition:all .1s}.upload-btn:hover{border-color:var(--blue);background:#f6f9ff}.preview-pane{min-width:0;overflow:auto}.preview-toolbar{height:64px;padding:0 16px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);position:sticky;top:0;z-index:3}.eyebrow{font-size:10px;color:#70809a;letter-spacing:.12em;font-weight:700;margin-right:14px}.preview-toolbar #saveState{font-size:11px;color:#8792a2}.toolbar-actions{display:flex;gap:6px;align-items:center}.toolbar-actions button{font:600 12px inherit;padding:7px 11px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}.secondary{background:#fff;border:1px solid rgba(0,0,0,0.12);color:#1e293b;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.03);transition:all .15s var(--mac-ease-out)}.secondary:hover{background:#f8fafc;border-color:rgba(0,0,0,0.2);color:#0f172a}.secondary:active{background:#f1f5f9;transform:scale(0.985)}.primary{background:#0f172a;color:#fff;border:1px solid rgba(0,0,0,0.2);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.12),inset 0 1px 0.5px rgba(255,255,255,0.15);transition:all .15s var(--mac-ease-out)}.primary:hover{background:#1e293b;border-color:#1e293b;box-shadow:0 2px 5px rgba(0,0,0,0.16),inset 0 1px 0.5px rgba(255,255,255,0.2)}.primary:active{transform:scale(0.985)}.paper-stage{padding:32px;display:flex;justify-content:center;min-width:max-content}.paper{background:#fff;width:800px;min-height:1130px;box-shadow:0 10px 40px rgba(15,23,42,.08),0 1px 3px rgba(15,23,42,.05);padding:42px 46px 36px;border:1px solid #e2e8f0;border-top:4px solid #0f172a;border-radius:4px;font-size:11px;color:#1e293b}.quote-header{display:grid;grid-template-columns:1fr auto;border-bottom:0;padding-bottom:24px}.logo{font:600 28px "Roboto",sans-serif;letter-spacing:-1.5px;color:#b9b7a9;line-height:.78;margin:0 0 12px}.logo small{font:600 7px "Roboto";letter-spacing:3px;display:block;margin-left:24px;color:#b9b7a9}.company-name{font-size:16px;font-weight:700;color:#0f172a;margin:0 0 3px}.company-info{color:#64748b;line-height:1.55;font-size:10.5px}.quotation-title{text-align:right}.quotation-title h2{font-size:24px;font-weight:800;letter-spacing:.04em;color:#0f172a;margin:0 0 10px}.quote-meta{display:grid;grid-template-columns:auto auto;gap:4px 14px;text-align:left;font-size:10px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:9px 13px}.quote-meta strong{font-weight:600;color:#64748b}.quote-meta span{font-weight:600;color:#0f172a}.addresses{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:85px;padding:0 0 18px}.address-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:10px 14px}.address-card-header{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin-bottom:6px}.address-text{white-space:pre-line;font-weight:500;line-height:1.45;color:#1e293b;font-size:10.5px}.customer-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.customer-header-row h3{margin:0}.quote-subject{margin:0 0 16px;padding:8px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid #0f172a;border-radius:0 6px 6px 0;font-size:10.5px;line-height:1.45;color:#334155}.quote-subject strong{color:#0f172a;font-weight:700;margin-right:6px}.quote-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border:1px solid #e2e8f0;border-radius:6px;overflow:hidden;margin-bottom:6px}.quote-table thead tr{background:#0f172a}.quote-table th{background:#0f172a;color:#fff;border:none;font-size:9.5px;padding:7px 6px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:center;white-space:nowrap}.quote-table tbody tr{background:#fff;transition:background .1s}.quote-table tbody tr:nth-child(even){background:#fbfcfd}.quote-table td{border:none;border-bottom:1px solid #e2e8f0;padding:7px 6px;vertical-align:middle;color:#1e293b}.quote-table tbody tr:last-child td{border-bottom:none}.quote-table .number{text-align:center;color:#475569;font-size:10px;font-variant-numeric:tabular-nums}.quote-table .amount{text-align:right;color:#0f172a;font-weight:600;white-space:nowrap;font-size:10.5px;font-variant-numeric:tabular-nums}.quote-table .item-cell{white-space:pre-line;line-height:1.32;font-size:10.5px;width:auto}.quote-table .item-cell b{display:block;font-size:11px;font-weight:600;color:#0f172a;margin-bottom:2px}.product-image{display:block;max-width:100%;object-fit:contain;margin:auto}.totals{width:48%;margin-left:auto;margin-top:14px;font-size:11px;line-height:1.5;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:10px 14px}.totals-row{display:flex;justify-content:space-between;padding:3px 0;color:#64748b;font-variant-numeric:tabular-nums}.totals-row .amount{color:#0f172a;font-weight:500}.totals-row.grand{font-size:13px;font-weight:700;color:#0f172a;border-top:1px solid #e2e8f0;margin-top:6px;padding-top:8px}
.totals-row.round-off{font-style:italic;color:#64748b;font-weight:500}.totals-row.grand .amount{font-size:14px;font-weight:700}.grand{font-size:13px;border-top:1px solid #e2e8f0;padding-top:4px}.empty-image{height:60px}.settings-hint{font-size:10px;color:var(--muted);margin-top:7px}
@media(max-width:1050px){.app-shell{grid-template-columns:390px minmax(700px,1fr)}.editor{padding:0 18px 45px}.brand-lockup{margin-top:18px}.paper-stage{padding:20px}}
.company-logo{display:block;max-width:130px;max-height:42px;object-fit:contain;object-position:left center;margin:0 0 12px}
.quote-table.has-custom-columns{font-size:10px}.quote-table.has-custom-columns th{font-size:9px;line-height:1.08;overflow-wrap:anywhere}.quote-table.has-custom-columns td{overflow-wrap:anywhere;word-break:break-word}.quote-table.has-custom-columns .amount,.quote-table.has-custom-columns .number{font-size:10px}.quote-table.has-two-custom-columns .item-cell{font-size:10px}.quote-table.has-two-custom-columns .product-image{max-width:100%}.quote-table .image-cell{text-align:center!important;vertical-align:middle!important}.quote-table .image-cell img,.product-image{display:block!important;margin:0 auto!important;object-fit:contain;max-width:100%}.empty-image{height:60px;margin:0 auto}
.signature{display:none}.closing{display:block;margin-top:18px;border-top:1px solid #e2e8f0;padding-top:16px;min-height:0}.notes h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 4px;color:#0f172a}.notes p{margin:0 0 10px;color:#64748b;line-height:1.45;white-space:pre-line;font-size:10px}
@media print{@page{size:A4 portrait;margin:12mm 15mm 15mm}*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;box-sizing:border-box}body{background:#fff!important;margin:0!important;color:#1e293b!important;font-size:11px!important;height:auto!important;overflow:visible!important}.app-shell{display:block!important;height:auto!important}.editor,.preview-toolbar,.print-floating-bar,.app-sidebar,#viewQuotes,#viewCatalog,#viewCustomers,#viewInsights{display:none!important}.preview-pane{overflow:visible!important}.paper-stage{padding:0!important;display:block!important;height:auto!important;overflow:visible!important}.paper{width:100%!important;min-height:0!important;box-shadow:none!important;border:0!important;padding:0!important;max-width:none!important;color:#1e293b!important;height:auto!important;overflow:visible!important}.quote-header{display:grid!important;grid-template-columns:1fr auto!important;padding-bottom:20px!important;break-inside:avoid!important;page-break-inside:avoid!important}.company-name{font-size:16px!important;font-weight:700!important;color:#0f172a!important}.company-info{color:#64748b!important}.quotation-title h2{color:#0f172a!important}.quote-meta{display:grid!important;grid-template-columns:auto auto!important;gap:4px 14px!important;text-align:left!important;font-size:10px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:6px!important;padding:8px 12px!important}.quote-meta strong{color:#64748b!important;font-weight:600!important}.quote-meta span{color:#0f172a!important;font-weight:600!important}.addresses{display:grid!important;grid-template-columns:1fr 1fr!important;gap:20px!important;padding:0 0 16px!important;break-inside:avoid!important;page-break-inside:avoid!important}.address-card{display:block!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:6px!important;padding:8px 12px!important}.address-card-header{font-size:9px!important;font-weight:700!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#64748b!important;margin-bottom:4px!important}.address-text{white-space:pre-line!important;font-weight:500!important;line-height:1.45!important;color:#1e293b!important;font-size:10px!important}.quote-subject{display:block!important;margin:0 0 14px!important;padding:7px 12px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-left:3px solid #0f172a!important;border-radius:0 6px 6px 0!important;font-size:10px!important;line-height:1.4!important;color:#334155!important;break-inside:avoid!important;page-break-inside:avoid!important}.quote-subject strong{color:#0f172a!important;font-weight:700!important;margin-right:6px!important}.quote-table{display:table!important;width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;font-size:10px!important;border:1px solid #e2e8f0!important;border-radius:6px!important;overflow:hidden!important}.quote-table thead{display:table-header-group!important}.quote-table tbody{display:table-row-group!important}.quote-table tr{break-inside:avoid!important;page-break-inside:avoid!important}.quote-table th{background:#0f172a!important;color:#fff!important;border:none!important;font-size:9px!important;padding:6px 5px!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-align:center!important}.quote-table td{border:none!important;border-bottom:1px solid #e2e8f0!important;padding:6px 5px!important;vertical-align:middle!important;color:#1e293b!important;break-inside:avoid!important;page-break-inside:avoid!important}.quote-table tbody tr:nth-child(even){background:#fbfcfd!important}.quote-table tbody tr:last-child td{border-bottom:none!important}.quote-table .number{text-align:center!important;color:#475569!important;font-size:9.5px!important}.quote-table .amount{text-align:right!important;color:#0f172a!important;font-weight:600!important;white-space:nowrap!important;font-size:10px!important}.quote-table .item-cell{font-size:10px!important;white-space:pre-line!important;line-height:1.3!important}.quote-table .item-cell b{display:block!important;font-size:10.5px!important;font-weight:600!important;color:#0f172a!important}.quote-table .image-cell{text-align:center!important;vertical-align:middle!important}.quote-table .image-cell img,.product-image{display:block!important;margin:0 auto!important;object-fit:contain!important;max-width:100%!important}.item-cell.align-center,.item-desc-cell.align-center{text-align:center!important}.item-cell.align-right,.item-desc-cell.align-right{text-align:right!important;padding-right:12px!important}.item-cell.align-left,.item-desc-cell.align-left{text-align:left!important}.quote-table th.align-center{text-align:center!important}.quote-table th.align-right{text-align:right!important;padding-right:12px!important}.quote-table th.align-left{text-align:left!important;padding-left:16px!important}.quote-table td.item-desc-cell.align-left,.quote-table td.item-cell.align-left{padding-left:16px!important}.table-area-header-row{background:#eef2f6!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;break-inside:avoid!important;page-break-inside:avoid!important;break-after:avoid!important;page-break-after:avoid!important}.table-area-header-cell{color:#0f172a!important;border-top:1px solid #cbd5e1!important;border-bottom:1px solid #cbd5e1!important}.totals{width:47%!important;margin-left:auto!important;break-inside:avoid!important;page-break-inside:avoid!important}.totals-row{display:flex!important;justify-content:space-between!important;padding:2px 0!important;color:#64748b!important}.totals-row .amount{color:#0f172a!important;font-weight:500!important}.totals-row.round-off{font-style:italic!important;color:#64748b!important;font-weight:500!important}.totals-row.grand{font-size:12px!important;font-weight:700!important;color:#0f172a!important;border-top:1px solid #e2e8f0!important;margin-top:4px!important;padding-top:6px!important}.totals-row.grand .amount{font-size:13px!important;font-weight:700!important;color:#0f172a!important}.amount-words{clear:both!important;margin:10px 0 12px!important;padding:6px 12px!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:6px!important;font-size:10px!important;line-height:1.5!important;color:#334155!important;break-inside:avoid!important;page-break-inside:avoid!important}.amount-words strong{color:#0f172a!important;font-weight:600!important;margin-right:6px!important}.closing{display:block!important;margin-top:14px!important;border-top:1px solid #e2e8f0!important;padding-top:12px!important;break-inside:avoid!important;page-break-inside:avoid!important}.notes h3{font-size:10px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.05em!important;margin:8px 0 3px!important;color:#0f172a!important;break-after:avoid!important;page-break-after:avoid!important}.notes p{margin:0 0 8px!important;color:#64748b!important;line-height:1.45!important;white-space:pre-line!important;font-size:9.5px!important}.terms-grid{display:flex!important;gap:10px!important;margin:6px 0 10px!important;break-inside:avoid!important;page-break-inside:avoid!important}.commercial-terms,.bank-details{flex:1!important;background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:6px!important;padding:7px 10px!important;margin:0!important;font-size:9.5px!important;line-height:1.55!important;color:#334155!important;break-inside:avoid!important;page-break-inside:avoid!important}.commercial-terms-title,.bank-details-title{font-size:9.5px!important;font-weight:700!important;color:#0f172a!important;margin-bottom:3px!important;text-transform:uppercase!important;letter-spacing:.05em!important}.commercial-terms strong,.bank-details strong{color:#0f172a!important;font-weight:600!important}.bank-details-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:9px!important;font-weight:600!important;color:#0f172a!important}.quote-status-badge{display:inline-block!important;padding:1px 5px!important;border-radius:3px!important;font-size:8px!important;font-weight:700!important;text-transform:uppercase!important;border:1px solid currentColor!important}.status-draft{color:#475569!important;border-color:#94a3b8!important;background:#f1f5f9!important}.status-sent{color:#1d4ed8!important;border-color:#93c5fd!important;background:#eff6ff!important}.status-approved{color:#047857!important;border-color:#6ee7b7!important;background:#ecfdf5!important}.status-rejected{color:#b91c1c!important;border-color:#fca5a5!important;background:#fef2f2!important}.status-expired{color:#b45309!important;border-color:#fcd34d!important;background:#fffbeb!important}.doc-footer{display:flex!important;justify-content:space-between!important;align-items:center!important;margin-top:16px!important;padding-top:8px!important;border-top:1px solid #e2e8f0!important;font-size:9px!important;color:#94a3b8!important;break-inside:avoid!important;page-break-inside:avoid!important}.signature{display:none!important}}
.terms-grid{display:flex;gap:14px;margin:10px 0 14px}.terms-grid:empty{display:none;margin:0}.commercial-terms,.bank-details{flex:1;margin:0;padding:10px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:10px;line-height:1.6;color:#334155}.commercial-terms-title,.bank-details-title{font-size:10px;font-weight:700;color:#0f172a;margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em}.commercial-terms strong,.bank-details strong{color:#0f172a;font-weight:600}.bank-details-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:10px;font-weight:600;color:#0f172a;letter-spacing:.02em}.amount-words{clear:both;margin:12px 0 16px;padding:9px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;font-size:10.5px;line-height:1.5;color:#334155}.amount-words strong{color:#0f172a;font-weight:700;margin-right:6px}
.editor-tabs{display:flex;gap:4px;margin-bottom:20px;padding:4px;background:#f0f2f5;border-radius:8px}.tab{flex:1;padding:8px;border:0;background:none;font:600 12px inherit;color:var(--muted);cursor:pointer;border-radius:6px;transition:all .2s}.tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 4px rgba(0,0,0,.05)}.tab:hover:not(.active){color:var(--ink)}
.autocomplete-field{position:relative}
.autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 7px 7px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:100;max-height:200px;overflow-y:auto;font-size:12px}
.autocomplete-item{padding:8px;cursor:pointer;color:var(--ink);border-bottom:1px solid #f0f2f5}
.autocomplete-item:last-child{border-bottom:0}
.autocomplete-item:hover{background:#f6f9ff;color:var(--blue)}
.quick-add-box{background:#f8fafd;border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}.quick-add-box .field-grid{grid-template-columns:2fr 2fr 1fr 1fr;gap:8px;margin-bottom:12px}.quick-add-box .primary{width:auto;padding:8px 16px;font-size:12px}.toolbar-row button{font:600 12px inherit;padding:8px 12px;border-radius:5px;cursor:pointer;background:#fff;border:1px solid var(--line);color:var(--muted);transition:all .1s}.toolbar-row button:hover{border-color:var(--blue);color:var(--blue);background:#f6f9ff}

/* Quotation Manager Modal */
#quotationMenuBtn{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:5px;border:1px solid var(--line);background:#fff;color:var(--ink);font:600 12px inherit;cursor:pointer;transition:all .1s}
#quotationMenuBtn:hover{border-color:var(--blue);color:var(--blue);background:#f6f9ff}
#activeQuotationName{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Status Badges */
.quote-status-badge, .qm-status-badge{display:inline-block;padding:2px 7px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;vertical-align:middle}
.status-draft{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.status-sent{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.status-approved{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.status-rejected{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.status-expired{background:#fffbeb;color:#b45309;border:1px solid #fde68a}

/* Quotation Manager Modal (Apple HIG Sheet / Modal) */
.qm-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center}
.qm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.qm-panel{position:relative;width:100%;max-width:720px;max-height:85vh;background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.14);box-shadow:var(--mac-shadow-modal);overflow:hidden;display:flex;flex-direction:column}
.qm-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(0,0,0,0.08)}
.qm-header-title{display:flex;align-items:center;gap:10px}
.qm-header h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.qm-count-badge{font-size:11px;font-weight:600;color:var(--muted);background:#f1f5f9;padding:2px 8px;border-radius:12px}
.qm-close{width:28px;height:28px;border:0;background:none;font-size:20px;color:var(--muted);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .15s var(--mac-ease-out)}
.qm-close:hover{background:#f0f2f5;color:var(--ink)}
#saveState.save-error{color:#c44545!important;font-weight:700}

.qm-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid rgba(0,0,0,0.08);background:#fafbfc}
.qm-stats-wrap{display:flex;flex-direction:column;gap:4px}
.qm-meter-track{width:150px;height:5px;background:#e2e8f0;border-radius:3px;overflow:hidden}
.qm-meter-fill{height:100%;background:var(--blue);border-radius:3px;transition:width .3s}
.qm-meter-fill.warning{background:#d97706}
.qm-meter-fill.danger{background:#dc2626}
.qm-hint{font-size:11px;color:var(--muted)}
.qm-hint strong{color:var(--ink);font-weight:600}
.qm-toolbar-actions{display:flex;gap:6px;align-items:center}
.qm-new-btn{padding:8px 16px;font-size:12px}

.qm-controls-row{display:flex;gap:12px;padding:10px 20px 8px;background:#fff;border-bottom:1px solid #f0f2f5;align-items:center}
.qm-search-wrap{flex:1;position:relative}
.qm-search-input{width:100%;font:500 12px inherit;padding:8px 12px;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafd;outline:none;color:var(--ink);transition:all .15s var(--mac-ease-out)}
.qm-search-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}
.qm-sort-wrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);white-space:nowrap}
.qm-sort-select{font:500 11px inherit;padding:7px 10px;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#fff;color:var(--ink);outline:none;cursor:pointer}
.qm-sort-select:focus{border-color:var(--blue)}

.qm-status-filters{display:flex;gap:6px;padding:8px 20px 10px;background:#fff;border-bottom:1px solid rgba(0,0,0,0.08);overflow-x:auto;align-items:center}
.qm-filter-chip{font:600 11px inherit;padding:4px 10px;border-radius:16px;border:1px solid rgba(0,0,0,0.12);background:#fff;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .15s var(--mac-ease-out);display:flex;align-items:center;gap:5px}
.qm-filter-chip:hover{border-color:var(--blue);color:var(--blue)}
.qm-filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.qm-filter-chip.active .chip-count{background:rgba(255,255,255,.2);color:#fff}
.chip-count{font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:10px;background:#eef1f6;color:var(--muted)}

.qm-list{overflow-y:auto;max-height:50vh;padding:10px 14px}
.qm-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
.qm-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.08);box-shadow:var(--mac-shadow-card);margin-bottom:8px;transition:all .15s var(--mac-ease-out)}
.qm-item:hover{border-color:var(--blue);box-shadow:var(--mac-shadow-card-hover)}
.qm-item.active{border-color:var(--blue);background:#f6f9ff}
.qm-item-main{flex:1;min-width:0}
.qm-item-header-line{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.qm-item-name{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qm-active-badge{font-size:9px;font-weight:700;color:var(--blue);background:#e8f0fe;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}
.qm-item-meta{display:flex;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.qm-time{color:#9aa4b2}
.qm-customer{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.qm-item-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.qm-item-total{font-size:13px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap;min-width:85px}
.qm-item-actions{display:flex;gap:5px;flex-shrink:0}
.qm-btn{padding:6px 11px;font-size:11px;font-weight:600;border-radius:6px;border:1px solid rgba(0,0,0,0.12);background:#fff;color:var(--ink);cursor:pointer;transition:all .15s var(--mac-ease-out);white-space:nowrap}
.qm-btn:hover{border-color:var(--blue);color:var(--blue);background:#f6f9ff}
.qm-btn:disabled{opacity:.5;cursor:not-allowed}
.qm-btn.danger{color:#c44545;border-color:#fecaca}
.qm-btn.danger:hover{background:#fef2f2;border-color:#fca5a5;color:#c44545}

/* Toast Notifications (Apple Floating Toast) */
.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast-notification{background:rgba(16,24,45,0.92);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);color:#fff;font:500 12px var(--mac-font);padding:8px 16px;border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,.22),0 0 0 0.5px rgba(255,255,255,.15);pointer-events:auto;animation:toastIn .2s var(--mac-ease-out);display:flex;align-items:center;gap:8px}
.toast-notification.fade-out{animation:toastOut .25s ease-in forwards}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}

@media(max-width:640px){.qm-panel{max-width:calc(100% - 24px);margin:12px}.qm-controls-row{flex-direction:column;align-items:stretch}.qm-item{flex-direction:column;align-items:stretch}.qm-item-right{justify-content:space-between;border-top:1px solid #edf0f3;padding-top:8px;margin-top:4px}}

/* Cloud Sync Styles */
.cloud-sync-btn{display:inline-flex;align-items:center;gap:6px}
.cloud-dot{width:7px;height:7px;border-radius:50%;background:#94a3b8;display:inline-block;transition:background .2s}
.cloud-dot.connected{background:#10b981}
.cloud-dot.syncing{background:#3b82f6;animation:pulseDot 1s infinite}
.cloud-dot.offline{background:#f59e0b}
.cloud-dot.error{background:#ef4444}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.3}}

.sync-status-pill{font-size:10px;font-weight:700;padding:2px 8px;border-radius:12px;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:5px}
.sync-status-pill.connected{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.sync-status-pill.syncing{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.sync-status-pill.idle{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.sync-status-pill.offline{background:#fffbeb;color:#b45309;border:1px solid #fde68a}
.sync-status-pill.error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}

.sync-panel{position:relative;width:100%;max-width:640px;max-height:88vh;background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.14);box-shadow:var(--mac-shadow-modal);overflow:hidden;display:flex;flex-direction:column}
.sync-body{overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}
.sync-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px}
.sync-section-title{font-size:12px;font-weight:700;color:#0f172a;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.sync-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.sync-field:last-child{margin-bottom:0}
.sync-field label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.sync-field input{font:500 12px "Roboto",Arial,sans-serif;padding:9px 12px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#0f172a;outline:none}
.sync-field input:focus{border-color:#3278e8;box-shadow:0 0 0 3px #3278e816}
.sync-toggle-label{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:#0f172a;cursor:pointer;user-select:none}
.sync-toggle-label input[type="checkbox"]{width:16px;height:16px;cursor:pointer}
.sync-actions-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px;border-top:1px solid #f0f2f5;flex-wrap:wrap}
.sync-button-group{display:flex;gap:8px;align-items:center}
.qm-sync-badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;text-transform:uppercase}
.qm-sync-badge.synced{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.qm-sync-badge.local{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}

/* App Sidebar Styles (Apple HIG Vibrancy & Translucency) */
.app-sidebar{width:210px;min-width:210px;background:rgba(15,23,42,0.92);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);color:#f8fafc;display:flex;flex-direction:column;height:100%;border-right:1px solid rgba(255,255,255,.08);flex-shrink:0;user-select:none;z-index:10;transition:width .22s cubic-bezier(0.4,0,0.2,1),min-width .22s cubic-bezier(0.4,0,0.2,1);position:relative}
.sidebar-brand{padding:16px 14px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);position:relative}
.sidebar-brand-mark{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#b9b7a9 0%,#8a887b 100%);color:#0f172a;display:grid;place-items:center;font:700 18px var(--mac-font);letter-spacing:-.5px;box-shadow:0 2px 8px rgba(0,0,0,.25);flex-shrink:0}
.sidebar-brand-text{display:flex;flex-direction:column;min-width:0;flex:1;overflow:hidden;white-space:nowrap}
.sidebar-brand-title{font-size:14px;font-weight:700;letter-spacing:.02em;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand-sub{font-size:9.5px;color:#94a3b8;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.sidebar-toggle-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#94a3b8;width:24px;height:24px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-left:auto;transition:all .15s ease;flex-shrink:0}
.sidebar-toggle-btn:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24)}
.sidebar-toggle-svg{width:13px;height:13px;stroke:currentColor;transition:transform .22s cubic-bezier(0.4,0,0.2,1)}
.sidebar-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:3px;overflow-y:auto;overflow-x:hidden}
.nav-section-title{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#475569;padding:10px 10px 4px;white-space:nowrap;overflow:hidden}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:6px;border:0;background:transparent;color:#94a3b8;font:500 12.5px var(--mac-font);cursor:pointer;text-align:left;width:100%;transition:all .15s var(--mac-ease-out);position:relative}
.nav-item:hover{background:rgba(255,255,255,.07);color:#f1f5f9}
.nav-item.active{background:rgba(185,183,169,.15);color:#fff;font-weight:600;border-left:3px solid #b9b7a9;padding-left:8px}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;opacity:.85}
.nav-item.active .nav-icon{opacity:1}
.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-badge{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:10px;background:rgba(255,255,255,.09);color:#cbd5e1;flex-shrink:0}
.nav-item.active .nav-badge{background:#b9b7a9;color:#0f172a;font-weight:700}
.sidebar-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:3px}
.sidebar-footer .nav-item{font-size:11.5px;color:#64748b;padding:7px 10px}
.sidebar-footer .nav-item:hover{color:#cbd5e1;background:rgba(255,255,255,.06)}

/* Sidebar User Capsule */
.sidebar-user-capsule {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .15s ease;
  user-select: none;
}
.sidebar-user-capsule:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}
.user-avatar-pill {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #475569, #334155);
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.user-avatar-pill.role-owner {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.user-avatar-pill.role-admin {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
.user-avatar-pill.role-sales_rep {
  background: linear-gradient(135deg, #10b981, #059669);
}
.user-avatar-pill.role-offline {
  background: linear-gradient(135deg, #64748b, #475569);
}
.user-meta-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.user-meta-name {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.user-meta-role {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sidebar-user-profile-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  transition: all .15s ease;
  flex-shrink: 0;
}
.sidebar-user-profile-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.user-role-badge.owner { background: #fef3c7; color: #b45309; }
.user-role-badge.admin { background: #ede9fe; color: #6d28d9; }
.user-role-badge.sales_rep { background: #ecfdf5; color: #047857; }

/* Document Author Badge */
.doc-author-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}

/* Collapsed Sidebar State */
.app-sidebar.collapsed{width:78px!important;min-width:78px!important}
.app-sidebar.collapsed .sidebar-brand{padding:12px 6px 10px;flex-direction:column;align-items:center;gap:8px;justify-content:center}
.app-sidebar.collapsed .sidebar-brand-text{display:none!important}
.app-sidebar.collapsed .sidebar-brand-mark,.app-sidebar.collapsed .brand-mark{cursor:pointer;margin:0 auto}
.app-sidebar.collapsed .sidebar-toggle-btn{margin:0;width:24px;height:24px}
.app-sidebar.collapsed .sidebar-toggle-svg{transform:rotate(180deg)}
.app-sidebar.collapsed .sidebar-nav{padding:10px 6px}
.app-sidebar.collapsed .nav-section-title{display:none!important}
.app-sidebar.collapsed .nav-item{padding:10px 0;justify-content:center;border-left:3px solid transparent}
.app-sidebar.collapsed .nav-item.active{border-left:3px solid #b9b7a9;background:rgba(185,183,169,.15);border-radius:4px}
.app-sidebar.collapsed .nav-label{display:none!important}
.app-sidebar.collapsed .nav-icon{margin:0;font-size:17px;width:auto}
.app-sidebar.collapsed .nav-badge{position:absolute;top:3px;right:6px;padding:1px 4px;font-size:8px;border-radius:8px;min-width:14px;text-align:center;line-height:1.1}
.app-sidebar.collapsed .sidebar-footer{padding:10px 4px}
.app-sidebar.collapsed .sidebar-footer .nav-item{padding:8px 0;justify-content:center}
.app-sidebar.collapsed .sidebar-user-capsule {
  padding: 6px 0;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}
.app-sidebar.collapsed .sidebar-user-capsule:hover {
  background: rgba(255, 255, 255, 0.05);
}
.app-sidebar.collapsed .user-meta-info,
.app-sidebar.collapsed .sidebar-user-profile-btn {
  display: none !important;
}

/* Catalog Workspace Styles */
.catalog-workspace{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;background:#f8fafc;min-width:0}
.catalog-top-bar{padding:14px 28px;background:rgba(255,255,255,0.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0}
.catalog-title-group{display:flex;align-items:center;gap:12px}
.catalog-title{font-size:18px;font-weight:800;color:#0f172a;margin:0;letter-spacing:-.01em}
.catalog-count-pill{font-size:11px;font-weight:700;background:#f1f5f9;color:#475569;padding:3px 10px;border-radius:12px;border:1px solid #e2e8f0}
.catalog-actions{display:flex;align-items:center;gap:8px}
.catalog-btn{font:600 12px var(--mac-font);height:32px;padding:0 13px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all .15s var(--mac-ease-out);border:1px solid transparent;box-sizing:border-box;white-space:nowrap}
.catalog-btn-primary{background:#0f172a;color:#fff;border-color:rgba(0,0,0,0.2);box-shadow:0 1px 2px rgba(15,23,42,.15),inset 0 1px 0.5px rgba(255,255,255,0.15)}
.catalog-btn-primary:hover{background:#1e293b;border-color:#1e293b}
.catalog-btn-primary:active{transform:scale(0.985)}
.catalog-btn-secondary{background:#fff;color:#1e293b;border-color:rgba(0,0,0,0.12);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.catalog-btn-secondary:hover{background:#f8fafc;border-color:rgba(0,0,0,0.2);color:#0f172a}
.catalog-btn-secondary:active{background:#f1f5f9;transform:scale(0.985)}
.catalog-filter-bar{padding:12px 28px;background:#fff;border-bottom:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;gap:14px;flex-shrink:0}
.catalog-search-wrap{position:relative;flex:1;max-width:380px}
.catalog-search-wrap input{width:100%;padding:7px 12px 7px 32px;font:500 12px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;outline:none;background:#f8fafc;transition:all .15s var(--mac-ease-out)}
.catalog-search-wrap input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}
.catalog-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:12px;pointer-events:none}
.catalog-category-select{padding:7px 12px;font:500 12px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafc;color:#334155;outline:none;cursor:pointer;min-width:160px}
.catalog-category-select:focus{border-color:var(--blue);background:#fff}
.catalog-table-container{flex:1;min-height:0;overflow:hidden;padding:20px 28px;display:flex;flex-direction:column}
.catalog-table-card{flex:1;min-height:0;background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow:auto;box-shadow:var(--mac-shadow-card);position:relative}
.catalog-table-card::-webkit-scrollbar{height:9px;width:9px}
.catalog-table-card::-webkit-scrollbar-track{background:#f8fafc;border-radius:0 0 9px 9px}
.catalog-table-card::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:6px;border:2px solid #f8fafc}
.catalog-table-card::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.catalog-table{width:100%;min-width:1420px;border-collapse:separate;border-spacing:0;font-size:12px;text-align:left}
.catalog-table thead{background:#f8fafc;position:sticky;top:0;z-index:2}
.catalog-table thead th:first-child{border-top-left-radius:9px}
.catalog-table thead th:last-child{border-top-right-radius:9px}
.catalog-table th{padding:12px 14px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#475569;white-space:nowrap;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.catalog-table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#1e293b;background:#fff}
.catalog-table tbody tr:hover td{background:#f8fafd}
.catalog-table tbody tr:last-child td{border-bottom:none}
.catalog-table tbody tr:last-child td:first-child{border-bottom-left-radius:9px}
.catalog-table tbody tr:last-child td:last-child{border-bottom-right-radius:9px}
.cat-thumb-box{width:46px;height:46px;border-radius:6px;background:#f1f5f9;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.cat-thumb-box img{width:100%;height:100%;object-fit:contain}
.cat-thumb-box span{font-size:18px;opacity:.5}
.cat-name-cell{display:flex;flex-direction:column;gap:3px;max-width:240px}
.cat-item-name{font-weight:700;color:#0f172a;font-size:12.5px;line-height:1.3}
.cat-item-brand{font-size:10.5px;color:#64748b;font-weight:500}
.cat-sku{font-family:var(--mac-mono);font-size:11px;font-weight:600;color:#334155;background:#f1f5f9;padding:2px 7px;border-radius:4px;border:1px solid #e2e8f0;display:inline-block;white-space:nowrap}
.cat-spec-cell{max-width:260px;font-size:11px;color:#475569;line-height:1.45;white-space:pre-line}
.cat-category-badge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:12px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;white-space:nowrap}
.cat-unit-badge{font-size:10.5px;color:#475569;font-weight:600;background:#f8fafc;padding:2px 6px;border-radius:4px;border:1px solid #e2e8f0;display:inline-block}
.cat-hsn{font-family:var(--mac-mono);font-size:10.5px;color:#64748b}
.cat-rate{font-weight:700;font-size:13px;color:#0f172a;font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-cost{font-size:11.5px;color:#64748b;font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-margin{font-size:10.5px;font-weight:700;color:#047857;background:#ecfdf5;padding:2px 7px;border-radius:4px;border:1px solid #a7f3d0;display:inline-block;white-space:nowrap}
.cat-margin.zero{color:#64748b;background:#f1f5f9;border-color:#e2e8f0;font-weight:600}
.cat-margin.negative{color:#b91c1c;background:#fef2f2;border-color:#fecaca;font-weight:700}
.cat-gst{font-size:11px;font-weight:600;color:#047857;background:#ecfdf5;padding:2px 7px;border-radius:4px;border:1px solid #a7f3d0;display:inline-block;white-space:nowrap}
.cat-actions-cell{display:flex;align-items:center;gap:6px;white-space:nowrap}
.cat-add-btn{padding:6px 12px;background:#0f172a;color:#fff;border:1px solid rgba(0,0,0,0.2);border-radius:6px;font:600 11.5px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s var(--mac-ease-out)}
.cat-add-btn:hover{background:#1e293b;border-color:#1e293b}
.cat-icon-btn{padding:6px 8px;background:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:6px;color:#475569;cursor:pointer;font-size:11px;transition:all .15s var(--mac-ease-out)}
.cat-icon-btn:hover{border-color:rgba(0,0,0,0.2);background:#f8fafc;color:#0f172a}
.cat-icon-btn.danger:hover{border-color:#fecaca;background:#fef2f2;color:#dc2626}
.catalog-empty{padding:48px 24px;text-align:center;color:#64748b}
.catalog-empty-icon{font-size:36px;margin-bottom:10px;opacity:.6}

/* Catalog Pagination Bar Styles */
.catalog-pagination-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:9px;box-shadow:0 1px 3px rgba(15,23,42,0.04);flex-shrink:0;margin-top:14px}
.catalog-pagination-info{font-size:11.5px;color:#475569;font-weight:500;white-space:nowrap}
.catalog-pagination-info b{color:#0f172a;font-weight:700}
.catalog-pagination-nav{display:flex;align-items:center;gap:4px;user-select:none}
.catalog-page-btn{font:600 11.5px var(--mac-font);min-width:30px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid #e2e8f0;background:#fff;color:#334155;cursor:pointer;transition:all .15s var(--mac-ease-out);box-shadow:0 1px 2px rgba(0,0,0,0.02)}
.catalog-page-btn:hover:not(:disabled):not(.active){background:#f8fafc;border-color:#cbd5e1;color:#0f172a}
.catalog-page-btn.active{background:#0f172a;color:#fff;border-color:#0f172a;box-shadow:0 1px 3px rgba(15,23,42,0.2);cursor:default}
.catalog-page-btn:disabled{opacity:0.4;cursor:not-allowed;border-color:#e2e8f0;background:#f8fafc;color:#94a3b8}
.catalog-page-ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:28px;font-size:13px;color:#94a3b8;font-weight:700;user-select:none}
.catalog-pagination-size{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#475569;white-space:nowrap}
.catalog-size-label{font-weight:600;color:#475569}
.catalog-size-select{padding:4px 8px;font:600 11.5px inherit;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;color:#0f172a;outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.catalog-size-select:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(0,122,255,0.15)}
.catalog-custom-size-box{position:relative}
.catalog-custom-size-input{width:95px;padding:4px 8px;font:500 11.5px inherit;border:1px solid #e2e8f0;border-radius:6px;background:#f8fafc;color:#0f172a;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.catalog-custom-size-input::placeholder{color:#94a3b8;font-size:11px}
.catalog-custom-size-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(0,122,255,0.15)}
.catalog-custom-size-input::-webkit-inner-spin-button,.catalog-custom-size-input::-webkit-outer-spin-button{opacity:0.7}
.catalog-size-unit{font-size:11px;color:#64748b}

/* Catalog Multi-Select & Mass Field Editing Styles */
.cat-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--blue);border-radius:4px;vertical-align:middle;margin:0}
.catalog-table tbody tr.is-selected td{background:#eff6ff !important}
.catalog-table tbody tr.is-selected:hover td{background:#e0f2fe !important}

.catalog-selection-bar{
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 20px;
  background:rgba(15,23,42,0.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:40px;
  box-shadow:0 12px 32px -4px rgba(0,0,0,0.38), 0 4px 12px rgba(0,0,0,0.18);
  color:#fff;
  animation:catSlideUp .22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes catSlideUp{
  from{transform:translate(-50%,24px);opacity:0}
  to{transform:translate(-50%,0);opacity:1}
}
.cat-sel-info{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;white-space:nowrap}
.cat-sel-icon{font-size:16px}
.cat-sel-count b{font-weight:700;color:#60a5fa}
.cat-sel-link-btn{background:none;border:none;color:#93c5fd;font:600 11.5px var(--mac-font);text-decoration:underline;cursor:pointer;padding:0;margin-left:4px}
.cat-sel-link-btn:hover{color:#bfdbfe}
.cat-sel-actions{display:flex;align-items:center;gap:8px}
.cat-btn-danger{background:#dc2626 !important;color:#fff !important;border-color:#b91c1c !important}
.cat-btn-danger:hover{background:#b91c1c !important}
.cat-sel-clear-btn{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.15);color:#e2e8f0;padding:6px 12px;border-radius:20px;font:600 11.5px var(--mac-font);cursor:pointer;transition:all .15s ease}
.cat-sel-clear-btn:hover{background:rgba(255,255,255,0.22);color:#fff}

/* Mass Edit Modal */
.mass-edit-dialog{width:700px;max-width:95vw;max-height:88vh;background:#fff;border-radius:12px;box-shadow:var(--mac-shadow-popover);display:flex;flex-direction:column;overflow:hidden;animation:macDialogIn .2s var(--mac-ease-out)}
.mass-edit-header{padding:16px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#f8fafc}
.mass-edit-header-left{display:flex;align-items:center;gap:12px}
.mass-edit-icon-badge{width:36px;height:36px;border-radius:8px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:18px;border:1px solid #bfdbfe}
.mass-edit-title-wrap h2{margin:0;font-size:16px;font-weight:700;color:#0f172a}
.mass-edit-subtitle{margin:2px 0 0;font-size:11.5px;color:#64748b}
.mass-edit-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.mass-edit-notice{display:flex;align-items:center;gap:8px;padding:9px 13px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;font-size:11.5px;color:#1e40af}
.mass-field-row{display:flex;align-items:flex-start;gap:14px;padding:11px 14px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;transition:all .15s ease}
.mass-field-row.active{background:#fff;border-color:#93c5fd;box-shadow:0 1px 3px rgba(59,130,246,0.1)}
.mass-field-check-wrap{display:flex;align-items:center;gap:8px;min-width:175px;padding-top:4px}
.mass-field-check-label{font-size:12px;font-weight:700;color:#0f172a;cursor:pointer;user-select:none}
.mass-field-inputs{flex:1;display:flex;flex-direction:column;gap:8px;opacity:0.35;pointer-events:none;transition:opacity .15s ease}
.mass-field-row.active .mass-field-inputs{opacity:1;pointer-events:auto}
.mass-input-group{display:flex;gap:8px;align-items:center}
.mass-input-group select,.mass-input-group input[type="text"],.mass-input-group input[type="number"]{font:500 12px var(--mac-font);padding:5px 8px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#0f172a;outline:none}
.mass-input-group select:focus,.mass-input-group input:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,122,255,0.15)}
.mass-impact-preview{padding:9px 13px;background:#f1f5f9;border-radius:8px;font-size:11.5px;color:#334155;font-weight:600;display:flex;align-items:center;gap:6px}
.mass-edit-footer{padding:14px 22px;border-top:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#f8fafc}

/* My Quotations Workspace Styles */
.quotes-workspace{flex:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;background:#f8fafc;padding:24px 32px;gap:18px}
.quotes-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0;flex-wrap:wrap;gap:16px}
.quotes-header-info{display:flex;flex-direction:column;gap:5px}
.quotes-title-row{display:flex;align-items:center;gap:12px}
.quotes-title{font-size:22px;font-weight:800;color:#0f172a;margin:0;letter-spacing:-.02em}
.quotes-count-pill{font-size:11px;font-weight:700;background:#f1f5f9;color:#475569;padding:3px 10px;border-radius:12px;border:1px solid #e2e8f0}
.quotes-subtitle{font-size:12.5px;color:#64748b;margin:0}
.quotes-header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.quotes-action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.btn-qw{font:600 12px var(--mac-font);height:32px;padding:0 12px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s var(--mac-ease-out);border:1px solid transparent;white-space:nowrap}
.btn-qw.primary{background:#0f172a;color:#fff;border-color:rgba(0,0,0,0.2);box-shadow:0 1px 2px rgba(15,23,42,.15),inset 0 1px 0.5px rgba(255,255,255,0.15)}
.btn-qw.primary:hover{background:#1e293b;border-color:#1e293b;box-shadow:0 2px 5px rgba(15,23,42,.2)}
.btn-qw.primary:active{transform:scale(0.985)}
.btn-qw.secondary{background:#fff;color:#1e293b;border-color:rgba(0,0,0,0.12);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.btn-qw.secondary:hover{background:#f8fafc;border-color:rgba(0,0,0,0.2);color:#0f172a}
.btn-qw.secondary:active{background:#f1f5f9;transform:scale(0.985)}
.btn-qw.cloud{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.btn-qw.cloud:hover{background:#dbeafe;border-color:#93c5fd}
.btn-qw-icon{font-size:12px}

/* KPI & Storage Dashboard Bar */
.quotes-kpi-bar{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:12px;margin-bottom:0}
@media(max-width:1250px){.quotes-kpi-bar{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.quote-kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--mac-shadow-card);transition:transform .12s,box-shadow .12s;min-width:0}
.quote-kpi-card:hover{transform:translateY(-1px);box-shadow:var(--mac-shadow-card-hover)}
.quote-kpi-card.highlight{border-color:#bfdbfe;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}
.kpi-card-header{display:flex;align-items:center;gap:8px}
.kpi-icon-pill{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:12px;flex-shrink:0}
.kpi-icon-pill.pipeline{background:#eff6ff;color:#1d4ed8}
.kpi-icon-pill.quotes{background:#f1f5f9;color:#334155}
.kpi-icon-pill.pi{background:#f5f3ff;color:#7c3aed}
.kpi-icon-pill.total{background:#fffbeb;color:#b45309}
.kpi-icon-pill.storage{background:#f8fafc;color:#475569;border:1px solid #e2e8f0}
.quote-kpi-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.quote-kpi-val{font-size:17px;font-weight:800;color:#0f172a;line-height:1.2;font-variant-numeric:tabular-nums}
.quote-kpi-val.highlight{color:#1d4ed8}
.quote-kpi-val.storage{font-size:14px;font-weight:700}
.storage-max{font-size:11px;font-weight:500;color:#64748b}
.kpi-subtext{font-size:11px;color:#94a3b8;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.storage-pct-badge{margin-left:auto;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px}
.storage-pct-badge.ok{background:#ecfdf5;color:#047857}
.storage-pct-badge.warning{background:#fffbeb;color:#b45309}
.storage-pct-badge.danger{background:#fef2f2;color:#dc2626}
.quote-kpi-card.storage, .quote-kpi-storage{min-width:0}

/* Unified Filter & Search Toolbar */
.quotes-toolbar-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:var(--mac-shadow-card);margin-bottom:0}
.quotes-toolbar{margin-bottom:0}
.quotes-search-box{position:relative;flex:1;min-width:260px;max-width:380px}
.quotes-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;color:#94a3b8;pointer-events:none;line-height:1}
.quotes-search-input{width:100%;height:32px;padding:0 30px 0 34px;font:500 12.5px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafd;color:#0f172a;outline:none;transition:all .15s var(--mac-ease-out)}
.quotes-search-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,.2)}
.quotes-search-box .clear-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.quotes-search-box .clear-search-btn:hover{color:#0f172a}
.cat-action-btn{font:600 12px var(--mac-font);height:32px;padding:0 12px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s var(--mac-ease-out);border:1px solid rgba(0,0,0,0.12);background:#fff;color:#334155;white-space:nowrap}
.cat-action-btn:hover{background:#f8fafc;border-color:rgba(0,0,0,0.2);color:#0f172a}
.cat-action-btn.primary{background:#0f172a;color:#fff;border-color:rgba(0,0,0,0.2);box-shadow:0 1px 2px rgba(15,23,42,.15)}
.cat-action-btn.primary:hover{background:#1e293b;border-color:#1e293b}
.quotes-filters-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.quotes-doc-filters{background:rgba(142,142,147,0.12);padding:2px;border-radius:7px;display:inline-flex;gap:2px;border:0.5px solid rgba(0,0,0,0.04)}
.doc-filter-btn{padding:5px 11px;font:600 11px inherit;border:0;background:transparent;color:#64748b;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .12s var(--mac-ease-out)}
.doc-filter-btn:hover{color:#0f172a}
.doc-filter-btn.active{background:#fff;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.08);font-weight:700}
.quotes-filter-select{height:32px;padding:0 10px;font:500 11.5px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#fff;color:#334155;outline:none;cursor:pointer;transition:border-color .15s}
.quotes-filter-select:focus{border-color:var(--blue)}
.quotes-clear-btn{height:32px;padding:0 10px;font:600 11px inherit;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.quotes-clear-btn:hover{background:#fee2e2;border-color:#f87171}

/* Empty State */
.quotes-empty-state{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:var(--mac-shadow-card)}
.empty-state-icon{font-size:38px;margin-bottom:4px;opacity:.7}
.empty-state-title{font-size:16px;font-weight:700;color:#0f172a}
.empty-state-text{font-size:12px;color:#64748b;margin:0 0 12px;max-width:380px;line-height:1.45}

/* Table Wrap & List */
.quotes-table-wrap{background:#fff;border:1px solid #e2e8f0;border-radius:10px;overflow-x:auto;box-shadow:var(--mac-shadow-card)}
.quotes-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}
.quotes-table thead{background:#f8fafc;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:2}
.quotes-table th{padding:11px 14px;font-size:10px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.quotes-table td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#334155}
.quotes-table tbody tr{transition:background .1s}
.quotes-table tbody tr:hover{background:#f8fafd;cursor:pointer}
.quotes-table tbody tr.active-row{background:#eff6ff}
.quotes-table tbody tr.active-row:hover{background:#e0edfe}
.quotes-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.quotes-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--mac-shadow-card);transition:transform .12s,box-shadow .12s;cursor:pointer;box-sizing:border-box;overflow:hidden;position:relative}
.quotes-card:hover{transform:translateY(-1px);box-shadow:var(--mac-shadow-card-hover)}
.quotes-card.active-card{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue),0 4px 12px rgba(0,122,255,0.15)}

/* Quotation Card Footer & Actions */
.quotes-card-footer{margin-top:auto;padding-top:10px;border-top:1px solid #f1f5f9;display:flex;flex-direction:column;gap:9px}
.quotes-card-financials-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.quotes-card-total-group{display:flex;flex-direction:column;min-width:0}
.quotes-card-total-label{font-size:9.5px;color:#64748b;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.quotes-card-total-amount{font-size:15px;font-weight:800;color:#0f172a;letter-spacing:-.2px;white-space:nowrap}
.quotes-card-open-btn{height:28px;padding:0 13px;background:#0f172a;color:#fff;border:1px solid rgba(0,0,0,0.2);border-radius:6px;font:600 11.5px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease;flex-shrink:0}
.quotes-card-open-btn:hover{background:#1e293b;border-color:#1e293b;color:#fff}
.quotes-card-actions-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:9px;border-top:1px dashed #e2e8f0}
.quotes-card-convert-btn{font:600 11px inherit;height:28px;padding:0 9px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease;white-space:nowrap;flex-shrink:0}
.quotes-card-icon-actions{display:flex;align-items:center;gap:5px;flex-shrink:0;margin-left:auto}
.quotes-card-icon-actions .cat-icon-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;border-radius:6px;border:1px solid rgba(0,0,0,0.1);background:#fff;color:#475569;cursor:pointer;transition:all .15s ease;flex-shrink:0}
.quotes-card-icon-actions .cat-icon-btn:hover{background:#f1f5f9;border-color:rgba(0,0,0,0.2);color:#0f172a}
.quotes-card-icon-actions .cat-icon-btn.danger:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626}

/* Customers Workspace Styles */
.customers-workspace{flex:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;background:#f8fafc;padding:24px 28px}
.customers-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.customers-title-group{display:flex;flex-direction:column;gap:3px}
.customers-title{font-size:18px;font-weight:800;color:#0f172a;margin:0}
.customers-sub{font-size:12px;color:#64748b}

/* Customers Toolbar & Search/Filter Bar */
.customers-toolbar-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;box-shadow:var(--mac-shadow-card);margin-bottom:18px}
.customers-search-box{position:relative;flex:1;min-width:260px;max-width:460px}
.customers-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;color:#94a3b8;pointer-events:none;line-height:1;user-select:none}
.customers-search-input{width:100%;height:32px;padding:0 32px 0 34px;font:500 12.5px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafd;color:#0f172a;outline:none;transition:all .15s var(--mac-ease-out);box-sizing:border-box}
.customers-search-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}
.customers-search-box .clear-search-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:#94a3b8;font-size:16px;cursor:pointer;padding:0 4px;line-height:1;border-radius:4px;display:flex;align-items:center;justify-content:center}
.customers-search-box .clear-search-btn:hover{color:#0f172a;background:#f1f5f9}
.customers-filters-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.customers-filter-select{height:32px;padding:0 28px 0 11px;font:500 12px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path fill="%2364748b" d="M0 0l5 5 5-5z"/></svg>') no-repeat right 9px center;background-size:9px 5px;-webkit-appearance:none;appearance:none;color:#334155;outline:none;cursor:pointer;transition:all .15s var(--mac-ease-out);box-sizing:border-box}
.customers-filter-select:hover{background-color:#fff;border-color:rgba(0,0,0,0.22);color:#0f172a}
.customers-filter-select:focus{border-color:var(--blue);background-color:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}

.customers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.customer-card-box{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--mac-shadow-card);transition:transform .1s,box-shadow .1s}
.customer-card-box:hover{transform:translateY(-1px);box-shadow:var(--mac-shadow-card-hover)}
.customer-box-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.customer-box-avatar{width:38px;height:38px;border-radius:8px;background:#eff6ff;color:#2563eb;display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0}
.customer-box-meta{flex:1;min-width:0}
.customer-box-name{font-weight:700;font-size:13.5px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-box-quotes{font-size:11px;color:#64748b;margin-top:2px}
.customer-box-details{font-size:11.5px;color:#334155;line-height:1.45;white-space:pre-line;background:#f8fafc;padding:10px 12px;border-radius:6px;border:1px solid #e2e8f0}
.customer-box-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid #f1f5f9;font-size:11.5px}
.customer-quoted-val{font-weight:700;color:#0f172a}
.customers-note-banner{background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:12px;color:#92400e;font-size:12px}
.view-toggle-wrap{display:flex;align-items:center;background:rgba(142,142,147,0.12);padding:2px;border-radius:7px;border:0.5px solid rgba(0,0,0,0.04)}
.view-toggle-btn{padding:5px 11px;font:600 11px inherit;border:0;background:transparent;color:#64748b;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s var(--mac-ease-out)}
.view-toggle-btn:hover{color:#0f172a}
.view-toggle-btn.active{background:#fff;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 0.5px rgba(0,0,0,0.04);font-weight:700}
.cust-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-block;white-space:nowrap}
.cust-pill.active{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.cust-pill.lead{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.cust-pill.inactive{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1}
.cust-code{font-family:var(--mac-mono);font-size:11px;font-weight:600;color:#475569;background:#f1f5f9;padding:2px 7px;border-radius:4px;border:1px solid #cbd5e1;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;width:fit-content;max-width:fit-content;min-width:66px;line-height:1.4;letter-spacing:.3px;box-sizing:border-box}
.cust-type-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;display:inline-block}
.customer-link-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#2563eb;text-decoration:none;padding:2px 6px;border-radius:4px;background:#eff6ff}
.customer-link-chip:hover{text-decoration:underline;background:#dbeafe}
.cust-form-section{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.cust-form-section-title{font-size:11.5px;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:space-between}

/* Insights Workspace Styles */
.insights-workspace{flex:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;background:#f8fafc;padding:24px 28px;gap:22px}
.insights-header{display:flex;flex-direction:column;gap:3px}
.insights-title{font-size:18px;font-weight:800;color:#0f172a;margin:0}
.insights-sub{font-size:12px;color:#64748b}
.insights-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.kpi-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px;box-shadow:var(--mac-shadow-card);display:flex;flex-direction:column;gap:6px;transition:transform .12s,box-shadow .12s}
.kpi-card:hover{transform:translateY(-1px);box-shadow:var(--mac-shadow-card-hover)}
.kpi-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b}
.kpi-value{font-size:24px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.kpi-sub{font-size:11px;color:#059669;font-weight:500}
.insights-split{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
@media(max-width:960px){.insights-split{grid-template-columns:1fr}}
.insights-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:20px;box-shadow:var(--mac-shadow-card);display:flex;flex-direction:column;gap:16px;transition:box-shadow .12s}
.insights-card:hover{box-shadow:var(--mac-shadow-card-hover)}
.insights-card-title{font-size:13px;font-weight:700;color:#0f172a;display:flex;align-items:center;justify-content:space-between}
.status-bar-list{display:flex;flex-direction:column;gap:12px}
.status-bar-item{display:flex;flex-direction:column;gap:4px}
.status-bar-labels{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600}
.status-bar-track{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.status-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.top-prod-list{display:flex;flex-direction:column;gap:10px}
.top-prod-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0;font-size:12px}
.top-prod-name{font-weight:600;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.top-prod-badge{font-size:11px;font-weight:700;color:#2563eb;background:#eff6ff;padding:2px 8px;border-radius:10px}

/* CRM Pipeline & Insights Styles */
.crm-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:8px 14px;box-shadow:var(--mac-shadow-card);flex-wrap:wrap}
.crm-filter-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.crm-filter-label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.crm-pill-group{display:inline-flex;background:rgba(142,142,147,0.12);border-radius:7px;padding:2px;gap:2px;border:0.5px solid rgba(0,0,0,0.04)}
.crm-pill-btn{border:0;background:transparent;padding:4px 10px;font-size:11px;font-weight:600;color:#64748b;border-radius:5px;cursor:pointer;transition:all .15s var(--mac-ease-out)}
.crm-pill-btn:hover{color:#0f172a}
.crm-pill-btn.active{background:#fff;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 0.5px rgba(0,0,0,0.04);font-weight:700}
.crm-forecast-badge{font-size:11px;font-weight:700;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;padding:4px 10px;border-radius:6px;display:inline-flex;align-items:center;gap:4px}

/* CRM Follow-up & Expiry Radar */
.crm-radar-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:18px 20px;box-shadow:var(--mac-shadow-card);display:flex;flex-direction:column;gap:14px;transition:box-shadow .12s}
.crm-radar-header{display:flex;align-items:center;justify-content:space-between}
.crm-radar-title{font-size:13px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:8px}
.crm-radar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.crm-alert-item{background:#f8fafc;border:1px solid #e2e8f0;border-left:4px solid #3b82f6;border-radius:0 6px 6px 0;padding:12px 14px;display:flex;flex-direction:column;gap:8px;transition:box-shadow .15s}
.crm-alert-item:hover{box-shadow:0 3px 8px rgba(0,0,0,.05)}
.crm-alert-item.urgent{border-left-color:#ef4444}
.crm-alert-item.warning{border-left-color:#f59e0b}
.crm-alert-item.valuable{border-left-color:#8b5cf6}
.crm-alert-top{display:flex;justify-content:space-between;align-items:center;gap:6px}
.crm-alert-badge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:3px;text-transform:uppercase}
.crm-alert-badge.urgent{background:#fee2e2;color:#b91c1c}
.crm-alert-badge.warning{background:#fef3c7;color:#b45309}
.crm-alert-badge.valuable{background:#ede9fe;color:#6d28d9}
.crm-alert-qnum{font-size:11px;font-weight:700;color:#0f172a}
.crm-alert-cust{font-size:12px;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-alert-meta{display:flex;justify-content:space-between;font-size:11px;color:#64748b}
.crm-alert-actions{display:flex;gap:6px;align-items:center;margin-top:2px}
.crm-btn{padding:4px 8px;font-size:10.5px;font-weight:600;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;border:1px solid #cbd5e1;background:#fff;color:#334155;transition:all .15s}
.crm-btn:hover{background:#f1f5f9;color:#0f172a}
.crm-btn.primary{background:#0f172a;color:#fff;border-color:#0f172a}
.crm-btn.primary:hover{background:#1e293b}
.crm-btn.won{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.crm-btn.won:hover{background:#d1fae5}

/* CRM Visual Sales Pipeline (Kanban Stages) */
.crm-pipeline-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.03);display:flex;flex-direction:column;gap:16px}
.crm-pipeline-header{display:flex;align-items:center;justify-content:space-between}
.crm-pipeline-title{font-size:13px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:8px}
.crm-board{display:grid;grid-template-columns:repeat(5,minmax(210px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px}
.crm-stage-col{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;display:flex;flex-direction:column;min-width:210px;max-height:600px}
.crm-stage-header{padding:10px 12px;border-bottom:1px solid #e2e8f0;display:flex;flex-direction:column;gap:4px}
.crm-stage-title-row{display:flex;justify-content:space-between;align-items:center}
.crm-stage-name{font-size:11.5px;font-weight:700;color:#0f172a;display:flex;align-items:center;gap:5px}
.crm-stage-count{font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;background:#e2e8f0;color:#475569}
.crm-stage-val{font-size:12px;font-weight:800;color:#0f172a}
.crm-stage-cards{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1}
.crm-deal-card{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:pointer;transition:transform .15s,box-shadow .15s}
.crm-deal-card:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08);border-color:#cbd5e1}
.crm-deal-head{display:flex;justify-content:space-between;align-items:center}
.crm-deal-num{font-size:10.5px;font-weight:700;color:#0f172a}
.crm-deal-cust{font-size:11.5px;font-weight:600;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-deal-val{font-size:13px;font-weight:800;color:#0f172a}
.crm-deal-foot{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#64748b}
.crm-deal-actions{display:flex;gap:4px;align-items:center}
.crm-deal-btn{padding:2px 6px;font-size:9.5px;font-weight:600;border:1px solid #cbd5e1;background:#fff;border-radius:3px;cursor:pointer}
.crm-deal-btn:hover{background:#f1f5f9}

/* CRM Client Account Intelligence & Revenue Leaderboard */
.crm-leaderboard-table{width:100%;border-collapse:collapse;font-size:11.5px}
.crm-leaderboard-table th{background:#f8fafc;padding:9px 12px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;border-bottom:1px solid #e2e8f0}
.crm-leaderboard-table td{padding:10px 12px;border-bottom:1px solid #e2e8f0;color:#1e293b;vertical-align:middle}
.crm-leaderboard-table tbody tr:hover{background:#f8fafc}
.crm-client-cell{display:flex;flex-direction:column;gap:2px}
.crm-client-name{font-weight:700;color:#0f172a}
.crm-client-sub{font-size:10px;color:#64748b}
.crm-win-bar{display:flex;align-items:center;gap:6px}
.crm-win-track{width:60px;height:6px;background:#f1f5f9;border-radius:3px;overflow:hidden}
.crm-win-fill{height:100%;border-radius:3px;background:#10b981}

/* CRM Email Generator Modal */
.crm-email-dialog{background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.12);box-shadow:var(--mac-shadow-modal);width:100%;max-width:640px;display:flex;flex-direction:column;overflow:hidden}
.crm-email-body{padding:20px 24px;display:flex;flex-direction:column;gap:12px}
.crm-email-field{display:flex;flex-direction:column;gap:4px}
.crm-email-field label{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase}
.crm-email-input{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:7px 10px;font:inherit;font-size:12px}
.crm-email-textarea{width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:10px;font:inherit;font-size:12px;line-height:1.5;min-height:180px;resize:vertical}

/* Product Modal Form Styles (macOS Native Inspector Design) */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.product-modal-dialog{background:#f8fafc;border-radius:14px;border:0.5px solid rgba(0,0,0,0.14);box-shadow:0 24px 60px -12px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.06);width:100%;max-width:780px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif}

.product-modal-header{padding:14px 20px;background:#ffffff;border-bottom:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.product-modal-header-left{display:flex;align-items:center;gap:12px;min-width:0}
.product-modal-icon-badge{width:36px;height:36px;border-radius:9px;background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;box-shadow:0 1px 2px rgba(37,99,235,0.08)}
.product-modal-title-wrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.product-modal-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.product-modal-title-row h2{margin:0;font-size:15px;font-weight:700;color:#0f172a;letter-spacing:-0.01em}
.product-modal-sku-pill{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;padding:2px 7px;border-radius:5px}
.product-modal-cat-pill{font-size:11px;font-weight:600;color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;padding:2px 7px;border-radius:5px}
.product-modal-subtitle{margin:0;font-size:11px;color:#64748b;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-modal-close-btn{width:28px;height:28px;border-radius:50%;border:none;background:#f1f5f9;color:#64748b;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease}
.product-modal-close-btn:hover{background:#e2e8f0;color:#0f172a}

.product-form-body{padding:12px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;background:#f8fafc}
.product-modal-section{background:#ffffff;border:1px solid #e2e8f0;border-radius:10px;padding:11px 14px;box-shadow:0 1px 2px rgba(0,0,0,0.02);display:flex;flex-direction:column;gap:7px}
.product-modal-sec-header{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#1e293b;padding-bottom:1px}
.product-modal-sec-icon{font-size:13px}
.product-modal-sec-title{font-size:11.5px;font-weight:700;color:#1e293b}
.product-pricing-badge{margin-left:auto;font-size:10px;font-weight:600;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;padding:1px 6px;border-radius:4px}

.product-form-grid{display:grid;gap:8px 12px}
.product-pricing-grid{display:grid;grid-template-columns:1.15fr 0.95fr 1.25fr 0.85fr 0.8fr;gap:8px}
.product-form-group{display:flex;flex-direction:column;gap:3px}
.product-form-group label{font-size:11px;font-weight:600;color:#475569;letter-spacing:0.01em;display:flex;align-items:center;gap:3px;margin:0;text-transform:none}
.product-form-group .req-star{color:#ef4444;font-weight:700}
.product-form-group input, .product-form-group select, .product-form-group textarea{height:32px;padding:6px 9px;font-size:12px;font-family:inherit;border:1px solid #cbd5e1;border-radius:6px;background:#ffffff;color:#0f172a;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.product-form-group select{cursor:pointer}
.product-form-group textarea{height:auto;min-height:64px;line-height:1.45;resize:vertical;padding:8px 10px}
.product-form-group input:focus, .product-form-group select:focus, .product-form-group textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,0.14)}

.product-highlight-field input{font-weight:700;color:#0f172a;border-color:#93c5fd;background:#f8fafd}
.product-highlight-field input:focus{background:#ffffff;border-color:#2563eb}

.product-input-addon-wrap{position:relative;display:flex;align-items:center;width:100%}
.product-input-addon-wrap input{width:100%;padding-left:20px}
.product-input-addon{position:absolute;left:8px;font-size:11.5px;font-weight:600;color:#94a3b8;pointer-events:none}
.product-input-addon.right{left:auto;right:8px}

.product-calc-hint{display:flex;align-items:center;gap:6px;font-size:10.5px;color:#64748b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:5px 9px;margin-top:2px}
.product-hint-icon{font-size:12px}

.product-top-layout{display:flex;gap:14px;align-items:flex-start}
.product-image-col{display:flex;flex-direction:column;align-items:center;gap:6px;width:108px;flex-shrink:0}
.product-image-preview-box{width:108px;height:108px;border-radius:10px;border:1px solid #cbd5e1;background:#ffffff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.05);background-image:linear-gradient(45deg,#f8fafc 25%,transparent 25%),linear-gradient(-45deg,#f8fafc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f8fafc 75%),linear-gradient(-45deg,transparent 75%,#f8fafc 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0}
.product-image-preview-thumb{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.product-image-preview-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#94a3b8;font-size:10px;text-align:center}
.product-empty-icon{font-size:22px}
.product-image-preview-empty.error{color:#ef4444}
.product-image-preview-empty.error .product-empty-icon{font-size:20px}
.product-image-btns{display:flex;gap:4px;width:100%}
.product-btn-sm{flex:1;height:25px;padding:0 3px;border-radius:5px;font-size:10.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid #cbd5e1;background:#ffffff;color:#334155;transition:all .15s ease;white-space:nowrap}
.product-btn-sm:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a}
.product-meta-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}

.product-url-input-wrap{position:relative;display:flex;align-items:center;width:100%}
.product-url-input-wrap input{width:100%;padding-right:26px}
.product-url-clear-btn{position:absolute;right:6px;width:18px;height:18px;border-radius:50%;border:none;background:#e2e8f0;color:#64748b;font-size:12px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .1s,color .1s}
.product-url-clear-btn:hover{background:#cbd5e1;color:#0f172a}

.product-modal-footer{padding:12px 20px;background:#ffffff;border-top:1px solid rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.product-modal-footer-hint{font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:4px}
.product-modal-footer-hint kbd{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:4px;padding:1px 5px;font-size:10px;font-family:inherit;font-weight:600;color:#475569}
.product-modal-footer-actions{display:flex;align-items:center;gap:8px}
.customer-modal-dialog{background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.12);box-shadow:var(--mac-shadow-modal);width:100%;max-width:720px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.gst-lookup-dialog{background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.12);box-shadow:var(--mac-shadow-modal);width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.gst-lookup-tabs{display:flex;gap:4px;padding:8px 22px;background:#f8fafc;border-bottom:1px solid var(--line)}
.gst-tab-btn{padding:7px 14px;border:0;background:transparent;border-radius:6px;font:600 12px inherit;color:#64748b;cursor:pointer;transition:all .15s ease}
.gst-tab-btn:hover{color:#0f172a;background:rgba(0,0,0,0.04)}
.gst-tab-btn.active{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,0.08);font-weight:700}
.gst-lookup-body{padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0}
.gst-info-banner{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px 14px}
.btn-gst-search{display:inline-flex;align-items:center;gap:5px;font:600 11.5px inherit;padding:3px 9px;border-radius:5px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.btn-gst-search:hover{background:#dbeafe;border-color:#93c5fd;color:#1e40af;box-shadow:0 1px 3px rgba(37,99,235,.15)}
.gst-verified-badge{display:inline-flex;align-items:center;gap:4px;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700}
/* Customer MKB ERP Export Multi-Select Modal */
.customer-export-mkb-dialog{background:#fff;border-radius:12px;border:0.5px solid rgba(0,0,0,0.12);box-shadow:var(--mac-shadow-modal);width:100%;max-width:860px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.mkb-export-header{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#f8fafc}
.mkb-export-header-title{display:flex;align-items:center;gap:10px}
.mkb-export-header h2{font-size:16px;font-weight:800;color:#0f172a;margin:0}
.mkb-export-header p{font-size:11.5px;color:#64748b;margin:2px 0 0 0}
.mkb-export-body{padding:18px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.mkb-export-toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkb-export-search-box{position:relative;flex:1;min-width:240px}
.mkb-export-search-input{width:100%;height:32px;padding:0 28px 0 32px;font:500 12px inherit;border:1px solid rgba(0,0,0,0.12);border-radius:6px;background:#f8fafd;color:#0f172a;outline:none;box-sizing:border-box}
.mkb-export-search-input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,122,255,0.2)}
.mkb-export-ctrl-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;font-size:12px}
.mkb-export-badge{font-size:12px;color:#334155;font-weight:500}
.mkb-export-badge strong{color:#0f172a;font-weight:700}
.mkb-export-table-wrap{border:1px solid #e2e8f0;border-radius:8px;overflow:auto;max-height:48vh;background:#fff}
.mkb-export-table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}
.mkb-export-table thead{background:#f8fafc;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:2}
.mkb-export-table th{padding:9px 12px;font-size:10px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap}
.mkb-export-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#334155}
.mkb-export-table tr{transition:background 0.1s ease;cursor:pointer}
.mkb-export-table tr:hover{background:#f8fafd}
.mkb-export-table tr.selected{background:#f0f7ff}
.mkb-export-table tr.selected:hover{background:#e3effd}
.mkb-export-check{cursor:pointer;width:16px;height:16px;accent-color:#0f172a}
.modal-header{padding:18px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-header h2{font-size:16px;font-weight:800;color:#0f172a;margin:0}
.modal-close-btn{border:0;background:none;font-size:20px;color:#94a3b8;cursor:pointer;line-height:1;padding:4px}
.modal-close-btn:hover{color:#0f172a}
.modal-footer{padding:14px 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:10px;background:#f8fafc}
.modal-footer button,
.modal-footer .catalog-btn,
.modal-footer .btn-lead-action {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: fit-content !important;
}

/* Product Catalog Import from Quotes Modal Styles */
.cat-import-stat-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px}
.cat-import-stat-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;text-align:center}
.cat-import-stat-card.highlight{background:#ecfdf5;border-color:#a7f3d0}
.cat-import-stat-label{font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em}
.cat-import-stat-card.highlight .cat-import-stat-label{color:#047857}
.cat-import-stat-val{font-size:18px;font-weight:800;color:#0f172a;margin-top:2px}
.cat-import-stat-card.highlight .cat-import-stat-val{color:#065f46}
.cat-import-options{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.cat-import-opt-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#1e293b;cursor:pointer}
.cat-import-opt-row input[type="checkbox"]{cursor:pointer;accent-color:#0f172a}
.cat-import-preview-table-wrap{border:1px solid #e2e8f0;border-radius:8px;max-height:210px;overflow-y:auto;background:#fff}
.cat-import-preview-table{width:100%;border-collapse:collapse;font-size:11px}
.cat-import-preview-table th{background:#f8fafc;border-bottom:1px solid #e2e8f0;color:#64748b;text-align:left;padding:6px 10px;font-weight:600}
.cat-import-preview-table td{padding:6px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}

/* Document Type and Proforma Invoice Styles */
.doc-type-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;text-transform:uppercase;letter-spacing:.04em}
.doc-type-badge.pi{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe}
.doc-type-badge.quote{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.doc-type-selector{display:inline-flex;background:rgba(142,142,147,0.12);border:0.5px solid rgba(0,0,0,0.04);border-radius:7px;padding:2px;gap:2px}
.doc-type-opt{padding:5px 12px;font:600 11.5px inherit;border:0;background:transparent;color:#64748b;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s var(--mac-ease-out)}
.doc-type-opt:hover{color:#0f172a}
.doc-type-opt.active{background:#fff;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.1),0 0 0 0.5px rgba(0,0,0,0.04);font-weight:700}
.convert-doc-btn{padding:5px 11px;font:600 11px inherit;border:1px dashed #7c3aed;background:#f5f3ff;color:#7c3aed;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.convert-doc-btn:hover{background:#ede9fe;border-color:#6d28d9}
.convert-doc-btn.to-quote{border-color:#3b82f6;background:#eff6ff;color:#1d4ed8}
.convert-doc-btn.to-quote:hover{background:#dbeafe;border-color:#2563eb}
.cat-convert-btn{font:600 11px inherit;height:26px;padding:0 8px;border-radius:5px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease;border:1px solid #ddd6fe;background:#f5f3ff;color:#7c3aed;white-space:nowrap}
.cat-convert-btn:hover{background:#ede9fe;border-color:#8b5cf6;color:#6d28d9;box-shadow:0 1px 3px rgba(124,58,237,.15)}
.cat-convert-btn.to-quote{border-color:#bfdbfe;background:#eff6ff;color:#1d4ed8}
.cat-convert-btn.to-quote:hover{background:#dbeafe;border-color:#3b82f6;color:#1e40af;box-shadow:0 1px 3px rgba(29,78,216,.15)}
.doc-ref-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#7c3aed;background:#f5f3ff;border:1px solid #ede9fe;padding:1px 5px;border-radius:4px;margin-top:2px;cursor:pointer;text-decoration:none}
.doc-ref-badge:hover{background:#ede9fe;border-color:#ddd6fe}
.doc-converted-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:#047857;background:#ecfdf5;border:1px solid #d1fae5;padding:1px 5px;border-radius:4px;margin-top:2px;cursor:pointer;text-decoration:none}
.doc-converted-badge:hover{background:#d1fae5;border-color:#a7f3d0}
.linked-doc-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-radius:8px;border:1px solid #ddd6fe;border-left:4px solid #7c3aed;background:linear-gradient(135deg,#faf7ff 0%,#f5f0ff 100%);margin:10px 0 14px 0;box-shadow:0 1px 3px rgba(124,58,237,.06);font-size:12px;color:#5b21b6}
.linked-doc-banner.converted{background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border-color:#bbf7d0;border-left-color:#059669;color:#065f46;box-shadow:0 1px 3px rgba(5,150,105,.06)}
.linked-doc-banner .linked-doc-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;flex-wrap:wrap}
.linked-doc-banner .linked-doc-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;background:rgba(124,58,237,.12);font-size:13px;flex-shrink:0}
.linked-doc-banner.converted .linked-doc-icon{background:rgba(5,150,105,.12)}
.linked-doc-banner .linked-doc-text{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:500;line-height:1.4}
.linked-doc-banner .linked-doc-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:11.5px;font-weight:700;color:#6d28d9;background:#fff;padding:2px 8px;border-radius:5px;border:1px solid #ddd6fe;white-space:nowrap !important;display:inline-block;letter-spacing:.2px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.linked-doc-banner.converted .linked-doc-code{color:#047857;border-color:#bbf7d0}
.linked-doc-banner .link-btn,
.linked-doc-banner .linked-doc-btn{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;background:#7c3aed;color:#fff !important;border:1px solid #6d28d9;border-radius:6px;font-size:11.5px;font-weight:600;white-space:nowrap !important;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px rgba(109,40,217,.2);transition:all .15s ease}
.linked-doc-banner .link-btn:hover,
.linked-doc-banner .linked-doc-btn:hover{background:#6d28d9;border-color:#5b21b6;transform:translateY(-1px);box-shadow:0 2px 4px rgba(109,40,217,.28)}
.linked-doc-banner .link-btn:hover .btn-arrow,
.linked-doc-banner .linked-doc-btn:hover .btn-arrow{transform:translateX(2px)}
.linked-doc-banner .link-btn .btn-arrow,
.linked-doc-banner .linked-doc-btn .btn-arrow{display:inline-block;transition:transform .15s ease;font-size:11px}
.linked-doc-banner.converted .link-btn,
.linked-doc-banner.converted .linked-doc-btn{background:#059669;border-color:#047857;box-shadow:0 1px 2px rgba(5,150,105,.2)}
.linked-doc-banner.converted .link-btn:hover,
.linked-doc-banner.converted .linked-doc-btn:hover{background:#047857;border-color:#065f46;box-shadow:0 2px 4px rgba(5,150,105,.28)}
.qm-btn.qm-convert{background:#f5f3ff;color:#7c3aed;border-color:#ddd6fe}
.qm-btn.qm-convert:hover{background:#ede9fe;border-color:#8b5cf6}
.qm-btn.qm-convert.to-quote{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.qm-btn.qm-convert.to-quote:hover{background:#dbeafe;border-color:#3b82f6}
.qm-doc-type-filters{display:flex;gap:6px;margin-bottom:8px}
.qm-doc-type-btn{padding:4px 10px;font:600 11px inherit;border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;border-radius:12px;cursor:pointer;transition:all .15s}
.qm-doc-type-btn:hover{color:#0f172a;border-color:#cbd5e1}
.qm-doc-type-btn.active{background:#0f172a;color:#fff;border-color:#0f172a}

/* Interactive PDF Export Notification */
.pdf-export-toast{position:fixed;bottom:24px;right:24px;background:#0f172a;color:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25),0 1px 3px rgba(0,0,0,.1);padding:12px 16px;display:flex;align-items:center;gap:16px;z-index:10000;font-family:inherit;font-size:12px;animation:slideInPdfToast .25s ease-out;transition:opacity .35s ease,transform .35s ease;max-width:480px}
.pdf-export-toast.fading{opacity:0;transform:translateY(10px)}
@keyframes slideInPdfToast{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.pdf-export-toast-body{display:flex;align-items:center;gap:10px;min-width:0}
.pdf-toast-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#10b981;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.pdf-toast-text{display:flex;flex-direction:column;min-width:0}
.pdf-toast-text strong{font-size:12px;font-weight:600;color:#f8fafc}
.pdf-toast-filename{font-size:11px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.pdf-toast-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pdf-toast-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:5px 9px;font-size:11px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s}
.pdf-toast-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.3)}
.pdf-toast-btn.primary{background:#2563eb;border-color:#3b82f6}
.pdf-toast-btn.primary:hover{background:#1d4ed8}
.pdf-toast-close{background:none;border:none;color:#94a3b8;font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.pdf-toast-close:hover{color:#fff}

/* Company Brand Logo Management */
.company-logo-uploader{display:flex;align-items:center;gap:14px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:12px}
.company-logo-preview-box{width:110px;height:50px;background:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden;flex-shrink:0}
.settings-logo-img{max-width:100%;max-height:100%;object-fit:contain}
.settings-logo-default{font:600 17px "Roboto",sans-serif;letter-spacing:-1px;color:#b9b7a9;line-height:.78;text-align:center}
.settings-logo-default small{font:600 5.5px "Roboto";letter-spacing:2px;display:block;margin-left:14px;color:#b9b7a9}
.company-logo-details{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.company-logo-title{font-size:11.5px;font-weight:700;color:#0f172a}
.company-logo-sub{font-size:10.5px;color:#64748b;line-height:1.35}
.company-logo-btns{display:flex;align-items:center;gap:8px;margin-top:4px}
.btn-file-upload{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;font-size:11px;font-weight:600;background:#0f172a;color:#fff;border-radius:5px;cursor:pointer;transition:background .15s}
.btn-file-upload:hover{background:#1e293b}
.btn-remove-logo{background:none;border:none;color:#ef4444;font-size:11px;font-weight:600;cursor:pointer;padding:3px 6px;border-radius:4px}
.btn-remove-logo:hover{background:#fef2f2;text-decoration:underline}

/* Document Running Footer & Multi-page Styles */
.doc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:10px;border-top:1px solid #e2e8f0;font-size:9.5px;color:#94a3b8;break-inside:avoid;page-break-inside:avoid}
.doc-footer-info{font-weight:500;color:#64748b}
.doc-footer-meta{font-weight:600;color:#94a3b8}
.page-break{page-break-before:always!important;break-before:page!important}
.page-break-avoid{break-inside:avoid!important;page-break-inside:avoid!important}

/* Kitchen Area / Section Table & Editor Styles */
.table-area-header-row{background:#eef2f6!important;break-inside:avoid!important;page-break-inside:avoid!important;break-after:avoid!important;page-break-after:avoid!important}
.table-area-header-cell{padding:7px 10px!important;text-align:center!important;font-weight:700!important;font-size:11px!important;letter-spacing:0.04em!important;text-transform:uppercase!important;color:#0f172a!important;border-top:1px solid #cbd5e1!important;border-bottom:1px solid #cbd5e1!important}
.table-area-subtotal-row{background:#f8fafc!important;font-size:10px!important;font-weight:600!important;color:#334155!important;border-bottom:1px dashed #cbd5e1!important;break-inside:avoid!important}
.table-area-subtotal-label{text-align:right!important;padding:4px 8px!important;font-style:italic!important}
.table-area-subtotal-val{padding:4px 8px!important}
.item-area-badge{display:inline-flex;align-items:center;background:#e0f2fe;color:#0369a1;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:4px;border:1px solid #bae6fd;margin-right:2px}
.quick-area-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.quick-area-tags{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed #e2e8f0}
.quick-area-scroll{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex:1}
.quick-area-scroll::-webkit-scrollbar{display:none}
.quick-area-pill{background:#f1f5f9;border:1px solid #cbd5e1;color:#475569;font-size:10px;font-weight:600;padding:3px 9px;border-radius:12px;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.quick-area-pill:hover{background:#e2e8f0;color:#0f172a}
.quick-area-pill.active{background:#0f172a;color:#fff;border-color:#0f172a}

.btn-find-image{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 10px;font-size:11px;font-weight:600;color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.btn-find-image:hover{background:#dbeafe;border-color:#93c5fd;color:#1e40af}

/* Automated Product Image Finder & Picker */
.item-image-box{display:flex;flex-direction:column;gap:8px}
.item-image-field-row{display:flex;gap:8px;align-items:flex-end;width:100%}
.item-image-preview-wrap{position:relative;width:44px;height:44px;border-radius:6px;border:1px solid #cbd5e1;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.item-image-preview-wrap.empty-thumb{border:1px dashed #cbd5e1}
.item-image-preview-thumb{width:100%;height:100%;object-fit:contain}
.item-image-clear-btn{position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;background:#ef4444;color:#fff;border:none;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:background .15s}
.item-image-clear-btn:hover{background:#dc2626}

.btn-auto-image{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 8px;font-size:11px;font-weight:600;color:#fff;background:#0f172a;border:1px solid #0f172a;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.btn-auto-image:hover{background:#1e293b;border-color:#1e293b}
.btn-auto-image:disabled{opacity:.6;cursor:not-allowed}

.btn-pick-image{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:32px;padding:0 8px;font-size:11px;font-weight:600;color:#334155;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.btn-pick-image:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8}

.item-image-actions{display:grid;grid-template-columns:repeat(4, 1fr);gap:6px;align-items:center;width:100%}
.item-image-actions .btn-auto-image,
.item-image-actions .btn-pick-image,
.item-image-actions .upload-btn,
.item-image-actions .btn-find-image{width:100%;min-width:0;height:32px;padding:0 6px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;gap:4px}
.item-image-actions .upload-btn{margin:0;color:#334155;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;cursor:pointer;transition:all .15s ease}
.item-image-actions .upload-btn:hover{background:#f1f5f9;color:#0f172a;border-color:#94a3b8}

@media (max-width: 440px){
  .item-image-actions{grid-template-columns:repeat(2, 1fr)}
}
.item-image-dims-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;padding-top:8px;border-top:1px dashed #e2e8f0}

.btn-auto-all-images{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;font-size:11px;font-weight:600;color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;cursor:pointer;transition:all .15s ease;white-space:nowrap}
.btn-auto-all-images:hover{background:#dbeafe;border-color:#93c5fd}
.btn-auto-all-images.has-missing{background:#f0fdf4;color:#15803d;border-color:#86efac}
.btn-auto-all-images.has-missing:hover{background:#dcfce7;border-color:#4ade80}
.btn-auto-all-images .badge-count{background:#15803d;color:#fff;font-size:9.5px;padding:1px 5px;border-radius:10px;font-weight:700}
.btn-auto-all-images:disabled{opacity:.6;cursor:wait}

/* Organized Item Card Panels & Financials */
[hidden]{display:none!important}
.item-details[hidden]{display:none!important}
.item-editor.is-collapsed .item-details{display:none!important}
.item-details{padding:12px;border-top:1px solid #edf0f3;background:#fafbfc;display:flex;flex-direction:column;gap:10px}
.item-summary-chevron{color:var(--muted);font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;transition:all .15s ease}
.item-summary:hover .item-summary-chevron{color:var(--ink);background:#f1f5f9}
.item-panel{background:#fff;border:1px solid #e2e8f0;border-radius:7px;padding:11px 12px}
.item-panel-title{font-size:9.5px;font-weight:700;letter-spacing:.07em;color:#64748b;margin-bottom:8px;text-transform:uppercase;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f1f5f9;padding-bottom:5px}
.item-panel-financials{background:#fff;border:1px solid #cbd5e1;border-left:3px solid #0f172a}
.item-panel-media{background:#fff;border:1px solid #e2e8f0}
.field.single-col{width:100%}
.field.single-col label{margin-bottom:4px}
.item-subtotal-field{display:flex;flex-direction:column;justify-content:flex-end}
.item-subtotal-val{min-height:34px;padding:6px 10px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:5px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#0f172a;flex-wrap:wrap;gap:4px}
.item-subtotal-val strong{font-size:12.5px;color:#0f172a;font-weight:700}
.subtotal-breakdown{font-size:10px;color:#64748b}
.item-actions{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid #e2e8f0}
.item-actions-move,.item-actions-manage{display:flex;gap:6px}
.items-bottom-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.items-section-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.items-title-wrap{display:flex;align-items:center;gap:8px}
.items-count-pill{font-size:10px;font-weight:700;color:#475569;background:#f1f5f9;padding:2px 7px;border-radius:10px;border:1px solid #e2e8f0}
.items-tools-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.toolbar-sep{color:#cbd5e1;font-size:10px}

/* Quick Line Items Search Bar */
.items-search-btn{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--blue);cursor:pointer;transition:all .15s ease;padding:2px 7px;border-radius:5px}
.items-search-btn:hover{background:#f1f5f9;color:#0f172a}
.items-search-btn.active{color:#2563eb!important;font-weight:700;background:rgba(37,99,235,.1)}
.items-search-bar-row{position:sticky;top:0;z-index:10;background:#ffffff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:12px 0 10px 0;margin:0 0 10px 0;width:100%;border-bottom:1px solid rgba(226,232,240,0.9);box-shadow:0 4px 14px -3px rgba(15,23,42,.06);animation:slideDownItemSearch .18s cubic-bezier(.16,1,.3,1)}
@keyframes slideDownItemSearch{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.items-search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:5px 12px;box-shadow:0 1px 3px rgba(15,23,42,.04),inset 0 1px 1px rgba(0,0,0,.02);transition:all .2s ease}
.items-search-box:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12),0 2px 6px rgba(15,23,42,.06)}
.items-search-icon{font-size:13px;color:#64748b;flex-shrink:0;user-select:none}
.items-search-input{flex:1;border:none!important;outline:none!important;background:transparent!important;font-size:12.5px!important;font-weight:500!important;color:#0f172a!important;padding:3px 0!important;box-shadow:none!important;min-width:0}
.items-search-input::placeholder{color:#94a3b8;font-weight:400}
.items-search-badge{font-size:10px;font-weight:700;color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;padding:1px 7px;border-radius:10px;white-space:nowrap;flex-shrink:0}
.items-search-badge.zero{color:#dc2626;background:#fef2f2;border-color:#fecaca}
.items-search-clear-btn{background:#f1f5f9;border:none;color:#64748b;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;padding:0;flex-shrink:0;transition:all .15s ease}
.items-search-clear-btn:hover{background:#e2e8f0;color:#0f172a}
.item-search-empty-notice{padding:14px 18px;text-align:center;font-size:12px;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:8px;margin-bottom:12px}
.item-search-empty-notice span{display:block;margin-bottom:4px}

/* Image Picker Modal */
.image-picker-panel{max-width:820px!important;max-height:88vh!important}
.image-picker-search-bar{padding:12px 18px;border-bottom:1px solid var(--line);background:#f8fafc;display:flex;gap:8px;align-items:center}
.image-picker-search-input{flex:1;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:12.5px;outline:none;background:#fff;transition:border-color .15s}
.image-picker-search-input:focus{border-color:#0f172a}
.image-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px;padding:4px}
.image-picker-card{border:1px solid #e2e8f0;border-radius:8px;background:#fff;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:all .15s ease;position:relative}
.image-picker-card:hover{border-color:#0f172a;box-shadow:0 6px 16px rgba(15,23,42,.12);transform:translateY(-2px)}
.image-picker-card.is-catalog{border-color:#3b82f6;background:#f8faff}
.image-picker-thumb-wrap{height:125px;background:#f8fafc;display:flex;align-items:center;justify-content:center;padding:8px;position:relative;border-bottom:1px solid #f1f5f9}
.image-picker-thumb-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.image-picker-source-badge{position:absolute;bottom:4px;right:4px;background:rgba(15,23,42,.75);color:#fff;font-size:8.5px;padding:2px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;font-weight:600}
.image-picker-source-badge.catalog-badge{background:#2563eb}
.image-picker-card-info{padding:8px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.image-picker-card-title{font-size:10.5px;font-weight:600;color:#1e293b;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.image-picker-card-dim{font-size:9.5px;color:#64748b;font-family:monospace}
.btn-select-card{margin:0 8px 8px;padding:6px 0;background:#0f172a;color:#fff;border:none;border-radius:4px;font-size:10.5px;font-weight:600;cursor:pointer;transition:background .15s;text-align:center}
.btn-select-card:hover{background:#1e293b}
.image-picker-loading{padding:40px 20px;text-align:center;color:#64748b;font-size:13px}
.image-picker-empty{padding:40px 20px;text-align:center;color:#64748b;font-size:13px}
/* Item & Description Alignment */
.align-pill-group{display:inline-flex;align-items:center;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:2px;gap:2px}
.align-group-label{font-size:10px;font-weight:600;color:var(--muted);padding:0 3px}
.align-pill-btn{border:0;background:transparent;padding:2px 7px;font-size:10px;font-weight:600;color:#475569;border-radius:4px;cursor:pointer;transition:all .15s}
.align-pill-btn:hover{color:#0f172a;background:#e2e8f0}
.align-pill-btn.active{background:#0f172a;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1)}

.item-cell.align-center,.item-desc-cell.align-center{text-align:center!important}
.item-cell.align-right,.item-desc-cell.align-right{text-align:right!important;padding-right:12px!important}
.item-cell.align-left,.item-desc-cell.align-left{text-align:left!important}
.quote-table th.align-center{text-align:center!important}
.quote-table th.align-right{text-align:right!important;padding-right:12px!important}
.quote-table th.align-left{text-align:left!important;padding-left:16px!important}
.quote-table td.item-desc-cell.align-left,.quote-table td.item-cell.align-left{padding-left:16px!important}


/* Undo button inside destructive-action toasts */
.toast-notification {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast-notification .toast-text {
  flex: 1;
}
.toast-notification .toast-undo-btn {
  background: #fff;
  color: #0f172a;
  border: none;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.toast-notification .toast-undo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}

/* Customer Quote History Modal Styles */
.customer-history-dialog {
  background: #fff;
  border-radius: 12px;
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--mac-shadow-modal);
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.customer-history-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff;
}
.customer-history-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
}
.cust-kpi-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: var(--mac-shadow-card);
  transition: transform .12s, box-shadow .12s;
}
.cust-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--mac-shadow-card-hover);
}
.cust-kpi-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cust-kpi-val {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.cust-kpi-sub {
  font-size: 10.5px;
  color: #94a3b8;
}
.customer-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  flex-wrap: wrap;
}
.cust-hist-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.cust-hist-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  opacity: 0.6;
}
.cust-hist-search-input {
  width: 100%;
  padding: 6px 10px 6px 30px;
  font: inherit;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: all 0.15s;
}
.cust-hist-search-input:focus {
  background: #fff;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.cust-hist-select {
  padding: 6px 10px;
  font: 500 11.5px inherit;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  outline: none;
}
.cust-hist-select:focus {
  border-color: #2563eb;
}
.customer-history-table-wrap {
  flex: 1;
  overflow-y: auto;
  min-height: 200px;
}
.cust-history-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}
.cust-quarter-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 5px;
  width: fit-content;
}
.cust-name-link:hover {
  color: #2563eb !important;
  text-decoration: underline;
}
.cust-pipeline-clickable:hover .cust-history-link-pill {
  text-decoration: underline;
  color: #1d4ed8 !important;
}
.customer-history-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}
.cust-history-btn {
  background: #eff6ff !important;
  color: #2563eb !important;
  border-color: #bfdbfe !important;
}
.cust-history-btn:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
}

/* ==========================================================================
   CRM Customer Subtotals Section (Without GST Multi-Select Filter & Projections)
   ========================================================================== */
.crm-customer-subtotals-card {
  margin-top: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.crm-cust-subtotals-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
}

.crm-cust-subtotals-titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.crm-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-header-icon {
  font-size: 18px;
  line-height: 1;
}

.crm-section-main-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.crm-subtotal-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.crm-section-subtitle {
  margin: 0;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}

.crm-cust-summary-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 11.5px;
}

.crm-stat-chip-icon {
  font-size: 13px;
  line-height: 1;
}

.crm-stat-chip-num {
  font-weight: 800;
  color: #0f172a;
}

.crm-stat-chip-lbl {
  color: #64748b;
  font-weight: 500;
  font-size: 11px;
}

.crm-stat-chip.hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1.5px solid #86efac;
  border-radius: 8px;
  padding: 5px 12px;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.08);
}

.crm-stat-hero-body {
  display: flex;
  flex-direction: column;
}

.crm-stat-hero-lbl {
  font-size: 9px;
  font-weight: 700;
  color: #059669;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
}

.crm-stat-hero-num {
  font-size: 14px;
  font-weight: 900;
  color: #047857;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.crm-cust-filter-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 0 6px 0;
}

.crm-status-filter-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crm-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 800;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.crm-filter-icon {
  color: #f59e0b;
}

.crm-status-multiselect-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.crm-status-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 9999px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  user-select: none;
}

.crm-status-pill-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.crm-pill-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: transparent;
  font-size: 9.5px;
  font-weight: 900;
  line-height: 1;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

/* Status-specific Active States with Crisp Colored Box & White Checkmark */
.crm-status-pill-btn.active.draft {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #1e293b;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(100, 116, 139, 0.15);
}
.crm-status-pill-btn.active.draft .crm-pill-checkbox {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

.crm-status-pill-btn.active.sent {
  background: #eff6ff;
  border-color: #60a5fa;
  color: #1e40af;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.15);
}
.crm-status-pill-btn.active.sent .crm-pill-checkbox {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.crm-status-pill-btn.active.approved {
  background: #ecfdf5;
  border-color: #34d399;
  color: #065f46;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(5, 150, 105, 0.15);
}
.crm-status-pill-btn.active.approved .crm-pill-checkbox {
  background: #059669 !important;
  border-color: #059669 !important;
  color: #ffffff !important;
}

.crm-status-pill-btn.active.rejected {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.crm-status-pill-btn.active.rejected .crm-pill-checkbox {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
}

.crm-status-pill-btn.active.expired {
  background: #fffbeb;
  border-color: #fbbf24;
  color: #92400e;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(217, 119, 6, 0.15);
}
.crm-status-pill-btn.active.expired .crm-pill-checkbox {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #ffffff !important;
}

.crm-status-batch-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.crm-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.crm-batch-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

.crm-cust-search-wrapper {
  position: relative;
  min-width: 240px;
}

.crm-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
  opacity: 0.5;
}

.crm-cust-search-box {
  width: 100%;
  padding: 6px 14px 6px 32px;
  border: 1.5px solid #cbd5e1;
  border-radius: 9999px;
  font-size: 11.5px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
}

.crm-cust-search-box:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.crm-cust-empty {
  padding: 36px 16px;
  text-align: center;
  background: #f8fafc;
  border-radius: 10px;
  border: 1.5px dashed #cbd5e1;
  margin-top: 14px;
}

.crm-cust-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  font-size: 11.5px;
  margin-top: 12px;
}

.crm-cust-table th {
  background: #f8fafc;
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.crm-cust-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.crm-cust-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.crm-cust-table tbody tr:hover {
  background: #f1f5f9;
}

.crm-cust-table-summary-row td {
  border-top: 2px solid #cbd5e1;
  border-bottom: none;
  background: #f8fafc;
  padding: 12px 14px;
}

.crm-cust-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.crm-cust-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.crm-cust-title {
  font-weight: 700;
  color: #0f172a;
  font-size: 12px;
}

.crm-cust-date-sub {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
}

.crm-quote-count-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
}

.crm-status-badges-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.crm-status-tag-chip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.crm-status-tag-chip.crm-status-draft {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}

.crm-status-tag-chip.crm-status-sent {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}

.crm-status-tag-chip.crm-status-approved {
  background: #ecfdf5;
  color: #065f46;
  border-color: #a7f3d0;
}

.crm-status-tag-chip.crm-status-rejected {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.crm-status-tag-chip.crm-status-expired {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

.crm-subtotal-val {
  font-size: 12.5px;
  font-weight: 800;
  color: #059669;
}

.crm-subtotal-taxable-lbl {
  font-size: 9px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 1px;
}

.crm-subtotal-with-gst {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

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

.crm-cust-action-btn {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.crm-cust-action-btn.history {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.crm-cust-action-btn.history:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

.crm-cust-action-btn.quote {
  background: #0f172a;
  border: 1px solid #0f172a;
  color: #ffffff;
}

.crm-cust-action-btn.quote:hover {
  background: #1e293b;
  border-color: #1e293b;
}

/* ==========================================================================
   Line Item Drag & Drop Reordering Affordance & States
   ========================================================================== */
.item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Collapsed items: fully interactive drag handle */
.item-editor.is-collapsed .item-drag-handle {
  cursor: grab;
  cursor: -webkit-grab;
  opacity: 1;
}

.item-editor.is-collapsed .item-drag-handle:hover {
  color: #1e293b;
  background-color: #f1f5f9;
}

.item-editor.is-collapsed .item-drag-handle:active,
.item-editor.is-dragging .item-drag-handle {
  cursor: grabbing;
  cursor: -webkit-grabbing;
  color: #2563eb;
}

/* Expanded items: disabled drag handle (edit mode) */
.item-editor:not(.is-collapsed) .item-drag-handle {
  cursor: not-allowed;
  opacity: 0.28;
  color: #94a3b8;
}

.item-editor:not(.is-collapsed) .item-drag-handle:hover {
  background-color: transparent;
  color: #94a3b8;
}

.item-editor[draggable="true"] {
  cursor: default;
}

.item-editor[draggable="false"] {
  cursor: default;
}

.item-editor.is-dragging {
  opacity: 0.45 !important;
  border: 2px dashed #2563eb !important;
  background-color: #f8faff !important;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.15) !important;
  transform: scale(0.995);
}

.item-editor.drag-over-top {
  position: relative;
}

.item-editor.drag-over-top::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #2563eb;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
  z-index: 20;
}

.item-editor.drag-over-bottom {
  position: relative;
}

.item-editor.drag-over-bottom::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: #2563eb;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
  z-index: 20;
}

/* ==========================================================================
   Liquid Glass Toolbar & Scroll Icon Transformation
   ========================================================================== */
.preview-toolbar {
  height: 64px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 30;
  /* Ultra-refined Liquid Glass Aesthetics */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 100%) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06), 
              0 1px 3px rgba(15, 23, 42, 0.04), 
              inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  transition: height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.toolbar-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  transition: gap 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glass Buttons Base */
.toolbar-actions > button,
.toolbar-actions > .btn-dropdown-group > .btn-glass {
  font: 600 12px inherit;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

/* Glass Secondary Action */
.toolbar-actions .secondary {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.85) !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 
              inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.toolbar-actions .secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 
              inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  transform: translateY(-0.5px);
}

.toolbar-actions .secondary:active {
  background: rgba(241, 245, 249, 0.92) !important;
  transform: translateY(0.5px) scale(0.98);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}

/* Glass Primary Action */
.toolbar-actions .primary {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.22), 
              inset 0 1px 0.5px rgba(255, 255, 255, 0.3) !important;
}

.toolbar-actions .primary:hover {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3), 
              inset 0 1px 0.5px rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-0.5px);
}

.toolbar-actions .primary:active {
  transform: translateY(0.5px) scale(0.98);
}

/* Icon and Text Elements */
.toolbar-actions .btn-icon {
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: font-size 0.2s ease, transform 0.2s ease;
}

.toolbar-actions .btn-text {
  display: inline-block;
  line-height: 1.2;
  white-space: nowrap;
  transition: opacity 0.2s ease, max-width 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
  max-width: 160px;
  opacity: 1;
}

.toolbar-actions .kbd-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #64748b;
  margin-left: 2px;
  transition: opacity 0.2s ease, max-width 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 50px;
  opacity: 1;
}

.toolbar-actions .primary .kbd-pill {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   Scrolled Down Transformation (Buttons Turn into Liquid Glass Icons)
   -------------------------------------------------------------------------- */
.preview-toolbar.is-scrolled {
  height: 48px !important;
  padding: 0 20px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.72) 100%) !important;
  backdrop-filter: blur(32px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(220%) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
  box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.10), 
              0 2px 6px rgba(15, 23, 42, 0.04), 
              inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

.preview-toolbar.is-scrolled .toolbar-brand-group .eyebrow {
  display: none !important;
}

.preview-toolbar.is-scrolled #saveState {
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  background: rgba(241, 245, 249, 0.85);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(203, 213, 225, 0.7);
}

.preview-toolbar.is-scrolled .toolbar-actions {
  gap: 6px;
}

.preview-toolbar.is-scrolled .toolbar-actions > button,
.preview-toolbar.is-scrolled .toolbar-actions > .btn-dropdown-group > .btn-dropdown-toggle {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 9px !important;
}

.preview-toolbar.is-scrolled .toolbar-actions > button .btn-text,
.preview-toolbar.is-scrolled .toolbar-actions > button .kbd-pill,
.preview-toolbar.is-scrolled .toolbar-actions > .btn-dropdown-group > .btn-dropdown-toggle .btn-text,
.preview-toolbar.is-scrolled .toolbar-actions > .btn-dropdown-group > .btn-dropdown-toggle .kbd-pill {
  opacity: 0 !important;
  max-width: 0 !important;
  display: none !important;
}

.preview-toolbar.is-scrolled .toolbar-actions > button .btn-icon,
.preview-toolbar.is-scrolled .toolbar-actions > .btn-dropdown-group > .btn-dropdown-toggle .btn-icon {
  font-size: 15px !important;
  margin: 0 !important;
  transform: scale(1.05);
}

/* ==========================================================================
   Custom Terms Library & Terms Picker Styles (ADR-040)
   ========================================================================== */

.terms-field-container {
  margin-top: 12px;
}

.terms-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.terms-tools-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.terms-picker-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.quick-terms-select {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 24px 5px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc url('data:image/svg+xml;utf8,<svg fill="%23475569" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 6px center;
  -webkit-appearance: none;
  appearance: none;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 250px;
}

.quick-terms-select:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
}

.quick-terms-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.btn-terms-action {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-terms-action:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-terms-action:active {
  transform: scale(0.98);
}

.btn-terms-action.danger {
  color: #dc2626;
  border-color: #fecaca;
  background: #fff5f5;
}

.btn-terms-action.danger:hover {
  background: #fee2e2;
  border-color: #ef4444;
}

.terms-footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 10.5px;
  color: #64748b;
}

.terms-char-count {
  font-weight: 500;
}

.terms-hint {
  font-style: italic;
  color: #94a3b8;
}

/* Terms Library Full Browser Modal */
.terms-modal-dialog {
  width: 880px;
  max-width: 95vw;
  height: 620px;
  max-height: 88vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: popIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.terms-lib-split {
  display: flex;
  flex: 1;
  min-height: 0;
  background: #f8fafc;
}

.terms-lib-sidebar {
  width: 320px;
  min-width: 320px;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.terms-lib-sidebar-header {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.terms-lib-search-box {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 11px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  background: #f8fafc;
  transition: all 0.15s ease;
}

.terms-lib-search-box:focus {
  background: #ffffff;
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.terms-lib-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.terms-tpl-item {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.15s ease;
}

.terms-tpl-item:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.terms-tpl-item.active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

.terms-tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.terms-tpl-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.terms-tpl-item.active .terms-tpl-title {
  color: #1d4ed8;
}

.terms-tpl-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
}

.terms-tpl-tag.tag-standard {
  background: #e0f2fe;
  color: #0369a1;
}

.terms-tpl-tag.tag-urgent {
  background: #fef2f2;
  color: #b91c1c;
}

.terms-tpl-tag.tag-projects {
  background: #f3e8ff;
  color: #7e22ce;
}

.terms-tpl-tag.tag-service {
  background: #ecfdf5;
  color: #047857;
}

.terms-tpl-tag.tag-custom {
  background: #fef9c3;
  color: #854d0e;
}

.terms-tpl-tag.tag-general {
  background: #f1f5f9;
  color: #475569;
}

.terms-tpl-desc {
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.terms-tpl-badge-builtin {
  font-size: 9.5px;
  color: #94a3b8;
  font-weight: 600;
}

.terms-lib-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #ffffff;
}

.terms-lib-content-header {
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
}

.terms-lib-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.7;
  color: #1e293b;
  background: #ffffff;
  white-space: pre-wrap;
}

.terms-lib-footer {
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
}

.terms-lib-actions-left,
.terms-lib-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Revision Control & Version History (RevisionsModule)
   ========================================================================== */
.revision-control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 14px;
  margin: 10px 0 14px 0;
  flex-wrap: wrap;
}

.revision-info-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.revision-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.revision-pill-badge.base-rev {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.revision-pill-badge.has-rev {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.revision-text-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #334155;
}

.revision-label-text strong {
  color: #0f172a;
}

.rev-meta-sub {
  color: #64748b;
  font-size: 11.5px;
  margin-left: 4px;
}

.rev-count-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.revision-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-rev-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid #0f172a;
  background: #0f172a;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-rev-action:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

.btn-rev-action.secondary {
  background: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
}

.btn-rev-action.secondary:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.doc-rev-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.doc-rev-meta-pill {
  display: inline-block;
  padding: 1px 5px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 3px;
  text-transform: uppercase;
}

.rev-card {
  flex-shrink: 0 !important;
  min-height: fit-content;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: all 0.2s ease;
}

.rev-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.rev-card.active {
  border: 2px solid #2563eb !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}

.rev-items-drawer {
  background: #f8fafc;
  border-top: 1px dashed #cbd5e1;
  padding: 14px 18px;
  overflow-x: auto;
}

/* ==========================================================================
   MKB ERP Export Dropdown & Action Buttons
   ========================================================================== */
.btn-dropdown-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.dropdown-caret {
  font-size: 10px;
  margin-left: 2px;
  line-height: 1;
  display: inline-block;
  transition: opacity 0.2s ease, max-width 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.preview-toolbar.is-scrolled .dropdown-caret {
  display: none !important;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(15, 23, 42, 0.08);
  min-width: 240px;
  max-width: 260px;
  padding: 6px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: dropdownIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-item,
.preview-toolbar.is-scrolled .dropdown-menu .dropdown-item,
.toolbar-actions .dropdown-menu button.dropdown-item {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 48px !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: visible !important;
  white-space: normal !important;
  box-sizing: border-box !important;
  transition: background 0.12s ease !important;
}

.dropdown-item:hover,
.preview-toolbar.is-scrolled .dropdown-menu .dropdown-item:hover,
.toolbar-actions .dropdown-menu button.dropdown-item:hover {
  background: #f1f5f9 !important;
}

.dropdown-item-icon {
  font-size: 16px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dropdown-item-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  max-width: none !important;
}

.dropdown-item-text strong {
  font-size: 12px !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  display: block !important;
}

.dropdown-item-text small {
  font-size: 10.5px !important;
  color: #64748b !important;
  white-space: normal !important;
  line-height: 1.3 !important;
  display: block !important;
}

.dropdown-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 6px;
}

.cat-icon-btn.cust-mkb-btn {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #15803d !important;
}

.cat-icon-btn.cust-mkb-btn:hover {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

/* ==========================================================================
   Fresh Leads Pipeline & Inquiries Styles
   ========================================================================== */
.leads-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #f8fafc;
  min-width: 0;
}

.leads-header {
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.leads-header-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leads-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leads-header-icon {
  font-size: 20px;
}

.leads-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin: 0;
}

.leads-count-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.leads-header-subtitle {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.leads-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.leads-view-toggle {
  display: inline-flex;
  align-items: center;
  height: 32px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
  box-sizing: border-box;
}

.view-toggle-btn {
  height: 26px;
  padding: 0 11px;
  border-radius: 5px;
  font: 600 11.5px var(--mac-font);
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  user-select: none;
}

.view-toggle-btn:hover {
  color: #0f172a;
}

.view-toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.btn-lead-magic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 6px;
  font: 600 12px var(--mac-font);
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  border: 1px solid rgba(124, 58, 237, 0.3);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25), inset 0 1px 0.5px rgba(255, 255, 255, 0.2);
  transition: all 0.15s var(--mac-ease-out);
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

.btn-lead-magic:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(124, 58, 237, 0.35);
}

.btn-lead-magic:active {
  transform: scale(0.985);
}

.btn-primary {
  font: 600 12px var(--mac-font);
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15), inset 0 1px 0.5px rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  transition: all 0.15s var(--mac-ease-out);
  user-select: none;
  box-sizing: border-box;
}

.btn-primary:hover {
  background: #1e293b;
  border-color: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
}

.btn-primary:active {
  transform: scale(0.985);
}

.btn-secondary {
  font: 600 12px var(--mac-font);
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  color: #334155;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  transition: all 0.15s var(--mac-ease-out);
  user-select: none;
  box-sizing: border-box;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.22);
  color: #0f172a;
  transform: translateY(-1px);
}

.btn-secondary:active {
  transform: scale(0.985);
}

/* KPI Strip */
.leads-metrics-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 12px 28px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.metric-card {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.metric-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.metric-value {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0;
}

.metric-sub {
  font-size: 10px;
  color: #94a3b8;
}

.text-green { color: #059669 !important; }
.text-orange { color: #ea580c !important; }
.text-blue { color: #2563eb !important; }
.text-emerald { color: #10b981 !important; }

/* Filter & Search Toolbar */
.leads-toolbar {
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.leads-search-box {
  position: relative;
  flex: 1;
  max-width: 440px;
}

.leads-search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}

.leads-search-box input {
  width: 100%;
  padding: 7px 30px 7px 32px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #0f172a;
  outline: none;
  transition: all 0.15s ease;
}

.leads-search-box input:focus {
  background: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.leads-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
}

.leads-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leads-filter-select {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #334155;
  outline: none;
  cursor: pointer;
}

/* Content Area */
.leads-content-stage {
  flex: 1;
  overflow: auto;
  padding: 16px 28px 28px;
}

/* Kanban Board */
.leads-kanban-board {
  display: grid;
  grid-template-columns: repeat(6, minmax(270px, 1fr));
  gap: 14px;
  align-items: flex-start;
  min-height: 100%;
}

.leads-kanban-col {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 215px);
}

.kanban-col-header {
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 9px 9px 0 0;
  border-bottom: 1px solid #e2e8f0;
  border-top: 3px solid #3b82f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kanban-col-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stage-icon {
  font-size: 14px;
}

.stage-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
}

.stage-count {
  font-size: 10.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #64748b;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
}

.kanban-col-sum {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
}

.kanban-col-cards {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kanban-col-empty {
  text-align: center;
  padding: 24px 10px;
  font-size: 11.5px;
  color: #94a3b8;
  font-style: italic;
}

/* Lead Card */
.lead-card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  cursor: grab;
}

.lead-card.is-collapsed {
  padding: 9px 11px;
  cursor: pointer;
  gap: 4px;
}

.lead-card.is-collapsed:hover {
  background: #fbfcfe;
  border-color: #cbd5e1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.lead-card.is-collapsed:active {
  cursor: grabbing;
}

.lead-card-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.lead-card-headline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.lead-card-headline .lead-company-name {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-headline-value {
  font-size: 11.5px;
  font-weight: 700;
  color: #059669;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-card-chevron {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}

.btn-card-chevron:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.lead-card.is-collapsed .lead-card-details {
  display: none !important;
}

.lead-card.is-expanded .lead-card-details {
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  animation: leadCardExpand 0.15s ease-out;
}

@keyframes leadCardExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-lead-expand-all {
  height: 32px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-lead-expand-all:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: rgba(0, 0, 0, 0.22);
}

.lead-card:active {
  cursor: grabbing;
}

.lead-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.97);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.leads-kanban-col.kanban-col-dragover {
  background: #e2e8f0;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
}

.lead-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lead-card.priority-hot { border-left: 3px solid #ef4444; }
.lead-card.priority-warm { border-left: 3px solid #f59e0b; }
.lead-card.priority-cold { border-left: 3px solid #3b82f6; }

.lead-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.lead-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.lead-priority-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
}

.lead-priority-badge.priority-hot { background: #fee2e2; color: #b91c1c; }
.lead-priority-badge.priority-warm { background: #fef3c7; color: #b45309; }
.lead-priority-badge.priority-cold { background: #dbeafe; color: #1d4ed8; }

.lead-segment-badge {
  font-size: 10px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  padding: 1px 6px;
  border-radius: 4px;
}

.lead-source-badge {
  font-size: 9.5px;
  font-weight: 600;
  background: #ecfdf5;
  color: #047857;
  padding: 1px 5px;
  border-radius: 4px;
}

.lead-card-menu {
  display: flex;
  align-items: center;
  gap: 2px;
}

.btn-card-icon {
  background: transparent;
  border: none;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s ease;
}

.btn-card-icon:hover {
  opacity: 1;
  background: #f1f5f9;
}

.btn-card-icon.danger:hover {
  background: #fee2e2;
}

.lead-company-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  cursor: pointer;
}

.lead-company-name:hover {
  color: #2563eb;
}

.lead-contact-line {
  font-size: 11.5px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
}

.lead-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #64748b;
  margin-top: 5px;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-phone-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lead-wa-link, .lead-call-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  text-decoration: none;
  transition: transform 0.1s ease;
}

.lead-wa-link { background: #dcfce7; }
.lead-call-link { background: #e0f2fe; }
.lead-wa-link:hover, .lead-call-link:hover { transform: scale(1.15); }

.lead-requirements-box {
  background: #f8fafc;
  border-left: 2.5px solid #cbd5e1;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: #334155;
  margin-top: 6px;
  line-height: 1.35;
  max-height: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-requirements-box .req-label {
  font-weight: 600;
  color: #64748b;
}

.lead-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}

.lead-deal-value .value-amount {
  font-size: 12.5px;
  font-weight: 700;
  color: #059669;
}

.lead-deal-value .value-unset {
  font-size: 10.5px;
  color: #94a3b8;
  font-style: italic;
}

.lead-followup-pill {
  font-size: 10px;
  font-weight: 600;
  background: #fef3c7;
  color: #b45309;
  padding: 1px 6px;
  border-radius: 4px;
}

.lead-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}

.lead-card-action-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.lead-card-action-btns .btn-lead-action,
.lead-card-action-btns .lead-converted-tag {
  flex: 1;
  min-width: 0;
}

.btn-lead-action {
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.btn-lead-action.quote {
  background: #0f172a;
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.btn-lead-action.quote:hover {
  background: #1e293b;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}

.btn-lead-action.convert {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  box-shadow: 0 1px 2px rgba(4, 120, 87, 0.08);
}

.btn-lead-action.convert:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  transform: translateY(-1px);
}

.lead-converted-tag {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.lead-stage-dropdown-wrap {
  width: 100%;
  box-sizing: border-box;
}

.lead-stage-select {
  width: 100%;
  box-sizing: border-box;
  height: 26px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center;
  color: #334155;
  padding: 0 24px 0 8px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.15s ease;
}

.lead-stage-select:hover {
  background-color: #ffffff;
  border-color: #94a3b8;
}

.lead-stage-select:focus {
  background-color: #ffffff;
  border-color: #007aff;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.12);
}

.lead-location {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

/* Table View */
.leads-table-container {
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

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

.leads-table thead th {
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid #e2e8f0;
}

.leads-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.leads-table tbody tr:hover {
  background: #f8fafc;
}

.tbl-company-name {
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}

.tbl-company-name:hover {
  color: #2563eb;
}

.tbl-source-badge {
  font-size: 9.5px;
  color: #059669;
}

.tbl-contact-person {
  font-weight: 600;
  color: #334155;
}

.tbl-desig {
  font-size: 10.5px;
  color: #94a3b8;
}

.tbl-phone-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tbl-phone-links {
  display: inline-flex;
  gap: 3px;
}

.tbl-value-cell {
  font-weight: 700;
  color: #059669;
}

.lead-stage-select-tbl {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #334155;
  padding: 3px 6px;
}

.tbl-actions-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-tbl-action {
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  cursor: pointer;
}

.btn-tbl-action.quote {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
}

.btn-tbl-action.convert {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}

.btn-tbl-action.danger:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Modal Styling */
.lead-modal-dialog {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 0.5px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--mac-shadow-modal) !important;
  width: 100% !important;
  max-width: 760px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

.lead-modal-tabs {
  display: flex !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 8px 24px !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.lead-tab-btn {
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.lead-tab-btn:hover {
  color: #0f172a !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.lead-tab-btn.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-weight: 700 !important;
}

.lead-modal-body {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.lead-tab-pane {
  display: none !important;
}

.lead-tab-pane.active {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Magic Paste Pane */
.magic-paste-box {
  background: #faf5ff;
  border: 1.5px dashed #c084fc;
  border-radius: 10px;
  padding: 16px;
}

.magic-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12.5px;
  font-weight: 700;
  color: #6b21a8;
  margin-bottom: 8px;
}

.magic-hint {
  font-size: 11px;
  font-weight: 400;
  color: #7e22ce;
}

.magic-textarea {
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid #d8b4fe;
  border-radius: 7px;
  background: #ffffff;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
}

.magic-textarea:focus {
  border-color: #9333ea;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
}

.magic-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.btn-magic-extract {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(124, 58, 237, 0.25);
  transition: all 0.15s ease;
}

.btn-magic-extract:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

.magic-preview-card {
  margin-top: 14px;
  background: #ffffff;
  border: 1px solid #e9d5ff;
  border-radius: 8px;
  padding: 12px;
}

.preview-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #6b21a8;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 11.5px;
}

.pv-item {
  display: flex;
  gap: 4px;
  color: #1e293b;
}

.pv-item.full {
  grid-column: 1 / -1;
}

.pv-lbl {
  color: #64748b;
  font-weight: 500;
}

.preview-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Form Grid */
.lead-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}

.lead-form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lead-form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

.lead-form-grid label {
  font-size: 11.5px;
  font-weight: 600;
  color: #334155;
}

.lead-form-grid .req-star {
  color: #ef4444;
}

.lead-form-grid input, .lead-form-grid select, .lead-form-grid textarea {
  padding: 7px 10px;
  font-size: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.lead-form-grid input:focus, .lead-form-grid select:focus, .lead-form-grid textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* ===================================================
   Lead Detail Page (LDP)
   =================================================== */

/* Company name link in Kanban card and table */
.lead-page-link {
  cursor: pointer !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.12s ease !important;
}
.lead-page-link:hover {
  color: #2563eb !important;
  text-decoration: underline !important;
}

/* Outer wrapper fills the #viewLeads container */
#viewLeads.active {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  flex: 1;
  min-width: 0;
}

.ldp-wrapper {
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #f8fafc;
  box-sizing: border-box;
}

/* ── Sticky Header ── */
.ldp-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  padding: 10px 24px;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.ldp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px 0 9px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
  flex-shrink: 0;
  user-select: none;
}

.ldp-back-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
}

.ldp-back-btn:active {
  background: #f1f5f9;
  transform: translateY(1px);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

.ldp-back-btn svg {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.15s ease, color 0.15s ease;
}

.ldp-back-btn:hover svg {
  color: #0f172a;
  transform: translateX(-1px);
}

.ldp-header-divider {
  width: 1px;
  height: 22px;
  background: #cbd5e1;
  flex-shrink: 0;
  margin: 0 4px;
}

.ldp-header-core {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ldp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ldp-priority-dot {
  font-size: 20px;
  flex-shrink: 0;
}

.ldp-header-identity {
  min-width: 0;
}

.ldp-company-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}

.ldp-header-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ldp-stage-pill, .ldp-segment-pill, .ldp-source-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ldp-segment-pill { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.ldp-source-pill  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

.ldp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-left: auto;
}

.ldp-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ldp-btn-primary:hover { background: #1e293b; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transform: translateY(-1px); }
.ldp-btn-primary:active { transform: translateY(0); }

.ldp-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: #ffffff;
  color: #334155;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.ldp-btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

.ldp-btn-danger {
  padding: 7px 10px;
  background: #ffffff;
  color: #ef4444;
  border: 1px solid #fca5a5;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ldp-btn-danger:hover { background: #fee2e2; border-color: #ef4444; }

.ldp-stage-select {
  height: 33px;
  padding: 0 28px 0 10px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  color: #0f172a;
  min-width: 160px;
}
.ldp-stage-select:focus { border-color: #3b82f6; outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

/* ── Body: Two-Column Layout ── */
.ldp-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  padding: 20px 24px 40px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.ldp-col-main,
.ldp-col-side {
  min-width: 0;
}

@media (max-width: 1100px) {
  .ldp-body { grid-template-columns: 1fr; }
}

/* ── Shared Section ── */
.ldp-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
}

.ldp-section:last-child { margin-bottom: 0; }

.ldp-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* ── Info Grid ── */
.ldp-info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ldp-info-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  align-items: start;
}

.ldp-info-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  padding-top: 1px;
}

.ldp-info-val {
  font-size: 13px;
  color: #0f172a;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1.4;
}

.ldp-desig {
  color: #64748b;
  font-size: 12px;
}

.ldp-contact-link, .ldp-wa-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
}
.ldp-contact-link:hover { text-decoration: underline; }
.ldp-wa-link {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 5px;
  padding: 1px 7px;
  font-size: 11.5px;
}
.ldp-wa-link:hover { background: #bbf7d0; }

.ldp-value-big {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.ldp-converted-badge {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

/* ── Requirements & Notes ── */
.ldp-requirements-block, .ldp-notes-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 12px 14px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ── Quick Note Box ── */
.ldp-quick-note-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldp-quick-note-ta {
  width: 100%;
  padding: 9px 12px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}
.ldp-quick-note-ta:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

.ldp-quick-note-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ldp-note-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ldp-btn-note-att {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #f8fafc;
  color: #334155;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ldp-btn-note-att:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.ldp-note-att-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

.ldp-quick-note-box.dragover {
  border: 2px dashed #3b82f6 !important;
  background: #eff6ff !important;
  border-radius: 8px;
}

.ldp-pending-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 2px 0;
}

.ldp-pending-att-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  font-size: 11.5px;
  color: #1e293b;
}

.ldp-pending-att-chip .ldp-pac-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.ldp-pending-att-chip .ldp-pac-size {
  font-size: 10px;
  color: #64748b;
}

.ldp-pending-att-chip .ldp-pac-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #94a3b8;
  font-size: 13px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.ldp-pending-att-chip .ldp-pac-remove:hover {
  color: #ef4444;
}

.ldp-btn-note {
  padding: 6px 14px;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ldp-btn-note:hover { background: #1e293b; }
.ldp-btn-note.secondary {
  background: #ffffff;
  color: #334155;
  border-color: #e2e8f0;
}
.ldp-btn-note.secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

/* ── Linked Quotes ── */
.ldp-linked-quotes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ldp-linked-quote-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
}

.ldp-lq-info {
  flex: 1;
  min-width: 0;
}

.ldp-lq-num {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

.ldp-lq-date {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-top: 2px;
}

.ldp-lq-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ldp-lq-status {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ldp-lq-status.status-approved { background: #dcfce7; color: #15803d; }
.ldp-lq-status.status-draft    { background: #f1f5f9; color: #475569; }
.ldp-lq-status.status-sent     { background: #dbeafe; color: #1d4ed8; }

.ldp-lq-value {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.ldp-lq-open-btn {
  padding: 5px 12px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ldp-lq-open-btn:hover { background: #1d4ed8; }

/* ── Converted Customer Card ── */
.ldp-converted-cust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 12px 16px;
}

.ldp-cc-name {
  font-size: 14px;
  font-weight: 700;
  color: #14532d;
  flex: 1;
}

.ldp-cc-code {
  font-size: 12px;
  color: #15803d;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

/* ── Right Column ── */
.ldp-col-side {}

/* ── Follow-up Card ── */
.ldp-followup-card {
  border: 1px solid #e2e8f0;
}

.ldp-followup-card.is-overdue {
  border-color: #fca5a5;
  background: #fff5f5;
}

.ldp-followup-date {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ldp-followup-date.overdue-text { color: #dc2626; }

.ldp-overdue-tag {
  background: #dc2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 20px;
  letter-spacing: 0.06em;
}

.ldp-followup-empty {
  font-size: 12.5px;
  color: #94a3b8;
  margin-bottom: 14px;
}

.ldp-followup-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ldp-form-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

.ldp-date-input {
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.ldp-date-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.1); }

/* ── Activity Timeline ── */
.ldp-timeline-section { margin-top: 0; }

.ldp-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.ldp-timeline-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}

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

.ldp-tl-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.ldp-tl-body { flex: 1; min-width: 0; }

.ldp-tl-text {
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
  white-space: pre-wrap;
}

.ldp-tl-attachments {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.ldp-tl-att-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: all 0.15s;
}

.ldp-tl-att-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.ldp-tl-att-thumb {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid #cbd5e1;
}

.ldp-tl-att-icon {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.ldp-tl-att-info {
  flex: 1;
  min-width: 0;
}

.ldp-tl-att-name {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ldp-tl-att-sub {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 1px;
}

.ldp-tl-att-dl {
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 11px;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.ldp-tl-att-dl:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

.ldp-tl-date {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 5px;
}

.ldp-tl-empty {
  font-size: 12.5px;
  color: #94a3b8;
  padding: 8px 0;
}

/* ── Lead Health & Status Card ── */
.ldp-health-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04);
  transition: all 0.2s ease;
}

.ldp-health-card.is-stale {
  border-color: #f59e0b;
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 45%);
}

.ldp-health-card.is-overdue {
  border-color: #f87171;
  background: linear-gradient(180deg, #fef2f2 0%, #ffffff 45%);
}

.ldp-health-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
}

@media (max-width: 768px) {
  .ldp-health-metrics {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.ldp-hm-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ldp-hm-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ldp-hm-val {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ldp-hm-sub {
  font-size: 11px;
  color: #94a3b8;
}

.ldp-fu-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ldp-fu-badge.overdue {
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

.ldp-fu-badge.today {
  background: #fef3c7;
  color: #d97706;
  border: 1px solid #fde68a;
}

.ldp-fu-badge.upcoming {
  background: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
}

.ldp-fu-badge.none {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.ldp-stale-alert {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #fde68a;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffbeb;
  padding: 10px 14px;
  border-radius: 7px;
}

.ldp-stale-alert.overdue-alert {
  border-top-color: #fca5a5;
  background: #fef2f2;
}

.ldp-sa-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.ldp-sa-content {
  font-size: 12px;
  color: #92400e;
  flex: 1;
  line-height: 1.45;
}

.ldp-stale-alert.overdue-alert .ldp-sa-content {
  color: #991b1b;
}

.ldp-sa-action {
  flex-shrink: 0;
}

.ldp-btn-sm {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.ldp-btn-sm:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.ldp-btn-sm.primary {
  background: #059669;
  color: #ffffff;
  border-color: #059669;
}

.ldp-btn-sm.primary:hover {
  background: #047857;
}

/* ── Qualification Checklist Card ── */
.ldp-qual-card {
  position: relative;
}

.ldp-qual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ldp-qual-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ldp-qual-score-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  letter-spacing: 0.02em;
}

.ldp-qual-progress {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0 14px;
}

.ldp-qual-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ldp-qual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

@media (max-width: 768px) {
  .ldp-qual-grid {
    grid-template-columns: 1fr;
  }
}

.ldp-qc-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}

.ldp-qc-item.full-span {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .ldp-qc-item.full-span {
    grid-column: span 1;
  }
}

.ldp-qc-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ldp-qc-val {
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.45;
}

.ldp-qc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ldp-qc-chip {
  font-size: 11px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 2px 8px;
  color: #334155;
  font-weight: 500;
}

.ldp-qc-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
}

.ldp-qc-tag.ready {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}

.ldp-btn-edit-qual {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.ldp-btn-edit-qual:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

/* ── Attachments Section ── */
.ldp-attachments-card {
  position: relative;
}

.ldp-attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.ldp-btn-upload-file {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}

.ldp-btn-upload-file:hover {
  background: #1e293b;
}

.ldp-attachments-sub {
  font-size: 11.5px;
  color: #64748b;
  margin-bottom: 12px;
}

.ldp-attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}

.ldp-att-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: all 0.15s;
}

.ldp-att-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  background: #ffffff;
}

.ldp-att-preview {
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}

.ldp-att-thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.ldp-att-icon {
  font-size: 32px;
}

.ldp-att-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ldp-att-name {
  font-size: 11.5px;
  font-weight: 600;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ldp-att-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e2e8f0;
  color: #334155;
  align-self: flex-start;
}

.ldp-att-size {
  font-size: 10px;
  color: #94a3b8;
}

.ldp-att-actions {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid #e2e8f0;
}

.ldp-att-btn {
  padding: 3px 6px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
}

.ldp-att-btn:hover {
  background: #f1f5f9;
}

.ldp-att-btn.danger {
  color: #dc2626;
  border-color: #fecaca;
}

.ldp-att-btn.danger:hover {
  background: #fee2e2;
}

.ldp-attachments-dropzone {
  border: 2px dashed #cbd5e1;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  background: #f8fafc;
  transition: all 0.15s;
}

.ldp-attachments-dropzone:hover,
.ldp-attachments-dropzone.dragover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.ldp-dz-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.ldp-dz-text {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.ldp-dz-hint {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* ── Qualification Checklist Modal ── */
.qual-modal-dialog {
  max-width: 640px !important;
}

.qual-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.qual-chip {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.qual-chip:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.qual-chip.selected {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* ── Kanban & Table Health & Qualification Badges ── */
.lead-stage-age-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lead-stale-pill {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lead-att-count-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #f0fdf4;
  color: #16a34a;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.lead-qual-score-pill {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* ── Image Lightbox Modal ── */
.lead-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.lead-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.lead-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.lead-lightbox-caption {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.lead-lightbox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f172a;
  border: none;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ==========================================================================
   Product Catalog HSN Automation & Suggestion System Styles
   ========================================================================== */

.cat-hsn-missing-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: #f59e0b;
  color: #ffffff;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  line-height: 1;
}

.cat-hsn-empty {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px dashed #bfdbfe;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}

.cat-hsn-empty:hover {
  background: #dbeafe;
  border-color: #60a5fa;
  color: #1d4ed8;
  transform: translateY(-1px);
}

.hsn-suggest-box {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  animation: hsnFadeIn .2s ease-out;
}

@keyframes hsnFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.hsn-suggest-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #065f46;
  flex: 1;
  min-width: 0;
}

.hsn-suggest-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.hsn-suggest-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hsn-suggest-label {
  color: #047857;
  font-weight: 600;
}

.hsn-suggest-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 800;
  color: #064e3b;
  background: #d1fae5;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #6ee7b7;
}

.hsn-suggest-desc {
  color: #047857;
  font-size: 10.5px;
}

.btn-apply-hsn-suggest {
  height: 26px;
  padding: 0 10px;
  background: #059669;
  color: #ffffff;
  border: 1px solid #047857;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
}

.btn-apply-hsn-suggest:hover {
  background: #047857;
  transform: translateY(-1px);
}

/* Bulk Auto-Assign Wizard Dialog */
.hsn-auto-modal-dialog {
  background: #f8fafc;
  border-radius: 14px;
  border: 0.5px solid rgba(0,0,0,0.14);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.06);
  width: 100%;
  max-width: 980px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

.hsn-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.hsn-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hsn-stat-card.highlight {
  border-color: #fde68a;
  background: #fffbeb;
}

.hsn-stat-card.success {
  border-color: #a7f3d0;
  background: #ecfdf5;
}

.hsn-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

.hsn-stat-val.amber {
  color: #d97706;
}

.hsn-stat-val.emerald {
  color: #059669;
}

.hsn-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hsn-toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

.hsn-filter-tabs {
  display: flex;
  gap: 4px;
}

.hsn-tab-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
}

.hsn-tab-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.hsn-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
}

.hsn-preview-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: auto;
  max-height: 400px;
  flex: 1;
  min-height: 180px;
}

.hsn-preview-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11.5px;
}

.hsn-preview-table thead {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 2;
}

.hsn-preview-table th {
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  white-space: nowrap;
}

.hsn-preview-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1e293b;
}

.hsn-preview-table tbody tr:hover td {
  background: #f8fafd;
}

.conf-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  text-transform: capitalize;
  white-space: nowrap;
}

.conf-badge.conf-high {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.conf-badge.conf-med {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.conf-badge.conf-low {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

/* ==========================================================================
   HSN Directory Picker Dialog (macOS Inspector Style)
   ========================================================================== */
.hsn-picker-dialog {
  background: #ffffff;
  border-radius: 14px;
  border: 0.5px solid rgba(0, 0, 0, 0.14);
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 840px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  animation: macosModalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.hsn-picker-dialog .modal-header {
  padding: 16px 22px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hsn-picker-icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}

.hsn-picker-title-wrap h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.hsn-picker-title-wrap p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #64748b;
}

.hsn-picker-controls-header {
  padding: 14px 22px 10px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* Full-width Search Input */
.hsn-picker-search-bar {
  width: 100%;
}

.hsn-picker-search-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.hsn-picker-search-icon {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
  user-select: none;
}

.hsn-picker-search-wrap input {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 36px;
  font-size: 12.5px;
  font-family: inherit;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hsn-picker-search-wrap input:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.hsn-picker-search-wrap input::placeholder {
  color: #94a3b8;
}

.hsn-picker-search-clear {
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #e2e8f0;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  line-height: 1;
}

.hsn-picker-search-clear:hover {
  background: #cbd5e1;
  color: #0f172a;
}

/* Category Filter Pills (Horizontal Scrollable) */
.hsn-cat-filter-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  user-select: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(203, 213, 225, 0.8) transparent;
}

.hsn-cat-filter-scroll::-webkit-scrollbar {
  height: 5px;
}

.hsn-cat-filter-scroll::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.8);
  border-radius: 3px;
}

.hsn-cat-filter-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.hsn-cat-filter-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.hsn-cat-pill {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  color: #475569;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  text-decoration: none;
}

.hsn-cat-pill:hover:not(.active) {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
}

.hsn-cat-pill.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
  cursor: default;
  transform: none;
}

/* Status / Count Row */
.hsn-picker-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: #64748b;
  padding: 0 2px;
}

.hsn-picker-status-count strong {
  color: #0f172a;
}

.hsn-picker-status-count em {
  font-style: normal;
  color: #2563eb;
  font-weight: 600;
}

.hsn-picker-reset-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hsn-picker-reset-btn:hover {
  color: #1d4ed8;
}

/* HSN Directory Card Body & List */
.hsn-picker-list-container {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  background: #ffffff;
}

.hsn-directory-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px;
}

.hsn-directory-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02);
}

.hsn-directory-card:hover {
  border-color: #3b82f6;
  background: #f8fafd;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(37, 99, 235, 0.08);
}

.hsn-card-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  background: #f1f5f9;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.hsn-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hsn-card-cat {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  letter-spacing: 0.01em;
}

.hsn-card-desc {
  font-size: 11.5px;
  color: #475569;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hsn-card-gst {
  font-size: 11px;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.hsn-picker-footer {
  padding: 12px 22px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.hsn-picker-footer-tip {
  font-size: 11px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hsn-picker-footer-tip kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #475569;
}

/* ==========================================================================
   Master Tariff Explorer & Scoped Tabs
   ========================================================================== */
.hsn-scope-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 9px;
  border: 1px solid #e2e8f0;
}

.hsn-scope-tab {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: #64748b;
  font-weight: 600;
  font-size: 11.5px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hsn-scope-tab:hover {
  color: #1e293b;
  background: rgba(255, 255, 255, 0.6);
}

.hsn-scope-tab.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.hsn-master-chapter-select {
  height: 34px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #ffffff;
  color: #1e293b;
  outline: none;
  cursor: pointer;
}

.hsn-master-chapter-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.hsn-card-type-pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-block;
}

.hsn-card-type-pill.type-goods {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.hsn-card-type-pill.type-service {
  background: #faf5ff;
  color: #7e22ce;
  border: 1px solid #e9d5ff;
}

.hsn-hierarchy-crumb {
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.35;
  margin-top: 3px;
}

/* ==========================================================================
   HSN Intelligence & Ergonomics: Alternatives, Inline Category Pills, Meter
   ========================================================================== */
.hsn-cand-alt-select {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  max-width: 280px;
  transition: border-color 0.15s;
}

.hsn-cand-alt-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

.hsn-inline-cat-pill {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: all 0.12s ease;
}

.hsn-inline-cat-pill:hover {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
  transform: translateY(-0.5px);
}

.hsn-conf-meter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.hsn-conf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
}

.hsn-conf-dot.active-high { background: #10b981; }
.hsn-conf-dot.active-med { background: #f59e0b; }
.hsn-conf-dot.active-low { background: #94a3b8; }

.hsn-guidance-chip {
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hsn-guidance-chip:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.hsn-guidance-tip {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #1e3a8a;
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 6px;
}

/* ==========================================================================
   Sedna Unified Notification Center & Drawer
   ========================================================================== */

.notif-drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.notif-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.notif-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 410px;
  max-width: 92vw;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  color: #f8fafc;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 99991;
  user-select: none;
}

.notif-drawer-overlay.is-open .notif-drawer {
  transform: translateX(0);
}

/* Drawer Header */
.notif-drawer-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.notif-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notif-header-icon {
  font-size: 18px;
  line-height: 1;
}

.notif-header-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f8fafc;
}

.notif-unread-pill {
  background: #ef4444;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.02em;
}

.notif-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notif-hdr-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-hdr-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.notif-close-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 50%;
}

/* Filter Tabs */
.notif-filter-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.notif-filter-tabs::-webkit-scrollbar {
  display: none;
}

.notif-filter-tab {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.notif-filter-tab:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.12);
}

.notif-filter-tab.active {
  background: #3b82f6;
  border-color: #60a5fa;
  color: #ffffff;
  font-weight: 600;
}

/* Drawer Content & Cards */
.notif-drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-card {
  position: relative;
  display: flex;
  gap: 12px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.16s ease;
}

.notif-card:hover {
  background: rgba(30, 41, 59, 0.95);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.notif-card.is-unread {
  background: rgba(30, 41, 59, 0.88);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}

/* Severity Borders */
.notif-card.severity-urgent {
  border-left: 3.5px solid #ef4444;
}

.notif-card.severity-warning {
  border-left: 3.5px solid #f59e0b;
}

.notif-card.severity-info {
  border-left: 3.5px solid #3b82f6;
}

.notif-card.severity-success {
  border-left: 3.5px solid #10b981;
}

.notif-card-side {
  padding-top: 1px;
}

.notif-card-type-icon {
  font-size: 16px;
  line-height: 1;
}

.notif-card-body {
  flex: 1;
  min-width: 0;
}

.notif-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.notif-card-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.3;
}

.notif-card-time {
  font-size: 10.5px;
  color: #94a3b8;
  white-space: nowrap;
}

.notif-card-msg {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: #cbd5e1;
  word-break: break-word;
}

.notif-card-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.notif-card-action-btn {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.4);
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notif-card-action-btn:hover {
  background: rgba(59, 130, 246, 0.35);
  color: #ffffff;
}

.notif-card-dismiss-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.3;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-card:hover .notif-card-dismiss-btn {
  opacity: 0.8;
}

.notif-card-dismiss-btn:hover {
  opacity: 1 !important;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

/* Empty State */
.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  color: #94a3b8;
}

.notif-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.notif-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
}

.notif-empty-sub {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  max-width: 260px;
}

/* Drawer Footer */
.notif-drawer-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.notif-clear-all-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: color 0.15s ease;
}

.notif-clear-all-btn:hover {
  color: #ef4444;
}

/* Toolbar Notif Button & Dot */
.notif-toolbar-btn {
  position: relative !important;
}

.toolbar-notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  box-shadow: 0 0 5px #ef4444;
  pointer-events: none;
}

/* Sidebar Notif Badge */
.nav-badge.notif-badge {
  background: #ef4444;
  color: #ffffff;
  font-weight: 700;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 8px;
}




/* ==========================================================================
   Sedna Authentication & Access Gate (auth.js)
   ========================================================================== */

/* Workspace Locked State */
.app-shell.app-locked {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Auth Fullscreen Overlay */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 25%, #1e293b 0%, #0f172a 55%, #020617 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 20px;
  animation: authFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-overlay.auth-fade-out {
  animation: authFadeOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes authFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes authFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

/* Auth Card */
.auth-card {
  width: 430px;
  max-width: 100%;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15);
  padding: 36px 32px 28px;
  position: relative;
  font-family: var(--mac-font);
}

/* Brand Header */
.auth-brand-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-brand-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f59e0b;
  font-size: 26px;
  font-weight: 700;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 5px;
  letter-spacing: -0.4px;
}

.auth-subtitle {
  font-size: 12px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

/* Auth Tabs */
.auth-tabs {
  display: flex;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
  margin-bottom: 20px;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #64748b;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.auth-tab:hover {
  color: #1e293b;
}

.auth-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Error Banner */
.auth-error-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #991b1b;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.4;
}

.auth-shake {
  animation: authShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes authShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Form & Inputs */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  transition: all 0.15s ease;
}

.auth-input-wrap .auth-input {
  padding-right: 42px;
}

.auth-input:focus {
  background: #ffffff;
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.auth-toggle-pwd-btn {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  font-size: 14px;
  color: #64748b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-toggle-pwd-btn:hover {
  background: #e2e8f0;
}

/* Options Row */
.auth-options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #475569;
}

.auth-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.auth-checkbox-label input[type="checkbox"] {
  cursor: pointer;
  accent-color: #007aff;
  width: 14px;
  height: 14px;
}

/* Submit Button */
.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  background: #007aff;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
}

.auth-submit-btn:hover {
  background: #0066d6;
  box-shadow: 0 6px 16px rgba(0, 122, 255, 0.35);
  transform: translateY(-1px);
}

.auth-submit-btn:active {
  transform: translateY(0);
}

.auth-submit-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.auth-btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
}

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

/* Hint & Notice Box */
.auth-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.auth-hint code {
  background: #e2e8f0;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  color: #0f172a;
}

.auth-notice-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  text-align: left;
}

.auth-notice-title {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.auth-notice-body {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
  margin: 0;
}

.auth-alt-btn {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #007aff;
  background: rgba(0, 122, 255, 0.08);
  border: 1px solid rgba(0, 122, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-alt-btn:hover {
  background: rgba(0, 122, 255, 0.16);
}

.auth-footer {
  text-align: center;
  margin-top: 22px;
  font-size: 11px;
  color: #94a3b8;
}