/*
 * This file is part of StyleBI.
 * Copyright (C) 2024  InetSoft Technology
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/* ============================================================
   Design tokens — derived directly from --inet-* theme vars.
   Fallbacks match the default InetSoft palette so the page
   renders correctly even before global.css / theme-variables.css
   have been parsed.

   Left panel  → uses the app's surface colours  (light)
   Right panel → uses --inet-navbar-bg-color      (dark neutral)
   Accent      → uses --inet-primary-color        (orange)
   ============================================================ */
:root {
  /* Surfaces */
  --ln-bg:          var(--inet-navbar-bg-color,            #424242); /* right panel + body overflow */
  --ln-left:        var(--inet-main-panel-bg-color,        #ffffff); /* left/form panel */
  --ln-surface:     var(--inet-main-panel-bg-color,        #ffffff); /* input default bg */
  --ln-surface-hi:  var(--inet-portal-side-panel-bg-color, #f9f9f9); /* input hover bg */

  /* Text */
  --ln-text:        var(--inet-text-color,  #212529);
  --ln-text-soft:   var(--inet-icon-color,  #6d6d6d);
  --ln-text-dim:    #aaaaaa;

  /* Borders */
  --ln-border:       var(--inet-default-border-color, #e0e0e0);
  --ln-border-focus: var(--inet-primary-color,        #ed711c);
  /* Glow derives from the theme primary so custom themes propagate.
     color-mix() is baseline-supported in all evergreen browsers. */
  --ln-glow: color-mix(in srgb, var(--inet-primary-color, #ed711c) 20%, transparent);

  /* Accent — follows the app's primary button colour chain */
  --ln-accent: var(--inet-button-primary-bg-color, #ed711c);
  --ln-danger: var(--inet-danger-color,            #fe688b);
  --ln-font:   var(--inet-font-family,             "Roboto", "Helvetica Neue", Arial, sans-serif);

  /* M3 state-layer opacities */
  --m3-hover:  0.08;
  --m3-focus:  0.12;
  --m3-press:  0.12;

  /* M3 shape tokens (only the values actively used are kept) */
  --m3-shape-xs:   4px;   /* inputs, alerts, banners */
  --m3-shape-xl:   28px;  /* modal dialog */
  --m3-shape-full: 50px;  /* pill buttons */

  /* Layout */
  --ln-nav-h:   54px;
  --ln-left-w:  30%;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--ln-bg);
  color: var(--ln-text);
  font-family: var(--ln-font);
}

body {
  overflow: auto;
}

/* ============================================================
   Navbar  (background + logo colour provided by global.css)
   ============================================================ */
.bg-navbar-top {
  height: var(--ln-nav-h);
  padding: 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}

.custom-logo {
  height: 50px; /* restored to original; 32px was a regression */
  vertical-align: middle;
}

/* ============================================================
   Full-viewport background — centres the floating card
   ============================================================ */
.login-root {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--ln-nav-h));
  position: relative;
  overflow: hidden;
  padding: 48px 24px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    radial-gradient(
      ellipse 75% 55% at 100% 100%,
      color-mix(in srgb, var(--inet-primary-color, #ed711c) 11%, transparent) 0%,
      transparent 68%
    ),
    var(--ln-bg);
}

/* ============================================================
   Floating card — elevated surface centered over the background
   ============================================================ */
.login-left {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  background: var(--ln-left);
  border-radius: var(--m3-shape-xl);
  display: flex;
  flex-direction: column;
  padding: 48px 52px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.40),
    0 2px 8px  rgba(0, 0, 0, 0.20);
  animation: loginPanelIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginPanelIn {
  from { opacity: 0; transform: scale(0.96) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.login-left::-webkit-scrollbar { width: 4px; }
.login-left::-webkit-scrollbar-track { background: transparent; }
.login-left::-webkit-scrollbar-thumb {
  background: var(--ln-border);
  border-radius: 2px;
}

/* ============================================================
   Card — transparent container on the light panel.
   Scoped selectors give sufficient specificity to override
   Bootstrap without needing !important on every property.
   ============================================================ */
.login-left .card {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  max-width: 100%;
  color: var(--ln-text);
}

/* M3 Expressive headline — dark on light */
.login-left .card-header {
  background: transparent;
  border: none;
  padding: 0 0 36px 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--inet-dark-color, #202020);
  letter-spacing: -0.03em;
  line-height: 1.15;
  animation: loginItemIn 0.5s 0.10s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-left .card-body {
  padding: 0;
}

.login-left .card-footer {
  background: transparent;
  border: none;
  padding: 28px 0 0 0;
}

/* ============================================================
   Form elements — M3 Outlined Text Field on light surface.
   Selector specificity (0,2,0) overrides Bootstrap (0,1,0)
   without requiring !important on individual properties.
   ============================================================ */

/* Stagger form groups */
.login-left .card-body .form-group:nth-child(1) { animation: loginItemIn 0.5s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both; }
.login-left .card-body .form-group:nth-child(2) { animation: loginItemIn 0.5s 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
.login-left .card-body .form-group:nth-child(3) { animation: loginItemIn 0.5s 0.30s cubic-bezier(0.22, 1, 0.36, 1) both; }
.login-left .card-body .form-group:nth-child(4) { animation: loginItemIn 0.5s 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes loginItemIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.login-left .form-group {
  margin-bottom: 20px;
}

/* M3 Label Medium */
.login-left .form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ln-text-soft);
  letter-spacing: 0.04em;
}

.required-field::after {
  content: " *";
  color: var(--ln-accent);
}

/* M3 Outlined Text Field — shape.corner.extra-small = 4dp */
.login-left .form-control {
  background: var(--ln-surface);
  border: 1px solid var(--ln-border);
  border-radius: var(--m3-shape-xs);
  color: var(--ln-text);
  padding: 12px 14px;
  font-size: 0.93rem;
  font-family: var(--ln-font);
  width: 100%;
  transition:
    border-color 0.15s ease,
    background   0.15s ease,
    box-shadow   0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.login-left .form-control:hover {
  border-color: var(--inet-gray2, #bdbdbd);
  background: var(--ln-surface-hi);
}

/* M3 focus: 2px primary border + subtle themed glow */
.login-left .form-control:focus {
  outline: none;
  background: var(--ln-surface);
  border: 2px solid var(--ln-border-focus);
  padding: 11px 13px; /* compensate for extra border pixel */
  color: var(--ln-text);
  box-shadow: 0 0 0 3px var(--ln-glow);
}

.login-left .form-control::placeholder {
  color: var(--ln-text-dim);
}

/* Override browser autofill highlight (Chrome/Edge/Safari use a blue/yellow tint).
   background-color is ignored on autofilled inputs; a large inset box-shadow
   paints over the UA-supplied colour instead. The transition delay prevents a
   flash when the autofill is first applied.
   Focus state combines the inset background with the M3 glow ring so both
   are visible simultaneously — box-shadow is a single property and a plain
   inset would suppress the outer glow if listed alone. */
.login-left input.form-control:-webkit-autofill,
.login-left input.form-control:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--ln-surface) inset;
  box-shadow: 0 0 0 1000px var(--ln-surface) inset;
  -webkit-text-fill-color: var(--ln-text);
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--ln-text);
}

.login-left input.form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--ln-surface) inset, 0 0 0 3px var(--ln-glow);
  box-shadow: 0 0 0 1000px var(--ln-surface) inset, 0 0 0 3px var(--ln-glow);
  -webkit-text-fill-color: var(--ln-text);
  caret-color: var(--ln-text);
}

/* The browser's native select arrow is hidden; the .select-wrapper
   pseudo-element renders a themed arrow instead. transition:none
   prevents a flash during option-list open on some browsers. */
.login-left select.form-control {
  cursor: pointer;
  background-image: none;
  padding-right: 34px;
  transition: none;
}

.select-wrapper {
  position: relative;
}

/* Custom dropdown arrow for light background */
.select-wrapper::after {
  content: '';
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236d6d6d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.login-left select.form-control option {
  background: var(--ln-surface);
  color: var(--ln-text);
}

.login-left .invalid-feedback {
  color: var(--ln-danger);
  font-size: 0.8rem;
  margin-top: 4px;
}

.signup-text {
  text-align: end;
  margin-bottom: 20px;
}

.signup-text a {
  color: var(--ln-accent);
  font-size: 0.85rem;
  text-decoration: none;
  transition: opacity 0.15s;
}

.signup-text a:hover { opacity: 0.75; }

/* ============================================================
   Sign-in button — M3 Filled Button, pill shape.
   ID selector on #loginButton gives (1,1,0) specificity which
   beats Bootstrap's (0,1,0) without needing !important.
   ============================================================ */
#loginButton.btn-primary,
.login-left .btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--ln-accent);
  border: none;
  border-radius: var(--m3-shape-full);
  color: var(--inet-button-primary-text-color, #fff);
  font-family: var(--ln-font);
  font-size: 0.9rem;
  font-weight: 500;           /* M3 Label Large */
  letter-spacing: 0.01em;
  text-transform: none;       /* M3 dropped ALL-CAPS */
  padding: 14px 24px;
  width: 100%;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  box-shadow: none;
  animation: loginItemIn 0.5s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* M3 state layer: translucent white overlay */
#loginButton.btn-primary::after,
.login-left .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity 0.15s ease;
  border-radius: inherit;
  pointer-events: none;
}

#loginButton.btn-primary:hover::after,
.login-left .btn-primary:hover::after  { opacity: var(--m3-hover); }
#loginButton.btn-primary:focus::after,
.login-left .btn-primary:focus::after  { opacity: var(--m3-focus); }
#loginButton.btn-primary:active::after,
.login-left .btn-primary:active::after { opacity: var(--m3-press); }

#loginButton.btn-primary:hover,
.login-left .btn-primary:hover {
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
}

/* ============================================================
   Social / Google login
   ============================================================ */
.social-login-div {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  margin: 20px 0 0 0;
}

.separator-div {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  width: 100%;
}

.separator-line {
  flex-grow: 1;
  height: 1px;
  background: var(--ln-border);
  border: none;
  display: block;
}

.separator-text {
  color: var(--ln-text-soft);
  padding: 0 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* ============================================================
   Login banner — M3 outlined card on light surface
   ============================================================ */
.loginBanner:empty {
  display: none;
}

.login-left .loginBanner {
  border: 1px solid var(--ln-border);
  background: var(--inet-portal-side-panel-bg-color, #f9f9f9);
  color: var(--ln-text);
  border-radius: var(--m3-shape-xs);
  padding: 14px 16px;
  margin: 14px 0 0 0;
  font-size: 0.875rem;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
}

pre.loginBanner {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--ln-font);
}

/* ============================================================
   Alerts — theme light-mode colour variants
   ============================================================ */
.login-left div.alert {
  margin: 10px 0 0 0;
  width: 100%;
  max-width: 100%;
  border-radius: var(--m3-shape-xs);
  font-size: 0.875rem;
}

.login-left .alert-danger {
  background: var(--inet-danger-color-light,  #fff3f5);
  color:      var(--inet-danger-color-dark,   #85646c);
  border: 1px solid var(--inet-danger-color,  #fe688b);
}

.login-left .alert-warning {
  background: var(--inet-warning-color-light, #fcfdef);
  color:      var(--inet-warning-color-dark,  #7e7e5a);
  border: 1px solid var(--inet-warning-color, #f2f3ae);
}

/* ============================================================
   Modal — scoped to #activeSession for specificity over
   Bootstrap's (0,1,0) without needing !important.
   M3 Dialog: shape.corner.extra-large = 28dp
   ============================================================ */
#activeSession .modal-content {
  background: var(--inet-dialog-bg-color, #ffffff);
  border: 1px solid var(--ln-border);
  border-radius: var(--m3-shape-xl);
  color: var(--ln-text);
}

#activeSession .modal-header {
  border-bottom: 1px solid var(--ln-border);
  padding: 20px 28px;
  background: transparent;
  border-radius: var(--m3-shape-xl) var(--m3-shape-xl) 0 0;
}

#activeSession .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ln-text);
}

#activeSession .modal-body {
  padding: 24px 28px;
  font-size: 0.9rem;
}

#activeSession .modal-footer {
  border-top: 1px solid var(--ln-border);
  padding: 16px 28px;
  background: transparent;
  border-radius: 0 0 var(--m3-shape-xl) var(--m3-shape-xl);
  display: flex;
  gap: 10px;
}

.modal-header .close {
  margin-left: auto;
}

/* Light modal — default close icon is already dark, no filter needed */
.btn-close {
  filter: none;
}

/* M3 Outlined Button using the theme's default button colour vars */
.btn-default {
  position: relative;
  overflow: hidden;
  background: var(--inet-button-default-bg-color,     transparent);
  border: 1px solid var(--inet-button-default-border-color, #105e5a);
  color: var(--inet-button-default-text-color,        #105e5a);
  border-radius: var(--m3-shape-full);
  padding: 9px 20px;
  font-family: var(--ln-font);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-default:hover {
  background: var(--inet-button-default-hover-bg-color,   #105e5a);
  color:      var(--inet-button-default-hover-text-color, #cdf7f6);
}

#activeSession .modal-footer .btn-primary {
  border-radius: var(--m3-shape-full);
  padding: 9px 20px;
}

.text-info {
  color: var(--ln-text-soft) !important; /* Bootstrap utility — !important intentional */
}

/* ============================================================
   Loading indicator + page-exit transition
   (Always dark — hardcoded so it works on any theme.)
   ============================================================ */
div.loading-indicator {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(30, 30, 30, 0.90);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

div.loading-indicator.loading {
  display: flex;
  animation: overlayIn 0.25s ease both;
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Content wrapper — spring entrance */
.ln-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: spinnerIn 0.45s cubic-bezier(0.34, 1.38, 0.64, 1) both;
}

@keyframes spinnerIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1);   }
}

/* ── M3 Indeterminate Circular Progress ──────────────────── */
.ln-spinner {
  width: 52px;
  height: 52px;
  animation: spinnerRotate 1.5s linear infinite;
}

@keyframes spinnerRotate {
  100% { transform: rotate(360deg); }
}

.ln-spinner__track {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 4;
}

/* Arc grows and shrinks; circumference for r=22: 2π×22 ≈ 138.2 */
.ln-spinner__arc {
  stroke: var(--ln-accent);
  stroke-width: 4;
  stroke-linecap: round;
  animation: spinnerDash 1.5s ease-in-out infinite;
}

@keyframes spinnerDash {
  0%   { stroke-dasharray: 1,   138.2; stroke-dashoffset: 0;      }
  50%  { stroke-dasharray: 104, 138.2; stroke-dashoffset: -35;    }
  100% { stroke-dasharray: 104, 138.2; stroke-dashoffset: -138.2; }
}

/* ============================================================
   Background decoration layer — full-bleed behind the card
   ============================================================ */
.login-right {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Merged: positioning + pulse animation in one rule */
.login-right svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: arcPulse 6s 1.5s ease-in-out infinite;
}

.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
}

.radar-arc {
  stroke: var(--ln-accent);
  fill: none;
  stroke-linecap: round;
}

.radar-arc:nth-child(1) { animation: arcIn 0.7s 0.10s ease both; }
.radar-arc:nth-child(2) { animation: arcIn 0.7s 0.20s ease both; }
.radar-arc:nth-child(3) { animation: arcIn 0.7s 0.30s ease both; }
.radar-arc:nth-child(4) { animation: arcIn 0.7s 0.40s ease both; }
.radar-arc:nth-child(5) { animation: arcIn 0.7s 0.50s ease both; }
.radar-arc:nth-child(6) { animation: arcIn 0.7s 0.60s ease both; }

@keyframes arcIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes arcPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 600px) {
  .login-root {
    align-items: flex-start;
    padding: 24px 16px;
  }

  .login-left {
    max-width: none;
    border-radius: var(--m3-shape-xs);
    padding: 36px 28px;
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   Reduced-motion: disable all entrance and ambient animations
   for users who prefer reduced motion (accessibility).
   Note: :nth-child(n) selectors below match the specificity
   (0,4,0) of the stagger rules above, ensuring they are
   correctly suppressed.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .login-left,
  .login-left .card-header,
  .login-left .card-body .form-group,
  .login-left .card-body .form-group:nth-child(n),
  .login-left .card-footer,
  #loginButton.btn-primary,
  .login-left .btn-primary,
  .radar-arc,
  .radar-arc:nth-child(n),
  .ln-loading-content,
  .ln-spinner,
  .ln-spinner__arc {
    animation: none;
    transition: none;
  }

  .login-right svg {
    animation: none;
  }

  div.loading-indicator.loading {
    animation: none;
  }
}

/* ============================================================
   Restricted access page  (restricted.html shares login.css)
   ============================================================ */
.restricted-note {
  font-size: 0.925rem;
  color: var(--ln-text-soft);
  line-height: 1.6;
  margin: 0 0 32px 0;
}

.restricted-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Primary action — M3 Filled Button */
.restricted-action-btn--primary {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--ln-accent);
  color: var(--inet-button-primary-text-color, #fff);
  border-radius: var(--m3-shape-full);
  padding: 13px 24px;
  font-family: var(--ln-font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
}

.restricted-action-btn--primary:hover {
  color: var(--inet-button-primary-text-color, #fff);
  text-decoration: none;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
}

.restricted-action-btn--primary:focus-visible {
  outline: 2px solid var(--ln-border-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--ln-glow);
}

/* Secondary action — M3 Outlined Button using theme secondary colour */
.restricted-action-btn:not(.restricted-action-btn--primary) {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--inet-button-default-bg-color,     transparent);
  color:      var(--inet-button-default-text-color,   #105e5a);
  border: 1px solid var(--inet-button-default-border-color, #105e5a);
  border-radius: var(--m3-shape-full);
  padding: 12px 24px;
  font-family: var(--ln-font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s;
}

.restricted-action-btn:not(.restricted-action-btn--primary):hover {
  background: var(--inet-button-default-hover-bg-color,   #105e5a);
  color:      var(--inet-button-default-hover-text-color, #cdf7f6);
  text-decoration: none;
}

.restricted-action-btn:not(.restricted-action-btn--primary):focus-visible {
  outline: 2px solid var(--ln-border-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--ln-glow);
}