/* ---------- Local font: LOKICOLA ---------- */
@font-face {
  font-family: 'LokiCola';
  src:
    url('fonts/LOKICOLA.woff2') format('woff2'),
    url('fonts/LOKICOLA.woff') format('woff'),
    url('fonts/LOKICOLA.ttf') format('truetype'),
    url('fonts/LOKICOLA.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ---------- Global ---------- */
:root{
  --brand-top-1:#1d70ba;
  --brand-top-2:#1a63a5;
  --brand-top-3:#174d81;

  --chip-bg:#f6f8fc;
  --chip-bd:#d3def1;
  --chip-tx:#0d47a1;

  --kpi-shadow:0 18px 42px rgba(17,38,146,.12), 0 2px 8px rgba(17,38,146,.10);
  --soft-shadow:0 10px 26px rgba(0,0,0,.08);

  --accent:#3b82f6;

  /* ===== Footer sizing (compact pill) ===== */
  --footer-h: 34px;           /* compact height you wanted */
  --footer-inner-max: 760px;  /* cap width on large screens */
  --footer-inner-wide: 52vw;  /* narrower than page width */
}

html,body{height:100%}
body{
  font-family: 'Ubuntu', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:#f5f7fb;
  color:#1f2937;

  /* keep last rows visible above fixed footer */
  padding-bottom: calc(var(--footer-h) + 24px);
}
a{text-decoration:none}

/* ---------- Header ---------- */
.app-header{
  background: linear-gradient(180deg, var(--brand-top-1) 0%, var(--brand-top-2) 45%, var(--brand-top-3) 100%);
  color:#fff;
  position:sticky; top:0; z-index:1000;
}
.brand-wrap{align-items:center}
.app-logo{
  width:90px;height:90px;object-fit:contain;border-radius:50%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
}
.brand-line-2{
  font-family:'LokiCola', cursive;
  font-size:3rem; color:#ffd34d; margin-left:8px; line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.22);
  position:relative; z-index:1;
}

/* Top tabs */
.top-tabs .tab-pill{
  color:#fff; padding:.45rem 1rem; border-radius:1.6rem; font-weight:700;
  background: rgba(10,35,70,.35);
  border:1px solid rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 14px rgba(0,0,0,.22);
  transition:transform .18s, box-shadow .18s, background-color .18s, border-color .18s;
}
.top-tabs .tab-pill:hover{
  transform: translateY(-2px);
  background: rgba(10,35,70,.5);
  border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px rgba(0,0,0,.28);
}
.top-tabs .tab-pill.active{
  background:#fff; color:#1d70ba; border-color:#fff; transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* ---------- Tiny truck animation lane (overlay) ---------- */
.header-lane{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-40%);
  height:26px; pointer-events:none; z-index:3;
}
.truck{
  --w:34px; --h:14px; --speed:2.2s;
  position:absolute; top:50%; left:-70px; width:var(--w); height:var(--h);
  margin-top:calc(var(--h)/-2);
  border-radius:4px;
  background:linear-gradient(180deg,#fff 0%,#f6f8fc 65%,#e9eef7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 5px rgba(0,0,0,.25);
  animation: driveAcross var(--speed) linear infinite, hueSpin var(--speed) linear infinite;
}
.truck::before{
  content:""; position:absolute; left:2px; right:9px; top:2px; height:4px;
  border-radius:3px; background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0));
}
.truck::after{
  content:""; position:absolute; right:-9px; top:4px; width:9px; height:9px; border-radius:50%;
  background: radial-gradient(circle,#fff 30%,rgba(255,255,255,.6) 45%,rgba(255,255,255,0) 70%);
  filter:blur(1px);
}
.wheel{position:absolute; bottom:-6px; width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #111 55%, #000 56%),
             conic-gradient(#444 0 25%, #222 0 50%, #444 0 75%, #222 0 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.15);
  animation: spin .45s linear infinite;
}
.w1{left:4px}.w2{right:4px}
.trail{position:absolute; top:50%; left:-22px; width:26px; height:2px; margin-top:-1px;
  background:linear-gradient(90deg,rgba(255,255,255,.85),rgba(255,255,255,0));
  border-radius:2px; filter:blur(.5px); opacity:0; animation: trailFade var(--speed) linear infinite;
}
.t1{animation-delay:.05s}.t2{animation-delay:.12s}
@keyframes driveAcross{
  0%{left:-70px; transform:translateY(0)}
  12.5%{left:10%; transform:translateY(-6px)}
  25%{left:25%; transform:translateY(6px)}
  37.5%{left:40%; transform:translateY(-6px)}
  50%{left:55%; transform:translateY(6px)}
  62.5%{left:70%; transform:translateY(-5px)}
  75%{left:85%; transform:translateY(5px)}
  100%{left:calc(100% + 70px); transform:translateY(0)}
}
@keyframes hueSpin{0%{filter:hue-rotate(0)}50%{filter:hue-rotate(25deg)}100%{filter:hue-rotate(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes trailFade{
  0%{opacity:0; transform:translateX(0)}
  10%{opacity:.8}
  60%{opacity:.3; transform:translateX(-12px)}
  100%{opacity:0; transform:translateX(-24px)}
}

/* ---------- Cards / panels ---------- */
.card{border:none; border-radius:16px; box-shadow: var(--soft-shadow)}
.card .card-header{background:#fff; border-bottom:1px solid #eef2f7}
.chart-card .card-body{min-height:280px}
.donut-body{position:relative}
.donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none;
}
.donut-center .donut-total{font-size:2.2rem; font-weight:800; color:#0b3d91}
.donut-center .donut-sub{font-size:.9rem; color:#64748b}

/* =========================================================
   KPI GRID
   ========================================================= */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap:18px;
  align-items:stretch;
  margin-top:.8rem;
}
.kpi-card{
  position:relative;
  isolation:isolate;
  background: linear-gradient(180deg, #ffffffcc 0%, #f7f9fccf 100%);
  backdrop-filter: blur(8px);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow: var(--kpi-shadow);
  overflow:hidden;
  transform:translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120px 80px at 20% 10%, color-mix(in oklab, var(--accent) 22%, white), transparent 60%),
    radial-gradient(160px 100px at 80% 90%, rgba(255,255,255,.7), transparent 60%);
  opacity:.65; pointer-events:none;
}
.kpi-card::after{
  content:"";
  position:absolute;
  left:-40%; top:-40%;
  width:80%; height:180%;
  background: linear-gradient(120deg, transparent 0%,
              color-mix(in oklab, var(--accent) 40%, white) 45%, transparent 55%);
  transform: rotate(12deg);
  opacity:0; transition: opacity .25s ease;
}
.kpi-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px color-mix(in oklab, var(--accent) 24%, transparent), var(--kpi-shadow);
  border-color: color-mix(in oklab, var(--accent) 28%, white);
}
.kpi-card:hover::after{ opacity:.55; }
.kpi-card .card-body{
  position:relative; z-index:1;
  padding:1.05rem 1rem 1.1rem; text-align:center;
}
.kpi-card .display-6,.kpi-card .h2{ margin:.15rem 0 .15rem; }
.kpi-sub{font-size:.8rem; color:#8a94a6; margin-top:.1rem}

.kpi-total     { --accent:#1f6feb; }
.kpi-pending   { --accent:#f59e0b; }
.kpi-delivered { --accent:#22c55e; }
.kpi-failed    { --accent:#f43f5e; }
.kpi-return    { --accent:#fb923c; }

.kpi-total     .display-6{ color:#0d47a1; }
.kpi-pending   .h2{ color:#ffb300; }
.kpi-delivered .h2{ color:#16a34a; }
.kpi-failed    .h2{ color:#ef4444; }
.kpi-return    .h2{ color:#f59e0b; }

.kpi-card:hover .h2,
.kpi-card:hover .display-6{
  text-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 26%, transparent);
}

/* ---------- Filter bar ---------- */
.filter-bar{
  border-radius:16px;
  background:#fff;
  box-shadow: var(--soft-shadow);
  padding:.6rem .8rem !important;
}
.filter-bar .chip-pill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .9rem; border-radius:999px; font-weight:700; font-size:.95rem;
  color:var(--chip-tx); background:var(--chip-bg); border:1px solid var(--chip-bd);
  box-shadow: inset 0 1px 0 #fff;
  transition: all .18s ease;
}
.filter-bar .chip-pill:hover{background:#e8f0fe; border-color:#bdd0f6; transform:translateY(-1px)}
.filter-bar .chip-pill.active{
  color:#fff; background:linear-gradient(180deg,#2d6bff,#1b55e6);
  border-color:transparent; box-shadow: 0 8px 18px rgba(37,99,235,.25);
}
.filter-bar .form-control{height:36px; padding:.25rem .6rem; border-radius:10px}
.filter-bar .btn-sm{height:36px; border-radius:10px; padding:.25rem .8rem; font-weight:700}
.filter-bar .btn-primary{background:#0c66ff; border-color:#0c66ff}
.filter-bar .btn-primary:hover{background:#0b5be6; border-color:#0b5be6}
.filter-bar .btn-outline-secondary{border-color:#c6cfdd; color:#334155}
.filter-bar .btn-outline-secondary:hover{background:#f1f5f9}
.filter-bar .vr{display:none !important}
.filter-bar .export-group .btn{
  background:linear-gradient(180deg,#2d6bff,#1b55e6);
  border:none; color:#fff; font-weight:800; letter-spacing:.2px;
  box-shadow: 0 12px 22px rgba(37,99,235,.28);
}
.filter-bar .export-group .btn:hover{
  transform:translateY(-1px);
  box-shadow: 0 16px 26px rgba(37,99,235,.34)
}

/* ---------- Table (uniform row height across tabs) ---------- */
.table { table-layout: auto; }
.table thead th{background:#f1f3f4; font-weight:700; border-bottom:1px solid #e5e7eb}
.table th, .table td{
  padding: .55rem .75rem !important;
  line-height: 1.2 !important;
  vertical-align: middle !important;
  white-space: nowrap;          /* keeps rows even in height */
}
.colorful-table tbody tr:hover{background:#f9fbff}
.badge{border-radius:999px; padding:.45rem .65rem; font-weight:700}
.badge.action-scan{background:#e9f5ff; color:#1167b1}
.badge.action-update{background:#f6f5ff; color:#6941c6}
.badge.action-create{background:#e7f8f0; color:#107a4f}
.chip{display:inline-block; padding:.25rem .65rem; border-radius:1rem; font-size:.85rem; font-weight:700}
.chip-new{background:#fff7e6; color:#a15c00; border:1px solid #ffd18b}
.chip-delivered{background:#e8f5e9; color:#1b5e20; border:1px solid #66bb6a}
.chip-failed{background:#ffebee; color:#b71c1c; border:1px solid #ef5350}
.chip-return{background:#fff3e0; color:#e65100; border:1px solid #ffb74d}

/* =========================================================
   PAGINATION
   ========================================================= */
.recent-pager,
.pager-row,
.pagination,
.page-links,
.pager,
#activity-pager {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 0;
}
.pagination .page-item,
.pagination li{ list-style:none; }
.pagination .page-link{
  border:none;
  background:linear-gradient(135deg,#4f46e5,#0ea5e9);
  color:#fff !important;
  border-radius:50% !important;
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.pagination .page-link:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.22); }
.pagination .active .page-link{
  background:linear-gradient(135deg,#22c55e,#16a34a) !important;
  box-shadow:0 10px 22px rgba(34,197,94,.45);
}
.pagination .disabled .page-link{ opacity:.55; pointer-events:none; }

/* ---------- Fix header truck flicker ---------- */
html, body { overflow-x: hidden; }
.app-header, .header-lane { overflow: hidden; }
.truck { will-change: transform; }

/* =============================
   Modern Sales page upgrades
   ============================= */
.card-glass {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, #ffffffcc 0%, #f7f9ffcf 100%);
  box-shadow: 0 18px 42px rgba(17,38,146,.10), 0 2px 8px rgba(17,38,146,.08);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card-glass:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(17,38,146,.14), 0 3px 10px rgba(17,38,146,.10);
}
.bg-white-ghost{
  background: #ffffffee !important;
  backdrop-filter: blur(8px);
}
.filter-glass {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, #ffffffbf 0%, #f4f7ffbf 100%);
  box-shadow: var(--soft-shadow);
}
.chip-gradient {
  background: var(--chip-bg);
  border: 1px solid var(--chip-bd);
  color: var(--chip-tx);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0,0,0,.08);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.chip-gradient:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg,#e9f0ff,#dfe9ff);
  border-color: #c4d6ff;
}
.chip-gradient.active{
  color:#fff;
  background: linear-gradient(135deg,#4f46e5,#0ea5e9);
  border-color: transparent;
  box-shadow: 0 12px 22px rgba(37,99,235,.28);
}
.btn-gradient{
  --g1:#4f46e5; --g2:#0ea5e9;
  background: linear-gradient(135deg,var(--g1),var(--g2));
  border: none;
  color:#fff;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 12px;
  box-shadow: 0 12px 22px rgba(37,99,235,.28);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-gradient:hover{ transform: translateY(-1px); filter: saturate(1.05); box-shadow: 0 16px 28px rgba(37,99,235,.34) }
.btn-ghost{
  background: transparent;
  border:1px solid #c8d3e8;
  color:#334155;
  border-radius: 12px;
  font-weight:700;
}
.btn-ghost:hover{ background:#eef2ff }
.btn-glow { box-shadow: 0 0 0 rgba(34,197,94,.0); }
.btn-glow:hover { box-shadow: 0 0 24px rgba(34,197,94,.45); }
.fancy-input{
  border-radius: 12px;
  border:1px solid #cdd9ee;
  background:#fff;
  box-shadow: inset 0 1px 0 #fff;
  transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease;
}
.fancy-input:focus{
  border-color:#8ab4ff;
  box-shadow: 0 0 0 3px rgba(138,180,255,.35);
}
.modern-table thead th{
  background: linear-gradient(180deg,#f4f6fb,#eef2f9);
  border-bottom: 1px solid #e5e7eb;
  font-weight: 800;
}
.modern-table tbody tr{ transition: background .12s ease, transform .06s ease; }
.modern-table tbody tr:hover{ background: #f9fbff; }

/* =========================================================
   COMPACT, CENTERED PILL FOOTER (fixed) — works with:
   <footer class="app-footer"><div class="container footer-3col">...</div></footer>
   ========================================================= */
.app-footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--footer-h) + 8px); /* room for the pill spacing */
  padding-bottom: 8px;                 /* gap from screen edge */
  z-index: 1030;

  background: transparent;  /* edge transparent; pill is the inner element */
  color: #fff;
  box-shadow: none;
}

/* Use your existing .container.footer-3col as the pill */
.app-footer .footer-3col{
  width: min(var(--footer-inner-max), var(--footer-inner-wide));
  height: var(--footer-h);
  margin: 0 auto;           /* centered */
  padding: 0 8px;

  border-radius: 8px;
  background: linear-gradient(180deg, var(--brand-top-1) 0%, var(--brand-top-2) 45%, var(--brand-top-3) 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.25);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.footer-left{ text-align:left; }
.footer-middle{ text-align:center; }
.footer-right{ text-align:right; }

.app-footer small{
  opacity: .65;               /* softer text */
  font-weight: 600;
  letter-spacing: .1px;
  font-size: .8rem;           /* compact text */
  color: #fff;
}

/* Mobile sizing */
@media (max-width: 768px){
  :root{
    --footer-h: 32px;
    --footer-inner-wide: 70vw;
  }
  body{ padding-bottom: calc(var(--footer-h) + 22px); }
  .app-footer small{ font-size: .78rem; }
}