/* ============================================================
   Angad-EduSuite — Website & Login Page Theme
   Public-facing pages (login, portal, website)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --iti-primary: #4338CA;
  --iti-primary-hover: #3730A3;
  --iti-primary-light: #EEF2FF;
  --iti-primary-subtle: #C7D2FE;
  --iti-bg: #F8FAFC;
  --iti-surface: #FFFFFF;
  --iti-text: #0F172A;
  --iti-text-secondary: #475569;
  --iti-text-muted: #94A3B8;
  --iti-border: #E2E8F0;
  --iti-radius: 8px;
  --iti-radius-lg: 12px;
  --iti-radius-xl: 16px;
  --iti-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --iti-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --iti-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

body.frappe-login-page,
body[data-page="login"] {
  font-family: var(--iti-font) !important;
  background: linear-gradient(135deg, #312E81 0%, #4338CA 40%, #6366F1 100%) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login page main container */
.page-card,
.login-content.page-card {
  background: var(--iti-surface) !important;
  border: none !important;
  border-radius: var(--iti-radius-xl) !important;
  box-shadow: var(--iti-shadow-xl) !important;
  padding: 0 !important;
  max-width: 420px !important;
  width: 100% !important;
  overflow: hidden;
}

/* Login page header (logo + title) */
.page-card-head {
  background: var(--iti-surface) !important;
  padding: 32px 32px 16px !important;
  text-align: center !important;
  border-bottom: none !important;
}

.page-card-head .app-logo {
  height: 48px !important;
  width: auto !important;
  margin-bottom: 16px !important;
}

.page-card-head h4 {
  font-family: var(--iti-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--iti-text) !important;
  margin: 0 !important;
}

/* Login page body (form fields) */
.page-card-body {
  padding: 8px 32px 16px !important;
}

/* Login form inputs */
.page-card-body .form-group {
  margin-bottom: 16px !important;
}

.page-card-body .form-control {
  font-family: var(--iti-font) !important;
  background: var(--iti-bg) !important;
  border: 1.5px solid var(--iti-border) !important;
  border-radius: var(--iti-radius) !important;
  padding: 12px 16px 12px 44px !important;
  font-size: 14px !important;
  color: var(--iti-text) !important;
  transition: all 200ms ease !important;
  height: 48px !important;
}

.page-card-body .form-control:focus {
  background: var(--iti-surface) !important;
  border-color: var(--iti-primary) !important;
  box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.12) !important;
  outline: none !important;
}

.page-card-body .form-control::placeholder {
  color: var(--iti-text-muted) !important;
}

/* Field icons */
.page-card-body .email-field,
.page-card-body .password-field {
  position: relative;
}

.page-card-body .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--iti-text-muted);
  z-index: 1;
}

/* Show password toggle */
.page-card-body .toggle-password {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--iti-primary) !important;
  z-index: 1;
}

/* Forgot password link */
.forgot-password-message {
  margin: 0 !important;
  padding: 0 !important;
}

.forgot-password-message a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--iti-primary) !important;
}

/* Login button */
.page-card-actions {
  padding: 8px 32px 32px !important;
}

.page-card-actions .btn-login {
  width: 100% !important;
  padding: 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: var(--iti-radius) !important;
  background: var(--iti-primary) !important;
  border: none !important;
  color: white !important;
  transition: all 200ms ease !important;
  height: 48px !important;
}

.page-card-actions .btn-login:hover {
  background: var(--iti-primary-hover) !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.35) !important;
  transform: translateY(-1px);
}

.page-card-actions .btn-login:active {
  transform: translateY(0);
}

/* Social login divider */
.login-divider {
  font-size: 13px !important;
  color: var(--iti-text-muted) !important;
  position: relative;
  margin: 16px 0 !important;
}

.login-divider::before,
.login-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--iti-border);
}

.login-divider::before { left: 0; }
.login-divider::after { right: 0; }

/* Social login buttons */
.social-login-buttons .btn-login-option {
  border: 1.5px solid var(--iti-border) !important;
  border-radius: var(--iti-radius) !important;
  padding: 10px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  background: var(--iti-surface) !important;
  color: var(--iti-text) !important;
}

.social-login-buttons .btn-login-option:hover {
  background: var(--iti-bg) !important;
  border-color: var(--iti-border) !important;
}

/* Signup message */
.sign-up-message {
  padding: 16px 0 !important;
  font-size: 13px !important;
  color: var(--iti-text-secondary) !important;
}

.sign-up-message a {
  color: var(--iti-primary) !important;
  font-weight: 600 !important;
}

/* Hide Frappe/ERPNext branding on login */
.login-content .powered-by,
.login-content [href*="frappe"],
body.frappe-login-page .powered-by,
body.frappe-login-page footer .powered,
body[data-page="login"] .powered-by,
.for-login .powered-by,
.login-content .btn-login-with-frappe-cloud,
.btn-login-with-frappe-cloud {
  display: none !important;
}

/* Replace ERPNext logo with ITI logo on login */
.page-card-head .app-logo {
  content: url('/files/logo_iti.png') !important;
  height: 80px !important;
  width: 80px !important;
  object-fit: contain !important;
  margin-bottom: 12px !important;
}

.page-card-head h4 {
  font-size: 18px !important;
}

.page-card-head::after {
  content: "Manifestation of Excellence";
  display: block;
  font-family: var(--iti-font);
  font-size: 11px;
  font-weight: 600;
  color: #D97706;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Login page footer */
body.frappe-login-page footer,
body[data-page="login"] footer {
  display: none !important;
}

/* Hide "Built on Frappe" meta tag content */
.login-content [href*="erpnext"],
[src*="erpnext-logo"],
[src*="erpnext-favicon"] {
  display: none !important;
}

/* Responsive login */
@media (max-width: 480px) {
  .page-card,
  .login-content.page-card {
    margin: 16px !important;
    border-radius: var(--iti-radius-lg) !important;
  }

  .page-card-head {
    padding: 24px 24px 12px !important;
  }

  .page-card-body {
    padding: 8px 24px 12px !important;
  }

  .page-card-actions {
    padding: 8px 24px 24px !important;
  }
}


/* ============================================================
   WEBSITE PAGES (Public)
   ============================================================ */

/* Website navbar */
.web-navbar,
.website-header .navbar {
  background: var(--iti-surface) !important;
  border-bottom: 1px solid var(--iti-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Website footer */
.website-footer,
.web-footer {
  background: #1E293B !important;
  color: #E2E8F0 !important;
  font-family: var(--iti-font) !important;
}

.website-footer a {
  color: #94A3B8 !important;
}

.website-footer a:hover {
  color: #FFFFFF !important;
}

/* Hide "Powered by" on all website pages */
.website-footer .powered,
.website-footer .powered-by,
footer .powered-by,
footer .powered {
  display: none !important;
}

/* Portal pages */
.portal-page {
  font-family: var(--iti-font) !important;
  background: var(--iti-bg) !important;
}

.portal-page .page-card {
  border-radius: var(--iti-radius-lg) !important;
  border: 1px solid var(--iti-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}