/* /var/www/monitorsystem/public/assets/css/auth-login-split.css
   =========================================================
   VERSION: MS V2.1
   PURPOSE:
     Responsive split auth layout + sliding gallery
   CHANGES IN V2.1:
     - Preserve existing split login layout and gallery behavior
     - Add production-safe pulsating animation for "Live" status indicator
     - Keep appearance consistent with existing UI look/feel
     - Respect reduced-motion accessibility preference
   NOTES:
     - Mobile friendly and screen responsive
     - Multi-tenant safe: presentation layer only
   ========================================================= */

/* =========================================================
   AUTH PAGE SHELL
   ========================================================= */
.ms-auth-split-body{
  min-height: 100vh;
}

.ms-auth-shell{
  min-height: 100vh;
  padding:
    clamp(18px, 2vw, 28px)
    clamp(14px, 2vw, 24px)
    clamp(24px, 3vw, 32px);
}

.ms-auth-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 auto 24px;
  max-width:1680px;
}

.ms-auth-main{
  max-width:1680px;
  margin:0 auto;
}

.ms-auth-right-wrap{
  max-width:620px;
  margin:0 auto;
}

/* =========================================================
   SHARED PANEL STYLING
   ========================================================= */
.ms-auth-panel{
  min-height:100%;
  height:100%;
  overflow:hidden;
  position:relative;
}

/* ---------------------------------------------------------
   FORM PANEL
   - Gold 2px border around actual form container
   --------------------------------------------------------- */
.ms-auth-form-panel{
  border-radius:22px;
  border:2px solid rgba(214,178,74,0.94) !important;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.22),
    0 0 0 1px rgba(214,178,74,0.10);
}

.ms-auth-form-panel-body{
  padding:clamp(24px, 2.5vw, 42px);
}

.ms-auth-return-link{
  color:var(--accent-blue);
  font-weight:600;
}

/* =========================================================
   LOGIN VIEW
   ========================================================= */
.ms-login-view{
  width:100%;
}

.ms-login-logo{
  max-width:108px;
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

/* =========================================================
   INPUT FIELDS
   ========================================================= */
.ms-login-form .form-control{
  min-height:56px;
  border:2px solid rgba(214,178,74,0.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 0 0 1px rgba(214,178,74,0.10);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background-color 180ms ease;
}

.ms-login-form .form-control:hover{
  border-color:rgba(214,178,74,1) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 0 0 1px rgba(214,178,74,0.18),
    0 8px 18px rgba(0,0,0,0.12);
}

.ms-login-form .form-control:focus,
.ms-login-form .form-control:focus-visible{
  border-color:rgba(214,178,74,1) !important;
  box-shadow:
    0 0 0 0.18rem rgba(214,178,74,0.18),
    0 0 0 1px rgba(214,178,74,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* =========================================================
   SIGN IN BUTTON
   ========================================================= */
.ms-login-submit{
  position:relative;
  overflow:hidden;
  min-height:56px;
  font-weight:800;
  border:2px solid transparent !important;
  box-shadow:
    0 16px 30px rgba(0,153,255,0.20),
    0 0 0 1px rgba(255,255,255,0.03);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    filter 180ms ease;
}

.ms-login-submit::before{
  content:"";
  position:absolute;
  top:0;
  left:-130%;
  width:58%;
  height:100%;
  background:linear-gradient(
    110deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.10) 35%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.10) 65%,
    rgba(255,255,255,0.00) 100%
  );
  transform:skewX(-22deg);
  pointer-events:none;
}

.ms-login-submit:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:
    0 20px 36px rgba(0,153,255,0.24),
    0 0 0 1px rgba(255,255,255,0.05),
    0 0 18px rgba(214,178,74,0.14);
}

.ms-login-submit:hover::before{
  animation: msSignInShine 900ms ease;
}

.ms-login-submit:focus,
.ms-login-submit:focus-visible{
  border-color:rgba(214,178,74,0.92) !important;
  box-shadow:
    0 0 0 0.22rem rgba(214,178,74,0.18),
    0 18px 34px rgba(0,153,255,0.22) !important;
}

.ms-login-submit:active,
.ms-login-submit.active,
.ms-login-submit.is-active{
  transform:translateY(0);
  border:2px solid rgba(24,201,100,0.96) !important;
  box-shadow:
    0 0 0 0.18rem rgba(24,201,100,0.14),
    0 12px 24px rgba(0,153,255,0.18),
    0 0 16px rgba(24,201,100,0.16) !important;
}

@keyframes msSignInShine{
  0%{ left:-130%; }
  100%{ left:140%; }
}

/* =========================================================
   LEFT GALLERY PANEL
   ========================================================= */
.ms-auth-gallery-panel{
  border-radius:28px;
}

.ms-auth-gallery-panel-body{
  padding:0;
  min-height:100%;
  height:100%;
}

.ms-auth-gallery-inner{
  padding:28px;
  min-height:100%;
  height:100%;
}

.ms-auth-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  height:100%;
  border-radius:30px;
  overflow:hidden;
  padding:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(8,18,36,0.84) 0%, rgba(8,18,36,0.58) 100%);
  box-shadow:
    0 24px 50px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-theme="light"] .ms-auth-gallery{
  border-color:rgba(15,23,42,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(244,248,255,0.72) 100%);
  box-shadow:
    0 24px 50px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.65);
}

/* =========================================================
   HEADER ROW
   ========================================================= */
.ms-auth-gallery-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.ms-auth-gallery-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid rgba(214,178,74,0.92);
  background:rgba(0,0,0,0.24);
  color:var(--text-main);
  font-size:0.84rem;
  font-weight:800;
  letter-spacing:0.03em;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 22px rgba(0,0,0,0.16);
}

body[data-theme="light"] .ms-auth-gallery-badge{
  border-color:rgba(214,178,74,0.92);
  background:rgba(255,255,255,0.68);
}

/* =========================================================
   LIVE STATUS BADGE
   - Production-safe pulse for green indicator
   - Keeps badge size and layout unchanged
   ========================================================= */
.ms-auth-gallery-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.22);
  color:var(--text-main);
  font-size:0.78rem;
  font-weight:700;
  backdrop-filter:blur(8px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.03),
    0 8px 18px rgba(0,0,0,0.14);
}

body[data-theme="light"] .ms-auth-gallery-status{
  border-color:rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.70);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.03),
    0 8px 18px rgba(15,23,42,0.08);
}

.ms-auth-gallery-status-dot{
  position:relative;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#18c964;
  box-shadow:
    0 0 0 4px rgba(24,201,100,0.16),
    0 0 12px rgba(24,201,100,0.42);
  animation: msAuthLiveDotPulse 1.8s ease-in-out infinite;
}

.ms-auth-gallery-status-dot::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(24,201,100,0.28);
  transform:translate(-50%, -50%);
  animation: msAuthLiveDotRing 1.8s ease-out infinite;
  pointer-events:none;
}

.ms-auth-gallery-status-text{
  line-height:1;
}

@keyframes msAuthLiveDotPulse{
  0%{
    transform:scale(1);
    box-shadow:
      0 0 0 4px rgba(24,201,100,0.14),
      0 0 8px rgba(24,201,100,0.26);
  }
  50%{
    transform:scale(1.18);
    box-shadow:
      0 0 0 7px rgba(24,201,100,0.20),
      0 0 16px rgba(24,201,100,0.42);
  }
  100%{
    transform:scale(1);
    box-shadow:
      0 0 0 4px rgba(24,201,100,0.14),
      0 0 8px rgba(24,201,100,0.26);
  }
}

@keyframes msAuthLiveDotRing{
  0%{
    opacity:0.65;
    transform:translate(-50%, -50%) scale(1);
  }
  70%{
    opacity:0.10;
    transform:translate(-50%, -50%) scale(2.6);
  }
  100%{
    opacity:0;
    transform:translate(-50%, -50%) scale(3.1);
  }
}

body[data-theme="light"] .ms-auth-gallery-status-dot{
  box-shadow:
    0 0 0 4px rgba(24,201,100,0.14),
    0 0 10px rgba(24,201,100,0.28);
}

/* =========================================================
   IMAGE WRAPPER
   - Enlarged substantially without changing outer panel height
   ========================================================= */
.ms-auth-gallery-image-wrap{
  position:relative;
  width:100%;
  flex:0 0 auto;
  min-height:360px;
  max-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:24px;
  border:2px solid rgba(214,178,74,0.94);
  background:rgba(0,0,0,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 14px 28px rgba(0,0,0,0.18),
    0 0 0 1px rgba(214,178,74,0.10);
}

.ms-auth-gallery-image-wrap:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 34px rgba(0,0,0,0.22),
    0 0 0 1px rgba(214,178,74,0.16),
    0 0 18px rgba(214,178,74,0.10);
}

body[data-theme="light"] .ms-auth-gallery-image-wrap{
  border-color:rgba(214,178,74,0.94);
  background:rgba(15,23,42,0.04);
}

/* =========================================================
   GALLERY IMAGES
   ========================================================= */
.ms-auth-gallery-image{
  position:absolute;
  top:50%;
  left:50%;
  width:auto;
  max-width:100%;
  height:100%;
  max-height:340px;
  object-fit:contain;
  object-position:center center;
  transform:translate(-50%, -50%) translateX(112%);
  opacity:0;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,0.22));
  transition:
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 720ms ease;
  will-change:transform, opacity;
  pointer-events:none;
}

.ms-auth-gallery-image.is-active{
  transform:translate(-50%, -50%) translateX(0);
  opacity:1;
  z-index:2;
}

.ms-auth-gallery-image.is-entering{
  transform:translate(-50%, -50%) translateX(112%);
  opacity:1;
  z-index:3;
}

.ms-auth-gallery-image.is-leaving{
  transform:translate(-50%, -50%) translateX(-112%);
  opacity:1;
  z-index:1;
}

/* =========================================================
   COPY / META
   - Tightened so text sits lower and wastes less space
   ========================================================= */
.ms-auth-gallery-copy-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:2px;
}

.ms-auth-gallery-copy{
  max-width:620px;
}

.ms-auth-gallery-title{
  margin:0 0 6px;
  font-size:clamp(1.2rem, 1.55vw, 1.7rem);
  line-height:1.08;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#0099ff !important;
  text-shadow:0 6px 20px rgba(0,0,0,0.28);
}

body[data-theme="light"] .ms-auth-gallery-title{
  color:#0099ff !important;
  text-shadow:none;
}

.ms-auth-gallery-text{
  margin:0;
  max-width:560px;
  color:rgba(255,255,255,0.88);
  font-size:0.90rem;
  line-height:1.42;
  text-shadow:0 4px 14px rgba(0,0,0,0.24);
}

body[data-theme="light"] .ms-auth-gallery-text{
  color:rgba(15,23,42,0.80);
  text-shadow:none;
}

.ms-auth-gallery-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ms-auth-gallery-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  color:var(--text-main);
  font-size:0.74rem;
  font-weight:700;
  backdrop-filter:blur(8px);
}

body[data-theme="light"] .ms-auth-gallery-chip{
  border-color:rgba(15,23,42,0.10);
  background:rgba(255,255,255,0.68);
}

/* =========================================================
   LOGIN FORM HEADING COLOR
   ========================================================= */
.ms-login-view h1,
.ms-login-view .h3{
  color:#0099ff !important;
}

/* =========================================================
   PANEL HEIGHT BALANCE
   - UNCHANGED: keep equal outer container heights
   ========================================================= */
@media (min-width: 768px){
  .row.align-items-stretch > [class*="col-"]{
    display:flex;
  }

  .ms-auth-gallery-panel,
  .ms-auth-form-panel{
    width:100%;
    min-height:760px;
    height:760px;
  }
}

@media (min-width: 1200px){
  .ms-auth-gallery-panel,
  .ms-auth-form-panel{
    min-height:800px;
    height:800px;
  }
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */
@media (max-width: 1599.98px){
  .ms-auth-gallery-inner{
    padding:26px;
  }
}

@media (max-width: 1399.98px){
  .ms-auth-gallery-panel,
  .ms-auth-form-panel{
    min-height:730px;
    height:730px;
  }

  .ms-auth-gallery-inner{
    padding:24px;
  }

  .ms-auth-gallery-image-wrap{
    min-height:330px;
    max-height:360px;
  }

  .ms-auth-gallery-image{
    max-height:300px;
  }
}

/* =========================================================
   TABLET / MID-SIZE
   ========================================================= */
@media (max-width: 1199.98px){
  .ms-auth-shell{
    padding-top:20px;
  }

  .ms-auth-right-wrap{
    max-width:100%;
  }

  .ms-auth-form-panel-body{
    padding:28px 24px;
  }

  .ms-auth-gallery-panel,
  .ms-auth-form-panel{
    min-height:680px;
    height:680px;
  }

  .ms-auth-gallery-inner{
    padding:20px;
  }

  .ms-auth-gallery{
    border-radius:24px;
    padding:16px;
    gap:12px;
  }

  .ms-auth-gallery-image-wrap{
    min-height:280px;
    max-height:310px;
    border-radius:18px;
  }

  .ms-auth-gallery-image{
    max-height:255px;
  }

  .ms-auth-gallery-title{
    font-size:clamp(1.12rem, 2vw, 1.45rem);
  }

  .ms-auth-gallery-text{
    font-size:0.84rem;
    line-height:1.38;
    max-width:100%;
  }

  .ms-auth-gallery-chip{
    padding:6px 8px;
    font-size:0.68rem;
  }
}

@media (max-width: 991.98px){
  .ms-auth-main{
    max-width:920px;
  }

  .ms-auth-right-wrap{
    max-width:100%;
  }

  .ms-auth-gallery-panel,
  .ms-auth-form-panel{
    min-height:620px;
    height:620px;
  }

  .ms-auth-gallery-inner{
    padding:18px;
  }

  .ms-auth-gallery{
    padding:14px;
    gap:12px;
  }

  .ms-auth-gallery-image-wrap{
    min-height:220px;
    max-height:250px;
  }

  .ms-auth-gallery-image{
    max-height:205px;
  }

  .ms-auth-gallery-title{
    font-size:1.02rem;
  }

  .ms-auth-gallery-text{
    font-size:0.80rem;
    line-height:1.32;
  }

  .ms-auth-gallery-meta{
    gap:7px;
  }

  .ms-auth-gallery-chip{
    padding:6px 7px;
    font-size:0.66rem;
  }

  .ms-auth-form-panel{
    border-radius:20px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px){
  .ms-auth-shell{
    padding-left:12px;
    padding-right:12px;
    padding-bottom:20px;
  }

  .ms-auth-topbar{
    gap:12px;
    margin-bottom:14px;
  }

  .ms-auth-form-panel-body{
    padding:22px 18px;
  }

  .ms-login-logo{
    max-width:92px;
  }

  .ms-login-form .form-control{
    min-height:52px;
  }

  .ms-login-submit{
    min-height:52px;
  }
}

@media (max-width: 479.98px){
  .ms-auth-form-panel-body{
    padding:18px 14px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ms-auth-gallery-image,
  .ms-login-submit,
  .ms-login-form .form-control,
  .ms-auth-gallery-status-dot,
  .ms-auth-gallery-status-dot::after{
    transition:none !important;
    animation:none !important;
  }

  .ms-login-submit::before{
    display:none !important;
  }
}