/* ==========================================================================
   MyBizDeals — Single Source of Truth for Design Tokens
   Every page imports this file. Do NOT redefine these values inline.
   ========================================================================== */

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

:root {
  /* ── Brand color (navy palette from TheBuzSale mockup) ── */
  --color-brand:       #1e5a8e;   /* navy primary — CTA, links, headings highlight */
  --color-brand-hover: #16456c;   /* navy deep — hover state */
  --color-brand-50:    #e8f0f7;   /* primary-tint — subtle bg, badge bg */
  --color-brand-100:   #d4e4f0;
  --color-brand-200:   #b8d1e7;
  --color-brand-500:   #2a6ba3;
  --color-brand-700:   #16456c;
  --color-brand-800:   #0e3556;

  /* ── Accent (amber — used for highlights, Friday Hot Deals, attention) ── */
  --color-accent:      #c8841b;
  --color-accent-tint: #fbf1de;
  --color-accent-deep: #b9810f;

  /* ── Teal (verified / approved / success) ── */
  --color-teal:        #157a6e;
  --color-teal-tint:   #e3f1ee;

  /* ── Neutrals (warmer slate, matches mockup) ── */
  --color-bg:          #ffffff;
  --color-bg-muted:    #f7f9fb;   /* panel — cards inside cards */
  --color-bg-page:     #eef1f5;   /* page bg */
  --color-fg:          #11202e;   /* ink — body text, headings */
  --color-fg-muted:    #3a4b5c;   /* ink-soft — subhead, secondary */
  --color-fg-subtle:   #6c7d8d;   /* muted — labels, meta */
  --color-fg-faint:    #9aa9b6;   /* faint — placeholder, disabled */
  --color-border:      #e3e9ef;   /* line — default border */
  --color-border-light:#eef2f6;   /* line-soft — subtle dividers */

  /* ── Status / alert colors ── */
  --color-green:       #1f8a4c;
  --color-green-tint:  #e6f4ec;
  --color-red:         #c0392b;
  --color-red-tint:    #fbeae8;
  --color-amber-50:    #fbf1de;   /* same as accent-tint */
  --color-amber-200:   #efd9b0;
  --color-amber-700:   #b9810f;
  --color-amber-800:   #9b6c0c;
  --color-amber-900:   #78350f;
  --color-rose-500:    #c0392b;

  /* Dark section (footer, hot-deal banner) */
  --color-navy-900:    #11202e;
  --color-navy-deep:   #1a1f2b;

  /* ── Typography — Fraunces (display serif), Spline Sans (body), JetBrains Mono (numbers/refs) ── */
  --font-sans:    'Spline Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Font sizes (matches Tailwind defaults) */
  --text-xs:   0.75rem;   /* 12px — meta, labels, badges */
  --text-sm:   0.875rem;  /* 14px — body text in tight UIs */
  --text-base: 1rem;      /* 16px — default body */
  --text-lg:   1.125rem;  /* 18px — H4, lead paragraph */
  --text-xl:   1.25rem;   /* 20px — H3, navbar logo */
  --text-2xl:  1.5rem;    /* 24px — H2, page titles */
  --text-3xl:  1.875rem;  /* 30px — section headings */
  --text-4xl:  2.25rem;   /* 36px — hero h2 / page hero */
  --text-5xl:  3rem;      /* 48px — hero headline desktop */
  --text-6xl:  3.75rem;   /* 60px — hero headline xl */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Spacing scale (8pt grid) ── */
  --space-1:  0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5:  1.25rem; --space-6: 1.5rem; --space-8: 2rem;    --space-10:2.5rem;
  --space-12: 3rem;   --space-16:4rem;   --space-20:5rem;     --space-24:6rem;

  /* ── Radius ── */
  --radius-sm: 0.375rem;  /* 6px */
  --radius-md: 0.5rem;    /* 8px — buttons, inputs, small cards */
  --radius-lg: 0.75rem;   /* 12px — cards */
  --radius-xl: 1rem;      /* 16px — feature cards */
  --radius-full: 9999px;  /* pills, badges */
  /* TalentOS aliases */
  --r-xs: 4px;  --r-sm: 6px;  --r-md: 8px;  --r-lg: 10px;
  --r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px;

  /* ── Shadow (elevation scale) ── */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,0.04);
  --shadow:     0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px -1px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  /* TalentOS elevation aliases */
  --sh-xs: 0 1px 2px rgba(15,31,46,.04);
  --sh-sm: 0 1px 4px rgba(15,31,46,.06), 0 1px 2px rgba(15,31,46,.04);
  --sh-md: 0 4px 16px rgba(15,31,46,.07), 0 1px 4px rgba(15,31,46,.04);
  --sh-lg: 0 12px 40px rgba(15,31,46,.12), 0 4px 12px rgba(15,31,46,.06);
  --sh-xl: 0 24px 64px rgba(15,31,46,.16), 0 8px 24px rgba(15,31,46,.08);

  /* ── Motion ── */
  --ease:        cubic-bezier(.4,0,.2,1);
  --ease-out:    cubic-bezier(0,0,.2,1);
  --ease-in:     cubic-bezier(.4,0,1,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:    100ms;
  --dur-base:    160ms;
  --dur-slow:    240ms;

  /* ── Layout ── */
  --container-max: 80rem;        /* 1280px — page max width */
  --container-narrow: 64rem;     /* 1024px — content max width */
  --container-form: 24rem;       /* 384px — forms */
  --nav-height: 4rem;            /* 64px — navbar height */
  --gutter:    1.5rem;           /* horizontal page padding */
  --gutter-lg: 2.5rem;
}

/* ==========================================================================
   Resets / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   Brand utility classes (Tailwind CDN can't read CSS vars in tailwind.config,
   but these classes are reliable fallbacks for any page)
   ========================================================================== */
.text-brand   { color: var(--color-brand); }
.bg-brand     { background-color: var(--color-brand); }
.bg-brand:hover{ background-color: var(--color-brand-hover); }
.border-brand { border-color: var(--color-brand); }
.ring-brand   { --tw-ring-color: var(--color-brand); }

.font-display { font-family: var(--font-serif); font-weight: 700; }

/* Standard button system — used everywhere */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-brand); color: #fff;
  font-weight: 500; font-size: var(--text-sm);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: background .15s;
}
.btn-primary:hover { background: var(--color-brand-hover); }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: #fff; color: var(--color-fg);
  border: 1px solid var(--color-border);
  font-weight: 500; font-size: var(--text-sm);
  border-radius: var(--radius-md);
  transition: background .15s;
}
.btn-secondary:hover { background: var(--color-bg-muted); }

/* Card shell */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Verification pill row — used on listing cards & detail */
.badge-verified {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--color-brand-700);
  background: var(--color-brand-50);
  border: 1px solid var(--color-brand-200);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.badge-unverified {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--color-fg-subtle);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   PROFESSIONAL ANIMATIONS & POLISH
   ========================================================================== */

/* Page fade-in on load */
body { animation: pageLoadFade 0.4s ease-out; }
@keyframes pageLoadFade {
  from { opacity: 0.95; }
  to { opacity: 1; }
}

/* Smooth page-load fade-in */
.fade-in { opacity: 0; transform: translateY(8px); }
.fade-in.fade-in-active { opacity: 1; transform: translateY(0); transition: opacity .4s ease-out, transform .4s ease-out; }

/* Element fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Smooth transitions for interactive elements — exclude sidebar items */
.mbz-content a, .mbz-content button, .mbz-content input,
.mbz-content select, .mbz-content textarea, .mbz-content [role="button"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover lift — content area only, not sidebar/topbar */
.mbz-content button:not(:disabled):hover,
.mbz-content [role="button"]:hover {
  transform: translateY(-1px);
}

.mbz-content button:not(:disabled):active,
.mbz-content [role="button"]:active {
  transform: scale(0.98);
}

/* Card hover lift and polish */
.card, .card-hover,
[class*="bg-white"][class*="border"][class*="rounded"],
a.bg-white {
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover,
[class*="bg-white"][class*="border"][class*="rounded"]:hover,
a.bg-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0, 151, 103, 0.18);
  border-color: rgb(167 243 208);
}

/* Input focus states */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-color: var(--color-brand);
}

/* Link hover states */
a:not([class*="btn"]):not([class*="nav"]):not([class*="sidebar"]) {
  position: relative;
  transition: color 0.2s ease;
}

a:not([class*="btn"]):not([class*="nav"]):not([class*="sidebar"]):hover {
  color: var(--color-brand);
}

/* Button press feedback */
button, .btn { transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
button:active:not(:disabled) { transform: scale(.97); }

/* Sidebar professional styling */
[data-sidebar-v3] {
  background: #ffffff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.08);
}

[data-sidebar-v3] nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

[data-sidebar-v3] nav::-webkit-scrollbar {
  width: 6px;
}

[data-sidebar-v3] nav::-webkit-scrollbar-track {
  background: transparent;
}

[data-sidebar-v3] nav::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

[data-sidebar-v3] nav::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.15);
}

/* Sidebar item active state animation */
.sidebar-item { position: relative; transition: background-color .15s ease, color .15s ease; }
.sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: #1e5a8e; border-radius: 0 2px 2px 0; }

/* Sidebar link animations */
[data-sidebar-v3] .sidebar-link {
  position: relative;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-sidebar-v3] .sidebar-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}

[data-sidebar-v3] .sidebar-link:hover::before {
  left: 100%;
}

/* Toast notifications with animations */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  min-width: 280px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: white;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.3);
  transform: translateY(120px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 99999;
  animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

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

.toast.show { transform: translateY(0); opacity: 1; }
.toast.hide { animation: toastSlideOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.toast.success { background: linear-gradient(135deg, #1e5a8e 0%, #16456c 100%); }
.toast.error { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.toast.warning { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.toast.info { background: linear-gradient(135deg, #334155 0%, #1e293b 100%); }

/* Skeleton loading */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Subtle staggered list reveal */
[data-stagger] > * { opacity: 0; animation: fadeUp .5s ease forwards; }
[data-stagger] > *:nth-child(1) { animation-delay: .05s; }
[data-stagger] > *:nth-child(2) { animation-delay: .1s; }
[data-stagger] > *:nth-child(3) { animation-delay: .15s; }
[data-stagger] > *:nth-child(4) { animation-delay: .2s; }
[data-stagger] > *:nth-child(5) { animation-delay: .25s; }
[data-stagger] > *:nth-child(6) { animation-delay: .3s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(10px); } }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Focus rings */
:focus-visible { outline: 2px solid #1e5a8e; outline-offset: 2px; border-radius: 4px; }

/* Brand gradient utility */
.brand-gradient { background: linear-gradient(135deg, #1e5a8e 0%, #16456c 100%); }

/* Footer professional styling — public/marketing pages only (not mbz-footer in dashboard) */
footer:not(.mbz-footer) {
  margin-top: auto;
  border-top: 1px solid var(--color-border-light);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  padding: 3rem 1.5rem;
  transition: all 0.3s ease;
}

footer:not(.mbz-footer):hover {
  box-shadow: 0 -4px 16px rgba(0, 151, 103, 0.08);
}

footer:not(.mbz-footer) a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

footer:not(.mbz-footer) a:hover {
  color: var(--color-brand-hover);
  text-decoration: underline;
}

/* Footer sidebar offset — handled by mbz-shell grid, no extra padding needed */

/* Default lift for KPI / list cards (subtle, opt-out by avoiding the pattern) */
a.bg-white.border.border-slate-200.rounded-xl,
a.bg-white.border.rounded-xl {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.bg-white.border.border-slate-200.rounded-xl:hover,
a.bg-white.border.rounded-xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -10px rgba(0,151,103,.15);
  border-color: rgb(167 243 208);
}

/* Section spacing beautification */
main > section,
main > div > section {
  animation: fadeInUp 0.5s ease-out backwards;
}

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

/* Staggered animations for list items */
[data-stagger] > * {
  animation: fadeInUp 0.5s ease-out backwards;
}

[data-stagger] > *:nth-child(1) { animation-delay: 0.05s; }
[data-stagger] > *:nth-child(2) { animation-delay: 0.1s; }
[data-stagger] > *:nth-child(3) { animation-delay: 0.15s; }
[data-stagger] > *:nth-child(4) { animation-delay: 0.2s; }
[data-stagger] > *:nth-child(5) { animation-delay: 0.25s; }
[data-stagger] > *:nth-child(6) { animation-delay: 0.3s; }

/* Professional spacing and typography */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.3px;
  transition: color 0.2s ease;
}

p {
  line-height: 1.6;
}

/* Badge animations */
[class*="badge"],
[class*="pill"],
[class*="label"] {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

[class*="badge"]:hover,
[class*="pill"]:hover,
[class*="label"]:hover {
  transform: scale(1.05);
}

/* ==========================================================================
   TALENTОС-QUALITY ANIMATION SYSTEM
   ========================================================================== */

/* Full keyframe library */
@keyframes popIn       { 0%{transform:scale(.82);opacity:0} 60%{transform:scale(1.04);opacity:1} 100%{transform:scale(1)} }
@keyframes popInSmall  { 0%{transform:scale(.90);opacity:0} 65%{transform:scale(1.03);opacity:1} 100%{transform:scale(1)} }
@keyframes slideInRight{ from{opacity:0;transform:translateX(32px)} to{opacity:1;transform:none} }
@keyframes slideInLeft { from{opacity:0;transform:translateX(-32px)} to{opacity:1;transform:none} }
@keyframes slideInDown2{ from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@keyframes breathe     { 0%,100%{transform:scale(1);box-shadow:0 0 16px rgba(0,151,103,.24)} 50%{transform:scale(1.05);box-shadow:0 0 32px rgba(0,151,103,.50)} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes barFill     { from{transform:scaleX(0);transform-origin:left} to{transform:scaleX(1)} }
@keyframes ripple      { from{transform:scale(0);opacity:.35} to{transform:scale(4);opacity:0} }
@keyframes countUp     { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes spin        { to{transform:rotate(360deg)} }
@keyframes pulse-ring  { 0%{box-shadow:0 0 0 0 rgba(0,151,103,.40)} 70%{box-shadow:0 0 0 10px rgba(0,151,103,0)} 100%{box-shadow:0 0 0 0 rgba(0,151,103,0)} }
@keyframes shimmer     { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Utility animation classes */
.animate-fadein       { animation: fadeIn        .24s var(--ease-out,ease) both; }
.animate-fadein-up    { animation: fadeInUp       .30s var(--ease-out,ease) both; }
.animate-fadein-scale { animation: popInSmall     .28s var(--ease-spring,ease) both; }
.animate-pop-in       { animation: popIn          .32s var(--ease-spring,ease) both; }
.animate-slide-up     { animation: slideInUp      .28s var(--ease-out,ease) both; }
.animate-slide-right  { animation: slideInRight   .28s var(--ease-out,ease) both; }
.animate-scale-in     { animation: scaleIn        .20s var(--ease-out,ease) both; }
.animate-breathe      { animation: breathe 3.5s ease-in-out infinite; }
.animate-float        { animation: float   4.0s ease-in-out infinite; }
.animate-spin         { animation: spin    .8s linear infinite; }
.animate-pulse-ring   { animation: pulse-ring 2.0s ease-out infinite; }
.num-animate          { animation: countUp .45s var(--ease-out,ease) both; }

/* Delay helpers */
.delay-50  { animation-delay:.05s!important }
.delay-100 { animation-delay:.10s!important }
.delay-150 { animation-delay:.15s!important }
.delay-200 { animation-delay:.20s!important }
.delay-300 { animation-delay:.30s!important }
.delay-400 { animation-delay:.40s!important }
.delay-500 { animation-delay:.50s!important }

/* Stagger grid */
.stagger > * { animation: fadeInUp .38s var(--ease-out,ease) both; }
.stagger > *:nth-child(1){animation-delay:.04s}
.stagger > *:nth-child(2){animation-delay:.09s}
.stagger > *:nth-child(3){animation-delay:.14s}
.stagger > *:nth-child(4){animation-delay:.19s}
.stagger > *:nth-child(5){animation-delay:.24s}
.stagger > *:nth-child(6){animation-delay:.29s}
.stagger > *:nth-child(7){animation-delay:.34s}
.stagger > *:nth-child(8){animation-delay:.39s}

/* Hover utilities */
.hover-lift { transition:transform var(--dur-base,.16s) var(--ease,ease),box-shadow var(--dur-base,.16s) var(--ease,ease)!important; }
.hover-lift:hover { transform:translateY(-2px)!important; box-shadow:var(--sh-md,0 4px 16px rgba(15,31,46,.08))!important; }
.hover-scale { transition:transform var(--dur-fast,.10s) var(--ease-spring,ease)!important; }
.hover-scale:hover { transform:scale(1.04)!important; }

/* Spinner */
.spinner { display:inline-block;width:18px;height:18px;border:2px solid #E2E8F0;border-top-color:#1e5a8e;border-radius:50%;animation:spin .75s linear infinite;flex-shrink:0; }
.spinner-sm { width:14px;height:14px;border-width:1.5px; }
.spinner-lg { width:28px;height:28px;border-width:3px; }

/* Better skeleton */
.skeleton {
  background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 37%,#E2E8F0 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:6px; pointer-events:none; user-select:none;
}
.skeleton * { opacity:0; }
.skeleton-text { height:14px; border-radius:4px; }
.skeleton-text.short { width:40%; }
.skeleton-text.medium { width:65%; }
.skeleton-text.full { width:100%; }
.skeleton-avatar { width:36px;height:36px;border-radius:50%;flex-shrink:0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ==========================================================================
   DASHBOARD COMPONENTS  (used in buyer/seller/admin dashboards)
   ========================================================================== */

/* ── Dashboard hero header ── */
.dash-hero {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:24px;
  animation:fadeInUp .30s var(--ease-out,ease) both;
}
.dash-hero-left { min-width:0; }
.dash-eyebrow {
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:#94A3B8;margin-bottom:5px;
}
.dash-greeting {
  font-family:'Lora',ui-serif,Georgia,serif;font-weight:700;
  font-size:22px;color:#0F1F2E;letter-spacing:-.025em;line-height:1.2;
}
.dash-sub { font-size:13px;color:#64748B;margin-top:5px; }
.dash-actions { display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex-shrink:0; }

/* ── Action buttons ── */
.btn-action {
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;background:#F0F4F8;
  border:1.5px solid #E2E8F0;border-radius:8px;
  font-size:12.5px;font-weight:600;color:#2D4156;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast,.1s),border-color var(--dur-fast,.1s),color var(--dur-fast,.1s),transform var(--dur-fast,.1s),box-shadow var(--dur-fast,.1s);
}
.btn-action:hover { background:#E4EAF0;border-color:#CBD5E1;color:#0F1F2E;transform:translateY(-1px);box-shadow:0 4px 12px rgba(15,31,46,.08); }
.btn-action:active { transform:scale(.97)!important; }
.btn-action.primary {
  background:linear-gradient(160deg,#2a6ba3,#1e5a8e 55%,#16456c);
  border-color:transparent;color:#fff;
  box-shadow:0 1px 3px rgba(0,151,103,.22),0 3px 10px rgba(0,151,103,.18),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-action.primary:hover {
  background:linear-gradient(160deg,#00ab72,#008858 55%,#006b48);
  box-shadow:0 2px 6px rgba(0,151,103,.28),0 6px 20px rgba(0,151,103,.20),inset 0 1px 0 rgba(255,255,255,.12);
}
.btn-action svg { flex-shrink:0; }

/* ── KPI strip ── */
.kpi-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:14px;
  animation:fadeInUp .35s var(--ease-out,ease) .05s both;
}
.kpi-card {
  background:#fff;border:1px solid #E2E8F0;border-radius:12px;
  padding:18px 20px;
  box-shadow:0 1px 4px rgba(15,31,46,.06),0 1px 2px rgba(15,31,46,.04);
  transition:transform var(--dur-base,.16s) var(--ease,ease),box-shadow var(--dur-base,.16s) var(--ease,ease),border-color var(--dur-base,.16s) var(--ease,ease);
  position:relative;overflow:hidden;
}
.kpi-card::after {
  content:'';position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.5),transparent 60%);
  pointer-events:none;
}
.kpi-card:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,151,103,.10),0 2px 8px rgba(15,31,46,.06);border-color:#b8d1e7; }
.kpi-icon {
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.kpi-label { font-size:11.5px;font-weight:600;color:#64748B;letter-spacing:.01em;text-transform:uppercase;margin-bottom:5px; }
.kpi-value { font-family:'Lora',ui-serif,Georgia,serif;font-weight:700;font-size:26px;color:#0F1F2E;letter-spacing:-.03em;line-height:1; }
.kpi-trend { display:flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;font-weight:600; }
.kpi-trend.up   { color:#059669; }
.kpi-trend.down { color:#DC2626; }
.kpi-trend.neutral { color:#64748B; }

/* ── Section card ── */
.section-card {
  background:#fff;border:1px solid #E2E8F0;border-radius:12px;
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 1px 4px rgba(15,31,46,.05);
  animation:fadeInUp .38s var(--ease-out,ease) .10s both;
}
.section-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid #F1F5F9;
}
.section-header h2,.section-title {
  font-family:'Lora',ui-serif,Georgia,serif;
  font-size:14px;font-weight:700;color:#0F1F2E;letter-spacing:-.01em;margin:0;
}
.section-body { padding:16px 20px; }
.section-link { font-size:12px;font-weight:600;color:#1e5a8e;text-decoration:none;white-space:nowrap;transition:color .1s; }
.section-link:hover { color:#16456c;text-decoration:underline; }

/* ── Alert / banner ── */
.mbz-alert {
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:10px;border:1px solid transparent;
  border-left-width:4px;font-size:13px;
  animation:slideInDown2 .28s var(--ease-out,ease) both;
}
.mbz-alert.warning {
  background:#FFFBEB;border-color:#FDE68A;border-left-color:#F59E0B;color:#78350F;
}
.mbz-alert.info {
  background:#EFF6FF;border-color:#BFDBFE;border-left-color:#3B82F6;color:#1E3A8A;
}
.mbz-alert.success {
  background:#ECFDF5;border-color:#A7F3D0;border-left-color:#10B981;color:#065F46;
}
.mbz-alert.danger {
  background:#FEF2F2;border-color:#FECACA;border-left-color:#EF4444;color:#991B1B;
}
.mbz-alert svg { flex-shrink:0;margin-top:1px; }

/* ── Status badges ── */
.status-badge {
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;letter-spacing:.01em;
}
.status-badge.s-success { background:#ECFDF5;color:#059669;border:1px solid #A7F3D0; }
.status-badge.s-warning { background:#FFFBEB;color:#D97706;border:1px solid #FDE68A; }
.status-badge.s-danger  { background:#FEF2F2;color:#EF4444;border:1px solid #FECACA; }
.status-badge.s-info    { background:#EFF6FF;color:#3B82F6;border:1px solid #BFDBFE; }
.status-badge.s-neutral { background:#F1F5F9;color:#64748B;border:1px solid #E2E8F0; }
.status-badge.s-brand   { background:#ECFDF5;color:#1e5a8e;border:1px solid #A4F4CF; }

/* ── Listing row card ── */
.listing-row {
  display:block;border:1px solid #E2E8F0;border-radius:10px;padding:14px 16px;
  text-decoration:none;
  transition:border-color .14s,box-shadow .14s,transform .14s;
}
.listing-row:hover {
  border-color:#b8d1e7;
  box-shadow:0 4px 20px rgba(0,151,103,.10);
  transform:translateY(-1px);
}
.listing-row + .listing-row { margin-top:8px; }

/* ── Activity timeline ── */
.timeline { position:relative;padding-left:20px; }
.timeline::before { content:'';position:absolute;left:6px;top:4px;bottom:4px;width:1.5px;background:#E2E8F0; }
.tl-item { position:relative;padding-bottom:16px; }
.tl-item:last-child { padding-bottom:0; }
.tl-dot {
  position:absolute;left:-17px;top:3px;
  width:11px;height:11px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1.5px currentColor;flex-shrink:0;
}
.tl-dot.green { color:#10B981;background:#10B981; }
.tl-dot.amber { color:#F59E0B;background:#F59E0B; }
.tl-dot.blue  { color:#3B82F6;background:#3B82F6; }
.tl-time { font-size:10.5px;color:#94A3B8;margin-bottom:2px; }
.tl-text { font-size:13px;color:#334155;line-height:1.45; }

/* ── Empty state ── */
.empty-state { text-align:center;padding:48px 24px; }
.empty-icon {
  width:56px;height:56px;border-radius:16px;
  background:#F0F4F8;display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;color:#94A3B8;
}
.empty-state h3 { font-size:15px;font-weight:600;color:#0F1F2E;margin-bottom:5px; }
.empty-state p  { font-size:13px;color:#64748B; }

/* ── Inbox row ── */
.inbox-row {
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;border-bottom:1px solid #F1F5F9;
}
.inbox-row:last-child { border-bottom:none; }
.inbox-av {
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;
}
.unread-dot {
  width:7px;height:7px;border-radius:50%;background:#F43F5E;flex-shrink:0;margin-top:5px;
}

/* ── Toast (TalentOS style — white card, colored left border) ── */
.mbz-toast-stack {
  position:fixed;bottom:24px;right:24px;
  display:flex;flex-direction:column;gap:10px;
  z-index:99999;pointer-events:none;max-width:360px;
}
.mbz-toast {
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 16px;border-radius:12px;
  border:1px solid #E2E8F0;border-left-width:4px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  box-shadow:0 12px 40px rgba(15,31,46,.12),0 4px 12px rgba(15,31,46,.06);
  font-size:13px;font-weight:500;color:#2D4156;
  pointer-events:all;
  animation:slideInRight .22s var(--ease-out,ease) both;
  min-width:260px;letter-spacing:-.01em;
}
.mbz-toast.leaving { animation:slideInRight .18s var(--ease-in,ease) reverse both; }
.mbz-toast.success { border-left-color:#10B981; }
.mbz-toast.error   { border-left-color:#EF4444; }
.mbz-toast.warning { border-left-color:#F59E0B; }
.mbz-toast.info    { border-left-color:#3B82F6; }
.mbz-toast-icon { flex-shrink:0;display:flex;align-items:center;margin-top:1px; }
.mbz-toast-icon.success { color:#10B981; }
.mbz-toast-icon.error   { color:#EF4444; }
.mbz-toast-icon.warning { color:#F59E0B; }
.mbz-toast-icon.info    { color:#3B82F6; }


/* ==========================================================================
   PHASE 6 — Mobile responsive overrides
   Applies to all dashboards / reports / panels at <1024px
   ========================================================================== */

@media (max-width: 1023px) {
  /* Panels stack to full width */
  .grid.cols-2, .grid.cols-2b, .grid.cols-3,
  [class*="grid-cols-2"], [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables: horizontal scroll wrapper (panels already overflow:hidden) */
  .panel table, .tbl {
    min-width: 640px;
  }
  .panel { overflow-x: auto; }

  /* Kanban: 2-col on tablets */
  .kanban { grid-template-columns: repeat(2, minmax(160px, 1fr)) !important; }

  /* KPI strip: 2-col instead of auto-fit */
  .metrics, .kpi-strip,
  section[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Hero / topbar — reduce padding */
  .dash-hero, .hot-banner, .hot-strip { padding: 18px 18px !important; }

  /* Deal-room 3-col → stack */
  main.grid[style*="grid-template-columns:240px"] {
    grid-template-columns: 1fr !important;
  }

  /* Big page titles */
  .font-serif.text-3xl { font-size: 22px !important; }
  .font-serif.text-2xl { font-size: 20px !important; }

  /* Sidebar (sidebar.js handles mobile via hamburger already) */
}

@media (max-width: 640px) {
  /* Single-col KPI on phones */
  .metrics, .kpi-strip,
  section[style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  .kanban { grid-template-columns: 1fr !important; }

  /* Tighter header rows */
  header.flex.items-end {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Hide non-essential pill chips on small screens */
  .pill .ml-1, .pill > b { display: none; }

  /* Filter bar in reports → vertical */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .input, .filter-bar .select { width: 100%; }

  /* Reduce body padding under topbar */
  body { padding-left: 0 !important; }
  main.max-w-7xl, main.max-w-6xl, main.max-w-5xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* iOS safe-area for bottom of screen */
@supports (padding: max(0px)) {
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* Touch-friendly tap targets on small screens */
@media (max-width: 1023px) and (pointer: coarse) {
  .btn, button, a.btn {
    min-height: 44px;
  }
  .toggle { width: 48px; height: 26px; }
  .toggle::after { width: 22px; height: 22px; }
  .toggle.on::after { transform: translateX(22px); }
}