/* =====================================================
   NEP Asset Manager – app.css (Clean / Consolidated)
   ===================================================== */

   html, body{
  width:100%;
  overflow-x:hidden;
}

/* ==== GLOBAL THEME ==== */
:root{
  --color-bg:#0f172a;
  --color-card:#1e293b;
  --color-topbar:#003366;
  --color-footer:#003366;
  --color-text:#e5e7eb;
  --color-primary:#2563eb;
  --color-primary-hover:#1d4ed8;
  --color-danger:#dc2626;
  --color-danger-hover:#b91c1c;
}

/* ==== RESET ==== */
*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  height:100%;
}

body{
  font-family:system-ui, sans-serif;
  background:var(--color-bg);
  color:var(--color-text);

  /* REMOVE flex layout to avoid mobile scroll clipping */
  display:block;

  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Typography baseline (Dashboard = reference) ===== */
body{
  font-size:14px;
  line-height:1.35;
}

h1, h2, h3{
  font-weight:700;
  letter-spacing:0.2px;
}

.card h3,
.user-card h3{
  font-size:1rem;          /* aligns with dashboard */
  margin-bottom:6px;
}

.card p,
.user-card p{
  font-size:0.85rem;       /* align body text everywhere */
  color:#cbd5e1;
}

/* ===== Standard surface card (same look as dashboard) ===== */
.surface-card{
  background: var(--color-card);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Form container sizing */
.form-card{
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

/* Permissions groups inside forms */
.perm-card{
  margin: 12px 0;
}

/* Section title + divider */
.section-title{
  margin: 0 0 10px;
}

.divider{
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* ==== TOP BAR ==== */
#topBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 16px;
  background:var(--color-topbar);
  color:#fff;
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  padding-top: calc(8px + env(safe-area-inset-top));
  width:auto;
  max-width:100vw;
  overflow-x:hidden;
}

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

.logo{ height:32px; cursor:pointer; }
.back{ height:24px; cursor:pointer; }
.userIcon{ width:28px; height:28px; border-radius:50%; }
#userName{ font-weight:700; }

/* ==== MAIN CONTENT ==== */
#mainContent{
  /* no flex:1 */
  padding:80px 20px 140px 20px; /* increase bottom padding so content clears footer */
  max-width:1100px;
  margin:0 auto;
  position:relative;
}


@media (min-width: 1400px){
  #mainContent{ max-width:1200px; }
}


/* ==== DASHBOARD CARDS ==== */
.dashboard{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;

  width:100%;
  max-width:1100px;   /* aligns with #mainContent sizing philosophy */
  margin:0 auto;
  /*=-===================I DELETED========================max-width:none;/* let #mainContent control width */
}

.card{
  text-align:center;
  padding:12px;
  min-height:90px;
  border-radius:8px;
  background:var(--color-card);
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 16px rgba(0,0,0,0.4);
}

.card h3{ margin-bottom:4px; font-size:1rem; }
.card p{ font-size:0.8rem; color:#cbd5e1; }

.bottom-card{
  grid-column:1 / -1;
  justify-self:center;
  width:100%;
  max-width:520px;    /* prevents ultra-wide bottom card */
}
.card-disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.card-disabled:hover{
  transform:none;
  box-shadow:none;
}

/* ==== FOOTER ==== */
#footerBar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;              /* ✅ match top bar */
  width:auto;           /* ✅ avoid 100% pitfalls */
  max-width:100vw;      /* ✅ hard stop on mobile */

  background:var(--color-footer);
  color:#fff;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:6px 14px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));

  z-index:1000;
  overflow-x:hidden;    /* ✅ prevent sideways clipping */
}

#toastMsg{
  font-size:0.85rem;
  transition:color 0.2s ease;
}

/* Footer action buttons (SCAN / MOVE) */
.footer-actions{ display:flex; gap:20px; }

.footer-actions .action-card{
  text-align:center;
  background:none;
  border:none;
  box-shadow:none;
  cursor:pointer;
  transition:transform 0.2s;
}

.footer-actions .action-card:hover{ transform:scale(1.05); }

.footer-actions img{
  width:32px;
  height:32px;
  display:block;
  margin:auto;
}

.footer-actions h3{
  margin-top:4px;
  font-size:0.75rem;
  color:#fff;
}

/* ==== FOOTER NOTIFICATIONS (COLOR-CODED) ==== */
.notify-info{ color:#e5e7eb; }
.notify-success{ color:#86efac; }  /* green */
.notify-warning{ color:#fdba74; }  /* orange */
.notify-error{ color:#fca5a5; }    /* red */

/* =====================================================
   COMMON FORMS
   ===================================================== */
.form-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:10px;
}

/* =====================================================
   TABLES (generic)
   ===================================================== */
.tbl{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.tbl th,
.tbl td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,0.10);
  text-align:left;
  font-size:0.9rem;
}

.tbl th{
  color:#cbd5e1;
  font-weight:600;
}

/* =====================================================
   USERS UI
   ===================================================== */

   /* Space below search bar before list */
.search-bar{
  position: relative;
  max-width: 520px;
  width: 100%;
  margin-bottom: 16px;
}

/* Users grid aligned with dashboard spacing */
.user-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:16px;
  width:100%;
}

.user-card .card-footer{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top:10px;
}

.user-card .icon-actions{
  display:flex;
  gap:10px;
  align-items:center;
}


/* Floating Add Button (+) */
#addBtn{
  position:absolute;
  top:80px;
  right:20px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#3b4252;
  color:#fff;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}

#addBtn:hover{
  transform:scale(1.1);
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}

/* Icon Hard Lock (prevents huge edit/delete icons) */
.icon-actions img{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain !important;
  display:inline-block !important;
}

/* Users: Roles link */
.roles-btn{
  color:#e5e7eb;
  text-decoration:none;
  font-size:0.8rem;
  padding:4px 6px;
  border-radius:4px;
  transition:background 0.2s, color 0.2s;
}

.roles-btn:hover{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
}

/* ===== Entry highlight card (light blue) ===== */
.entry-card{
  background: linear-gradient(
    180deg,
    rgba(59,130,246,0.18),
    rgba(59,130,246,0.10)
  );

  border: 1px solid rgba(147,197,253,0.25);
  border-radius: 10px;

  padding: 14px 16px;
  margin-bottom: 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 4px 12px rgba(0,0,0,0.35);

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry-card:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 18px rgba(0,0,0,0.45);
}


.search-bar input{
  width:100%;
  padding:8px 44px 8px 10px;   /* room for the clear button */
  border-radius:6px;
}

/* Clear search (touch-friendly) */
.clear-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);

  width:32px;
  height:32px;

  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:#fff;

  font-size:20px;
  line-height:1;

  cursor:pointer;

  display:flex;              /* ALWAYS flex */
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity 0.15s ease;
}

.clear-btn:hover{
  background:rgba(255,255,255,0.22);
}

/* ===== Neutral action buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:96px;
  padding:8px 14px;

  border-radius:6px;
  font-size:0.9rem;
  font-weight:500;

  cursor:pointer;
  text-decoration:none;
  border:1px solid #d1d5db;

  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* White / neutral button */
.btn-secondary{
  background:#ffffff;
  color:#000000;
}

.btn-secondary:hover{
  background:#f3f4f6;
  border-color:#9ca3af;
}



/* ===== Scan overlay (Dashboard style) ===== */
#scanOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  z-index:20000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.scan-shell{
  width:min(560px, 100%);
  background:var(--color-card);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
  padding:12px;
}

.scan-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.scan-title{
  font-weight:700;
}

.scan-actions{
  display:flex;
  gap:8px;
}

.scan-btn-icon{
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.scan-view{
  width:100%;
  aspect-ratio:4/3;
  background:#000;
  border-radius:10px;
  overflow:hidden;
}

.scan-footer{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}


/* ===== Force Dynamsoft UI to stay inside scan modal ===== */
.scan-view{
  position:relative;
  width:100%;
  height:52vh;          /* stable height on mobile */
  max-height:420px;
  background:#000;
  border-radius:10px;
  overflow:hidden;
}

/* Dynamsoft containers */
#scanOverlay .dce-video-container,
#scanOverlay .dce-video-container *{
  max-width:100% !important;
}

#scanOverlay .dce-video-container{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

#scanOverlay video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}


.scan-format{
  display:flex;
  gap:8px;
  align-items:center;
  flex:1;
  justify-content:center;
}

.scan-chip{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}

.scan-chip.active{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.28);
}

.scan-result{
  flex:1;
  font-size:0.85rem;
  opacity:0.85;
  padding-right:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}






.card hr{
  margin:6px auto;
  width:60%;
  border:none;
  border-top:1px solid rgba(255,255,255,0.30);
}



/*.card p{
  font-size:0.75rem;
  font-style:italic;
  color:#cbd5e1;
  margin:6px 0 0 0;
}*/ /* I DELETED========================================================== */

h1.page-title{
  text-align:center;
  margin-bottom:20px;
  font-size:1.4rem;
  font-weight:700;
}


/* ===== Universal card inline link (Storage / Shelves / etc) ===== */
.card-link{
  color:#ffffff;
  font-size:0.8rem;
  font-weight:600;
  text-decoration:none;

  padding:6px 10px;
  border-radius:8px;

  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);

  min-height:36px;              /* touch target */
  display:inline-flex;
  align-items:center;
  justify-content:center;

  transition:background 0.15s ease, border-color 0.15s ease;
}

.card-link:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.30);
}

.card-link.disabled{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}

/* Footer layout for all entry cards (Users, Warehouses, etc.) */
.entry-card .card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
}


/* ===== Warehouse card text rhythm ===== */
.warehouse-card h3{
  line-height:1.35;
  margin:0 0 6px 0;
}

.warehouse-card p{
  line-height:1.45;
  margin:6px 0;
}

.warehouse-card p:first-of-type{
  margin-top:4px;
}

.warehouse-card hr{
  margin:10px 0;
  border:none;
  border-top:1px solid rgba(255,255,255,0.18);
}

/* Warehouses: Storage link (white + touch-friendly) */
.entry-card .card-footer .card-link{
  color:#fff !important;
  font-size:0.85rem;
  font-weight:600;
  text-decoration:none;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;
  padding:0 12px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
}

.entry-card .card-footer .card-link:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.30);
}


/* Warehouses: improve line spacing inside cards */
.warehouse-card p{
  margin:6px 0;
  line-height:1.45;
}


/* ===== Form Shell (matches dashboard card language) ===== */
.form-shell{
  max-width: 620px;
  margin: 0 auto;
}

.form-title{
  text-align:center;
  margin-bottom: 14px;
  font-size:1.1rem;
  font-weight:700;
}

.form-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.field label{
  display:block;
  font-size:0.85rem;
  font-weight:600;
  margin-bottom:6px;
  color:#e5e7eb;
}

.input, .select{
  width:100%;
  min-height:40px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  outline:none;
}

.input:focus, .select:focus{
  border-color: rgba(147,197,253,0.40);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
}

.input[disabled]{
  opacity:0.65;
  cursor:not-allowed;
}

/* Textarea (if you ever use it) */
.textarea{
  width:100%;
  min-height:90px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#fff;
  outline:none;
  resize:vertical;
}

/* Buttons row (same style/size) */
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

.btn-secondary{
  min-width:110px;
  height:40px;
}

/* Page header spacing */
.page-title{
  text-align:center;
  margin-bottom:16px;
}

/* Optional: keep entry-card as the unified container look */
.form-card{
  padding: 16px;
}

/* ===== Search bar with scan button ===== */

/* Search bar with fixed right-side actions */
.search-bar{
  position:relative;
  max-width:520px;
  width:100%;
  margin-bottom:16px;
}

/* Input padding for clear + scan buttons */
.search-bar input{
  width:100%;
  padding:8px 88px 8px 10px; /* ⬅ space for 2 buttons on the right */
  border-radius:6px;
}

/* Scan button – always far right */
.search-bar .scan-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);

  width:36px;
  height:36px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
}

.search-bar .scan-btn img{
  width:18px;
  height:18px;
}

/* Clear button – just left of scan */
.search-bar .clear-btn{
  position:absolute;
  right:48px;              /* ⬅ pushed left of scan */
  top:50%;
  transform:translateY(-50%);

  width:32px;
  height:32px;

  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.12);
  color:#fff;

  font-size:20px;
  line-height:1;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity 0.15s ease;
}

.search-bar .clear-btn:hover{
  background:rgba(255,255,255,0.22);
}

/* Scanable input wrapper (Create/Edit forms) */
.scan-input{
  position:relative;
  width:100%;
}

.scan-input .input{
  width:100%;
  padding-right:52px; /* space for scan button */
}

/* same button spec as search-bar */
.scan-input .scan-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);

  width:36px;
  height:36px;

  border-radius:10px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);

  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;
  cursor:pointer;
}

.scan-input .scan-btn img{
  width:18px !important;
  height:18px !important;
  max-width:18px !important;
  max-height:18px !important;
  object-fit:contain;
  display:block;
}


/* Dark selects + dropdown options */
select.input {
  background: #0b1e3a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
}

select.input option {
  background: #0b1e3a !important;
  color: #ffffff !important;
}

select.input option[value=""] {
  color: rgba(255,255,255,.75) !important;
}


/* ===== Tags / badges (Events, future modules too) ===== */
.tags-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px 0;
}

.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  color:#fff;
  line-height:1.2;
}

.tag.success{ background:rgba(34,197,94,0.18); border-color:rgba(34,197,94,0.30); }
.tag.warn{ background:rgba(251,191,36,0.18); border-color:rgba(251,191,36,0.30); }
.tag.danger{ background:rgba(239,68,68,0.18); border-color:rgba(239,68,68,0.30); }
.tag.info{ background:rgba(59,130,246,0.18); border-color:rgba(59,130,246,0.30); }

/* ===== Deadline emphasis line ===== */
.deadline-line{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05);
  margin-top:10px;
}

.deadline-line.ok{ border-color:rgba(34,197,94,0.25); background:rgba(34,197,94,0.08); }
.deadline-line.soon{ border-color:rgba(251,191,36,0.28); background:rgba(251,191,36,0.10); }
.deadline-line.overdue{ border-color:rgba(239,68,68,0.30); background:rgba(239,68,68,0.10); }

/* ===== Sort/Filter controls row ===== */
.controls-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:12px;
  max-width:520px;
}

.controls-row .select,
.controls-row .input{
  min-height:40px;
}


/* === DBR scan overlay hardening === */
#scanOverlay { z-index: 99999; }
#scanOverlay .scan-view { position: relative; width: 100%; height: 58vh; min-height: 360px; background: #000; }

/* Dynamsoft container/video/canvas must occupy full area */
#scanOverlay .scan-view .dce-video-container,
#scanOverlay .scan-view video,
#scanOverlay .scan-view canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: #000 !important;
}
#scanOverlay .scan-view,
#scanOverlay .dce-video-container,
#scanOverlay video,
#scanOverlay canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  background: #000 !important;
}
/* =========================================================
   Dynamsoft UI suppression (CameraView / DCE overlays)
   Keeps video, removes SDK chrome + branding
   ========================================================= */

/* Kill common Dynamsoft overlay containers/toolbars */
.dce-ui,
.dce-toolbar,
.dce-top-bar,
.dce-bottom-bar,
.dce-sel-camera,
.dce-camera-select,
.dce-camera-selector,
.dce-btn,
.dce-btn-switch,
.dce-btn-close,
.dce-menu,
.dce-popover,
.dce-popover-mask,
.dce-toast,
.dce-message,
.dce-tip,
.dce-hint,
.dce-brand,
.dce-watermark,
.dce-poweredby,
.dynamsoft-watermark,
[class*="powered"],
[id*="powered"],
[class*="watermark"],
[id*="watermark"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Ensure the actual preview remains visible and fills the slot */
.dce-video-container,
.dce-video-container video,
.dce-video-container canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000 !important;
  display: block !important;
}

/* Some builds put overlays inside a shadow wrapper */
.dce-container,
.dce-video-container {
  position: relative !important;
}