/* ============================================================
   Assignments inbox — Garrison Command assignments inside the CEA Hub
   Fills and glow only; no outlines, matching the rest of the app.
   ============================================================ */

.asg-wrap { padding: 0 18px 120px; max-width: 640px; margin: 0 auto; }

/* tabs */
.asg-tabs { display: flex; gap: 8px; margin: 4px 0 18px; }
.asg-tab {
  flex: 1; padding: 10px 12px; border-radius: 13px; border: 0;
  background: rgba(255,255,255,.05); color: #8a8a9b;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: .16s;
}
.asg-tab.active {
  color: #fff;
  background: linear-gradient(120deg, rgba(233,113,50,.55), rgba(233,113,50,.18));
  box-shadow: 0 6px 18px rgba(233,113,50,.32);
}

/* assignment card */
.asg-card {
  position: relative; overflow: hidden;
  padding: 15px 16px 14px 19px; border-radius: 18px; margin-bottom: 11px;
  background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  cursor: pointer; transition: transform .14s, background .16s;
}
.asg-card:active { transform: scale(.985); }
.asg-card .stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.stripe-routine   { background: rgba(255,255,255,.22); }
.stripe-important { background: linear-gradient(180deg,#FFB347,#E97132); box-shadow: 0 0 14px rgba(233,113,50,.6); }
.stripe-urgent    { background: linear-gradient(180deg,#ff6b6b,#c92a2a); box-shadow: 0 0 14px rgba(239,68,68,.65); }

.asg-card.unseen { background: linear-gradient(150deg, rgba(233,113,50,.22), rgba(255,255,255,.035)); }
.asg-new-dot {
  position: absolute; right: 14px; top: 15px; width: 9px; height: 9px; border-radius: 50%;
  background: #E97132; box-shadow: 0 0 0 0 rgba(233,113,50,.75); animation: ordPulse 2s infinite;
}
@keyframes ordPulse { 70% { box-shadow: 0 0 0 10px rgba(233,113,50,0); } 100% { box-shadow: 0 0 0 0 rgba(233,113,50,0); } }

.asg-from  { font-size: 10.5px; letter-spacing: .12em; font-weight: 800; color: #FFB347; text-transform: uppercase; }
.asg-title { font-size: 14.6px; font-weight: 700; line-height: 1.35; margin: 5px 0 7px; color: #f2f2f5; padding-right: 18px; }
.asg-meta  { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11.4px; color: #8a8a9b; }
.asg-due.late { color: #ff8f8f; font-weight: 800; }

.asg-pill { font-size: 9.6px; font-weight: 900; letter-spacing: .1em; padding: 4px 9px; border-radius: 20px; }
.pill-pending     { background: rgba(255,255,255,.1);  color: #b9b9c8; }
.pill-accepted    { background: rgba(37,194,110,.18);  color: #57e39b; }
.pill-in_progress { background: rgba(25,165,215,.18);  color: #6ecbf0; }
.pill-submitted   { background: rgba(176,59,214,.2);   color: #dda2f0; }
.pill-completed   { background: rgba(37,194,110,.26);  color: #7cf0b6; }
.pill-declined    { background: rgba(239,68,68,.2);    color: #ff8f8f; }
.pill-more_time   { background: rgba(240,160,42,.22);  color: #ffc264; }
.pill-cancelled   { background: rgba(255,255,255,.07); color: #6f6f80; }

/* detail */
.asg-detail-head { padding: 18px 19px; border-radius: 20px; margin-bottom: 14px;
  background: linear-gradient(150deg, rgba(233,113,50,.26), rgba(255,255,255,.04)); }
.asg-detail-head h2 { font-size: 19px; font-weight: 800; line-height: 1.3; margin: 7px 0 10px; }
.asg-brief { font-size: 14px; line-height: 1.62; color: #d8d8e0; white-space: pre-wrap; }
.asg-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.asg-fact { padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.26); }
.asg-fact .k { font-size: 9.4px; letter-spacing: .12em; color: #FFB347; font-weight: 800; }
.asg-fact .v { font-size: 12.6px; font-weight: 700; margin-top: 2px; }

/* actions */
.asg-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.asg-btn { padding: 14px; border-radius: 15px; border: 0; font-size: 14px; font-weight: 800; cursor: pointer; color: #fff; transition: .16s; }
.asg-btn:disabled { opacity: .5; cursor: default; }
.asg-accept  { background: linear-gradient(120deg,#25c26e,#0f7a44); box-shadow: 0 8px 22px rgba(37,194,110,.35); }
.asg-decline { background: rgba(239,68,68,.16); color: #ff9c9c; }
.asg-time    { background: rgba(255,255,255,.08); color: #d5d5e0; }
.asg-submit  { background: linear-gradient(120deg,#E97132,#c4551d); box-shadow: 0 8px 22px rgba(233,113,50,.38); }

/* reason / report panels */
.asg-panel { margin-top: 12px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.05); }
.asg-panel.hidden { display: none; }
.asg-panel .asg-btn { width: 100%; }
.asg-panel h4 { font-size: 12.4px; font-weight: 800; margin-bottom: 9px; color: #f2f2f5; }
.asg-panel .hint { font-size: 11.4px; color: #8a8a9b; margin-bottom: 10px; line-height: 1.5; }
.asg-ta {
  width: 100%; border: 0; border-radius: 12px; padding: 12px; font: inherit; font-size: 13.6px;
  background: rgba(0,0,0,.3); color: #f2f2f5; resize: vertical; min-height: 84px;
}
.asg-ta::placeholder { color: #5f5f72; }
.asg-date {
  width: 100%; border: 0; border-radius: 12px; padding: 12px; font: inherit; font-size: 13.6px;
  background: rgba(0,0,0,.3); color: #f2f2f5; margin-bottom: 10px;
}

/* timeline */
.asg-timeline { margin-top: 18px; }
.asg-ev { display: flex; gap: 11px; padding: 9px 0; }
.asg-ev .dot { width: 8px; height: 8px; border-radius: 50%; background: #E97132; margin-top: 5px; flex: none; }
.asg-ev .txt { font-size: 12.4px; color: #c9c9d4; line-height: 1.45; }
.asg-ev .tm  { font-size: 10.6px; color: #5f5f72; margin-top: 2px; }

/* nav badge */
#nav-assignments { position: relative; }
.nav-badge {
  position: absolute; top: 3px; right: 50%; transform: translateX(16px);
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 20px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 900;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(239,68,68,.55);
}
.nav-badge.hidden { display: none; }