/*
Name: Sama Salem Saloum
ID: 2205679
Section: CPCS403
Date: 27-02-2026
File: global/main.css
Purpose: Global styling for ShipSmart (Webflow-style landing page)
*/

:root{
  --bg: #ffffff;
  --soft: #fbf7ff;
  --soft2:#fff6f0;
  --text:#151515;
  --muted:#6b6b6b;
  --border:#ececec;

  --primary:#7b2b6a;     /* purple */
  --accent:#ff8a1f;      /* orange */
  --yellow:#f6c544;

  --radius: 18px;
  --shadow: 0 16px 40px rgba(0,0,0,0.08);
  --shadow2: 0 10px 22px rgba(0,0,0,0.07);
}

*{ box-sizing:border-box; }
html{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{
  flex:1;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(1120px, 92%);
  margin:0 auto;
}

/* ===================== HEADER ===================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{
  width:80px;
  height:80px;
  object-fit:contain;
}
.brand-name{
  font-weight:900;
  letter-spacing:.2px;
  color:var(--primary);
}

.nav{
  display:none;
}
.nav-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:12px;
}
.nav-link{
  display:inline-block;
  padding:9px 12px;
  border-radius:12px;
  font-weight:700;
  color:#222;
}
.nav-link:hover,
.nav-link.is-active{
  background: var(--soft);
  color: var(--primary);
  text-decoration:none;
}

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:18px;
  cursor:pointer;
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:44px 0 24px;
  background:
    radial-gradient(900px 320px at 15% 10%, rgba(123,43,106,0.12), transparent 60%),
    radial-gradient(820px 320px at 90% 15%, rgba(255,138,31,0.14), transparent 60%),
    linear-gradient(180deg, #ffffff, #ffffff);
}

.decor{
  position:absolute;
  pointer-events:none;
  opacity:0.9;
}
.decor-wave-1{ left:-40px; top:120px; width:260px; opacity:0.65; }
.decor-wave-2{ right:-50px; top:80px; width:280px; opacity:0.55; }
.decor-light-1{ left:20px; top:40px; width:260px; opacity:0.75; }
.decor-light-2{ right:40px; top:220px; width:240px; opacity:0.65; }

.hero::after{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-160px;
  top:120px;
  background: radial-gradient(circle at 30% 30%, rgba(255,138,31,0.25), transparent 55%),
              radial-gradient(circle at 60% 60%, rgba(123,43,106,0.22), transparent 55%);
  filter: blur(2px);
  border-radius:50%;
  z-index:0;
}

.hero-grid{
  position:relative;
  z-index:1; /* keep content above blob */
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:22px;
  align-items:start;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow: var(--shadow2);
  font-weight:800;
  color:var(--primary);
  margin:0 0 12px;
}
.pill .dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--accent);
}

.hero-title{
  margin:0 0 10px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height:1.08;
  letter-spacing:-0.5px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.accent{ color:var(--primary); }

.hero-subtitle{
  margin:0 0 18px;
  color:#2d2d2d;
  max-width: 60ch;
}

/* ===================== CARDS / FORM ===================== */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.track-card{
  padding:16px;
}

.field-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.field label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

input[type="text"], select{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  outline:none;
  font-size:1rem;
  background:#fff;
}
input[type="text"]:focus, select:focus{
  border-color: rgba(123,43,106,0.65);
  box-shadow: 0 0 0 4px rgba(123,43,106,0.12);
}

.inline{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
}
.error{
  margin:6px 0 0;
  color:#b00020;
  font-weight:800;
  min-height:18px;
}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.btn-primary{
  width:100%;
  background: var(--primary);
  border-color: transparent;
  color:#fff;
  margin-top:10px;
}
.btn-primary:hover{ filter:brightness(1.05); }

.btn-inline{ width:auto; margin-top:12px; }

.btn-ghost{
  background: transparent;
  border-color: rgba(123,43,106,0.5);
  color: var(--primary);
  text-decoration:none;
}
.btn-ghost:hover{
  background: var(--soft);
  text-decoration:none;
}

.small{ font-size:0.92rem; }
.muted{ color: var(--muted); }

/* ===================== RIGHT HERO ===================== */
.illustration{
  padding:14px;
  position:relative;
  background: linear-gradient(180deg, #fff, rgba(251,247,255,0.65));
  display:flex;
  flex-direction:column;
  gap:12px;
}

.illus-top{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  font-weight:900;
  padding:7px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background:#fff;
}
.chip-soft{
  background: var(--soft2);
  border-color: rgba(255,138,31,0.28);
  color:#7a3a00;
}

/* ✅ FIX: Image always fits in card (media box) */
.hero-media{
  width:100%;
  height:320px;          /* adjust if needed */
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  background:#fff;
}

.hero-illus{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0;
}

/* loading + result inside */
.card-inner{
  margin-top:0;
  padding:14px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: linear-gradient(180deg, #fff, #fff);
  box-shadow: var(--shadow2);
}
.loading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-radius: 16px;
  border:1px dashed var(--border);
  background:#fff;
}
.loading[hidden],
#loadingBox[hidden]{
  display:none !important;
}
.spinner{
  width:20px; height:20px;
  border:3px solid #eee;
  border-top-color: var(--primary);
  border-radius:50%;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

.result-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.result-title{
  margin:0;
  color: var(--primary);
  font-size:1.1rem;
}
.badge{
  padding:7px 10px;
  border-radius:999px;
  font-weight:900;
  background:#eef3ff;
  color:#1d4ed8;
}
.badge.ok{ background:#e9fff0; color:#0b6b2c; }
.badge.warn{ background:#fff4e6; color:#7a4a00; }

.result-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px 10px;
  margin:10px 0 12px;
}
.result-grid p{ margin:0; }

.timeline{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
}
.step-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  border:3px solid #cfcfcf;
  background:#fff;
}
.step.done{
  background:#f0fff6;
  border-color: rgba(11,107,44,0.18);
}
.step.done .step-dot{
  border-color:#0b6b2c;
  background:#0b6b2c;
}
.step.active{
  background: var(--soft);
  border-color: rgba(123,43,106,0.22);
}
.step.active .step-dot{
  border-color: var(--primary);
  background: var(--primary);
}
.result-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* ===================== Supported carriers (FULL WIDTH) ===================== */
.logos{
  margin-top:18px;
  padding:22px 22px 26px;
  border-radius:18px;
  border:1px solid var(--border);
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(123,43,106,0.10), transparent 60%),
    #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.06);
}

.logos-title{
  margin:0 0 14px;
  font-weight:900;
  color:#222;
}

/* make the row feel “full” */
.logos-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:80px;              /* bigger gaps */
  padding:10px 0;
}

.logo{
  height:110px;
  width:auto;
  padding:0;             /* remove box padding */
  border:0;              /* remove border */
  border-radius:0;
  background:transparent;/* remove white bg */
  box-shadow:none;       /* remove shadow */
  opacity:1;
  filter: none;
  transition: transform .18s ease, opacity .18s ease;
}

/* hover only lifts the logo, not a card */
.logo:hover{
  transform: translateY(-3px) scale(1.06);
}

/* desktop: even bigger */
@media (min-width: 981px){
  .logo{ height:130px; }
}

/* mobile: keep readable */
@media (max-width: 520px){
  .logos-row{ gap:18px; }
  .logo{ height:90px; }
}

/* ===================== SECTIONS ===================== */
.section{
  padding:46px 0;
}
.section-soft{
  background: linear-gradient(180deg, var(--soft), #fff);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  margin-bottom:18px;
}
.section-head h2{ margin:0; }
.section-head p{ margin:0; max-width:60ch; }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

/* ===== Feature Card Image Header Style ===== */
.feature{
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(123,43,106,0.14);
  border-color: rgba(123,43,106,0.18);
}

.feature-image{
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.feature-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.feature:hover .feature-image img{
  transform: scale(1.05);
}

.feature-content{
  padding: 20px;
}

.feature-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.15));
}

.feature h3{ margin:10px 0 8px; color: var(--primary); }
.feature p{ margin:0 0 12px; color:#2b2b2b; }

.check-list{
  list-style:none;
  padding:0; margin:0;
  display:grid;
  gap:8px;
}
.check-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  color:#333;
}
.check-list img{ width:20px; height:20px; }

/* How */
.how-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:18px;
  align-items:center;
}
.how-steps{
  margin:12px 0 0;
  padding-left: 18px;
  color:#2b2b2b;
}
.how-card{
  padding:0;
  border-radius:18px;
  overflow:hidden;
}
.how-card img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* Quote */
.quote{
  padding:18px;
}
.quote p{
  margin:12px 0 10px;
  font-size:1.05rem;
}
.quote-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.quote-icon{ width:34px; height:34px; }
.stars{
  display:flex;
  gap:6px;
}
.stars img{ width:18px; height:18px; }
cite{
  display:block;
  color: var(--muted);
  font-style: italic;
  font-weight:700;
}

.contact{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
  margin-top:16px;
  color: var(--muted);
}

.contact img{
  width:18px;
  height:18px;
}

/* footer → see dark footer section at bottom */

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .field-grid{ grid-template-columns: 1fr; }
  .result-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .how-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }

  .hero-media{ height:280px; } /* a bit smaller on mobile */
}

/* Nav is hidden globally — sidebar toggle handles all sizes */
body.menu-open .nav{
  display:block;
  position:absolute;
  top:68px;
  left:4%;
  right:4%;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  padding:10px;
  z-index:100;
}
body.menu-open .nav-list{
  flex-direction:column;
}

.container-wide{
  width:min(1320px, 94%);
}

/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero{
  background:
    radial-gradient(700px 200px at 20% 30%, rgba(123,43,106,0.08), transparent 60%),
    radial-gradient(600px 200px at 80% 20%, rgba(255,138,31,0.08), transparent 60%),
    #fff;
  padding: 36px 0 20px;
}
.page-hero h1{
  margin:0 0 8px;
  color: var(--primary);
}
.page-hero p{
  margin:0;
  max-width:68ch;
}
.required-star{
  color:#b00020;
  font-weight:900;
}

/* ===================== SCHEDULE TABLE ===================== */
.table-wrap{
  overflow-x:auto;
  margin:18px 0;
  border-radius: var(--radius);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
}

.schedule-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
}

.schedule-table caption{
  padding:14px 18px;
  font-weight:900;
  text-align:left;
  color: var(--primary);
  background: var(--soft);
  border-bottom:1px solid var(--border);
}

.schedule-table th,
.schedule-table td{
  padding:12px 16px;
  text-align:center;
  border:1px solid var(--border);
}

.schedule-table thead th{
  background: var(--primary);
  color:#fff;
  font-weight:800;
  letter-spacing:0.3px;
  white-space:nowrap;
}

.schedule-table tbody tr:nth-child(even){
  background: rgba(251,247,255,0.45);
}

.schedule-table tbody tr:hover{
  background: rgba(123,43,106,0.06);
}

.carrier-cell{
  font-weight:900;
  color: var(--primary);
  background: var(--soft) !important;
  vertical-align:middle;
}

.merged-cell{
  background: rgba(255,138,31,0.10) !important;
  font-style:italic;
  font-weight:700;
  color:#7a3a00;
}

.schedule-info{
  margin-top:22px;
}
.schedule-info h3{ color: var(--primary); margin:0 0 8px; }
.schedule-info h4{ margin:18px 0 6px; }
.schedule-info ul,
.schedule-info ol{
  padding-left:20px;
  margin:0 0 12px;
  color:#2b2b2b;
}

/* ===================== FEEDBACK FORM ===================== */
.feedback-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  align-items:start;
  max-width:780px;
  margin:0 auto;
}

.feedback-card{
  padding:28px;
  width:100%;
}
.feedback-card h2{
  margin:0 0 18px;
  color: var(--primary);
}

.form-group{
  margin-bottom:18px;
}
.form-group label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

/* Override default input/select styles for feedback page too */
.feedback-card input[type="text"],
.feedback-card input[type="email"],
.feedback-card select,
.feedback-card textarea{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  font-size:1rem;
  font-family:inherit;
  background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
.feedback-card input[type="text"]:focus,
.feedback-card input[type="email"]:focus,
.feedback-card select:focus,
.feedback-card textarea:focus{
  border-color: rgba(123,43,106,0.65);
  box-shadow: 0 0 0 4px rgba(123,43,106,0.12);
}

.feedback-card textarea{
  resize:vertical;
  min-height:100px;
}

/* Fieldset reset */
.form-fieldset{
  border:none;
  padding:0;
  margin:0 0 18px;
}
.form-fieldset legend{
  font-weight:800;
  margin-bottom:10px;
  padding:0;
}

/* Radio group */
.radio-group{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.radio-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  transition: border-color .2s, background .2s;
}
.radio-label:hover{
  border-color: rgba(123,43,106,0.35);
  background: var(--soft);
}
.radio-label input[type="radio"]{
  accent-color: var(--primary);
  width:16px;
  height:16px;
}

/* Checkbox group */
.checkbox-group{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.checkbox-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  transition: border-color .2s, background .2s;
}
.checkbox-label:hover{
  border-color: rgba(123,43,106,0.35);
  background: var(--soft);
}
.checkbox-label input[type="checkbox"]{
  accent-color: var(--primary);
  width:16px;
  height:16px;
}

/* Hint text */
.hint{
  margin:6px 0 0;
  font-size:0.88rem;
  color: var(--muted);
}

/* Form actions */
.form-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:6px;
}
.form-actions .btn-primary{
  width:auto;
  flex:1;
}
.form-actions .btn-ghost{
  flex:0 0 auto;
}

/* Input error state */
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{
  border-color:#b00020;
  box-shadow: 0 0 0 3px rgba(176,0,32,0.10);
}

/* Sidebar */
.feedback-sidebar{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sidebar-card{
  padding:22px;
}
.sidebar-card h3{
  margin:0 0 10px;
  color: var(--primary);
}
.sidebar-card h4{
  margin:14px 0 6px;
}
.sidebar-card ul{
  padding-left:18px;
  margin:0;
  color:#2b2b2b;
}
.sidebar-contact{
  display:block;
  padding:16px 22px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  color: var(--muted);
  font-style:normal;
  line-height:1.6;
}

/* Success card */
.feedback-success{
  text-align:center;
  padding:40px 0;
}
.success-card{
  padding:36px;
  max-width:500px;
  margin:0 auto;
}
.success-card h2{
  color: var(--primary);
  margin:0 0 10px;
}
.success-card p{
  margin:0 0 18px;
  color:#2b2b2b;
}

/* ===================== SERVICES PAGE ===================== */
.services-grid{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:18px;
  margin-top:16px;
}
.service-card{
  padding:24px;
  text-align:center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(123,43,106,0.12);
  border-color: rgba(123,43,106,0.18);
}
.service-icon{
  font-size:2.4rem;
  margin-bottom:10px;
}
.service-card h3{
  margin:0 0 8px;
  color: var(--primary);
}
.service-card p{
  margin:0;
  color:#2b2b2b;
}

.benefits-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:16px 0 24px;
}
.benefits-grid h4{ margin:0 0 6px; color: var(--primary); }
.benefits-grid ul,
.benefits-grid ol{
  padding-left:20px;
  margin:8px 0 0;
  color:#2b2b2b;
}

/* ===================== VIDEO PAGE ===================== */
.video-wrap{
  padding:0;
  overflow:hidden;
}
.video-wrap video{
  display:block;
  width:100%;
  max-width:100%;
}
.video-wrap code{
  font-family: Consolas, monospace;
  font-size:0.9em;
}

/* ===================== RESPONSIVE (inner pages) ===================== */
@media (max-width: 980px){
  .feedback-layout{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:1fr; }
  .checkbox-group{ grid-template-columns:1fr; }
}

/* ===================== SEARCH PAGE ===================== */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.search-section{
  padding-top:0;
}

.search-bar{
  display:flex;
  gap:12px;
  padding:16px;
  margin-bottom:18px;
  align-items:center;
}
.search-bar input[type="text"]{
  flex:1;
}
.search-bar .search-submit{
  width:auto;
  margin-top:0;
  white-space:nowrap;
}

.search-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:20px;
  align-items:start;
  overflow:hidden;
}

.filter-panel{
  padding:20px;
  position:sticky;
  top:88px;
}
.filter-title{
  margin:0 0 16px;
  color:var(--primary);
  font-size:1.1rem;
}
.filter-group{
  margin-bottom:14px;
}
.filter-group label{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}
.filter-group select,
.filter-group input[type="date"]{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  outline:none;
  font-size:1rem;
  background:#fff;
  font-family:inherit;
}
.filter-group select:focus,
.filter-group input[type="date"]:focus{
  border-color:rgba(123,43,106,0.65);
  box-shadow:0 0 0 4px rgba(123,43,106,0.12);
}
.filter-fieldset{
  border:none;
  padding:0;
  margin:0 0 14px;
}
.filter-fieldset legend{
  font-weight:800;
  margin-bottom:10px;
  padding:0;
}
.filter-clear{
  width:auto;
  flex-shrink:0;
  white-space:nowrap;
  margin-top:0;
  padding:6px 12px;
  border-radius:10px;
  border:1.5px solid rgba(123,43,106,0.35);
  background:transparent;
  color:var(--primary);
  font-size:0.82rem;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.18s, border-color 0.18s;
}
.filter-clear:hover{
  background:var(--soft);
  border-color:rgba(123,43,106,0.6);
  text-decoration:none;
}

.search-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  min-height:28px;
}
.result-count{
  margin:0;
  font-weight:800;
}
.search-loading{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--muted);
}
.search-loading[hidden]{
  display:none !important;
}

.no-results{
  padding:28px;
  text-align:center;
  font-weight:800;
  color:var(--muted);
  margin-bottom:14px;
}
.no-results[hidden]{
  display:none !important;
}

.search-results{
  display:grid;
  gap:14px;
}

.shipment-card{
  padding:18px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.shipment-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 48px rgba(123,43,106,0.10);
  border-color:rgba(123,43,106,0.18);
}
.shipment-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.shipment-tracking{
  margin:0;
  font-size:1.05rem;
  color:var(--primary);
  letter-spacing:0.3px;
}
.shipment-route{
  margin:0 0 12px;
  font-size:1rem;
  color:#2b2b2b;
}
.route-arrow{
  display:inline-block;
  margin:0 8px;
  color:var(--accent);
  font-weight:900;
}
.shipment-meta{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px 14px;
}
.shipment-meta p{
  margin:0;
  font-weight:700;
}
.meta-label{
  display:block;
  font-size:0.82rem;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.4px;
  margin-bottom:2px;
}

.badge-status{
  white-space:nowrap;
}
.badge-status-created{
  background:#ececec;
  color:#444;
}
.badge-status-picked_up{
  background:#eef3ff;
  color:#1d4ed8;
}
.badge-status-in_transit{
  background:#fff4e6;
  color:#c2410c;
}
.badge-status-out_for_delivery{
  background:#f3e8ff;
  color:#7e22ce;
}
.badge-status-delivered{
  background:#e9fff0;
  color:#0b6b2c;
}

@media (max-width: 980px){
  .search-layout{
    grid-template-columns:1fr;
  }
  .filter-panel{
    position:static;
  }
  .search-bar{
    flex-direction:column;
    align-items:stretch;
  }
  .search-bar .search-submit{
    width:100%;
  }
  .shipment-meta{
    grid-template-columns:1fr;
  }
}

/* ===================== UPLOAD PAGE ===================== */
.upload-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:2rem;
  align-items:start;
}

.upload-card{
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

.upload-card-title{
  font-size:1.25rem;
  font-weight:700;
  margin:0 0 .25rem;
}

/* Drag-and-drop zone */
.drop-zone{
  position:relative;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:2rem 1.5rem;
  text-align:center;
  cursor:pointer;
  transition:border-color .2s, background .2s;
  background:var(--soft);
}
.drop-zone:hover,
.drop-zone.drag-over{
  border-color:var(--primary);
  background:#f5ecf4;
}
.drop-icon{
  width:40px;
  margin:0 auto .75rem;
  opacity:.45;
}
.drop-text{
  margin:0 0 .35rem;
  font-size:.95rem;
  color:var(--text);
}
.drop-browse{
  color:var(--primary);
  font-weight:600;
  text-decoration:underline;
}
.drop-hint{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
}

/* Hidden native file input sits on top of the zone */
.file-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.file-chosen{
  font-size:.85rem;
  color:var(--primary);
  font-weight:600;
  margin:.5rem 0 0;
}

/* Required asterisk */
.req{
  color:#c0392b;
  margin-left:2px;
}

/* Success card */
.upload-success{
  padding:2.5rem 2rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.success-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  font-size:2rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.success-meta{
  background:var(--soft);
  border-radius:12px;
  padding:1rem 1.5rem;
  text-align:left;
  width:100%;
  font-size:.9rem;
}
.success-meta p{ margin:.3rem 0; }

/* Sidebar info card */
.upload-info{
  padding:1.5rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  font-size:.9rem;
}
.upload-info h3{
  font-size:1rem;
  font-weight:700;
  margin:0;
}
.upload-info ul{
  padding-left:0;
  list-style:none;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.divider{
  border:none;
  border-top:1px solid var(--border);
  margin:.25rem 0;
}

@media (max-width:860px){
  .upload-layout{
    grid-template-columns:1fr;
  }
}

/* ===================== AUTH NAV ===================== */
.nav-auth-wrap{
  display:flex; align-items:center; gap:8px; margin-left:8px;
}
.nav-auth{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:12px; font-weight:800;
  font-size:0.88rem; text-decoration:none; white-space:nowrap;
  transition:background 0.18s, color 0.18s, filter 0.18s;
  cursor:pointer; border:1px solid transparent;
}
.nav-auth-login{ background:var(--primary); color:#fff !important; }
.nav-auth-login:hover{ filter:brightness(1.08); text-decoration:none; }
.nav-auth-logout{
  background:transparent; color:var(--primary) !important;
  border-color:rgba(123,43,106,0.4);
}
.nav-auth-logout:hover{ background:var(--soft); text-decoration:none; }
.nav-user-name{
  font-size:0.82rem; font-weight:700; color:var(--muted);
  padding:0 4px; white-space:nowrap;
}

/* ===================== FORM ACTIONS ===================== */
.form-actions{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:6px; align-items:stretch;
}
.form-actions .btn-primary{ width:auto; flex:1; margin-top:0; }
.form-actions .btn-ghost{ flex:1; margin-top:0; }
.name-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:600px){ .name-row{ grid-template-columns:1fr; } }

/* ===================== PROFILE PAGE ===================== */
.profile-wrap{ max-width:100%; margin:0 auto; }
.profile-card{
  overflow:hidden; display:grid;
  grid-template-columns:300px 1fr;
  grid-template-rows:auto 1fr;
  min-height:400px; text-align:left;
}
.profile-banner{
  grid-column:1/-1; height:120px;
  background:
    radial-gradient(ellipse 600px 200px at 90% 140%, rgba(255,138,31,0.35), transparent 55%),
    radial-gradient(ellipse 400px 180px at 5% -10%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(135deg, #3a1030 0%, #7b2b6a 100%);
}
.profile-avatar-wrap{
  padding:0 32px 32px; margin-top:-46px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px; position:relative;
}
.profile-avatar-wrap::after{
  content:""; position:absolute; right:0; top:80px; bottom:0;
  width:1px; background:var(--border);
}
.profile-avatar{
  width:92px; height:92px; border-radius:50%;
  background:linear-gradient(135deg, #7b2b6a 0%, #4f1b43 100%);
  color:#fff; font-size:2.2rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:4px solid #fff; box-shadow:0 8px 28px rgba(123,43,106,0.3);
  letter-spacing:-1px; user-select:none; flex-shrink:0;
}
.profile-name{ font-size:1.3rem; font-weight:900; color:var(--text); margin:8px 0 0; letter-spacing:-0.2px; }
.profile-meta{ font-size:0.83rem; color:var(--muted); margin:0; font-weight:600; }
.profile-body{
  padding:32px 36px; display:flex; flex-direction:column;
  justify-content:space-between; gap:20px;
}
.profile-info{ background:var(--soft); border-radius:16px; padding:4px 0; border:1px solid var(--border); }
.profile-info-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px; border-bottom:1px solid var(--border);
}
.profile-info-row:last-child{ border-bottom:none; }
.profile-info-label{ font-size:0.78rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; flex-shrink:0; }
.profile-info-value{ font-size:0.92rem; font-weight:700; color:var(--text); }
.profile-actions{ display:flex; gap:12px; }
.btn-signout{
  flex:1; padding:14px; border-radius:14px; border:none;
  background:var(--primary); color:#fff; font-size:0.95rem; font-weight:900;
  cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center;
  transition:filter 0.18s, transform 0.12s; font-family:inherit;
}
.btn-signout:hover{ filter:brightness(1.1); text-decoration:none; }
.btn-signout:active{ transform:scale(0.985); }
.btn-dashboard{
  flex:1; padding:14px; border-radius:14px;
  border:1.5px solid rgba(123,43,106,0.3); background:transparent;
  color:var(--primary); font-size:0.95rem; font-weight:900;
  cursor:pointer; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center;
  transition:background 0.18s, border-color 0.18s, transform 0.12s; font-family:inherit;
}
.btn-dashboard:hover{ background:var(--soft); border-color:rgba(123,43,106,0.5); text-decoration:none; }
.btn-dashboard:active{ transform:scale(0.985); }
@media(max-width:760px){
  .profile-card{ grid-template-columns:1fr; }
  .profile-banner{ height:100px; }
  .profile-avatar-wrap{ border-right:none; border-bottom:1px solid var(--border); padding:0 24px 24px; }
  .profile-body{ padding:24px; }
  .profile-actions{ flex-direction:column; }
}

/* ===================== DARK FOOTER ===================== */
.site-footer{
  background:#4f1b43;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-inner{ padding:48px 0 0; }
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px 180px;
  align-items:start;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-logo{
  width:36px; height:36px; object-fit:contain;
  filter:brightness(0) invert(1); opacity:0.95;
}
.footer-brand strong{ font-size:1.1rem; font-weight:900; color:#fff; letter-spacing:-0.2px; }
.site-footer .muted{
  color:rgba(255,255,255,0.6); font-size:0.88rem; line-height:1.65; margin:0 0 4px;
}
.site-footer .small{ font-size:0.82rem; color:rgba(255,255,255,0.35); }
.footer-title{
  margin:0 0 14px; font-size:0.7rem; font-weight:800;
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-links a{
  color:rgba(255,255,255,0.75); font-size:0.91rem;
  font-weight:500; text-decoration:none; transition:color 0.15s ease;
}
.footer-links a:hover{ color:#fff; text-decoration:none; }
.footer-bottom{
  padding:18px 0; display:flex; align-items:center;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.footer-bottom p{ margin:0; font-size:0.8rem; color:rgba(255,255,255,0.35); }
.footer-badge{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:999px; border:1px solid rgba(255,255,255,0.2);
  background:rgba(255,255,255,0.08); font-size:0.73rem;
  font-weight:700; color:rgba(255,255,255,0.6); letter-spacing:0.04em;
}
.footer-badge-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); animation:footerPulse 2.2s ease-in-out infinite;
}
@keyframes footerPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}
@media(max-width:980px){
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ===================== SEARCH PAGE — ENHANCED ===================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.search-hero{
  background:
    radial-gradient(700px 220px at 10% 50%, rgba(123,43,106,0.07), transparent 55%),
    radial-gradient(600px 220px at 90% 50%, rgba(255,138,31,0.07), transparent 55%),
    var(--soft);
  border-bottom:1px solid var(--border);
  padding:32px 0 28px;
}
.search-hero h1{ margin:0 0 6px; color:var(--primary); }
.search-hero p{ margin:0 0 22px; color:var(--muted); max-width:62ch; }
.search-bar{
  display:flex; gap:10px; align-items:center;
}
.search-bar input[type="text"]{
  flex:1; padding:14px 18px; border-radius:14px;
  border:1.5px solid var(--border); font-size:1rem;
  background:#fff; outline:none;
  transition:border-color .2s, box-shadow .2s; font-family:inherit;
}
.search-bar input[type="text"]:focus{
  border-color:rgba(123,43,106,0.6);
  box-shadow:0 0 0 4px rgba(123,43,106,0.10);
}
/* search-submit button removed — real-time search, no button needed */
.search-section{ padding-top:0; }
.search-layout{
  display:grid; grid-template-columns:260px 1fr;
  gap:20px; align-items:start; padding-top:24px;
}
.filter-panel{ padding:20px; position:sticky; top:88px; overflow:hidden; min-width:0; }
.filter-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border);
  overflow:hidden;
}
.filter-title{ margin:0; color:var(--primary); font-size:1rem; font-weight:900; flex-shrink:0; }
.filter-clear{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:12px;
  border:1.5px solid rgba(123,43,106,0.35);
  background:transparent; color:var(--primary);
  font-size:0.82rem; font-weight:800;
  cursor:pointer; font-family:inherit; text-decoration:none;
  transition:background 0.18s, border-color 0.18s;
  width:40%; margin-top:8px;
}
.filter-clear:hover{
  background:var(--soft); border-color:rgba(123,43,106,0.6); text-decoration:none;
}
.filter-group{ margin-bottom:14px; }
.filter-group label{
  display:block; font-weight:800; font-size:0.78rem;
  text-transform:uppercase; letter-spacing:0.06em;
  color:var(--muted); margin-bottom:6px;
}
.filter-group select,
.filter-group input[type="date"]{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); outline:none;
  font-size:0.9rem; background:#fff; font-family:inherit;
  color:var(--text); transition:border-color .2s, box-shadow .2s;
}
.filter-group select:focus,
.filter-group input[type="date"]:focus{
  border-color:rgba(123,43,106,0.6);
  box-shadow:0 0 0 3px rgba(123,43,106,0.10);
}
.filter-group select.is-filtered{
  border-color:var(--primary); background:var(--soft); color:var(--primary); font-weight:700;
}
.filter-fieldset{
  border:none; padding:0; margin:14px 0;
  border-top:1px solid var(--border); padding-top:14px;
}
.filter-fieldset legend{
  font-weight:800; font-size:0.78rem; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--muted); margin-bottom:10px; padding:0;
}
.search-results-wrap{ min-height:300px; }
.search-results-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px; min-height:32px; flex-wrap:wrap;
}
.result-count{ margin:0; font-weight:700; font-size:0.9rem; color:var(--muted); }
.result-count strong{ color:var(--text); font-weight:900; }
.search-loading{
  display:flex; align-items:center; gap:8px;
  font-size:0.88rem; font-weight:700; color:var(--muted);
}
.search-loading[hidden]{ display:none !important; }
.no-results{
  padding:52px 20px; text-align:center; margin-bottom:14px;
}
.no-results[hidden]{ display:none !important; }
.no-results-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
}
.no-results-icon img{
  width:72px;
  height:72px;
  object-fit:contain;
  opacity:0.55;
  filter:saturate(0.4);
}
.no-results h3{ margin:0 0 6px; color:var(--primary); }
.no-results p{ margin:0; color:var(--muted); font-size:0.92rem; }
.search-results{ display:grid; gap:12px; }
.shipment-card{
  padding:20px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
}
.shipment-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(123,43,106,0.10);
  border-color:rgba(123,43,106,0.2);
}
.shipment-card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:8px;
}
.shipment-tracking{ margin:0; font-size:1rem; font-weight:900; color:var(--primary); letter-spacing:0.3px; }
.shipment-carrier-tag{
  font-size:0.73rem; font-weight:800; color:var(--muted);
  background:var(--soft); padding:3px 10px; border-radius:999px;
  border:1px solid var(--border); white-space:nowrap; flex-shrink:0;
}
.shipment-route{
  margin:0 0 14px; font-size:0.93rem; color:#2b2b2b;
  display:flex; align-items:center; gap:6px;
}
.route-arrow{ color:var(--accent); font-weight:900; display:inline-block; }
.shipment-meta{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px 12px; padding-top:12px; border-top:1px solid var(--border);
}
.shipment-meta p{ margin:0; }
.meta-label{
  display:block; font-size:0.72rem; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px; margin-bottom:3px;
}
.meta-value{ font-size:0.88rem; font-weight:700; color:var(--text); }
.badge-status{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:999px; font-size:0.77rem;
  font-weight:800; white-space:nowrap;
}
.badge-status::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; opacity:0.7; flex-shrink:0;
}
.badge-status-created       { background:#ececec; color:#444; }
.badge-status-picked_up     { background:#eef3ff; color:#1d4ed8; }
.badge-status-in_transit    { background:#fff4e6; color:#c2410c; }
.badge-status-out_for_delivery{ background:#f3e8ff; color:#7e22ce; }
.badge-status-delivered     { background:#e9fff0; color:#0b6b2c; }
@media(max-width:980px){
  .search-layout{ grid-template-columns:1fr; padding-top:16px; }
  .filter-panel{ position:static; }
  .search-bar{ flex-direction:column; align-items:stretch; }
  .shipment-meta{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:480px){
  .shipment-meta{ grid-template-columns:1fr; }
}

/* ===================== FEEDBACK SUCCESS MODAL ===================== */
.modal-overlay{
  position:fixed; inset:0; z-index:10000;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay[hidden]{ display:none !important; }
.modal-box{
  background:#fff; border-radius:24px;
  box-shadow:0 32px 80px rgba(0,0,0,0.22);
  padding:44px 40px 40px; max-width:480px; width:100%;
  text-align:center; display:flex; flex-direction:column;
  align-items:center; outline:none; animation:modalIn 0.25s ease;
}
@keyframes modalIn{
  from{ opacity:0; transform:scale(0.93) translateY(12px); }
  to{   opacity:1; transform:scale(1) translateY(0); }
}
.modal-icon{
  width:68px; height:68px; border-radius:50%;
  background:var(--primary); color:#fff; font-size:2rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; line-height:1;
}
.modal-box h2{ margin:0 0 10px; color:var(--primary); font-size:1.55rem; font-weight:900; }
.modal-box p{ margin:0 0 28px; color:#444; line-height:1.6; font-size:1rem; }
.modal-actions{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center; width:100%;
}
.modal-actions .btn{ flex:1; min-width:140px; margin-top:0; padding:13px 20px; }
.modal-actions .btn-primary{ width:auto; margin-top:0; }
.modal-actions .btn-ghost{ margin-top:0; }
@media(max-width:480px){
  .modal-box{ padding:32px 22px 28px; }
  .modal-actions{ flex-direction:column; }
  .modal-actions .btn{ width:100%; }
}


/* ===================== SIDEBAR NAV ===================== */
/* Hide sidebar by default — only shown when toggled open */
.side-nav,
.sidebar,
.sidebar-overlay{
  display:none;
}
.sidebar.open{
  display:flex;
}
.sidebar-overlay.open{
  display:block;
}

/* Full sidebar styles */
.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:200;
  opacity:0;
  transition:opacity 0.28s ease;
}
.sidebar-overlay.open{ opacity:1; }

.sidebar{
  position:fixed;
  top:0; left:0;
  height:100%;
  width:280px;
  background:#fff;
  border-right:1px solid var(--border);
  box-shadow:4px 0 32px rgba(0,0,0,0.12);
  z-index:300;
  flex-direction:column;
  transform:translateX(-100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y:auto;
}
.sidebar.open{ transform:translateX(0); }

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg, #3a1030 0%, var(--primary) 100%);
}
.sidebar-header .brand-name{ color:#fff; }
.sidebar-header .brand-logo{ width:36px; height:36px; }

.sidebar-close{
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  width:32px; height:32px;
  border-radius:8px;
  cursor:pointer;
  font-size:0.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s;
  flex-shrink:0;
}
.sidebar-close:hover{ background:rgba(255,255,255,0.25); }

.sidebar-list{
  list-style:none;
  padding:12px 10px;
  margin:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:12px;
  font-weight:700;
  font-size:0.93rem;
  color:var(--text);
  text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.sidebar-link:hover{
  background:var(--soft);
  color:var(--primary);
  text-decoration:none;
}
.sidebar-link.is-active{
  background:var(--soft);
  color:var(--primary);
}
.sidebar-footer{
  padding:10px 10px 20px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sidebar-dashboard{ color:var(--accent) !important; font-weight:900; }
.sidebar-signout{ color:#b00020 !important; }
.sidebar-signout:hover{ background:#fff0f0 !important; color:#b00020 !important; }