/* Taabi TMS — UAE · sign-in screen.
 *
 * Faithful replica of the platform's own login styling. Selector names and
 * values are taken from the source repo:
 *   client/public/assets/css/style.css          → .loginTo, .loginTo img/h3/p, .loginToMB
 *   client/public/assets/css/style-original.css → .loginBG, .loginRightPanel, .factory-login, .orLogin
 *   client/pages/index.js                       → layout (two columns, truck photo on the right)
 */

/* Full-screen canvas: hide the app chrome while signing in. */
.loginmode .rail,
.loginmode .topbar { display: none !important; }
.loginmode .main { margin: 0 !important; }
.loginmode .content { padding: 0 !important; }

.pageWrapper { min-height: 100vh; background: var(--card); }

/* Two columns, collapsing to one on small screens (react-bootstrap Col md={6}). */
.pageWrapper .row { display: flex; flex-wrap: wrap; margin: 0; }
.pageWrapper .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.pageWrapper .col-md-6:first-child { padding: 0 12px 40px; }

/* ---- right panel: truck photograph -------------------------------------- */
.loginBG {
  background: url("../../assets/brand/truck-bg.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
}
.loginRightPanel { height: 100vh; width: 100%; }
.loginRightPanel h2 { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* ---- typography helpers used by the reference markup -------------------- */
.tx-36 { font-size: 36px; }
.tx-16 { font-size: 16px; }
.tx-semibold { font-weight: 600; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-red { color: #E23D3D; }
.pointer { cursor: pointer; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mt-5 { margin-top: 40px; }
.pt-5 { padding-top: 40px; }
.w-100 { width: 100%; }
.px-4 { padding-left: 20px; padding-right: 20px; }
.d-block { display: block; }
.login-logo { width: 145px; height: 52px; object-fit: contain; }
.login-logo[role="button"] { cursor: pointer; }
.loginToMB { margin-bottom: 80px; }

/* ---- role choice cards -------------------------------------------------- */
.loginTo {
  border: 1px solid #d0d5da;
  border-radius: 12px;
  padding: 30px;
  max-width: 520px;
  min-height: 140px;
  margin: 0 auto 20px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.loginTo:hover { border-color: var(--primary); box-shadow: 0 6px 22px rgba(20, 40, 80, .09); }
.loginTo img { width: 56px; height: auto; margin-right: 24px; }
.loginTo h3 {
  font-size: 21px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 10px;
}
.loginTo p { color: #505356; margin: 0; }

/* ---- credentials form --------------------------------------------------- */
.factory-login { padding: 50px 100px 0; margin-top: -30px; }
.factory-login .form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid #d0d5da;
  border-radius: 6px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 40px; }
.pw-eye {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; color: var(--muted); cursor: pointer;
}
.pw-eye:hover { color: var(--ink-2); }

.loginRow {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 18px;
}
.loginRow .check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.loginRow .link-primary { font-size: 13px; font-weight: 600; cursor: pointer; }

.pageWrapper .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 18px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.pageWrapper .btn:hover:not(:disabled) { background: var(--primary-600); border-color: var(--primary-600); }
.pageWrapper .btn:disabled { opacity: .65; cursor: default; }

.loginErrorMessage { display: inline-block; margin: 2px 0 12px; font-size: 13px; }
.loginErrorMessage[hidden] { display: none; }

/* "Or login with OTP" with the horizontal rules on either side. */
.orLogin {
  position: relative;
  display: block;
  margin: 30px auto;
  width: 375px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.orLogin::before,
.orLogin::after {
  content: "";
  width: 135px;
  height: 1px;
  background: #ccc;
  position: absolute;
  top: 10px;
}
.orLogin::before { left: -10px; }
.orLogin::after { right: -10px; }

/* ---- signed-in chrome --------------------------------------------------- */
.who { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 12.5px; color: var(--ink-2); }
.whoname { font-weight: 600; }
.signout {
  margin-left: 10px; padding: 6px 12px;
  background: transparent; border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.signout:hover { border-color: var(--bad); color: var(--bad); }
.signout:disabled { opacity: .6; cursor: default; }

/* ---- small screens (react-bootstrap's d-md-block d-none) ---------------- */
@media (max-width: 991.98px) {
  .factory-login { padding: 20px 0; margin-top: 0; }
  .orLogin { width: 100%; }
  .orLogin::before, .orLogin::after { width: 30%; }
}
@media (max-width: 767.98px) {
  .pageWrapper .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .loginBG { display: none; }
  .loginTo { padding: 20px; }
  .loginTo img { margin-right: 0; }
  .loginToMB { margin-bottom: 50px; }
  .login-logo { width: 70px; height: 70px; }
  .tx-36 { font-size: 26px; }
}

/* ---- Arabic (RTL) ------------------------------------------------------- */
html[dir="rtl"] .loginTo, html[dir="rtl"] .factory-login { text-align: right; }
html[dir="rtl"] .loginTo img { margin-right: 0; margin-left: 24px; }
html[dir="rtl"] .signout { margin-left: 0; margin-right: 10px; }