@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root{
  --scrum-ink:#12303a;
  --scrum-muted:#5f7680;
  --scrum-line:rgba(18,48,58,.12);
  --scrum-teal:#1f7a86;
  --scrum-teal-deep:#0f4d57;
  --scrum-foam:#e8f4f3;
  --scrum-sand:#f4efe6;
  --scrum-coral:#c46b4a;
  --scrum-sage:#3d8b6e;
  --scrum-paper:#fbfaf7;
  --scrum-shadow:0 24px 60px rgba(10,36,42,.28);
}

.column[data-stage="Backlog"]{position:relative}
.column-actions{display:flex;gap:6px;margin:8px 0 4px;flex-wrap:wrap}
.column-actions button,.scrum-btn{
  border:0;background:var(--scrum-foam);color:var(--scrum-teal-deep);padding:8px 11px;border-radius:8px;
  font-weight:700;cursor:pointer;font-size:11px;font-family:"DM Sans",sans-serif;transition:transform .18s ease, background .18s ease
}
.column-actions button:hover,.scrum-btn:hover{transform:translateY(-1px)}
.column-actions .primary,.scrum-btn.primary{background:linear-gradient(135deg,var(--scrum-teal),var(--scrum-teal-deep));color:#fff}
.ticket.scrum-ticket{
  background:linear-gradient(165deg,#fff 0%,var(--scrum-foam) 140%);
  border:1px solid rgba(31,122,134,.18)!important
}
.ticket.scrum-ticket small.scrum-tag{
  display:inline-block;margin-top:4px;padding:3px 8px;border-radius:6px;
  background:rgba(31,122,134,.1);color:var(--scrum-teal-deep);font-weight:800;font-size:9px;letter-spacing:.04em
}

/* ===== Modal shell ===== */
.scrum-modal{
  display:none;position:fixed;inset:0;z-index:60;place-items:center;padding:18px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(85,183,179,.35), transparent 55%),
    radial-gradient(700px 380px at 90% 100%, rgba(196,107,74,.22), transparent 50%),
    linear-gradient(145deg,#0b2a32 0%, #143844 45%, #0f3d48 100%);
  backdrop-filter:blur(6px);
  font-family:"DM Sans",sans-serif;color:var(--scrum-ink)
}
.scrum-modal.open{display:grid;animation:scrumFade .28s ease}
@keyframes scrumFade{from{opacity:0}to{opacity:1}}
@keyframes scrumRise{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes scrumCardIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.scrum-modal-card{
  position:relative;width:min(1180px,96vw);max-height:92vh;overflow:auto;
  border-radius:22px;box-shadow:var(--scrum-shadow);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,250,247,.96)),
    repeating-linear-gradient(-12deg, transparent, transparent 18px, rgba(31,122,134,.03) 18px, rgba(31,122,134,.03) 19px);
  border:1px solid rgba(255,255,255,.5);
  animation:scrumRise .38s cubic-bezier(.2,.8,.2,1)
}
.scrum-modal-card::before{
  content:"";position:sticky;top:0;display:block;height:5px;z-index:2;
  background:linear-gradient(90deg,var(--scrum-teal-deep),var(--scrum-teal),#7bc4b8,var(--scrum-coral))
}
.scrum-modal-inner{padding:8px 28px 28px}

.scrum-modal-card>#closeScrum{
  position:absolute;right:16px;top:18px;z-index:3;border:0;width:38px;height:38px;border-radius:12px;
  background:rgba(18,48,58,.06);color:var(--scrum-ink);font-size:22px;cursor:pointer;
  transition:background .2s ease, transform .2s ease
}
.scrum-modal-card>#closeScrum:hover{background:rgba(18,48,58,.12);transform:rotate(90deg)}

.scrum-head{
  display:flex;justify-content:space-between;gap:20px;align-items:flex-start;
  margin:10px 0 22px;padding:8px 44px 0 0
}
.scrum-eyebrow{
  margin:0;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--scrum-teal);display:inline-flex;align-items:center;gap:8px
}
.scrum-eyebrow::before{
  content:"";width:18px;height:2px;background:linear-gradient(90deg,var(--scrum-teal),transparent)
}
.scrum-head h2{
  margin:8px 0 6px;font-family:"Fraunces",serif;font-size:clamp(28px,3.4vw,40px);
  font-weight:600;letter-spacing:-.02em;line-height:1.1;color:var(--scrum-ink)
}
.scrum-head .scrum-owner{margin:0;color:var(--scrum-muted);font-size:14px}
.scrum-head .scrum-owner b{color:var(--scrum-ink);font-weight:600}

.scrum-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.scrum-meta span{
  display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;
  background:rgba(31,122,134,.07);border:1px solid rgba(31,122,134,.1);
  font-size:12px;font-weight:600;color:var(--scrum-muted)
}
.scrum-meta span b{color:var(--scrum-ink);font-weight:700}
.scrum-meta span[data-k="done"]{background:rgba(61,139,110,.1);border-color:rgba(61,139,110,.18);color:var(--scrum-sage)}
.scrum-meta span[data-k="done"] b{color:var(--scrum-sage)}

.scrum-head-actions{display:flex;gap:8px;align-items:center;padding-top:28px}
.scrum-head-actions .primary{
  border:0;padding:11px 16px;border-radius:10px;cursor:pointer;font:600 13px "DM Sans",sans-serif;
  color:#fff;background:linear-gradient(135deg,var(--scrum-teal) 0%,var(--scrum-teal-deep) 100%);
  box-shadow:0 10px 22px rgba(15,77,87,.25);transition:transform .18s ease, box-shadow .18s ease
}
.scrum-head-actions .primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,77,87,.3)}

.scrum-layout{display:grid;grid-template-columns:300px 1fr;gap:18px}
.scrum-panel{
  position:relative;border-radius:18px;padding:18px;overflow:hidden;
  border:1px solid var(--scrum-line);background:rgba(255,255,255,.72)
}
.scrum-panel.board-panel{
  background:
    linear-gradient(160deg, rgba(244,239,230,.55), rgba(255,255,255,.8)),
    #fff
}
.scrum-panel h3{
  margin:0;font-family:"Fraunces",serif;font-size:22px;font-weight:600;letter-spacing:-.01em
}
.scrum-panel>p{margin:6px 0 14px;color:var(--scrum-muted);font-size:13px;line-height:1.4}

.scrum-create{display:grid;gap:8px;margin-bottom:14px}
.scrum-create.sprint-bar{
  grid-template-columns:1.1fr 1.6fr .55fr;gap:8px;
  padding:10px;border-radius:12px;background:rgba(18,48,58,.03);border:1px solid var(--scrum-line)
}
.scrum-create input,.scrum-create select,.create-backlog-form input,.create-backlog-form select{
  width:100%;padding:10px 12px;border:1px solid var(--scrum-line);border-radius:10px;
  background:#fff;font:500 13px "DM Sans",sans-serif;color:var(--scrum-ink);outline:none;
  transition:border-color .15s ease, box-shadow .15s ease
}
.scrum-create input:focus,.scrum-create select:focus,
.create-backlog-form input:focus{border-color:rgba(31,122,134,.45);box-shadow:0 0 0 3px rgba(31,122,134,.12)}
.scrum-create .primary,.create-backlog-form .primary,.backlog-item .primary{
  border:0;background:linear-gradient(135deg,var(--scrum-teal),var(--scrum-teal-deep));color:#fff;
  padding:10px 12px;border-radius:10px;font:700 12px "DM Sans",sans-serif;cursor:pointer
}

.backlog-list{display:grid;gap:10px;max-height:460px;overflow:auto;padding-right:2px}
.backlog-item{
  position:relative;background:#fff;border:1px solid var(--scrum-line);border-radius:12px;
  padding:12px 12px 12px 14px;display:grid;gap:4px;
  box-shadow:0 1px 0 rgba(18,48,58,.03);transition:transform .18s ease, border-color .18s ease
}
.backlog-item::before{
  content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--scrum-teal),var(--scrum-coral))
}
.backlog-item:hover{transform:translateX(2px);border-color:rgba(31,122,134,.28)}
.backlog-item b{font-size:13px;font-weight:650}
.backlog-item small{color:var(--scrum-muted);font-size:11px}
.backlog-item .row-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.backlog-item .row-actions button{
  border:0;background:var(--scrum-foam);color:var(--scrum-teal-deep);border-radius:8px;
  font-size:11px;padding:6px 9px;font-weight:700;cursor:pointer
}
.backlog-item .row-actions button:not(.primary){background:rgba(18,48,58,.05);color:var(--scrum-muted)}
.backlog-empty{
  margin:0;padding:22px 14px;border:1px dashed rgba(31,122,134,.25);border-radius:12px;
  color:var(--scrum-muted);font-size:13px;text-align:center;background:rgba(232,244,243,.45)
}

.scrum-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:380px}
.scrum-col{
  display:flex;flex-direction:column;gap:10px;min-height:340px;padding:12px;
  border-radius:16px;border:1px solid transparent;background:#fff;
  animation:scrumCardIn .4s ease both
}
.scrum-col[data-status="todo"]{
  background:linear-gradient(180deg,#f3f6f7,#fff);border-color:rgba(95,118,128,.14);
  animation-delay:.05s
}
.scrum-col[data-status="doing"]{
  background:linear-gradient(180deg,#eaf5f4,#fff);border-color:rgba(31,122,134,.16);
  animation-delay:.12s
}
.scrum-col[data-status="done"]{
  background:linear-gradient(180deg,#eaf6f0,#fff);border-color:rgba(61,139,110,.16);
  animation-delay:.18s
}
.scrum-col header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;padding:2px 2px 8px;
  border-bottom:1px solid rgba(18,48,58,.06)
}
.scrum-col header b{font-size:13px;font-weight:700;letter-spacing:.01em}
.scrum-col header span{
  min-width:24px;height:24px;display:inline-grid;place-items:center;padding:0 7px;
  border-radius:8px;font-size:11px;font-weight:800
}
.scrum-col[data-status="todo"] header span{background:rgba(95,118,128,.12);color:#4d646e}
.scrum-col[data-status="doing"] header span{background:rgba(31,122,134,.14);color:var(--scrum-teal-deep)}
.scrum-col[data-status="done"] header span{background:rgba(61,139,110,.14);color:var(--scrum-sage)}

.scrum-card{
  position:relative;background:#fff;border:1px solid rgba(18,48,58,.08);border-radius:14px;
  padding:13px 13px 12px;display:grid;gap:8px;
  box-shadow:0 8px 18px rgba(18,48,58,.04);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  animation:scrumCardIn .35s ease both
}
.scrum-card:hover{
  transform:translateY(-3px);border-color:rgba(31,122,134,.22);
  box-shadow:0 14px 28px rgba(18,48,58,.1)
}
.scrum-card b{font-size:13.5px;font-weight:650;line-height:1.35;padding-right:4px}
.scrum-card .pts{
  display:inline-flex;align-items:center;gap:5px;width:fit-content;
  padding:4px 8px;border-radius:7px;background:var(--scrum-sand);
  font-size:10px;font-weight:800;color:var(--scrum-coral);letter-spacing:.02em
}
.scrum-card .move{
  display:flex;gap:5px;flex-wrap:wrap;opacity:.72;transition:opacity .18s ease
}
.scrum-card:hover .move{opacity:1}
.scrum-card .move button{
  border:0;background:rgba(18,48,58,.05);color:var(--scrum-muted);padding:6px 8px;border-radius:7px;
  font-size:10px;font-weight:700;cursor:pointer;transition:background .15s ease, color .15s ease
}
.scrum-card .move button:hover{background:var(--scrum-teal);color:#fff}
.scrum-card .move button[data-status="done"]:hover{background:var(--scrum-sage)}
.scrum-card .move button[data-status="backlog"]:hover{background:var(--scrum-coral)}
.scrum-col-empty{
  margin:auto 0;padding:28px 10px;text-align:center;color:var(--scrum-muted);font-size:12px;
  border:1px dashed rgba(18,48,58,.12);border-radius:12px;background:rgba(255,255,255,.4)
}

.create-backlog-form{
  display:none;margin:8px 0 10px;padding:12px;border:1px dashed rgba(31,122,134,.3);
  border-radius:12px;background:linear-gradient(180deg,#fff,var(--scrum-foam));gap:8px
}
.create-backlog-form.open{display:grid}
.create-backlog-form .actions{display:flex;gap:6px}

@media(max-width:980px){
  .scrum-layout{grid-template-columns:1fr}
  .scrum-board{grid-template-columns:1fr}
  .scrum-create.sprint-bar{grid-template-columns:1fr}
  .scrum-head{flex-direction:column}
  .scrum-head-actions{padding-top:0}
}

/* ===== Visão executiva: bloco Scrum entre Jornada e Lead time ===== */
.scrum-overview-panel{
  margin-top:18px;
  border:1px solid rgba(31,122,134,.18);
  background:
    radial-gradient(720px 220px at 8% 0%, rgba(85,183,179,.16), transparent 60%),
    linear-gradient(180deg,#fff 0%, #f4faf9 100%);
  overflow:visible;
  animation:scrumOverviewIn .55s ease both
}
@keyframes scrumOverviewIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.scrum-bridge{
  display:flex;justify-content:center;margin:-6px 0 10px
}
.scrum-bridge span{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:rgba(31,122,134,.1);color:var(--scrum-teal-deep);
  font:700 10px/1 "DM Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase
}
.scrum-bridge span::before{
  content:"";width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #1f7a86
}
.scrum-overview-panel .panel-head{
  align-items:flex-start;gap:12px;margin-bottom:14px
}
.scrum-overview-panel .panel-head .primary{
  border:0;border-radius:10px;padding:10px 14px;cursor:pointer;font-weight:700;
  background:linear-gradient(135deg,var(--scrum-teal),var(--scrum-teal-deep));color:#fff;
  font-family:"DM Sans",sans-serif;box-shadow:0 10px 22px rgba(15,77,87,.18)
}
.scrum-overview-preview{
  display:grid;grid-template-columns:minmax(160px,.9fr) minmax(220px,1.4fr);gap:14px
}
.scrum-preview-col{
  border:1px dashed rgba(31,122,134,.28);border-radius:14px;padding:14px;
  background:rgba(255,255,255,.72)
}
.scrum-preview-col h3{
  margin:0 0 12px;font:700 12px/1.2 "DM Sans",sans-serif;color:var(--scrum-teal-deep);letter-spacing:.02em
}
.scrum-preview-stack{display:grid;gap:8px}
.scrum-preview-stack i,
.scrum-preview-board i{
  display:block;height:34px;border-radius:10px;
  background:linear-gradient(90deg,rgba(31,122,134,.08),rgba(31,122,134,.03));
  border:1px solid rgba(31,122,134,.1)
}
.scrum-preview-board{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:118px
}
.scrum-preview-board>div{
  border-radius:12px;padding:10px;background:rgba(244,239,230,.55);
  border:1px solid rgba(18,48,58,.08);display:grid;align-content:start;gap:8px
}
.scrum-preview-board small{
  font:700 10px/1 "DM Sans",sans-serif;color:var(--scrum-muted);text-transform:uppercase;letter-spacing:.04em
}
.scrum-preview-items{display:grid;gap:6px;min-height:54px}
.scrum-preview-chip{
  display:block;padding:8px 10px;border-radius:10px;font:600 11px/1.35 "DM Sans",sans-serif;
  color:#12303a;background:#fff;border:1px solid rgba(31,122,134,.16);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.scrum-preview-empty{
  margin:0;font:500 11px/1.4 "DM Sans",sans-serif;color:var(--scrum-muted)
}
.scrum-preview-col h3 span{
  font-weight:600;color:var(--scrum-muted);text-transform:none;letter-spacing:0
}
#execKpis[data-source="live"] article small::after{
  content:" · ao vivo";font-weight:600;opacity:.55;text-transform:none;letter-spacing:0
}
@media(max-width:900px){
  .scrum-overview-preview{grid-template-columns:1fr}
  .journey-panel .j-step-backlog .scrum-drop-arrow{height:24px}
}