/* ============================================================
   GooseDock — Design System v4.0
   Fonts: Plus Jakarta Sans (display) + Inter (body)
   Theme: Emerald & Gold editorial · warm ivory canvas
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');
@import url('responsive.css');

/* ── 1. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Global type scale: 13.5px root (10% smaller than the previous 15px,
   ~15.6% smaller than the browser default 16px) — shrinks every rem-based
   size across the site for a tighter, cleaner editorial look. */
html { scroll-behavior: smooth; font-size: 13.5px; }
body { font-size: 1rem; line-height: 1.55; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }

/* ── 2. DESIGN TOKENS — Burgundy & Copper ─────────────────── */
:root {
  /* Ink (warm near-black family) */
  --ink:           #1a1414;
  --ink-2:         #2a2520;
  --ink-3:         rgba(26,20,20,.62);
  --ink-4:         rgba(26,20,20,.45);
  --ink-5:         rgba(26,20,20,.28);

  /* Canvas (warm ivory) */
  --bg:            #FAF9F5;
  --bg-2:          #faf5e8;
  --bg-3:          #e4d8bf;
  --border:        rgba(26,20,20,.08);
  --border-2:      rgba(26,20,20,.15);

  /* Accent — burgundy primary */
  --accent:        #2c6a54;
  --accent-h:      #2c6a54;
  --accent-pale:   rgba(44,106,84,.08);
  --accent-border: rgba(44,106,84,.22);
  /* Copper secondary (replaces cyan) */
  --cyan:          #c0654a;
  /* Antique gold (replaces purple) */
  --purple:        #a68a4a;
  /* Olive success */
  --ok:            #4d6530;
  --ok-pale:       rgba(77,101,48,.1);
  --ok-border:     rgba(77,101,48,.3);
  /* Error (rust) */
  --err:           #c0654a;
  --err-pale:      rgba(192,101,74,.1);
  --err-border:    rgba(192,101,74,.3);
  /* Warn (deeper copper) */
  --warn:          #c0654a;
  --warn-pale:     rgba(192,101,74,.1);
  --warn-border:   rgba(192,101,74,.28);

  /* Extra brand aliases */
  --copper:        #c0654a;
  --copper-dk:     #c0654a;
  --burgundy:      #2c6a54;
  --burgundy-dk:   #2c6a54;
  --olive:         #4d6530;
  --gold:          #a68a4a;

  /* "Gradients" — kept as solid burgundy for flat editorial look */
  --grad:          #2c6a54;
  --grad-warm:     #c0654a;
  --grad-soft:     rgba(44,106,84,.1);

  /* Typography */
  --font-display:  'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:     'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-8:  32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radii */
  --r-sm:  6px;  --r-md:  10px; --r-lg:  14px;
  --r-xl:  18px; --r-2xl: 24px; --r-full: 9999px;

  /* Shadows */
  --sh-xs:     0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.03);
  --sh-sm:     0 1px 2px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.04);
  --sh-md:     0 2px 4px rgba(0,0,0,0.04), 0 8px 20px rgba(0,0,0,0.08), 0 20px 40px rgba(0,0,0,0.05);
  --sh-lg:     0 4px 8px rgba(0,0,0,0.04), 0 16px 32px rgba(0,0,0,0.1), 0 32px 64px rgba(0,0,0,0.06);
  --sh-accent: 0 4px 16px rgba(44,106,84,.3), 0 16px 32px rgba(44,106,84,.16);
  --sh-btn:    0 8px 22px rgba(44,106,84,.38), 0 2px 6px rgba(44,106,84,.22), inset 0 1px 0 rgba(255,255,255,.2);

  /* Old compat aliases (used by dashboard HTML) */
  --primary:        var(--accent);
  --primary-light:  var(--accent-h);
  --primary-lighter:var(--accent-pale);
  --success:        var(--ok);
  --success-light:  var(--ok-pale);
  --danger:         var(--err);
  --danger-light:   var(--err-pale);
  --warning:        var(--warn);
  --warning-light:  var(--warn-pale);
  --white:          #fff;
  --gray-400:       var(--ink-4);
  --gray-500:       var(--ink-3);
  --gray-700:       var(--ink-2);
  --gray-800:       var(--ink-2);
  --gray-900:       var(--ink);
  --font-display:   'Outfit', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --text-xs:  0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --space-1: var(--sp-1); --space-2: var(--sp-2); --space-3: var(--sp-3);
  --space-4: var(--sp-4); --space-5: var(--sp-5); --space-6: var(--sp-6);
  --space-8: var(--sp-8); --space-10: var(--sp-10); --space-12: var(--sp-12);
  --space-16: var(--sp-16);
  --radius-sm:  var(--r-sm);  --radius-md:  var(--r-md);
  --radius-lg:  var(--r-lg);  --radius-xl:  var(--r-xl);
  --radius-full: var(--r-full);
  --shadow-xs: var(--sh-xs); --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md); --shadow-lg: var(--sh-lg);
  --border: rgba(44,106,84,0.09);
  --transition-fast: 0.15s ease;
  --transition-base: 0.22s ease;
  /* Extra aliases for pages that use alternate variable names */
  --font-heading: 'Outfit', sans-serif;
  --accent-color: var(--accent);
  --color-accent: var(--accent);
}

/* ── 3. BASE ──────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.15; }

/* ── 4. PUBLIC NAVBAR ─────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  height: 62px;
  background: rgba(255,250,240,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .25s ease, background .25s ease, border-bottom-color .25s ease;
}
.navbar.gd-navbar-scrolled {
  background: rgba(255,250,240,0.99);
  box-shadow: 0 4px 14px rgba(44,106,84,.1), 0 1px 3px rgba(0,0,0,.05);
  border-bottom-color: rgba(192,101,74,.4);
}
@media (max-width: 900px) {
  .navbar { background: #FAF9F5 !important; }
  .navbar.gd-navbar-scrolled {
    background: #FAF9F5 !important;
    box-shadow: 0 4px 12px rgba(44,106,84,.1), 0 1px 3px rgba(0,0,0,.05) !important;
  }
}
.navbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 32px;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; color: var(--ink);
  perspective: 500px;
}
.navbar-brand-icon {
  width: 30px; height: 35px;
  filter: drop-shadow(0 2px 6px rgba(44,106,84,0.3));
  transition: filter 0.3s ease, transform 0.3s cubic-bezier(0.34,1.5,0.64,1);
}
.navbar-brand:hover .navbar-brand-icon {
  filter: drop-shadow(0 4px 14px rgba(44,106,84,0.6)) drop-shadow(0 0 8px rgba(192,101,74,0.3));
  transform: perspective(400px) rotateY(-10deg) rotateX(4deg) scale(1.1);
}
.navbar-brand em { font-style: normal; color: var(--accent); }
.navbar-links {
  display: flex; align-items: center; gap: 2px;
}
.navbar-links a {
  padding: 7px 15px;
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  border-radius: var(--r-md);
  transition: background 0.15s, color 0.15s;
}
.navbar-links a:hover,
.navbar-links a.active { background: var(--bg-3); color: var(--ink); }
.navbar-actions { display: flex; align-items: center; gap: 8px; }

/* ── 5. PUBLIC FOOTER ─────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 64px 32px 40px;
}
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12.5px; color: rgba(255,255,255,0.3);
}

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  border-radius: var(--r-md);
  border: none;
  transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s, background 0.18s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--sh-btn);
}
.btn-primary:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(44,106,84,0.45), 0 12px 28px rgba(44,106,84,0.22); }
.btn-secondary {
  background: var(--bg-3);
  color: var(--ink-2);
  border: 1px solid var(--border-2);
}
.btn-secondary:hover { background: var(--bg); border-color: var(--accent-border); color: var(--accent); }
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent-border);
}
.btn-outline:hover { background: var(--accent-pale); }
.btn-ghost {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--ink); }
.btn-danger {
  background: var(--err-pale);
  color: var(--err);
  border: 1px solid var(--err-border);
}
.btn-danger:hover { background: var(--err); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: var(--r-sm); }
.btn-lg { padding: 13px 28px; font-size: 15px; border-radius: var(--r-lg); }
.w-full { width: 100%; }

/* ── 7. FORM ELEMENTS ─────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.form-label .req { color: var(--err); margin-left: 2px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 14px; color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-5); }
.form-input:hover,
.form-select:hover { border-color: var(--ink-5); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.form-input.has-err,
.form-select.has-err { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-pale); }
.form-textarea { resize: vertical; min-height: 100px; line-height: 1.65; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2394A3B8' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 36px; }
.inp-wrap { position: relative; }
.inp-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-5); pointer-events: none; width: 15px; height: 15px; }
.inp-ico ~ .form-input { padding-left: 38px; }
/* keep old class names for existing pages */
.f-input { width: 100%; height: 44px; padding: 0 38px; border: 1.5px solid var(--border-2); border-radius: var(--r-md); font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--bg); outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.f-input::placeholder { color: var(--ink-5); }
.f-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-pale); }
.f-input.has-err { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-pale); }

/* ── 8. BADGES ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 700;
  border-radius: var(--r-full);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.badge-primary   { background: var(--accent-pale);  color: var(--accent);  border: 1px solid var(--accent-border); }
.badge-success   { background: var(--ok-pale);      color: var(--ok);      border: 1px solid var(--ok-border); }
.badge-danger    { background: var(--err-pale);     color: var(--err);     border: 1px solid var(--err-border); }
.badge-warning   { background: var(--warn-pale);    color: var(--warn);    border: 1px solid var(--warn-border); }
.badge-secondary { background: var(--bg-3);         color: var(--ink-3);   border: 1px solid var(--border-2); }
.badge-info      { background: rgba(192,101,74,0.1); color: #2c6a54;        border: 1px solid rgba(192,101,74,0.25); }

/* ── 9. ALERTS ────────────────────────────────────────────── */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px;
  border-radius: var(--r-lg);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
}
.alert-success { background: rgba(16,185,129,0.07); color: #065f46; border-color: var(--ok-border); }
.alert-error   { background: var(--err-pale);       color: #991b1b; border-color: var(--err-border); }
.alert-warning { background: var(--warn-pale);      color: #c0654a; border-color: var(--warn-border); }
.alert-info    { background: var(--accent-pale);    color: #1e3a8a; border-color: var(--accent-border); }

/* ── 10. CARDS ────────────────────────────────────────────── */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--sh-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.2px;
}

/* ── 10b. PANELS (dashboard section cards) ───────────────── */
.panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s;
}
.panel:hover { box-shadow: var(--sh-md); }
.panel + .panel { margin-top: 20px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--border);
}
.panel-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-icon {
  width: 34px; height: 34px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(44,106,84,0.1); color: #2c6a54;
  flex-shrink: 0;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin: 0; letter-spacing: -0.2px;
  display: flex; align-items: center; gap: 8px;
}
.panel-subtitle { font-size: 12px; color: var(--ink-4); margin: 2px 0 0; }
.panel-count {
  display:inline-flex; align-items:center;
  padding:1px 8px; border-radius:var(--r-full);
  background:rgba(44,106,84,0.1); color:#2c6a54;
  font-size:11px; font-weight:700;
}

/* ── 10c. DASH SECTION (labeled group of child cards) ───── */
.dash-section { margin-bottom: 26px; }
.dash-section:last-child { margin-bottom: 0; }
.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.dash-section-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dash-section-icon {
  width: 30px; height: 30px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(44,106,84,0.1); color: #2c6a54;
  flex-shrink: 0;
}
.section-title {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; color: var(--ink);
  margin: 0; letter-spacing: 0.02em; text-transform: uppercase;
}
.section-sub { font-size: 12px; color: var(--ink-4); margin: 2px 0 0; text-transform: none; letter-spacing: normal; }

/* ── 11. TABLES ───────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px; font-weight: 700;
  color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  white-space: nowrap;
}
.data-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg-2); }

/* ── 12. APP SHELL (DASHBOARD LAYOUT) ────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-2);
}

/* ── 13. SIDEBAR ──────────────────────────────────────────── */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 50;
  height: 100vh;
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.sidebar-nav-wrapper {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.logo-mark {
  width: 34px; height: 34px;
  background: var(--grad);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(44,106,84,0.3);
}
.logo-text {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.2px;
  line-height: 1.2;
}
.logo-text span {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sidebar-section-label {
  display: block;
  padding: 18px 20px 6px;
  font-size: 10px; font-weight: 700;
  color: var(--ink-5); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sidebar-nav { list-style: none; padding: 0 8px; }
.sidebar-nav li { margin: 1px 0; }
.sidebar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: var(--ink-3);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.sidebar-nav a:hover { background: var(--bg-3); color: var(--ink); }
.sidebar-nav a.active {
  background: var(--accent-pale);
  color: var(--accent);
  font-weight: 600;
}
.sidebar-nav a.active .nav-icon { color: var(--accent); }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-4); }
.nav-badge {
  margin-left: auto;
  min-width: 18px; height: 18px;
  background: var(--grad);
  color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.sidebar-footer {
  margin-top: auto;
  padding: 12px 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(44,106,84,0.3);
}
.user-info { min-width: 0; }
.user-name {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role { font-size: 11px; color: var(--ink-4); }
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(2px);
}

/* ── 14. MAIN CONTENT ─────────────────────────────────────── */
html, body { overflow-x: clip; max-width: 100vw; }
.main-content {
  position: relative;
  flex: 1;
  margin-left: 240px;
  min-height: 100vh;
  display: flex; flex-direction: column;
  min-width: 0;
  max-width: calc(100vw - 240px);
  overflow-x: clip;          /* clip = same as hidden but doesn't break position:sticky on children */
}
body.sidebar-collapsed .main-content { max-width: calc(100vw - 68px); }
@media (max-width: 1024px) { .main-content { max-width: 100vw; } }
.page-content { min-width: 0; max-width: 100%; overflow-x: hidden; }
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: 62px;
  background: rgba(255,250,240,0.96);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; align-items: center;
  padding: 0 28px;
  justify-content: space-between;
  gap: 16px;
  transition: box-shadow .25s ease, background .25s ease, border-bottom-color .25s ease;
}
.topbar.gd-topbar-scrolled {
  background: rgba(255,250,240,0.99);
  box-shadow: 0 4px 14px rgba(44,106,84,.1), 0 1px 3px rgba(0,0,0,.05);
  border-bottom-color: rgba(192,101,74,.4);
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.topbar-toggle {
  width: 44px; height: 44px;            /* Min touch target */
  border-radius: var(--r-md);
  border: 1.5px solid rgba(44,106,84,.2);
  background: rgba(255,250,240,.85);
  display: flex; align-items: center; justify-content: center;
  color: #2c6a54;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  box-shadow: 0 2px 6px rgba(44,106,84,.08);
}
.topbar-toggle:hover, .topbar-toggle:focus-visible { background: #2c6a54; color: #fff; border-color: #2c6a54; outline: none; }
.topbar-toggle:active { transform: scale(.96); }
.topbar-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.2px;
}
.topbar-sub { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.topbar-icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: background 0.15s, color 0.15s;
}
.topbar-icon-btn:hover { background: var(--bg-3); color: var(--ink); }
.page-content { flex: 1; padding: 28px; }

/* ── 15. STAT CARDS ───────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 22px 22px 20px;
  box-shadow: var(--sh-xs);
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.25s;
}
.stat-card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.stat-card:hover::before { opacity: 1; }
.stat-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat-label { font-size: 12px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.03em; text-transform: uppercase; }
.stat-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.5px; line-height: 1;
  margin-bottom: 8px;
}
.stat-change { font-size: 12px; font-weight: 500; }
.stat-change.positive { color: var(--ok); }
.stat-change.negative { color: var(--err); }
.stat-change.neutral  { color: var(--ink-4); }

/* ── 16. SECTION HEADING (dashboard) ─────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.2px;
}
.section-sub { font-size: 13px; color: var(--ink-4); margin-top: 2px; }

/* ── 17. PAGE HEADER (dashboard pages) ───────────────────── */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-header-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 800; color: var(--ink);
  letter-spacing: -0.4px; line-height: 1.15;
}
.page-header-sub { font-size: 14px; color: var(--ink-3); margin-top: 4px; }

/* ── 18. PROGRESS BAR ─────────────────────────────────────── */
.progress-bar {
  height: 6px;
  background: var(--bg-3);
  border-radius: var(--r-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--grad);
  transition: width 0.6s ease;
}

/* ── 19. EMPTY STATE ──────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-4);
}
.empty-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--ink-5);
}
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.empty-state p  { font-size: 14px; color: var(--ink-5); max-width: 320px; margin: 0 auto 20px; }

/* ── 20. SCROLL REVEAL (progressive) ─────────────────────── */
.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
html.js-ready .reveal      { opacity: 0; transform: translateY(16px); }
html.js-ready .reveal.in   { opacity: 1; transform: none; }

/* ── 21. UTILITY ──────────────────────────────────────────── */
.text-gradient {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-4 { margin-top: 16px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── DESKTOP SIDEBAR COLLAPSE ─────────────────────────────── */
@media (min-width: 1025px) {
  body.sidebar-collapsed .sidebar {
    width: 68px;
    overflow: hidden;
  }
  body.sidebar-collapsed .sidebar .sidebar-logo .gd-logo-text,
  body.sidebar-collapsed .sidebar .sidebar-section-label,
  body.sidebar-collapsed .sidebar .sidebar-nav a span,
  body.sidebar-collapsed .sidebar .nav-badge,
  body.sidebar-collapsed .sidebar .user-info,
  body.sidebar-collapsed .sidebar .sidebar-footer form button span { display: none !important; }
  body.sidebar-collapsed .sidebar .sidebar-logo { justify-content: center; padding: 18px 10px; }
  body.sidebar-collapsed .sidebar .sidebar-nav a { justify-content: center; padding: 10px 0; }
  body.sidebar-collapsed .sidebar .user-pill { justify-content: center; padding: 8px; }
  body.sidebar-collapsed .sidebar .sidebar-footer form button { justify-content: center; }
  body.sidebar-collapsed .main-content { margin-left: 68px; }
}

/* ── 22. MOBILE RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .main-content { margin-left: 0; }
}
@media (max-width: 768px) {
  .navbar-links { display: none; }
  .page-content { padding: 16px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .topbar { padding: 0 16px; }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ── 23. ANIMATION HELPERS ────────────────────────────────── */
@keyframes riseIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes spin    { to { transform: rotate(360deg); } }
.animate-rise { animation: riseIn 0.35s ease both; }
.spin { animation: spin 0.85s linear infinite; }

/* ── 24. MOBILE NAV TOGGLE ────────────────────────────────── */
.mobile-menu-btn {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: transparent;
  align-items: center; justify-content: center;
  color: var(--ink-3);
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; }
}

/* ────────────────────────────────────────────────────────────── */
/* Form Controls — Consistent Styling                            */
/* ────────────────────────────────────────────────────────────── */
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font-size: .875rem;
  font-family: var(--font-body);
  transition: border-color .18s, box-shadow .18s;
}
.form-control::placeholder {
  color: var(--ink-4);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 214, 255, .1);
}
.form-control:disabled {
  background: var(--bg-2);
  color: var(--ink-3);
  cursor: not-allowed;
}

.form-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.form-label.required::after {
  content: ' *';
  color: var(--err);
}

.form-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: .75rem;
  color: var(--ink-4);
}

.form-group {
  margin-bottom: var(--sp-4);
}

textarea.form-control {
  resize: vertical;
  font-family: 'Courier New', monospace;
  line-height: 1.5;
}

input[type="date"].form-control,
input[type="time"].form-control {
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   DARK PUBLIC PAGE THEME
   Applied via body.dark-page on all public pages (about, contact,
   vendors, etc.). home.php manages its own dark CSS inline.
   ══════════════════════════════════════════════════════════════ */
body.dark-page {
  background: #09090F;
  color: #CBD5E1;
}

/* Dark navbar overrides */
body.dark-page .navbar {
  background: rgba(9,9,15,0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-page .navbar-brand { color: #fff; }
body.dark-page .navbar-brand em { color: #7B8FFF; }
body.dark-page .navbar-links a { color: rgba(255,255,255,0.55); }
body.dark-page .navbar-links a:hover,
body.dark-page .navbar-links a.active { color: #fff; background: rgba(255,255,255,0.07); }

/* Dark footer overrides */
body.dark-page .site-footer { background: #060610; border-top-color: rgba(255,255,255,0.08); }

/* Auth dropdown in dark navbar */
.pub-auth-wrap { position: relative; }
.pub-auth-trigger {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 600; font-family: var(--font-body);
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pub-auth-trigger:hover { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); }
.pub-auth-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: #131320; border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg); padding: 8px; min-width: 210px;
  box-shadow: 0 4px 8px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.1);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity .18s, transform .18s; z-index: 50;
}
.pub-auth-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500; color: rgba(255,255,255,0.65);
  transition: all .13s;
}
.pub-auth-menu a:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* Mobile menu button in dark navbar */
body.dark-page .mobile-menu-btn {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7); border-radius: var(--r-md);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════════
   V4.0 EDITORIAL OVERRIDES — Burgundy & Copper
   Flat editorial feel · sharp corners · warm ivory canvas
   ══════════════════════════════════════════════════════════════ */

body { background:#FAF9F5; color:#1a1414; font-family:'Inter','DM Sans',system-ui,sans-serif; }
body::before { content:''; position:fixed; inset:0; background-image:radial-gradient(circle,rgba(26,20,20,.05) 1px,transparent 1px); background-size:40px 40px; z-index:-1; pointer-events:none; opacity:.5; }
h1,h2,h3,h4,h5,h6 { font-family:'Plus Jakarta Sans','Outfit',sans-serif; letter-spacing:-.3px; }

.card,.panel,.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-ghost,.btn-danger,
.badge,.alert,.form-input,.form-select,.form-textarea,.f-input,
.stat-card,.data-table,.nav-badge,.user-pill,.tag,.pill,.chip,
.sidebar-nav a,.sidebar-logout-btn { border-radius:0 !important; }

/* ── GooseDock wordmark — official brand lockup ──────────── */
.gd-wordmark{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.18em;
  line-height:1;text-decoration:none;
  color:#2c6a54;
}
.gd-wordmark-text{display:inline-block;white-space:nowrap}
.gd-wordmark-text .fill{color:#2c6a54}
.gd-wordmark-text .stroke{
  color:transparent;
  -webkit-text-stroke:1.5px #2c6a54;
  text-stroke:1.5px #2c6a54;
}
.gd-wordmark::after,
.gd-wordmark-rule{
  content:'';display:block;
  width:60px;height:3px;
  background:#2c6a54;
  border-radius:2px;
  margin:0 auto;
}
/* Inline variant: mark + text on same row (no underline) */
.gd-wordmark-inline{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  color:#2c6a54;text-decoration:none;line-height:1;
}
.gd-wordmark-inline::after{display:none}

/* ── Public ID chip (clickable reference) ────────────────── */
.gd-pid-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;background:rgba(192,101,74,.08);border:1px solid rgba(192,101,74,.3);color:#c0654a;font-family:'Inter',monospace;font-size:.7rem;font-weight:700;letter-spacing:.4px;text-decoration:none;border-radius:4px;transition:all .18s;cursor:pointer;vertical-align:middle}
.gd-pid-chip:hover{background:#c0654a;color:#fff;border-color:#c0654a;box-shadow:0 3px 8px rgba(192,101,74,.3)}
.gd-pid-chip[data-pid-type="agency"]{background:rgba(44,106,84,.06);border-color:rgba(44,106,84,.3);color:#2c6a54}
.gd-pid-chip[data-pid-type="agency"]:hover{background:#2c6a54;color:#fff;border-color:#2c6a54}
.gd-pid-chip[data-pid-type="vendor"]{background:rgba(192,101,74,.1);border-color:rgba(192,101,74,.35);color:#c0654a}
.gd-pid-chip[data-pid-type="tender"],.gd-pid-chip[data-pid-type="bid"]{background:rgba(26,20,20,.05);border-color:rgba(26,20,20,.15);color:#1a1414}
.gd-pid-chip[data-pid-type="tender"]:hover,.gd-pid-chip[data-pid-type="bid"]:hover{background:#1a1414;color:#FAF9F5;border-color:#1a1414}

/* Sidebar (admin/client/agency) — editorial refresh */
.sidebar {
  background:#2c6a54;
  border-right:1px solid rgba(192,101,74,.3);
  color:#FAF9F5;
  box-shadow:inset -1px 0 0 rgba(192,101,74,.12), 4px 0 18px rgba(44,106,84,.18);
  position:fixed;
}
.sidebar::before {
  content:''; position:absolute; inset:0;
  background-image:none;
  pointer-events:none;
}
.sidebar > * { position:relative; z-index:1; }
.sidebar-logo {
  border-bottom:1px solid rgba(192,101,74,.2) !important;
  background:transparent !important;
  padding:6px 10px 8px !important;
  position:relative;
  gap:6px !important;
}
.sidebar-logo::after {
  content:''; position:absolute; bottom:-1px; left:18px;
  width:40px; height:2px; background:#c0654a;
  box-shadow:0 0 8px rgba(192,101,74,.5);
}
/* Logo icon — richer 3D with conic halo */
.sidebar .gd-logo-icon {
  background:linear-gradient(135deg, #FAF9F5 0%, #f0ebe0 100%) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:50% !important;
  width:48px !important; height:48px !important;
  overflow:hidden;
  margin-right:10px !important;
  padding:5px !important;
  box-sizing:border-box !important;
  box-shadow:
    0 12px 24px rgba(44,106,84,.55),
    0 3px 6px rgba(0,0,0,.1),
    inset 0 3px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(0,0,0,.32),
    inset 2px 0 0 rgba(255,255,255,.08),
    inset -2px 0 0 rgba(0,0,0,.07) !important;
  transform:perspective(220px) rotateX(12deg) rotateY(-10deg) !important;
  position:relative;
}
.sidebar .gd-logo-icon::before {
  content:''; position:absolute; top:3px; left:6px;
  width:14px; height:9px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none; z-index:2;
}
.sidebar .gd-logo-icon::after { display:none; }
.sidebar .gd-logo-icon:hover {
  transform:perspective(220px) rotateX(0) rotateY(0) scale(1.06) !important;
  box-shadow:
    0 0 0 3px rgba(192,101,74,.35),
    0 0 24px rgba(192,101,74,.65),
    0 0 48px rgba(192,101,74,.4),
    0 8px 18px rgba(192,101,74,.5),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.1) !important;
  border-color:rgba(192,101,74,.55) !important;
  background:linear-gradient(135deg, #fff 0%, #faf3ea 100%) !important;
}
.sidebar .gd-logo-icon img { filter:drop-shadow(0 2px 4px rgba(0,0,0,.18)) !important; position:relative; z-index:1; height:42px !important; width:42px !important; object-fit:contain; transform:none !important; }

/* Logo text — cream + copper, editorial */
.sidebar .gd-logo-text { gap:5px !important; }
.sidebar .gd-logo-brand {
  color:#fffbf2 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:900 !important; font-size:1.25rem !important;
  letter-spacing:-.6px !important; line-height:1 !important;
  text-shadow:0 2px 4px rgba(0,0,0,.4), 0 0 20px rgba(192,101,74,.15);
}
.sidebar .gd-logo-dock {
  color:#c0654a !important;
  font-weight:900 !important;
  text-shadow:0 2px 6px rgba(192,101,74,.4), 0 0 12px rgba(192,101,74,.3);
  font-style:italic;
}
.sidebar .gd-logo-role {
  background:linear-gradient(135deg,rgba(192,101,74,.18),rgba(192,101,74,.08)) !important;
  border:1px solid rgba(192,101,74,.45) !important;
  color:#c0654a !important;
  font-weight:800 !important; font-size:.56rem !important;
  letter-spacing:1.5px !important;
  padding:3px 9px 3px 8px !important;
  border-radius:0 !important;
  box-shadow:
    0 3px 8px rgba(192,101,74,.25),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.07);
  position:relative;
  padding-left:14px !important;
}
.sidebar .gd-logo-role::before {
  content:''; position:absolute; left:5px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; background:#c0654a;
  box-shadow:0 0 6px rgba(192,101,74,.8);
  animation:logoRoleDot 2s ease-in-out infinite;
}
@keyframes logoRoleDot { 0%,100%{opacity:1} 50%{opacity:.35} }
.sidebar-nav { padding:0 10px !important; }
.sidebar-nav li { margin:2px 0 !important; }
.sidebar-nav a {
  color:rgba(239,229,208,.82);
  border-left:3px solid transparent;
  padding:10px 12px !important;
  font-size:.82rem !important; font-weight:600 !important;
  letter-spacing:.1px;
  transition:all .22s cubic-bezier(.4,0,.2,1);
  position:relative;
  overflow:hidden;
}
.sidebar-nav a::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg,#c0654a,#2c6a54);
  transform:scaleY(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar-nav a:hover {
  background:rgba(0,0,0,.18);
  color:#fffbf2;
  transform:translateX(2px);
}
.sidebar-nav a:hover::before { transform:scaleY(.6); }
.sidebar-nav a:hover .nav-icon { color:#c0654a !important; transform:scale(1.08); }
.sidebar-nav a.active {
  background:linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.08) 100%);
  color:#fffbf2; font-weight:800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.07),
    0 4px 10px rgba(0,0,0,.15);
}
.sidebar-nav a.active::before { transform:scaleY(1); box-shadow:0 0 10px rgba(192,101,74,.6); }
.sidebar-nav a.active .nav-icon { color:#c0654a !important; filter:drop-shadow(0 0 4px rgba(192,101,74,.5)); }
.nav-icon { transition:transform .22s, color .22s; color:rgba(239,229,208,.65) !important; }

.sidebar-section-label {
  color:#c0654a !important; font-weight:800 !important;
  letter-spacing:1.8px !important; text-transform:uppercase !important;
  font-size:.58rem !important;
  padding:20px 16px 8px !important;
  position:relative;
}
.sidebar-section-label::before {
  content:''; position:absolute; left:16px; bottom:4px;
  width:20px; height:1px; background:rgba(192,101,74,.4);
}

.sidebar-footer {
  border-top:1px solid rgba(192,101,74,.2) !important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.1)) !important;
  padding:12px 12px 14px !important;
}
.user-pill {
  background:linear-gradient(135deg,rgba(192,101,74,.18),rgba(0,0,0,.15)) !important;
  border:1px solid rgba(192,101,74,.3) !important;
  border-left:3px solid #c0654a !important;
  padding:10px !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  transition:transform .25s;
}
.user-pill:hover { transform:translateY(-1px); }
.user-avatar {
  background:#c0654a !important;
  color:#FFF7F1 !important; border-radius:50% !important;
  box-shadow:0 3px 8px rgba(192,101,74,.22) !important;
  border:none !important;
  font-weight:800 !important;
  position:relative;
}
.user-avatar::before { display:none !important; }
.user-name { color:#fffbf2 !important; font-weight:800 !important; font-size:.8rem !important; }
.user-role { color:rgba(239,229,208,.7) !important; font-size:.58rem !important; letter-spacing:1.2px !important; text-transform:uppercase !important; font-weight:700; margin-top:2px; }

.nav-badge {
  background:linear-gradient(135deg,#c0654a,#2c6a54) !important;
  color:#fff !important; border-radius:0 !important;
  font-size:.6rem !important; font-weight:800;
  padding:3px 7px !important; letter-spacing:.3px;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 3px 8px rgba(192,101,74,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.nav-badge.gold { background:linear-gradient(135deg,#d4a045,#a68a4a) !important; box-shadow:0 3px 8px rgba(166,138,74,.4), inset 0 1px 0 rgba(255,255,255,.25) !important; }

.sidebar-logout-btn {
  color:#f8a5a5 !important;
  padding:10px 12px !important;
  font-size:.78rem !important; font-weight:700 !important;
  letter-spacing:.3px;
  border:1px solid transparent !important;
  transition:all .2s;
}
.sidebar-logout-btn:hover {
  background:rgba(220,38,38,.18) !important;
  border-color:rgba(220,38,38,.35) !important;
  color:#fff !important;
  transform:translateX(2px);
}

/* Upgrade to Premium link — golden shimmer treatment */
.sidebar-nav a[href*="upgrade"] {
  background:linear-gradient(90deg,rgba(192,101,74,.12),rgba(192,101,74,.04)) !important;
  border-left:3px solid #c0654a !important;
  margin-top:6px;
  position:relative;
  overflow:hidden;
}
.sidebar-nav a[href*="upgrade"]::after {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(192,101,74,.2),transparent);
  animation:sidebarPremShine 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sidebarPremShine { 0%,80%{left:-60%} 100%{left:160%} }
.sidebar-nav a[href*="upgrade"]:hover { background:linear-gradient(90deg,rgba(192,101,74,.22),rgba(192,101,74,.08)) !important; }

/* 3D burgundy CTA buttons */
.btn-primary { background:#2c6a54 !important; color:#fff !important; border:1px solid rgba(0,0,0,.15) !important; box-shadow:0 10px 22px rgba(44,106,84,.35),0 2px 6px rgba(44,106,84,.2),inset 0 1px 0 rgba(255,255,255,.2) !important; font-weight:700 !important; letter-spacing:.3px; }
.btn-primary:hover { background:#2c6a54 !important; transform:translateY(-2px); box-shadow:0 14px 28px rgba(44,106,84,.45),inset 0 1px 0 rgba(255,255,255,.25) !important; }
.btn-outline { background:transparent; color:#2c6a54; border:1px solid #2c6a54; }
.btn-outline:hover { background:rgba(44,106,84,.08); border-color:#c0654a; color:#c0654a; }
.btn-ghost { background:rgba(26,20,20,.05); color:#1a1414; border:1px solid rgba(26,20,20,.15); }
.btn-ghost:hover { background:rgba(192,101,74,.08); border-color:#c0654a; color:#c0654a; }
.btn-secondary { background:rgba(192,101,74,.08); color:#c0654a; border:1px solid rgba(192,101,74,.25); }
.btn-secondary:hover { background:#c0654a; color:#fff; }
.btn-danger { background:rgba(44,106,84,.1); color:#2c6a54; border:1px solid rgba(44,106,84,.3); }
.btn-danger:hover { background:#2c6a54; color:#fff; }

/* Cards, panels */
.card,.panel { background:#faf5e8 !important; border:1px solid rgba(26,20,20,.1) !important; border-top:3px solid #c0654a !important; box-shadow:0 6px 16px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04) !important; }
.card:hover,.panel:hover { box-shadow:0 10px 24px rgba(44,106,84,.1),0 3px 6px rgba(0,0,0,.06) !important; }
.card-title,.panel-title { color:#1a1414 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; }
.panel-icon { background:#2c6a54 !important; color:#fff !important; border-radius:0 !important; box-shadow:0 4px 10px rgba(44,106,84,.25),inset 0 1px 0 rgba(255,255,255,.2); }
.panel-count { background:rgba(192,101,74,.15) !important; color:#c0654a !important; border:1px solid rgba(192,101,74,.3); border-radius:0 !important; }

/* Tables */
table,.data-table { border:1px solid rgba(26,20,20,.1); background:#faf5e8; }
table thead,.data-table thead { background:#2c6a54; }
table thead th,.data-table thead th { color:#FAF9F5 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.8px; font-size:.7rem !important; padding:12px 14px !important; border-bottom:2px solid #c0654a !important; }
table tbody tr,.data-table tbody tr { border-bottom:1px solid rgba(26,20,20,.08); transition:background .15s; }
table tbody tr:hover,.data-table tbody tr:hover { background:rgba(192,101,74,.05); }
table tbody td,.data-table tbody td { padding:12px 14px !important; color:#1a1414; font-size:.88rem; }

/* Form inputs */
.form-input,.form-select,.form-textarea,.f-input { background:#faf5e8 !important; border:1px solid rgba(26,20,20,.15) !important; border-bottom:2px solid rgba(192,101,74,.3) !important; color:#1a1414 !important; font-family:'Inter',sans-serif !important; }
.form-input:focus,.form-select:focus,.form-textarea:focus,.f-input:focus { border-color:#c0654a !important; border-bottom-color:#2c6a54 !important; background:#fff !important; box-shadow:0 0 0 3px rgba(192,101,74,.15) !important; }
.form-label { color:#1a1414; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.72rem; }
.form-label .req { color:#c0654a; }

/* Badges */
.badge { border-radius:0 !important; font-weight:800 !important; letter-spacing:.6px; padding:3px 9px; }
.badge-primary { background:rgba(44,106,84,.1) !important; color:#2c6a54 !important; border:1px solid rgba(44,106,84,.3) !important; }
.badge-success { background:rgba(77,101,48,.12) !important; color:#4d6530 !important; border:1px solid rgba(77,101,48,.3) !important; }
.badge-danger { background:rgba(192,101,74,.1) !important; color:#c0654a !important; border:1px solid rgba(192,101,74,.3) !important; }
.badge-warning { background:rgba(166,138,74,.15) !important; color:#7a6839 !important; border:1px solid rgba(166,138,74,.35) !important; }
.badge-secondary { background:rgba(26,20,20,.06) !important; color:rgba(26,20,20,.7) !important; border:1px solid rgba(26,20,20,.12) !important; }
.badge-info { background:rgba(192,101,74,.1) !important; color:#c0654a !important; border:1px solid rgba(192,101,74,.28) !important; }

/* Alerts */
.alert { border-radius:0 !important; border-left:3px solid !important; }
.alert-success { background:rgba(77,101,48,.08); color:#4d6530; border-color:rgba(77,101,48,.28); border-left-color:#4d6530 !important; }
.alert-error,.alert-danger { background:rgba(192,101,74,.08); color:#c0654a; border-color:rgba(192,101,74,.28); border-left-color:#c0654a !important; }
.alert-warning { background:rgba(166,138,74,.1); color:#7a6839; border-color:rgba(166,138,74,.3); border-left-color:#a68a4a !important; }
.alert-info { background:rgba(44,106,84,.08); color:#2c6a54; border-color:rgba(44,106,84,.25); border-left-color:#2c6a54 !important; }

/* Dashboard topbar */
.dash-topbar,.topbar { background:#faf5e8 !important; border-bottom:2px solid #c0654a !important; }
.dash-topbar h1 { color:#1a1414 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800 !important; letter-spacing:-.3px; }

/* Stat cards */
.stat-card { background:#faf5e8 !important; border:1px solid rgba(26,20,20,.1) !important; border-left:3px solid #c0654a !important; box-shadow:0 6px 14px rgba(0,0,0,.06) !important; transition:all .25s !important; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(44,106,84,.12) !important; border-left-color:#2c6a54 !important; }
.stat-value,.stat-card h2,.stat-card strong { color:#1a1414 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:900 !important; letter-spacing:-.5px; }
.stat-label,.stat-card small { color:rgba(26,20,20,.6) !important; text-transform:uppercase; letter-spacing:1.2px; font-size:.68rem; font-weight:700; }

/* Client/agency avatar + plan chip */
.avatar-sm { background:#2c6a54 !important; color:#fff !important; box-shadow:0 4px 10px rgba(44,106,84,.3); }
.plan-chip { background:#c0654a !important; color:#fff !important; border-radius:0 !important; font-weight:800 !important; letter-spacing:.8px; font-size:.66rem; padding:3px 10px; }
.plan-chip.normal { background:rgba(26,20,20,.1) !important; color:rgba(26,20,20,.6) !important; }

/* Tender/bid cards */
.t-card { background:#faf5e8 !important; border:1px solid rgba(26,20,20,.1) !important; border-left:3px solid transparent !important; transition:all .22s; }
.t-card:hover { border-left-color:#c0654a !important; box-shadow:0 10px 22px rgba(44,106,84,.1) !important; transform:translateX(2px); }
.t-card .tc-title { color:#1a1414 !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:800; }
.t-card .tc-budget { color:#c0654a !important; font-family:'Plus Jakarta Sans',sans-serif !important; font-weight:900; }

/* Filter tabs */
.filter-tabs { border-bottom:2px solid rgba(26,20,20,.12); }
.filter-tabs a { color:rgba(26,20,20,.55); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; }
.filter-tabs a:hover { color:#1a1414; }
.filter-tabs a.active { color:#2c6a54; border-color:#c0654a; }
.filter-tabs a .count { background:rgba(26,20,20,.08); border-radius:0; color:rgba(26,20,20,.65); font-weight:800; }
.filter-tabs a.active .count { background:#2c6a54; color:#fff; }

/* Limit bar */
.limit-bar-wrap { background:#faf5e8 !important; border:1px solid rgba(26,20,20,.1) !important; border-left:3px solid #c0654a !important; box-shadow:0 4px 10px rgba(0,0,0,.05) !important; }
.limit-bar-wrap .lb-label strong { color:#2c6a54 !important; }

/* Step nav */
.step-item.active { color:#2c6a54; border-color:#2c6a54; }
.step-item.done { color:#4d6530; border-color:#4d6530; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:#e4d8bf; }
::-webkit-scrollbar-thumb { background:#c0654a; }
::-webkit-scrollbar-thumb:hover { background:#2c6a54; }

/* Public navbar overrides */
body:not(.dark-page) .navbar { background:rgba(255,250,240,.85) !important; border-bottom:2px solid #c0654a !important; backdrop-filter:blur(16px); }
body:not(.dark-page) .navbar-brand { color:#1a1414; font-family:'Plus Jakarta Sans',sans-serif; }
body:not(.dark-page) .navbar-brand em { color:#c0654a; }
body:not(.dark-page) .navbar-links a { color:rgba(26,20,20,.7); font-family:'Inter',sans-serif; font-weight:500; }
body:not(.dark-page) .navbar-links a:hover,body:not(.dark-page) .navbar-links a.active { background:rgba(192,101,74,.08); color:#1a1414; }

body.dark-page { background:#FAF9F5 !important; color:#1a1414; }
body.dark-page .dark-navbar { background:#2c6a54 !important; border-bottom:2px solid #c0654a !important; }
body.dark-page .dark-brand { color:#FAF9F5; }
body.dark-page .dark-brand em { color:#c0654a; }
.pub-auth-trigger { background:#2c6a54 !important; color:#fff !important; border:1px solid rgba(0,0,0,.15) !important; border-radius:0 !important; font-family:'Inter',sans-serif !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:.5px; font-size:.78rem; box-shadow:0 8px 18px rgba(44,106,84,.35),inset 0 1px 0 rgba(255,255,255,.2); padding:8px 16px; }
.pub-auth-trigger:hover { background:#2c6a54 !important; }
.pub-auth-menu { background:#2c6a54 !important; border:1px solid rgba(192,101,74,.3) !important; border-top:3px solid #c0654a !important; border-radius:0 !important; }
.pub-auth-menu a { color:rgba(239,229,208,.75); border-radius:0 !important; }
.pub-auth-menu a:hover { background:rgba(192,101,74,.15); color:#FAF9F5; }

/* ══════════════════════════════════════════════════════════════
   V4.2 — 3D COMPACT STAT CARDS (DASHBOARD OVERVIEW)
   ══════════════════════════════════════════════════════════════ */
.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}
.stat-card {
  padding: 10px 12px 9px !important;
  text-decoration: none !important; color: inherit !important; display: block !important;
  cursor: pointer;
  background: linear-gradient(180deg,#fffbf2 0%,#fff 100%) !important;
  border: 1px solid rgba(26,20,20,.1) !important;
  border-left: 3px solid #2c6a54 !important;
  border-bottom: 3px solid #2c6a54 !important;
  border-radius: 0 !important;
  box-shadow:
    0 8px 18px rgba(44,106,84,.1),
    0 1px 3px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(192,101,74,.06) !important;
  transform: perspective(800px) rotateX(1.5deg);
  transform-origin: center top;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s, border-color .3s !important;
  position: relative;
}
.stat-card:nth-child(1) { border-left-color:#2c6a54 !important; border-bottom-color:#2c6a54 !important; }
.stat-card:nth-child(2) { border-left-color:#059669 !important; border-bottom-color:#059669 !important; }
.stat-card:nth-child(3) { border-left-color:#1a1414 !important; border-bottom-color:#1a1414 !important; }
.stat-card:nth-child(4) { border-left-color:#c0654a !important; border-bottom-color:#c0654a !important; }
.stat-card::before {
  height: 0 !important;
}
.stat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:transparent;
  pointer-events: none; z-index: 0;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card:hover {
  transform: perspective(800px) rotateX(0) translateY(-4px) !important;
  box-shadow:
    0 14px 28px rgba(44,106,84,.18),
    0 3px 8px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
  border-left-color: #c0654a !important;
}
.stat-header { margin-bottom: 6px !important; }
.stat-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: #6b6b6b !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}
.stat-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 50% !important;
  background: #2c6a54 !important;
  color: #fffbf2 !important;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 6px 14px rgba(44,106,84,.4),
    0 2px 4px rgba(0,0,0,.15),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.08),
    inset 2px 0 0 rgba(255,255,255,.08),
    inset -2px 0 0 rgba(0,0,0,.12);
  transform: perspective(180px) rotateX(10deg) rotateY(-10deg);
  transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
  position: relative;
}
.stat-icon::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.stat-icon i { width: 14px !important; height: 14px !important; stroke-width: 2.25 !important; color:#fffbf2 !important; position:relative; z-index:1; }

/* Color variants based on inline bg — overriding to keep theme */
.stat-card:nth-child(1) .stat-icon { background:#2c6a54 !important; box-shadow:0 6px 14px rgba(44,106,84,.4),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.08) !important; }
.stat-card:nth-child(2) .stat-icon { background:#059669 !important; box-shadow:0 6px 14px rgba(5,150,105,.38),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.08) !important; }
.stat-card:nth-child(3) .stat-icon { background:#2c6a54 !important; box-shadow:0 6px 14px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.12) !important; }
.stat-card:nth-child(4) .stat-icon { background:#c0654a !important; box-shadow:0 6px 14px rgba(192,101,74,.4),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.08) !important; }

.stat-card:hover .stat-icon {
  transform: perspective(180px) rotateX(0) rotateY(0) scale(1.08) !important;
}
.stat-value {
  font-size: 20px !important;
  margin-bottom: 2px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  letter-spacing: -.5px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  background: linear-gradient(180deg,#2c6a54 0%,#2c6a54 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-change {
  font-size: 9px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Overview section — make heading tighter */
.dash-section:has(.stats-grid) .dash-section-head { margin-bottom: 10px !important; }

/* Editorial section heading — ribbon style */
.dash-section-head {
  position: relative;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid rgba(26,20,20,.1) !important;
  margin-bottom: 16px !important;
}
.dash-section-head::before {
  content: '';
  position: absolute; bottom: -1px; left: 0;
  width: 48px; height: 3px;
  background: #c0654a;
}
.dash-section-head-left { gap: 12px !important; align-items: center !important; }

.dash-section-icon {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: #2c6a54 !important;
  color: #fffbf2 !important;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow:
    0 4px 10px rgba(44,106,84,.35),
    0 1px 2px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.07);
  transform: perspective(140px) rotateX(8deg) rotateY(-6deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.dash-section-icon:hover {
  transform: perspective(140px) rotateX(0) rotateY(0) scale(1.06);
}
.dash-section-icon i { width: 16px !important; height: 16px !important; }
.dash-section-icon[style*="rgba(232,160,32"],
.dash-section-icon[style*="rgba(180,83,9"],
.dash-section-icon[style*="rgba(245,158,11"] {
  background: #c0654a !important; color: #fffbf2 !important;
  box-shadow:
    0 4px 10px rgba(192,101,74,.4),
    0 1px 2px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.07) !important;
}
.dash-section-icon[style*="rgba(16,185,129"],
.dash-section-icon[style*="rgba(5,150,105"] {
  background: #059669 !important; color: #fff !important;
  box-shadow:
    0 4px 10px rgba(5,150,105,.35),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.07) !important;
}
.dash-section-icon[style*="rgba(46,117,182"] {
  background: #2c6a54 !important; color: #fffbf2 !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.1) !important;
}

.dash-section .section-title {
  font-size: 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
  color: #1a1414 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  line-height: 1.1 !important;
}
.dash-section .section-sub {
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
  color: #6b6b6b !important;
  font-style: italic;
  font-weight: 500;
  margin-top: 3px !important;
  letter-spacing: .2px !important;
}

/* ══════════════════════════════════════════════════════════════
   V4.3 — EDITORIAL PANELS & OPPORTUNITIES/BIDS LIST
   ══════════════════════════════════════════════════════════════ */
.panel {
  position: relative;
  background: linear-gradient(180deg,#FFFEFA 0%,#FAF9F5 100%) !important;
  border: 1px solid rgba(44,106,84,.12) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow:
    0 4px 16px rgba(44,106,84,.07),
    0 1px 3px rgba(0,0,0,.03),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
/* Brand gradient stripe at the very top */
.panel::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg,#2c6a54 0%,#2c6a54 30%,#c0654a 60%,#c0654a 100%);
  pointer-events:none;
  border-top-left-radius:14px;border-top-right-radius:14px;
}
.panel:hover {
  box-shadow:
    0 8px 24px rgba(44,106,84,.1),
    0 2px 6px rgba(0,0,0,.04),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.panel > * { position: relative; z-index: 1; }

/* Panel header — editorial style */
.panel h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  color: #1a1414 !important;
}
.gd-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(44,106,84,.1);
  position: relative;
}
.gd-panel-head::after {
  content:''; position:absolute; bottom:-1px; left:0;
  width:60px; height:2px;
  background: linear-gradient(90deg,#c0654a,#c0654a);
  border-radius:2px;
}
.gd-panel-head-left { display:flex; align-items:center; gap:12px; min-width:0; }
.gd-panel-icon {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #2c6a54; color: #fffbf2;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 6px 14px rgba(44,106,84,.4),
    0 2px 4px rgba(0,0,0,.15),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.08);
  transform: perspective(180px) rotateX(10deg) rotateY(-10deg);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.gd-panel-icon::before {
  content:''; position:absolute; top:0; left:0; right:0; height:50%;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.gd-panel-icon[data-tone="copper"] {
  background:#c0654a;
  box-shadow:0 6px 14px rgba(192,101,74,.4),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.08);
}
.gd-panel-icon[data-tone="ink"] {
  background:#2c6a54;
  box-shadow:0 6px 14px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.15),inset 0 -2px 0 rgba(0,0,0,.12);
}
.gd-panel-icon[data-tone="green"] {
  background:#059669;
  box-shadow:0 6px 14px rgba(5,150,105,.38),0 2px 4px rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.08);
}
.gd-panel:hover .gd-panel-icon,
.panel:hover .gd-panel-icon {
  transform: perspective(180px) rotateX(0) rotateY(0) scale(1.06);
}
.gd-panel-icon i { width: 18px; height: 18px; stroke-width: 2.25; position: relative; z-index: 1; }
.gd-panel-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .55rem; font-weight: 800;
  color: #c0654a; letter-spacing: 1.6px;
  text-transform: uppercase; line-height: 1;
  margin-bottom: 4px;
}
.gd-panel-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px; font-weight: 800;
  color: #1a1414; margin: 0;
  text-transform: uppercase; letter-spacing: 1.4px; line-height: 1.1;
}
.gd-panel-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: #fffbf2;
  border: 1px solid rgba(44,106,84,.25);
  border-radius: 0;
  color: #2c6a54 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  text-decoration: none;
  box-shadow: none;
  transition: all .2s;
  flex-shrink: 0;
}
.gd-panel-link i { width: 11px; height: 11px; transition: transform .25s; }
.gd-panel-link:hover {
  background: #2c6a54; color: #fffbf2 !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
.gd-panel-link:hover i { transform: translate(2px,-2px); }

/* Panel list rows — tenders / bids */
.panel [style*="border:1px solid var(--gray-100)"],
.panel [style*="border:1px solid var(--gray-200)"] {
  background: #fff !important;
  border: 1px solid rgba(26,20,20,.08) !important;
  border-left: 2px solid #c0654a !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.04) !important;
  transition: transform .25s, box-shadow .25s, border-left-color .25s !important;
}
.panel [style*="border:1px solid var(--gray-100)"]:hover,
.panel [style*="border:1px solid var(--gray-200)"]:hover {
  background: #fffbf2 !important;
  transform: translateX(2px);
  box-shadow: 0 8px 18px rgba(44,106,84,.12), 0 2px 4px rgba(0,0,0,.06) !important;
  border-left-color: #2c6a54 !important;
}

/* Browse All / View All outline buttons */
.panel .btn-outline.btn-sm {
  background: transparent !important;
  border: 1px solid #2c6a54 !important;
  color: #2c6a54 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 12px !important;
  border-radius: 0 !important;
  transition: all .2s;
}
.panel .btn-outline.btn-sm:hover {
  background: #2c6a54 !important;
  color: #fffbf2 !important;
  box-shadow: 0 4px 10px rgba(44,106,84,.3) !important;
}

/* High-ticket lock banner */
.panel [style*="rgba(232,160,32"] {
  background: linear-gradient(135deg,rgba(192,101,74,.08),rgba(192,101,74,.03)) !important;
  border: 1px dashed rgba(192,101,74,.5) !important;
  border-left: 3px solid #c0654a !important;
  border-radius: 0 !important;
}

/* Empty state */
.empty-state {
  padding: 32px 20px !important;
  text-align: center;
}
.empty-icon {
  width: 64px !important; height: 64px !important;
  background: linear-gradient(135deg,#fffbf2,#f5ead2) !important;
  border: 1px solid rgba(192,101,74,.2) !important;
  border-radius: 50% !important;
  margin: 0 auto 14px !important;
  display: flex; align-items: center; justify-content: center;
  color: #c0654a !important;
  box-shadow:
    inset 0 2px 4px rgba(192,101,74,.1),
    0 4px 10px rgba(192,101,74,.1);
}
.empty-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1a1414 !important;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-bottom: 6px;
}
.empty-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  color: #6b6b6b !important;
  font-style: italic;
  margin-bottom: 14px;
}

/* Bid Now / primary btn inside list rows — solid burgundy w/ copper accent */
.panel .btn-primary.btn-sm {
  background: #2c6a54 !important;
  color: #fffbf2 !important;
  border: 1px solid #2c6a54 !important;
  border-bottom: 2px solid #c0654a !important;
  border-radius: 0 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 8px rgba(44,106,84,.25), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition: all .2s;
}
.panel .btn-primary.btn-sm:hover {
  background: #2c6a54 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(44,106,84,.4), inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* HT badge — flatten gradient */
.panel [style*="linear-gradient(90deg,var(--accent)"] {
  background: #c0654a !important;
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 2px 4px rgba(192,101,74,.3), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ══════════════════════════════════════════════════════════════
   V4.1 — EDITORIAL TOPBAR + IG/WHATSAPP-STYLE STATUS CORNER
   ══════════════════════════════════════════════════════════════ */

/* Topbar title — editorial serif-ish with copper eyebrow */
.gd-topbar-head { display:flex; flex-direction:column; gap:4px; min-width:0; }
.gd-topbar-eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.62rem; font-weight:800; letter-spacing:1.6px;
  color:#c0654a; text-transform:uppercase;
}
.gd-eye-dot {
  width:6px; height:6px; border-radius:50%;
  background:#c0654a; box-shadow:0 0 0 3px rgba(192,101,74,.18);
  animation:gdEyePulse 2.2s ease-in-out infinite;
}
@keyframes gdEyePulse { 0%,100%{box-shadow:0 0 0 3px rgba(192,101,74,.18)} 50%{box-shadow:0 0 0 6px rgba(192,101,74,0)} }
.gd-topbar-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.22rem; font-weight:800; color:#1a1414;
  letter-spacing:-.4px; line-height:1.15;
  margin:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.gd-topbar-title em {
  font-style:italic; font-weight:500;
  color:#6b6b6b; font-size:.88rem;
  font-family:'Inter',serif;
}
.gd-topbar-accent {
  color:#c0654a; font-weight:900;
  display:inline-block; transform:skewX(-12deg);
}

/* WhatsApp-style 3D Status Corner — flows inline inside topbar-right, sits next to the bell */
.gd-status-corner {
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  background:radial-gradient(ellipse at top, rgba(255,255,255,.95) 0%, #fffbf2 55%, #f5ecd8 100%);
  border:1px solid rgba(26,20,20,.12);
  border-radius:9999px;
  padding:5px 14px 5px 8px;
  box-shadow:
    0 4px 10px rgba(44,106,84,.12),
    0 1px 3px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.04);
  transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
  flex-shrink:0;
}
.gd-status-corner:hover {
  transform:translateY(-1px);
  box-shadow:
    0 10px 22px rgba(44,106,84,.2),
    0 3px 6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,1);
}
/* Glossy highlight strip across the top */
.gd-status-corner::after {
  content:'';
  position:absolute; top:1px; left:8%; right:8%; height:35%;
  background:linear-gradient(180deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 100%);
  border-radius:14px 14px 50% 50%/14px 14px 30% 30%;
  pointer-events:none;
  z-index:1;
}

/* ── Mobile (≤900px) — flows in topbar-right, just left of the bell ── */
@media(max-width:900px){
  .gd-status-corner{
    display:inline-flex !important;
    position:static !important;
    top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
    margin:0 8px 0 0 !important;
    padding:0 !important;
    z-index:auto !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    flex-shrink:0 !important;
  }
  .gd-status-corner::before,
  .gd-status-corner::after{ display:none !important; }
  .gd-status-corner:hover{
    transform:scale(1.06) !important;
  }
  /* Hide "STATUS" caption on mobile — icon-only in the topbar */
  .gd-status-corner-meta{ display:none !important; }
  /* Single compact ring */
  .gd-status-corner-stories{ max-width:none !important; padding:0 !important; overflow:visible !important; }
  .gd-status-corner-stories .gd-stories-bar{ padding:0 !important; gap:6px !important; }
  .gd-status-corner-stories .gd-story-ring{
    width:34px !important; height:34px !important;
    transform:none !important;
    box-shadow:0 3px 8px rgba(44,106,84,.25),inset 0 1px 0 rgba(255,255,255,.4) !important;
    /* Disable the outward-pulsing glow ring on mobile so it doesn't bleed into adjacent icons */
    animation:none !important;
  }
  /* Strip the keyframe pulse halo that was overlapping the bell icon */
  .gd-status-corner-stories .gd-story.unread .gd-story-ring{
    animation:none !important;
    box-shadow:0 3px 8px rgba(44,106,84,.3),0 0 0 1.5px rgba(44,106,84,.15),inset 0 1px 0 rgba(255,255,255,.4) !important;
  }
  .gd-status-corner-stories .gd-story:hover .gd-story-ring{
    transform:scale(1.08) !important;
  }
  .gd-status-corner-stories .gd-story-avatar{
    font-size:11px !important;
    border-width:1.5px !important;
  }
}
.gd-status-corner::before {
  content:'';
  position:absolute; inset:0;
  background:transparent;
  pointer-events:none;
}
.gd-status-corner > * { position:relative; z-index:1; }
/* The stories bar inside the corner — horizontal, bounded, scrollable */
.gd-status-corner-stories {
  display:flex; align-items:center; justify-content:center;
  max-width:200px;
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none;
  order:1;
}
.gd-status-corner-stories::-webkit-scrollbar { display:none; }
@keyframes gdCornerIn { from{opacity:0;transform:translateX(-50%) translateY(-8px)} to{opacity:1;transform:translateX(-50%)} }

.gd-status-corner-meta {
  display:flex; flex-direction:column; align-items:flex-start; gap:0; line-height:1;
  order:2;
  margin:0;
  position:relative;
  z-index:2;
}
.gd-status-corner-label {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.62rem; font-weight:900;
  color:#2c6a54; letter-spacing:1.4px; line-height:1;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
  background:linear-gradient(180deg,#2c6a54 0%,#2c6a54 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.gd-status-corner-sub {
  font-family:'Inter',sans-serif;
  font-size:.52rem; font-weight:600;
  color:#c0654a; letter-spacing:.5px;
  text-transform:uppercase;
  margin-top:2px;
}

/* Override inner stories — look like IG/WhatsApp */
.gd-status-corner-stories .gd-stories-bar { padding:0 !important; gap:8px !important; overflow:visible !important; }
.gd-status-corner-stories .gd-story { gap:0 !important; }
.gd-status-corner-stories .gd-story-label { display:none !important; }
.gd-status-corner-stories .gd-story-ring {
  width:38px !important; height:38px !important;
  padding:2.5px !important;
  background:#e8e0d1 !important;  /* grey/seen */
  border-radius:50% !important;
  position:relative;
  transition:transform .28s cubic-bezier(.4,0,.2,1), background .3s, box-shadow .28s;
  transform:perspective(180px) rotateX(8deg) rotateY(-8deg);
  box-shadow:
    0 6px 14px rgba(44,106,84,.3),
    0 2px 5px rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(0,0,0,.12);
}
.gd-status-corner-stories .gd-story:hover .gd-story-ring {
  transform:perspective(180px) rotateX(0) rotateY(0) scale(1.1);
  box-shadow:
    0 10px 20px rgba(44,106,84,.4),
    0 3px 8px rgba(192,101,74,.25),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(0,0,0,.1);
}
.gd-status-corner-stories .gd-story.unread .gd-story-ring {
  /* Instagram-style conic gradient — burgundy → copper → gold */
  background:conic-gradient(from 210deg, #2c6a54, #c0654a, #c0654a, #c0654a, #2c6a54) !important;
  animation:gdStoryRotate 4s linear infinite, gdStoryPulse 2.2s ease-in-out infinite !important;
}
@keyframes gdStoryRotate { to { filter:hue-rotate(10deg); } }
@keyframes gdStoryPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(192,101,74,.45), 0 2px 8px rgba(44,106,84,.25); }
  50%     { box-shadow:0 0 0 6px rgba(192,101,74,0),   0 2px 8px rgba(44,106,84,.25); }
}
.gd-status-corner-stories .gd-story-avatar {
  background:radial-gradient(circle at 30% 25%,#2c6a54 0%,#2c6a54 55%,#2c6a54 100%) !important;
  border:2px solid #fffbf2 !important;
  font-size:12px !important;
  font-weight:800 !important;
  color:#fffbf2 !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.15) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  position:relative;
}
/* Glossy highlight on the green avatar */
.gd-status-corner-stories .gd-story-avatar::before {
  content:'';
  position:absolute; top:14%; left:18%;
  width:36%; height:24%;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}
/* New-story dot indicator (top-right) */
.gd-status-corner-stories .gd-story.unread::after {
  content:'';
  position:absolute; top:-1px; right:-1px;
  width:8px; height:8px; border-radius:50%;
  background:#10b981;
  border:1.5px solid #fffbf2;
  z-index:2;
}
.gd-status-corner-stories .gd-story-tip {
  font-family:'Inter',sans-serif;
  background:#2c6a54 !important;
  border-radius:0 !important;
  font-size:11px !important;
  padding:4px 8px !important;
  border-top:2px solid #c0654a;
}

/* (Older mobile override block removed — superseded by the @media(max-width:900px)
   block above which makes the widget flow inline below the topbar with the
   "STATUS" caption visible.) */

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL 3D BUTTONS — applied across every logged-in page so all
   CTAs match the public-website style (homepage, pricing, etc.).
   Brand: emerald (#2c6a54) + coral (#c0654a) + cream (#fffbf2).
   Universal pattern:
     - Solid emerald primary with coral underline + cream text
     - Outline = emerald border, hover fills emerald
     - Ghost = subtle, lifts on hover
     - Plus Jakarta Sans, 800 weight, tracked uppercase letters
     - 3D depth: layered shadow + inset highlight + perspective lift
   ════════════════════════════════════════════════════════════════════ */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-success,
button.btn,
a.btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  padding:10px 20px !important;
  border-radius:0 !important;
  border:1px solid transparent;
  text-decoration:none !important;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.4,0,.2,1),
             box-shadow .22s cubic-bezier(.4,0,.2,1),
             background .2s,color .2s,border-color .2s;
  white-space:nowrap;
  position:relative;
}
.btn svg, .btn i[data-lucide]{flex-shrink:0;width:14px !important;height:14px !important}

/* PRIMARY — emerald solid 3D with coral underline */
.btn-primary,
button.btn-primary,
a.btn-primary{
  background:linear-gradient(180deg,#2c6a54 0%,#2c6a54 100%) !important;
  color:#fffbf2 !important;
  border:1px solid #2c6a54 !important;
  border-bottom:2px solid #c0654a !important;
  box-shadow:0 6px 14px rgba(44,106,84,.32),
             0 2px 4px rgba(0,0,0,.06),
             inset 0 1px 0 rgba(255,255,255,.18),
             inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(44,106,84,.45),
             0 3px 6px rgba(0,0,0,.07),
             inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
.btn-primary:active{transform:translateY(0);box-shadow:0 4px 8px rgba(44,106,84,.32),inset 0 2px 4px rgba(0,0,0,.15) !important}

/* OUTLINE — emerald border, hover fills emerald */
.btn-outline,
button.btn-outline,
a.btn-outline{
  background:#fffbf2 !important;
  color:#2c6a54 !important;
  border:1px solid #2c6a54 !important;
  box-shadow:0 4px 10px rgba(44,106,84,.08),
             inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.btn-outline:hover{
  background:#2c6a54 !important;
  color:#fffbf2 !important;
  border-color:#2c6a54 !important;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(44,106,84,.35),
             inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* GHOST — neutral, subtle 3D */
.btn-ghost,
button.btn-ghost,
a.btn-ghost{
  background:rgba(26,20,20,.04) !important;
  color:#1a1414 !important;
  border:1px solid rgba(26,20,20,.18) !important;
  box-shadow:0 2px 4px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
.btn-ghost:hover{
  background:rgba(192,101,74,.1) !important;
  color:#c0654a !important;
  border-color:#c0654a !important;
  transform:translateY(-1px);
  box-shadow:0 8px 16px rgba(192,101,74,.2),inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* SECONDARY — coral 3D (used as alternate CTA) */
.btn-secondary,
button.btn-secondary,
a.btn-secondary{
  background:linear-gradient(180deg,#c0654a 0%,#c0654a 100%) !important;
  color:#fffbf2 !important;
  border:1px solid #c0654a !important;
  border-bottom:2px solid #2c6a54 !important;
  box-shadow:0 6px 14px rgba(192,101,74,.35),
             inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.1) !important;
}
.btn-secondary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(192,101,74,.5),
             inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* DANGER — red 3D destructive */
.btn-danger,
button.btn-danger,
a.btn-danger{
  background:linear-gradient(180deg,#dc2626 0%,#991b1b 100%) !important;
  color:#fff !important;
  border:1px solid #991b1b !important;
  box-shadow:0 6px 14px rgba(220,38,38,.35),
             inset 0 1px 0 rgba(255,255,255,.2),
             inset 0 -1px 0 rgba(0,0,0,.12) !important;
}
.btn-danger:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(220,38,38,.45),inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* SUCCESS — emerald-leaning success state */
.btn-success,
button.btn-success,
a.btn-success{
  background:linear-gradient(180deg,#059669 0%,#047857 100%) !important;
  color:#fff !important;
  border:1px solid #047857 !important;
  box-shadow:0 6px 14px rgba(5,150,105,.32),
             inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(5,150,105,.45),inset 0 1px 0 rgba(255,255,255,.22) !important}

/* Disabled state */
.btn:disabled,
.btn[disabled]{
  opacity:.45 !important;cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Sizes */
.btn-sm{padding:7px 14px !important;font-size:.7rem !important;letter-spacing:.5px !important}
.btn-sm svg, .btn-sm i[data-lucide]{width:12px !important;height:12px !important}
.btn-lg{padding:13px 28px !important;font-size:.86rem !important;letter-spacing:.7px !important}
.btn-lg svg, .btn-lg i[data-lucide]{width:16px !important;height:16px !important}

/* Topbar icon-button — round 3D bell etc. */
.topbar-icon-btn{
  width:40px;height:40px;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  border-radius:50% !important;
  background:#fffbf2 !important;
  color:#2c6a54 !important;
  border:1px solid rgba(44,106,84,.18) !important;
  box-shadow:0 4px 10px rgba(44,106,84,.1),inset 0 1px 0 rgba(255,255,255,.6) !important;
  text-decoration:none !important;
  transition:all .22s cubic-bezier(.4,0,.2,1) !important;
}
.topbar-icon-btn:hover{
  background:#2c6a54 !important;
  color:#fffbf2 !important;
  border-color:#2c6a54 !important;
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(44,106,84,.35),inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL: SHARP CORNERS — remove all border-radius from buttons
   Editorial brand pattern uses square corners across all CTAs.
   This overrides any inline/component-level rounded styles.
   ════════════════════════════════════════════════════════════════ */
button:not(.gd-mob-cta):not(.auth-mob-hamburger),
[type="button"],
[type="submit"],
[type="reset"],
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-danger,
.btn-success,
.btn-warning,
.btn-info,
.btn-sm,
.btn-bid,
.btn-v-save,
.btn-v-cancel,
.btn-edit-bid,
.bid-submitted,
.hbtn,
.hbtn-primary,
.hbtn-outline,
.hbtn-secondary,
.auth-btn,
.pn-auth-btn,
.gd-panel-link,
.ep-submit,
.ep-view-link,
.ep-add-product-toggle,
.ep-product-del,
.ep-logo-upload,
.id-chip,
.id-deal,
.id-tender,
.id-bid,
.deal-id-chip,
.nav-links a,
.pn-links a,
.topbar-icon-btn,
.topbar-toggle,
.hamburger,
.pn-social,
.nav-social,
.at-tab,
.comm-tab,
.f-tab,
.filter-tab,
.role-card,
.tcard .btn-bid,
.btn-v-save:hover,
.btn-v-cancel:hover {
  border-radius: 0 !important;
}

/* Also strip rounding from button-like SUBMIT inputs and form actions */
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   Catch-all: any <a> or <button> with inline border-radius gets reset to 0.
   Uses attribute-selector + !important to beat inline styles.
   Excludes status pills (.cs-pill, .role-pill, .badge-*) which keep their rounding.
   ════════════════════════════════════════════════════════════════ */
a[style*="border-radius"]:not(.cs-pill):not(.role-pill):not([class*="badge-"]):not(.gp-chip):not(.id-chip):not(.id-deal):not(.id-tender):not(.id-bid),
button[style*="border-radius"]:not(.cs-pill):not(.role-pill):not([class*="badge-"]),
input[type="submit"][style*="border-radius"],
input[type="button"][style*="border-radius"] {
  border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL: FLAT ICONS — strip glossy 3D sphere effect
   Removes radial-gradient highlights, white inset glares, and 3D shadows.
   Replaces with flat solid color + subtle drop shadow only.
   ════════════════════════════════════════════════════════════════ */

/* Stat icons (dashboard cards) */
.stat-icon,
.stat-card:nth-child(1) .stat-icon,
.stat-card:nth-child(2) .stat-icon,
.stat-card:nth-child(3) .stat-icon,
.stat-card:nth-child(4) .stat-icon {
  background: #2c6a54 !important;
  box-shadow: 0 3px 8px rgba(44,106,84,.18) !important;
  transform: none !important;
}
.stat-card:nth-child(2) .stat-icon { background: #059669 !important; box-shadow: 0 3px 8px rgba(5,150,105,.2) !important; }
.stat-card:nth-child(3) .stat-icon { background: #1a1414 !important; box-shadow: 0 3px 8px rgba(0,0,0,.18) !important; }
.stat-card:nth-child(4) .stat-icon { background: #c0654a !important; box-shadow: 0 3px 8px rgba(192,101,74,.22) !important; }
.stat-icon::before { display: none !important; }
.stat-card:hover .stat-icon { transform: scale(1.05) !important; }

/* Panel icons (gd-panel-icon variants) */
.gd-panel-icon,
.gd-panel-icon[data-tone="copper"],
.gd-panel-icon[data-tone="ink"],
.gd-panel-icon[data-tone="green"],
.gd-panel-icon[data-tone="burgundy"] {
  background: #2c6a54 !important;
  box-shadow: 0 3px 8px rgba(44,106,84,.18) !important;
  transform: none !important;
  border: none !important;
}
.gd-panel-icon[data-tone="copper"] { background: #c0654a !important; box-shadow: 0 3px 8px rgba(192,101,74,.22) !important; }
.gd-panel-icon[data-tone="ink"]    { background: #1a1414 !important; box-shadow: 0 3px 8px rgba(0,0,0,.18) !important; }
.gd-panel-icon[data-tone="green"]  { background: #059669 !important; box-shadow: 0 3px 8px rgba(5,150,105,.2) !important; }
.gd-panel-icon[data-tone="burgundy"] { background: #c0654a !important; box-shadow: 0 3px 8px rgba(192,101,74,.22) !important; }
.gd-panel-icon::before { display: none !important; }
.gd-panel:hover .gd-panel-icon,
.panel:hover .gd-panel-icon { transform: scale(1.05) !important; }

/* Dashboard section header icons */
.dash-section-icon {
  background: rgba(44,106,84,.1) !important;
  color: #2c6a54 !important;
  box-shadow: none !important;
  transform: none !important;
  border: 1px solid rgba(44,106,84,.18) !important;
}
.dash-section-icon::before,
.dash-section-icon::after { display: none !important; }

/* Notification icons */
.notif-ico {
  background: #2c6a54 !important;
  box-shadow: 0 3px 8px rgba(44,106,84,.2) !important;
  border: none !important;
  transform: none !important;
}
.notif-ico::before { display: none !important; }
.notif-item:hover .notif-ico { transform: scale(1.05) !important; }

/* Empty state icons */
.empty-icon,
.ep-empty-icon {
  background: #c0654a !important;
  box-shadow: 0 3px 8px rgba(192,101,74,.22) !important;
  transform: none !important;
}
.empty-icon::before, .ep-empty-icon::before { display: none !important; }

/* Auth menu item icons (login dropdown) */
.auth-item-icon {
  background: #2c6a54 !important;
  box-shadow: 0 3px 8px rgba(44,106,84,.2) !important;
  border: none !important;
  transform: none !important;
}
.auth-item:hover .auth-item-icon { transform: scale(1.06) !important; }

/* Sidebar logo icon — also flat (image inside is the visual) */
.sidebar .gd-logo-icon::before { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   GLOBAL: NO GRADIENTS — flatten all gradient backgrounds to solid colors
   This removes linear-gradient and radial-gradient effects across the entire app.
   Brand identity stays — just no gradient transitions.
   ════════════════════════════════════════════════════════════════ */

/* ── Panels & cards — flatten cream gradient to solid cream ── */
.panel,
.ep-card,
.ep-hero,
.gp-panel,
.gp-hero,
.v-form-card,
.comm-table-wrap,
.benefit-tile,
.plan-card,
.how-card,
.pending-card,
.dash-card,
.tcard {
  background: #FFFEFA !important;
}
/* Strip the brand-stripe gradient at top of cards (3px line) */
.panel::before,
.ep-card::before,
.ep-hero::before,
.gp-panel::before,
.gp-hero::before,
.v-form-card::before {
  background: #c0654a !important;
}

/* ── Tender list rows ── */
.tcard:hover,
[onmouseover*="linear-gradient"] {
  background: #fff !important;
}

/* ── Body bg already flat #FAF9F5; remove any gradient overlays ── */
body, html { background: #FAF9F5 !important; }

/* ── Buttons — flatten forest gradient to solid ── */
.btn-primary,
.btn-success,
.hbtn-primary,
.ep-submit,
.btn-v-save,
.btn-bid,
.nav-links a.active,
.auth-btn:hover,
.pn-auth-btn:hover,
.auth-wrap.open .auth-btn,
.pn-auth-wrap.open .pn-auth-btn,
.ep-view-link,
button[class*="primary"]:not(.gp-chip),
.btn-v-save:hover {
  background: #2c6a54 !important;
}

/* ── Coral CTA buttons → flat coral (specific selectors only) ── */
.btn-warning,
.hero-eyebrow,
.auth-mob-nav-link.cta {
  background: #c0654a !important;
}

/* ── Hero badges/pills — flat color ── */
.hero-eyebrow {
  background: #c0654a !important;
  animation: none !important;
}
.hero-eyebrow::before { display: none !important; }

/* ── Outline buttons → flat white ── */
.hbtn-outline:hover,
.btn-outline:hover,
.btn-v-cancel:hover {
  background: #fff5ec !important;
}

/* ── Section heading bars → flat coral ── */
.gd-panel-head::after,
.ep-card-head::before,
.gp-panel-head::before,
.v-form-title::before {
  background: #c0654a !important;
}

/* ── Status story rings — flat green ── */
.gd-story.unread .gd-story-ring,
.gd-story-ring {
  background: #2c6a54 !important;
  animation: none !important;
}

/* ── Sidebar logo container — flat cream ── */
.sidebar .gd-logo-icon {
  background: #FAF9F5 !important;
}

/* ── Annoucement bar → flat green (already mostly flat) ── */
.ann-bar, .pn-ann-bar { background: #2c6a54 !important; }
.ann-bar::before, .ann-bar::after,
.pn-ann-bar::before, .pn-ann-bar::after { display: none !important; }

/* ── Login/Register left brand panel → flat dark green ── */
.left-panel { background: #2c6a54 !important; }
.left-panel::before { display: none !important; }

/* ── Wordmark text gradients — keep solid (already updated) ── */
.nav-wm-goose, .pn-wm-goose { background: none !important; -webkit-text-fill-color: #2c6a54 !important; color: #2c6a54 !important; }
.nav-wm-dock,  .pn-wm-dock  { background: none !important; -webkit-text-fill-color: #c0654a !important; color: #c0654a !important; }
.gd-wordmark { background: none !important; -webkit-text-fill-color: inherit !important; }
.bt-val, .plan-price { background: none !important; -webkit-text-fill-color: #2c6a54 !important; color: #2c6a54 !important; }

/* ── Filter card → flat cream ── */
.filter-card { background: #FFFEFA !important; }

/* ── Range slider fill → solid coral ── */
.f-range-fill { background: #c0654a !important; }

/* ── Progress bars → solid forest ── */
.gd-prog-fill,
.gd-usage-fill,
.ep-prog-ring .fg,
[class*="progress-fill"] { background: #c0654a !important; }

/* ── Inputs → flat white ── */
.ep-field input,
.ep-field select,
.ep-field textarea,
.v-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"],
select, textarea {
  background: #fff !important;
}

/* ── Hero gold/cream backgrounds (legacy) ── */
.hero-section, .hero-left-panel { background: #FAF9F5 !important; }
.hero-left-panel { background: rgba(255,250,240,.6) !important; backdrop-filter: blur(24px) saturate(160%) !important; }

/* ── Hero title accent (Tender Market) — keep flat green ── */
.hero-title-accent { background: #2c6a54 !important; }

/* ── Auth mobile drawer → flat cream ── */
.auth-mob-drawer { background: #FFFEFA !important; }

/* ── Auth mobile top → flat cream ── */
.auth-mobile-top { background: rgba(255,254,250,.94) !important; }
.auth-mobile-top::after { background: #c0654a !important; }

/* ── Status corner buttons (was already flattened) ── */
.gd-status-corner-stories .gd-story.unread .gd-story-ring { background: #2c6a54 !important; }

/* ── Plan cards "current"/"premium" pills ── */
.pp-current, .pp-premium { background: #2c6a54 !important; }
.pp-premium { background: #c0654a !important; }
.hs-bubble { background: #2c6a54 !important; }

/* ── Notif filter category pills ── */
.notif-cat-pill { background: rgba(44,106,84,.06) !important; }
.notif-cat-pill.active { background: #2c6a54 !important; }

/* ── ID chip backgrounds (commission table etc) ── */
.id-deal, .id-tender, .id-bid {
  background: #fff !important;
}

/* ════════════════════════════════════════════════════════════════
   Catch-all: any element with inline linear/radial-gradient background
   gets flattened. Uses attribute selector + !important.
   Excludes specific elements that should keep textured patterns.
   ════════════════════════════════════════════════════════════════ */
[style*="linear-gradient"]:not(svg):not(path):not([class*="hero-title-accent"]),
[style*="radial-gradient"]:not(svg):not(path) {
  background-image: none !important;
}

/* Reset all WebKit text-fill clipping (used for gradient text) */
[style*="-webkit-background-clip"],
[style*="background-clip:text"],
[style*="background-clip: text"] {
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}

/* ════════════════════════════════════════════════════════════════
   Agency dashboard — sharp corners + fix faded buttons + fix CTA icon
   ════════════════════════════════════════════════════════════════ */

/* All BROWSE ALL / VIEW ALL panel-link buttons sharp */
.gd-panel-link, a.gd-panel-link {
  border-radius: 0 !important;
}

/* BID NOW / BID SENT pills sharp + visible */
.panel a[style*="Bid Now"],
.panel a[style*="background:linear-gradient(180deg,#2c6a54"],
.panel a[style*="background:#2c6a54"],
.panel span[style*="Bid Sent"]{
  border-radius: 0 !important;
}

/* Generic — every direct anchor/button inside panels = sharp */
.panel a, .panel button { border-radius: 0 !important; }

/* Tender row "Bid Now" inline button — restore proper visibility */
.panel a[onclick*="event.stopPropagation"]{
  background: #2c6a54 !important;
  color: #FAF9F5 !important;
  border: 1px solid #2c6a54 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
  opacity: 1 !important;
  border-radius: 0 !important;
}
.panel a[onclick*="event.stopPropagation"]:hover{
  background: #2c6a54 !important;
  border-color: #c0654a !important;
  box-shadow: 0 0 0 2px rgba(192,101,74,.3),0 6px 14px rgba(192,101,74,.25) !important;
}

/* "Bid Sent" pill — solid green check */
.panel span[style*="rgba(5,150,105"]{
  background: rgba(5,150,105,.14) !important;
  border: 1px solid rgba(5,150,105,.4) !important;
  border-radius: 0 !important;
  color: #059669 !important;
}

/* "Win more deals" CTA — restore zap icon background */
.panel a[href*="browse_tenders"][style*="dashed"] > div:first-child,
a[style*="border-radius:12px"][style*="dashed"][href*="browse_tenders"] > div:first-child{
  background: #c0654a !important;
  color: #FFF7F1 !important;
  box-shadow: 0 4px 10px rgba(192,101,74,.35) !important;
}

/* Total Bids / Accepted stat strip cards — sharp corners */
.panel div[style*="grid-template-columns:1fr 1fr"] > div{
  border-radius: 0 !important;
}

/* Pagination buttons — sharp + visible active state */
#tendersPager button,
#tendersPageNums button,
#tendersPageNums span{
  border-radius: 0 !important;
}
#tendersPageNums button{
  min-width: 32px !important;
  height: 32px !important;
  background: #fff !important;
  border: 1.5px solid rgba(44,106,84,.18) !important;
  color: #2c6a54 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 800 !important;
}
#tendersPageNums button[style*="155c47"],
#tendersPageNums button[style*="#2c6a54"]:not([style*="rgba"]){
  background: #2c6a54 !important;
  background-image: none !important;
  color: #FAF9F5 !important;
  border-color: #2c6a54 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3) !important;
}
#tendersPager button{
  background: #fff !important;
  border: 1.5px solid rgba(44,106,84,.2) !important;
  color: #2c6a54 !important;
}
#tendersPager button:not([disabled]):hover{
  background: #2c6a54 !important;
  color: #FAF9F5 !important;
  border-color: #2c6a54 !important;
}

/* "Win more deals" CTA — ensure visible coral circle (icon may not render if lucide fails) */
.panel a[href*="browse_tenders"][style*="dashed"] svg{
  color: #FFF7F1 !important;
  stroke: #FFF7F1 !important;
}

/* ════════════════════════════════════════════════════════════════
   Dashboard topbar status icon — match homepage simple round icon
   ════════════════════════════════════════════════════════════════ */
.gd-status-corner{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  background:transparent !important;
  border:none !important;
  border-radius:50% !important;
  padding:0 !important;
  box-shadow:none !important;
  flex-shrink:0;
}
.gd-status-corner::before,
.gd-status-corner::after{ display:none !important; }
.gd-status-corner:hover{
  transform:none !important;
  box-shadow:none !important;
}
/* Hide the STATUS label — only icon */
.gd-status-corner-meta{ display:none !important; }
/* Story circle — clean round flat */
.gd-status-corner-stories{
  background:transparent !important;
  padding:0 !important;
  margin:0 !important;
  overflow:visible !important;
}
.gd-status-corner-stories .gd-stories-bar{ padding:0 !important; gap:0 !important; background:transparent !important }
.gd-status-corner-stories .gd-story-ring{
  width:40px !important;height:40px !important;
  border-radius:50% !important;
  background:#FFFEFA !important;
  border:1.5px solid rgba(44,106,84,.18) !important;
  padding:0 !important;
  transform:none !important;
  animation:none !important;
  box-shadow:none !important;
  transition:all .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.gd-status-corner-stories .gd-story:hover .gd-story-ring{
  background:#2c6a54 !important;
  border-color:#c0654a !important;
  transform:translateY(-2px) scale(1.08) rotate(-4deg);
  box-shadow:0 0 0 3px rgba(192,101,74,.22),0 8px 18px rgba(44,106,84,.32) !important;
}
.gd-status-corner-stories .gd-story.unread .gd-story-ring{
  animation:none !important;
  background:#FFFEFA !important;
  border-color:rgba(44,106,84,.18) !important;
}
.gd-status-corner-stories .gd-story.unread:hover .gd-story-ring{
  background:#2c6a54 !important;
  border-color:#c0654a !important;
}
/* Replace avatar with clock icon look — hide initial */
.gd-status-corner-stories .gd-story-avatar{
  background:transparent !important;
  color:#2c6a54 !important;
  font-size:0 !important;  /* hide letter */
  border:none !important;
  width:100% !important;height:100% !important;
  border-radius:50% !important;
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
/* Clock icon via background-image (SVG) */
.gd-status-corner-stories .gd-story-avatar::before{
  content:'';
  width:18px;height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d5944' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:filter .25s;
}
.gd-status-corner-stories .gd-story:hover .gd-story-avatar::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF7F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Hide story tooltip (we use .nav-tip instead) + fix layout */
.gd-status-corner .gd-story-tip{ display:none !important; }
.gd-status-corner-stories .gd-story{ position:relative !important; padding:0 !important }
.gd-status-corner-stories .gd-story-label{ display:none !important; }
/* Status icon spacing — proper margin between status + bell */
.topbar-right .gd-status-corner{ margin-right:6px !important; }

/* Center-align status icon clock SVG inside ring */
.gd-status-corner-stories .gd-story-ring,
.gd-status-corner-stories .gd-story-avatar{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
}
.gd-status-corner-stories .gd-story-avatar::before{
  margin:0 !important;
  position:relative !important;
  display:block !important;
}
.gd-status-corner-stories .gd-story{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.gd-status-corner-stories .gd-stories-bar{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Force absolute centering for the clock icon */
.gd-status-corner-stories .gd-story-avatar{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;height:auto !important;
  border:none !important;
  background:transparent !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:0 !important;
}
.gd-status-corner-stories .gd-story-avatar img,
.gd-status-corner-stories .gd-story-avatar svg{
  display:none !important;
}
.gd-status-corner-stories .gd-story-ring{
  position:relative !important;
}
.gd-status-corner-stories .gd-story-avatar::before{
  position:absolute !important;
  top:50% !important; left:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  width:18px !important; height:18px !important;
}
.gd-status-corner-stories .gd-story:hover .gd-story-avatar::before{
  transform:translate(-50%, -50%) !important;
}

/* Win More Deals CTA — restore coral icon circle */
.panel a[href*="browse_tenders"][style*="dashed"] > div:first-child,
a[href*="browse_tenders"][style*="border-radius:0"][style*="dashed"] > div:first-child{
  background:#c0654a !important;
  background-image:none !important;
  border:none !important;
  box-shadow:0 4px 10px rgba(192,101,74,.32) !important;
}
.panel a[href*="browse_tenders"][style*="dashed"] svg,
a[href*="browse_tenders"][style*="border-radius:0"][style*="dashed"] svg{
  color:#FFF7F1 !important;
  stroke:#FFF7F1 !important;
  fill:none !important;
}

/* Force round topbar bell — beats earlier sharp-corner override */
a.topbar-icon-btn,
button.topbar-icon-btn,
.topbar-right .topbar-icon-btn{
  border-radius:50% !important;
  width:40px !important;height:40px !important;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE POLISH — consolidated fixes for recent changes
   Covers: nav icons, story icon, rail 3D icons, profile card,
   recent panels, quick action cards, vendor cards, blog rails.
   ════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px) ──────────────────────────────────────────── */
@media (max-width:900px){
  /* Topbar layout — flex with brand allowed to shrink, right cluster fixed */
  .topbar{flex-wrap:nowrap !important;gap:8px !important;padding:10px 12px !important;align-items:center !important}
  .topbar-left{flex:1 1 auto !important;min-width:0 !important;gap:8px !important;overflow:hidden}
  .topbar-right{gap:6px !important;flex-wrap:nowrap !important;flex-shrink:0}

  /* Brand pill — allow text to truncate cleanly with ellipsis */
  .gd-mobile-brand{min-width:0;flex:0 1 auto;overflow:hidden}
  .gd-mobile-brand-text{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:100%;
  }

  /* Topbar circular icons — tighter */
  .topbar-right .nav-status,
  .topbar-right .nav-notif,
  .topbar-right .nav-blog{
    width:36px !important;height:36px !important;
  }
  .topbar-right .nav-notif i,.topbar-right .nav-notif svg,
  .topbar-right .nav-blog i,.topbar-right .nav-blog svg{
    width:18px !important;height:18px !important;font-size:1.05rem !important;
  }
  .topbar-right .gd-story-svg{width:32px;height:32px}
  .topbar-right .nav-tip{font-size:.62rem;padding:5px 9px}

  /* Hide the tablet-redundant Browse Tenders / Post Tender CTA button —
     same as the .hide-on-mobile rule but force it once more in case
     of inline-style precedence */
  .topbar .btn.hide-on-mobile,
  .topbar a.hide-on-mobile{display:none !important}

  /* Rail header 3D icons — slightly smaller so title gets room */
  .gd-rail-3dicon{width:40px;height:40px;border-radius:12px;margin-right:8px}
  .gd-rail-3dicon svg{width:28px;height:28px}

  /* Recent activity rows — keep two-column but tighten */
  .cli-rec-rowlink{padding:9px 12px;gap:10px}
  .cli-rec-row-meta{gap:8px;font-size:.66rem}
  .cli-rec-price{font-size:.86rem}
  .cli-rec-pill{font-size:.5rem;padding:2px 7px;letter-spacing:.8px}
}

/* ── Tighter topbar at ≤700px (keep all 3 icons + brand) ──────── */
@media (max-width:700px){
  .topbar-right{gap:4px !important}
  .topbar-right .nav-status,
  .topbar-right .nav-notif,
  .topbar-right .nav-blog{
    width:34px !important;height:34px !important;
  }
  .topbar-right .gd-story-svg{width:30px !important;height:30px !important}
  .gd-mobile-brand-text{font-size:.86rem !important;letter-spacing:.02em}
}

/* ── Very small phone (≤420px) — prioritize story + bell ──────── */
@media (max-width:420px){
  .topbar-right{gap:3px !important}
  .topbar-right .nav-status,
  .topbar-right .nav-notif,
  .topbar-right .nav-blog{
    width:32px !important;height:32px !important;
  }
  .topbar-right .gd-story-svg{width:26px !important;height:26px !important}
  .topbar-right .nav-notif i,.topbar-right .nav-notif svg,
  .topbar-right .nav-blog i,.topbar-right .nav-blog svg{
    width:14px !important;height:14px !important;font-size:.85rem !important;
  }
  .gd-mobile-brand-text{font-size:.78rem !important}
  .gd-mobile-brand-logo{height:24px !important;width:24px !important}
}

/* ── Phone (≤640px) ───────────────────────────────────────────── */
@media (max-width:640px){
  /* Keep the story icon visible on phones too — just shrink it */
  .topbar-right .nav-status.gd-story-btn{display:inline-flex !important}
  .topbar-right .gd-story-svg{width:28px !important;height:28px !important}

  /* ─── Public Live Tenders rail — mobile polish ─── */
  .gd-public-left-rail .hr-header{
    padding:12px 14px !important;
    background:linear-gradient(135deg,rgba(192,101,74,.12) 0%,rgba(192,101,74,.04) 100%) !important;
  }
  .gd-public-left-rail .hr-title-main{font-size:1rem !important}
  .gd-public-left-rail .hr-subtitle{font-size:.62rem !important}

  /* Ticket cards — more breathing room, no half-cut on the right */
  .gd-public-left-rail .scroll-track{padding:10px 12px !important}
  .gd-public-left-rail .vap-slide.htcard,
  .gd-public-left-rail .htcard{
    flex:0 0 78vw !important;
    max-width:300px !important;
    padding:14px !important;
    gap:10px !important;
    box-shadow:0 4px 12px rgba(44,106,84,.1) !important;
  }
  .gd-public-left-rail .vap-name{
    font-size:.92rem !important;
    line-height:1.25 !important;
    white-space:normal !important;
    word-break:break-word !important;
    -webkit-line-clamp:2 !important;
  }
  .gd-public-left-rail .vap-city{font-size:.72rem !important;gap:3px}
  .gd-public-left-rail .htc-pid-chip{font-size:.6rem !important;padding:2px 7px !important}
  .gd-public-left-rail .vap-stag{
    font-size:.62rem !important;
    padding:3px 8px !important;
  }

  /* Days-left ticket — slightly smaller */
  .gd-public-left-rail .htc-days-ticket{padding:5px 10px !important}
  .gd-public-left-rail .htc-days-num{font-size:.85rem !important}
  .gd-public-left-rail .htc-days-lbl{font-size:.55rem !important;letter-spacing:.4px}

  /* Card footer — keep See details + Bid Now in one row */
  .gd-public-left-rail .htc-card-foot{
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:8px !important;
    padding-top:10px !important;
  }
  .gd-public-left-rail .htc-detail-link{font-size:.66rem !important;flex:1 1 auto;min-width:0}
  .gd-public-left-rail .vap-contact-btn{
    font-size:.62rem !important;
    padding:6px 11px !important;
    flex-shrink:0;
  }

  /* View All Tenders pill at the foot */
  .gd-public-left-rail .view-all-link{
    margin:8px 12px 14px !important;
    padding:11px 14px !important;
    font-size:.74rem !important;
  }

  /* Recent panels: stack the row content vertically so price/pill
     don't get squeezed */
  .cli-rec-rowlink{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .cli-rec-row-right,
  .cli-rec-row-right--bid{
    flex-direction:row;
    align-items:center;
    align-self:stretch;
    justify-content:space-between;
    gap:10px;
  }
  .cli-rec-row-meta{flex-wrap:wrap}

  /* Profile card pills — let them wrap to a 2nd row */
  .gd-profile-metrics{flex-wrap:wrap !important;gap:8px !important}

  /* Quick action / usage cards already drop to 1 column at 560/900,
     just make sure padding & icon don't overflow */
  .gd-qa-card,.gd-usage-ring{min-height:auto !important}

  /* Vendor card flat header — the long name + ellipsis works,
     but allow it to wrap to two lines for very narrow phones */
  .vd-card-name{white-space:normal !important;line-height:1.2 !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .vd-quick a{font-size:.55rem;padding:5px 8px}
}

/* ── Small phone (≤480px) ─────────────────────────────────────── */
@media (max-width:480px){
  /* Topbar icons even tighter */
  .topbar-right .nav-notif,
  .topbar-right .nav-blog{
    width:34px !important;height:34px !important;
  }
  .topbar-right .nav-notif i,.topbar-right .nav-notif svg,
  .topbar-right .nav-blog i,.topbar-right .nav-blog svg{
    width:16px !important;height:16px !important;
  }

  /* Rail header 3D icons — compact */
  .gd-rail-3dicon{width:34px;height:34px;border-radius:10px;margin-right:6px}
  .gd-rail-3dicon svg{width:22px;height:22px}

  /* Profile card avatar smaller */
  .gd-profile-card .gd-profile-avatar{width:42px !important;height:42px !important;font-size:1rem !important}
  .gd-profile-name{font-size:.95rem !important}

  /* Profile metric pills — narrower icons */
  .gd-profile-metric{padding:5px 8px !important;gap:4px !important}
  .gd-profile-metric-icon{width:20px !important;height:20px !important}
  .gd-profile-metric-val{font-size:.82rem !important}

  /* Vendor card head — slimmer avatar */
  .vd-card-logo{width:38px;height:38px;font-size:.9rem}
  .vd-card-name{font-size:.86rem}

  /* Recent panels — header row stacks if needed */
  .cli-rec-head{flex-wrap:wrap;gap:8px}
  .cli-rec-viewall{font-size:.55rem;padding:4px 8px}
}

/* ── Notification dot — clamp inside small circles ──────────── */
@media (max-width:900px){
  .nav-notif-dot{top:4px !important;right:4px !important;width:7px !important;height:7px !important}
}

/* ════════════════════════════════════════════════════════════════
   Shared topbar/navbar icons — Status (story), Notification, Blog
   Same look on homepage navbar AND dashboard topbars.
   ════════════════════════════════════════════════════════════════ */
.nav-notif,
a.nav-notif,
.topbar-right .nav-notif,
.nav-extras .nav-notif{
  position:relative;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:40px !important;height:40px !important;
  padding:0 !important;
  background:#FFFEFA !important;
  background-image:none !important;
  border:1.5px solid rgba(44,106,84,.18) !important;
  border-radius:50% !important;
  color:#2c6a54 !important;
  text-decoration:none !important;
  flex-shrink:0;
  box-shadow:none !important;
  font-size:0;line-height:0;
  text-align:center;
  cursor:pointer;
  transition:all .3s cubic-bezier(.34,1.56,.64,1) !important;
}
/* High-specificity override — keep icons perfectly centered */
.nav-extras .nav-notif,
.nav-extras .nav-blog,
.nav-extras .nav-status,
nav .nav-notif,
nav .nav-blog,
nav .nav-status{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 !important;
  line-height:1 !important;
}
.nav-notif:hover,
.topbar-right .nav-notif:hover{
  background:#2c6a54 !important;
  border-color:#c0654a !important;
  color:#FFF7F1 !important;
  transform:translateY(-2px) scale(1.08) rotate(-4deg);
  box-shadow:0 0 0 3px rgba(192,101,74,.22),0 8px 18px rgba(44,106,84,.32) !important;
}
.nav-notif i,.nav-notif svg,
.nav-notif > i,.nav-notif > svg,
.nav-notif > i.fa-regular,
.nav-notif > i.fa-solid,
.nav-notif > i[class*="fa-"]{
  line-height:1 !important;
  width:20px !important;height:20px !important;
  font-size:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  vertical-align:middle !important;
  margin:0 !important;padding:0 !important;
  position:static !important;
  flex-shrink:0;
}
.nav-notif-dot{
  position:absolute;top:6px;right:6px;width:8px;height:8px;
  background:#dc2626;border-radius:50%;
  border:1.5px solid #fffbf2;
  box-shadow:0 0 6px rgba(220,38,38,.6);
  animation:navNotifPulse 1.6s infinite;
}
@keyframes navNotifPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}

.nav-blog,
a.nav-blog,
.topbar-right .nav-blog,
.nav-extras .nav-blog{
  position:relative;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:40px !important;height:40px !important;flex-shrink:0;
  padding:0 !important;
  background:#FFFEFA !important;
  border:1.5px solid rgba(44,106,84,.18) !important;
  border-radius:50% !important;
  color:#2c6a54 !important;
  text-decoration:none !important;
  box-shadow:none !important;
  font-size:0;line-height:0;
  text-align:center;
  transition:all .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.nav-blog i,.nav-blog svg,
.nav-blog > i,.nav-blog > svg,
.nav-blog > i.fa-regular,
.nav-blog > i.fa-solid,
.nav-blog > i[class*="fa-"]{
  line-height:1 !important;
  width:20px !important;height:20px !important;
  font-size:18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  vertical-align:middle !important;
  margin:0 !important;padding:0 !important;
  position:static !important;
  flex-shrink:0;
}
.nav-blog:hover,
.topbar-right .nav-blog:hover{
  background:#2c6a54 !important;
  border-color:#c0654a !important;
  color:#FFF7F1 !important;
  transform:translateY(-2px) scale(1.08) rotate(-4deg);
  box-shadow:0 0 0 3px rgba(192,101,74,.22),0 8px 18px rgba(44,106,84,.32) !important;
}

/* Unified tooltip — works on status, notif, blog inside any topbar */
.nav-status .nav-tip,
.nav-notif .nav-tip,
.nav-blog  .nav-tip,
.gd-story-btn .nav-tip{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:#2c6a54;color:#FFF7F1;
  padding:6px 12px;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.7rem;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;
  white-space:nowrap;
  border:1px solid #c0654a;
  box-shadow:0 6px 14px rgba(44,106,84,.32),0 2px 4px rgba(0,0,0,.1);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:1100;
}
.nav-status .nav-tip::before,
.nav-notif .nav-tip::before,
.nav-blog  .nav-tip::before,
.gd-story-btn .nav-tip::before{
  content:'';position:absolute;bottom:100%;left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:#2c6a54;
}
.nav-status:hover .nav-tip,
.nav-notif:hover .nav-tip,
.nav-blog:hover  .nav-tip,
.gd-story-btn:hover .nav-tip{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.topbar-right{display:flex;align-items:center;gap:10px}

/* 3D glassy rail header icons (Live Tenders / Registered Vendors) */
/* Rail header 3D icons — flat/realistic, no glow halo */
.gd-rail-3dicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex-shrink:0;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
  position:relative;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  margin-right:10px;
}
.gd-rail-3dicon::before{display:none}
.gd-rail-3dicon svg{
  width:46px;height:46px;display:block;position:relative;z-index:1;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.1));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.gd-rail-3dicon--tender{background:transparent;border:0}
.gd-rail-3dicon--vendor{background:transparent;border:0}
.hr-header:hover .gd-rail-3dicon--tender,
.gd-rail-3dicon--tender:hover,
.vap-header:hover .gd-rail-3dicon--vendor,
.gd-rail-3dicon--vendor:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:none;
}
.hr-header:hover .gd-rail-3dicon--tender svg,
.gd-rail-3dicon--tender:hover svg,
.vap-header:hover .gd-rail-3dicon--vendor svg,
.gd-rail-3dicon--vendor:hover svg{
  transform:scale(1.06);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.22)) drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
.hr-header-left,.vap-header-left{display:flex !important;align-items:center !important;gap:0 !important}
@media (max-width:480px){
  .gd-rail-3dicon{width:38px;height:38px;border-radius:12px;margin-right:8px}
  .gd-rail-3dicon svg{width:26px;height:26px}
}

/* "Daily Updates" story icon — naked SVG, no background, no border, no box */
.gd-story-btn,
button.gd-story-btn,
button.nav-status.gd-story-btn,
.nav-extras .nav-status.gd-story-btn,
.nav-extras .gd-story-btn,
button.pn-status.gd-story-btn,
.pn-extras .pn-status.gd-story-btn,
.pn-extras .gd-story-btn{
  position:relative;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  width:auto !important;height:auto !important;
  min-width:0 !important;min-height:0 !important;
  overflow:visible !important;
  outline:none !important;
  cursor:pointer;
}
button.nav-status.gd-story-btn:focus,
button.nav-status.gd-story-btn:focus-visible,
button.pn-status.gd-story-btn:focus,
button.pn-status.gd-story-btn:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  border:0 !important;
}
.gd-story-svg{
  width:38px;height:38px;display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.gd-story-btn:hover,
button.gd-story-btn:hover,
button.nav-status.gd-story-btn:hover,
button.pn-status.gd-story-btn:hover,
.nav-extras .gd-story-btn:hover,
.pn-extras .gd-story-btn:hover{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
.gd-story-btn:hover .gd-story-svg{
  transform:rotate(-8deg) scale(1.12);
  filter:drop-shadow(0 4px 10px rgba(236,72,153,.45));
}
/* Hide the old coral status dot — the SVG already has a play badge in the same spot */
.gd-story-btn::after,
.gd-story-btn::before{display:none !important}

/* Force round nav-status / pn-status — beat any earlier square overrides */
.nav-status,
button.nav-status,
.nav-extras .nav-status,
.nav-notif,
a.nav-notif,
.nav-extras .nav-notif,
.pn-status,
button.pn-status,
.pn-extras .pn-status,
.pn-notif,
a.pn-notif,
.pn-extras .pn-notif{
  border-radius:50% !important;
}

/* GOOSEDOCK sidebar wordmark — clean two-tone */
.gd-logo-brand .gd-wm-fill{
  color:#FFFEFA !important;
  -webkit-text-fill-color:#FFFEFA !important;
}
.gd-logo-brand .gd-wm-stroke{
  color:#c0654a !important;
  -webkit-text-fill-color:#c0654a !important;
}
/* ════════════════════════════════════════════════════════════════
   Sidebar — refined section labels + Logout
   Clean coral typography with a small accent bar, no fuzzy pills.
   ════════════════════════════════════════════════════════════════ */

/* MENU / ACCOUNT eyebrows — clean cream tracker text, no pill, no rule */
.sidebar .sidebar-section-label,
.sidebar-section-label{
  display:block !important;
  width:auto !important;
  max-width:none !important;
  padding:14px 18px 6px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(239,229,208,.55) !important;
  -webkit-text-fill-color:rgba(239,229,208,.55) !important;
  -webkit-text-stroke:0 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.6rem !important;
  font-weight:800 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}

/* Sidebar-footer Logout — clean ghost button, coral on hover */
.sidebar-footer .sidebar-logout-btn,
.sidebar-footer form button[type="submit"]{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100% !important;
  padding:10px 14px !important;
  background:transparent !important;
  border:1px solid rgba(192,101,74,.28) !important;
  border-left:3px solid #c0654a !important;
  border-radius:0 !important;
  cursor:pointer;
  transition:background .22s,border-color .22s,transform .22s !important;
}
.sidebar-footer form button[type="submit"]:hover{
  background:rgba(192,101,74,.16) !important;
  border-color:#c0654a !important;
  border-left-color:#e0825e !important;
  transform:translateX(2px);
}
.sidebar-footer form button[type="submit"] span{
  display:inline-block !important;
  width:auto !important;
  max-width:none !important;
  background:transparent !important;
  padding:0 !important;
  color:#FFD9A8 !important;
  -webkit-text-fill-color:#FFD9A8 !important;
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-size:.78rem !important;
  font-weight:700 !important;
  letter-spacing:.4px !important;
  text-transform:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  transition:color .2s;
}
.sidebar-footer form button[type="submit"]:hover span{
  color:#FFFEFA !important;
  -webkit-text-fill-color:#FFFEFA !important;
}
.sidebar-footer form button[type="submit"] i,
.sidebar-footer form button[type="submit"] svg{
  color:#c0654a !important;
  stroke:#c0654a !important;
  width:16px !important;height:16px !important;
  transition:transform .22s;
}
.sidebar-footer form button[type="submit"]:hover i,
.sidebar-footer form button[type="submit"]:hover svg{
  transform:translateX(2px);
}

/* Sidebar role pill (Client Portal / Agency Portal / Vendor Portal) — pure white text */
.gd-logo-role,
.sidebar .gd-logo-role,
.sidebar-logo .gd-logo-role,
.gd-logo-text .gd-logo-role,
a.sidebar-logo .gd-logo-role{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  background:rgba(192,101,74,.22) !important;
  border-color:rgba(192,101,74,.6) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  letter-spacing:1.4px;
  font-weight:800;
}

/* Announcement bar link — white text with coral glow stroke for pop on dark green */
.ann-msg a,
.pn-ann-msg a{
  color:#FFFEFA !important;
  -webkit-text-stroke:.4px #c0654a !important;
  paint-order:stroke fill;
  text-shadow:
    0 0 6px rgba(255,255,255,.45),
    0 0 12px rgba(192,101,74,.55),
    0 1px 2px rgba(0,0,0,.4) !important;
  border-bottom-color:rgba(255,255,255,.55) !important;
}
.ann-msg a:hover,
.pn-ann-msg a:hover{
  color:#FFFEFA !important;
  border-bottom-color:#FFFEFA !important;
  text-shadow:
    0 0 8px rgba(255,255,255,.7),
    0 0 16px rgba(192,101,74,.7),
    0 1px 2px rgba(0,0,0,.4) !important;
}