/* ============================================================
   PROVIDER VIEW
   ============================================================ */

/* Provider wrapper — hidden by default, shown via .active */
#providerView {
  display: none;
  flex-direction: column;
  width: 100%;
  margin: 0;
  flex: 1;
  background: var(--bg);
  animation: viewFadeIn .35s ease both;
}
#providerView.active {
  display: flex !important;
}

/* Client view visibility */
#clientView { display: flex; flex-direction: column; flex: 1; animation: viewFadeIn .35s ease both; }
#clientView.hidden { display: none; }

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mode toggle — .active-mode defined in clientView.css */
.inactive-mode { color: var(--nav-text) !important; cursor: pointer; font-weight: 400; text-decoration: none; }
.inactive-mode:hover { color: #fff !important; }

/* Provider tab content — mirrors client .tab-content */
.provider-tab-content {
  display: none;
  flex-direction: column;
  min-height: 0;
}
.provider-tab-content.active-tab {
  display: flex;
}

/* Provider sidebar — uses .sidebar-filter styles from clientView.css */
/* Provider feed area — uses .main-content-area styles from clientView.css */

/* Availability toggle */
.provider-availability-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
body.dark-mode .provider-availability-toggle {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
.provider-availability-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.toggle-switch {
  width: 34px; height: 18px; border-radius: 9px;
  background: #ccc; position: relative; transition: background .2s;
  flex-shrink: 0;
}
.toggle-switch.on { background: var(--green); }
.toggle-knob {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; position: absolute; top: 2px; left: 2px;
  transition: left .2s;
}
.toggle-switch.on .toggle-knob { left: 18px; }

/* Skill tags */
.provider-skill-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  margin: 2px 2px 2px 0;
}
body.dark-mode .provider-skill-badge {
  background: rgba(46,168,74,.1);
}

/* Radius value */
.provider-radius-value {
  font-weight: 800;
  color: var(--green);
}

/* ── Feed tabs — folder/file tab design ──
   Each tab is shaped like a manila folder tab (rounded top corners,
   flat bottom, slight overlap with neighbors). The active tab sits
   visually "in front" — same background as the content panel below
   it, with no bottom border so it blends seamlessly. Inactive tabs
   are slightly recessed (gray) and their bottom border merges with
   the content panel's top border to look like they're behind it. */
/* ─── Feed tabs: B9 design ──────────────────────────────────────
   Sharp flat top-left corner, rounded top-right (12px). Inactive
   tabs are completely transparent (no border, no fill) until hover —
   only the ACTIVE tab carries a visible border and white fill.
   Active tab has a thin green accent line at the top and shares the
   white background of the panel below so they read as one continuous
   surface. Minimal and clean. */
.feed-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  /* Lined up with .msg-col-header in the right column so the active
     tab's bottom edge sits flush with the "Messages" header rule.
     Math: msg-col-header bottom = 2 (mt) + 12 (pt) + 28 (icon-pill)
     + 11 (pb) + 1 (border) = 54px from column top. Feed-tab bottom
     = mt + 11 (pt) + 28 (icon-pill) + 10 (pb) + 1 (border) = mt+50.
     Setting margin-top:4 puts both at 54px. */
  margin-top: 4px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
  /* No scrollbar — tabs spread full width via flex: 1 below */
  overflow: visible;
}
.feed-tab {
  position: relative;
  padding: 11px 12px 10px;
  margin: 0;
  /* Each tab claims an equal share of the row, so the strip fills
     end-to-end without a scrollbar. */
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
  border-bottom: none;
  /* Small 10px rounding on the top corners; bottom stays sharp so
     the active tab merges flat with the panel below. Symmetric. */
  border-radius: 10px 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
  filter: none;
  clip-path: none;
  transition: background .15s, color .15s;
}
.feed-tab:not(.active):hover {
  background: var(--green-light);
  color: var(--green-dark);
  transform: none;
}
.feed-tab.active {
  background: var(--surface);
  color: var(--green-dark);
  font-weight: 800;
  border-color: #d6dee2;
  /* Explicit white bottom border erases the panel's top border line
     directly underneath the active tab — the seamless "merged with
     content" effect. Without this, a faint gray line shows through. */
  border-bottom: 1px solid var(--surface);
  z-index: 3;
  margin-bottom: -1px;
  filter: none;
  text-shadow: none;
}
.feed-tab.active::before {
  /* Thin green accent line at the top of the active tab.
     Stops short of the rounded corners by 8px each side so it
     doesn't overflow the curve. Symmetric. */
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 0;
  height: 3px;
  background: var(--green);
  border-radius: 2px;
}
body.dark-mode .feed-tab {
  background: transparent;
  color: var(--text-2);
}
body.dark-mode .feed-tab:not(.active):hover {
  background: rgba(46,168,74,.12);
  color: #5fc88a;
}
body.dark-mode .feed-tab.active {
  background: var(--surface);
  border-color: rgba(255,255,255,.14);
  border-bottom-color: var(--surface);
  color: #5fc88a;
}

/* Content panel — bottom-rounded card. NO top border so the inactive
   tabs above don't show a horizontal line cutting across them. The
   active tab carries its own border on left/top/right; the panel
   carries borders on left/right/bottom. They visually meet at the
   active tab's bottom edge.

   The panel's min-height fills the rest of the viewport (viewport
   height minus the space the header/banner/tabs consume above it),
   so the side borders extend "to infinity" instead of stopping a
   few hundred pixels down. */
#taskFeedContainer {
  background: var(--surface);
  border: 1px solid #d6dee2;
  border-top: none; /* removes the line that runs under inactive tabs */
  /* All corners sharp — symmetric panel matching the symmetric tabs. */
  border-radius: 0;
  padding: 16px;
  margin-top: 0;
  position: relative;
  z-index: 0;
  min-height: calc(100vh - 220px);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
body.dark-mode #taskFeedContainer {
  border-color: rgba(255,255,255,.14);
}

/* "— Nothing follows —" footer at the bottom of every list feed.
   A short divider line on each side of the centered text label.
   Applies to nearby/all/applied/offers/active/completed/declined feeds. */
.feed-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 28px 8px 12px;
  user-select: none;
}
.feed-end-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 30%,
    var(--border) 70%,
    transparent 100%);
}
.feed-end-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
body.dark-mode .feed-end-line {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.12) 30%,
    rgba(255,255,255,.12) 70%,
    transparent 100%);
}

/* Notify badge on feed tab */
.feed-tab .notif-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Task cards in feed — 10px corners to match the tab radius. */
.task-feed-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .2s, box-shadow .2s;
  cursor: pointer;
  box-shadow: var(--shadow-card);
}
body.dark-mode .task-feed-card {
  background: var(--surface);
  border-color: var(--border-hard);
}
.task-feed-card:hover {
  border-color: rgba(46,168,74,.35);
  box-shadow: 0 4px 16px rgba(46,168,74,.1);
}
.task-feed-card.new-task {
  border-left: 3px solid var(--green);
}
.task-feed-card.applied {
  border-left: 3px solid var(--blue);
  opacity: .75;
}

.task-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.task-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
  margin: 0;
}
.task-card-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.task-badge-new    { background: rgba(46,168,74,.1);  color: var(--green); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.task-badge-nearby   { background: rgba(59,130,246,.1);  color: var(--blue);  font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.task-badge-match  { background: rgba(245,158,11,.12); color: #d97706;      font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.task-badge-applied{ background: rgba(239,68,68,.1);   color: var(--red);   font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.task-badge-urgent { background: rgba(239,68,68,.12);  color: var(--red);   font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; animation: pulse 1.5s infinite; }
/* Live applicant count — populated by the listener after render. Neutral
   grey at 0; switches to the green family once at least one provider has
   applied so posters and other providers see traction at a glance. */
.task-badge-interested { display: inline-flex; align-items: center; gap: 3px; background: rgba(0,0,0,.06); color: var(--text-2, #6b7c6f); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 10px; }
.task-badge-interested .lucide-ico { width: 11px; height: 11px; }
.task-badge-interested.has-applicants { background: rgba(46,168,74,.14); color: var(--green-dark, #1e7a33); }
.task-badge-interested.clickable { cursor: pointer; transition: background .15s, transform .1s; user-select: none; }
.task-badge-interested.clickable:hover { background: rgba(0,0,0,.10); }
.task-badge-interested.clickable.has-applicants:hover { background: rgba(46,168,74,.22); }
.task-badge-interested.clickable:active { transform: scale(.97); }
/* @keyframes pulse — defined in clientView.css */

.task-card-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.task-card-meta-item {
  font-size: 11px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 4px;
}
.task-card-meta-item.budget {
  font-weight: 800;
  color: var(--green);
  font-size: 13px;
}

.task-card-description {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 10px;
}

.task-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.task-card-client {
  display: flex;
  align-items: center;
  gap: 6px;
}
.task-card-client-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.task-card-client-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.task-card-client-rank {
  font-size: 10px;
  color: var(--text-3);
}
.task-card-time {
  font-size: 10px;
  color: var(--text-3);
}

/* Apply button */
.apply-btn {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 3px 10px rgba(46,168,74,.3);
}
.apply-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}
.apply-btn.applied-state {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  box-shadow: none;
}
.apply-btn.applied-state:hover {
  background: rgba(59,130,246,.08);
  transform: none;
}

/* Empty feed */
.feed-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
}
.feed-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
.feed-empty-text {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-2);
}
.feed-empty-sub {
  font-size: 12px;
}

/* Apply modal */
#applyModalOverlay.modal-overlay { align-items: center; }
.apply-modal-container {
  max-width: 460px !important;
  border-radius: 18px !important;
  overflow: hidden;
}
.apply-modal-header {
  background: var(--nav-bg);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.apply-modal-task-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 2px;
}
.apply-modal-task-budget {
  font-size: 11px;
  color: #4ade80;
  font-weight: 700;
}
.apply-modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.apply-field-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 5px;
}
.apply-offer-row {
  display: flex;
  gap: 10px;
}
.apply-offer-input {
  flex: 1;
  border: 1.5px solid var(--border-hard);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  background: var(--surface);
  outline: none;
  transition: border-color .2s;
}
.apply-offer-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
}
body.dark-mode .apply-offer-input {
  background: rgba(255,255,255,.04);
  color: #fff;
  border-color: #333;
}
.apply-textarea {
  width: 100%;
  border: 1.5px solid var(--border-hard);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-2);
  background: var(--surface);
  outline: none;
  resize: none;
  transition: border-color .2s;
}
.apply-textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
}
body.dark-mode .apply-textarea {
  background: rgba(255,255,255,.04);
  color: #ccc;
  border-color: #333;
}
.apply-eta-row {
  display: flex;
  gap: 10px;
}
.apply-eta-select {
  flex: 1;
  border: 1.5px solid var(--border-hard);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--surface);
  outline: none;
  cursor: pointer;
}
body.dark-mode .apply-eta-select {
  background: rgba(255,255,255,.04);
  color: #fff;
  border-color: #333;
}
.apply-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border-hard);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface2);
}
body.dark-mode .apply-modal-footer {
  background: rgba(255,255,255,.02);
  border-color: #232e26;
}
.apply-submit-btn {
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
  box-shadow: 0 4px 12px rgba(46,168,74,.3);
}
.apply-submit-btn:hover {
  background: var(--green-dark);
}

/* Dark mode extras */
body.dark-mode .task-feed-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}

/* ============================================================
   RESPONSIVE — Provider mobile
   ============================================================ */
@media (max-width: 600px) {
  /* Provider sidebar becomes drawer on mobile */
  #providerView .provider-sidebar-filter {
    display: none;
    width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    border-right: none;
    border-bottom: 1px solid var(--border-hard);
    padding: 14px;
    overflow-y: auto;
    animation: slideDown .25s ease;
  }
  #providerView .provider-sidebar-filter.open {
    display: block;
  }

  /* Show provider mobile bottom nav */
  .provider-mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--nav-bg);
    border-top: 1px solid rgba(255,255,255,.08);
    z-index: 200;
    padding: 6px 0 env(safe-area-inset-bottom, 6px);
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
  }
}