/* ============================================================
   Sh3lf — "Light Porcelain": chic, minimal, hairline borders,
   warm off-white surfaces, a single muted green accent.
   Light by default; a clean charcoal variant for dark mode.
   ============================================================ */

.fi-body { letter-spacing: -0.01em; }

/* ---- App background: warm porcelain ---- */
.fi-main-ctn { background-color: #f7f5f1; }
.dark .fi-main-ctn { background-color: #0f1115; }

/* ---- Brand wordmark (adapts to light/dark) ---- */
.sh3lf-brand { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; color: #1f2937; }
.dark .sh3lf-brand { color: #f3f4f6; }
.sh3lf-brand-3 { color: #0f766e; }
.dark .sh3lf-brand-3 { color: #34d399; }

/* ============================================================
   SIDEBAR — porcelain, hairline, dark legible text
   ============================================================ */
.fi-sidebar, .fi-sidebar-nav, .fi-sidebar-header {
  background-color: #fbfaf7 !important;
  border-right: 1px solid #ece8e0 !important;
}
.fi-sidebar-header { border-bottom: 1px solid #ece8e0 !important; }
.fi-sidebar-group-label {
  color: #9a948a !important;
  letter-spacing: 0.09em; text-transform: uppercase; font-size: 0.66rem; font-weight: 700;
}
.fi-sidebar-item-btn {
  color: #4b5563 !important; font-weight: 500; border-radius: 0.55rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.fi-sidebar-item-btn .fi-icon, .fi-sidebar-item-btn svg { color: #9ca3af !important; }
.fi-sidebar-item-btn:hover { background: #f0ede6 !important; color: #111827 !important; }
.fi-sidebar-item-btn:hover svg { color: #0f766e !important; }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: #e9f1ee !important; color: #09342d !important; font-weight: 600;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn svg { color: #0f766e !important; }

/* dark variant */
.dark .fi-sidebar, .dark .fi-sidebar-nav, .dark .fi-sidebar-header {
  background-color: #15171c !important; border-right-color: rgba(255,255,255,0.06) !important;
}
.dark .fi-sidebar-header { border-bottom-color: rgba(255,255,255,0.06) !important; }
.dark .fi-sidebar-item-btn { color: #d1d5db !important; }
.dark .fi-sidebar-item-btn svg { color: #6ee7b7 !important; }
.dark .fi-sidebar-item-btn:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn {
  background: rgba(16,185,129,0.18) !important; color: #ffffff !important;
}
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-btn svg { color: #6ee7b7 !important; }

/* ============================================================
   TOPBAR — clean, hairline
   ============================================================ */
.fi-topbar > nav {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ece8e0 !important;
}
.dark .fi-topbar > nav {
  background: rgba(21,23,28,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ---- Headings: clean, no gradient ---- */
.fi-header-heading { color: #1f2937 !important; font-weight: 700 !important; letter-spacing: -0.02em; }
.dark .fi-header-heading { color: #f3f4f6 !important; }

/* ============================================================
   CARDS / SECTIONS — white, hairline, whisper shadow
   ============================================================ */
.fi-section {
  border-radius: 0.85rem !important;
  border: 1px solid #ece8e0 !important;
  box-shadow: 0 1px 2px rgba(17,24,39,0.03) !important;
  background: #ffffff !important;
}
.dark .fi-section { background: #15171c !important; border-color: rgba(255,255,255,0.07) !important; }

/* stat cards */
.fi-wi-stats-overview-stat {
  position: relative; overflow: hidden;
  border-radius: 0.85rem !important;
  border: 1px solid #ece8e0 !important;
  box-shadow: 0 1px 2px rgba(17,24,39,0.03) !important;
  background: #ffffff !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.dark .fi-wi-stats-overview-stat { background: #15171c !important; border-color: rgba(255,255,255,0.07) !important; }
.fi-wi-stats-overview-stat::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: #0f766e;
}
.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -14px rgba(15,118,110,0.35) !important;
}
.fi-wi-stats-overview-stat-value { font-weight: 800 !important; letter-spacing: -0.02em; font-size: 1.85rem !important; color: #111827; }
.dark .fi-wi-stats-overview-stat-value { color: #f3f4f6; }

.fi-btn.fi-color-primary { box-shadow: 0 1px 2px rgba(15,118,110,0.25) !important; }
.fi-ta-header-cell { font-weight: 700 !important; }

/* ============================================================
   HERO — full-width landscape, porcelain, chic
   ============================================================ */
.sh3lf-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff, #fcfbf8);
  border: 1px solid #ece8e0;
  box-shadow: 0 1px 2px rgba(17,24,39,0.03);
}
.dark .sh3lf-hero { background: linear-gradient(180deg, #191c22, #15171c); border-color: rgba(255,255,255,0.07); }
.sh3lf-hero-left { min-width: 240px; }
.sh3lf-hero-eyebrow {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: #0f766e;
}
.sh3lf-hero-eyebrow span { color: #09342d; }
.dark .sh3lf-hero-eyebrow { color: #34d399; }
.dark .sh3lf-hero-eyebrow span { color: #6ee7b7; }
.sh3lf-hero-title { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.025em; color: #111827; margin-top: 0.35rem; }
.dark .sh3lf-hero-title { color: #f3f4f6; }
.sh3lf-hero-sub { color: #6b7280; margin-top: 0.3rem; font-size: 0.92rem; }
.dark .sh3lf-hero-sub { color: #9ca3af; }
.sh3lf-hero-sub .accent { color: #0f766e; font-weight: 600; }
.sh3lf-hero-sub .warn { color: #b45309; font-weight: 600; }
.sh3lf-hero-sub .dot { margin: 0 0.4rem; color: #d1d5db; }
.sh3lf-hero-tiles { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sh3lf-hero-tile { min-width: 104px; padding: 0.8rem 1rem; border-radius: 0.7rem; background: #faf9f6; border: 1px solid #ece8e0; }
.dark .sh3lf-hero-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.sh3lf-hero-tile .t-label { font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: #9a948a; }
.sh3lf-hero-tile .t-value { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; color: #111827; margin-top: 0.1rem; }
.dark .sh3lf-hero-tile .t-value { color: #f3f4f6; }
.sh3lf-hero-tile .t-value.warn { color: #b45309; }
.dark .sh3lf-hero-tile .t-value.warn { color: #fbbf24; }

/* ============================================================
   LOGIN
   ============================================================ */
.fi-simple-layout { background: #f4f1ec !important; }
.dark .fi-simple-layout { background: #0f1115 !important; }
.fi-simple-main {
  border: 1px solid #ece8e0 !important; border-radius: 1rem !important;
  box-shadow: 0 20px 50px -30px rgba(17,24,39,0.25) !important;
}
.dark .fi-simple-main { border-color: rgba(255,255,255,0.07) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.sh3lf-footer { text-align: center; padding: 1.1rem 1rem 1.4rem; font-size: 0.8rem; color: #9a948a; }
.sh3lf-link { color: #0f766e; font-weight: 600; text-decoration: none; }
.sh3lf-link:hover { color: #09342d; text-decoration: underline; }
.dark .sh3lf-link:hover { color: #6ee7b7; }
.sh3lf-heart { color: #e11d48; font-style: normal; display: inline-block; animation: sh3lf-beat 1.6s ease-in-out infinite; }
@keyframes sh3lf-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } }