/* ═══════════════════════════════════════════════════════════════════════════════
   SKS Extensions — Sri Kanya Steels ERPNext
   Design: WebOS-matched — Light theme, orange gradients, full-screen graphics
   Typography: Outfit (display) + DM Sans (body) — matches WebOS
   ═══════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  --sk-orange: #F26E20;
  --sk-orange-deep: #D45A15;
  --sk-orange-light: #FFF3EB;
  --sk-orange-glow: #FF8A3D;
  --sk-ink: #1A1A2E;
  --sk-blue: #2D3092;
  --sk-muted: #6B7280;
  --sk-border: #E5E7EB;
  --sk-surface: #FFFFFF;
  --sk-bg: #FAFAFA;
  --sk-cream: #F5F3F0;
  --sks-body-size: 14.5px;
  --sks-heading-scale: 1.15;
}


/* ══════════════════════════════════════════════════════════════════════════════
   LOGIN PAGE — Full-screen WebOS-matched light theme
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes sks-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(1deg); }
}

@keyframes sks-float-reverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-1.5deg); }
}

@keyframes sks-pulse-ring {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(0.95); opacity: 0.5; }
}

@keyframes sks-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes sks-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sks-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sks-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes sks-border-glow {
  0%, 100% { border-color: rgba(242,110,32,0.15); }
  50% { border-color: rgba(242,110,32,0.35); }
}

/* ── Full page — bold orange gradient background ─────────────────────────── */

body[data-path="login"] {
  background:
    linear-gradient(135deg,
      #FFF8F3 0%,
      #FFECD9 20%,
      #FFD4A8 45%,
      #FFB87A 70%,
      #F89B5C 85%,
      #F26E20 100%
    ) !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  overflow-x: hidden !important;
  position: relative !important;
}

/* Large white-to-transparent radial — top left for card readability */
body[data-path="login"]::before {
  content: '' !important;
  position: fixed !important;
  top: -10% !important;
  left: -10% !important;
  width: 80vw !important;
  height: 80vw !important;
  max-width: 1000px !important;
  max-height: 1000px !important;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.5) 30%,
    rgba(255,248,243,0.2) 55%,
    transparent 75%
  ) !important;
  animation: sks-float 20s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Accent blob — bottom right, deep orange glow */
body[data-path="login"]::after {
  content: '' !important;
  position: fixed !important;
  bottom: -15% !important;
  right: -10% !important;
  width: 60vw !important;
  height: 60vw !important;
  max-width: 750px !important;
  max-height: 750px !important;
  background: radial-gradient(circle at 50% 50%,
    rgba(212,90,21,0.3) 0%,
    rgba(242,110,32,0.15) 35%,
    transparent 65%
  ) !important;
  animation: sks-float-reverse 18s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Hide navbar ──────────────────────────────────────────────────────────── */

body[data-path="login"] .navbar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  width: 100% !important;
  z-index: 10 !important;
}
body[data-path="login"] .navbar-brand,
body[data-path="login"] .navbar-nav,
body[data-path="login"] .navbar-toggler {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Page layout — split: left branding, right form ──────────────────────── */

body[data-path="login"] .page-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 2rem !important;
  position: relative !important;
  z-index: 1 !important;
}

body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-head,
body[data-path="login"] footer,
body[data-path="login"] .web-footer {
  display: none !important;
}

/* ── Logo area ────────────────────────────────────────────────────────────── */

body[data-path="login"] .page-card-head {
  text-align: center !important;
  padding: 0 0 1.5rem 0 !important;
  margin: 0 auto !important;
  max-width: 440px !important;
  position: relative !important;
  z-index: 1 !important;
  animation: sks-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

body[data-path="login"] .page-card-head img.app-logo {
  max-height: 48px !important;
  width: auto !important;
  margin-bottom: 0.75rem !important;
  filter: none !important;
  animation: sks-scale-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both !important;
}

body[data-path="login"] .page-card-head h4 {
  font-family: 'Outfit', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--sk-ink) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
  animation: sks-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both !important;
}

/* Tagline */
body[data-path="login"] .page-card-head::after {
  content: 'Sri Kanya Steels \2022  ERP';
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sk-muted);
  margin-top: 6px;
  animation: sks-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

/* ── The login card ──────────────────────────────────────────────────────── */

body[data-path="login"] .for-login .page-card,
body[data-path="login"] .for-forgot .page-card,
body[data-path="login"] .for-login-with-email-link .page-card {
  background: var(--sk-surface) !important;
  border: 1px solid rgba(242,110,32,0.1) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 12px 40px rgba(16,24,40,0.12),
    0 0 0 1px rgba(255,255,255,0.9) inset !important;
  max-width: 440px !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 auto !important;
  animation: sks-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important;
}

/* Top gradient accent — animated shimmer */
body[data-path="login"] .for-login .page-card::before,
body[data-path="login"] .for-forgot .page-card::before {
  content: '';
  display: block;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg,
    var(--sk-orange) 0%,
    var(--sk-orange-glow) 25%,
    #FFB347 50%,
    var(--sk-orange-glow) 75%,
    var(--sk-orange) 100%
  );
  background-size: 200% 100%;
  animation: sks-gradient-shift 4s ease-in-out infinite;
}

/* Decorative ring behind card */
body[data-path="login"] .for-login .page-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(242,110,32,0.08);
  animation: sks-pulse-ring 6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* ── Form body ────────────────────────────────────────────────────────────── */

body[data-path="login"] .for-login .page-card.page-card .page-card-body,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body {
  padding: 2rem 2.5rem 0.5rem !important;
}

/* Labels */
body[data-path="login"] .for-login .page-card.page-card .page-card-body .form-label,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body .form-label {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  display: block !important;
  margin-bottom: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--sk-ink) !important;
}

/* Input fields */
body[data-path="login"] .for-login .page-card.page-card .page-card-body input[type="text"],
body[data-path="login"] .for-login .page-card.page-card .page-card-body input[type="email"],
body[data-path="login"] .for-login .page-card.page-card .page-card-body input[type="password"],
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body input[type="text"],
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body input[type="email"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  border: 1.5px solid var(--sk-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  padding-left: 16px !important;
  background: var(--sk-bg) !important;
  color: var(--sk-ink) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
  height: auto !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-body input:focus,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body input:focus {
  border-color: var(--sk-orange) !important;
  box-shadow: 0 0 0 4px rgba(242,110,32,0.08) !important;
  background: var(--sk-surface) !important;
  outline: none !important;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-body input::placeholder,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body input::placeholder {
  color: #9CA3AF !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}

/* Form groups */
body[data-path="login"] .for-login .page-card.page-card .page-card-body .form-group,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-body .form-group {
  margin-bottom: 1.25rem !important;
  animation: sks-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
body[data-path="login"] .for-login .page-card.page-card .page-card-body .form-group:nth-child(1) {
  animation-delay: 0.35s;
}
body[data-path="login"] .for-login .page-card.page-card .page-card-body .form-group:nth-child(2) {
  animation-delay: 0.45s;
}

/* Password toggle */
body[data-path="login"] .for-login .page-card.page-card .page-card-body .toggle-password {
  color: var(--sk-orange) !important;
  font-size: 12px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
body[data-path="login"] .for-login .page-card.page-card .page-card-body .toggle-password:hover {
  color: var(--sk-orange-deep) !important;
}

/* Hide field icon */
body[data-path="login"] .for-login .page-card.page-card .page-card-body .field-icon {
  display: none !important;
}

/* Forgot password link */
body[data-path="login"] .for-login .page-card.page-card .page-card-body .forgot-password-message a,
body[data-path="login"] .for-login .page-card a[href="#forgot"] {
  color: var(--sk-orange) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
body[data-path="login"] .for-login .page-card a[href="#forgot"]:hover {
  color: var(--sk-orange-deep) !important;
}

/* ── Login button — orange gradient with hover animation ─────────────────── */

body[data-path="login"] .for-login .page-card.page-card .page-card-actions,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-actions {
  padding: 0.5rem 2.5rem 2rem !important;
  margin-top: 0.25rem !important;
  animation: sks-fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-actions .btn-login,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-actions .btn-forgot {
  font-family: 'Outfit', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background: linear-gradient(135deg, var(--sk-orange) 0%, var(--sk-orange-glow) 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 24px !important;
  color: #fff !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(242,110,32,0.25) !important;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-actions .btn-login:hover,
body[data-path="login"] .for-forgot .page-card.page-card .page-card-actions .btn-forgot:hover {
  background: linear-gradient(135deg, var(--sk-orange-deep) 0%, var(--sk-orange) 100%) !important;
  box-shadow: 0 8px 28px rgba(242,110,32,0.35) !important;
  transform: translateY(-2px) !important;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-actions .btn-login:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(242,110,32,0.2) !important;
}

/* ── Divider + social login ──────────────────────────────────────────────── */

body[data-path="login"] .for-login .page-card.page-card .page-card-body .login-divider {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  color: var(--sk-muted) !important;
  margin: 1.25rem 0 !important;
}

body[data-path="login"] .for-login .page-card.page-card .page-card-body .btn-login-option {
  border-radius: 12px !important;
  border: 1.5px solid var(--sk-border) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 12px 16px !important;
  background: var(--sk-surface) !important;
  color: var(--sk-ink) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
body[data-path="login"] .for-login .page-card.page-card .page-card-body .btn-login-option:hover {
  border-color: var(--sk-orange) !important;
  background: var(--sk-orange-light) !important;
  box-shadow: 0 2px 8px rgba(242,110,32,0.08) !important;
}

/* ── Footer hide ──────────────────────────────────────────────────────────── */

body[data-path="login"] .footer-powered,
body[data-path="login"] .login-content .page-card-footer,
body[data-path="login"] .page-container > footer {
  display: none !important;
}

/* ── Floating decorative elements ─────────────────────────────────────────── */

/* Geometric line pattern — top right */
body[data-path="login"] .page-container::before {
  content: '';
  position: fixed;
  top: 5%;
  right: 5%;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 30px;
  transform: rotate(15deg);
  animation: sks-float 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    -60px 80px 0 0 rgba(255,255,255,0.15),
    50px -30px 0 0 rgba(255,255,255,0.1);
}

/* Floating circles */
body[data-path="login"] .page-container::after {
  content: '';
  position: fixed;
  bottom: 10%;
  left: 5%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  animation: sks-float 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  box-shadow:
    calc(75vw) calc(-30vh) 0 10px rgba(255,255,255,0.2),
    calc(60vw) calc(-50vh) 0 6px rgba(255,255,255,0.25),
    calc(15vw) calc(-20vh) 0 8px rgba(255,255,255,0.15),
    calc(82vw) calc(-65vh) 0 14px rgba(255,255,255,0.1),
    calc(40vw) calc(5vh) 0 4px rgba(255,255,255,0.3);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body[data-path="login"] .for-login .page-card,
  body[data-path="login"] .for-forgot .page-card {
    border-radius: 16px !important;
    margin: 0 0.25rem !important;
  }
  body[data-path="login"] .for-login .page-card.page-card .page-card-body {
    padding: 1.5rem 1.5rem 0.25rem !important;
  }
  body[data-path="login"] .for-login .page-card.page-card .page-card-actions {
    padding: 0.5rem 1.5rem 1.5rem !important;
  }
  body[data-path="login"] .page-card-head h4 {
    font-size: 18px !important;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body[data-path="login"]::before,
  body[data-path="login"]::after,
  body[data-path="login"] .page-container::after,
  body[data-path="login"] .for-login .page-card::after {
    animation: none !important;
  }
  body[data-path="login"] .for-login .page-card::before {
    animation: none !important;
  }
  body[data-path="login"] .for-login .page-card.page-card .page-card-actions .btn-login:hover {
    transform: none !important;
  }
  body[data-path="login"] .page-card-head,
  body[data-path="login"] .page-card-head img,
  body[data-path="login"] .page-card-head h4,
  body[data-path="login"] .for-login .page-card,
  body[data-path="login"] .for-login .page-card.page-card .page-card-body .form-group,
  body[data-path="login"] .for-login .page-card.page-card .page-card-actions {
    animation: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   DESK / APP — Post-login UI
   ══════════════════════════════════════════════════════════════════════════════ */

/* Navbar */
body:not([data-path="login"]) .navbar {
  border-bottom: 2px solid var(--sk-orange, #F26E20) !important;
  font-family: 'DM Sans', sans-serif !important;
}
body:not([data-path="login"]) .navbar-brand img,
body:not([data-path="login"]) .navbar .app-logo {
  max-height: 28px !important;
}

/* Font sizes */
body:not([data-path="login"]),
body:not([data-path="login"]) .frappe-control .control-value,
body:not([data-path="login"]) .frappe-control .like-disabled-input,
body:not([data-path="login"]) .form-group .control-input {
  font-size: var(--sks-body-size) !important;
}

body:not([data-path="login"]) .frappe-control input[type="text"],
body:not([data-path="login"]) .frappe-control input[type="password"],
body:not([data-path="login"]) .frappe-control input[type="number"],
body:not([data-path="login"]) .frappe-control input[type="email"],
body:not([data-path="login"]) .frappe-control input[type="tel"],
body:not([data-path="login"]) .frappe-control input[type="date"],
body:not([data-path="login"]) .frappe-control select,
body:not([data-path="login"]) .frappe-control textarea,
body:not([data-path="login"]) .input-with-feedback,
body:not([data-path="login"]) .form-control {
  font-size: var(--sks-body-size) !important;
}

body:not([data-path="login"]) .like-disabled-input,
body:not([data-path="login"]) .control-value {
  font-size: var(--sks-body-size) !important;
}

body:not([data-path="login"]) .frappe-control .control-label,
body:not([data-path="login"]) .form-group label,
body:not([data-path="login"]) .control-label {
  font-size: 13px !important;
}

.page-title .title-text,
.title-area .title-text {
  font-size: calc(18px * var(--sks-heading-scale)) !important;
}
.section-head, .head-title {
  font-size: calc(14px * var(--sks-heading-scale)) !important;
}

.list-row .list-row-col,
.list-row .level-left,
.list-row .list-row--col,
.list-row .level-item {
  font-size: var(--sks-body-size) !important;
}

.dt-cell__content, .report-cell {
  font-size: 13.5px !important;
}

.desk-sidebar .sidebar-menu a,
.sidebar-menu .sidebar-label,
.module-sidebar-nav a {
  font-size: 13.5px !important;
}

body:not([data-path="login"]) .navbar .navbar-nav > li > a {
  font-size: 14px !important;
}

body:not([data-path="login"]) .btn {
  font-size: 13.5px !important;
}
body:not([data-path="login"]) .btn-primary-dark,
body:not([data-path="login"]) .btn-primary {
  font-size: 14px !important;
}

.modal-title {
  font-size: calc(16px * var(--sks-heading-scale)) !important;
}
.modal-body,
.modal-body .frappe-control input,
.modal-body .frappe-control select {
  font-size: var(--sks-body-size) !important;
}

.comment-box .reply,
.timeline-content,
.activity-message {
  font-size: var(--sks-body-size) !important;
}