/* ===== Base / Resets ===== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --bg:#020617;             /* base background */
  --bg-accent:#0f172a;      /* slightly lighter for shell */
  --surface:rgba(15,23,42,.9);
  --border:rgba(148,163,184,.25);
  --muted:rgba(148,163,184,.9);
  --text:#f9fafb;
  --primary:#2563eb;        /* blue */
  --primary-soft:#1d4ed8;
  --warn:#b91c1c;
  --ok:#15803d;
  --radius-lg: 18px;
  --radius-md: 12px;
}

html, body { height:100%; }

body{
  margin:0;
  background:
    radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px; /* avoids iOS zoom on inputs */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== App Shell ===== */
.app-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:4.25rem; /* for bottom nav */
}

.main{
  flex:1;
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:1rem .9rem .9rem;
}

/* ===== Topbar (same glass feel as login) ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem;
  padding:.9rem 1rem .8rem;
  background:linear-gradient(
    to bottom,
    rgba(15,23,42,.95),
    rgba(15,23,42,.85)
  );
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(148,163,184,.3);
}

.topbar-left,
.topbar-right{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.topbar h1{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
}

.topbar .btn.small{
  padding:.35rem .7rem;
  font-size:.8rem;
}

/* ===== Cards / Tiles (internal pages) ===== */
.card{
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:0 18px 45px rgba(15,23,42,.65);
  padding:1rem;
  margin-bottom:.9rem;
}

.card h2{
  margin:.1rem 0 .7rem;
  font-size:1rem;
}

.tile-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
}

.tile{
  display:block;
  text-decoration:none;
  color:var(--text);
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:0 14px 32px rgba(15,23,42,.6);
  padding:.95rem;
  transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}

.tile h3{
  margin:0 0 .25rem;
  font-size:1rem;
}

.tile p{
  margin:0;
  font-size:.85rem;
  color:var(--muted);
}

.tile:hover{
  transform:translateY(-1px);
  border-color:rgba(59,130,246,.6);
  box-shadow:0 18px 40px rgba(37,99,235,.55);
}

/* ===== Lists (stock lists) ===== */
.list{
  background:var(--surface);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:0 16px 40px rgba(15,23,42,.7);
  overflow:hidden;
}

.list-item{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  padding:.85rem 1rem;
  text-decoration:none;
  color:var(--text);
  border-bottom:1px solid rgba(148,163,184,.25);
}

.list-item:last-child{
  border-bottom:none;
}

.list-item.low-stock{
  background:linear-gradient(
    to right,
    rgba(248,113,113,.13),
    rgba(15,23,42,1)
  );
}

.list-title{
  font-weight:600;
  font-size:.98rem;
}

.list-sub{
  font-size:.82rem;
  color:var(--muted);
}

.list-right{
  margin-top:.15rem;
}

.badge{
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:999px;
  background:rgba(15,23,42,1);
  border:1px solid rgba(148,163,184,.4);
  font-size:.78rem;
}

.badge-warn{
  background:rgba(127,29,29,1);
  border-color:rgba(248,113,113,.7);
  color:#fee2e2;
}

/* ===== Forms (internal pages) ===== */
label{
  display:block;
  font-size:.9rem;
  margin:.45rem 0 .3rem;
  color:var(--muted);
}

input,
select,
textarea{
  width:100%;
  color:var(--text);
  background:rgba(15,23,42,1);
  border:1px solid rgba(148,163,184,.5);
  border-radius:14px;
  padding:.7rem .9rem;
  font-size:1rem;
  outline:none;
  transition:border-color .1s ease, box-shadow .1s ease, background .1s ease;
}

input::placeholder,
textarea::placeholder{
  color:rgba(148,163,184,.9);
}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(37,99,235,.9);
  box-shadow:0 0 0 1px rgba(37,99,235,.6);
  background:#020617;
}

textarea{
  min-height:120px;
  resize:vertical;
}

/* search bar at top of list pages */
.search-form{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  margin-bottom:.9rem;
}
.search-form button{
  align-self:flex-start;
}

/* ===== Buttons (match login style) ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  background:linear-gradient(135deg, var(--primary), var(--primary-soft));
  color:#f9fafb;
  border:0;
  cursor:pointer;
  padding:.7rem 1rem;
  font-size:.9rem;
  border-radius:999px;
  text-decoration:none;
  transition:filter .07s ease, transform .07s ease, box-shadow .08s ease;
  box-shadow:0 8px 22px rgba(37,99,235,.45);
}

.btn.small{
  padding:.4rem .7rem;
  font-size:.8rem;
  box-shadow:none;
}

.btn:hover{
  filter:brightness(1.05);
}

.btn:active{
  transform:translateY(1px);
  box-shadow:0 4px 14px rgba(37,99,235,.55);
}

.btn.ghost{
  background:transparent;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:none;
}

.btn.warn{
  background:linear-gradient(135deg,#dc2626,#7f1d1d);
  box-shadow:0 8px 22px rgba(185,28,28,.5);
}

.btn.ok{
  background:linear-gradient(135deg,#22c55e,#15803d);
  box-shadow:0 8px 22px rgba(34,197,94,.45);
}

/* login primary button (kept explicit) */
.login-btn-primary{
  width:100%;
  margin-top:.7rem;
  border-radius:999px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  box-shadow:0 8px 22px rgba(37,99,235,.45);
  border:none;
  font-weight:600;
  letter-spacing:.01em;
}
.login-btn-primary:hover{ filter:brightness(1.05); }
.login-btn-primary:active{
  transform:translateY(1px);
  box-shadow:0 4px 14px rgba(37,99,235,.55);
}

/* ===== Alerts ===== */
.alert{
  background:rgba(127,29,29,.9);
  border:1px solid rgba(248,113,113,.7);
  color:#fee2e2;
  padding:.6rem .8rem;
  border-radius:12px;
  margin-bottom:.8rem;
  font-size:.9rem;
}

/* ===== Bottom Nav (app-like) ===== */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:.6rem;
  transform:translateX(-50%);
  width:calc(100% - 1.3rem);
  max-width:480px;
  display:flex;
  gap:.25rem;
  padding:.35rem;
  background:rgba(15,23,42,.93);
  backdrop-filter: blur(10px);
  border-radius:999px;
  border:1px solid rgba(148,163,184,.4);
  box-shadow:0 18px 40px rgba(0,0,0,.75);
  z-index:120;
}

.bottom-nav a{
  flex:1;
  color:#e5e7eb;
  text-decoration:none;
  text-align:center;
  font-size:.82rem;
  padding:.45rem .35rem;
  border-radius:999px;
  transition:background .08s ease, color .08s ease, border-color .08s ease;
}

.bottom-nav a.active{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:#f9fafb;
}

/* ===== Movement list ===== */
.movement-list{
  list-style:none;
  padding:0;
  margin:0;
}
.movement-list li{
  padding:.45rem 0;
  border-bottom:1px solid rgba(148,163,184,.25);
  font-size:.9rem;
}
.movement-list li:last-child{
  border-bottom:none;
}

/* ===== Video / Scan helpers (if you still use them anywhere) ===== */
#preview{
  width:100%;
  max-height:260px;
  border-radius:14px;
  background:#000;
}

#camStatus, #photoStatus{
  color:var(--muted);
}

#liveRegion{ position:relative; }
#overlayCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

/* ===== Login screen (as you liked) ===== */
.login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top, #1e293b 0, #020617 55%, #000 100%);
}

.login-box{
  width:min(92vw,360px);
  background:rgba(15,23,42,.9);
  border-radius:18px;
  border:1px solid rgba(148,163,184,.25);
  padding:1.6rem 1.4rem 1.2rem;
  box-shadow:0 18px 45px rgba(0,0,0,.45);
}

.login-header{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:1.4rem;
}

.login-avatar{
  width:42px;
  height:42px;
  border-radius:999px;
  background:linear-gradient(135deg,#38bdf8,#6366f1);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;          /* important: hides anything outside the circle */
}

.login-avatar img{
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
  display:block;
}


.login-header h1{
  margin:0;
  font-size:1.15rem;
}

.login-header p{
  margin:.15rem 0 0;
  font-size:.8rem;
  color:var(--muted);
}

.login-box label{
  font-size:.85rem;
  margin:.3rem 0 .25rem;
}

.login-box input{
  border-radius:12px;
  padding:.6rem .8rem;
  margin-bottom:.6rem;
}

/* footer note */
.login-footer-note{
  margin-top:1rem;
  font-size:.75rem;
  color:var(--muted);
  text-align:center;
}

/* ===== Page-specific: “add / edit” forms ===== */
.page-add .card h2{
  font-size:1.1rem;
}
.page-add label{
  font-size:.95rem;
}
.page-add input,
.page-add select,
.page-add textarea{
  font-size:1.02rem;
  padding:.8rem 1rem;
}

/* ===== Admin users list helpers ===== */
.user-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.4rem 0;
  border-bottom:1px solid rgba(148,163,184,.25);
}
.user-row:last-child{ border-bottom:none; }

.user-actions form{
  display:inline-block;
}

/* ===== Responsive tweaks ===== */
@media (min-width:700px){
  .tile-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}
@media (min-width:1000px){
  .tile-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}
@media (max-width:480px){
  .topbar{
    padding-inline:.7rem;
  }
  .main{
    padding-inline:.7rem;
  }
  .bottom-nav{
    width:calc(100% - 1rem);
  }
}