:root{
  --ww-red:#e11d48;
  --ww-green:#16a34a;
  --ww-dark:#0f172a;
  --ww-muted:#64748b;
  --ww-card:#ffffff;
  --ww-border: rgba(15,23,42,.08);
  --ww-shadow: 0 14px 35px rgba(2,6,23,.10);
}

html,body{height:100%;}
body.ww-body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(225,29,72,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 25%, rgba(22,163,74,.16), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6faf7 70%, #ffffff);
  color: var(--ww-dark);
}

a{ text-decoration:none; }
.container-narrow{ max-width: 1100px; }

.ww-app{ min-height:100vh; }

.ww-sidebar{
  width: 280px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.92)),
    url("img/bg-pattern.jpg");
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,.03) inset;
}

.ww-brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding: 1.25rem 1.25rem 1rem;
}
.ww-logo{
  width:42px;height:42px;border-radius:14px;
  background: linear-gradient(135deg,var(--ww-red),var(--ww-green));
  box-shadow: 0 12px 22px rgba(0,0,0,.25);
  position:relative;
}
.ww-logo:after{
  content:"";
  position:absolute; inset:9px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.65);
}
.ww-brand h1{
  margin:0;
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:.3px;
  color:#fff;
  font-weight:700;
}
.ww-brand small{
  color: rgba(255,255,255,.70);
  display:block;
  font-weight:500;
  margin-top:.2rem;
}

.ww-nav{
  padding: .5rem 1rem 1.25rem;
}
.ww-nav .nav-link{
  color: rgba(255,255,255,.82);
  border-radius: 14px;
  padding: .75rem .9rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin: .25rem 0;
  transition: transform .12s ease, background .12s ease;
}
.ww-nav .nav-link:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.ww-nav .nav-link.active{
  background: linear-gradient(135deg, rgba(225,29,72,.22), rgba(22,163,74,.20));
  border:1px solid rgba(255,255,255,.10);
}
.ww-pill{
  font-size:.75rem;
  padding:.15rem .45rem;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  color:#fff;
}

.ww-topbar{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ww-border);
}
.ww-topbar .btn{
  border-radius: 14px;
}
.ww-topbar-title{
  font-weight:800;
  letter-spacing:.2px;
}

.ww-content{
  padding-bottom: 4rem;
}
.ww-card{
  border: 1px solid var(--ww-border);
  border-radius: 18px;
  background: var(--ww-card);
  box-shadow: var(--ww-shadow);
}
.card{
  border: 1px solid var(--ww-border) !important;
  box-shadow: var(--ww-shadow);
  overflow: hidden;
}
.card .card-header{
  background:
    linear-gradient(135deg, rgba(225,29,72,.10), rgba(22,163,74,.10));
  border-bottom: 1px solid var(--ww-border);
}

.ww-stat-card{
  border-radius: 20px;
  border: 1px solid var(--ww-border);
  background:
    radial-gradient(420px 220px at 10% 20%, rgba(225,29,72,.14), transparent 60%),
    radial-gradient(420px 220px at 90% 35%, rgba(22,163,74,.16), transparent 60%),
    #fff;
  box-shadow: var(--ww-shadow);
  padding: 1rem 1.1rem;
  position: relative;
}
.ww-stat-icon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(225,29,72,.16), rgba(22,163,74,.16));
  border: 1px solid rgba(15,23,42,.08);
}
.ww-stat-icon i{ font-size: 1.25rem; }
.ww-stat-kpi{ font-weight: 900; letter-spacing: .2px; }
.ww-subtle{ color: var(--ww-muted); }
.card, .table, .alert, .modal-content, .dropdown-menu, .form-control, .form-select{
  border-radius: 16px !important;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 0 0 .25rem rgba(22,163,74,.14);
}

.btn-ww{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, var(--ww-red), var(--ww-green));
  box-shadow: 0 10px 20px rgba(225,29,72,.16);
}
.btn-ww:hover{ filter: brightness(.98); color:#fff; }

.badge-ww{
  background: linear-gradient(135deg, rgba(225,29,72,.14), rgba(22,163,74,.16));
  color: var(--ww-dark);
  border: 1px solid rgba(15,23,42,.08);
}

.ww-hero{
  background:
    radial-gradient(800px 420px at 15% 25%, rgba(225,29,72,.18), transparent 60%),
    radial-gradient(800px 420px at 85% 35%, rgba(22,163,74,.20), transparent 60%),
    url("img/hero.jpg");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: var(--ww-shadow);
}

.ww-ticker{
  position: fixed;
  left: 0; right:0; bottom: 0;
  z-index: 1030;
  background: rgba(15,23,42,.96);
  color:#fff;
  border-top: 1px solid rgba(255,255,255,.12);
}
.ww-ticker-inner{
  overflow:hidden;
  white-space:nowrap;
  padding:.65rem 0;
}
.ww-ticker-inner span{
  display:inline-block;
  padding-left:100%;
  animation: ww-marquee 18s linear infinite;
  color: rgba(255,255,255,.92);
}
@keyframes ww-marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* tables */
.table thead th{
  color: var(--ww-muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.75rem;
}
.table{
  border-color: rgba(15,23,42,.08) !important;
}
.table thead{
  background: linear-gradient(135deg, rgba(225,29,72,.06), rgba(22,163,74,.06));
}
.table tbody tr{
  transition: transform .08s ease, background .08s ease;
}
.table tbody tr:hover{
  background: rgba(22,163,74,.05);
}
.table td, .table th{
  padding: .85rem .85rem;
}

.pagination .page-link{
  border-radius: 14px !important;
  border-color: rgba(15,23,42,.10);
}
.pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--ww-red), var(--ww-green));
  border-color: transparent;
}

/* small helpers */
.table-actions a{ margin-right: 6px; }
.form-help{ font-size: 0.9rem; color: var(--ww-muted); }

@media (max-width: 991.98px){
  .ww-content{ padding-bottom: 5rem; }
}