/* ============================================================
   TFD Podcast Operations — Theme
   Primary: radiant purple gradient  |  Secondary: black
   ============================================================ */

:root {
    --tfd-purple: #7c3aed;
    --tfd-purple-2: #a855f7;
    --tfd-purple-3: #6d28d9;
    --tfd-purple-soft: #f3ebff;
    --tfd-black: #0d0d0f;
    --tfd-black-2: #17171c;
    --tfd-gray: #6b7280;
    --tfd-radiant: radial-gradient(circle at 20% 20%, #a855f7 0%, #7c3aed 45%, #6d28d9 100%);
    --tfd-radiant-flat: linear-gradient(135deg, #a855f7 0%, #7c3aed 55%, #6d28d9 100%);
}

html, body { height: 100%; }
body {
    background: #f5f4f8;
    color: #1f2430;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* sticky footer: push footer to the bottom even on short pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
#main { flex: 1 0 auto; }   /* content takes the remaining height */

/* ---------- Top navbar (black) with radiant purple brand ---------- */
.tfd-navbar {
    background: var(--tfd-black);
    border-bottom: 3px solid transparent;
    border-image: var(--tfd-radiant-flat) 1;
    padding: .6rem 1rem;
}
.tfd-navbar .navbar-brand {
    font-weight: 800;
    letter-spacing: .3px;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: .55rem;
}
.tfd-brand-dot {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--tfd-radiant);
    box-shadow: 0 0 14px rgba(168,85,247,.7);
    display: inline-block;
}
.tfd-navbar .nav-link { color: #d7d3e0 !important; font-weight: 500; }
.tfd-navbar .nav-link:hover,
.tfd-navbar .nav-link.active { color: #fff !important; }
.tfd-navbar .nav-link.active {
    border-bottom: 2px solid var(--tfd-purple-2);
}
.tfd-user-chip {
    background: var(--tfd-radiant-flat);
    color: #fff; border-radius: 999px; padding: .25rem .8rem;
    font-size: .85rem; font-weight: 600;
}

/* ---------- Buttons ---------- */
.btn-tfd, .btn-primary {
    background: var(--tfd-radiant-flat);
    border: none; color: #fff; font-weight: 600;
    box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.btn-tfd:hover, .btn-primary:hover {
    filter: brightness(1.07); color: #fff;
    box-shadow: 0 6px 18px rgba(124,58,237,.45);
}
.btn-dark { background: var(--tfd-black-2); border-color: var(--tfd-black-2); }
.btn-outline-primary { color: var(--tfd-purple-3); border-color: var(--tfd-purple); }
.btn-outline-primary:hover { background: var(--tfd-purple); border-color: var(--tfd-purple); }

a { color: var(--tfd-purple-3); }
a:hover { color: var(--tfd-purple); }

/* ---------- Cards ---------- */
.card {
    border: none; border-radius: 14px;
    box-shadow: 0 2px 12px rgba(23,23,28,.06);
}
.card-header {
    background: #fff; border-bottom: 1px solid #eee;
    font-weight: 700; border-radius: 14px 14px 0 0 !important;
}
.tfd-stat {
    border-radius: 14px; padding: 1.1rem 1.25rem; color: #fff;
    background: var(--tfd-radiant-flat); position: relative; overflow: hidden;
}
.tfd-stat.dark { background: linear-gradient(135deg, #17171c, #2a2340); }
.tfd-stat .num { font-size: 2rem; font-weight: 800; line-height: 1; }
.tfd-stat .lbl { font-size: .8rem; opacity: .9; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Stage badges ---------- */
.stage-badge { font-weight: 600; font-size: .78rem; padding: .3rem .6rem; border-radius: 8px; }
.st-pending      { background: #eceff3; color: #55606e; }
.st-in_progress  { background: #fff3d6; color: #9a6a00; }
.st-done         { background: #dcfce7; color: #15803d; }
.st-skipped      { background: #f3e8ff; color: #7c3aed; }

.pill {
    display:inline-block; padding:.18rem .55rem; border-radius:999px;
    font-size:.72rem; font-weight:700; letter-spacing:.3px;
}
.pill-purple { background: var(--tfd-purple-soft); color: var(--tfd-purple-3); }
.pill-black  { background: #e9e9ee; color: #1a1a1f; }
.pill-green  { background:#dcfce7; color:#15803d; }
.pill-amber  { background:#fff3d6; color:#9a6a00; }
.pill-red    { background:#fee2e2; color:#b91c1c; }

/* ---------- Pipeline stepper ---------- */
.pipeline { display:flex; flex-wrap:wrap; gap:.4rem; }
.pipeline .step {
    flex:1 1 auto; min-width:90px; text-align:center; padding:.5rem .35rem;
    border-radius:10px; font-size:.72rem; font-weight:600; border:2px solid #ececf2; color:#7a7a86;
    background:#fff;
}
.pipeline .step.done { background: var(--tfd-radiant-flat); color:#fff; border-color:transparent; }
.pipeline .step.current { border-color: var(--tfd-purple); color: var(--tfd-purple-3); box-shadow:0 0 0 3px rgba(124,58,237,.12); }
.pipeline .step small { display:block; font-weight:800; font-size:.9rem; }

/* ---------- Progress ---------- */
.progress { background:#ece9f4; border-radius:999px; height:.7rem; }
.progress-bar { background: var(--tfd-radiant-flat); }

/* ---------- Tables ---------- */
.table thead th { background:#faf8ff; color:#4b3b6b; border-bottom:2px solid #ece4fb; font-size:.82rem; text-transform:uppercase; letter-spacing:.4px; }
.table td { vertical-align: middle; }

/* ---------- Login ---------- */
.tfd-login-wrap {
    min-height: 82vh; display:flex; align-items:center; justify-content:center;
}
.tfd-login-card {
    width: 100%; max-width: 410px; border-radius: 18px; overflow:hidden;
    box-shadow: 0 18px 50px rgba(80,40,140,.25);
}
.tfd-login-head {
    background: var(--tfd-radiant); color:#fff; padding: 2rem 1.75rem 1.5rem;
    text-align:center;
}
.tfd-login-head .brand-dot { width:46px; height:46px; border-radius:50%; background:#fff; margin:0 auto .6rem; box-shadow:0 0 22px rgba(255,255,255,.5); }
.tfd-login-body { background:#fff; padding: 1.75rem; }

/* ---------- Footer ---------- */
.tfd-footer {
    background: var(--tfd-black); color:#b9b4c6; padding:1rem 0; margin-top:0;
    flex-shrink:0;   /* stay at the bottom, never squashed */
    font-size:.85rem;
}
.tfd-footer a { color:#c7a6ff; }

.section-title { font-weight:800; color:#2a2340; }
.text-purple { color: var(--tfd-purple-3) !important; }
.badge-role { background: var(--tfd-black-2); color:#fff; font-weight:600; }