:root{
  --app-bg:#f4f7fc;
  --app-surface:rgba(255,255,255,.92);
  --app-primary:#0d6efd;
  --app-primary-2:#2563eb;
  --app-muted:#6b7280;
  --app-border:rgba(17,24,39,.08);
  --app-shadow:0 10px 30px rgba(2,6,23,.08);
  --app-shadow-soft:0 6px 16px rgba(2,6,23,.06);
  --radius-xl:18px;
  --radius-lg:14px;
  --radius-md:12px;
}

html,body{height:100%;}
body{
  background:var(--app-bg);
}

/* Shared card polish */
.card.rounded-3, .card.rounded-4, .card.rounded-4,
.card.rounded-2, .card.rounded-1{
  border:1px solid var(--app-border);
}

/* Slight lift on hover (desktop only) */
@media (hover:hover) and (pointer:fine){
  .bb-card-hover{
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    border-color:rgba(17,24,39,.06);
  }
  .bb-card-hover:hover{
    transform:translateY(-2px);
    box-shadow:var(--app-shadow-soft);
    border-color:rgba(37,99,235,.18);
  }
  .bb-btn-hover{
    transition:transform .12s ease, box-shadow .12s ease;
  }
  .bb-btn-hover:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(13,110,253,.18);
  }
}

/* Toast (replaces alert UX) */
.bb-toast-wrap{
  position:fixed;
  right:14px;
  top:14px;
  z-index:20000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.bb-toast{
  pointer-events:auto;
  min-width:240px;
  max-width:340px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  background:rgba(17,24,39,.92);
  box-shadow:0 14px 40px rgba(2,6,23,.22);
  overflow:hidden;
}
.bb-toast .bb-toast-inner{
  padding:12px 14px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.bb-toast .bb-toast-ic{
  margin-top:2px;
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
}
.bb-toast .bb-toast-title{
  font-weight:800;
  font-size:0.92rem;
  line-height:1.1;
}
.bb-toast .bb-toast-msg{
  font-size:.86rem;
  color:rgba(255,255,255,.86);
  margin-top:2px;
}
.bb-toast .bb-toast-bar{
  height:3px;
  background:rgba(255,255,255,.22);
}
.bb-toast.bb-toast-success{ background:rgba(13,148,108,.96); }
.bb-toast.bb-toast-danger{ background:rgba(220,38,38,.96); }
.bb-toast.bb-toast-warning{ background:rgba(234,179,8,.96); color:#111827; }
.bb-toast.bb-toast-warning .bb-toast-msg{ color:rgba(17,24,39,.78); }
.bb-toast.bb-toast-warning .bb-toast-ic{ background:rgba(17,24,39,.09); }

/* Skeleton */
.bb-skeleton{
  position:relative;
  overflow:hidden;
  background:rgba(17,24,39,.06);
  border:1px solid rgba(17,24,39,.06);
  border-radius:12px;
}
.bb-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:bb-shimmer 1.1s infinite;
}
@keyframes bb-shimmer{
  100%{ transform:translateX(100%); }
}

.bb-reduce-motion *{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
  scroll-behavior:auto !important;
}

/* Subtle focus ring */
:focus-visible{
  outline:3px solid rgba(13,110,253,.32);
  outline-offset:2px;
  border-radius:10px;
}

/* App-like premium background (used across dashboards) */
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(13,110,253,.10), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(#f4f7fc, #f4f7fc);
}

/* Agent dashboard (mobile) */
.desktop-layout{ display:block; }
.mobile-layout{ display:none; }

@media (max-width: 768px){
  .desktop-layout{ display:none; }
  .mobile-layout{
    display:flex;
    flex-direction:column;
    height:100vh;
    background:transparent;
    position:relative;
  }
  .mobile-header{
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(10px);
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(17,24,39,.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:10;
    border-radius: 0 0 18px 18px;
  }
  .user-chip{
    background: rgba(37,99,235,.10);
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(13,110,253,.98);
    border:1px solid rgba(13,110,253,.16);
  }
  .mobile-main{
    flex:1;
    overflow-y:auto;
    padding:1rem 1rem 92px 1rem;
  }
  .bottom-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    border-top:1px solid rgba(17,24,39,.08);
    display:flex;
    justify-content:space-around;
    padding: 8px 12px 12px;
    z-index:20;
  }
  .nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    background:none;
    border:none;
    font-size:0.72rem;
    color: rgba(107,114,128,.95);
    transition: all .12s ease;
    padding:6px 12px;
    border-radius: 999px;
    font-weight: 600;
    cursor:pointer;
  }
  .nav-item i{ font-size: 1.55rem; }
  .nav-item.active{
    color: var(--app-primary);
    background: rgba(37,99,235,.10);
    border: 1px solid rgba(13,110,253,.18);
  }

  /* Agent dashboard UI pieces */
  .quick-actions{ display:flex; gap:12px; margin:1rem 0; flex-wrap:wrap; }
  .action-btn{
    flex:1;
    min-width:120px;
    padding:0.9rem 1rem;
    border-radius:2rem;
    font-weight:700;
    border:1px solid rgba(17,24,39,.08);
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  }
  .action-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(2,6,23,.08);
    border-color: rgba(13,110,253,.18);
  }
  .primary-btn{
    background: rgba(13,110,253,.98);
    color:#fff;
    border-color: rgba(13,110,253,.35);
  }
  .outline-btn{
    background: rgba(255,255,255,.9);
    color: rgba(13,110,253,.98);
    border:1.5px solid rgba(13,110,253,.45);
  }

  .section-header{
    font-weight: 900;
    margin: 1rem 0 0.55rem 0;
    display:flex;
    align-items:center;
    gap:8px;
    color: rgba(17,24,39,.9);
  }
  .stats-row{ display:flex; gap:12px; margin:1rem 0; }
  .stat-chip{
    background: rgba(255,255,255,.92);
    flex:1;
    text-align:center;
    padding: 12px 6px;
    border-radius: 1rem;
    font-weight: 800;
    border:1px solid rgba(17,24,39,.08);
    box-shadow: 0 10px 26px rgba(2,6,23,.04);
  }
  .tasks-list{ list-style:none; padding:0; margin:0; }
  .task-item{
    background: rgba(255,255,255,.92);
    border-radius: 1rem;
    padding: 0.95rem;
    margin-bottom: 10px;
    border-left: 4px solid rgba(13,110,253,.95);
    border:1px solid rgba(17,24,39,.08);
    box-shadow: 0 10px 26px rgba(2,6,23,.04);
  }
  .settings-card{ }
  .settings-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(226,232,240,.8);
  }
  .btn-gps-sm{
    background: rgba(13,110,253,.98);
    border:none;
    color:#fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: .78rem;
    font-weight:800;
  }
  .btn-danger-sm{
    background: rgba(220,38,38,.98);
    color:#fff;
    padding: 6px 14px;
    border-radius: 30px;
    text-decoration:none;
    font-size: .78rem;
    font-weight:800;
    border:1px solid rgba(220,38,38,.35);
  }

  /* Performance tab */
  .metric-card{
    background: rgba(255,255,255,.9);
    border:1px solid rgba(17,24,39,.08);
    border-radius: 18px;
    box-shadow: var(--app-shadow-soft);
  }
  .metric-title{ font-weight: 900; color: rgba(17,24,39,.92); }
  .metric-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; text-align:center; }
  .metric-value{ font-size: 2rem; font-weight: 900; display:block; }
  .progress-bar-custom{
    background: rgba(13,110,253,.14);
    border:1px solid rgba(13,110,253,.18);
    color: rgba(13,110,253,.98);
    border-radius: 999px;
    padding: 4px;
    font-size: 0.75rem;
    text-align:center;
  }

  /* Tabs */
  .tab-content{ display:none; }
  .tab-content.active{ display:block; }
}

/* Shared dashboard components */
.bb-card{
  border:1px solid var(--app-border);
  background: var(--app-surface);
  border-radius: 18px;
  box-shadow: var(--app-shadow-soft);
}

/* -----------------------------
   Premium Animations (Agent UI)
   ----------------------------- */
@keyframes bb-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes bb-pop{
  0%{ transform:scale(.98); opacity:.6; }
  60%{ transform:scale(1.02); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes bb-glow-pulse{
  0%{ box-shadow: 0 0 0 rgba(13,110,253,0); }
  45%{ box-shadow: 0 0 18px rgba(13,110,253,.28); }
  100%{ box-shadow: 0 0 0 rgba(13,110,253,0); }
}
@keyframes bb-sheen{
  from{ transform:translateX(-120%); }
  to{ transform:translateX(120%); }
}

/* Respect reduced motion (app-ui.js adds .bb-reduce-motion) */
.bb-reduce-motion *{
  animation: none !important;
  transition: none !important;
}

/* On first paint, gently animate agent dashboard cards */
.desktop-layout .card,
.mobile-layout .card{
  animation: bb-fade-up .48s ease both;
}

/* prevent animation delays for admin dashboard sections */
.bb-admin-section.active{
  animation: bb-fade-up .26s ease both;
}
@media (min-width: 769px){
  .desktop-layout .card:nth-child(1),
  .desktop-layout .card:nth-child(2),
  .desktop-layout .card:nth-child(3){
    animation-delay: .03s;
  }
  .desktop-layout .card:nth-child(4){
    animation-delay: .06s;
  }
  .desktop-layout .card:nth-child(5){
    animation-delay: .09s;
  }
  .desktop-layout .card:nth-child(6){
    animation-delay: .12s;
  }
}

/* Premium hover feel for agent dashboard tiles */
.action-btn{
  position: relative;
}
@media (hover:hover) and (pointer:fine){
  .action-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(2,6,23,.10);
    border-color: rgba(13,110,253,.25);
  }
  .action-btn::after{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    opacity:.0;
    transform: translateX(-120%);
    transition: opacity .18s ease;
    pointer-events:none;
  }
  .action-btn:hover::after{
    opacity:.9;
    animation: bb-sheen .65s ease both;
  }
}

/* Bottom nav active animation */
.bottom-nav{
  border-radius: 18px 18px 0 0;
}
.nav-item{
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.nav-item i{
  transition: transform .15s ease, filter .15s ease;
}
.nav-item.active{
  position: relative;
}
.nav-item.active::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(13,110,253,.18), rgba(13,110,253,0) 58%);
  animation: bb-glow-pulse 1.25s ease both;
  z-index:-1;
}
.nav-item.active i{
  transform: scale(1.05);
  filter: drop-shadow(0 8px 12px rgba(13,110,253,.22));
}

/* Tabs fade transition */
.tab-content{
  opacity: 0;
}
.tab-content.active{
  opacity: 1;
  animation: bb-fade-up .28s ease both;
}

/* KPI stat pop on update is hard in pure CSS; add subtle pulse on values */
#today-flyers-mobile, #today-knocks-mobile, #today-appointments-mobile,
#today-flyers-desktop, #today-knocks-desktop, #today-appointments-desktop{
  transition: transform .18s ease;
}
@media (hover:hover) and (pointer:fine){
  .stat-chip:hover .metric-value,
  .stat-chip:hover{
    transform: translateY(-1px);
  }
}

/* Premium task hover */
.task-item{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
@media (hover:hover) and (pointer:fine){
  .task-item:hover{
    transform: translateY(-2px);
    border-color: rgba(13,110,253,.22);
    box-shadow: 0 18px 36px rgba(2,6,23,.08);
    background: rgba(255,255,255,.98);
  }
}

/* Original hover helper classes (kept) */
@media (hover:hover) and (pointer:fine){
  .bb-card--hover{
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .bb-card--hover:hover{
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-soft);
    border-color: rgba(37,99,235,.22);
  }
}

/* Agent dashboard polish */
.gps-card{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  box-shadow: var(--app-shadow-soft);
}
.action-btn{
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  border:1px solid rgba(17,24,39,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.action-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2,6,23,.08);
  border-color: rgba(13,110,253,.18);
}
.section-header{
  font-weight: 800;
  margin: 1rem 0 0.6rem 0;
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(17,24,39,.9);
}
.task-item{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.06);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(2,6,23,.04);
}
.metric-card{
  border:1px solid rgba(17,24,39,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.9) !important;
  box-shadow: var(--app-shadow-soft);
}
.progress-bar-custom{
  background: rgba(13,110,253,.14);
  border:1px solid rgba(13,110,253,.18);
  color: rgba(13,110,253,.98);
  border-radius: 999px;
  padding: 4px;
  font-size: 0.75rem;
}

/* Make Bootstrap cards consistent with our radii on dashboards */
.card.rounded-3, .card.rounded-4, .card.rounded-4,
.card.rounded-2, .card.rounded-1{ border-color: var(--app-border); }

/* =========================
   Admin dashboard navigation
   ========================= */
.bb-admin-shell{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* Sidebar (desktop) */
.bb-admin-sidebar{
  width: 270px;
  position: sticky;
  top: 18px;
  padding: 14px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.08);
  backdrop-filter: blur(12px);
  box-shadow: var(--app-shadow-soft);
}

.bb-admin-brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  margin-bottom: 12px;
}

.bb-admin-sidebar .bb-admin-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding: 0 2px;
}

.bb-admin-tab{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(17,24,39,.78);
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.bb-admin-tab i{
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(13,110,253,.10);
  color: rgba(13,110,253,.95);
  border: 1px solid rgba(13,110,253,.16);
}

.bb-admin-tab:hover{
  background: rgba(13,110,253,.07);
  border-color: rgba(13,110,253,.18);
  transform: translateY(-1px);
}

.bb-admin-tab.active{
  background: rgba(13,110,253,.12);
  border-color: rgba(13,110,253,.24);
  box-shadow: 0 16px 34px rgba(2,6,23,.08);
  color: rgba(13,110,253,.98);
}

.bb-admin-tab.active i{
  background: rgba(13,110,253,.18);
  border-color: rgba(13,110,253,.28);
  box-shadow: 0 10px 20px rgba(13,110,253,.14);
}

/* Main area for sections */
.bb-admin-main{
  flex:1;
  min-width: 0;
}

.bb-admin-section{
  display:none;
}

.bb-admin-section.active{
  display:block;
  animation: bb-fade-up .26s ease both;
}

/* Mobile top tabs */
.bb-admin-mobile-tabs{
  display:none;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(17,24,39,.08);
  border-radius: 0 0 18px 18px;
  padding: 10px 12px;
  margin-bottom: 14px;
  box-shadow: var(--app-shadow-soft);
}

.bb-admin-mobile-tabs .bb-admin-mobile-tab{
  flex:1;
  border:none;
  background: transparent;
  padding: 10px 8px;
  border-radius: 999px;
  font-weight: 900;
  color: rgba(107,114,128,.95);
  cursor:pointer;
  transition: all .12s ease;
  border:1px solid transparent;
}

.bb-admin-mobile-tabs .bb-admin-mobile-tab.active{
  background: rgba(13,110,253,.14);
  color: rgba(13,110,253,.98);
  border-color: rgba(13,110,253,.26);
}

@media (max-width: 992px){
  .bb-admin-shell{ flex-direction:column; }
  .bb-admin-sidebar{ display:none; }
  .bb-admin-mobile-tabs{ display:flex; gap:10px; }
}