/* TRACE demo - ACC (Autodesk Construction Cloud / Build) window replica styles.
   Agent B deliverable. Every class is prefixed "acc-". */

.acc-root{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;color:#3c3c3c;-webkit-font-smoothing:antialiased}
.acc-root *,.acc-root *::before,.acc-root *::after{box-sizing:border-box}
.acc-root button{font-family:inherit;font-size:inherit;background:none;border:none;padding:0;margin:0;cursor:pointer;color:inherit}
.acc-root svg{display:block}

/* ---------- top app bar ---------- */
.acc-appbar{flex:0 0 48px;display:flex;align-items:center;background:#000;color:#fff;padding:0 14px 0 6px;min-width:0}
.acc-appbar-btn{width:36px;height:36px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:2px;color:#fff}
.acc-appbar-btn:hover{background:rgba(255,255,255,.14)}
.acc-brand{display:flex;align-items:center;gap:9px;margin:0 2px 0 6px;white-space:nowrap;flex:0 0 auto}
.acc-brand-name{font-size:13px;color:#fff;letter-spacing:.3px}
.acc-brand-name b{font-weight:700;letter-spacing:1.4px;margin-right:5px}
.acc-appbar-divider{width:1px;height:20px;background:rgba(255,255,255,.3);margin:0 12px;flex:0 0 auto}
.acc-appbar-module{font-size:13px;color:#fff;letter-spacing:.3px;flex:0 0 auto}
.acc-project{display:flex;align-items:center;gap:8px;margin-left:28px;padding:7px 11px;border-radius:2px;font-size:13px;color:#fff;white-space:nowrap;min-width:0}
.acc-project:hover{background:rgba(255,255,255,.14)}
.acc-project svg{flex:0 0 auto;opacity:.85}
.acc-appbar-spacer{flex:1 1 auto;min-width:8px}
.acc-avatar{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:#0696D7;color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;margin-left:8px;user-select:none}

/* ---------- main split ---------- */
.acc-main{flex:1 1 auto;display:flex;min-height:0}

/* ---------- left icon rail ---------- */
.acc-rail{flex:0 0 48px;background:#2a2a2a;display:flex;flex-direction:column;align-items:center;padding-top:6px;z-index:30}
.acc-rail-btn{position:relative;width:48px;height:44px;display:flex;align-items:center;justify-content:center;color:#b4b4b4}
.acc-rail-btn:hover{color:#fff;background:#3a3a3a}
.acc-rail-btn.acc-active{color:#fff;background:#1c1c1c;box-shadow:inset 3px 0 0 #0696D7}
.acc-rail-btn::after{content:attr(data-tip);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:#3c3c3c;color:#fff;font-size:11px;line-height:1;padding:6px 9px;border-radius:2px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease .08s;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:80}
.acc-rail-btn:hover::after{opacity:1}
.acc-rail-badge{position:absolute;top:4px;right:6px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#D74E3F;color:#fff;font-size:9.5px;font-weight:700;line-height:15px;text-align:center;pointer-events:none}

/* ---------- issues panel ---------- */
.acc-panel{position:relative;flex:0 0 360px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;min-height:0;overflow:hidden;z-index:20}
.acc-list{display:flex;flex-direction:column;height:100%;min-height:0}
.acc-panel-header{display:flex;align-items:center;gap:9px;padding:16px 16px 11px;flex:0 0 auto}
.acc-panel-title{font-size:17px;font-weight:700;color:#292929}
.acc-count{min-width:22px;padding:2px 8px;border-radius:10px;background:#ededed;color:#5f5f5f;font-size:11px;font-weight:700;text-align:center;line-height:1.4}

.acc-search{position:relative;margin:0 16px 10px;flex:0 0 auto}
.acc-search svg{position:absolute;left:9px;top:9px;color:#8a8a8a;pointer-events:none}
.acc-search input{width:100%;height:32px;border:1px solid #c9c9c9;border-radius:2px;background:#fff;padding:0 10px 0 31px;font-family:inherit;font-size:13px;color:#3c3c3c;outline:none}
.acc-search input::placeholder{color:#9a9a9a}
.acc-search input:focus{border-color:#0696D7;box-shadow:0 0 0 1px rgba(6,150,215,.25)}

.acc-filters{display:flex;gap:8px;padding:0 16px 12px;border-bottom:1px solid #ececec;flex:0 0 auto}
.acc-filter{font-size:12px;color:#3c3c3c;background:#fff;border:1px solid #c9c9c9;border-radius:14px;padding:4px 13px;line-height:1.3}
.acc-filter:hover{border-color:#8f8f8f}
.acc-filter.acc-active{background:#E3F3FB;border-color:#0696D7;color:#05699A;font-weight:700}

.acc-cards{flex:1 1 auto;overflow-y:auto;min-height:0}
.acc-cards::-webkit-scrollbar{width:9px}
.acc-cards::-webkit-scrollbar-thumb{background:#d2d2d2;border-radius:5px;border:2px solid #fff}
.acc-cards::-webkit-scrollbar-thumb:hover{background:#b5b5b5}

.acc-card{display:flex;align-items:center;gap:11px;padding:11px 13px 11px 12px;border-bottom:1px solid #ececec;border-left:3px solid transparent;cursor:pointer;animation:accCardIn .3s ease-out}
.acc-card:hover{background:#f6fafc}
.acc-card.acc-selected{background:#EDF6FC;border-left-color:#0696D7}
.acc-card-thumb{width:56px;height:56px;flex:0 0 56px;object-fit:cover;border:1px solid #dcdcdc;border-radius:2px;background:#f3f3f3}
.acc-card-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.acc-card-title{font-size:13px;font-weight:700;color:#292929;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-card-meta{display:flex;align-items:center;gap:8px;min-width:0}
.acc-card-sub{font-size:11.5px;color:#7d7d7d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes accCardIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* status chips */
.acc-chip{display:inline-flex;align-items:center;flex:0 0 auto;font-size:11px;font-weight:700;line-height:1;padding:4px 9px;border-radius:10px;border:1px solid transparent;background:#fff;white-space:nowrap}
.acc-chip--open{color:#A66400;border-color:#E8930C}
.acc-chip--pending{color:#A66400;border-color:#E8930C;background:#FFF5E5}
.acc-chip--in_progress{color:#3B73AF;border-color:#3B73AF}
.acc-chip--in_review{color:#7C3AED;border-color:#7C3AED}
.acc-chip--not_approved{color:#A8423A;border-color:#C2655E}
.acc-chip--in_dispute{color:#A8423A;border-color:#C2655E}
.acc-chip--closed{color:#fff;border-color:#6DA944;background:#6DA944}

/* empty state */
.acc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 30px;text-align:center}
.acc-empty svg{color:#d2d2d2}
.acc-empty p{font-size:13px;line-height:1.65;max-width:240px;color:#8a8a8a;margin:0}

/* ---------- issue detail drawer ---------- */
.acc-drawer{position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .25s ease;box-shadow:-8px 0 20px rgba(0,0,0,.1);z-index:40}
.acc-drawer.acc-open{transform:translateX(0)}
.acc-drawer-header{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #ececec;flex:0 0 auto;min-width:0}
.acc-drawer-back{width:30px;height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:2px;color:#3c3c3c}
.acc-drawer-back:hover{background:#ededed}
.acc-drawer-number{font-size:16px;font-weight:700;color:#292929;flex:0 0 auto}
.acc-drawer-title{font-size:13px;color:#6c6c6c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-drawer-body{flex:1 1 auto;overflow-y:auto;padding:16px;min-height:0}
.acc-drawer-body::-webkit-scrollbar{width:9px}
.acc-drawer-body::-webkit-scrollbar-thumb{background:#d2d2d2;border-radius:5px;border:2px solid #fff}

.acc-field{margin-bottom:17px}
.acc-field-label{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#8a8a8a;margin-bottom:6px}
.acc-field-value{font-size:13px;color:#3c3c3c;line-height:1.55;word-wrap:break-word}
.acc-shot{display:block;width:100%;border:1px solid #d4d4d4;border-radius:2px;background:#fafafa}

/* status dropdown styled like an ACC chip */
.acc-status-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;height:38px;border:1.5px solid #c9c9c9;border-radius:3px;padding:0 36px 0 13px;font-family:inherit;font-size:13px;font-weight:700;color:#3c3c3c;background-color:#fff;cursor:pointer;outline:none;background-repeat:no-repeat;background-position:right 12px center;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23666666" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>')}
.acc-status-select:focus{box-shadow:0 0 0 2px rgba(6,150,215,.3)}
.acc-status-select option{color:#3c3c3c;background:#fff;font-weight:400}
.acc-status-select.acc-st-open{color:#A66400;border-color:#E8930C}
.acc-status-select.acc-st-in_progress{color:#3B73AF;border-color:#3B73AF}
.acc-status-select.acc-st-in_review{color:#7C3AED;border-color:#7C3AED}
.acc-status-select.acc-st-closed{color:#fff;border-color:#6DA944;background-color:#6DA944;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23ffffff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>')}

/* ---------- sheet viewer ---------- */
.acc-viewer{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0;background:#f5f5f5}
.acc-viewer-toolbar{flex:0 0 40px;display:flex;align-items:center;gap:5px;background:#fff;border-bottom:1px solid #e0e0e0;padding:0 14px}
.acc-viewer-title{font-size:13px;font-weight:700;color:#292929;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-tool-btn{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;border-radius:2px;color:#5a5a5a}
.acc-tool-btn:hover{background:#ededed;color:#222}
.acc-tool-btn:active{background:#e0e0e0}
.acc-tool-zoom{font-size:12px;color:#5a5a5a;min-width:44px;text-align:center;flex:0 0 auto}
.acc-tool-divider{width:1px;height:18px;background:#ddd;margin:0 5px;flex:0 0 auto}

.acc-canvas{flex:1 1 auto;position:relative;overflow:hidden;min-height:0}
.acc-sheetbox{position:absolute;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.2)}
.acc-pinsvg{position:absolute;inset:0;width:100%;height:100%;z-index:5;overflow:visible}

/* ---------- pushpins ---------- */
.acc-pin{cursor:pointer}
.acc-pin-drop{animation:accPinDrop .55s ease-out both}
@keyframes accPinDrop{
  0%{opacity:0;transform:translateY(-80px)}
  55%{opacity:1;transform:translateY(0)}
  72%{transform:translateY(-11px)}
  86%{transform:translateY(0)}
  94%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
.acc-pin-body{stroke:#fff;stroke-width:1.4;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.acc-pin-dot{fill:#fff}
.acc-pin-halo{display:none;fill-opacity:.25}
.acc-pin.acc-selected .acc-pin-halo{display:block}
.acc-pin-check{display:none;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.acc-pin--closed .acc-pin-check{display:block}
.acc-pin--closed .acc-pin-dot{display:none}

/* ---------- zoom / pan ---------- */
.acc-canvas{cursor:grab}
.acc-canvas.acc-panning{cursor:grabbing}
.acc-canvas.acc-panning .acc-pin{pointer-events:none}

/* ---------- refresh button ---------- */
.acc-refresh{
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:none;background:transparent;border-radius:4px;
  color:#666;cursor:pointer;
}
.acc-refresh:hover{background:#f0f0f0;color:#0696D7}
.acc-refresh.acc-spinning svg{animation:acc-spin .65s linear infinite}
@keyframes acc-spin{to{transform:rotate(360deg)}}
.acc-cards.acc-refreshing{opacity:.45;transition:opacity .15s}

/* ---------- drawer overflow menu ---------- */
.acc-drawer-header{position:relative}
.acc-drawer-more{
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:none;background:transparent;border-radius:4px;
  color:#666;cursor:pointer;flex:0 0 auto;
}
.acc-drawer-more:hover{background:#f0f0f0;color:#202020}
.acc-more-menu{
  display:none;position:absolute;right:8px;top:40px;z-index:40;background:#fff;
  border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.18);
  min-width:170px;padding:4px 0;
}
.acc-more-menu.acc-open{display:block}
.acc-more-item{
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 14px;border:none;
  background:transparent;font:13px Arial,Helvetica,sans-serif;color:#202020;
  cursor:pointer;text-align:left;
}
.acc-more-item:hover{background:#f5f5f5}
.acc-more-item.acc-danger{color:#D74545}

/* ---------- delete confirmation ---------- */
.acc-confirm-overlay{
  display:none;position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.4);
  align-items:center;justify-content:center;
}
.acc-confirm-overlay.acc-open{display:flex}
.acc-confirm{
  width:380px;background:#fff;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:22px 24px;font-family:Arial,Helvetica,sans-serif;
}
.acc-confirm-title{font-size:16px;font-weight:bold;color:#202020;margin-bottom:10px}
.acc-confirm-text{font-size:13px;color:#555;line-height:1.55;margin-bottom:20px}
.acc-confirm-actions{display:flex;justify-content:flex-end;gap:10px}
.acc-btn-ghost{
  padding:8px 18px;border:1px solid #c8c8c8;background:#fff;border-radius:3px;
  font:13px Arial,Helvetica,sans-serif;color:#333;cursor:pointer;
}
.acc-btn-ghost:hover{background:#f5f5f5}
.acc-btn-danger{
  padding:8px 18px;border:none;background:#D74545;border-radius:3px;
  font:13px Arial,Helvetica,sans-serif;color:#fff;cursor:pointer;
}
.acc-btn-danger:hover{background:#c23a3a}

/* touch: let the sheet own gestures, not the page */
.acc-canvas{touch-action:none}