/* ═══════════════════════════════════════════════════════════════
   FIR Monitoring Theme — theme.css
   Tea Board of India · Zonal Office Guwahati
   Design: Deep Forest Green + Ivory + Gold
═══════════════════════════════════════════════════════════════ */

:root {
  --tb-green:       #4a8c1c;
  --tb-green-dark:  #2f6010;
  --tb-green-light: #6db33f;
  --tb-lime:        #9dc530;
  --tb-forest:      #1e3a0f;
  --tb-gold:        #c8952a;
  --tb-gold-light:  #f0c050;
  --tb-cream:       #f7faf2;
  --tb-bg:          #f2f6ee;
  --tb-border:      #c8dbb8;
  --tb-text:        #1e2d14;
  --tb-muted:       #5a7248;
  --tb-success:     #2a7a2a;
  --tb-danger:      #c0392b;
  --tb-warning:     #c8952a;
  --tb-info:        #1a5c8a;
  --tb-radius:      8px;
  --tb-radius-lg:   14px;
  --tb-shadow:      0 2px 14px rgba(30,58,15,.1);
  --tb-shadow-lg:   0 6px 32px rgba(30,58,15,.18);
  --tb-font:        'IBM Plex Sans', system-ui, sans-serif;
  --tb-serif:       'Noto Serif', Georgia, serif;
  --tb-mono:        'IBM Plex Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body.fir-site {
  font-family: var(--tb-font);
  color: var(--tb-text);
  background: var(--tb-bg);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.fir-site-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
}

/* ── Page main (for shortcode pages) ─────────────────── */
.fir-page-main { flex: 1; padding: 32px 0 60px; }
.fir-page-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════ */
.fir-footer {
  background: var(--tb-forest);
  border-top: 3px solid var(--tb-green);
  padding: 20px 24px;
  margin-top: auto;
}
.fir-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.fir-footer-left { display: flex; align-items: center; gap: 12px; }
.fir-footer-logo { width: 36px; height: 36px; border-radius: 50%; background: #fff; padding: 2px; }
.fir-footer-brand { font-family: var(--tb-serif); font-size: .9rem; color: #fff; font-weight: 600; }
.fir-footer-sub   { font-size: .72rem; color: rgba(255,255,255,.5); margin-top: 1px; }
.fir-footer-right { font-size: .78rem; color: rgba(255,255,255,.5); }
.fir-footer-right strong { color: rgba(255,255,255,.8); }
.fir-footer-sep   { margin: 0 8px; }

/* ════════════════════════════════════════════════════════
   LANDING PAGE
════════════════════════════════════════════════════════ */
.fir-landing { flex: 1; display: flex; flex-direction: column; }

/* ── Hero ─────────────────────────────────────────────── */
.fir-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--tb-forest) 0%, #1b4a10 45%, #234d14 100%);
  padding: 60px 24px 80px;
  flex: 1;
}

/* Animated background circles */
.fir-hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fir-hero-circle {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(157,197,48,.12) 0%, transparent 70%);
  animation: fir-float 8s ease-in-out infinite;
}
.fir-hero-circle-1 { width: 600px; height: 600px; top: -200px; right: -100px; animation-delay: 0s; }
.fir-hero-circle-2 { width: 400px; height: 400px; bottom: -150px; left: -80px; animation-delay: -3s; }
.fir-hero-circle-3 { width: 300px; height: 300px; top: 40%; right: 30%; animation-delay: -5s; }
@keyframes fir-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-20px) scale(1.05); }
}

.fir-hero-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px;
  gap: 60px; align-items: center; position: relative; z-index: 1;
}

/* Left column */
.fir-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  padding: 6px 14px 6px 6px; border-radius: 30px;
  margin-bottom: 28px;
}
.fir-hero-logo { width: 32px; height: 32px; border-radius: 50%; background: #fff; padding: 2px; }
.fir-hero-badge span { font-size: .78rem; color: rgba(255,255,255,.8); letter-spacing: .03em; }

.fir-hero-title {
  font-family: var(--tb-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; color: #fff;
  line-height: 1.15; margin-bottom: 20px;
}
.fir-hero-title-accent {
  color: var(--tb-lime);
  text-shadow: 0 0 40px rgba(157,197,48,.4);
}

.fir-hero-desc {
  font-size: .95rem; color: rgba(255,255,255,.72);
  line-height: 1.7; max-width: 520px; margin-bottom: 36px;
}

.fir-hero-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.fir-hero-feature {
  display: flex; align-items: center; gap: 12px;
  font-size: .88rem; color: rgba(255,255,255,.82);
}
.fir-hero-feature-icon {
  width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0;
  background: rgba(157,197,48,.18); border: 1px solid rgba(157,197,48,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--tb-lime);
}

.fir-hero-offices { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fir-hero-offices-label { font-size: .75rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .08em; }
.fir-hero-office-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.fir-hero-office-tags span {
  padding: 4px 12px; border-radius: 20px; font-size: .78rem;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.15);
}

/* ── Auth Card (right column) ─────────────────────────── */
.fir-landing-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(74,140,28,.15);
  overflow: hidden;
}

/* Tabs */
.fir-landing-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--tb-border);
}
.fir-landing-tab {
  padding: 14px; background: var(--tb-cream); border: none; cursor: pointer;
  font-family: var(--tb-font); font-size: .88rem; font-weight: 600; color: var(--tb-muted);
  transition: all .18s; position: relative;
}
.fir-landing-tab:first-child { border-right: 1px solid var(--tb-border); }
.fir-landing-tab.active { background: #fff; color: var(--tb-green-dark); }
.fir-landing-tab.active::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 2px; background: var(--tb-green);
}
.fir-landing-tab:hover:not(.active) { background: #f0f0f0; }

.fir-landing-tab-panel { display: none; }
.fir-landing-tab-panel.active { display: block; }

/* Card head */
.fir-landing-card-head {
  background: linear-gradient(135deg, var(--tb-forest), var(--tb-green-dark));
  padding: 24px 28px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fir-landing-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--tb-green-dark), var(--tb-green));
  display: flex; align-items: center; justify-content: center;
  color: #fff; margin-bottom: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.fir-landing-card-head h3 { font-family: var(--tb-serif); color: #fff; font-size: 1.2rem; margin: 0; }
.fir-landing-card-head p  { color: rgba(255,255,255,.65); font-size: .78rem; margin: 0; }

/* Card body */
.fir-landing-card-body { padding: 24px 28px; }
.fir-landing-card-foot {
  padding: 14px 28px 20px;
  border-top: 1px solid var(--tb-border);
  background: var(--tb-cream);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.fir-landing-link { color: var(--tb-green); font-size: .84rem; font-weight: 500; text-decoration: none; }
.fir-landing-link:hover { text-decoration: underline; }
.fir-landing-hint { font-size: .75rem; color: var(--tb-muted); }
.fir-landing-hint code { background: #e8f0dc; padding: 1px 6px; border-radius: 3px; font-family: var(--tb-mono); }

/* Login form */
.fir-lform { display: flex; flex-direction: column; gap: 16px; }
.fir-lfield { display: flex; flex-direction: column; gap: 5px; }
.fir-lfield label { font-size: .74rem; font-weight: 600; color: var(--tb-green-dark); text-transform: uppercase; letter-spacing: .07em; }
.fir-lfield-wrap { position: relative; display: flex; align-items: center; }
.fir-lfield-icon { position: absolute; left: 12px; color: var(--tb-muted); pointer-events: none; flex-shrink: 0; }
.fir-lfield-wrap input {
  width: 100%; padding: 11px 12px 11px 38px;
  border: 1.5px solid var(--tb-border); border-radius: var(--tb-radius);
  font-family: var(--tb-font); font-size: .92rem; color: var(--tb-text);
  transition: border-color .15s, box-shadow .15s;
}
.fir-lfield-wrap input:focus {
  outline: none; border-color: var(--tb-green);
  box-shadow: 0 0 0 3px rgba(74,140,28,.12);
}
.fir-lfield-eye {
  position: absolute; right: 10px; background: none; border: none;
  cursor: pointer; color: var(--tb-muted); font-size: 1rem; padding: 4px;
}

/* ── Shared button styles (duplicated here so theme works standalone) ── */
.fir-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 22px; border-radius: var(--tb-radius);
  font-family: var(--tb-font); font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none; border: none;
  transition: all .18s; line-height: 1.4;
}
.fir-btn-primary { background: var(--tb-green); color: #fff; }
.fir-btn-primary:hover { background: var(--tb-green-dark); transform: translateY(-1px); box-shadow: var(--tb-shadow); }
.fir-btn-outline  { background: transparent; color: var(--tb-green); border: 1.5px solid var(--tb-green); }
.fir-btn-outline:hover { background: var(--tb-green); color: #fff; }
.fir-btn-full { width: 100%; }
.fir-btn-lg   { padding: 13px 24px; font-size: .95rem; }
.fir-btn-sm   { padding: 6px 14px; font-size: .8rem; }

/* ── Alerts (landing page) ────────────────────────────── */
.fir-alert { padding: 12px 16px; border-radius: var(--tb-radius); border-left: 4px solid; font-size: .88rem; margin-bottom: 14px; }
.fir-alert-success { background: #edfaed; border-color: var(--tb-success); color: var(--tb-success); }
.fir-alert-danger  { background: #fdf0ee; border-color: var(--tb-danger);  color: var(--tb-danger); }
.fir-alert-warning { background: #fef9ec; border-color: var(--tb-warning); color: var(--tb-warning); }
.fir-alert-info    { background: #eaf4fb; border-color: var(--tb-info);    color: var(--tb-info); }

/* ── Register form inside landing card ────────────────── */
.fir-register-inline { display: flex; flex-direction: column; gap: 12px; }
.fir-register-inline .fir-lfield-wrap input,
.fir-register-inline .fir-lfield-wrap select { padding-left: 12px; }
.fir-register-inline select {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--tb-border); border-radius: var(--tb-radius);
  font-family: var(--tb-font); font-size: .88rem; color: var(--tb-text);
}
.fir-register-inline select:focus { outline: none; border-color: var(--tb-green); box-shadow: 0 0 0 3px rgba(74,140,28,.12); }
.fir-hint { font-size: .74rem; color: var(--tb-muted); margin-top: 3px; }

/* ── Stats bar ────────────────────────────────────────── */
.fir-landing-stats {
  background: linear-gradient(90deg, #fff 0%, var(--tb-cream) 100%);
  border-top: 2px solid var(--tb-border);
  padding: 28px 24px;
}
.fir-landing-stats-inner {
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.fir-lstat { text-align: center; padding: 0 40px; }
.fir-lstat-num { display: block; font-family: var(--tb-serif); font-size: 2rem; font-weight: 700; color: var(--tb-forest); line-height: 1; }
.fir-lstat-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tb-muted); margin-top: 4px; }
.fir-lstat-div { width: 1px; height: 40px; background: var(--tb-border); flex-shrink: 0; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .fir-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .fir-hero { padding: 40px 20px 60px; }
  .fir-hero-left { text-align: center; }
  .fir-hero-badge { justify-content: center; }
  .fir-hero-features { align-items: center; }
  .fir-hero-offices { justify-content: center; }
  .fir-landing-card { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .fir-hero-title { font-size: 1.8rem; }
  .fir-landing-card-body { padding: 20px 20px; }
  .fir-landing-card-foot { padding: 14px 20px 18px; }
  .fir-landing-card-head { padding: 20px; }
  .fir-lstat { padding: 0 20px; }
  .fir-lstat-num { font-size: 1.5rem; }
  .fir-footer-inner { flex-direction: column; text-align: center; gap: 8px; }
}