/* ============================================================
   Tousiff School — Login Page (Split Panel Layout)
   File: tousiff_frappe_theme/public/css/dv-login.css
   ============================================================ */

#page-login .page_content {
  position: fixed; inset: 0; z-index: 300;
  padding: 0; margin: 0; overflow: hidden;
  background: #1a2a4a;
}
#page-login .navbar,
#page-login footer,
#page-login .web-footer { display: none !important; }

/* ══ OUTER WRAPPER ════════════════════════════════════════ */
.ts-page {
  display: flex;
  width: 100%; height: 100vh;
  overflow: hidden;
}

/* ══ LEFT PANEL — 60% — school scene background ══════════ */
.ts-left-panel {
  width: 60%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.ts-scene-bg {
  position: absolute; inset: 0;
  background-image: url('/assets/tousiff_frappe_theme/images/school-scene.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(0.96) saturate(1.05);
}
/* subtle dark gradient on right edge — blends into right panel */
.ts-scene-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    transparent 70%,
    rgba(20, 35, 70, 0.6) 100%);
}

/* ── CLOCK — top-center of left panel ─────────────────── */
.ts-clock-wrap {
  position: absolute;
  top: 13.5%; left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  animation: ts-clock-in .8s ease-out .4s both;
}
@keyframes ts-clock-in { from{opacity:0;transform:translateX(-50%) scale(.8)} to{opacity:1;transform:translateX(-50%) scale(1)} }

/* Clock image container */
.ts-clock-img-wrap {
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(180,120,30,.7),
    0 0 0 9px rgba(80,45,5,.8),
    0 12px 40px rgba(0,0,0,.55);
}
/* The static clock face image */
.ts-clock-bg {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: block;
}
/* Hands sit on top via absolute positioning */
.ts-clock-hands {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.ts-hand {
  position: absolute;
  bottom: 50%; left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%);
  border-radius: 4px 4px 2px 2px;
}
.ts-hour {
  width: 5px; height: 40px;
  background: linear-gradient(to top, #2a1000, #5a3010);
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 1px 3px rgba(0,0,0,.5);
  margin-bottom: -2px;
}
.ts-min {
  width: 3.5px; height: 52px;
  background: linear-gradient(to top, #1a0800, #4a2808);
  border-radius: 3px 3px 0 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,.4);
  margin-bottom: -2px;
}
.ts-sec {
  width: 2px; height: 58px;
  background: linear-gradient(to top, #cc1800, #ff3300);
  border-radius: 2px;
  margin-bottom: -10px;
}
.ts-center-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #e8c000, #8b5a00);
  box-shadow: 0 1px 4px rgba(0,0,0,.6);
  z-index: 10;
}

/* Digital time under clock */
.ts-digital-time {
  margin-top: 8px;
  background: rgba(10,5,0,.82);
  color: #ffd700;
  font-family: 'Courier New', monospace;
  font-size: 15px; font-weight: 700;
  padding: 5px 14px; border-radius: 6px;
  letter-spacing: 2px;
  box-shadow: 0 3px 14px rgba(0,0,0,.5);
  border: 1px solid rgba(200,160,0,.3);
  display: inline-block;
}

/* ── STUDENTS on the road ─────────────────────────────── */
.ts-students-wrap {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: ts-students-in 1.1s ease-out .6s both;
}
@keyframes ts-students-in {
  from{ opacity:0; transform:translateX(-50%) translateY(24px); }
  to  { opacity:1; transform:translateX(-50%) translateY(0); }
}
.ts-students-img {
  width: 400px; height: auto;
  display: block;
  filter: drop-shadow(3px 8px 14px rgba(0,0,0,.38));
  animation: ts-stu-bob 2.4s ease-in-out 1.8s infinite;
}
@keyframes ts-stu-bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-5px); }
}

/* ── Banner on left panel ─────────────────────────────── */
.ts-banner {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 15;
  background: linear-gradient(90deg,
    rgba(10,40,100,.88) 0%,
    rgba(20,70,160,.92) 50%,
    rgba(10,40,100,.88) 100%);
  padding: 9px 20px;
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.ts-banner-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.ts-banner-logo  { height: 26px; width: auto; filter: brightness(0) invert(1); object-fit: contain; border-radius: 3px; }
.ts-banner-name  { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: .4px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.ts-banner-sep   { color: #ffd54f; font-size: 10px; }
.ts-banner-sub   { font-size: 12px; color: rgba(255,255,255,.7); }

/* ══ RIGHT PANEL — 40% — enhanced ════════════════════════ */
.ts-right-panel {
  width: 40%;
  background: #f0f4ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 28px 52px;
  position: relative;
  overflow-y: auto;
}
/* Top decorative wave from left panel */
.ts-right-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg,
    #4f86f7 0%, #1d4ed8 30%, #7c3aed 60%, #1d4ed8 80%, #4f86f7 100%);
  border-radius: 0 4px 4px 0;
}
/* Floating decorative circles */
.ts-right-panel::after {
  content: '';
  position: absolute; bottom: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,134,247,.12), transparent 70%);
  pointer-events: none;
}

/* School branding header */
.ts-right-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative; z-index: 2;
}
.ts-right-logo {
  width: 64px; height: 64px; border-radius: 18px;
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(29,78,216,.35);
}
.ts-right-logo img { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; }
.ts-right-school-name {
  font-size: 22px; font-weight: 800; color: #1e2d6b;
  letter-spacing: .3px;
}
.ts-right-school-sub {
  font-size: 12px; color: #6b7db3;
  margin-top: 4px; letter-spacing: .4px;
}

/* ── CARD AREA ────────────────────────────────────────── */
.ts-card-area {
  width: 100%; max-width: 400px;
  position: relative; z-index: 5;
  animation: ts-card-pop .8s cubic-bezier(.22,1,.36,1) .3s both;
}
@keyframes ts-card-pop {
  from{ opacity:0; transform:translateY(32px) scale(.96) }
  to  { opacity:1; transform:translateY(0) scale(1) }
}

/* Wooden posts removed */
.ts-wood-post { display: none; }

/* Section visibility — simple display:none, jQuery .toggle() overrides fine */
.ts-card-area section.for-login,
.ts-card-area section.for-email-login,
.ts-card-area section.for-forgot,
.ts-card-area section.for-signup { display: none; }
.ts-section { width: 100%; }

/* Modern white card */
.ts-card {
  background: #ffffff !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow:
    0 4px 6px rgba(29,78,216,.06),
    0 12px 40px rgba(29,78,216,.14),
    0 1px 0 rgba(255,255,255,.9) !important;
  padding: 0 !important; overflow: hidden !important;
  max-width: 400px !important;
}

/* Nails hidden on modern card */
.ts-nails { display: none; }
.ts-nail  { display: none; }

/* Card header — modern blue */
.ts-card-top {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  padding: 20px 24px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative; z-index: 2;
  border-radius: 20px 20px 0 0;
}
.ts-card-top::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px 20px 0 0;
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.ts-card-logo-wrap {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.ts-lock-wrap { background: rgba(255,255,255,.15) !important; }
.ts-card-logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; }
.ts-card-logo-fb {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 900; color: #fff;
  letter-spacing: 1px; flex-shrink: 0;
}
.ts-card-title { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: .2px; }
.ts-card-sub   { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 3px; }

/* Card body */
.ts-pb { padding: 22px 24px 0 !important; position: relative; z-index: 2; }
.ts-pa { padding: 0 24px 22px !important; position: relative; z-index: 2; }
.ts-card .page-card-body   { padding: 0 !important; }
.ts-card .page-card-actions { padding: 0 !important; }

/* Fields */
.ts-fg { margin-bottom: 14px; }
.ts-label { display: block; font-size: 11px; font-weight: 700; color: #1e2d6b; margin-bottom: 6px; letter-spacing: .8px; text-transform: uppercase; font-family: inherit; }
.ts-iw { position: relative; }
.ts-il { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #6b7db3; display: flex; pointer-events: none; }
.ts-ir { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #6b7db3; display: flex; cursor: pointer; opacity: .65; transition: opacity .2s; }
.ts-eye-btn:hover { opacity: 1; }
.ts-input, #page-login .ts-input {
  height: 48px !important; background: #f5f7ff !important;
  border: 2px solid #dde5ff !important; border-radius: 12px !important;
  padding-left: 40px !important; padding-right: 42px !important;
  font-size: 14px !important; color: #1e2d6b !important;
  font-family: inherit !important;
  box-shadow: none !important;
  transition: border-color .2s,box-shadow .2s !important; outline: none !important;
}
.ts-input:focus, #page-login .ts-input:focus {
  background: #fff !important; border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 4px rgba(29,78,216,.12) !important;
}
.ts-input::placeholder { color: #94a3b8 !important; font-style: normal !important; }

/* Meta row */
.ts-meta-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 18px; }
.ts-check-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #6b7db3; cursor: pointer; font-weight: 500; }
.ts-checkbox { width: 15px; height: 15px; accent-color: #1d4ed8; cursor: pointer; }
.ts-link-muted { font-size: 13px; color: #1d4ed8; font-weight: 600; text-decoration: none; }
.ts-link-muted:hover { text-decoration: underline; color: #1e40af; }

/* Button */
.ts-btn-primary {
  width: 100% !important; height: 50px !important; border-radius: 12px !important;
  background: linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%) !important;
  border: none !important; color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: .3px !important;
  font-family: inherit !important; text-shadow: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  box-shadow: 0 4px 20px rgba(29,78,216,.38) !important;
  transition: transform .15s,box-shadow .2s !important; cursor: pointer !important;
}
.ts-btn-primary:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%) !important;
  box-shadow: 0 8px 28px rgba(29,78,216,.52) !important;
}
.ts-btn-primary:active { transform: translateY(1px) !important; }

/* Social btns */
.ts-social-btn { display:flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:12px; border:2px solid #dde5ff; background:#f5f7ff; color:#1e2d6b; font-size:14px; font-weight:600; text-decoration:none; margin-bottom:10px; font-family:inherit; box-shadow:none; transition:all .2s; cursor:pointer; }
.ts-social-btn:hover { background:#eef2ff; border-color:#c7d2fe; transform:translateY(-1px); }
.ts-email-btn { border-color:#1d4ed8 !important; color:#1d4ed8 !important; font-weight:700 !important; background:#fff !important; }
.ts-or { display:flex; align-items:center; gap:12px; font-size:12px; color:#94a3b8; margin:12px 0; }
.ts-or::before,.ts-or::after { content:''; flex:1; height:1px; background:#e2e8f0; }

/* Card footer */
.ts-card-foot { text-align:center; font-size:13px; color:#6b7db3; padding:14px 24px 20px; border-top:1px solid #e2e8f0; font-weight:500; position:relative; z-index:2; }
.ts-card-foot a { color:#1d4ed8; font-weight:600; text-decoration:none; }
.ts-card-foot a:hover { text-decoration:underline; }

/* Footer bar at bottom of right panel */
.ts-footer { position:absolute; bottom:0; left:0; right:0; z-index:20; background:rgba(240,244,255,.92); backdrop-filter:blur(6px); border-top:1px solid #dde5ff; padding:7px 20px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:#6b7db3; }
.ts-footer a { color:#1d4ed8; text-decoration:none; font-weight:500; }
.ts-footer a:hover { text-decoration:underline; }

/* Frappe overrides */
#page-login .page-card { background:transparent !important; box-shadow:none !important; }
.for-login .page-card,.for-forgot .page-card,.for-signup .page-card,.for-email-login .page-card { max-width:380px !important; }

/* Responsive */
@media (max-width:900px) {
  .ts-page { flex-direction: column; }
  .ts-left-panel { width:100%; height:45vh; flex-shrink:0; }
  .ts-right-panel { width:100%; flex:1; padding:20px 16px 48px; }
  .ts-students-img { width:180px; }
  .ts-clock-img-wrap { width:110px; height:110px; }
  .ts-clock-bg { width:110px; height:110px; }
}
@media (max-width:600px) {
  .ts-left-panel { height:38vh; }
  .ts-banner-sub { display:none; }
  .ts-students-img { width:150px; }
  .ts-card-top { padding:11px 16px 10px; }
  .ts-pb { padding:14px 16px 0 !important; }
  .ts-pa { padding:0 16px 14px !important; }
}

/* Right panel logo image specific */
.ts-right-logo-img {
  width: 78px !important; height: 78px !important;
  object-fit: contain !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}