/* ===== Base from your existing app ===== */
*{box-sizing:border-box}
body{margin:0;font-family:'Roboto',sans-serif;background-color:#592a8a;color:#fff;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:0}
header{background:#fff;width:100%;text-align:center;padding:0}
header img.logo{max-width:300px;height:auto;margin:0}
.container{width:100%;max-width:960px;padding:30px 20px 40px;text-align:left}
h1{text-align:center;margin-bottom:25px;font-size:24px;color:#fff}
form label{display:block;font-weight:500;color:#fff;margin:15px 0 5px}
input[type="number"],input[type="text"],input[type="password"],textarea,select{
  width:100%;padding:8px 10px;font-size:15px;border:none;border-radius:6px;margin-bottom:5px;background:#fff;color:#333
}
fieldset{border:none;margin-top:20px}
legend{font-weight:bold;margin-bottom:10px;color:#fff}
fieldset label{display:block;margin-bottom:8px;font-weight:normal}
button{margin-top:12px;padding:10px 18px;font-size:15px;background:#fff;color:#592a8a;border:none;border-radius:6px;cursor:pointer;font-weight:bold;transition:background-color .3s ease,color .3s ease}
button:hover{background:#e4e4e4;color:#3f1f65}
footer{background:#fff;width:100%;text-align:center;padding:0}
footer a{color:#592a8a;font-weight:bold;text-decoration:none}
footer a:hover{text-decoration:underline}

/* ===== Light tweaks for this app ===== */
.card{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);border-radius:10px;padding:16px;margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.addrbox{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px;white-space:pre-line}
.loginbar{display:flex;gap:8px;align-items:center;margin:16px auto 0;width:100%;max-width:960px;padding:0 20px}
.loginbar input{max-width:240px}
.sep{flex:1}
.muted{color:#ddd}
.ok{color:#b6ffbf}
.err{color:#ffd1d1}

/* === Ensure username & password inputs are identical width === */
.loginbar input{
  width:240px;           /* same width for both */
  max-width:240px;
  flex:0 0 240px;        /* don't shrink/grow */
}

/* Mobile: stack & go full-width */
@media (max-width: 640px){
  .loginbar{ flex-wrap: wrap; }
  .loginbar input{
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }
}

/* === Uniform form control sizing === */
:root{ --control-h: 40px; }

.card .row input[type="text"],
.card .row input[type="password"],
.card .row select,
.card textarea{
  min-height: var(--control-h);
  line-height: 1.2;
}

/* Notes box full width & consistent height */
.card textarea{
  width:100%;
  min-height:110px;
  display:block;
}

/* Customer row: search + button + customer select */
#customerSearch{ flex: 2 1 360px; max-width: 420px; }
#customerSelect{ flex: 3 1 480px; min-width: 320px; }

/* Product row: search + button + variant select + qty + add */
#productSearch{ flex: 2 1 360px; max-width: 420px; }
#productSelect{ flex: 3 1 480px; min-width: 320px; }

/* Quantity box: small, fixed width */
#qty{
  width:84px !important;      /* wins if any inline width survived */
  flex:0 0 84px;
  text-align:center;
}

/* Make buttons visually align with inputs */
.card .row button{
  min-height: var(--control-h);
  padding: 0 16px;
}

/* Keep everything tidy on narrow screens */
@media (max-width: 900px){
  #customerSearch, #customerSelect,
  #productSearch, #productSelect{
    flex:1 1 100%;
    max-width:100%;
    min-width:0;
  }
  #qty{ flex:0 0 72px; width:72px !important; }
}

/* === 1) Login inputs: identical size === */
.loginbar input[type="text"],
.loginbar input[type="password"]{
  width:260px;
  max-width:260px;
  flex:0 0 260px;     /* keep same width in the flex row */
  min-height:40px;    /* exact same height for both */
  padding:8px 10px;
  border-radius:6px;
}
.loginbar button{ min-height:40px; }

/* Mobile: stack full-width */
@media (max-width: 640px){
  .loginbar{ flex-wrap: wrap; }
  .loginbar input[type="text"],
  .loginbar input[type="password"]{
    width:100%;
    max-width:100%;
    flex:1 1 100%;
  }
}

/* === 2) Make selects match their search inputs === */
/* Target widths for the main controls on desktop */
#customerSearch, #productSearch{
  width:420px; max-width:420px; flex:0 0 420px;
}
#customerSelect, #productSelect{
  width:420px; max-width:420px; flex:0 0 420px;
}

/* Keep action buttons aligned with inputs */
.card .row button{ min-height:40px; }

/* Quantity box stays compact */
#qty{ width:84px !important; flex:0 0 84px; text-align:center; }

/* Responsive: loosen widths on narrow screens */
@media (max-width: 900px){
  #customerSearch, #customerSelect,
  #productSearch, #productSelect{
    width:100%; max-width:100%; flex:1 1 100%;
  }
}

/* === 3) Notes width: don't span full card === */
#note{
  width:100%;
  max-width:640px;     /* cap the width */
  display:block;
}

/* === Login bar layout: centered and tidy === */
.loginbar{
  justify-content: center;
  text-align: center;
  gap: 12px;
}

/* Group the login inputs so we can hide/show them cleanly */
.login-fields{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Username & password: identical size/shape */
.login-fields input[type="text"],
.login-fields input[type="password"]{
  width:260px; max-width:260px; flex:0 0 260px;
  min-height:40px; padding:8px 12px;
  border:none; border-radius:8px; background:#fff; color:#333;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
#loginBtn{ min-height:40px; }

/* Center the app container contents visually */
.container{ margin-left:auto; margin-right:auto; }

/* Match select widths to their search inputs */
#customerSearch, #customerSelect,
#productSearch,  #productSelect{
  width:420px; max-width:420px; flex:0 0 420px;
}

/* Notes: not full width */
#note{ width:100%; max-width:640px; display:block; }

/* Quantity box stays compact */
#qty{ width:84px !important; flex:0 0 84px; text-align:center; }

/* Responsive */
@media (max-width: 900px){
  #customerSearch, #customerSelect,
  #productSearch,  #productSelect{ width:100%; max-width:100%; flex:1 1 100%; }
}
@media (max-width: 640px){
  .loginbar{ flex-wrap:wrap; }
  .login-fields{ flex:1 1 100%; justify-content:center; }
  .login-fields input[type="text"],
  .login-fields input[type="password"]{ width:100%; max-width:100%; flex:1 1 100%; }
}

/* Discount label field width */
#discountTitle{ width:420px; max-width:420px; flex:0 0 420px; min-height:40px; }
@media (max-width:900px){ #discountTitle{ width:100%; max-width:100%; flex:1 1 100%; } }
/* === Strong overrides for login inputs === */
#loginFields input{
  width:280px !important;
  max-width:280px !important;
  flex:0 0 280px !important;
  min-height:42px !important;
  padding:8px 12px !important;
  border:none !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#333 !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12) !important;
}
#loginBtn{ min-height:42px !important; }
/* Force identical look for both login inputs across browsers */
#loginFields input{
  height:42px !important;        /* fixed height (not just min-height) */
  line-height:42px !important;    /* centers text consistently */
  border-radius:8px !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
/* Center items vertically in the login bar */
.loginbar{ align-items: center; }

/* Ensure Sign in button matches input height */
#loginBtn{
  height:42px !important;
  padding:0 14px !important;
  border-radius:8px !important;
  display:inline-flex; align-items:center; justify-content:center;
}
/* make the temporarily expanded select render above nearby elements */
.select-expanded{ position:relative; z-index: 10; }