@import url("/static/css/tokens.css");
:root { --focus-ring: 0 0 0 3px rgba(233,134,0,.28); }
* { box-sizing: border-box; }
html { background: var(--detrade-surface); }
body { margin: 0; font: 14px/1.5 Montserrat, Arial, sans-serif; color: var(--detrade-ink); background: var(--detrade-surface); }
a { color: var(--detrade-graphite); }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:16px 24px; background:var(--detrade-ink); color:var(--detrade-white); }
.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-weight:800; letter-spacing:.04em; }
.brand small { color:var(--detrade-orange); font-size:.72em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:2px solid var(--detrade-orange); border-radius:50%; color:var(--detrade-orange); font-weight:900; }
.env, .eyebrow { font-size:11px; letter-spacing:.12em; font-weight:800; }
.site-nav { display:flex; gap:4px; padding:0 18px; background:var(--detrade-white); border-bottom:1px solid var(--detrade-border); overflow-x:auto; }
.site-nav a { color:var(--detrade-graphite); text-decoration:none; padding:13px 10px; border-bottom:3px solid transparent; white-space:nowrap; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { color:var(--detrade-ink); border-color:var(--detrade-orange); }
main { width:min(1280px,100%); margin:0 auto; padding:32px 24px 56px; }
h1 { margin:0 0 20px; font-size:clamp(24px,4vw,34px); line-height:1.1; }
h2, h3 { margin-top:0; }
.panel, .card, .metric, .timeline-item, .login-card { background:var(--detrade-white); border:1px solid var(--detrade-border); border-radius:var(--radius-md); padding:20px; box-shadow:0 2px 8px rgba(29,29,27,.04); }
.grid, .metric-grid, .cards, .cols { display:grid; gap:16px; }
.grid, .metric-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cards { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.cols { grid-template-columns:repeat(4,minmax(220px,1fr)); overflow-x:auto; padding-bottom:8px; }
.column { min-width:220px; }
.toolbar, .actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0; }
.toolbar form { display:flex; gap:8px; flex:1 1 260px; }
.muted { color:var(--detrade-stone); }
.notice { border-left:4px solid var(--detrade-orange); padding:12px 16px; background:#fff7eb; margin:14px 0; }
.panel.warning { border-color:var(--detrade-orange); background:#fff7eb; } .notice.error { border-color:#a33a2b; background:#fff2f0; }
.empty-state { text-align:center; padding:32px 16px; color:var(--detrade-stone); }
button, .button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 14px; border:1px solid var(--detrade-border); border-radius:var(--radius-sm); background:var(--detrade-white); color:var(--detrade-ink); text-decoration:none; cursor:pointer; font:inherit; }
.button:hover, button:hover { border-color:var(--detrade-orange); }
.button-primary { background:var(--detrade-orange); border-color:var(--detrade-orange); color:var(--detrade-white); font-weight:800; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:none; box-shadow:var(--focus-ring); }
input, select, textarea { width:100%; min-height:40px; padding:9px 10px; border:1px solid var(--detrade-border); border-radius:6px; background:var(--detrade-white); color:var(--detrade-ink); font:inherit; font-weight:400; }
label, .form-label { display:grid; gap:6px; font-weight:600; }
.data-list { display:grid; gap:0; margin:0; }
.data-item { display:grid; grid-template-columns:minmax(150px, 0.7fr) minmax(0, 1.3fr); gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--detrade-border); }
.data-item dt { color:var(--detrade-muted); font-size:13px; font-weight:600; }
.data-item dd { margin:0; line-height:1.45; font-weight:400; }
.detail-section { max-width:900px; margin:24px 0; padding:20px 24px; background:var(--detrade-white); border:1px solid var(--detrade-border); border-radius:var(--radius-md); }
.detail-section h2 { margin-top:0; }
.technical-details { max-width:900px; margin:18px 0; color:var(--detrade-muted); }
.technical-details summary { cursor:pointer; font-weight:600; }
.button-small { min-height:34px; padding:7px 10px; font-size:12px; }
.filter-bar { padding:12px; background:var(--detrade-surface); border:1px solid var(--detrade-border); border-radius:var(--radius-md); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-field-full { grid-column:1/-1; }
fieldset { min-width:0; margin:0 0 20px; padding:16px; border:1px solid var(--detrade-border); border-radius:var(--radius-sm); }
legend { padding:0 8px; font-weight:800; }
table { width:100%; border-collapse:collapse; background:var(--detrade-white); }
th, td { padding:12px; border-bottom:1px solid var(--detrade-border); text-align:left; vertical-align:top; }
th { color:var(--detrade-stone); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.badge { display:inline-flex; padding:3px 7px; border-radius:999px; background:var(--detrade-surface); font-size:12px; } .status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800; }
.status-completed, .status-success { color:#17663c; background:#e8f5ed; }
.status-info { color:#285477; background:#e5f0f7; }
.status-danger { color:#8d2d22; background:#ffe5e0; }
.status-warning { color:#875700; background:#fff2cc; }
.status-pending { color:#875700; background:#fff2cc; }
.status-failed { color:#8d2d22; background:#ffe5e0; }
.status-ambiguous { color:#5a3c7a; background:#efe5fa; }
.timeline-item { display:grid; gap:8px; }
.timeline { display:grid; gap:12px; }
.login-page { min-height:100vh; background:var(--detrade-ink); }
.login-page main { display:grid; min-height:100vh; place-items:center; }
.login-card { width:min(440px,100%); padding:32px; }
.brand-dark { color:var(--detrade-ink); margin-bottom:24px; }
.login-card form { display:grid; gap:10px; }
.login-card .button-primary { margin-top:10px; width:100%; }
@media (max-width: 760px) { .site-header { padding:14px 16px; } main { padding:24px 16px 40px; } .grid, .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .form-grid { grid-template-columns:1fr; } .form-field-full { grid-column:auto; } .cols { grid-template-columns:repeat(4,minmax(240px,1fr)); } table { display:block; overflow-x:auto; white-space:nowrap; } }
@media (max-width: 360px) { main { padding:20px 12px 32px; } .site-header { align-items:flex-start; flex-direction:column; } .grid, .metric-grid { grid-template-columns:1fr; } .panel, .card, .metric, .login-card { padding:16px; } .site-nav { padding:0 8px; } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position:relative; min-height:64px; }
.brand img { display:block; width:min(190px, 48vw); height:auto; }
.menu-toggle, .drawer-close, .shell-user button { border:0; background:transparent; color:inherit; }
.menu-toggle { padding:8px 10px; font-size:20px; }
.shell-user { position:relative; }
.shell-user button { font-weight:700; }
.user-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; display:none; min-width:170px; padding:10px; background:var(--detrade-white); color:var(--detrade-ink); border:1px solid var(--detrade-border); border-radius:var(--radius-sm); box-shadow:0 4px 12px rgba(29,29,27,.12); }
.user-menu.is-open { display:grid; gap:8px; }
.user-menu form { margin:0; }
.user-menu button, .user-menu a { display:block; width:100%; padding:8px; color:inherit; text-align:left; text-decoration:none; }
.shell-drawer { position:fixed; inset:0 auto 0 0; z-index:25; display:grid; align-content:start; gap:4px; width:min(300px,84vw); padding:72px 16px 24px; background:var(--detrade-ink); transform:translateX(-105%); transition:transform .18s ease; }
.shell-drawer.is-open { transform:translateX(0); }
.shell-drawer a { padding:12px; color:var(--detrade-white); text-decoration:none; border-left:3px solid transparent; }
.shell-drawer a:hover, .shell-drawer a:focus-visible, .shell-drawer a.active { color:var(--detrade-white); border-color:var(--detrade-orange); background:rgba(255,255,255,.08); }
.drawer-close { position:absolute; top:16px; right:16px; font-size:28px; }
.shell-backdrop { position:fixed; inset:0; z-index:24; display:none; background:rgba(29,29,27,.48); }
.shell-backdrop.is-open { display:block; }
body.drawer-open { overflow:hidden; }
.urgency-overdue { color:#8d2d22; background:#ffe5e0; }
.urgency-today { color:#875700; background:#fff2cc; }
.urgency-closing_soon { color:#8a4a00; background:#fff0dc; }
.urgency-no_action { color:#285477; background:#e5f0f7; }
.urgency-normal { color:var(--detrade-graphite); background:var(--detrade-surface); }
.login-wordmark { display:block; width:min(220px, 80%); margin-bottom:28px; }
@media (max-width:760px) {
  .site-header { padding:12px 16px; }
  .cols { display:grid; grid-template-columns:1fr; overflow:visible; }
  .column { min-width:0; }
}
@media (max-width:360px) {
  .brand img { width:150px; }
  .shell-user button { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

.site-header { background:var(--detrade-white); color:var(--detrade-ink); border-bottom:1px solid var(--detrade-border); }
.mobile-records { display:none; }
.record-card { display:grid; gap:8px; padding:16px; background:var(--detrade-white); border:1px solid var(--detrade-border); border-radius:var(--radius-md); }
.record-card strong { font-size:16px; }
.pipeline-stage { color:inherit; text-decoration:none; }
.pipeline-stage summary { display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:center; cursor:pointer; list-style:none; }
.pipeline-stage summary::-webkit-details-marker { display:none; }
.pipeline-stage summary::after { content:'▾'; grid-column:2; grid-row:1; }
.pipeline-stage-items { display:grid; gap:10px; margin-top:16px; }
.pipeline-stage-items article { display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--detrade-border); }
.pipeline-stage-items > a { width:max-content; }
.pipeline-bar { display:block; height:6px; margin-top:10px; overflow:hidden; background:var(--detrade-surface); border-radius:99px; }
.pipeline-bar i { display:block; height:100%; background:var(--detrade-orange); border-radius:inherit; }
.user-identity { display:grid; gap:2px; padding:8px; border-bottom:1px solid var(--detrade-border); }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.settings-grid form { display:grid; gap:12px; }
.settings-grid hr { width:100%; border:0; border-top:1px solid var(--detrade-border); }
@media (max-width:760px) {
  .desktop-table { display:none; }
  .mobile-records { display:grid; gap:12px; }
  .settings-grid { grid-template-columns:1fr; }
  .toolbar > input, .toolbar > select, .toolbar > button, .toolbar > .button { width:auto; flex:1 1 140px; }
  .toolbar form { width:100%; }
  .toolbar form input { min-width:0; }
}
@media (max-width:420px) {
  input, select, textarea { font-size:16px; }
  button, .button { min-height:44px; }
  .site-header { padding-top:max(12px, env(safe-area-inset-top)); }
  main { padding-left:12px; padding-right:12px; }
}
/* v3 hierarchy: keep the sales surface calm and scannable. */
.cockpit-page { min-height:100vh; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; }
.page-header h1 { margin-bottom:6px; }
.page-header .eyebrow { margin:0 0 8px; color:var(--detrade-orange); }
.site-header { box-shadow:0 1px 0 rgba(29,29,27,.06); }
.shell-user button { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px; border-radius:999px; }
.shell-user button:hover { background:var(--detrade-surface); }
.user-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--detrade-orange); color:var(--detrade-white); font-size:11px; font-weight:800; }
.user-label { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.metric-grid .metric { min-height:104px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.metric-grid .metric strong { font-size:21px; }
.pipeline-filters { padding:14px; background:var(--detrade-white); border:1px solid var(--detrade-border); border-radius:var(--radius-md); }
.pipeline-filters input, .pipeline-filters select { flex:1 1 150px; width:auto; }
.pipeline-filters button { flex:0 0 auto; }
fieldset { background:var(--detrade-white); }
fieldset + fieldset { margin-top:16px; }
@media (max-width:760px) {
  main { padding-top:24px; }
  .page-header { align-items:flex-start; margin-bottom:18px; }
  .page-header h1 { font-size:28px; }
  .user-label { max-width:120px; }
  .pipeline-filters { align-items:stretch; }
  .pipeline-filters input, .pipeline-filters select, .pipeline-filters button, .pipeline-filters .button { width:100%; flex:1 1 100%; }
}
@media (max-width:420px) {
  .page-header h1 { font-size:25px; }
  .user-label { display:none; }
}