:root{--ink:#303438;--muted:#697078;--line:#dfe3e6;--bg:#f4f5f6;--surface:#fff;--brand-red:#ef3028;--brand-red-dark:#d92720;--brand-gray:#737476;--brand-charcoal:#4f5154;--danger:#b42318}
*{box-sizing:border-box}
body{margin:0;zoom:1.1;font-family:"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
.siteHeader{height:84px;background:var(--brand-gray);border-bottom:1px solid #626366;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:relative}
.headerLogo{display:flex;align-items:center;min-width:230px}
.headerLogo img{display:block;width:210px;height:auto}
.headerTitle{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.headerTitle h1{margin:0;background:none;color:#ffffff;-webkit-text-fill-color:#ffffff;font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;font-size:31px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; font-stretch: condensed;text-shadow:none;transform:none}
.headerTitle h1 span{color:#ffffff;-webkit-text-fill-color:#ffffff}
.headerTitle h1 b{margin:0 9px;color:var(--brand-red);-webkit-text-fill-color:var(--brand-red);font-weight:700}
.headerTitle .sub{color:#e0e1e2;font-size:11px;font-weight:400;letter-spacing:.025em;margin-top:2px}
h1{margin:0;font-size:21px}.sub{font-size:11px;color:var(--muted);margin-top:3px}
main{padding:22px;max-width:1750px;margin:auto}
button{padding:9px 13px;border:1px solid #cbd1d6;border-radius:7px;background:#fff;font-weight:700;cursor:pointer;color:var(--ink);transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
button:hover{background:#f5f6f7}.primary,.promoteBtn{background:var(--brand-charcoal);color:#fff;border-color:var(--brand-charcoal)}
.primary:hover,.promoteBtn:hover{background:#3f4245;border-color:#3f4245}
#newTopBtn{background:var(--brand-red);border-color:var(--brand-red);color:#fff;min-width:84px}
#newTopBtn:hover{background:var(--brand-red-dark);border-color:var(--brand-red-dark)}
.headerActions{display:flex;align-items:center;gap:8px;margin-left:auto;z-index:1}
.cloudStatus{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  background:none;
  border:none;
  color:#e5e7eb;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}

.cloudStatus::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f59e0b;
}

.cloudStatus.saved::before{
  background:#4ade80;
}

.cloudStatus.error::before{
  background:#f87171;
}

.cloudStatus.saved,
.cloudStatus.error{
  background:none;
}
.cloudStatus.error{background:#b42318;border-color:#b42318}
#contactManagerBtn{background:#fff;color:var(--brand-charcoal);border-color:#fff}
#contactManagerBtn:hover{background:#f1f2f3;border-color:#f1f2f3}
.danger{color:var(--danger);border-color:#e1aaa6;background:#fff}.danger:hover{background:#fff3f2;border-color:var(--danger)}
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:5px}
.toolbar select,.toolbar input{width:auto;min-width:155px}
#filterStage{width:165px;min-width:165px}
#filterStatus{width:225px;min-width:225px}
.toolbar .customerFilter{min-width:220px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid #cbd1d6;border-radius:7px;background:#fff;font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-red);box-shadow:0 0 0 3px rgba(239,48,40,.12)}
.viewtoggle{display:flex;border:1px solid #cbd2d9;border-radius:7px;overflow:hidden;background:#fff;margin-left:auto}
.viewtoggle button{border:0;border-radius:0}.viewtoggle button+button{border-left:1px solid #cbd2d9}.viewtoggle button.active{background:var(--brand-charcoal);color:#fff}
.tablewrap{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:auto;max-height:calc(100vh - 180px);box-shadow:0 3px 12px rgba(37,42,47,.07)}
.contextMenu{position:fixed;display:none;z-index:100;background:#fff;border:1px solid #cbd1d6;border-radius:8px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.contextMenu button{width:100%;text-align:left;white-space:nowrap;border:0;background:#fff}
.contextMenu button:hover{background:#f1f2f3}
.authOverlay{display:flex;align-items:center;z-index:200;background:rgba(46,49,52,.82)}
.authError{min-height:18px;margin-top:10px;color:var(--danger);font-size:11px;font-weight:700}
table{width:100%;border-collapse:collapse;min-width:1450px}
th{text-align:left;background:var(--brand-gray);color:#fff;font-size:10px;text-transform:uppercase;letter-spacing:.045em;padding:11px 10px;white-space:nowrap;position:sticky;top:0;border-bottom:1px solid #5f6062;z-index:2}
th.sortable{cursor:pointer}th.sortable:hover{background:#68696b;color:#fff}th span:not(:empty){color:#fff}
td{padding:10px;border-top:1px solid #d9dee1;font-size:12px;vertical-align:middle}
tbody tr:not(.closed):nth-child(odd){background:#fff}
tbody tr:not(.closed):nth-child(even){background:#f4f5f6}
tbody tr:not(.closed):hover{background:#e9ecef}
tbody tr:not(.closed):hover td:first-child{box-shadow:inset 3px 0 0 var(--brand-red)}
tr.closed{background:#f0f1f2;color:#8a9199}tr.closed .stage, tr.closed .statuspill{opacity:.65}
.stage,.statuspill{display:inline-block;border-radius:999px;padding:5px 9px;font-weight:700;font-size:10px;white-space:nowrap;background:#eef0f2;color:#4f555b}
.stage-opportunity{background:#eef0f2;color:#4f555b}.stage-rom-quote{background:#d8dcdf;color:#41464b}.stage-formal-quote{background:var(--brand-gray);color:#fff}.stage-sales-order{background:var(--brand-charcoal);color:#fff}
.statusSelect{min-width:170px;padding:7px;font-size:12px;background:#fff;color:var(--ink);border-color:#cbd1d6}
.summaryCell{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actioncell{white-space:nowrap}.actioncell button{padding:7px 9px;font-size:11px;margin-right:4px}
.age{font-weight:800;font-size:13px}.tiny{font-size:9px;color:var(--muted);margin-top:2px;white-space:nowrap}
.overlay{position:fixed;inset:0;background:rgba(46,49,52,.66);display:none;align-items:flex-start;justify-content:center;padding:18px;overflow:auto;z-index:20}
.modal{width:min(800px,100%);background:#fff;border-radius:12px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.28);border-top:4px solid var(--brand-red);overflow:hidden}
.smallmodal{width:min(480px,100%)}
.editmodal{width:min(1180px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto;padding:0}
.editmodal .modalhead{position:sticky;top:0;background:#fff;z-index:5;padding:18px 22px 12px;margin:0;border-bottom:1px solid var(--line)}
.editmodal form{padding:16px 22px 0}
.editmodal .grid{grid-template-columns:repeat(3,1fr);gap:11px 14px}
.editmodal .wide{grid-column:span 3}
.editmodal textarea{min-height:58px;resize:vertical}
.editmodal .actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 0 14px;margin-top:14px;z-index:5}
.modalhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:12px}.modalhead h2{margin:0;font-size:20px;color:var(--brand-charcoal);font-weight:650}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.wide{grid-column:span 2}.field label{display:block;font-size:11px;font-weight:700;color:#566273;margin-bottom:5px}.req{color:#b42318}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.autowrap{position:relative}.suggestions{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid #cbd2d9;border-radius:7px;box-shadow:0 10px 25px #0002;max-height:220px;overflow:auto}
.suggestion{padding:9px 10px;cursor:pointer;font-size:12px}.suggestion:hover,.suggestion.active{background:#eef2f6}.addcustomer{border-top:1px solid #e6eaed;font-weight:700}
.contactPicker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}
.contactAddBtn{white-space:nowrap;padding-left:11px;padding-right:11px}
.contactManagerModal{width:min(1040px,calc(100vw - 36px));max-height:calc(100dvh - 40px);overflow:auto}
.contactManagerGrid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(380px,1.5fr);gap:18px;margin-top:18px}
.contactListPanel,.contactEditPanel{border:1px solid var(--line);border-radius:9px;padding:14px;background:#fafbfb}
.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.contactManagerModal h3{font-size:14px;margin:0 0 12px;color:var(--brand-charcoal)}
.sectionHead h3{margin:0}
.managedContactList{display:grid;gap:7px;max-height:300px;overflow:auto}
.managedContactCard{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;width:100%;background:#fff}
.managedContactCard strong{font-size:12px}.managedContactCard span{font-size:11px;color:#59616a}.managedContactCard small{font-size:10px;color:var(--muted)}
.emptyContactList{padding:28px 12px;text-align:center;color:var(--muted);font-size:12px}
.customerNotesField{margin-top:18px}.customerNotesField textarea{resize:vertical}
.help{font-size:10px;color:var(--muted);margin-top:4px}.empty{padding:50px;text-align:center;color:var(--muted)}
.closeChoices{display:grid;gap:8px}.closeChoices button{text-align:left;padding:12px}.warning{background:#fff6e5;border:1px solid #ead19a;border-radius:8px;padding:10px;font-size:12px;margin:12px 0}
a{color:var(--brand-red);font-weight:700;text-decoration:none}a:hover{color:var(--brand-red-dark);text-decoration:underline}
.toolbar input,
.toolbar select {
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid #b8bec4;
  border-radius: 4px;
  background-color: #ffffff;
  color: #3f4347;
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}
.toolbar input {
  padding-right: 12px;
}
.tablewrap {
  overflow-y: scroll;
}
html {
  overflow-y: scroll;
}
/* Keep Status at its normal All/Opportunity width */
th:nth-child(2),
td:nth-child(2) {
  width: 195px;
  min-width: 195px;
  max-width: 195px;
}

.statusSelect {
  width: 100%;
  min-width: 0;
}
.stage {
  width: 88px;
  min-width: 88px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.pipelineTotal {
  margin-left: 8px;
  color: #626870;
  font-size: 12px;
  white-space: nowrap;
}

.pipelineTotal strong {
  color: #34383d;
  font-size: 13px;
  font-weight: 700;
}
.closeChoices button.selected {
  background: #5f6368;
  border-color: #5f6368;
  color: #fff;
}
/* Summary multi-select dropdown */
.summaryDropdown {
  position: relative;
  width: 100%;
}

.summaryDropdown summary {
  position: relative;
  height: 38px;
  box-sizing: border-box;
  padding: 9px 36px 9px 12px;
  border: 1px solid #c7cdd3;
  border-radius: 4px;
  background: #fff;
  color: #34383d;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.summaryDropdown summary::-webkit-details-marker {
  display: none;
}

.summaryDropdown summary::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 8px;
  color: #555b61;
  font-size: 15px;
}

.summaryDropdown[open] summary {
  border-color: #737476;
}

.summaryChoices {
  position: absolute;
  z-index: 100;
  top: 42px;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #c7cdd3;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .14);
}

.summaryField .summaryChoices label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 8px;
  color: #34383d;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.summaryField .summaryChoices label:hover {
  background: #f2f3f4;
}

.summaryField .summaryChoices input[type="checkbox"] {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  flex: 0 0 15px;
  box-shadow: none;
}

.summaryOther {
  width: 100%;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  margin: 0;
  padding: 9px 10px;
  line-height: 18px;
  resize: none;
  align-self: start;
}
.summaryField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;
}

.summaryField > label {
  grid-column: 1 / -1;
}

.summaryField .summaryDropdown {
  grid-column: 1;
}

.summaryField .summaryOther {
  grid-column: 2;
}
.optionalSection {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #d7dadd;
}

.optionalSection > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  color: #555b61;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.optionalSection > summary::-webkit-details-marker {
  display: none;
}

.optionalSection > summary::after {
  content: "▼";
  color: #df3028;
  font-size: 9px;
  transition: transform 0.15s ease;
}

.optionalSection[open] > summary::after {
  transform: rotate(180deg);
}

.optionalGrid {
  margin-top: 14px;
}
.editGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summaryPairField {
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.span3 {
  grid-column: 1 / -1;
}

.romEditGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 12px;
}
.overlay{
  padding:20px;
  box-sizing:border-box;
  align-items:center;
}

.overlay .modal{
  box-sizing:border-box;
  max-height:calc(100dvh - 40px);
  margin:0;
}
.overlay .modal{
  max-height:calc(100dvh - 60px);
}
#newOverlay {
  overflow-y: auto;
  align-items: flex-start;
  padding: 20px 12px;
}

#newOverlay .modal {
  margin: auto;
  max-height: none;
}

#newOverlay .actions {
  padding-bottom: 4px;
}
body.auth-pending > header,
body.auth-pending > main,
body.auth-pending > .overlay:not(#authOverlay),
body.auth-pending > #tableContextMenu {
  display: none !important;
}

body.auth-pending #authOverlay {
  display: flex !important;
}
@media (max-width: 900px) {
  .editGrid,
  .romEditGrid,
  .summaryPairField {
    grid-template-columns: 1fr;
  }

  .summaryPairField,
  .span3 {
    grid-column: auto;
  }
}
@media (max-width: 700px) {
  .summaryField {
    grid-template-columns: 1fr;
  }

  .summaryField > label,
  .summaryField .summaryDropdown,
  .summaryField .summaryOther {
    grid-column: 1;
  }
  .contactManagerGrid{grid-template-columns:1fr}
}
@media(min-width:761px){
.editmodal #romEditFields>.grid{grid-template-columns:repeat(3,1fr)}
.editmodal #romEditFields .wide{grid-column:span 3}
}
@media(max-width:760px){.siteHeader{height:auto;min-height:118px;padding:16px 18px;align-items:flex-start}.headerLogo{min-width:0}.headerLogo img{width:165px}.headerTitle{top:auto;bottom:14px}.headerTitle h1{font-size:21px}.headerTitle .sub{display:none}.headerActions{margin-left:auto;flex-direction:column;align-items:stretch}.headerActions button{padding:7px 9px;font-size:11px}.tablewrap{max-height:calc(100vh - 245px)}.grid,.editmodal .grid,.editmodal #romEditFields>.grid{grid-template-columns:1fr}.wide,.editmodal .wide,.editmodal #romEditFields .wide{grid-column:span 1}.viewtoggle{margin-left:0}}