/* Afintrix custom pages — Tailwind-compatible utilities
   Source: frontend/src/input.css · rebuild: scripts/build-styles.sh
   Loaded on web routes only (login, legal, portals). NOT on Frappe Desk. */

@font-face {
  font-family: "Inter";
  src: url("/assets/afintrix_payroll_gateway/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/assets/afintrix_payroll_gateway/fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ---- Brand palette -------------------------------------------------------- */
.bg-afintrix-primary { background-color: #3981F7; }
.bg-afintrix-canvas { background-color: #F0F2F7; }
.bg-afintrix-navy\/20 { background-color: rgba(10, 18, 64, 0.2); }
.bg-slate-50 { background-color: #f8fafc; }
.bg-white { background-color: #fff; }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-blue-50 { background-color: #eff6ff; }
.bg-amber-50 { background-color: #fffbeb; }

.text-afintrix-primary { color: #3981F7; }
.text-afintrix-primary-deep { color: #1226A8; }
.text-afintrix-ink { color: #101828; }
.text-afintrix-body { color: #4B5563; }
.text-afintrix-label { color: #9CA3AF; }
.text-afintrix-gold { color: #C99A44; }
.text-white { color: #fff; }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.text-white\/55 { color: rgba(255, 255, 255, 0.55); }
.text-gray-500 { color: #6b7280; }

.border-afintrix-primary { border-color: #3981F7; }
.border-afintrix-gold { border-color: #C99A44; }
.border-afintrix-line { border-color: #E5E7EB; }
.border-b-4 { border-bottom-width: 4px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }

.hover\:text-afintrix-primary-deep:hover { color: #1226A8; }

/* ---- Typography ----------------------------------------------------------- */
.afx-app { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.font-display { font-family: Montserrat, Inter, sans-serif; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-widest { letter-spacing: 0.08em; }
.uppercase { text-transform: uppercase; }

/* ---- Layout --------------------------------------------------------------- */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.-left-28 { left: -7rem; }
.-top-40 { top: -10rem; }
.-bottom-52 { bottom: -13rem; }
.-right-40 { right: -10rem; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-3 { gap: 0.75rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.shrink-0 { flex-shrink: 0; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.min-h-screen { min-height: 100vh; }
.w-auto { width: auto; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-\[420px\] { height: 420px; }
.w-\[420px\] { width: 420px; }
.h-\[520px\] { height: 520px; }
.w-\[520px\] { width: 520px; }
.max-w-xs { max-width: 20rem; }
.max-w-lg { max-width: 32rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-6xl { max-width: 72rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3\.5 { margin-bottom: 0.875rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-11 { margin-bottom: 2.75rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-10 { margin-top: 2.5rem; }
.p-8 { padding: 2rem; }
.p-12 { padding: 3rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pt-4 { padding-top: 1rem; }
.block { display: block; }
.text-center { text-align: center; }
.pointer-events-none { pointer-events: none; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.object-contain { object-fit: contain; }
.divide-y > * + * { border-top: 1px solid #f3f4f6; }
.divide-gray-100 > * + * { border-color: #f3f4f6; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* ---- Components ----------------------------------------------------------- */
.afx-section-label {
  margin-bottom: 0.375rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9CA3AF;
}
.afx-card {
  background: #fff;
  border: 1px solid #f3f4f6;
  border-top: 3px solid #C99A44;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.afx-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}
.afx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.afx-table th {
  position: sticky; top: 0;
  padding: 12px 16px; text-align: left; font-weight: 600;
  background: #f1f5f9; color: #101828;
}
.afx-table td { padding: 12px 16px; border-bottom: 1px solid #eef0f5; }
.afx-table tbody tr:hover { background: #f8fafc; }
.afx-pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.afx-pill-success { background: #d1fae5; color: #047857; }
.afx-pill-warning { background: #fef3c7; color: #b45309; }
.afx-pill-danger { background: #fee2e2; color: #b91c1c; }
.afx-pill-info { background: rgba(57,129,247,0.1); color: #3981F7; }

/* ---- Login (Frappe form + Tailwind shell) --------------------------------- */
body.afx-login { background: #fff; }
body.afx-login .navbar,
body.afx-login header.navbar,
body.afx-login .web-footer,
body.afx-login section > .page-card-head { display: none !important; }
.afx-login .page-card {
  width: 100%; max-width: 408px;
  border-radius: 16px; border: 1px solid #f3f4f6;
  background: #fff; padding: 2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.afx-login .login-content .page-card-container { border: 0; background: transparent; box-shadow: none; }
.afx-login .for-login .page-card-head img { display: none; }
.afx-login .form-control {
  height: 2.5rem; border-radius: 10px; border: 1px solid #E5E7EB;
  font-size: 0.875rem; color: #101828;
}
.afx-login .form-control:focus {
  border-color: #3981F7; box-shadow: 0 0 0 3px rgba(57,129,247,0.1); outline: none;
}
.afx-login .btn-login, .afx-login .btn-primary {
  width: 100%; border-radius: 10px; background: #3981F7 !important;
  padding: 0.625rem; font-size: 0.875rem; font-weight: 600; color: #fff !important; border: none !important;
}
.afx-login .btn-login:hover, .afx-login .btn-primary:hover { background: #1226A8 !important; }
.afx-login .btn-login-with-email-link {
  background: rgba(57,129,247,0.1) !important; color: #3981F7 !important; font-weight: 600; border: none !important;
}
.afx-login .forgot-password-message a { color: #3981F7; }

/* ---- Login: centered card + centered text (per client) -------------------- */
.afx-login .page-card { text-align: center; margin-left: auto; margin-right: auto; }
.afx-login .page-card label,
.afx-login .page-card .form-group,
.afx-login .page-card .frappe-control,
.afx-login .page-card .login-label { text-align: center !important; display: block; }
.afx-login .page-card .form-control { text-align: left; }          /* keep typed text readable */
.afx-login .page-card .password-field,
.afx-login .page-card .form-signup,
.afx-login .page-card .forgot-password-message { text-align: center !important; }
.afx-login .page-card .btn { width: 100%; }
/* keep the split centered/scrollable and vertically comfortable on all sizes */
.afx-login .afx-login-split .flex-1:last-child { align-items: center; justify-content: center; }

/* ---- Responsive ----------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:items-center { align-items: center; }
}
@media (min-width: 1024px) {
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (max-width: 768px) {
  .max-md\:flex-col { flex-direction: column; }
  .max-md\:p-8 { padding: 2rem; }
  .max-md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

/* ---- Login MOBILE: hide blue hero, branded bg behind the form, padding ----- */
@media (max-width: 768px) {
  .afx-login .afx-login-split > aside { display: none !important; }
  .afx-login .afx-login-split {
    background:
      url("/assets/afintrix_payroll_gateway/images/afintrix-plexus-tile.png") top center / 340px repeat,
      linear-gradient(160deg, #e8f0fe 0%, #eef4ff 55%, #e6eefc 100%) !important;
    padding: 26px 16px !important; align-items: center !important; justify-content: center !important;
  }
  .afx-login .afx-login-split > div:last-child { background: transparent !important; padding: 0 !important; width: 100%; }
  .afx-login .page-card { max-width: 430px; width: 100%; margin: 0 auto !important; padding: 1.75rem 1.5rem !important; }
}