/* Redmine Test Case Management — polished, animated UI
   Scoped with tc- prefixes to avoid clashing with core/other plugins. */

:root {
  --tc-pass:    #23a559;
  --tc-fail:    #e0453e;
  --tc-blocked: #f0932b;
  --tc-skipped: #9aa4b2;
  --tc-none:    #cfd6df;
  --tc-blue:    #2f7ed8;
  --tc-purple:  #7b5cff;
  --tc-amber:   #f0932b;
  --tc-slate:   #556070;
  --tc-ink:     #2b3440;
  --tc-muted:   #7a8694;
  --tc-border:  #e3e8ef;
  --tc-bg:      #ffffff;
  --tc-bg-soft: #f6f8fb;
  --tc-radius:  10px;
  --tc-shadow:  0 1px 3px rgba(20,30,50,.08), 0 6px 20px rgba(20,30,50,.05);
  --tc-shadow-hover: 0 6px 16px rgba(20,30,50,.12), 0 14px 40px rgba(20,30,50,.10);
  --tc-ease:    cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tc-ink: #e7ecf3; --tc-muted:#9aa6b4; --tc-border:#2b333f;
    --tc-bg:#1c222b; --tc-bg-soft:#232b36; --tc-none:#3a4250;
    --tc-shadow: 0 1px 3px rgba(0,0,0,.4); --tc-shadow-hover: 0 10px 30px rgba(0,0,0,.5);
  }
}

/* ---------- Layout & typography ---------- */
.tc-page-title { display:flex; align-items:center; gap:.5rem; }
.tc-ref { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size:.82em;
  background:var(--tc-bg-soft); border:1px solid var(--tc-border); color:var(--tc-muted);
  padding:1px 6px; border-radius:6px; white-space:nowrap; }
.tc-hint { color:var(--tc-muted); font-size:.9em; margin:.2rem 0 1rem; }
.tc-muted { color:var(--tc-muted); }
.tc-sub { color:var(--tc-muted); font-weight:normal; font-size:.85em; }
.tc-mt { margin-top:1.2rem; }
.tc-mono { font-family: ui-monospace, Menlo, monospace; }
.tc-section-title { margin-top:1.6rem; border-bottom:2px solid var(--tc-border); padding-bottom:.3rem; }
.tc-side-heading { margin:1rem 0 .4rem; font-size:.95em; color:var(--tc-muted); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- Buttons ---------- */
.tc-btn { display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .8rem;
  border:1px solid var(--tc-border); border-radius:8px; background:var(--tc-bg); color:var(--tc-ink);
  cursor:pointer; font-size:.88em; text-decoration:none; transition:all .18s var(--tc-ease); }
.tc-btn:hover { border-color:var(--tc-blue); box-shadow:0 2px 8px rgba(47,126,216,.18); transform:translateY(-1px); }
.tc-btn:active { transform:translateY(0); }
.tc-btn-primary { background:linear-gradient(180deg,#3a8bea,#2f7ed8); border-color:#2f7ed8; color:#fff; }
.tc-btn-primary:hover { box-shadow:0 4px 14px rgba(47,126,216,.4); }
.tc-btn-ghost { background:transparent; color:var(--tc-muted); }
.tc-btn-sm { padding:.25rem .6rem; font-size:.82em; }
.tc-btn-xs { padding:.15rem .5rem; font-size:.78em; border-radius:6px; }

/* ---------- Badges & chips ---------- */
.tc-badge { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.76em;
  font-weight:600; line-height:1.5; white-space:nowrap; color:#fff; }
.tc-pass, .tc-tstatus-passed, .tc-tstatus-active { background:var(--tc-pass); }
.tc-fail, .tc-tstatus-failed { background:var(--tc-fail); }
.tc-blocked, .tc-tstatus-blocked { background:var(--tc-blocked); }
.tc-skipped { background:var(--tc-skipped); }
.tc-none, .tc-tstatus-not-configured, .tc-tstatus-pending { background:var(--tc-none); color:var(--tc-ink); }
.tc-tstatus-archived { background:var(--tc-slate); }
.tc-draft { background:#9aa4b2; } .tc-review { background:#f0932b; }
.tc-approved { background:#23a559; } .tc-deprecated { background:#8894a5; }
.tc-auto-manual { background:#8894a5; } .tc-auto-automated { background:#2f7ed8; }
.tc-auto-hybrid { background:#7b5cff; } .tc-auto-not-automatable { background:#c0392b; }
.tc-chip { display:inline-block; padding:.1rem .5rem; border-radius:6px; font-size:.78em;
  background:var(--tc-bg-soft); border:1px solid var(--tc-border); color:var(--tc-muted); }
.tc-tag { display:inline-block; padding:.05rem .45rem; border-radius:6px; font-size:.75em;
  background:rgba(47,126,216,.1); color:var(--tc-blue); }
.tc-prio { font-weight:600; font-size:.82em; }
.tc-prio-low { color:#8894a5; } .tc-prio-normal { color:var(--tc-blue); }
.tc-prio-high { color:#f0932b; } .tc-prio-critical { color:var(--tc-fail); }
.tc-case-meta { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin:.5rem 0 1rem; }

/* ---------- Filters ---------- */
.tc-filters { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin:.6rem 0 1rem;
  padding:.6rem; background:var(--tc-bg-soft); border:1px solid var(--tc-border); border-radius:var(--tc-radius); }
.tc-search, .tc-mini { padding:.35rem .6rem; border:1px solid var(--tc-border); border-radius:8px;
  background:var(--tc-bg); color:var(--tc-ink); transition:border-color .15s, box-shadow .15s; }
.tc-search { min-width:240px; }
.tc-search:focus, .tc-mini:focus { border-color:var(--tc-blue); box-shadow:0 0 0 3px rgba(47,126,216,.15); outline:none; }

/* ---------- Lists ---------- */
table.tc-list { width:100%; border-collapse:separate; border-spacing:0; }
table.tc-list thead th { background:var(--tc-bg-soft); font-size:.8em; text-transform:uppercase;
  letter-spacing:.03em; color:var(--tc-muted); padding:.55rem .6rem; border-bottom:2px solid var(--tc-border); }
table.tc-list tbody td { padding:.5rem .6rem; border-bottom:1px solid var(--tc-border); }
.tc-row { transition:background .15s var(--tc-ease); animation:tcFadeIn .4s var(--tc-ease) both; }
.tc-row:hover { background:var(--tc-bg-soft); }
.tc-row-fail { box-shadow:inset 3px 0 0 var(--tc-fail); }
.tc-row-pass { box-shadow:inset 3px 0 0 var(--tc-pass); }
.tc-row-unmapped { background:rgba(240,147,43,.06); }
.tc-compact td { padding:.35rem .5rem; font-size:.9em; }
.tc-check { width:26px; text-align:center; }
.tc-mode { font-size:.8em; padding:.05rem .4rem; border-radius:5px; }
.tc-mode-manual { background:var(--tc-bg-soft); color:var(--tc-muted); }
.tc-mode-automated { background:rgba(47,126,216,.12); color:var(--tc-blue); }

/* ---------- Empty states ---------- */
.tc-empty { text-align:center; color:var(--tc-muted); }
.tc-empty-state { text-align:center; padding:2.5rem 1rem; color:var(--tc-muted); }
.tc-empty-icon { font-size:2.4rem; display:block; margin-bottom:.5rem; opacity:.7;
  animation:tcFloat 3s ease-in-out infinite; }

/* ---------- Cards ---------- */
.tc-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin:1rem 0; }
.tc-card { display:block; padding:1rem; background:var(--tc-bg); border:1px solid var(--tc-border);
  border-radius:var(--tc-radius); box-shadow:var(--tc-shadow); text-decoration:none; color:var(--tc-ink);
  transition:transform .2s var(--tc-ease), box-shadow .2s var(--tc-ease); animation:tcFadeUp .45s var(--tc-ease) both; }
.tc-card:hover { transform:translateY(-4px); box-shadow:var(--tc-shadow-hover); }
.tc-card-archived { opacity:.6; }
.tc-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.tc-card-title { margin:.2rem 0; font-size:1.05em; }
.tc-card-desc { color:var(--tc-muted); font-size:.85em; min-height:2.2em; }
.tc-card-foot { display:flex; gap:1rem; margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--tc-border); font-size:.85em; }
.tc-metric strong { color:var(--tc-ink); font-size:1.05em; }
.tc-report-card { text-align:center; }
.tc-report-icon { font-size:2rem; display:block; margin-bottom:.4rem; }

/* ---------- Dashboard ---------- */
.tc-dash-hero { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin:1rem 0 1.4rem;
  padding:1.2rem; background:var(--tc-bg); border:1px solid var(--tc-border); border-radius:var(--tc-radius); box-shadow:var(--tc-shadow); }
.tc-hero-ring { text-align:center; }
.tc-hero-ring-cap, .tc-sub { color:var(--tc-muted); font-size:.8em; margin-top:.3rem; }
.tc-hero-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.7rem; flex:1; min-width:280px; }
.tc-tile { padding:.8rem; border-radius:var(--tc-radius); background:var(--tc-bg-soft);
  border:1px solid var(--tc-border); text-align:center; animation:tcFadeUp .5s var(--tc-ease) both; transition:transform .15s; }
.tc-tile:hover { transform:translateY(-3px); }
.tc-tile-value { font-size:1.7rem; font-weight:700; line-height:1.1; }
.tc-tile-label { font-size:.75em; color:var(--tc-muted); text-transform:uppercase; letter-spacing:.03em; }
.tc-tile-blue .tc-tile-value{color:var(--tc-blue);} .tc-tile-green .tc-tile-value{color:var(--tc-pass);}
.tc-tile-red .tc-tile-value{color:var(--tc-fail);} .tc-tile-amber .tc-tile-value{color:var(--tc-amber);}
.tc-tile-purple .tc-tile-value{color:var(--tc-purple);} .tc-tile-slate .tc-tile-value{color:var(--tc-slate);}
.tc-dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1rem; margin-bottom:1rem; }
.tc-panel { border-radius:var(--tc-radius); box-shadow:var(--tc-shadow); }
.tc-panel h3 { margin-top:0; }

/* ---------- Pass ring (SVG) ---------- */
.tc-ring { position:relative; display:inline-block; }
.tc-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.tc-ring-track { fill:none; stroke:var(--tc-border); stroke-width:9; }
.tc-ring-fill { fill:none; stroke-width:9; stroke-linecap:round;
  transition:stroke-dashoffset 1.1s var(--tc-ease); }
.tc-ring-good .tc-ring-fill { stroke:var(--tc-pass); }
.tc-ring-warn .tc-ring-fill { stroke:var(--tc-amber); }
.tc-ring-bad  .tc-ring-fill { stroke:var(--tc-fail); }
.tc-ring-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.1rem; color:var(--tc-ink); }

/* ---------- Progress bar ---------- */
.tc-progress { display:flex; height:14px; border-radius:8px; overflow:hidden; background:var(--tc-bg-soft);
  border:1px solid var(--tc-border); margin:.6rem 0; }
.tc-progress-empty::after { content:""; flex:1; }
.tc-seg { height:100%; width:0; transition:width 1s var(--tc-ease); }
.tc-legend { list-style:none; display:flex; flex-wrap:wrap; gap:1rem; padding:0; margin:.5rem 0 0; font-size:.85em; }
.tc-legend li { display:flex; align-items:center; gap:.35rem; }
.tc-dot { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* ---------- Trend chart ---------- */
.tc-trend { display:flex; align-items:flex-end; gap:4px; height:120px; padding-top:.5rem; }
.tc-trend-col { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.tc-trend-bars { flex:1; width:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; }
.tc-trend-bar { width:100%; border-radius:3px 3px 0 0; min-height:1px; transition:height .8s var(--tc-ease); }
.tc-trend-bar.tc-pass { background:var(--tc-pass); }
.tc-trend-bar.tc-fail { background:var(--tc-fail); }
.tc-trend-label { font-size:.65em; color:var(--tc-muted); margin-top:.2rem; }

/* ---------- Horizontal bar list ---------- */
.tc-hbar-list { list-style:none; padding:0; margin:.5rem 0 0; }
.tc-hbar-list li { display:flex; align-items:center; gap:.6rem; margin:.4rem 0; font-size:.88em; }
.tc-hbar-label { width:120px; text-align:right; color:var(--tc-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tc-hbar { flex:1; height:10px; background:var(--tc-bg-soft); border-radius:6px; overflow:hidden; }
.tc-hbar-fill { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--tc-blue),var(--tc-purple));
  border-radius:6px; transition:width .9s var(--tc-ease); }
.tc-hbar-val { width:36px; font-weight:600; }

/* ---------- Forms ---------- */
.tc-form-grid { display:grid; grid-template-columns:2fr 1fr; gap:1rem; }
@media (max-width:820px){ .tc-form-grid{ grid-template-columns:1fr; } }
.tc-form .wiki-edit, .tc-input-lg { width:100%; box-sizing:border-box; }
.tc-input-lg { padding:.45rem .6rem; font-size:1.05em; border:1px solid var(--tc-border); border-radius:8px; }

/* Consistent field layout across all plugin forms — label on its own line,
   control fills the column, so field groups line up neatly. */
.tc-form p:not(.tc-inline-check):not(.tc-form-actions),
.tc-automation-fields > p {
  display:flex; flex-direction:column; gap:.25rem; margin:.55rem 0; }
.tc-form p > label:first-child, .tc-automation-fields > p > label:first-child {
  font-size:.82em; font-weight:600; color:var(--tc-muted); }
.tc-form p > br { display:none; }
.tc-form select, .tc-form textarea { width:100%; box-sizing:border-box; }
.tc-form-side input[type="text"], .tc-form-main input[type="text"],
.tc-automation-fields input[type="text"] { width:100%; box-sizing:border-box; }
.tc-form input[type="text"], .tc-form input[type="number"] { max-width:100%; box-sizing:border-box; }
.tc-form select, .tc-form input[type="text"], .tc-form input[type="number"], .tc-form textarea {
  padding:.4rem .55rem; border:1px solid var(--tc-border); border-radius:7px;
  background:var(--tc-bg); color:var(--tc-ink); font-size:.95em; }
.tc-form select { -webkit-appearance:menulist; appearance:auto; min-height:2rem; }
.tc-form select:focus, .tc-form input:focus, .tc-form textarea:focus {
  border-color:var(--tc-blue); box-shadow:0 0 0 3px rgba(47,126,216,.15); outline:none; }
.tc-automation-fields { margin-top:.3rem; padding-top:.3rem; border-top:1px dashed var(--tc-border); }
.tc-inline-empty { display:flex; align-items:center; gap:.6rem; color:var(--tc-muted); font-size:.9em; }
.tc-attach-field .tc-attach-widget { display:block; margin-top:.2rem; }
.tc-attach-hint { display:block; margin-top:.25rem; font-size:.8em; color:var(--tc-muted); }
.tc-shot-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.6rem; }
.tc-shot .tc-screenshot { max-width:150px; max-height:120px; object-fit:cover; }
.tc-attr-table { width:100%; font-size:.9em; }
.tc-attr-table th { text-align:left; color:var(--tc-muted); font-weight:500; width:42%; padding:.28rem 0; vertical-align:top; }
.tc-attr-wide th { width:22%; }
.tc-form-actions { margin-top:1rem; display:flex; gap:.6rem; }
.tc-inline-check { display:flex; align-items:center; gap:.4rem; }
.tc-section { margin:1rem 0; }
.tc-log { background:#12161c; color:#d6deea; padding:.8rem; border-radius:8px; overflow:auto; font-size:.82em; max-height:340px; }

/* ---------- Case picker ---------- */
.tc-case-picker { border:1px solid var(--tc-border); border-radius:var(--tc-radius); overflow:hidden; background:var(--tc-bg); }
.tc-picker-search { width:100%; padding:.5rem .7rem; border:none; border-bottom:1px solid var(--tc-border); background:var(--tc-bg-soft); box-sizing:border-box; }
.tc-picker-search:focus { outline:none; box-shadow:inset 0 -2px 0 var(--tc-blue); }
.tc-picker-list { max-height:320px; overflow-y:auto; }
.tc-picker-item { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-bottom:1px solid var(--tc-border);
  cursor:pointer; transition:background .12s; }
.tc-picker-item:hover { background:var(--tc-bg-soft); }
.tc-picker-item.tc-hidden { display:none; }
.tc-picker-title { flex:1; }
.tc-picker-foot { padding:.4rem .7rem; font-size:.82em; color:var(--tc-muted); background:var(--tc-bg-soft); }

/* ---------- Bulk bar ---------- */
.tc-bulk-bar { position:sticky; bottom:0; display:flex; gap:.6rem; align-items:center; padding:.6rem .8rem;
  background:var(--tc-bg); border:1px solid var(--tc-border); border-radius:var(--tc-radius); box-shadow:var(--tc-shadow-hover);
  margin-top:.6rem; transform:translateY(120%); opacity:0; transition:all .25s var(--tc-ease); }
.tc-bulk-bar.tc-visible { transform:translateY(0); opacity:1; }
.tc-bulk-count { font-weight:600; }

/* ---------- Collapsible ---------- */
.tc-collapse-toggle { cursor:pointer; user-select:none; transition:color .15s; }
.tc-collapse-toggle:hover { color:var(--tc-blue); }
.tc-collapse-body { overflow:hidden; transition:max-height .35s var(--tc-ease), opacity .25s; }
.tc-collapsed .tc-collapse-body { max-height:0 !important; opacity:0; }

/* ---------- Alerts ---------- */
.tc-alert { padding:.6rem .9rem; border-radius:8px; margin:.6rem 0; font-size:.9em; animation:tcFadeIn .3s; }
.tc-alert-warn { background:rgba(240,147,43,.12); border:1px solid rgba(240,147,43,.4); color:#a35a09; }

/* ---------- Two column ---------- */
.tc-two-col { display:grid; grid-template-columns:2fr 1fr; gap:1.2rem; }
@media (max-width:820px){ .tc-two-col{ grid-template-columns:1fr; } }
.tc-linklist { list-style:none; padding:0; } .tc-linklist li { padding:.25rem 0; border-bottom:1px solid var(--tc-border); }

/* ---------- Release banner ---------- */
.tc-release-banner { display:flex; align-items:center; gap:1rem; padding:1.2rem; border-radius:var(--tc-radius);
  margin:1rem 0; animation:tcFadeUp .4s var(--tc-ease) both; }
.tc-release-go { background:rgba(35,165,89,.12); border:1px solid rgba(35,165,89,.4); }
.tc-release-nogo { background:rgba(224,69,62,.1); border:1px solid rgba(224,69,62,.4); }
.tc-release-icon { font-size:2.4rem; }
.tc-checklist { list-style:none; padding:0; }
.tc-checklist li { padding:.35rem 0 .35rem 1.6rem; position:relative; }
.tc-checklist li::before { position:absolute; left:0; }
.tc-checklist li.ok::before { content:"✅"; } .tc-checklist li.bad::before { content:"⛔"; } .tc-checklist li.warn::before { content:"⚠️"; }

/* ---------- Issue testing panel ---------- */
.tc-issue-panel { border:1px solid var(--tc-border); border-radius:var(--tc-radius); margin-top:1rem;
  background:var(--tc-bg); box-shadow:var(--tc-shadow); overflow:hidden; animation:tcFadeIn .4s var(--tc-ease); }
.tc-issue-panel-head { display:flex; align-items:center; justify-content:space-between; padding:.7rem 1rem;
  cursor:pointer; background:linear-gradient(180deg,var(--tc-bg-soft),var(--tc-bg)); border-bottom:1px solid var(--tc-border); }
.tc-issue-panel-head h3 { margin:0; display:flex; align-items:center; gap:.5rem; font-size:1em; }
.tc-issue-passrate { font-size:.8em; color:var(--tc-muted); font-weight:normal; }
.tc-collapse-caret { transition:transform .3s var(--tc-ease); }
.tc-collapsed .tc-collapse-caret { transform:rotate(-90deg); }
.tc-issue-panel-body { padding:.8rem 1rem; }
.tc-issue-bundles { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0; }
.tc-bundle-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .6rem; border-radius:999px;
  background:rgba(47,126,216,.1); border:1px solid rgba(47,126,216,.25); font-size:.85em; }
.tc-chip-x { color:var(--tc-fail); text-decoration:none; font-weight:700; padding:0 .2rem; }
.tc-issue-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.6rem 0; }
.tc-inline-form { display:inline-flex; gap:.35rem; align-items:center; }
.tc-issue-cases { width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.9em; }
.tc-issue-cases th { text-align:left; font-size:.75em; text-transform:uppercase; color:var(--tc-muted); padding:.3rem .4rem; border-bottom:1px solid var(--tc-border); }
.tc-issue-cases td { padding:.35rem .4rem; border-bottom:1px solid var(--tc-border); }
.tc-result-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.tc-micro { padding:.1rem .3rem; font-size:.8em; border:1px solid var(--tc-border); border-radius:5px; }
.tc-issue-history summary { cursor:pointer; color:var(--tc-blue); margin-top:.6rem; font-size:.9em; }
.tc-screenshot { max-width:100%; border-radius:8px; border:1px solid var(--tc-border); transition:transform .2s; }
.tc-screenshot:hover { transform:scale(1.02); }

/* ---------- Sidebar nav ---------- */
.tc-side-title { margin:.5rem 0 .3rem; }
.tc-sidenav { list-style:none; padding:0; margin:0; }
.tc-sidenav li a { display:block; padding:.35rem .6rem; border-radius:7px; text-decoration:none; color:var(--tc-ink);
  transition:background .12s, padding-left .12s; }
.tc-sidenav li a:hover { background:var(--tc-bg-soft); padding-left:.85rem; }
.tc-sidenav li.selected a { background:rgba(47,126,216,.12); color:var(--tc-blue); font-weight:600; }

.tc-pagination.pagination { margin-top:1rem; }
.tc-ident { font-size:.85em; }

/* ---------- Keyframes ---------- */
@keyframes tcFadeIn { from{ opacity:0; } to{ opacity:1; } }
@keyframes tcFadeUp { from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes tcFloat  { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation:none !important; transition:none !important; }
}