/* TrendPret — Futuristic UI Kit (Global)
   - Glass / neon / smooth animation
   - Works with Bootstrap 5
*/
:root{
  --tp-bg0:#050914;
  --tp-bg1:#071126;
  --tp-bg2:#0a1836;
  --tp-fg:#eaf0ff;
  --tp-muted:#9fb0d8;
  --tp-border:rgba(255,255,255,.10);
  --tp-border2:rgba(255,255,255,.06);
  --tp-glow:rgba(63, 161, 255, .35);
  --tp-glow2:rgba(0, 240, 255, .22);
  --tp-accent:#36d1ff;
  --tp-accent2:#7c5cff;
  --tp-good:#2ee59d;
  --tp-bad:#ff5f8a;
  --tp-warn:#ffcc66;
  --tp-radius:18px;
  --tp-radius2:24px;
  --tp-shadow:0 18px 60px rgba(0,0,0,.45);
  --tp-shadow2:0 10px 30px rgba(0,0,0,.35);
  --tp-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}



:root[data-theme="day"]{
  --tp-bg0:#f4f6ff;
  --tp-bg1:#eef2ff;
  --tp-bg2:#e9eeff;
  --tp-fg:#0b1020;
  --tp-muted:#56638a;
  --tp-border:rgba(15, 23, 42, .10);
  --tp-border2:rgba(15, 23, 42, .06);
  --tp-glow:rgba(29, 78, 216, .16);
  --tp-glow2:rgba(99, 102, 241, .12);
  --tp-accent:#2563eb;
  --tp-accent2:#7c3aed;
  --tp-shadow:0 18px 60px rgba(15,23,42,.12);
  --tp-shadow2:0 10px 30px rgba(15,23,42,.10);
}
:root[data-theme="night"]{
  /* keeps defaults from :root */
}

html,body{height:100%;}
body{
  font-family:var(--tp-font);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(900px 700px at 85% 15%, rgba(54,209,255,.18), transparent 55%),
    radial-gradient(900px 900px at 55% 85%, rgba(46,229,157,.12), transparent 55%),
    linear-gradient(180deg, var(--tp-bg0), var(--tp-bg1) 40%, var(--tp-bg2));
  color:var(--tp-fg);
  overflow-x:hidden;
}

[data-theme="day"] body{
  background: linear-gradient(180deg, var(--tp-bg0), var(--tp-bg1));
  color: var(--tp-fg);
}

a{color:inherit; text-decoration:none}
.tp-muted{color:var(--tp-muted)!important}
.small,tp.small{opacity:.95}

.container{max-width:1200px}

/* Subtle animated noise overlay */
.tp-noise:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.25;
}

/* Cards */
.tp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--tp-border2);
  border-radius:var(--tp-radius2);
  box-shadow:var(--tp-shadow2);
  backdrop-filter: blur(10px);
}
.tp-card-hd{padding:18px 20px;border-bottom:1px solid var(--tp-border2);display:flex;align-items:center;justify-content:space-between}
.tp-card-title{font-weight:700;letter-spacing:.2px}
.tp-card-bd{padding:18px 20px}
.tp-card.hoverable{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.tp-card.hoverable:hover{transform:translateY(-2px); border-color:var(--tp-border); box-shadow:0 22px 70px rgba(0,0,0,.50), 0 0 0 1px rgba(54,209,255,.08)}

/* Pills / badges */
.tp-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .65rem;
  border-radius:999px;
  border:1px solid var(--tp-border);
  background:rgba(255,255,255,.04);
  color:var(--tp-fg);
  font-weight:600;
}
.tp-badge i{opacity:.95}
.tp-badge.soft{border-color:var(--tp-border2);background:rgba(255,255,255,.03)}

/* Buttons */
.tp-btn, .btn.tp-btn{
  border:1px solid rgba(255,255,255,.12)!important;
  background: linear-gradient(135deg, rgba(54,209,255,.85), rgba(124,92,255,.85))!important;
  box-shadow: 0 10px 25px rgba(54,209,255,.18);
  border-radius:14px!important;
  font-weight:700;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.tp-btn:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 16px 40px rgba(54,209,255,.22)}
.btn-outline{border:1px solid var(--tp-border)!important;background:rgba(255,255,255,.03)!important;border-radius:14px!important;color:var(--tp-fg)!important}
.btn-outline:hover{background:rgba(255,255,255,.06)!important}

/* Inputs */
.form-control, .form-select{
  background:rgba(255,255,255,.04)!important;
  border:1px solid var(--tp-border2)!important;
  color:var(--tp-fg)!important;
  border-radius:14px!important;
}
.form-control::placeholder{color:rgba(159,176,216,.75)}
.form-control:focus, .form-select:focus{
  box-shadow:0 0 0 .25rem rgba(54,209,255,.18)!important;
  border-color:rgba(54,209,255,.35)!important;
}

/* Tables */
.table{color:var(--tp-fg)}
.table thead th{
  color:rgba(234,240,255,.88);
  border-bottom:1px solid var(--tp-border2)!important;
  font-weight:700;
}
.table td, .table th{border-top:1px solid var(--tp-border2)!important}
.table tbody tr{transition:background .12s ease}
.table tbody tr:hover{background:rgba(255,255,255,.03)}

/* Thumbnails */
.tp-thumb{
  width:86px;height:86px;
  border-radius:16px;
  border:1px solid var(--tp-border);
  background: rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

.tp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tp-thumb.sm{width:40px;height:40px;border-radius:12px}
.tp-thumb.lg{width:84px;height:84px;border-radius:18px}

/* Product card grid */
.tp-grid{display:grid;gap:14px}
.tp-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tp-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 992px){.tp-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 576px){.tp-grid.cols-2,.tp-grid.cols-3{grid-template-columns:1fr}}

.tp-prod-card{
  display:flex; gap:12px; align-items:center;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--tp-border2);
  background:rgba(255,255,255,.03);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.tp-prod-card:hover{transform:translateY(-1px);border-color:rgba(54,209,255,.22);background:rgba(255,255,255,.04)}
.tp-prod-title{font-weight:800;line-height:1.15}
.tp-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.tp-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-price{font-weight:900;letter-spacing:.2px}
.tp-spark{width:10px;height:10px;border-radius:50%;background:var(--tp-accent);box-shadow:0 0 0 4px rgba(54,209,255,.12), 0 0 16px rgba(54,209,255,.45)}

/* Reveal animation */
.tp-reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.tp-reveal.on{opacity:1; transform:none}

/* Admin top tabs */
.tp-admin-tabs a{
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:14px;
  border:1px solid var(--tp-border2);
  background:rgba(255,255,255,.03);
  font-weight:800;
}
.tp-admin-tabs a.active, .tp-admin-tabs a:hover{
  border-color:rgba(54,209,255,.28);
  background:rgba(255,255,255,.05);
}

/* Modal styling */
.tp-modal .modal-content{
  border-radius:22px;
  border:1px solid var(--tp-border);
  background: linear-gradient(180deg, rgba(10,24,54,.92), rgba(7,17,38,.92));
  box-shadow:var(--tp-shadow);
  backdrop-filter: blur(12px);
  color:var(--tp-fg);
}
.tp-modal .modal-header{border-bottom:1px solid var(--tp-border2)}
.tp-modal .modal-footer{border-top:1px solid var(--tp-border2)}
.tp-modal .btn-close{filter:invert(1);opacity:.7}

/* Toast */
#tpToast{
  position:fixed; right:18px; bottom:18px; z-index:2000;
  padding:10px 14px; border-radius:14px;
  background:rgba(10,24,54,.85);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  opacity:0; transform:translateY(10px);
  transition:opacity .18s ease, transform .18s ease;
  max-width:min(420px, calc(100vw - 36px));
}
#tpToast.show{opacity:1; transform:none}

.tp-thumb.contain img{object-fit:contain;padding:10px;background:transparent}

.tp-thumb.placeholder{color:var(--tp-muted);font-size:24px}

/* Tables (Admin + Account) */
.table.tp-table{color:var(--tp-fg); --bs-table-bg:transparent; --bs-table-color:var(--tp-fg);}
.table.tp-table thead th{color:var(--tp-muted);font-weight:700;border-bottom:1px solid var(--tp-border)!important}
.table.tp-table td,.table.tp-table th{border-color:var(--tp-border)!important;padding:.85rem .85rem}
.table.tp-table tbody tr:hover{background:rgba(255,255,255,.06)}
:root[data-theme="day"] .table.tp-table tbody tr:hover{background:rgba(15,23,42,.04)}

.tp-heart{
  width:44px;height:44px;border-radius:14px;
  border:1px solid var(--tp-border);
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.tp-heart i{font-size:18px}
.tp-heart:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.tp-heart.active{border-color:rgba(255,95,138,.55); background:rgba(255,95,138,.14)}
.tp-heart.active i{color:var(--tp-bad)}