/* ============================================================
   buyer.css — FarmLink Intelligence
   Buyer Portal Stylesheet

   Loads after public.css (which defines all CSS custom
   properties) and partials.css (which defines .sidebar-*
   base classes). This file adds buyer-specific overrides
   and every component unique to the buyer portal.

   RULE: Never re-declare :root. Never duplicate a class
   already in public.css or partials.css. Only add what
   is new or needs overriding for the buyer palette.

   CONTENTS
   01  Portal shell (teal topbar portal tag)
   02  Buyer sidebar palette overrides
   03  Sidebar badges
   04  Sidebar tip card
   05  Buyer avatar
   06  Topbar — buyer portal tag colour
   07  Marketplace page
   08  Listing cards (grid)
   09  Quality + trust score badges
   10  Forecast ribbon
   11  Filter bar
   12  Empty state
   13  Listing detail page
   14  Sensor summary strip
   15  Farmer info card
   16  Contact / alert action block
   17  Alerts page
   18  Alert registration form
   19  Alert list items
   20  Notifications page
   21  Notification items
   22  Buyer profile page
   23  Profile tabs
   24  Profile form
   25  Flash messages
   26  Responsive
   ============================================================ */


/* ══════════════════════════════════════════════════════════════
   01  PORTAL SHELL
   Identical to farmer portal — same topbar + sidebar layout.
   ══════════════════════════════════════════════════════════════ */

.portal-body {
  font-family: var(--font-sans);
  background: var(--gray-bg);
  color: var(--black);
  margin: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.portal-layout {
  display: flex;
  min-height: 100vh;
}

.portal-main {
  flex: 1;
  min-width: 0;
  margin-left: 240px;
  padding: 32px 36px 64px;
  padding-top: calc(56px + 32px);
}

/* Topbar (reused from farmer — no changes needed to structure) */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 56px;
  background: var(--white);
  border-bottom: var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 500;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

.topbar-mark {
  width: 30px;
  height: 30px;
  background: var(--teal-mid);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.topbar-brand {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.015em;
}

.topbar-vr {
  width: 1px;
  height: 16px;
  background: var(--gray-light);
}

/* Buyer portal tag — teal instead of green */
.topbar-portal-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--teal-mid);
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  letter-spacing: 0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-notif {
  position: relative;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-mid);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.topbar-notif:hover { background: var(--gray-bg); color: var(--black); }

.notif-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 15px;
  height: 15px;
  background: #A32D2D;
  color: var(--white);
  font-size: 9px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1.5px solid var(--white);
}

/* Buyer avatar — teal background */
.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teal-mid);
  color: var(--white);
  font-size: 11px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.topbar-username {
  font-size: 13px;
  color: var(--gray-mid);
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--gray-dark);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.topbar-logout:hover { background: var(--gray-bg); border-color: var(--gray-mid); }


/* ══════════════════════════════════════════════════════════════
   02  BUYER SIDEBAR PALETTE OVERRIDES
   partials.css sets .sidebar background to --green-dark.
   We override to --teal-dark for the buyer portal.
   ══════════════════════════════════════════════════════════════ */

.buyer-sidebar {
  background: var(--teal-dark);
}

/* Logo mark — teal glow instead of green glow */
.buyer-logo-mark {
  background: rgba(93, 202, 165, 0.12);
  border: 0.5px solid rgba(93, 202, 165, 0.2);
}

/* Identity role text — teal instead of green */
.buyer-identity-role {
  color: var(--teal-light);
  opacity: 0.7;
}

/* Active link — teal highlight instead of green */
.buyer-sidebar .sidebar-link.is-active {
  background: rgba(93, 202, 165, 0.1);
  color: var(--teal-light);
  border-right-color: var(--teal-light);
}

/* Hover state stays neutral white tint — inherited from partials.css */


/* ══════════════════════════════════════════════════════════════
   03  SIDEBAR BADGES
   .sidebar-badge — base pill shape
   .buyer-badge-teal — notifications (teal)
   .buyer-badge-amber — harvest alerts (amber)
   ══════════════════════════════════════════════════════════════ */

.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--fw-medium);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  line-height: 1.6;
  flex-shrink: 0;
}

.buyer-badge-teal {
  background: rgba(93, 202, 165, 0.18);
  color: var(--teal-light);
}

.buyer-badge-amber {
  background: rgba(250, 199, 117, 0.2);
  color: var(--amber-light);
}


/* ══════════════════════════════════════════════════════════════
   04  SIDEBAR TIP CARD
   Nudges buyers with zero alerts to register one.
   ══════════════════════════════════════════════════════════════ */

.buyer-tip-card {
  margin: 10px 14px 4px;
  background: rgba(93, 202, 165, 0.07);
  border: 0.5px solid rgba(93, 202, 165, 0.18);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.buyer-tip-label {
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--teal-light);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
  opacity: 0.85;
}

.buyer-tip-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.5;
  margin-bottom: 10px;
}

.buyer-tip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--teal-light);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.buyer-tip-link:hover { opacity: 1; }


/* ══════════════════════════════════════════════════════════════
   05  BUYER AVATAR (sidebar identity block)
   ══════════════════════════════════════════════════════════════ */

.buyer-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(93, 202, 165, 0.18);
  border: 0.5px solid rgba(93, 202, 165, 0.28);
  color: var(--teal-light);
  font-size: 12px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.buyer-avatar.buyer-avatar-photo {
  background: none;
  border-color: rgba(93, 202, 165, 0.22);
  overflow: hidden;
  padding: 0;
}

.buyer-avatar.buyer-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}


/* ══════════════════════════════════════════════════════════════
   06  PAGE HEADER (shared across buyer pages)
   ══════════════════════════════════════════════════════════════ */

.page-header {
  margin-bottom: 28px;
}

.page-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 22px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}

.page-subtitle {
  font-size: 13px;
  color: var(--gray-mid);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   07  MARKETPLACE PAGE — FILTER BAR
   ══════════════════════════════════════════════════════════════ */

.filter-bar {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}

.filter-label {
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filter-select,
.filter-input {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--black);
  background: var(--gray-bg);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  height: 36px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--teal-mid);
  background: var(--white);
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

/* Result count chip */
.result-count {
  font-size: 12px;
  color: var(--gray-mid);
  padding: 3px 10px;
  background: var(--gray-bg);
  border: var(--border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  align-self: flex-end;
}


/* ══════════════════════════════════════════════════════════════
   08  LISTING CARDS GRID
   ══════════════════════════════════════════════════════════════ */

.listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.listing-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
  cursor: pointer;
}

.listing-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gray-xbg);
  transform: translateY(-1px);
}

/* Card top row: crop name + quality badge */
.listing-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.listing-crop-name {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.01em;
}

.listing-region {
  font-size: 12px;
  color: var(--gray-mid);
  margin-top: 2px;
}

/* Card middle: price + quantity */
.listing-card-meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.listing-price {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.02em;
}

.listing-price-unit {
  font-size: 12px;
  color: var(--gray-mid);
}

.listing-qty {
  margin-left: auto;
  font-size: 12px;
  color: var(--gray-mid);
}

/* Card scores row */
.listing-card-scores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Card farmer row */
.listing-card-farmer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: var(--border);
}

.listing-farmer-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-bg);
  border: 0.5px solid var(--green-light);
  color: var(--green-mid);
  font-size: 9px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.listing-farmer-name {
  font-size: 12px;
  color: var(--gray-mid);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-forecast-ribbon {
  font-size: 10px;
  font-weight: var(--fw-medium);
  color: var(--amber-dark);
  background: var(--amber-bg);
  border: 0.5px solid var(--amber-light);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   09  QUALITY + TRUST SCORE BADGES
   Used on listing cards and listing detail page.
   ══════════════════════════════════════════════════════════════ */

.score-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
}

/* Quality badge — teal (IoT verified) */
.score-badge-quality {
  background: var(--teal-bg);
  color: var(--teal-mid);
  border: 0.5px solid var(--teal-light);
}

/* Trust badge — green (farmer reputation) */
.score-badge-trust {
  background: var(--green-bg);
  color: var(--green-mid);
  border: 0.5px solid var(--green-light);
}

/* Score dot — quality level indicator */
.score-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.score-dot-high   { background: var(--teal-mid); }
.score-dot-medium { background: var(--amber-mid); }
.score-dot-low    { background: #A32D2D; }


/* ══════════════════════════════════════════════════════════════
   10  BUTTONS (buyer portal actions)
   ══════════════════════════════════════════════════════════════ */

.btn-buyer-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--white);
  background: var(--teal-mid);
  border: none;
  border-radius: var(--radius-md);
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s;
  white-space: nowrap;
}
.btn-buyer-primary:hover  { background: var(--teal-dark); }
.btn-buyer-primary:active { background: var(--teal-dark); }

.btn-buyer-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--teal-mid);
  background: var(--white);
  border: 0.5px solid var(--teal-light);
  border-radius: var(--radius-md);
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.btn-buyer-secondary:hover { background: var(--teal-bg); border-color: var(--teal-mid); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-dark);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.btn-ghost:hover { background: var(--gray-bg); border-color: var(--gray-mid); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #A32D2D;
  background: var(--white);
  border: 0.5px solid #E8BABA;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}
.btn-danger:hover { background: #FDF2F2; border-color: #A32D2D; }


/* ══════════════════════════════════════════════════════════════
   11  EMPTY STATE
   Shown when marketplace has no results.
   ══════════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: 72px 24px;
}

.empty-icon {
  width: 56px;
  height: 56px;
  background: var(--teal-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--teal-mid);
}

.empty-title {
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--black);
  margin-bottom: 6px;
}

.empty-text {
  font-size: 13px;
  color: var(--gray-mid);
  max-width: 320px;
  margin: 0 auto 24px;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   12  LISTING DETAIL PAGE
   ══════════════════════════════════════════════════════════════ */

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

/* Card base (reused across detail sections) */
.detail-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 18px;
}

.detail-card-title {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 16px;
}

/* Score ring strip */
.detail-score-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.detail-score-item {
  flex: 1;
  min-width: 120px;
  background: var(--gray-bg);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  text-align: center;
}

.detail-score-value {
  font-size: 28px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.detail-score-label {
  font-size: 11px;
  color: var(--gray-mid);
}

/* Sensor summary table */
.sensor-table {
  width: 100%;
  border-collapse: collapse;
}

.sensor-table td {
  padding: 9px 0;
  font-size: 13px;
  border-bottom: var(--border);
}

.sensor-table tr:last-child td { border-bottom: none; }

.sensor-table .sensor-label {
  color: var(--gray-mid);
  width: 50%;
}

.sensor-table .sensor-value {
  color: var(--black);
  font-weight: var(--fw-medium);
  text-align: right;
}

/* Sidebar sticky card on detail page */
.detail-sidebar-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(56px + 24px);
}

.detail-price-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: var(--border);
}

.detail-price-main {
  font-size: 26px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.detail-price-sub {
  font-size: 12px;
  color: var(--gray-mid);
}

.detail-action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Farmer mini card */
.farmer-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: var(--border);
  margin-top: 18px;
  text-decoration: none;
  color: inherit;
}

.farmer-mini-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-bg);
  border: 0.5px solid var(--green-light);
  color: var(--green-mid);
  font-size: 12px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.farmer-mini-name {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--black);
}

.farmer-mini-trust {
  font-size: 11px;
  color: var(--gray-mid);
  margin-top: 1px;
}

/* Forecast banner on detail page */
.forecast-banner {
  background: var(--amber-bg);
  border: 0.5px solid var(--amber-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.forecast-banner-icon {
  width: 32px;
  height: 32px;
  background: rgba(133, 79, 11, 0.1);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber-mid);
  flex-shrink: 0;
}

.forecast-banner-text {
  flex: 1;
}

.forecast-banner-title {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--amber-dark);
  margin-bottom: 2px;
}

.forecast-banner-sub {
  font-size: 12px;
  color: var(--amber-mid);
}


/* ══════════════════════════════════════════════════════════════
   13  ALERTS PAGE
   ══════════════════════════════════════════════════════════════ */

.alerts-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

/* New alert form card */
.alert-form-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: sticky;
  top: calc(56px + 24px);
}

.alert-form-title {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--black);
  margin-bottom: 18px;
}

/* Alert list item */
.alert-item {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  transition: box-shadow 0.12s;
}
.alert-item:hover { box-shadow: var(--shadow-sm); }

.alert-item-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--teal-mid);
  flex-shrink: 0;
}

.alert-item-icon.is-inactive {
  background: var(--gray-bg);
  border-color: var(--gray-light);
  color: var(--gray-mid);
}

.alert-item-body { flex: 1; min-width: 0; }

.alert-item-crop {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--black);
  margin-bottom: 2px;
}

.alert-item-region {
  font-size: 12px;
  color: var(--gray-mid);
}

.alert-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Active / inactive toggle pill */
.alert-status-pill {
  font-size: 11px;
  font-weight: var(--fw-medium);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.alert-status-pill.is-active {
  background: var(--teal-bg);
  color: var(--teal-mid);
  border: 0.5px solid var(--teal-light);
}

.alert-status-pill.is-inactive {
  background: var(--gray-bg);
  color: var(--gray-mid);
  border: var(--border);
}


/* ══════════════════════════════════════════════════════════════
   14  NOTIFICATIONS PAGE
   ══════════════════════════════════════════════════════════════ */

/* Tab bar */
.notif-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border);
  margin-bottom: 24px;
}

.notif-tab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-mid);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: -0.5px;
}

.notif-tab:hover { color: var(--black); }

.notif-tab.is-active {
  color: var(--teal-mid);
  border-bottom-color: var(--teal-mid);
}

/* Notification item */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--border);
  transition: background 0.1s;
}

.notif-item:last-child { border-bottom: none; }

.notif-item.is-unread { background: var(--teal-bg); border-radius: var(--radius-md); padding: 16px; margin-bottom: 4px; border-bottom: none; }

.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-mid);
  margin-top: 5px;
  flex-shrink: 0;
}

.notif-dot.is-read {
  background: var(--gray-light);
}

.notif-body { flex: 1; min-width: 0; }

.notif-message {
  font-size: 13px;
  color: var(--black);
  line-height: 1.55;
  margin-bottom: 4px;
}

.notif-meta {
  font-size: 11px;
  color: var(--gray-mid);
}

.notif-channel-pill {
  font-size: 10px;
  font-weight: var(--fw-medium);
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--gray-bg);
  color: var(--gray-mid);
  border: var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════════════
   15  BUYER PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */

.profile-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}

/* Left card — avatar + name summary */
.profile-id-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  position: sticky;
  top: calc(56px + 24px);
}

.profile-avatar-wrap {
  position: relative;
  width: 80px;
  margin: 0 auto 14px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--teal-bg);
  border: 2px solid var(--teal-light);
  color: var(--teal-mid);
  font-size: 22px;
  font-weight: var(--fw-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-name {
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--black);
  margin-bottom: 3px;
}

.profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-medium);
  color: var(--teal-mid);
  background: var(--teal-bg);
  border: 0.5px solid var(--teal-light);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  margin-top: 6px;
  margin-bottom: 18px;
}

.profile-stat-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 16px;
  border-top: var(--border);
}

.profile-stat {
  text-align: center;
}

.profile-stat-value {
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--black);
  letter-spacing: -0.02em;
}

.profile-stat-label {
  font-size: 11px;
  color: var(--gray-mid);
  margin-top: 1px;
}

/* Right panel — tabs + form */
.profile-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border);
  margin-bottom: 24px;
}

.profile-tab {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--gray-mid);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  text-decoration: none;
  margin-bottom: -0.5px;
}

.profile-tab:hover { color: var(--black); }

.profile-tab.is-active {
  color: var(--teal-mid);
  border-bottom-color: var(--teal-mid);
}

/* Form inside profile */
.profile-form-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 18px;
}

.profile-form-title {
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--black);
  margin-bottom: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}

.form-field:last-of-type { margin-bottom: 0; }

.form-label {
  font-size: 12px;
  font-weight: var(--fw-medium);
  color: var(--gray-dark);
}

.form-input,
.form-select {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--black);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  height: 38px;
  width: 100%;
  transition: border-color 0.12s;
  appearance: none;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--teal-mid);
}

.form-input.is-error { border-color: #A32D2D; }

.form-hint {
  font-size: 11px;
  color: var(--gray-mid);
}

.form-error {
  font-size: 11px;
  color: #A32D2D;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--border);
}

/* Danger zone card */
.danger-zone-card {
  background: #FDF2F2;
  border: 0.5px solid #E8BABA;
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.danger-zone-title {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #A32D2D;
  margin-bottom: 6px;
}

.danger-zone-text {
  font-size: 12px;
  color: #7A3030;
  margin-bottom: 16px;
  line-height: 1.55;
}


/* ══════════════════════════════════════════════════════════════
   16  FLASH MESSAGES
   ══════════════════════════════════════════════════════════════ */

.flash-stack {
  position: fixed;
  top: calc(56px + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  min-width: 280px;
  max-width: 480px;
}

.flash {
  font-size: 13px;
  font-weight: var(--fw-medium);
  padding: 11px 18px;
  border-radius: var(--radius-md);
  border: 0.5px solid transparent;
  pointer-events: auto;
  box-shadow: var(--shadow-md);
}

.flash-success {
  background: #EAF5EE;
  border-color: #8FD0A3;
  color: #1C5E32;
}

.flash-error {
  background: #FDF2F2;
  border-color: #E8BABA;
  color: #A32D2D;
}

.flash-info {
  background: var(--teal-bg);
  border-color: var(--teal-light);
  color: var(--teal-dark);
}

.flash-warning {
  background: var(--amber-bg);
  border-color: var(--amber-light);
  color: var(--amber-dark);
}


/* ══════════════════════════════════════════════════════════════
   17  RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .detail-layout  { grid-template-columns: 1fr; }
  .alerts-layout  { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }

  .alert-form-card,
  .detail-sidebar-card,
  .profile-id-card { position: static; }

  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .portal-main {
    margin-left: 0;
    padding: 24px 18px 48px;
    padding-top: calc(56px + 24px);
  }

  .listings-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .filter-actions {
    flex-direction: column;
  }

  .page-header-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .notif-tabs,
  .profile-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .topbar-username { display: none; }
}

@media (max-width: 480px) {
  .portal-main {
    padding: 16px 14px 40px;
    padding-top: calc(56px + 16px);
  }

  .detail-score-strip {
    flex-direction: column;
  }

  .alert-item {
    flex-wrap: wrap;
  }
}