/* static/css/style.css */

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* Background */
html, body {
  height: 100%;
  background: #f0f2f5;
}

/* ----------- Login Styles ----------- */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.login-card {
  background: #ffffff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

  width: 95%;
  max-width: 420px;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.logo {
  width: 200px;
  height: auto;
  margin: 0 auto 2rem;
}

.flash-messages {
  margin-bottom: 1rem;
}

.flash.danger {
  color: #c0392b;
  font-size: 0.9rem;
}

.login-form .form-group {
  margin-bottom: 1rem;
}

.login-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}

.login-form input:focus {
  outline: none;
  border-color: #2e7d32;
}

.btn-login {
  width: 100%;
  padding: 0.75rem;
  background: #ffdc30;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-login:hover {
  background: #276c2c;
}

/* ----------- (Eventuali altri stili per dashboard, ecc.) ----------- */
:root {
  --brand-color: #2e7d32;
}

/* (Puoi mantenere o eliminare il resto dei tuoi stili per il dashboard) */

#scannerContainer #roiBox{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  max-width:300px;           /* rettangolo ~ 300 px */
  aspect-ratio:4/1;
  border:2px solid rgba(255,255,255,.9);
  border-radius:6px;

  /*  ⬇️  NUOVO: grande shadow = maschera scura  */
  box-shadow:0 0 0 9999px rgba(0,0,0,.65);

  background:transparent;    /* niente fill, lasciamo il video visibile */
  pointer-events:none;       /* il tap passa sotto */
  z-index:2;                 /* sopra al video */
}

  /* Linea rossa animata */
  #scannerContainer #scanLine{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:#ff3b30;               /* rosso iOS-like                */
    animation:scanMove 2s linear infinite;
      z-index: 2;
  pointer-events: none;
  }

  @keyframes scanMove{
    0%   {top:0;}
    50%  {top:calc(100% - 2px);}
    100% {top:0;}
  }