/* ============================================================
   FLTF COMPONENTS — Cards, Badges, Alerts, Panels
   Depends on: fltf-base.css
   ============================================================ */

/* ============================================================
   CARDS
   ============================================================ */

.fltf-card {
  background: var(--fltf-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--fltf-grey-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-normal);
}

.fltf-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.fltf-card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--fltf-grey-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.fltf-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semi);
  color: var(--fltf-primary);
  margin: 0;
}

.fltf-card__body {
  padding: var(--space-6);
}

.fltf-card__footer {
  padding: var(--space-4) var(--space-6);
  background: var(--fltf-grey-50);
  border-top: 1px solid var(--fltf-grey-100);
}

/* ── Auth Card (login, 2FA, password) ── */
.fltf-auth-card {
  background: var(--fltf-white);
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  /* Ensure card never exceeds the column width on mobile */
  width: 100%;
  animation: fltf-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fltf-card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.fltf-auth-card__header {
  background: var(--fltf-gradient);
  padding: var(--space-8) var(--space-6) calc(var(--space-8) + 4px);
  text-align: center;
  position: relative;
  /* Isolate stacking context so z-index on children is respected
     and the card's overflow:hidden doesn't clip text */
  isolation: isolate;
  overflow: hidden;
}

/* Decorative wave/shimmer behind header */
.fltf-auth-card__header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  pointer-events: none;
  z-index: -1;
}

.fltf-auth-card__header::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -10%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(0, 153, 204, 0.12);
  pointer-events: none;
  z-index: -1;
}

.fltf-auth-card__logo {
  max-height: 72px;
  margin: 0 auto var(--space-4);
  position: relative;
  z-index: 1;
  /* No filter — preserve your logo's original colors.
     If your logo is dark/opaque and needs to appear on the
     gradient header, use a white/transparent-background version.
     Uncomment the line below ONLY if you have a dark-only logo
     with no transparent bg and need to force it white:
     filter: brightness(0) invert(1); */
}

.fltf-auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  color: var(--fltf-white);
  margin-bottom: var(--space-2);
  position: relative;
  z-index: 1;
}

.fltf-auth-card__subtitle {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  position: relative;
  z-index: 1;
}

.fltf-auth-card__body {
  padding: var(--space-8) var(--space-6);
}

@media (max-width: 480px) {
  .fltf-auth-card__header {
    padding: var(--space-5) var(--space-4) calc(var(--space-5) + 4px);
  }

  .fltf-auth-card__body {
    padding: var(--space-5) var(--space-4);
  }
}

@media (max-width: 360px) {
  .fltf-auth-card__header {
    padding: var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
  }

  .fltf-auth-card__body {
    padding: var(--space-4) var(--space-3);
  }
}

/* ── Stat/KPI Cards ── */
.fltf-stat-card {
  background: var(--fltf-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--fltf-grey-100);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: var(--transition-normal);
}

.fltf-stat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--fltf-accent-light);
}

.fltf-stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--fltf-gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  color: var(--fltf-primary);
  flex-shrink: 0;
}

.fltf-stat-card__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--fltf-primary);
  line-height: 1;
}

.fltf-stat-card__label {
  font-size: var(--text-sm);
  color: var(--fltf-text-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   ALERTS & MESSAGES
   ============================================================ */

.fltf-alert {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  animation: fltf-alert-in 0.3s ease both;
}

@keyframes fltf-alert-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fltf-alert i {
  flex-shrink: 0;
  margin-top: 1px;
}

.fltf-alert--success {
  background: var(--fltf-success-bg);
  border-color: rgba(11, 122, 78, 0.25);
  color: var(--fltf-success);
}

.fltf-alert--danger {
  background: var(--fltf-danger-bg);
  border-color: rgba(185, 28, 28, 0.25);
  color: var(--fltf-danger);
}

.fltf-alert--warning {
  background: var(--fltf-warning-bg);
  border-color: rgba(180, 83, 9, 0.25);
  color: var(--fltf-warning);
}

.fltf-alert--info {
  background: var(--fltf-info-bg);
  border-color: rgba(12, 110, 158, 0.25);
  color: var(--fltf-info);
}

/* Override Bootstrap alert to use FLTF styles */
.alert-success  { background: var(--fltf-success-bg) !important; color: var(--fltf-success) !important; border-color: rgba(11,122,78,0.2) !important; border-radius: var(--radius-md) !important; }
.alert-danger   { background: var(--fltf-danger-bg)  !important; color: var(--fltf-danger) !important;  border-color: rgba(185,28,28,0.2) !important; border-radius: var(--radius-md) !important; }
.alert-warning  { background: var(--fltf-warning-bg) !important; color: var(--fltf-warning) !important; border-color: rgba(180,83,9,0.2) !important;  border-radius: var(--radius-md) !important; }
.alert-info     { background: var(--fltf-info-bg)    !important; color: var(--fltf-info) !important;    border-color: rgba(12,110,158,0.2) !important; border-radius: var(--radius-md) !important; }

/* ============================================================
   BADGES
   ============================================================ */

.fltf-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fltf-badge--primary  { background: var(--fltf-sky);       color: var(--fltf-primary); }
.fltf-badge--success  { background: var(--fltf-success-bg); color: var(--fltf-success); }
.fltf-badge--danger   { background: var(--fltf-danger-bg);  color: var(--fltf-danger); }
.fltf-badge--warning  { background: var(--fltf-warning-bg); color: var(--fltf-warning); }
.fltf-badge--accent   { background: var(--fltf-accent);     color: var(--fltf-white); }

/* ============================================================
   DIVIDERS
   ============================================================ */

.fltf-divider {
  border: none;
  border-top: 1px solid var(--fltf-grey-100);
  margin: var(--space-5) 0;
}

.fltf-divider--accent {
  border-top-color: var(--fltf-accent-light);
}

/* ============================================================
   LOGO BLOCK
   ============================================================ */

.fltf-logo-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.fltf-logo-block img {
  height: 40px;
  width: auto;
}

.fltf-logo-block__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--fltf-primary);
  letter-spacing: -0.01em;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.fltf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--fltf-text-muted);
}

.fltf-empty__icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.4;
}

.fltf-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-semi);
  color: var(--fltf-grey-600);
  margin-bottom: var(--space-2);
}

.fltf-empty__desc {
  font-size: var(--text-sm);
  max-width: 320px;
}