/* SID Design System Core 1.0 — shared production components */
:root{
  --sid-color-graphite-950:#24292e;
  --sid-color-graphite-900:#2f3439;
  --sid-color-graphite-800:#3d444b;
  --sid-color-graphite-700:#505961;
  --sid-color-muted:#707983;
  --sid-color-border:#dde1e4;
  --sid-color-soft:#f1f2f2;
  --sid-color-canvas:#f7f7f5;
  --sid-color-surface:#ffffff;
  --sid-color-amber:#d79a2e;
  --sid-color-amber-dark:#b67b18;
  --sid-color-amber-soft:#fff4df;
  --sid-color-success:#4b9462;
  --sid-color-danger:#bd5555;
  --sid-color-text:#252b31;
  --sid-radius-sm:10px;
  --sid-radius-md:14px;
  --sid-radius-lg:18px;
  --sid-shadow-sm:0 7px 20px rgba(30,37,43,.05);
  --sid-shadow-md:0 13px 30px rgba(30,37,43,.09);
  --sid-transition:160ms ease;
}

/* Card */
.sid-card{
  background:var(--sid-color-surface);
  border:1px solid var(--sid-color-border);
  border-radius:var(--sid-radius-lg);
  box-shadow:var(--sid-shadow-sm);
}
.sid-card:hover{
  box-shadow:var(--sid-shadow-md);
}

/* Metric card */
.sid-metric-card{
  position:relative;
  overflow:hidden;
  min-height:150px;
  padding:19px 20px 17px;
  background:var(--sid-color-surface);
  border:1px solid var(--sid-color-border);
  border-radius:var(--sid-radius-lg);
  box-shadow:var(--sid-shadow-sm);
  transition:transform var(--sid-transition),box-shadow var(--sid-transition),border-color var(--sid-transition);
}
.sid-metric-card:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--sid-color-amber);
}
.sid-metric-card:hover{
  transform:translateY(-3px);
  border-color:#d6c19a;
  box-shadow:var(--sid-shadow-md);
}
.sid-metric-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
.sid-metric-card__code{
  display:grid;
  place-items:center;
  width:35px;height:35px;
  border-radius:11px;
  color:var(--sid-color-graphite-950);
  background:var(--sid-color-amber-soft);
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
}
.sid-metric-card__label{
  color:var(--sid-color-muted);
  font-size:11px;
}
.sid-metric-card__value{
  display:block;
  margin:14px 0 8px;
  color:var(--sid-color-graphite-950);
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.035em;
}
.sid-metric-card__meta{
  color:#90989f;
  font-size:9px;
  line-height:1.45;
}
.sid-metric-card__action{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  color:var(--sid-color-amber-dark);
  font-size:9px;
  font-weight:900;
  text-decoration:none;
}

/* Panel */
.sid-panel{
  background:var(--sid-color-surface);
  border:1px solid var(--sid-color-border);
  border-radius:var(--sid-radius-lg);
  box-shadow:var(--sid-shadow-sm);
  overflow:hidden;
}
.sid-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:17px 19px;
  border-bottom:1px solid #edf0f1;
}
.sid-panel__header h2,
.sid-panel__header h3{margin:0;color:var(--sid-color-graphite-950)}
.sid-panel__body{padding:18px}

/* Buttons / action bar */
.sid-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:var(--sid-radius-sm);
  font-size:10px;
  font-weight:850;
  cursor:pointer;
  transition:transform var(--sid-transition),filter var(--sid-transition),box-shadow var(--sid-transition);
}
.sid-button:hover{transform:translateY(-1px)}
.sid-button--primary{background:var(--sid-color-amber);color:var(--sid-color-graphite-950)}
.sid-button--secondary{background:var(--sid-color-graphite-800);color:#fff}
.sid-button--tertiary{background:#fff;color:var(--sid-color-graphite-900);border-color:var(--sid-color-border)}
.sid-button--danger{background:var(--sid-color-danger);color:#fff}
.sid-actionbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:16px;
  border-top:1px solid #edf0f1;
}

/* Badges */
.sid-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.sid-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sid-badge--pending{color:#8b641d;background:#fff2d8}
.sid-badge--review{color:#625743;background:#eeeae0}
.sid-badge--authorized{color:#3c454d;background:#e8ebed}
.sid-badge--success{color:#356d49;background:#e8f3eb}
.sid-badge--danger{color:#8c3d3d;background:#f8e7e7}

/* Outlook-style item */
.sid-list-card{
  position:relative;
  background:#fff;
  border-bottom:1px solid #edf0f1;
  transition:background var(--sid-transition),box-shadow var(--sid-transition),transform var(--sid-transition);
}
.sid-list-card:hover{background:#fffaf0}
.sid-list-card.is-selected{
  background:#fff7e8;
  box-shadow:inset 4px 0 0 var(--sid-color-amber);
}
.sid-list-card.is-selected:after{
  content:"";
  position:absolute;
  right:14px;top:50%;
  width:7px;height:7px;
  border-top:2px solid var(--sid-color-amber-dark);
  border-right:2px solid var(--sid-color-amber-dark);
  transform:translateY(-50%) rotate(45deg);
}

/* Inspector */
.sid-inspector-summary{
  padding:15px;
  border-radius:var(--sid-radius-md);
  background:linear-gradient(145deg,#fafafa,#f4f5f5);
  border:1px solid #e9ecee;
}
.sid-inspector-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
}
.sid-inspector-field{
  min-height:92px;
  padding:13px;
  background:#fafafa;
  border:1px solid #eceff0;
  border-radius:var(--sid-radius-md);
}
.sid-inspector-field__label{
  display:block;
  color:var(--sid-color-muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.sid-inspector-field__value{
  display:block;
  margin-top:8px;
  color:var(--sid-color-graphite-950);
  font-size:11px;
  line-height:1.55;
}

/* Timeline */
.sid-timeline{display:grid;gap:0}
.sid-timeline__item{
  position:relative;
  display:grid;
  grid-template-columns:15px minmax(0,1fr);
  gap:11px;
  padding:0 0 15px;
}
.sid-timeline__item:not(:last-child):before{
  content:"";
  position:absolute;
  left:3px;top:12px;bottom:0;
  width:1px;
  background:#e4e7e8;
}
.sid-timeline__dot{
  position:relative;
  z-index:1;
  width:8px;height:8px;
  margin-top:4px;
  border-radius:50%;
  background:var(--sid-color-amber);
  box-shadow:0 0 0 4px rgba(215,154,46,.13);
}
.sid-timeline__content strong{display:block;font-size:10px}
.sid-timeline__content span{display:block;margin-top:3px;color:var(--sid-color-muted);font-size:9px}

/* Toast */
.sid-toast-stack{
  position:fixed;
  right:22px;bottom:22px;
  z-index:999999;
  display:grid;gap:9px;
  width:min(360px,calc(100vw - 30px));
}
.sid-toast{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 14px;
  color:#fff;
  background:var(--sid-color-graphite-900);
  border-left:4px solid var(--sid-color-amber);
  border-radius:12px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  animation:sidToastIn .2s ease both;
}
.sid-toast strong{display:block;font-size:10px}
.sid-toast span{display:block;margin-top:3px;color:rgba(255,255,255,.72);font-size:9px}
@keyframes sidToastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .sid-inspector-grid{grid-template-columns:1fr}
  .sid-actionbar .sid-button{flex:1 1 100%}
}