/* ---- Base (matches mall.css vibe) ---- */
:root{
  --nav-h:64px;
/* Change these to tweak the hero */
  --login-hero-url: url('/assets/login-hero.png'); /* put your image here */
  --login-hero-size: 360px;                        /* width/height */
  --login-hero-opacity: .35;                       /* 0..1 (lower = more transparent) */
}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:linear-gradient(135deg,#f9d6ff,#d6e4ff);
  color:#333; overflow-x:hidden; position:relative;
}

*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}

/* ---- Effects (identical IDs to mall for drop-in mall.js) ---- */
#particles{position:fixed;inset:0;z-index:0;pointer-events:none}
.particle{position:absolute;border-radius:50%;animation:drift var(--dur) linear infinite}
@keyframes drift{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:0}}
#mouseGlow{position:fixed;width:150px;height:150px;border-radius:50%;pointer-events:none;z-index:50;
  background:radial-gradient(circle,rgba(0,180,255,.55) 0%,rgba(0,180,255,.25) 35%,transparent 70%);
  animation:glowPulse 3s ease-in-out infinite; mix-blend-mode:screen; transform:translate(-50%,-50%)}
@keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.1);opacity:1}}
#trail{position:fixed;inset:0;pointer-events:none;z-index:49}
.trail-dot{position:absolute;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,255,.8) 0%,rgba(0,180,255,.35) 55%,transparent 70%);
  mix-blend-mode:screen;animation:trail 650ms ease-out forwards}
@keyframes trail{0%{opacity:.95;transform:translate(-50%,-50%) scale(.7)}60%{opacity:.6;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}

/* bottom-left toggle to match mall */
#effectsToggle{
  position:fixed;bottom:20px;left:20px;z-index:200;
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.8);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s ease,box-shadow .2s ease
}
#effectsToggle:hover{transform:scale(1.1);box-shadow:0 6px 14px rgba(0,0,0,.25)}

/* ---- Navbar (mall style) ---- */
nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px; position:sticky; top:0; z-index:10; height:var(--nav-h);
  background:rgba(255,255,255,.4); backdrop-filter:blur(8px);
}
nav .brand{font-weight:800}
nav a{text-decoration:none;color:#444;font-weight:700}
.pill{
  background:#fff;border:1px solid #eee;border-radius:999px;
  padding:6px 10px;font-weight:700;display:inline-flex;gap:6px;align-items:center
}
.btn{
  display:inline-block;background:#ff69b4;color:#fff;padding:10px 16px;border-radius:18px;
  text-decoration:none;font-weight:700;box-shadow:0 6px 14px #0000001a;transition:.18s;border:none;cursor:pointer
}
.btn:hover{transform:rotate(-2deg) scale(1.05);background:#ff85c1}
.btn-sm{padding:8px 10px;border-radius:12px;background:#e0ecff;color:#2154b6;border:none;cursor:pointer}
.btn-sm:hover{transform:translateY(-1px)}

/* ---- Layout/containers ---- */
main{position:relative;z-index:1}
.container{width:min(1100px,100%);margin:0 auto;padding:20px}

/* ---- Cards (white mall cards) ---- */
.card{
  background:#fff; border-radius:16px; box-shadow:0 4px 12px #00000014;
  border:3px solid transparent; border-image:linear-gradient(45deg,#ffb3e6,#b3e6ff) 1;
  overflow:hidden; transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  /* no rotate, just a subtle lift */
  transform:translateY(-2px);
  box-shadow:0 8px 20px #0000001f;
}
.glow-title{font-size: clamp(22px,4vw,32px); font-weight:900; margin: 0 0 8px;}
.helper{color:#555}

/* ---- Tables (UCP pages) ---- */
.table-wrap{overflow:auto;border-radius:14px;border:1px solid #eee;background:#fff}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid #f0f0f0;text-align:left}
thead th{background:#f9fbff;font-weight:800}
.right{text-align:right}

/* ---- Forms ---- */
label{font-weight:800;font-size:.95rem;display:block;margin-bottom:6px}
input,select{
  width:100%;padding:10px;border-radius:12px;border:1px solid #ccc;background:#fff;color:#333;outline:none
}

/* ---- Badges (used e.g. status, map tags later) ---- */
.badge{font-size:.75rem;padding:2px 8px;border-radius:999px;background:#f7f7f7;border:1px solid #eee}
.badge.timer{background:#fff6e5;border-color:#ffe0a3;color:#a46100;display:inline-flex;gap:6px;align-items:center}

/* --- Toasts -------------------------------------------------------------- */
#toast-root{position:fixed;right:20px;bottom:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}
.toast{
  display:flex;align-items:center;gap:10px;min-width:260px;max-width:420px;
  background:#fff;border-radius:14px;border:1px solid #eee;box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:12px 14px;font-weight:700;color:#333;animation:toastIn .18s ease-out
}
.toast .msg{flex:1}
.toast .btns{display:flex;gap:8px}
.toast button{
  border:none;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700
}
.toast.ok{border-color:#c8efd6}
.toast.warn{border-color:#ffe4b3}
.toast.err{border-color:#ffb3b3}
.toast.ok .badge{background:#eafff1;border:1px solid #c8efd6}
.toast.warn .badge{background:#fff7e8;border:1px solid #ffe4b3}
.toast.err .badge{background:#fff1f1;border:1px solid #ffb3b3}
.toast .close{font-weight:900;opacity:.6;cursor:pointer}
@keyframes toastIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* --- Admin workspace ---------------------------------------------------- */
.admin-shell{
  display:grid;
  grid-template-columns: 220px 1fr; /* narrower sidebar */
  gap:20px;
  align-items:start;
}

.admin-nav{
  position:sticky; top:calc(var(--nav-h) + 12px);
  background:#fff; border-radius:16px; box-shadow:0 8px 20px #0000001a;
  border:3px solid transparent; border-image:linear-gradient(45deg,#b3e6ff,#e7f0ff) 1;
  padding:14px;
}
.admin-nav h3{ margin:0 0 10px; font-size:1.2rem; }
.admin-tabs{ display:flex; flex-direction:column; gap:10px; }
.admin-tab{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; font-weight:800; color:#444;
  background:#fff; border:1px solid #eee; border-radius:999px;
  padding:10px 14px; box-shadow:0 6px 14px #00000012; transition:.15s;
}
.admin-tab:hover{ transform:translateY(-1px); box-shadow:0 8px 16px #00000018; }
.admin-tab.active{ background:#ffe7f3; border-color:#ffb6d6; color:#b01f6a; }

.admin-panel{
  background:#fff; border-radius:16px; box-shadow:0 8px 20px #0000001a;
  border:3px solid transparent; border-image:linear-gradient(45deg,#b3e6ff,#e7f0ff) 1;
  padding:16px; min-height:60vh;
}

/* make existing admin cards inside panel flush */
.admin-panel > .card{ box-shadow:none; border:none; padding:0; }
.admin-panel .table-wrap{ border-color:#eee; }

.container{
  width:min(1400px,100%); /* was 1100px */
  margin:0 auto;
  padding:20px;
}

.page-login main{min-height:calc(100vh - var(--nav-h)); display:grid; place-items:center}
.page-login .container{width:min(560px,100%); padding:0}

.page-login .auth-col{
  display:grid; gap:14px; justify-items:center; text-align:center;
}

/* Hero image placeholder */
.page-login .hero-img{
  width:var(--login-hero-size); height:var(--login-hero-size);
  background-image:var(--login-hero-url);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:var(--login-hero-opacity);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.12));
  border-radius:12px; /* looks nice if png has some rect edges */
}

/* Title / sub */
.page-login .auth-title{ margin:4px 0 0; font-size:2.2rem; font-weight:900; color:#222 }
.page-login .auth-sub{ margin:0 0 8px; color:#5b6472 }

/* Minimal form (no card) */
.page-login .auth-form{ display:grid; gap:12px; width:100% }
.page-login label{ font-weight:800; color:#333; text-align:left }
.page-login input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #dcdce4; outline:none;
  background:rgba(255,255,255,.8); color:#222; backdrop-filter:saturate(120%) blur(2px);
}
.page-login .auth-actions{ display:flex; gap:10px; align-items:center; justify-content:center; margin-top:2px; }
.page-login .auth-muted{ color:#c9c63e; font-weight:700 }

/* Option: make image extra transparent by adding .is-transparent */
.page-login .hero-img.is-transparent{ opacity:.18 }

/* Floating animation for the login hero */
@keyframes heroFloat {
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-6px) } /* subtle lift */
  100% { transform: translateY(0) }
}

/* apply to the placeholder image */
.page-login .hero-img {
  animation: heroFloat 6s ease-in-out infinite;
  will-change: transform; /* tiny perf win */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-login .hero-img { animation: none }
}

/* Optional: tiny glow ring behind the hero (very subtle) */
.page-login .hero-img::after {
  content: "";
  position: absolute;
  inset: auto 0 -8px 0;
  margin: auto;
  width: 70%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.15), transparent 60%);
  filter: blur(6px);
  transform: translateY(0);
  pointer-events: none;
}

/* small count badge in admin nav */
.admin-tab .count-badge{
  margin-left:8px; font-size:.75rem; padding:2px 8px; border-radius:999px;
  background:#f7f7ff; border:1px solid #e0e4ff; color:#39449b; font-weight:900;
}

/* Dashboard sub-nav */
.subnav{
  display:flex; gap:.5rem; align-items:center;
  margin: .5rem 0 1rem;
}
.subnav .pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:999px; font-weight:700;
  background:#fff; border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.subnav .pill:hover{ transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,.08); }
.subnav .pill.is-active{
  background:linear-gradient(180deg,#ff73b3,#ff61a8);
  color:#fff; border-color:transparent;
}

/* ---------- Page header ---------- */
.page-h{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:.5rem 0 1rem;}
.page-h__title h2{font-size:1.75rem; margin:0; line-height:1.2;}
.page-h__title .grad{background:linear-gradient(180deg,#ff87c6,#ff63a9); -webkit-background-clip:text; background-clip:text; color:transparent;}
.page-h__meta{display:flex; gap:.5rem; align-items:center;}

/* ---------- Chips / pills ---------- */
.chip{display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 4px 14px rgba(0,0,0,.07);}
.chip.tip{background:linear-gradient(180deg,#fff, #fff7fd);}
.blur-reveal{filter:blur(6px); transition:.2s filter ease;}
.chip:hover .blur-reveal{filter:blur(0);}

/* ---------- Subnav (from admin style) ---------- */
.subnav{display:flex;gap:.5rem;margin:.25rem 0 1rem;}
.subnav .pill{display:inline-flex;align-items:center;padding:.45rem .9rem;border-radius:999px;font-weight:700;background:#fff;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 6px rgba(0,0,0,.06);}
.subnav .pill:hover{transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.08);}
.subnav .pill.is-active{background:linear-gradient(180deg,#ff73b3,#ff61a8); color:#fff; border-color:transparent;}

/* ---------- Card padding ---------- */
.card .card-h{padding:1rem 1.25rem 0.5rem;}
.card .card-b{padding:0 1.25rem 1.25rem;}

/* ---------- Table polish ---------- */
.table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; background:#fff;}
.table thead th{font-weight:800; text-transform:none; background:linear-gradient(180deg,#fbfbff,#f2f6ff); border-bottom:1px solid #eef0f6; padding:.9rem 1rem;}
.table tbody td{padding:.85rem 1rem; border-bottom:1px solid #f3f4f8;}
.table tbody tr:nth-child(odd){background:#ffffff;}
.table tbody tr:nth-child(even){background:#fcfcff;}
.table tbody tr:hover{background:#fff6fb;}
.table .right{text-align:right;}
.table .btn.sm{padding:.45rem .8rem; border-radius:999px;}

/* ---------- Form polish ---------- */
.form-grid .form-row{margin-bottom:.75rem;}
.form-grid input[type="password"],
.form-grid input[type="text"]{
  border-radius:12px; border:1px solid #e9e9f4; padding:.8rem .9rem;
  background:#fff; outline:none; transition: box-shadow .15s, border-color .15s;
}
.form-grid input:focus{ border-color:#ff8ac7; box-shadow:0 0 0 3px rgba(255,138,199,.2); }
.form-actions{display:flex; gap:.5rem; align-items:center;}

/* ---------- Responsive table (stack on narrow) ---------- */
@media (max-width: 800px){
  .table thead{display:none;}
  .table, .table tbody, .table tr, .table td{display:block; width:100%;}
  .table tr{margin-bottom:.75rem; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.06);}
  .table td{border-bottom:1px dashed #eee; display:flex; justify-content:space-between; gap:1rem;}
  .table td:last-child{border-bottom:none;}
  .table td::before{content:attr(data-label); font-weight:700; color:#444;}
}