/**
 * ArgenTous — Main Stylesheet
 * Design tokens, base reset, typography, utilities.
 *
 * Mobile-first: desktop styles added via min-width breakpoints.
 * The desktop layout is the source of truth.
 *
 * @package ArgenTous
 * @version 2.0.0
 */

/* ── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --Agtcla-primary:       #4F46E5;
  --Agtcla-primary-dark:  #4338CA;
  --Agtcla-primary-light: #EEF2FF;
  --Agtcla-secondary:     #10B981;
  --Agtcla-secondary-dark:#059669;

  /* Neutrals */
  --agt-white:    #FFFFFF;
  --agt-gray-50:  #F9FAFB;
  --agt-gray-100: #F3F4F6;
  --agt-gray-200: #E5E7EB;
  --agt-gray-300: #D1D5DB;
  --agt-gray-400: #9CA3AF;
  --agt-gray-500: #6B7280;
  --agt-gray-600: #4B5563;
  --agt-gray-700: #374151;
  --agt-gray-800: #1F2937;
  --agt-gray-900: #111827;

  /* Semantic */
  --agt-danger:        #DC2626;
  --agt-danger-light:  #FEF2F2;
  --agt-warning:       #F59E0B;
  --agt-warning-light: #FFFBEB;
  --agt-success:       #10B981;
  --agt-success-light: #F0FDF4;
  --agt-info:          #3B82F6;
  --agt-info-light:    #EFF6FF;

  /* Spacing */
  --agt-space-1:  4px;
  --agt-space-2:  8px;
  --agt-space-3:  12px;
  --agt-space-4:  16px;
  --agt-space-5:  20px;
  --agt-space-6:  24px;
  --agt-space-8:  32px;
  --agt-space-10: 40px;

  /* Radii */
  --agt-radius-sm:  6px;
  --agt-radius-md:  10px;
  --agt-radius-lg:  16px;
  --agt-radius-full: 9999px;

  /* Shadows */
  --agt-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --agt-shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.07);
  --agt-shadow-lg: 0 10px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);

  /* Typography */
  --agt-font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --agt-font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --agt-text-xs:   11px;
  --agt-text-sm:   13px;
  --agt-text-base: 15px;
  --agt-text-lg:   17px;
  --agt-text-xl:   20px;
  --agt-text-2xl:  24px;
  --agt-text-3xl:  30px;

  /* Transitions */
  --agt-transition: 150ms ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── Base ───────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--agt-font-sans);
  color: var(--agt-gray-800);
  background-color: var(--agt-gray-50);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--Agtcla-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Auth Section Wrapper ───────────────────────────────────────────────────── */
.agt-auth-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--agt-space-4);
  background: linear-gradient(135deg, var(--agt-gray-50) 0%, #EEF2FF 100%);
}

.agt-auth-container {
  width: 100%;
  max-width: 480px;
}

.agt-auth-container--narrow {
  max-width: 420px;
}

/* ── Steps Indicator ────────────────────────────────────────────────────────── */
.agt-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--agt-space-6);
  counter-reset: step;
}

.agt-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--agt-space-1);
  position: relative;
  flex: 1;
}

.agt-step + .agt-step::before {
  content: '';
  position: absolute;
  top: 14px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--agt-gray-200);
  z-index: 0;
}

.agt-step--done + .agt-step::before { background: var(--Agtcla-secondary); }

.agt-step__number {
  width: 28px;
  height: 28px;
  border-radius: var(--agt-radius-full);
  background: var(--agt-gray-200);
  color: var(--agt-gray-500);
  font-size: var(--agt-text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  transition: background var(--agt-transition), color var(--agt-transition);
}

.agt-step--active .agt-step__number  { background: var(--Agtcla-primary); color: #fff; }
.agt-step--done   .agt-step__number  { background: var(--Agtcla-secondary); color: #fff; }

.agt-step__label {
  font-size: var(--agt-text-xs);
  color: var(--agt-gray-500);
  font-weight: 500;
  white-space: nowrap;
}

.agt-step--active .agt-step__label { color: var(--Agtcla-primary); font-weight: 700; }
.agt-step--done   .agt-step__label { color: var(--Agtcla-secondary); }

/* ── Card ───────────────────────────────────────────────────────────────────── */
.agt-card {
  background: var(--agt-white);
  border-radius: var(--agt-radius-lg);
  box-shadow: var(--agt-shadow-md);
  padding: var(--agt-space-8);
}

.agt-card__header {
  text-align: center;
  margin-bottom: var(--agt-space-6);
}

.agt-card__title {
  font-size: var(--agt-text-2xl);
  font-weight: 800;
  color: var(--agt-gray-900);
  margin: 0 0 var(--agt-space-2);
  letter-spacing: -0.03em;
}

.agt-card__subtitle {
  font-size: var(--agt-text-base);
  color: var(--agt-gray-500);
  margin: 0;
  line-height: 1.5;
}

.agt-card__footer-link {
  text-align: center;
  margin-top: var(--agt-space-5);
  font-size: var(--agt-text-sm);
  color: var(--agt-gray-500);
}

/* ── Alerts ─────────────────────────────────────────────────────────────────── */
.agt-alert {
  padding: var(--agt-space-3) var(--agt-space-4);
  border-radius: var(--agt-radius-sm);
  font-size: var(--agt-text-sm);
  line-height: 1.5;
  margin-bottom: var(--agt-space-5);
  border-left: 4px solid transparent;
}

.agt-alert--error   { background: var(--agt-danger-light);  border-color: var(--agt-danger);  color: #991B1B; }
.agt-alert--warning { background: var(--agt-warning-light); border-color: var(--agt-warning); color: #92400E; }
.agt-alert--success { background: var(--agt-success-light); border-color: var(--agt-success); color: #065F46; }
.agt-alert--info    { background: var(--agt-info-light);    border-color: var(--agt-info);    color: #1E40AF; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.agt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--agt-space-2);
  padding: 12px var(--agt-space-5);
  border-radius: var(--agt-radius-sm);
  font-size: var(--agt-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--agt-transition), box-shadow var(--agt-transition), opacity var(--agt-transition);
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}

.agt-btn--primary {
  background: var(--Agtcla-primary);
  color: #fff;
  border-color: var(--Agtcla-primary);
}
.agt-btn--primary:hover:not(:disabled) {
  background: var(--Agtcla-primary-dark);
  box-shadow: var(--agt-shadow-sm);
  text-decoration: none;
  color: #fff;
}

.agt-btn--secondary {
  background: var(--Agtcla-secondary);
  color: #fff;
  border-color: var(--Agtcla-secondary);
}
.agt-btn--secondary:hover:not(:disabled) { background: var(--Agtcla-secondary-dark); color: #fff; }

.agt-btn--ghost {
  background: transparent;
  color: var(--Agtcla-primary);
  border-color: var(--agt-gray-200);
}
.agt-btn--ghost:hover:not(:disabled) { background: var(--Agtcla-primary-light); text-decoration: none; }

.agt-btn--full  { width: 100%; }
.agt-btn--sm    { padding: 8px 16px; font-size: var(--agt-text-sm); }

.agt-btn:disabled { opacity: .55; cursor: not-allowed; }
.agt-btn__icon { flex-shrink: 0; }

/* Spinner */
.agt-btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: agt-spin 0.6s linear infinite;
}
@keyframes agt-spin { to { transform: rotate(360deg); } }

/* ── Security badge ──────────────────────────────────────────────────────────── */
.agt-security-badge {
  display: flex;
  align-items: center;
  gap: var(--agt-space-2);
  background: var(--agt-success-light);
  border: 1px solid #BBF7D0;
  border-radius: var(--agt-radius-sm);
  padding: var(--agt-space-3) var(--agt-space-4);
  margin-bottom: var(--agt-space-5);
  font-size: var(--agt-text-sm);
  color: #065F46;
}

/* ── OTP icon ────────────────────────────────────────────────────────────────── */
.agt-otp-icon {
  font-size: 40px;
  margin-bottom: var(--agt-space-2);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .agt-card { padding: var(--agt-space-5); }
  .agt-card__title { font-size: var(--agt-text-xl); }
  .agt-step__label { display: none; }
}

/* ── Lazy image loading (PROMPT 05) ─────────────────────────────────────────── */

/**
 * .Agtcla-lazy — placeholder state for images that haven't loaded yet.
 * Applied to all <img data-src="…"> elements by the plugin's templates.
 * lazy-loader.js removes this class when the image enters the viewport.
 */
.Agtcla-lazy {
  /* Shimmer placeholder identical to .Agtcla-skeleton but for img elements */
  background: linear-gradient(
    90deg,
    var(--agt-gray-100, #f3f4f6) 25%,
    var(--agt-gray-200, #e5e7eb) 50%,
    var(--agt-gray-100, #f3f4f6) 75%
  );
  background-size: 400px 100%;
  animation: Agtcla-lazy-shimmer 1.4s ease infinite;
  /* Prevent layout shift: force the placeholder to take the image's space */
  display: inline-block;
  min-width:  24px;
  min-height: 24px;
}

@keyframes Agtcla-lazy-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/**
 * .Agtcla-lazy--loaded — applied by lazy-loader.js after src is set and
 * the image's load event fires. Triggers the fade-in transition.
 */
.Agtcla-lazy--loaded {
  animation: none;
  background: none;
  /* Fade-in when the real image appears */
  animation: Agtcla-img-fade-in 300ms ease both;
}

@keyframes Agtcla-img-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect prefers-reduced-motion for lazy shimmer */
@media (prefers-reduced-motion: reduce) {
  .Agtcla-lazy,
  .Agtcla-lazy--loaded { animation: none; }
}

/* ── Security shield scope ────────────────────────────────────────────────── */

/**
 * .Agtcla-container — outer wrapper added by DashboardController.
 * Used by security-shield.js to scope right-click and F12 protection.
 * Provides no visual styling — purely a JS hook.
 */
.Agtcla-container {
  /* No visual style — this class exists only as a JS boundary marker */
}