/* Mobile-first tweaks layered on top of Bootstrap 5 defaults. */

body {
  -webkit-tap-highlight-color: transparent;
}

/* Larger touch targets on small screens (Section 45) */
@media (max-width: 576px) {
  .btn {
    min-height: 44px;
  }
  .form-control,
  .form-select {
    min-height: 44px;
    font-size: 1rem; /* avoid iOS zoom-on-focus below 16px */
  }
}

.card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}


/* =========================================================
   Phase 4 - Login experience
   ========================================================= */

.login-page-shell {
  width: calc(100% + 2rem);
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: -1rem;
  margin-bottom: -1rem;
  padding: 3rem 1rem;

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

  background-image:
    linear-gradient(
      rgba(7, 42, 76, 0.30),
      rgba(7, 42, 76, 0.30)
    ),
    url("../images/login-desktop-bg.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-radius: 0;
  overflow: hidden;
}

.login-page-shell > .login-form-row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Keep the login form readable on desktop while
 * allowing it to use the available width on mobile.
 */
.login-form-col {
  width: 100%;
  max-width: 420px;
  flex: 0 0 auto;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.login-card {
  width: 100%;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(7px);
  border-radius: 1.1rem;
  overflow: hidden;
}

.login-card .card-body {
  width: 100%;
}

.login-card h1 {
  color: #17324d;
  font-weight: 700;
}

.login-card .form-label {
  font-weight: 600;
}

.login-card .form-control {
  width: 100%;
}

.login-links {
  gap: 1rem;
}

.login-links a {
  text-decoration: none;
}

.login-links a:hover {
  text-decoration: underline;
}

/* =========================================================
   Quotation -> Sale Order
   Task Date field sizing
   ========================================================= */

.task-date-input {
  width: 180px;
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 576px) {
  .task-date-input {
    width: 100%;
  }
}

/* Password eye button */
.password-toggle-wrap {
  position: relative;
  width: 100%;
}

.password-toggle-wrap .form-control {
  padding-right: 3rem;
}

.password-toggle-btn {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);

  width: 2.4rem;
  height: 2.4rem;

  border: 0;
  padding: 0;
  background: transparent;
  color: #6c757d;

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

  z-index: 2;
  cursor: pointer;
}

.password-toggle-btn:hover,
.password-toggle-btn:focus {
  color: #0d6efd;
  outline: none;
}

.password-eye-icon {
  display: block;
  pointer-events: none;
}

/* =========================================================
   Mobile Login
   ========================================================= */

@media (max-width: 576px) {

  .login-page-shell {
    width: calc(100% + 2rem);
    min-height: 100vh;
    min-height: 100dvh;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-top: -1rem;
    margin-bottom: -1rem;
    padding: 1.25rem 0.75rem;

    background-image:
      linear-gradient(
        rgba(7, 42, 76, 0.28),
        rgba(7, 42, 76, 0.28)
      ),
      url("../images/login-mobile-bg.jpg");

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .login-form-row {
    width: 100%;
    align-items: center;
  }

  .login-form-col {
    width: 100%;
    max-width: 420px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .login-card {
    border-radius: 1rem;
  }

  .login-card .card-body {
    padding: 1.5rem !important;
  }

  .login-links {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* Phase 5: mobile-safe navbar utilities and initials avatar */
.navbar-user-tools { flex-shrink: 0; white-space: nowrap; }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #ffffff; color: #0d6efd; border: 2px solid rgba(255,255,255,.8);
  font-weight: 700; font-size: .82rem; line-height: 1; flex: 0 0 2.25rem;
}
.navbar-user-tools .nav-link { color: #fff; }
.task-city-badge { display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 999px; background: #d9f0ff; color: #075985; border: 1px solid #a7dcfa; font-weight: 600; }
.task-schedule-fields { min-width: 145px; }
@media (max-width: 575.98px) {
  .navbar-brand { font-size: 1rem; margin-right: 0; }
  .navbar-user-tools { gap: .3rem !important; }
  .navbar-user-tools .btn { padding: .25rem .45rem; font-size: .75rem; }
  .user-avatar { width: 2rem; height: 2rem; flex-basis: 2rem; font-size: .75rem; }
  .navbar-toggler { padding: .25rem .4rem; }
}

/* Phase 5: block interaction from an unauthorized duplicate browser tab. */
.ehomecare-tab-lock-overlay { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(10, 20, 35, .92); }
.ehomecare-tab-lock-overlay .card { max-width: 34rem; border-radius: 1rem; }

#ehomecare-toast-stack { max-width: min(96vw, 24rem); }
#ehomecare-toast-stack .toast { box-shadow: 0 .5rem 1.75rem rgba(0,0,0,.22); }