/* ============================================================
   Bidnexis - Design System & Stylesheet
   Version 1.0.0 | Professional Procurement Platform
   ============================================================ */

/* ─── CSS Custom Properties ──────────────────────────────── */
:root {
  --tl-navy:        #1e1b4b;
  --tl-navy-light:  #1A3A6B;
  --tl-blue:        #1565C0;
  --tl-blue-mid:    #1976D2;
  --tl-blue-light:  #42A5F5;
  --tl-cyan:        #fbbf24;
  --tl-cyan-light:  #4DD0E1;
  --tl-amber:       #FF8F00;
  --tl-amber-light: #FFB300;
  --tl-green:       #00897B;
  --tl-green-light: #26A69A;
  --tl-red:         #E53935;
  --tl-purple:      #5E35B1;
  --tl-white:       #FFFFFF;
  --tl-gray-50:     #F8FAFC;
  --tl-gray-100:    #F1F5F9;
  --tl-gray-200:    #E2E8F0;
  --tl-gray-300:    #CBD5E1;
  --tl-gray-400:    #94A3B8;
  --tl-gray-500:    #64748B;
  --tl-gray-600:    #475569;
  --tl-gray-700:    #334155;
  --tl-gray-800:    #1E293B;
  --tl-gray-900:    #0F172A;
  --color-primary:   var(--tl-blue);
  --color-secondary: var(--tl-cyan);
  --color-accent:    var(--tl-amber);
  --color-success:   var(--tl-green);
  --color-danger:    var(--tl-red);
  --color-text:      var(--tl-gray-800);
  --color-muted:     var(--tl-gray-500);
  --color-border:    var(--tl-gray-200);
  --color-bg:        var(--tl-gray-50);
  --color-card:      var(--tl-white);
  --gradient-hero:   linear-gradient(135deg, #1e1b4b 0%, #1565C0 60%, #fbbf24 100%);
  --gradient-brand:  linear-gradient(135deg, #1565C0 0%, #fbbf24 100%);
  --gradient-amber:  linear-gradient(135deg, #FF8F00 0%, #FF6F00 100%);
  --gradient-dark:   linear-gradient(135deg, #1e1b4b 0%, #0F172A 100%);
  --font-heading:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Inter', 'Segoe UI', system-ui, sans-serif;
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full:9999px;
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.10),0 4px 16px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.12),0 8px 24px rgba(0,0,0,0.08);
  --shadow-blue:0 8px 30px rgba(21,101,192,0.25);
  --transition-fast:  0.15s ease;
  --transition-normal:0.25s ease;
  --z-dropdown:1000; --z-sticky:1020; --z-fixed:1030; --z-modal:1050; --z-toast:1070;
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html, body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100%;
  background-color: var(--color-bg);
}
html{scroll-behavior:smooth;font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:.9375rem;line-height:1.65;color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Form fields: always typeable, always clickable — no CSS restriction */
input,textarea,select,button,label{pointer-events:auto !important}
input[type="checkbox"],input[type="radio"]{cursor:pointer}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25;color:var(--tl-gray-900);margin-bottom:.5em}
h1{font-size:clamp(1.875rem,4vw,2.75rem)}
h2{font-size:clamp(1.5rem,3vw,2.125rem)}
h3{font-size:clamp(1.25rem,2.5vw,1.625rem)}
h4{font-size:1.25rem} h5{font-size:1.0625rem} h6{font-size:.9375rem}
a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--tl-navy);text-decoration:none}
img{max-width:100%;height:auto}
p{margin-bottom:1rem}

/* ─── Navbar ─────────────────────────────────────────────── */
.tl-navbar{background:rgba(11,29,63,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);padding:0;margin:0;position:fixed;top:0;left:0;right:0;width:100%;z-index:1030;transition:background var(--transition-normal)}
body{padding-top:80px}
/* Admin pages have their own layout — no public navbar offset needed */
.tl-admin-body{padding-top:0}
.tl-navbar .navbar-brand{display:flex;align-items:center;gap:.875rem;padding:.625rem 0}
.brand-logo{width:36px;height:36px;background:var(--gradient-brand);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;color:white;font-family:var(--font-heading);box-shadow:var(--shadow-blue);flex-shrink:0}
.brand-text{font-family:var(--font-heading);font-size:1.375rem;font-weight:800;color:white;letter-spacing:-.5px}
.brand-text span{color:var(--tl-cyan)}
/* Logo image — navbar */
.navbar-logo-img{height:44px;width:auto;max-width:180px;object-fit:contain;display:block;filter:brightness(0) invert(1)}
/* Logo image — footer (on dark bg) */
.footer-logo-img{height:40px;width:auto;max-width:180px;object-fit:contain;display:block;filter:brightness(0) invert(1);margin-bottom:.5rem}
@media(max-width:575.98px){
  .navbar-logo-img{height:36px}
  .footer-logo-img{height:32px}
}
.tl-navbar .nav-link{color:rgba(255,255,255,.80)!important;font-size:.875rem;font-weight:500;padding:.75rem .875rem!important;transition:color var(--transition-fast);position:relative;white-space:nowrap}
.tl-navbar .nav-link:hover,.tl-navbar .nav-link.active{color:white!important}
.tl-navbar .nav-link.active::after{content:'';position:absolute;bottom:0;left:.875rem;right:.875rem;height:2px;background:var(--gradient-brand);border-radius:2px 2px 0 0}
.tl-navbar .dropdown-menu{background:white;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:.5rem;min-width:200px;margin-top:.25rem;animation:dropIn .15s ease;z-index:var(--z-fixed)}
@keyframes dropIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.tl-navbar .dropdown-item{border-radius:var(--radius-sm);padding:.5rem .875rem;font-size:.875rem;color:var(--color-text);transition:all var(--transition-fast)}
.tl-navbar .dropdown-item:hover{background:var(--tl-gray-100);color:var(--color-primary)}
.navbar-btn-outline{border:1.5px solid rgba(255,255,255,.4)!important;color:white!important;border-radius:var(--radius-full)!important;padding:.4rem 1.125rem!important;font-size:.8125rem!important;transition:all var(--transition-fast)!important}
.navbar-btn-outline:hover{border-color:white!important;background:rgba(255,255,255,.1)!important}
.navbar-btn-primary{background:var(--gradient-brand)!important;color:white!important;border:none!important;border-radius:var(--radius-full)!important;padding:.4rem 1.25rem!important;font-size:.8125rem!important;font-weight:600!important;box-shadow:var(--shadow-blue)}
.navbar-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(21,101,192,.4)!important}
.navbar-toggler{border:1.5px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);padding:.375rem .5rem;color:white}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")}

/* ─── Hero ───────────────────────────────────────────────── */
.hero-section{background:var(--gradient-hero);position:relative;overflow:hidden;padding:5rem 0 6rem;min-height:86vh;display:flex;align-items:center}
.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(0,172,193,.12) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(21,101,192,.15) 0%,transparent 50%)}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(0,172,193,.18);border:1px solid rgba(0,172,193,.35);color:var(--tl-cyan-light);border-radius:var(--radius-full);padding:.375rem .875rem;font-size:.8125rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1.25rem}
.hero-title{font-size:clamp(2.25rem,5vw,3.5rem);font-weight:800;color:white;line-height:1.15;margin-bottom:1.25rem;letter-spacing:-1px}
.hero-title .highlight{background:linear-gradient(135deg,var(--tl-cyan-light),var(--tl-amber-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-subtitle{font-size:1.125rem;color:rgba(255,255,255,.72);line-height:1.7;margin-bottom:2rem;max-width:560px}
.hero-search-box{background:white;border-radius:var(--radius-xl);padding:.375rem;box-shadow:var(--shadow-xl);display:flex;gap:.375rem;max-width:620px}
.hero-search-box input{border:none;background:transparent;padding:.75rem 1rem;font-size:.9375rem;flex:1;color:var(--color-text);outline:none;font-family:var(--font-body)}
.hero-search-box input::placeholder{color:var(--tl-gray-400)}
.hero-search-btn{background:var(--gradient-brand);color:white;border:none;border-radius:var(--radius-lg);padding:.75rem 1.5rem;font-weight:600;font-size:.9375rem;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}
.hero-search-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-blue)}
.hero-stats{display:flex;gap:2rem;margin-top:2.5rem;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column}
.hero-stat-number{font-size:1.625rem;font-weight:800;color:white;font-family:var(--font-heading);line-height:1}
.hero-stat-label{font-size:.8125rem;color:rgba(255,255,255,.55);margin-top:.125rem}
.hero-card{background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);padding:1.25rem 1.5rem;color:white;transition:transform var(--transition-normal)}
.hero-card:hover{transform:translateY(-4px)}
.hero-floating-card{position:absolute;background:white;border-radius:var(--radius-lg);padding:.875rem 1rem;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:.625rem;font-size:.8125rem;font-weight:600;color:var(--color-text);white-space:nowrap;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ─── Sections ───────────────────────────────────────────── */
.section{padding:5rem 0}
.section-sm{padding:3rem 0}
.section-lg{padding:7rem 0}
.section-header{text-align:center;margin-bottom:3.5rem}
.section-tag{display:inline-flex;align-items:center;gap:.375rem;background:rgba(21,101,192,.08);color:var(--tl-blue);border-radius:var(--radius-full);padding:.3rem .875rem;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.875rem}
.section-header h2{font-size:clamp(1.625rem,3.5vw,2.25rem);margin-bottom:.875rem}
.section-header p{color:var(--color-muted);max-width:580px;margin:0 auto;font-size:1.0625rem;line-height:1.7}

/* ─── Cards ──────────────────────────────────────────────── */
.tl-card{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal);overflow:clip;position:relative}
.tl-card:hover{border-color:var(--tl-gray-300);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tl-card-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between}
.tl-card-body{padding:1.5rem}

/* ─── Tender Card ────────────────────────────────────────── */
.tender-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;transition:all var(--transition-normal);display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}
.tender-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gradient-brand);opacity:0;transition:opacity var(--transition-fast)}
.tender-card:hover{border-color:var(--tl-blue-light);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tender-card:hover::before{opacity:1}
.tender-card.sponsored{border-color:var(--tl-amber);background:linear-gradient(to right,#FFFDE7,white)}
.tender-card.sponsored::before{background:var(--gradient-amber);opacity:1}
.tender-card-company{display:flex;align-items:center;gap:.625rem}
.company-logo-sm{width:36px;height:36px;border-radius:var(--radius-sm);object-fit:contain;border:1px solid var(--color-border);background:var(--tl-gray-100);padding:2px;flex-shrink:0}
.company-logo-placeholder{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--gradient-brand);display:flex;align-items:center;justify-content:center;color:white;font-size:.875rem;font-weight:700;flex-shrink:0}
.tender-company-name{font-size:.8125rem;color:var(--tl-blue);font-weight:600}
.tender-card-title{font-size:.9375rem;font-weight:700;color:var(--tl-gray-900);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tender-card-title a{color:inherit;transition:color var(--transition-fast)}
.tender-card-title a:hover{color:var(--tl-blue)}
.tender-card-meta{display:flex;flex-wrap:wrap;gap:.625rem;font-size:.8125rem;color:var(--color-muted)}
.tender-meta-item{display:flex;align-items:center;gap:.3rem}
.tender-meta-item i{color:var(--tl-gray-400);font-size:.75rem}
.tender-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:.625rem;border-top:1px solid var(--tl-gray-100)}
.tender-deadline{font-size:.8125rem;font-weight:600}
.tender-deadline.urgent{color:var(--tl-red)}
.tender-deadline.soon{color:var(--tl-amber)}
.tender-deadline.normal{color:var(--tl-green)}

/* ─── Badges ─────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.3em .75em;border-radius:var(--radius-full);font-size:.72rem;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.01em}
.badge-lg{padding:.4em 1em;font-size:.8rem}
.badge-primary{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.badge-secondary{background:#cffafe;color:#0e7490;border:1px solid #a5f3fc}
.badge-success{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.badge-danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.badge-warning{background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.badge-dark{background:#1e293b;color:#f1f5f9}
.badge-light{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
.badge-amber{background:#fbbf24;color:#1c1917}
.badge-sponsored{background:linear-gradient(135deg,#f59e0b,#d97706);color:white}
.badge-ai{background:linear-gradient(135deg,#7B1FA2,#5E35B1);color:white}
.badge-sector{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.badge-country{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.status-open{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}
.status-closed{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.status-awarded{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.status-cancelled{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.status-addendum{background:#fef9c3;color:#854d0e;border:1px solid #fde68a}
.status-draft{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}

/* ─── Buttons ────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5625rem 1.25rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:600;font-family:var(--font-body);line-height:1.5;cursor:pointer;transition:all var(--transition-fast);border:1.5px solid transparent;text-decoration:none;white-space:nowrap;user-select:none}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-primary{background:var(--gradient-brand);color:white;box-shadow:0 2px 8px rgba(21,101,192,.25)}
.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-blue);color:white}
.btn-secondary{background:var(--tl-cyan);color:white}
.btn-secondary:hover:not(:disabled){background:var(--tl-cyan-light);color:white;transform:translateY(-1px)}
.btn-outline-primary{background:transparent;color:var(--tl-blue);border-color:var(--tl-blue)}
.btn-outline-primary:hover:not(:disabled){background:var(--tl-blue);color:white}
.btn-outline-secondary{background:transparent;color:var(--tl-gray-600);border-color:var(--color-border)}
.btn-outline-secondary:hover:not(:disabled){background:var(--tl-gray-100);color:var(--color-text);border-color:var(--tl-gray-300)}
.btn-danger{background:var(--tl-red);color:white}
.btn-danger:hover:not(:disabled){background:#C62828;color:white}
.btn-amber{background:var(--gradient-amber);color:white;box-shadow:0 2px 8px rgba(255,143,0,.25)}
.btn-amber:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,143,0,.35);color:white}
.btn-ai{background:linear-gradient(135deg,#7B1FA2,#1565C0);color:white;box-shadow:0 2px 8px rgba(123,31,162,.25)}
.btn-ai:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(123,31,162,.35);color:white}
.btn-light{background:var(--tl-gray-100);color:var(--color-text)}
.btn-light:hover:not(:disabled){background:var(--tl-gray-200);color:var(--color-text)}
.btn-white{background:white;color:var(--tl-navy);box-shadow:var(--shadow-sm)}
.btn-white:hover:not(:disabled){background:var(--tl-gray-100);color:var(--tl-navy);transform:translateY(-1px)}
.btn-sm{padding:.375rem .875rem;font-size:.8125rem}
.btn-lg{padding:.75rem 1.875rem;font-size:1rem;border-radius:var(--radius-lg)}
.btn-xl{padding:1rem 2.25rem;font-size:1.0625rem;border-radius:var(--radius-lg)}
.btn-pill{border-radius:var(--radius-full)!important}
.btn-block{width:100%}
.btn-icon{padding:.5625rem;aspect-ratio:1}
.btn.loading{pointer-events:none;opacity:.75}
.btn.loading::after{content:'';display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Forms ──────────────────────────────────────────────── */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--tl-gray-700);margin-bottom:.4rem}
.form-label .required{color:var(--tl-red);margin-left:.125rem}
.form-control,.form-select{display:block;width:100%;padding:.625rem .875rem;font-size:.9375rem;font-family:var(--font-body);line-height:1.5;color:var(--color-text);background:white;border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);outline:none;appearance:none}
.form-control:focus,.form-select:focus{border-color:var(--tl-blue);box-shadow:0 0 0 3px rgba(21,101,192,.12)}
.form-control::placeholder{color:var(--tl-gray-400)}
.form-control.is-invalid{border-color:var(--tl-red)}
.form-control.is-valid{border-color:var(--tl-green)}
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2394A3B8' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;padding-right:2.25rem}
textarea.form-control{resize:vertical;min-height:100px}
.form-text{font-size:.8125rem;color:var(--color-muted);margin-top:.25rem}
.invalid-feedback{font-size:.8125rem;color:var(--tl-red);margin-top:.25rem;display:none}
.form-control.is-invalid~.invalid-feedback{display:block}
.input-group{position:relative;display:flex;align-items:stretch}
.input-group .form-control{flex:1;min-width:0}
.input-group .input-group-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--tl-gray-400);pointer-events:none;z-index:2;font-size:.9rem}
.input-group.has-icon .form-control{padding-left:2.5rem}
.search-bar{background:white;border:1.5px solid var(--color-border);border-radius:var(--radius-xl);display:flex;align-items:center;padding:0 .375rem 0 1.125rem;box-shadow:var(--shadow-sm);transition:all var(--transition-fast)}
.search-bar:focus-within{border-color:var(--tl-blue);box-shadow:0 0 0 3px rgba(21,101,192,.10),var(--shadow-sm)}
.search-bar input{border:none;background:transparent;padding:.625rem .5rem;flex:1;outline:none;font-family:var(--font-body);font-size:.9375rem;color:var(--color-text)}
.search-bar input::placeholder{color:var(--tl-gray-400)}

/* ─── Feature Cards ──────────────────────────────────────── */
.feature-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:2rem;text-align:center;transition:all var(--transition-normal);position:relative;overflow:hidden}
.feature-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--gradient-brand);transform:scaleX(0);transition:transform var(--transition-normal)}
.feature-card:hover{border-color:var(--tl-blue-light);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.feature-card:hover::after{transform:scaleX(1)}
.feature-icon{width:64px;height:64px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto 1.25rem;transition:transform var(--transition-normal)}
.feature-card:hover .feature-icon{transform:scale(1.1) rotate(5deg)}
.feature-icon-blue{background:rgba(21,101,192,.10);color:var(--tl-blue)}
.feature-icon-cyan{background:rgba(0,172,193,.10);color:var(--tl-cyan)}
.feature-icon-amber{background:rgba(255,143,0,.10);color:var(--tl-amber)}
.feature-icon-green{background:rgba(0,137,123,.10);color:var(--tl-green)}
.feature-icon-purple{background:rgba(94,53,177,.10);color:var(--tl-purple)}
.feature-icon-red{background:rgba(229,57,53,.10);color:var(--tl-red)}
.feature-card h4{font-size:1.0625rem;margin-bottom:.625rem}
.feature-card p{font-size:.875rem;color:var(--color-muted);line-height:1.65;margin:0}

/* ─── Stats ──────────────────────────────────────────────── */
.stats-section{background:var(--gradient-dark);padding:4rem 0}
.stat-item{text-align:center;padding:1.5rem}
.stat-number{font-family:var(--font-heading);font-size:clamp(2rem,4vw,3rem);font-weight:800;color:white;line-height:1;margin-bottom:.375rem}
.stat-number span{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-label{font-size:.875rem;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:1px;font-weight:500}

/* ─── AI Section ─────────────────────────────────────────── */
.ai-section{background:linear-gradient(135deg,#1e1b4b 0%,#1a237e 100%);position:relative;overflow:hidden;padding:5rem 0}
.ai-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(94,53,177,.25) 0%,transparent 65%)}
.ai-badge{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg,rgba(123,31,162,.3),rgba(94,53,177,.3));border:1px solid rgba(123,31,162,.4);color:#CE93D8;border-radius:var(--radius-full);padding:.375rem .875rem;font-size:.8125rem;font-weight:600;margin-bottom:1.25rem}
.ai-feature-list{list-style:none;padding:0;margin:0}
.ai-feature-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;color:rgba(255,255,255,.85);font-size:.9375rem;border-bottom:1px solid rgba(255,255,255,.06)}
.ai-feature-list li:last-child{border-bottom:none}
.ai-feature-list li i{color:var(--tl-cyan);font-size:1rem;margin-top:.1rem;flex-shrink:0}
.ai-demo-card{background:rgba(255,255,255,.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-xl);padding:1.5rem;color:white}
.ai-demo-header{display:flex;align-items:center;gap:.625rem;margin-bottom:1.25rem;padding-bottom:.875rem;border-bottom:1px solid rgba(255,255,255,.08)}
.ai-dot{width:10px;height:10px;border-radius:50%}
.ai-dot-red{background:#FF6B6B}.ai-dot-yellow{background:#FFD93D}.ai-dot-green{background:#6BCB77}
.ai-chat-bubble{border-radius:var(--radius-lg);padding:.75rem 1rem;margin-bottom:.75rem;font-size:.875rem;line-height:1.6}
.ai-chat-user{background:rgba(21,101,192,.25);color:rgba(255,255,255,.9);margin-left:2rem}
.ai-chat-ai{background:rgba(94,53,177,.25);color:rgba(255,255,255,.85);margin-right:2rem;border:1px solid rgba(94,53,177,.3)}
.ai-typing{display:inline-flex;gap:4px;align-items:center;padding:.5rem .875rem}
.ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--tl-cyan);display:inline-block;animation:typing 1.2s ease-in-out infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ─── Pricing ────────────────────────────────────────────── */
.pricing-card{background:white;border:2px solid var(--color-border);border-radius:var(--radius-xl);padding:2rem;position:relative;transition:all var(--transition-normal)}
.pricing-card:hover{border-color:var(--tl-blue-light);box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pricing-card.popular{border-color:var(--tl-blue);box-shadow:var(--shadow-blue)}
.pricing-popular-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gradient-brand);color:white;border-radius:var(--radius-full);padding:.25rem 1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.pricing-name{font-size:1.0625rem;font-weight:700;color:var(--tl-gray-700);margin-bottom:.25rem}
.pricing-price{font-family:var(--font-heading);font-size:2.75rem;font-weight:800;color:var(--tl-gray-900);line-height:1;margin:.75rem 0}
.pricing-price sup{font-size:1.25rem;vertical-align:super;font-weight:600}
.pricing-price .period{font-size:.875rem;font-weight:500;color:var(--color-muted)}
.pricing-desc{font-size:.875rem;color:var(--color-muted);margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--color-border)}
.pricing-features{list-style:none;padding:0;margin:0 0 1.75rem}
.pricing-features li{display:flex;align-items:center;gap:.625rem;padding:.4rem 0;font-size:.875rem;color:var(--tl-gray-700)}
.pricing-features li i.fa-check{color:var(--tl-green);font-size:.8125rem}
.pricing-features li i.fa-times{color:var(--tl-gray-300);font-size:.8125rem}

/* ─── Testimonials ───────────────────────────────────────── */
.testimonial-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.75rem;transition:all var(--transition-normal)}
.testimonial-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.testimonial-quote{font-size:.9375rem;color:var(--tl-gray-700);line-height:1.7;margin-bottom:1.25rem;position:relative}
.testimonial-quote::before{content:'"';font-size:3rem;font-family:var(--font-heading);color:var(--tl-blue);line-height:.5;display:block;margin-bottom:.5rem;opacity:.4}
.testimonial-author{display:flex;align-items:center;gap:.75rem}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--tl-gray-100)}
.testimonial-name{font-weight:700;font-size:.9375rem;color:var(--tl-gray-900);line-height:1.2}
.testimonial-title{font-size:.8125rem;color:var(--color-muted)}

/* ─── Vendor Card ────────────────────────────────────────── */
.vendor-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);position:relative}
.vendor-card:hover{border-color:var(--tl-gray-300);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.vendor-card-cover{height:80px;background:var(--gradient-brand);position:relative}
.vendor-card-logo{position:absolute;bottom:-24px;left:1.25rem;width:56px;height:56px;border-radius:var(--radius-md);border:3px solid white;background:white;object-fit:contain;padding:4px;box-shadow:var(--shadow-sm)}
.vendor-card-body{padding:2rem 1.25rem 1.25rem}
.vendor-card-name{font-size:1rem;font-weight:700;color:var(--tl-gray-900);margin-bottom:.125rem;display:flex;align-items:center;gap:.375rem}
.verified-icon{color:var(--tl-blue);font-size:.875rem}

/* ─── Dashboard ──────────────────────────────────────────── */
.dashboard-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  grid-template-areas: "sidebar main";
  min-height:100vh;
}
.dashboard-sidebar{grid-area:sidebar;background:var(--tl-navy);color:white;display:flex;flex-direction:column;position:sticky;top:var(--navbar-h,62px);height:calc(100vh - var(--navbar-h,62px));overflow-y:auto}
.dashboard-sidebar::-webkit-scrollbar{width:4px}
.dashboard-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:2px}
.sidebar-logo{padding:1.5rem 1.5rem 1rem;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar-nav{padding:1rem .75rem;flex:1}
.sidebar-section-title{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.35);padding:.875rem .75rem .375rem}
.sidebar-nav-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;border-radius:var(--radius-md);color:rgba(255,255,255,.65);font-size:.875rem;font-weight:500;transition:all var(--transition-fast);text-decoration:none;margin-bottom:2px}
.sidebar-nav-item i{width:18px;text-align:center;font-size:.9375rem;flex-shrink:0}
.sidebar-nav-item:hover{background:rgba(255,255,255,.08);color:white}
.sidebar-nav-item.active{background:rgba(21,101,192,.3);color:white;border-left:3px solid var(--tl-cyan);padding-left:calc(.75rem - 3px)}
.sidebar-badge{margin-left:auto;background:var(--tl-red);color:white;border-radius:var(--radius-full);font-size:.6875rem;font-weight:700;padding:.125rem .4rem;min-width:18px;text-align:center}
.sidebar-footer{padding:1rem .75rem;border-top:1px solid rgba(255,255,255,.06)}
.dashboard-main{grid-area:main;background:var(--tl-gray-50);overflow-y:auto}
.py-4{margin-top:40px}
.col-lg-3.col-md-4{margin-top:45px}
.dashboard-topbar{background:white;border-bottom:1px solid var(--color-border);padding:.875rem 1.75rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:var(--navbar-h,62px);z-index:10;box-shadow:var(--shadow-xs)}
.dashboard-content{padding:1.75rem}
.dashboard-page-header{margin-bottom:1.75rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.dashboard-page-title{font-size:1.5rem;font-weight:800;color:var(--tl-gray-900);margin:0}
.dashboard-page-subtitle{font-size:.875rem;color:var(--color-muted);margin-top:.25rem}
.metric-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;transition:all var(--transition-normal);position:relative;overflow:hidden}
.metric-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.metric-card-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1rem}
.metric-value{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--tl-gray-900);line-height:1}
.metric-label{font-size:.8125rem;color:var(--color-muted);margin-top:.25rem}
.metric-trend{font-size:.8125rem;font-weight:600;display:flex;align-items:center;gap:.25rem;margin-top:.5rem}
.metric-trend.up{color:var(--tl-green)}.metric-trend.down{color:var(--tl-red)}
/* Aliases used by dashboard.php */
.metric-icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:.75rem}
.metric-link{display:block;font-size:.8125rem;color:var(--tl-blue);font-weight:500;margin-top:.625rem;text-decoration:none}
.metric-link:hover{text-decoration:underline}
/* Aliases used by dashboard-sidebar.php */
.sidebar-section-label{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.35);padding:.875rem .75rem .375rem}

/* ─── Bid Workspace ──────────────────────────────────────── */
.workspace-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.workspace-column{background:var(--tl-gray-100);border-radius:var(--radius-lg);padding:1rem;min-height:400px}
.workspace-column-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.875rem;padding-bottom:.75rem;border-bottom:1px solid var(--tl-gray-200)}
.workspace-column-title{font-size:.875rem;font-weight:700;color:var(--tl-gray-700);display:flex;align-items:center;gap:.5rem}
.workspace-card{background:white;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.875rem 1rem;margin-bottom:.625rem;transition:all var(--transition-fast);cursor:pointer}
.workspace-card:hover{border-color:var(--tl-blue-light);box-shadow:var(--shadow-sm)}

/* ─── Progress ───────────────────────────────────────────── */
.tl-progress{height:6px;background:var(--tl-gray-200);border-radius:var(--radius-full);overflow:hidden}
.tl-progress-bar{height:100%;background:var(--gradient-brand);border-radius:var(--radius-full);transition:width .6s ease}
.tl-progress-bar.success{background:var(--tl-green)}
.tl-progress-bar.warning{background:var(--tl-amber)}
.tl-progress-bar.danger{background:var(--tl-red)}

/* ─── Tables ─────────────────────────────────────────────── */
.tl-table{width:100%;border-collapse:collapse;font-size:.875rem}
.tl-table th{background:var(--tl-gray-50);color:var(--tl-gray-600);font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.5px;padding:.75rem 1rem;border-bottom:2px solid var(--color-border);text-align:left;white-space:nowrap}
.tl-table td{padding:.875rem 1rem;border-bottom:1px solid var(--tl-gray-100);color:var(--color-text);vertical-align:middle}
.tl-table tbody tr:last-child td{border-bottom:none}
.tl-table tbody tr:hover td{background:var(--tl-gray-50)}

/* ─── Alerts ─────────────────────────────────────────────── */
.alert{padding:.875rem 1rem;border-radius:var(--radius-md);border:1px solid;font-size:.875rem;display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1rem}
.alert i{margin-top:.125rem;flex-shrink:0}
.alert-info{background:rgba(0,172,193,.08);border-color:rgba(0,172,193,.25);color:#006064}
.alert-success{background:rgba(0,137,123,.08);border-color:rgba(0,137,123,.25);color:#004D40}
.alert-warning{background:rgba(255,143,0,.10);border-color:rgba(255,143,0,.30);color:#E65100}
.alert-danger{background:rgba(229,57,53,.08);border-color:rgba(229,57,53,.25);color:#B71C1C}
.alert-ai{background:rgba(94,53,177,.08);border-color:rgba(94,53,177,.25);color:#4527A0}

/* ─── Pagination ─────────────────────────────────────────── */
.pagination{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.page-item .page-link{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--tl-gray-600);font-size:.875rem;font-weight:500;transition:all var(--transition-fast);text-decoration:none}
.page-item .page-link:hover{background:var(--tl-gray-100);border-color:var(--tl-gray-300)}
.page-item.active .page-link{background:var(--gradient-brand);border-color:transparent;color:white;box-shadow:var(--shadow-blue)}
.page-item.disabled .page-link{opacity:.4;cursor:not-allowed}

/* ─── Empty States ───────────────────────────────────────── */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-state-icon{width:80px;height:80px;border-radius:50%;background:var(--tl-gray-100);display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;color:var(--tl-gray-400)}
.empty-state h4{font-size:1.125rem;color:var(--tl-gray-800);margin-bottom:.5rem}
.empty-state p{color:var(--color-muted);font-size:.9375rem;max-width:360px;margin:0 auto 1.5rem}

/* ─── Toasts ─────────────────────────────────────────────── */
.toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:var(--z-toast);display:flex;flex-direction:column;gap:.625rem;pointer-events:none}
.tl-toast{background:var(--tl-gray-900);color:white;border-radius:var(--radius-lg);padding:.875rem 1.125rem;box-shadow:var(--shadow-xl);display:flex;align-items:center;gap:.625rem;min-width:280px;max-width:380px;pointer-events:all;animation:slideInRight .3s ease;font-size:.875rem}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.tl-toast.success{background:var(--tl-green)}.tl-toast.error{background:var(--tl-red)}.tl-toast.warning{background:var(--tl-amber);color:var(--tl-gray-900)}

/* ─── Footer ─────────────────────────────────────────────── */
.tl-footer{background:var(--tl-gray-900);color:rgba(255,255,255,.65);padding:4rem 0 0}
.footer-brand .brand-text{font-size:1.5rem;font-weight:800;color:white;font-family:var(--font-heading)}
.footer-brand .brand-text span{color:var(--tl-cyan)}
.footer-tagline{font-size:.875rem;color:rgba(255,255,255,.45);margin-top:.25rem}
.footer-desc{font-size:.875rem;line-height:1.7;margin-top:1rem;color:rgba(255,255,255,.55);max-width:300px}
.footer-heading{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:white;margin-bottom:1.125rem}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{font-size:.875rem;color:rgba(255,255,255,.55);transition:color var(--transition-fast)}
.footer-links a:hover{color:white}
.footer-social{display:flex;gap:.625rem;margin-top:1.25rem}
.footer-social a{width:36px;height:36px;border-radius:var(--radius-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:.875rem;transition:all var(--transition-fast)}
.footer-social a:hover{background:var(--gradient-brand);border-color:transparent;color:white;transform:translateY(-2px)}
.footer-bottom{padding:1.25rem 0;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;font-size:.8125rem;color:rgba(255,255,255,.4)}
.footer-bottom a{color:rgba(255,255,255,.5);transition:color var(--transition-fast)}
.footer-bottom a:hover{color:white}

/* ─── Page Banner ────────────────────────────────────────── */
.page-banner{background:var(--gradient-hero);padding:3.5rem 0 2.5rem;margin-top:.5rem;position:relative;overflow:hidden}
.page-banner::before{content:'';position:absolute;inset:0;z-index:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
/* Banner content always above the decorative overlay */
.page-banner .container{position:relative;z-index:1}
.page-banner form,.page-banner input,.page-banner select,.page-banner textarea,.page-banner button{position:relative;z-index:2;pointer-events:auto}
/* Flag stripe bar at bottom of banner */
.page-banner::after{content:'';position:absolute;bottom:0;left:0;right:0;height:5px;background:linear-gradient(to right,var(--tl-stripe1) 33.3%,var(--tl-stripe2) 33.3% 66.6%,var(--tl-stripe3) 66.6%);opacity:.9;pointer-events:none}
.page-banner h1,.banner-title{color:white;font-size:clamp(1.625rem,3vw,2.25rem);margin-bottom:.5rem}
.page-banner p,.banner-subtitle{color:rgba(255,255,255,.8);font-size:1rem;margin:0}

/* ─── Misc Utilities ─────────────────────────────────────── */
.text-gradient{background:var(--gradient-brand);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-amber{background:var(--gradient-amber);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bg-navy{background:var(--tl-navy)}
.hover-lift{transition:transform var(--transition-normal),box-shadow var(--transition-normal)}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.divider-text{display:flex;align-items:center;gap:1rem;color:var(--color-muted);font-size:.8125rem}
.divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:var(--color-border)}
.scroll-top-btn{position:fixed;bottom:96px;right:24px;width:38px;height:38px;border-radius:var(--radius-full);background:var(--gradient-brand);color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-blue);opacity:0;transform:translateY(10px);transition:all var(--transition-normal);z-index:999;font-size:.9rem}
.scroll-top-btn.visible{opacity:1;transform:translateY(0)}
.scroll-top-btn:hover{transform:translateY(-3px)}
.tl-breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--color-muted);flex-wrap:wrap}
.tl-breadcrumb a{color:var(--tl-blue);transition:color var(--transition-fast)}
.tl-breadcrumb a:hover{color:var(--tl-navy)}
.tl-breadcrumb .current{color:var(--color-text);font-weight:500}
.tl-tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border);overflow-x:auto;scrollbar-width:none}
.tl-tabs::-webkit-scrollbar{display:none}
.tl-tab{padding:.75rem 1.25rem;font-size:.875rem;font-weight:600;color:var(--color-muted);border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;text-decoration:none;display:flex;align-items:center;gap:.375rem}
.tl-tab:hover{color:var(--color-text)}
.tl-tab.active{color:var(--tl-blue);border-bottom-color:var(--tl-blue)}
.skeleton{background:linear-gradient(90deg,var(--tl-gray-200) 25%,var(--tl-gray-100) 50%,var(--tl-gray-200) 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:var(--radius-sm)}
@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
.country-pill{display:inline-flex;align-items:center;gap:.25rem;background:var(--tl-gray-100);border-radius:var(--radius-full);padding:.2rem .625rem;font-size:.75rem;font-weight:500;color:var(--tl-gray-700)}

/* ─── Responsive ─────────────────────────────────────────── */
@media(max-width:991.98px){
  .dashboard-layout{grid-template-columns:1fr}
  .dashboard-sidebar{position:fixed;left:-280px;top:0;width:260px;z-index:var(--z-fixed);transition:left var(--transition-normal);box-shadow:var(--shadow-xl)}
  .dashboard-sidebar.open,.dashboard-sidebar.sidebar-open{left:0}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:calc(var(--z-fixed) - 1)}
  .sidebar-overlay.visible{display:block}
  .hero-section{padding:3rem 0 4rem;min-height:auto;text-align:center}
  .hero-subtitle,.hero-search-box{margin:0 auto}
  .hero-stats{justify-content:center}
  .hero-visual{display:none}
}
@media(max-width:767.98px){
  .section{padding:3.5rem 0}
  .dashboard-content{padding:1rem}
  .footer-bottom{flex-direction:column;text-align:center}
}
@media(max-width:575.98px){
  h1{font-size:1.875rem} h2{font-size:1.5rem}
  .hero-stats{gap:1.25rem}
  .toast-container{left:1rem;right:1rem;bottom:1rem}
  .tl-toast{min-width:auto;max-width:100%}
}
/* Print-only header: hidden on screen, shown only when printing */
#tender-print-header{display:none}
@media print{
  /* ── Global ─────────────────────────────────────────────────────────────── */
  .tl-navbar,.tl-footer,.scroll-top-btn,.toast-container{display:none!important}
  body{background:white;font-size:11pt}
  a{color:#000;text-decoration:none}

  /* ── Tender details layout ───────────────────────────────────────────────── */
  /* Hide sidebar and elements that serve no purpose in a printed document */
  .no-print{display:none!important}

  /* Make the main content column fill the full page width */
  .col-lg-8{flex:0 0 100%!important;max-width:100%!important;width:100%!important}

  /* Show the print-only header (hidden on screen) */
  #tender-print-header{display:block!important}

  /* Hide screen-only sections inside the main column */
  #adminUploadCard,#matchBtn,.btn-ai,
  .tl-breadcrumb,[data-bs-toggle="modal"]{display:none!important}

  /* Clean card styling for print */
  .tl-card{box-shadow:none!important;border:1px solid #d1d5db!important;break-inside:avoid;margin-bottom:14pt!important}
  .tl-card-header{background:#f8fafc!important;color:#0f172a!important;border-bottom:1px solid #e5e7eb!important}
  .tl-card-header h5,.tl-card-header h6{color:#0f172a!important}

  /* Procurement table in print */
  .tl-data-table thead tr{background:#1d4ed8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tl-data-table tbody tr:nth-child(even){background:#f8faff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Lot cards */
  .lot-item-card{break-inside:avoid;border:1px solid #e5e7eb!important;box-shadow:none!important}

  /* Page setup */
  @page{margin:15mm 15mm 15mm 15mm}
}

/* ============================================================
   Country Theme System
   ============================================================ */
:root {
  --tl-primary:      #1e1b4b;
  --tl-primary-dark: #06122a;
  --tl-accent:       #1565C0;
  --tl-accent2:      #fbbf24;
  --tl-hero-grad:    linear-gradient(150deg,#1e1b4b 0%,#1565C0 60%,#fbbf24 100%);
  --tl-nav-bg:       #1e1b4b;
  --tl-badge-bg:     #1565C0;
}

/* Country switcher button */
.btn-country-switch {
  background: rgba(255,255,255,.12) !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
  color: white !important;
  border-radius: var(--radius-full) !important;
  padding: .35rem .875rem !important;
  font-size: .8125rem !important;
  transition: all var(--transition-fast) !important;
  white-space: nowrap;
}
.btn-country-switch:hover {
  background: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.5) !important;
}
.btn-country-switch img {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  flex-shrink: 0;
}
.country-switcher-menu .dropdown-item img {
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  flex-shrink: 0;
}
.country-switcher-menu .dropdown-item.active {
  background: rgba(21,101,192,.08);
  color: var(--tl-primary);
  font-weight: 600;
}
.navbar-country-switcher { order: 1; }

/* Country flag badge on tender cards */
.tender-country-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 600;
  padding: .2rem .55rem;
  border-radius: var(--radius-full);
  background: var(--tl-badge-bg, #1565C0);
  color: white;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Mini flag (CSS horizontal stripes) ─────────────────── */
/* Country hero banner */
.country-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(0,0,0,.35);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: var(--radius-full);
  padding: .45rem 1rem .45rem .6rem;
  font-size: .875rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.country-hero-tag img {
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  flex-shrink: 0;
}
.country-hero-tag .country-label {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.country-hero-tag .country-sub {
  font-size: .68rem;
  font-weight: 500;
  opacity: .8;
  letter-spacing: .04em;
}

/* Animated country pulse */
@keyframes countryPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.25)}
  50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}
}
.country-hero-tag { animation: countryPulse 3s ease-in-out infinite; }

/* Country stat cards */
.country-stat {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: transform .2s;
}
.country-stat:hover { transform: translateY(-2px); }
.country-stat-value { font-size: 1.5rem; font-weight: 800; color: white; }
.country-stat-label { font-size: .75rem; color: rgba(255,255,255,.75); margin-top: .1rem; }

/* Ask AI filter button */
.btn-ask-ai {
  background: linear-gradient(135deg,#7c3aed,#4f46e5) !important;
  border: none !important;
  color: white !important;
  border-radius: var(--radius-full) !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  box-shadow: 0 4px 15px rgba(124,58,237,.35);
  transition: all .2s !important;
}
.btn-ask-ai:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,.45) !important;
}
.btn-ask-ai i { animation: aiSpin 3s linear infinite; }
@keyframes aiSpin {
  0%,100%{transform:rotate(0deg) scale(1)}
  25%{transform:rotate(5deg) scale(1.1)}
  75%{transform:rotate(-5deg) scale(1.1)}
}

/* Tender card flag */
.tender-flag {
  font-size: 1.1rem;
  line-height: 1;
}

/* Scroll-triggered fade in */
.fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease;
}
.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0);
}

/* Stagger children */
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ============================================================
   Tender List — Rectangle Row Layout
   ============================================================ */
.tl-tender-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tl-tender-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  position: relative;
  transition: background .15s, box-shadow .2s, border-color .15s, transform .15s;
}
.tl-tender-row:hover {
  background: #f8faff;
  box-shadow: 0 6px 24px rgba(21,101,192,.10);
  border-color: #bfdbfe;
  transform: translateY(-1px);
  z-index: 1;
}
/* Left accent strip on hover */
.tl-tender-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--tl-primary, #1565C0);
  opacity: 0;
  border-radius: 3px 0 0 3px;
  transition: opacity .2s;
}
.tl-tender-row:hover::before { opacity: 1; }

/* Logo column */
.tl-tender-logo {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-tender-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.tl-company-initials {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .03em;
  user-select: none;
}

/* Body column */
.tl-tender-body {
  flex: 1;
  min-width: 0;
}
.tl-tender-title {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 .3rem;
  color: #0f172a;
  font-family: var(--font-heading);
}
.tl-tender-title a:hover { color: var(--tl-primary, #1565C0) !important; }
.tl-tender-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  font-size: .78rem;
  color: #334155;
  font-weight: 500;
}
.tl-tender-meta span { display: flex; align-items: center; gap: .3rem; }
.tl-tender-meta i { font-size: .65rem; color: #64748b; }
.tl-tender-snippet { font-size: .8rem; color: #475569; line-height: 1.55; margin: .3rem 0 .4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; }

/* Status badges */
.tl-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  border: 1px solid transparent;
}
/* Ensure status colours are fully visible on listing rows */
.tl-tender-row .status-open   { background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.tl-tender-row .status-closed { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.tl-tender-row .status-awarded{ background: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe !important; }
.tl-tender-row .status-draft  { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0 !important; }

/* Aside column */
.tl-tender-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  min-width: 160px;
  text-align: right;
}
.tl-deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}
.tl-deadline-pill i { font-size: .65rem; }
.tl-budget-tag {
  font-size: .75rem;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 3px 9px;
  white-space: nowrap;
}
.tl-save-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  border: 1.5px solid #94a3b8;
  background: #fff;
  color: #334155;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  z-index: 2;
}
.tl-save-btn:hover { border-color: #d97706; color: #d97706; background: #fffbeb; }
.tl-save-btn.saved { border-color: #d97706; color: #92400e; background: #fef3c7; font-weight: 700; }
.tl-save-btn.saved:hover { border-color: #b45309; background: #fde68a; }

/* Saved/favourited state for full-size buttons (tender details page) */
.btn-tl-saved {
  background: #fef3c7;
  border: 1.5px solid #d97706;
  color: #92400e;
  font-weight: 700;
}
.btn-tl-saved:hover { background: #fde68a; border-color: #b45309; color: #78350f; }

/* Responsive collapse */
@media (max-width: 767px) {
  .tl-tender-row {
    flex-wrap: wrap;
    gap: .75rem;
  }
  .tl-tender-logo { width: 40px; height: 40px; }
  .tl-tender-aside {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    text-align: left;
  }
  .tl-tender-title { font-size: .87rem; }
}

/* ============================================================
   Text Contrast & Collision Prevention
   Ensures readable text on ANY background
   ============================================================ */

/* On dark hero/banner backgrounds, force white text */
.tl-hero *:not(.btn):not(input):not(select):not(textarea):not(.form-control):not(.badge):not(.alert) { --text-on-dark: inherit; }
.tl-hero h1,.tl-hero h2,.tl-hero h3,.tl-hero p,.tl-hero .lead,.tl-hero span,
.page-banner h1,.page-banner h2,.page-banner p,.page-banner .banner-title,.page-banner .banner-subtitle {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.page-banner .form-control,.page-banner input,.page-banner select { color: #1e293b !important; }

/* Cards always white background + dark text */
.tender-card,.tl-card,.card,.tl-vendor-card,.tl-testimonial-card {
  background: #fff !important;
  color: #1e293b !important;
}
.tender-card *,.tl-card *,.card-body * { color: inherit; }
/* Badges inside cards — respect each badge's own text colour, only fall back to white for dark/solid badges */
.tender-card .badge.badge-dark,
.tender-card .badge.badge-ai,
.tender-card .badge.badge-amber,
.tender-card .badge.badge-sponsored,
.tl-card .badge.badge-dark,
.tl-card .badge.badge-ai,
.tl-card .badge.badge-amber,
.tl-card .badge.badge-sponsored { color: #fff !important; }
/* Status and pastel badges keep their own dark colours */
.tl-card .badge.status-open    { color: #166534 !important; background: #dcfce7 !important; border-color: #bbf7d0 !important; }
.tl-card .badge.status-closed  { color: #991b1b !important; background: #fee2e2 !important; border-color: #fecaca !important; }
.tl-card .badge.status-awarded { color: #1e40af !important; background: #dbeafe !important; border-color: #bfdbfe !important; }
.tl-card .badge.status-draft   { color: #475569 !important; background: #f1f5f9 !important; border-color: #e2e8f0 !important; }
.tl-card .badge.badge-primary  { color: #1d4ed8 !important; background: #dbeafe !important; border-color: #bfdbfe !important; }
.tl-card .badge.badge-sector   { color: #5b21b6 !important; background: #ede9fe !important; border-color: #ddd6fe !important; }
.tl-card .badge.badge-country  { color: #92400e !important; background: #fef3c7 !important; border-color: #fde68a !important; }
.tl-card .badge.badge-secondary{ color: #0e7490 !important; background: #cffafe !important; border-color: #a5f3fc !important; }
.tl-card .badge.badge-success  { color: #166534 !important; background: #dcfce7 !important; border-color: #bbf7d0 !important; }
.tender-card h5,.tender-card h6,.tl-card h5,.tl-card h6 { color: #0f172a !important; }
.tender-card .text-muted,.tl-card .text-muted { color: #64748b !important; }

/* Auth pages — form text always dark */
.auth-page .form-control,.auth-page input,.auth-page select,.auth-page textarea { color: #1e293b !important; background: #fff !important; }
.auth-page label,.auth-page .form-label { color: #334155 !important; }

/* Left branding panel on login/register — white text */
.auth-panel-left *:not(.btn):not(input) { color: rgba(255,255,255,.9) !important; }
.auth-panel-left h2,.auth-panel-left h3 { color: #fff !important; }

/* Ensure nav-link text is always visible regardless of country theme */
.tl-navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.tl-navbar .nav-link:hover,.tl-navbar .nav-link.active { color: #fff !important; }
.tl-navbar .dropdown-item { color: #334155 !important; background: transparent; }
.tl-navbar .dropdown-item:hover { color: #0b1d3f !important; background: #f1f5f9 !important; }

/* Sidebar (admin) on dark bg — white text */
.admin-sidebar,.admin-sidebar * { color: rgba(255,255,255,.85); }
.admin-sidebar .nav-link.active,.admin-sidebar .nav-link:hover { color: #fff !important; }
.admin-sidebar .nav-section { color: rgba(255,255,255,.4) !important; }

/* Buttons always have visible text */
.btn-primary,.btn-success,.btn-danger,.btn-warning,.btn-info,.btn-dark,
[class*="btn-ask-ai"],[class*="btn-country"] { color: #fff !important; }
.btn-warning { color: #1e293b !important; }
.btn-outline-primary { color: var(--tl-blue) !important; background: transparent; }
.btn-outline-primary:hover { color: #fff !important; background: var(--tl-blue) !important; }
.btn-outline-secondary { color: #475569 !important; }
.btn-outline-secondary:hover { color: #fff !important; background: #475569 !important; }
.btn-outline-light { color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.btn-outline-light:hover { color: #0b1d3f !important; background: #fff !important; }

/* Badges */
.badge.bg-primary,.badge.bg-success,.badge.bg-danger,.badge.bg-dark { color: #fff !important; }
.badge.bg-warning { color: #1e293b !important; }
.badge.bg-light { color: #334155 !important; }

/* Alerts */
.alert-info { background: #e0f2fe !important; color: #0369a1 !important; border-color: #bae6fd !important; }
.alert-success { background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important; }
.alert-danger { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }
.alert-warning { background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; }

/* Form inputs */
.form-control,.form-select { color: #1e293b !important; background-color: #fff !important; border-color: #cbd5e1 !important; }
.form-control:focus,.form-select:focus { color: #1e293b !important; background-color: #fff !important; border-color: var(--tl-blue) !important; box-shadow: 0 0 0 3px rgba(21,101,192,.15) !important; }
.form-control::placeholder { color: #94a3b8 !important; }

/* Footer always dark text or white */
.tl-footer { background: #0f172a !important; color: rgba(255,255,255,.8) !important; }
.tl-footer * { color: rgba(255,255,255,.7) !important; }
.tl-footer a:hover { color: #fff !important; }
.tl-footer h6,.tl-footer .footer-brand { color: #fff !important; }

/* Links on white backgrounds */
body a:not(.btn):not(.nav-link):not(.dropdown-item) { color: #1565c0; }
body a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: #0b1d3f; }

/* Section labels (marketing/homepage use) */
.tl-section-label { color: var(--tl-blue) !important; font-weight: 700; text-align: center; }

/* Table text */
.table { color: #1e293b !important; }
.table thead th { color: #0f172a !important; background: #f8fafc !important; }

/* Progress bars */
.progress { background: #e2e8f0 !important; }

/* Modal */
.modal-content { color: #1e293b !important; background: #fff !important; }
.modal-header { border-bottom-color: #e2e8f0 !important; }

/* Dropdown menus on dark nav */
.tl-navbar .dropdown-menu { background: #fff !important; border: 1px solid #e2e8f0 !important; }

/* Pagination */
.page-link { color: #1565c0 !important; background: #fff !important; border-color: #e2e8f0 !important; }
.page-item.active .page-link { background: #1565c0 !important; color: #fff !important; border-color: #1565c0 !important; }
.page-link:hover { color: #0b1d3f !important; background: #f1f5f9 !important; }


/* ═══════════════════════════════════════════════════════════════
   TENDER HTML CONTENT — professional rendering of AI-extracted
   description, requirements and eligibility sections
═══════════════════════════════════════════════════════════════ */
.tender-html-content {
    line-height: 1.85;
    color: #1e293b;
    font-size: .9375rem;
}

/* ── Paragraphs ── */
.tender-html-content p { margin-bottom: .85em; }
.tender-html-content p:last-child { margin-bottom: 0; }

/* ── Headings ── */
.tender-html-content h1,
.tender-html-content h2,
.tender-html-content h3,
.tender-html-content h4,
.tender-html-content h5,
.tender-html-content h6 {
    font-weight: 700;
    color: #0f172a;
    margin: 1.4em 0 .5em;
    line-height: 1.3;
    padding-bottom: .3em;
    text-align: left !important;
}
.tender-html-content h1 { font-size: 1.35rem; border-bottom: 2px solid #e2e8f0; }
.tender-html-content h2 { font-size: 1.2rem;  border-bottom: 1px solid #e2e8f0; }
.tender-html-content h3 { font-size: 1.05rem; color: #312e81; }
.tender-html-content h4 { font-size: .97rem;  color: #334155; }
.tender-html-content h5,
.tender-html-content h6 { font-size: .9rem;   color: #475569; }
.tender-html-content h1:first-child,
.tender-html-content h2:first-child,
.tender-html-content h3:first-child { margin-top: 0; }
/* Override inline center-alignment from pasted/imported content */
.tender-html-content center { display: block; text-align: left !important; }

/* ── Lists ── */
.tender-html-content ul,
.tender-html-content ol {
    padding-left: 1.6em;
    margin-bottom: .9em;
}
.tender-html-content ul { list-style-type: disc; }
.tender-html-content ul ul { list-style-type: circle; margin-bottom: .3em; }
.tender-html-content ul ul ul { list-style-type: square; }
.tender-html-content ol { list-style-type: decimal; }
.tender-html-content ol ol { list-style-type: lower-alpha; margin-bottom: .3em; }
.tender-html-content li {
    margin-bottom: .35em;
    padding-left: .2em;
}
.tender-html-content li::marker { color: #312e81; font-weight: 700; }

/* ── Responsive table wrapper (injected by JS) ── */
.tender-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.25em;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* ── Tables ── */
.tender-html-content table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: .875rem;
    table-layout: fixed;
}
.tender-html-content th {
    background: linear-gradient(135deg, #312e81, #4338ca);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    border: none;
}
.tender-html-content th:first-child { border-radius: 0; }
.tender-html-content td {
    padding: 9px 14px;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f1f5f9;
    vertical-align: top;
    color: #334155;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}
.tender-html-content td:last-child { border-right: none; }
.tender-html-content tr:last-child td { border-bottom: none; }
.tender-html-content tbody tr:nth-child(even) td { background: #f8fafc; }
.tender-html-content tbody tr:hover td {
    background: #eff6ff;
    transition: background .12s;
}
/* first column emphasis */
.tender-html-content td:first-child { font-weight: 600; color: #0f172a; }
/* First column (Lot/Ref No.) — 30% so Description always gets the wider share */
.tender-html-content th:first-child,
.tender-html-content td:first-child {
    width: 30%;
    word-break: break-word;
    white-space: normal;
}
/* Description / second column — takes remaining 70% */
.tender-html-content th:nth-child(2),
.tender-html-content td:nth-child(2) {
    width: 70%;
}

/* Word tables */
.tender-html-content table.MsoTableGrid,
.tender-html-content table.MsoNormalTable { border-collapse: collapse; width: 100%; }
.tender-html-content table.MsoTableGrid td,
.tender-html-content table.MsoTableGrid th,
.tender-html-content table.MsoNormalTable td {
    border: 1px solid #cbd5e1; padding: 8px 12px; vertical-align: top;
}

/* ── Blockquote ── */
.tender-html-content blockquote {
    border-left: 4px solid #312e81;
    background: #f0f9ff;
    padding: .75em 1.2em;
    margin: 1em 0;
    border-radius: 0 8px 8px 0;
    color: #0369a1;
    font-style: italic;
}

/* ── Links ── */
.tender-html-content a { color: #0284c7; text-decoration: underline; }
.tender-html-content a:hover { color: #312e81; }

/* ── Inline formatting ── */
.tender-html-content b,
.tender-html-content strong { font-weight: 700; color: #0f172a; }
.tender-html-content i, .tender-html-content em { font-style: italic; }
.tender-html-content u { text-decoration: underline; }
.tender-html-content code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: .82em;
    background: #f1f5f9;
    padding: .1em .4em;
    border-radius: 4px;
    color: #be185d;
}
.tender-html-content pre {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1em;
    overflow-x: auto;
    font-size: .85rem;
    margin-bottom: 1em;
}

/* ── HR dividers ── */
.tender-html-content hr {
    border: none;
    border-top: 2px solid #e2e8f0;
    margin: 1.5em 0;
}

/* ── Quill alignment helpers ── */
.tender-html-content .ql-align-center  { text-align: center; }
.tender-html-content .ql-align-right   { text-align: right; }
.tender-html-content .ql-align-justify { text-align: justify; }

/* ── Word/MsoNormal cleanup ── */
.tender-html-content .WordSection1,
.tender-html-content .WordSection2,
.tender-html-content .Section1 { display: block; }
.tender-html-content p.MsoNormal,
.tender-html-content p.MsoBodyText { margin-bottom: .5em; line-height: 1.75; }
.tender-html-content p.MsoListParagraph,
.tender-html-content p.MsoListParagraphCxSpFirst,
.tender-html-content p.MsoListParagraphCxSpMiddle,
.tender-html-content p.MsoListParagraphCxSpLast { margin-left: 1.5em; }
.tender-html-content span[style*="font-family"],
.tender-html-content p[style*="font-family"] { font-family: inherit !important; }
.tender-html-content [class^="Mso"] { max-width: 100%; }

/* ── Images ── */
.tender-html-content img { max-width: 100%; height: auto; border-radius: 6px; }

/* ── AI preview pane inside editor wrapper ── */
.tl-ai-preview-pane {
    border: 1.5px solid #bfdbfe;
    border-radius: 8px;
    background: #f8faff;
    padding: 1rem 1.25rem;
    min-height: 140px;
    max-height: 480px;
    overflow-y: auto;
    position: relative;
}
.tl-ai-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #dbeafe;
}
.tl-ai-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1d4ed8;
    background: #dbeafe;
    padding: 3px 9px;
    border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   Bidnexis CONTENT SCHEMA — scoped to .tender-html-content
   Sections, callouts, requirement groups, data tables
═══════════════════════════════════════════════════════════════ */
.tender-html-content .tl-section { margin-bottom: 1.4rem; }
.tender-html-content .tl-section-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: #1d4ed8; margin-bottom: .5rem;
  display: flex !important; align-items: center; justify-content: flex-start !important; gap: 7px;
  text-align: left !important;
}
.tender-html-content .tl-section-label::before {
  content: ''; display: inline-block; width: 3px; height: 13px;
  background: linear-gradient(180deg,#1d4ed8,#60a5fa); border-radius: 2px; flex-shrink: 0;
}
.tender-html-content .tl-section p { margin-bottom: .5rem; font-size: .895rem; color: #1e293b; line-height: 1.75; }
.tender-html-content .tl-items-list { padding-left: 0; list-style: none; margin: 0; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.tender-html-content .tl-items-list li {
  padding: .4rem .75rem .4rem 1.75rem; position: relative;
  font-size: .87rem; color: #1e293b; line-height: 1.65;
  border-bottom: 1px solid #f1f5f9;
}
.tender-html-content .tl-items-list li:last-child { border-bottom: none; }
.tender-html-content .tl-items-list li::before {
  content: '▸'; position: absolute; left: .55rem; color: #3b82f6; font-size: .6rem; top: .55rem;
}

/* Key Procurement Details callout */
.tender-html-content .tl-callout {
  background: linear-gradient(135deg,#eff6ff,#f0f9ff);
  border: 1px solid #bfdbfe; border-left: 4px solid #1d4ed8;
  border-radius: 10px; padding: 1rem 1.15rem; margin-top: 1.1rem;
}
.tender-html-content .tl-callout-title {
  font-size: .68rem; font-weight: 800; color: #1e40af;
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: .65rem;
  text-align: left;
}
.tender-html-content .tl-callout-list { padding-left: 0; list-style: none; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.tender-html-content .tl-callout-list li {
  font-size: .84rem; color: #1e293b; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; line-height: 1.5;
}
.tender-html-content .tl-callout-key { font-weight: 700; color: #1e40af; white-space: nowrap; min-width: 140px; }

/* Data tables inside description */
.tender-html-content .tl-data-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .8rem 0; border-radius: 8px; overflow: hidden; }
.tender-html-content .tl-data-table thead tr { background: #1d4ed8; color: #fff; }
.tender-html-content .tl-data-table thead th { padding: .5rem .75rem; font-weight: 700; text-align: center; font-size: .72rem; letter-spacing: .03em; }
.tender-html-content .tl-data-table tbody tr:nth-child(even) { background: #f8faff; }
.tender-html-content .tl-data-table tbody tr:hover { background: #eff6ff; transition: background .15s; }
.tender-html-content .tl-data-table tbody td { padding: .45rem .75rem; border-bottom: 1px solid #e2e8f0; color: #1e293b; vertical-align: top; line-height: 1.5; }

/* Requirements groups */
.tender-html-content .tl-req-group { margin-bottom: 1.15rem; }
.tender-html-content .tl-req-group-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: #0f172a; background: #f1f5f9; border-radius: 6px;
  padding: .4rem .8rem; margin-bottom: .55rem;
  display: block; text-align: left !important;
}
.tender-html-content .tl-req-list { padding-left: 0; list-style: none; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.tender-html-content .tl-req-list li {
  padding: .45rem .75rem .45rem 2.1rem; position: relative;
  font-size: .855rem; color: #334155; line-height: 1.6;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 7px;
}
.tender-html-content .tl-req-list li::before {
  content: '✓'; position: absolute; left: .6rem; color: #16a34a;
  font-weight: 900; font-size: .75rem; top: .5rem;
}
.tender-html-content .tl-req-docs li::before { content: '📄'; font-size: .68rem; top: .48rem; left: .55rem; }

/* ── Nuclear left-align lock for all tender content headers ─────────────
   Overrides: global .tl-section-label rule, inline style="text-align:center",
   align="center" attributes, <center> tags, and AI-generated centred HTML.
   !important here beats all of the above except browser UA sheet (which
   never centres divs anyway).
──────────────────────────────────────────────────────────────────────── */
.tender-html-content .tl-section-label,
.tender-html-content .tl-req-group-title,
.tender-html-content .tl-callout-title {
  text-align: left !important;
}
/* Inline style="text-align:center" or style="text-align: center" on ANY
   element inside tender content — override to left */
.tender-html-content [style*="text-align:center"],
.tender-html-content [style*="text-align: center"] {
  text-align: left !important;
}
/* align="center" attribute (old HTML) */
.tender-html-content [align="center"] {
  text-align: left !important;
}
/* Tighten: section-label flex direction so it never re-centres */
.tender-html-content .tl-section-label {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
}

/* ── Bid Readiness Card ─────────────────────────────────────────────── */
.tl-rd-icon {
    width: 20px; height: 20px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px; color: #fff;
}
.tl-rd-green { background: #dcfce7; color: #16a34a !important; }
.tl-rd-green i { color: #16a34a !important; }
.tl-rd-red   { background: #fee2e2; color: #dc2626 !important; }
.tl-rd-red i { color: #dc2626 !important; }
.tl-rd-amber { background: #fef3c7; color: #d97706 !important; }
.tl-rd-amber i { color: #d97706 !important; }
.tl-rd-blue  { background: #dbeafe; color: #1d4ed8 !important; }
.tl-rd-blue i { color: #1d4ed8 !important; }
.tl-rd-title { font-size: .78rem; font-weight: 700; line-height: 1.3; }
.tl-rd-body  { font-size: .71rem; color: #64748b; margin-top: 2px; line-height: 1.45; }
.tl-rd-btn {
    font-size: .7rem; font-weight: 600; padding: 4px 10px; border-radius: 6px;
    border: none; cursor: pointer; text-decoration: none; line-height: 1.4;
}
.tl-rd-btn-red  { background: #dc2626; color: #fff !important; }
.tl-rd-btn-amber{ background: #d97706; color: #fff !important; }
.tl-rd-btn-blue { background: #1d4ed8; color: #fff !important; }

/* Post Tender button in navbar */
.tl-btn-post-tender {
  background: linear-gradient(135deg, #312e81, #4338ca);
  color: white !important;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  transition: all .2s;
}
.tl-btn-post-tender:hover {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #1a1a1a !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,.3);
}


/* ── Advertisement Slots ──────────────────────────────────────────────────── */
.tl-ad-slot {
  text-align: center;
  margin: 0;
}
.tl-ad-label {
  font-size: .65rem;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.tl-ad-top-banner {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 0;
}
.tl-ad-top-banner .tl-ad-link img {
  max-height: 90px;
  width: auto;
  max-width: 100%;
}
.tl-ad-footer-banner {
  background: #1e1b4b;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tl-ad-footer-banner .tl-ad-label {
  color: rgba(255,255,255,.3);
}
.tl-ad-footer-banner .tl-ad-link img {
  max-height: 100px;
  width: auto;
  max-width: 100%;
}
.tl-ad-sidebar-slot .tl-ad-link img {
  width: 100%;
  border-radius: 8px;
}

/* ============================================================
   COMPREHENSIVE MOBILE RESPONSIVE SYSTEM
   Covers all breakpoints: 1199, 991, 767, 575, 374px
   ============================================================ */

html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }

/* Large tablets (<=1199px) */
@media (max-width: 1199.98px) {
  .container { max-width: 100%; padding-left: 1rem; padding-right: 1rem; }
  .hero-title { font-size: clamp(1.875rem,4.5vw,3rem); }
  .tl-tender-row { gap: .75rem; }
}

/* Tender details sidebar — desktop only sticky */
.td-sidebar-inner { position: sticky; }
@media (max-width: 991.98px) {
  .td-sidebar-inner {
    position: static !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding-right: 0 !important;
  }
}

/* Tablets & small laptops (<=991px) */
@media (max-width: 991.98px) {
  .tl-navbar .navbar-collapse { background: rgba(11,29,63,.99); border-top: 1px solid rgba(255,255,255,.08); padding: .5rem 0; margin-top: .25rem; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .tl-navbar .nav-link { padding: .625rem 1rem !important; border-radius: var(--radius-sm); }
  .tl-navbar .dropdown-menu { background: rgba(20,40,80,.98) !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: none !important; }
  .tl-navbar .dropdown-item { color: rgba(255,255,255,.85) !important; background: transparent !important; }
  .tl-navbar .dropdown-item:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }
  .tl-navbar .d-flex.gap-2 { gap: .5rem !important; margin-top: .5rem; padding: 0 .5rem; flex-wrap: wrap; }
  .navbar-btn-outline, .navbar-btn-primary { width: 100%; text-align: center; }
  .btn-country-switch { width: 100%; }
  .tl-sidebar { order: -1; margin-bottom: 1.5rem; }
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tl-card-body { padding: 1rem; }
  .section { padding: 3.5rem 0; }
  .section-lg { padding: 5rem 0; }
  .hero-section { padding: 3rem 0 4rem; min-height: auto; text-align: center; }
  .hero-subtitle, .hero-search-box { margin-left: auto; margin-right: auto; }
  .hero-stats { justify-content: center; }
  .hero-visual { display: none; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar { position: fixed; left: -290px; top: 0; height: 100vh; width: 270px; overflow-y: auto; z-index: var(--z-fixed); transition: left .25s ease; box-shadow: var(--shadow-xl); }
  .dashboard-sidebar.open, .dashboard-sidebar.sidebar-open { left: 0; }
  .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: calc(var(--z-fixed) - 1); }
  .sidebar-overlay.visible { display: block; }
  .dashboard-content { padding: 1.25rem 1rem; }
}

/* Mobile landscape & portrait (<=767px) */
@media (max-width: 767.98px) {
  h1 { font-size: clamp(1.625rem,5vw,2.25rem); }
  h2 { font-size: clamp(1.375rem,4vw,1.875rem); }
  h3 { font-size: clamp(1.125rem,3.5vw,1.5rem); }
  .section { padding: 2.5rem 0; }
  .section-sm { padding: 1.75rem 0; }
  .container { padding-left: .875rem; padding-right: .875rem; }
  .tl-tender-row { flex-direction: column; gap: .75rem; }
  .tl-tender-logo { width: 40px; height: 40px; }
  .tl-tender-aside { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; text-align: left; min-width: 0; }
  .tl-tender-title { font-size: .875rem; }
  .tl-tender-meta { flex-wrap: wrap; gap: .375rem; }
  .tender-card { padding: 1rem; }
  .tl-card-body { padding: .875rem; }
  .tl-card-header { padding: .875rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .d-flex.gap-2.flex-row { flex-wrap: wrap; }
  .input-group { flex-wrap: nowrap; }
  .input-group .form-control { min-width: 0; }
  .table { font-size: .8125rem; }
  .table td, .table th { padding: .5rem .625rem; }
  .auth-panel-left { display: none; }
  .auth-panel-right { border-radius: var(--radius-xl) !important; }
  .modal-dialog { margin: .5rem; }
  .modal-body { padding: 1.25rem; }
  .footer-bottom { flex-direction: column !important; text-align: center; gap: .75rem; }
  .footer-bottom .d-flex { flex-wrap: wrap; justify-content: center; gap: .5rem !important; }
  .tl-footer .row > [class*="col-"] { margin-bottom: 1.5rem; }
  .toast-container { left: .75rem !important; right: .75rem !important; bottom: .75rem !important; }
  .tl-toast { min-width: auto !important; max-width: 100% !important; }
  .dashboard-content { padding: .875rem; }
  .dashboard-stats { grid-template-columns: repeat(2,1fr) !important; gap: .75rem; }
  .tl-stat-card { padding: 1rem; }
  .tl-stat-number { font-size: 1.5rem; }
  .filters-bar, .tl-filters { flex-direction: column; gap: .625rem; }
  .filters-bar .form-select, .filters-bar .form-control { width: 100%; }
  .pagination { flex-wrap: wrap; justify-content: center; gap: .25rem; }
  .page-item .page-link { padding: .375rem .625rem; font-size: .8125rem; }
  .hero-search-box { flex-direction: column; padding: .5rem; }
  .hero-search-box input { padding: .75rem; width: 100%; }
  .hero-search-btn { width: 100%; border-radius: var(--radius-md) !important; padding: .75rem !important; }
  .hero-stats { gap: 1.25rem; }
  .hero-stat-number { font-size: 1.375rem; }
  .pipeline-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pipeline-column { min-width: 260px; }
  canvas { max-width: 100% !important; }
  .workspace-layout { grid-template-columns: 1fr !important; }
  .workspace-sidebar { border-left: none !important; border-top: 1px solid var(--color-border); }
}

/* Small phones (<=575px) */
@media (max-width: 575.98px) {
  h1 { font-size: 1.625rem; }
  h2 { font-size: 1.375rem; }
  .container { padding-left: .75rem; padding-right: .75rem; }
  .dashboard-stats { grid-template-columns: 1fr !important; }
  .brand-text { font-size: 1.125rem; }
  .brand-logo { width: 30px; height: 30px; font-size: .875rem; }
  .admin-table-actions { display: flex; flex-direction: column; gap: .375rem; }
  .admin-table-actions .btn { padding: .25rem .5rem; font-size: .75rem; }
  .nav-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .nav-tabs .nav-link { white-space: nowrap; font-size: .8125rem; padding: .5rem .75rem; }
  .accordion-button { font-size: .875rem; padding: .875rem 1rem; }
  .accordion-body { padding: .875rem 1rem; font-size: .875rem; }
  .badge { font-size: .7rem; }
  .pricing-card { padding: 1.25rem; }
}

/* Extra tiny phones (<=374px) */
@media (max-width: 374.98px) {
  h1 { font-size: 1.5rem; }
  .brand-text { font-size: 1rem; }
  .hero-stat-number { font-size: 1.25rem; }
  .btn { font-size: .8125rem; padding: .375rem .75rem; }
  .tl-card-body { padding: .75rem; }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  .form-control, .form-select { min-height: 44px; }
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="number"],
  select, textarea { font-size: 16px !important; }
  .tl-card:hover, .tender-card:hover { transform: none; }
  .navbar-btn-primary:hover, .hero-search-btn:hover { transform: none; }
}

/* Responsive show/hide utilities */
@media (max-width: 767.98px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }
  .show-mobile-flex { display: flex !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* ─── Mobile UX Enhancements ────────────────────────────────── */

/* Mobile dashboard: restore natural page scroll */
@media (max-width: 991.98px) {
  .dashboard-main { overflow-y: visible; overflow-x: hidden; }
  .dashboard-layout { min-height: unset; }
  .dashboard-topbar { position: sticky; top: var(--navbar-h,62px); z-index: 40; }
}

/* Touch targets: 44px minimum for all interactive elements */
@media (max-width: 991.98px) {
  /* View-toggle buttons in tenders page */
  .view-toggle-btn { min-width:44px;min-height:40px;padding:.5rem .75rem !important;display:inline-flex;align-items:center;justify-content:center; }
  /* Filter toggle pill */
  .tl-filter-toggle-btn { min-height:42px;padding:.5rem 1rem !important;font-size:.875rem; }
  /* Save-tender button */
  .tl-save-btn { min-height:40px;padding:.4rem .875rem; }
  /* Sticky filter bar sits below navbar */
  .tl-filterbar.sticky-top { top:var(--navbar-h,62px) !important; }
  /* Dashboard topbar reduced padding on mobile */
  .dashboard-topbar { padding:.625rem 1rem !important; }
  /* Page header (profile, favorites, etc.) — tighten on mobile */
  .tl-page-header { padding-top:1rem !important;padding-bottom:1rem !important; }
  /* Tender card action row wraps */
  .tl-tender-footer { flex-wrap:wrap;gap:.5rem; }
  /* Navbar auth buttons: ensure they hit 44px */
  .navbar-btn-outline,.navbar-btn-primary { min-height:44px;display:flex;align-items:center;justify-content:center; }
}

/* Profile sidebar → horizontal scrollable tab strip on mobile */
@media (max-width: 991.98px) {
  .profile-sidenav {
    flex-direction: row !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0;
  }
  .profile-sidenav::-webkit-scrollbar { display: none; }
  .profile-sidenav .nav-link {
    flex-shrink: 0;
    padding: .625rem 1rem !important;
    font-size: .8125rem;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    white-space: nowrap;
  }
  .profile-sidenav .nav-link.active {
    border-bottom-color: var(--tl-blue);
    color: var(--tl-blue) !important;
    background: transparent !important;
  }
  .profile-sidenav .ms-auto { display: none; } /* hide badge labels on mobile */
}

/* Phone-only extras */
@media (max-width: 575.98px) {
  /* Dashboard topbar title font */
  .dashboard-topbar h5 { font-size:1rem; }
  /* Page banner reduce padding and add extra top margin so it clears the fixed navbar */
  .page-banner { padding:2.5rem 0 1.5rem; margin-top:1rem; }
  /* Filter drawer labels */
  .tl-drawer-label { font-size:.8rem; }
  /* Profile/page header avatar */
  .tl-page-header img,
  .tl-page-header [style*="width:56px"] { width:44px !important;height:44px !important; }
  /* Stat cards single column already handled; ensure text scales */
  .tl-stat-number { font-size:1.375rem !important; }
  /* Horizontal scroll hint on tables */
  .table-responsive::after {
    content:'← Scroll →';
    display:block;
    text-align:center;
    font-size:.7rem;
    color:#94a3b8;
    padding:.25rem 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SITE-WIDE CONTRAST ENFORCEMENT
   Targeted rules only — no broad wildcard selectors that interfere
   with explicit inline colors.
═══════════════════════════════════════════════════════════════ */

/* ── Badge contrast: light backgrounds → dark text ── */
.badge[style*="background:#fde68a"],
.badge[style*="background:#fef3c7"],
.badge[style*="background:#e0f2fe"],
.badge[style*="background:#f0fdf4"],
.badge[style*="background:#f1f5f9"],
.badge[style*="background:#fffbeb"],
.badge[style*="background:#dcfce7"] {
  color: #1e293b !important;
}
/* Dark-background badges → white text */
.badge[style*="background:#0d9488"],
.badge[style*="background:#16a34a"],
.badge[style*="background:#1d4ed8"],
.badge[style*="background:#dc2626"],
.badge[style*="background:#7c3aed"],
.badge[style*="background:#0f172a"],
.badge[style*="background:#b45309"] {
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVBAR — comprehensive responsive fix
   Covers: collapsed menu, dropdowns, country switcher, auth btns
   ═══════════════════════════════════════════════════════════════ */

/* ── Collapsed nav container ───────────────────────────────────── */
@media (max-width: 991.98px) {
  .tl-navbar .navbar-collapse {
    background: rgba(11,29,63,.99);
    border-top: 1px solid rgba(255,255,255,.1);
    padding: .75rem .5rem 1rem;
    margin-top: 0;
    border-radius: 0 0 12px 12px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Divider between nav links and bottom actions */
  .tl-navbar .navbar-nav { border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: .5rem; margin-bottom: .5rem; }

  /* Every nav link: big touch target */
  .tl-navbar .nav-link {
    padding: .75rem 1rem !important;
    min-height: 48px;
    display: flex !important;
    align-items: center;
    border-radius: 8px;
    margin: 1px 0;
  }
  .tl-navbar .nav-link:active { background: rgba(255,255,255,.1); }

  /* ── Dropdown submenus inside collapsed nav ─────────────────── */
  .tl-navbar .dropdown-menu {
    position: static !important;
    float: none;
    background: rgba(255,255,255,.06) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    padding: .25rem .5rem !important;
    margin: 2px 0 4px 1rem !important;
    animation: none !important;
  }
  .tl-navbar .dropdown-menu.show { display: block; }
  .tl-navbar .dropdown-item {
    color: rgba(255,255,255,.8) !important;
    border-radius: 6px;
    padding: .625rem .875rem !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    font-size: .875rem;
  }
  .tl-navbar .dropdown-item:active,
  .tl-navbar .dropdown-item:focus,
  .tl-navbar .dropdown-item:hover {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
  }
  /* Show caret rotation when open */
  .tl-navbar .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .tl-navbar .dropdown-toggle::after { transition: transform .2s ease; }

  /* ── Country switcher ────────────────────────────────────────── */
  .navbar-country-switcher { width: 100%; margin: 0 0 .5rem !important; }
  .btn-country-switch {
    width: 100%;
    justify-content: flex-start !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 8px !important;
    padding: .625rem 1rem !important;
    min-height: 44px;
    color: #fff !important;
  }
  .country-switcher-menu {
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    position: static !important;
    background: rgba(11,29,63,.99) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
  }
  .country-switcher-menu .dropdown-item {
    color: rgba(255,255,255,.85) !important;
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  .country-switcher-menu .dropdown-item.active { background: rgba(255,255,255,.15) !important; }
  .country-switcher-menu .dropdown-item:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; }

  /* ── Auth / action buttons ───────────────────────────────────── */
  .tl-navbar .d-flex.align-items-center { flex-wrap: wrap; gap: .5rem !important; padding: .25rem .5rem 0; width: 100%; }
  .navbar-btn-outline,
  .navbar-btn-primary {
    flex: 1 1 calc(50% - .25rem);
    min-height: 44px;
    text-align: center;
    justify-content: center;
    font-size: .875rem !important;
    padding: .625rem 1rem !important;
  }
  /* User dropdown button: full width */
  .tl-navbar .dropdown > .navbar-btn-outline { flex: 1 1 100%; }
}

/* ── Very small phones ≤480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .tl-navbar .container { padding-left: .75rem; padding-right: .75rem; }
  .navbar-brand span { font-size: 1.15rem !important; }
  .navbar-logo-img { height: 34px !important; }
  .navbar-btn-outline,
  .navbar-btn-primary { flex: 1 1 100%; }
  .tl-navbar .dropdown-item { font-size: .8125rem; }
}

/* ── Fix: dropdown caret visible on dark bg ─────────────────────── */
@media (max-width: 991.98px) {
  .tl-navbar .dropdown-toggle::after {
    border-top-color: rgba(255,255,255,.7);
    display: inline-block;
    margin-left: auto;
  }
  .tl-navbar .nav-link.dropdown-toggle { justify-content: space-between; }
}