/* Drishti login polish for Tactical RMM v1.5.1. Scoped to LoginView's .bg-image wrapper. */
.bg-image {
  min-height: 100vh;
  padding: 32px 20px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(5, 10, 18, .94), rgba(17, 24, 39, .91) 48%, rgba(8, 25, 18, .92)),
    linear-gradient(90deg, #071019 0%, #111827 52%, #0a1411 100%);
}

.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .16));
}

.bg-image::after {
  content: "Drishti RMM";
  position: absolute;
  top: 32px;
  left: 40px;
  color: rgba(226, 232, 240, .88);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 6px;
  background: rgba(15, 23, 42, .48);
}

.bg-image > .q-card {
  width: min(420px, calc(100vw - 32px)) !important;
  position: relative;
  z-index: 1;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(15, 23, 42, .92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(18px);
}

.bg-image > .q-card::before {
  content: "Authorized access only";
  display: block;
  padding: 18px 24px 0;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.bg-image .q-card__section {
  padding-left: 24px;
  padding-right: 24px;
}

.bg-image .q-card__section:first-child {
  padding-top: 8px;
  padding-bottom: 18px;
}

.bg-image .text-h4 {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  color: #f8fafc;
}

.bg-image .q-form.q-gutter-md > * + * {
  margin-top: 18px;
}

.bg-image .q-field--filled .q-field__control {
  min-height: 54px;
  border-radius: 6px;
  background: rgba(2, 6, 23, .5);
}

.bg-image .q-field--filled .q-field__control::before {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 6px;
  background: transparent;
}

.bg-image .q-field--focused .q-field__control::after {
  border-color: #38bdf8;
  border-width: 1px;
  border-radius: 6px;
}

.bg-image .q-field__label,
.bg-image .q-field__native,
.bg-image .q-field__prefix,
.bg-image .q-field__suffix,
.bg-image .q-field__marginal {
  color: rgba(226, 232, 240, .92);
}

.bg-image .q-btn.bg-primary {
  min-height: 46px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%) !important;
  color: #021018 !important;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(14, 165, 233, .22);
}

.bg-image .q-btn.bg-primary:hover {
  filter: brightness(1.05);
}

.bg-image .q-list--bordered {
  border-color: rgba(148, 163, 184, .24);
  border-radius: 6px;
  background: rgba(2, 6, 23, .32);
}

.bg-image .text-h6 {
  color: #e2e8f0;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .bg-image {
    padding: 18px 16px;
    align-items: center;
  }

  .bg-image::after {
    display: none;
  }

  .bg-image > .q-card {
    width: 100% !important;
  }

  .bg-image .q-card__section,
  .bg-image > .q-card::before {
    padding-left: 20px;
    padding-right: 20px;
  }

  .bg-image .text-h4 {
    font-size: 24px;
  }
}

/* Mobile containment fix: keep login card within narrow viewports. */
.bg-image .q-card {
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 32px)) !important;
}

@media (max-width: 700px) {
  .bg-image {
    overflow-x: hidden;
  }

  .bg-image .q-card {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    margin-left: auto;
    margin-right: auto;
  }

  .bg-image .q-card__section,
  .bg-image .q-form,
  .bg-image .q-field,
  .bg-image .q-btn {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* Narrow viewport hard stop for headless/mobile browsers with a wider layout viewport. */
@media (max-width: 700px) {
  .bg-image {
    justify-content: flex-start !important;
  }

  .bg-image .q-card {
    width: min(358px, calc(100vw - 32px)) !important;
    max-width: min(358px, calc(100vw - 32px)) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Login-only two-factor dialog polish. The :has() guard keeps dashboard dialogs untouched. */
body:has(.bg-image) .q-dialog__backdrop {
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(3px);
}

body:has(.bg-image) .q-dialog__inner {
  padding: 24px;
}

body:has(.bg-image) .q-dialog__inner > .q-card {
  width: min(400px, calc(100vw - 48px)) !important;
  min-width: min(400px, calc(100vw - 48px)) !important;
  max-width: calc(100vw - 48px) !important;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: #0f172a;
  color: #e5edf8;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 1px 0 rgba(255, 255, 255, .04) inset;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-card__section {
  padding-left: 22px;
  padding-right: 22px;
}

body:has(.bg-image) .q-dialog__inner > .q-card .text-h6 {
  margin: 0;
  color: #f8fafc;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-form {
  margin-top: 4px;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field--outlined .q-field__control,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field--filled .q-field__control {
  min-height: 52px;
  border-radius: 6px;
  background: rgba(2, 6, 23, .54);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field--outlined .q-field__control::before,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field--filled .q-field__control::before {
  border-color: rgba(148, 163, 184, .32);
  border-radius: 6px;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field--focused .q-field__control::after {
  border-color: #38bdf8;
  border-width: 1px;
  border-radius: 6px;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field--error .q-field__control::before,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field--error .q-field__control::after {
  border-color: #f43f5e;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__native,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field__label,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field__marginal {
  color: rgba(226, 232, 240, .92);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__bottom {
  padding-top: 6px;
  color: #fb7185;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-card__actions {
  padding: 4px 14px 16px;
  gap: 8px;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-card__actions .q-btn {
  min-height: 36px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  body:has(.bg-image) .q-dialog__inner {
    padding: 16px;
  }

  body:has(.bg-image) .q-dialog__inner > .q-card {
    width: calc(100vw - 32px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* Six-cell visual treatment for the login two-factor token input. */
body:has(.bg-image) .q-dialog__inner > .q-card .q-field {
  max-width: 100%;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control {
  height: 56px;
  min-height: 56px;
  padding: 0;
  background: transparent !important;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control::before,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control::after {
  display: none;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__native {
  width: 100%;
  height: 56px;
  padding: 0 0 0 13px;
  border: 0;
  color: #f8fafc;
  caret-color: #38bdf8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 24px;
  font-weight: 800;
  line-height: 56px;
  letter-spacing: 31px;
  text-align: left;
  background:
    linear-gradient(#0b1224, #0b1224) padding-box,
    linear-gradient(135deg, rgba(56, 189, 248, .55), rgba(16, 185, 129, .5)) border-box;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__native:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .16), inset 0 0 0 1px rgba(56, 189, 248, .3);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field--error .q-field__native {
  background:
    linear-gradient(#0b1224, #0b1224) padding-box,
    linear-gradient(135deg, #f43f5e, #fb7185) border-box;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, .12), inset 0 0 0 1px rgba(244, 63, 94, .2);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control-container {
  position: relative;
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 8px;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent 45px,
      rgba(148, 163, 184, .24) 45px,
      rgba(148, 163, 184, .24) 46px,
      transparent 46px,
      transparent 57px,
      transparent 102px,
      rgba(148, 163, 184, .24) 102px,
      rgba(148, 163, 184, .24) 103px,
      transparent 103px,
      transparent 114px,
      transparent 159px,
      rgba(148, 163, 184, .24) 159px,
      rgba(148, 163, 184, .24) 160px,
      transparent 160px,
      transparent 171px,
      transparent 216px,
      rgba(148, 163, 184, .24) 216px,
      rgba(148, 163, 184, .24) 217px,
      transparent 217px,
      transparent 228px,
      transparent 273px,
      rgba(148, 163, 184, .24) 273px,
      rgba(148, 163, 184, .24) 274px,
      transparent 274px);
}

body:has(.bg-image) .q-dialog__inner > .q-card .q-field__append,
body:has(.bg-image) .q-dialog__inner > .q-card .q-field__marginal {
  display: none;
}

@media (max-width: 420px) {
  body:has(.bg-image) .q-dialog__inner > .q-card .q-field__native {
    height: 52px;
    padding-left: 10px;
    font-size: 22px;
    line-height: 52px;
    letter-spacing: 26px;
  }

  body:has(.bg-image) .q-dialog__inner > .q-card .q-field__control-container::before {
    opacity: .75;
    background: repeating-linear-gradient(90deg,
      transparent 0,
      transparent calc((100% / 6) - 1px),
      rgba(148, 163, 184, .24) calc((100% / 6) - 1px),
      rgba(148, 163, 184, .24) calc(100% / 6));
  }
}

/* Session-expired route polish. Scoped through the marker class added to SessionExpired. */
body:has(.drishti-expired) {
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(5, 10, 18, .96), rgba(17, 24, 39, .92) 48%, rgba(8, 25, 18, .94)),
    linear-gradient(90deg, #071019 0%, #111827 52%, #0a1411 100%);
}

body:has(.drishti-expired)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    linear-gradient(rgba(148, 163, 184, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .13) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .16));
}

body:has(.drishti-expired)::after {
  content: "Drishti RMM";
  position: fixed;
  top: 32px;
  left: 40px;
  color: rgba(226, 232, 240, .88);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 6px;
  background: rgba(15, 23, 42, .48);
}

.drishti-expired {
  width: min(420px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 26px 26px 24px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .26);
  background: rgba(15, 23, 42, .92);
  color: #e5edf8;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .04) inset;
  backdrop-filter: blur(18px);
}

.drishti-expired::before {
  content: "Session expired";
  display: block;
  margin-bottom: 10px;
  color: #7dd3fc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: left;
}

.drishti-expired .text-faded {
  margin: 0 0 22px;
  color: #f8fafc !important;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.drishti-expired .q-btn {
  width: 100% !important;
  min-height: 46px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0ea5e9 0%, #10b981 100%) !important;
  color: #021018 !important;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(14, 165, 233, .22);
}

@media (max-width: 700px) {
  body:has(.drishti-expired)::after {
    display: none;
  }

  .drishti-expired {
    width: calc(100vw - 32px);
    padding: 22px 20px 20px;
  }

  .drishti-expired .text-faded {
    font-size: 20px;
  }
}

/* Narrow viewport hard stop for the expired-session card. */
@media (max-width: 700px) {
  .drishti-expired.fixed-center {
    left: 16px !important;
    right: auto !important;
    width: min(358px, calc(100vw - 32px)) !important;
    max-width: min(358px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    transform: translateY(-50%) !important;
  }

  .drishti-expired .q-btn {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}