html, body { margin:0; padding:0; min-height:100%; }
body {
  font-family: Arial, sans-serif;
  background: url("background.jpg") center/cover no-repeat;
  background-attachment: scroll;
  display:flex; justify-content:center; align-items:flex-start;
  padding-top:40px; overflow-y:auto;
}

/* Frosted glass card */
.card {
  background: rgba(255,255,255,0.15);
  padding: 30px;
  border-radius: 12px;
  max-width: 600px; width: 100%;
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.card h1 {
  font-size: 22px; 
  font-weight: 800; 
  color:#0a2342;
  margin-bottom: 20px; 
  text-align: center;
}

/* Search bar + buttons */
.form-group { 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px; 
  margin-bottom:20px; 
}

input[type="text"] {
  flex:1; 
  padding:12px 14px; 
  border-radius:6px; 
  border:1px solid #ccc; 
  font-size:14px;
}

button {
  background:#1d79f2; 
  color:#fff; 
  border:none; 
  padding:12px 20px; 
  border-radius:6px;
  font-size:14px; 
  font-weight:700; 
  cursor:pointer;
  transition:0.2s;
}

button:hover { background:#0f5fd8; }

/* Color variants */
.btn-warning { background:#ff9800; }
.btn-teal    { background:#009688; }
.btn-green   { background:#4caf50; }
.btn-blue    { background:#1d79f2; }
.btn-danger  { background:#ff0000; }
.small       { padding:8px 14px; font-size: 12px; }

/* Results section */
.result {
  margin-top:20px; 
  padding:15px; 
  background:rgba(255,255,255,0.15);
  border-radius:8px; 
  border:1px solid #ddd; 
  display:none;
}

.result h2 { 
  margin:0 0 10px; 
  font-size:18px; 
  color:#1d79f2; 
}

.result p { 
  margin:5px 0; 
  font-size:14px; 
  color:#333; 
}

/* Status badges */
.status-return    { background:red;   color:#fff; font-weight:bold; padding:6px 14px; border-radius:8px; }
.status-ongoing   { background:gold;  color:#000; font-weight:bold; padding:6px 14px; border-radius:8px; }
.status-completed { background:green; color:#fff; font-weight:bold; padding:6px 14px; border-radius:8px; }

/* Progress bar */
.progress-container {
  margin:15px 0; 
  background:#eee; 
  border-radius:20px; 
  overflow:hidden; 
  height:20px;
}
.progress-bar {
  height:100%; 
  width:0;
  background: linear-gradient(90deg, green, yellow, red);
  text-align:center; 
  color:white; 
  font-size:12px; 
  font-weight:bold; 
  line-height:20px;
  transition: width 0.6s ease;
}

/* Images & Logs */
.images { 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px; 
  margin-top:10px; 
}
.images img { 
  width:100px; 
  height:80px; 
  object-fit:cover; 
  border:1px solid #ccc; 
  border-radius:6px; 
}

.logs { 
  margin-top:15px; 
  max-height:250px; 
  overflow-y:auto; 
  padding-left:20px; 
  position:relative; 
}
.log-entry { 
  margin-bottom:12px; 
  font-size:13px; 
  position:relative; 
  padding-left:10px; 
}
.log-entry span { font-size:11px; color:gray; }

.error { 
  margin-top:15px; 
  color:red; 
  font-weight:bold; 
  display:none; 
}

/* Notification Modal */
#notification-overlay {
  position: fixed; 
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: none; 
  justify-content: center; 
  align-items: center;
  z-index: 3000;
}

#notification {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 30px 40px;
  font-size: 1.5rem; 
  font-weight: bold; 
  color: #fff; 
  text-align:center;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
  transform: scale(0.9); 
  animation: popupIn 0.4s forwards;
}

@keyframes popupIn { 
  from{opacity:0; transform:scale(0.9);} 
  to{opacity:1; transform:scale(1);} 
}

.progress { 
  width:100%; 
  height:10px; 
  background:rgba(255,255,255,0.3); 
  border-radius:5px; 
  overflow:hidden; 
  margin-top:15px; 
}

.bar { 
  width:0; 
  height:100%; 
  background:#00ff73; 
}

@keyframes load { to { width: 100%; } }

.checkmark { 
  width:80px; 
  height:80px; 
  margin:0 auto 15px; 
  stroke:#00ff73; 
  stroke-width:4; 
  stroke-miterlimit:10; 
  border-radius:50%; 
  display:block; 
}

.checkmark-circle { 
  stroke-dasharray:166; 
  stroke-dashoffset:166; 
  stroke-width:4; 
  stroke:#00ff73; 
  fill:none; 
  animation: stroke 0.6s ease-in-out forwards; 
}

.checkmark-check { 
  transform-origin:50% 50%; 
  stroke-dasharray:48; 
  stroke-dashoffset:48; 
  stroke:#00ff73; 
  animation: stroke 0.4s 0.6s ease-in-out forwards; 
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }

/* Update Ticket Modal */
#updateModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 4000;
}

#updateModal .modal-content {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 25px 30px;
  width: 90%;
  max-width: 400px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}

#updateModal .modal-content h2 {
  text-align: center;
  color: #1d79f2;
  margin-bottom: 10px;
}

#updateModal .modal-content input {
  padding: 10px;
  border: none;
  border-radius: 6px;
  outline: none;
  font-size: 14px;
}

#updateModal .modal-content .actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

#updateModal .modal-content button {
  flex: 1;
  margin: 0 5px;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
}

/* Scanner Overlay (for camera) */
#scannerOverlay { 
  display:none; 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.6); 
  justify-content:center; 
  align-items:center; 
  z-index:5000; 
}

#scannerOverlay video { 
  width:100%; 
  max-width:400px; 
  border-radius:10px; 
}

#stopScanBtn { 
  position:absolute; 
  top:20px; 
  right:20px; 
}

/* Layout Adjustments */
.actions-row { display:flex; gap:10px; margin-top:12px; }
.actions-col { margin-top:20px; }

/* Mobile */
@media (max-width: 768px) {
  body { padding-top: 20px; }
  .card { width: 92%; margin-left: 0; padding: 16px; }
  .card h1 { font-size: 18px; }
  input, button { font-size:14px; padding:10px; }
  .images img { width: 90px; height: 68px; }
  .logs { max-height: 200px; }
}

@media (max-width: 480px) {
  .form-group { flex-direction: column; }
  button { margin-top: 10px; }
}