/**
 * FundSys UI Components — Financial Atelier
 * Sharp corners, tonal surfaces, no explicit borders
 */

/* ========== CARDS ========== */
.fs-card {
  background: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
  transition: box-shadow var(--fs-transition-base),
              background-color var(--fs-transition-base);
}

.dark .fs-card {
  background: #1a2540;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.fs-card-hover:hover {
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.10);
}

/* ========== BUTTONS ========== */
.fs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-3) var(--fs-space-5);
  font-size: var(--fs-text-sm);
  font-weight: 600;
  line-height: var(--fs-leading-tight);
  border-radius: 0.125rem;
  border: none;
  cursor: pointer;
  transition: all var(--fs-transition-base);
  position: relative;
  overflow: hidden;
  min-height: 44px;
  font-family: var(--fs-font-sans);
}

.fs-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button — solid brand color */
.fs-button-primary {
  background: var(--fs-brand-primary, #131b2e);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.2);
}

.fs-button-primary:hover:not(:disabled) {
  filter: brightness(1.15);
  box-shadow: 0 6px 20px rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.3);
}

/* Secondary Button — ghost style */
.fs-button-secondary {
  background: transparent;
  color: var(--fs-brand-primary, #131b2e);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
}

.dark .fs-button-secondary {
  color: #eff1f3;
}

.fs-button-secondary:hover:not(:disabled) {
  text-decoration-color: currentColor;
}

/* Tertiary Button — tonal surface */
.fs-button-tertiary {
  background: #eceef0;
  color: #54647a;
}

.dark .fs-button-tertiary {
  background: rgba(255, 255, 255, 0.08);
  color: #9ab0cc;
}

.fs-button-tertiary:hover:not(:disabled) {
  background: #e6e8ea;
}

.dark .fs-button-tertiary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

/* Danger Button */
.fs-button-danger {
  background: rgba(186, 26, 26, 0.08);
  color: #ba1a1a;
}

.fs-button-danger:hover:not(:disabled) {
  background: #ba1a1a;
  color: white;
}

.dark .fs-button-danger {
  background: rgba(239, 83, 80, 0.12);
  color: #ef5350;
}

.dark .fs-button-danger:hover:not(:disabled) {
  background: #ef5350;
  color: white;
}

/* Button Sizes */
.fs-button-sm {
  padding: var(--fs-space-2) var(--fs-space-3);
  font-size: var(--fs-text-xs);
  min-height: 36px;
}

.fs-button-lg {
  padding: var(--fs-space-4) var(--fs-space-6);
  font-size: var(--fs-text-base);
}

/* ========== INPUTS ========== */
.fs-input {
  width: 100%;
  padding: var(--fs-space-3) var(--fs-space-4);
  font-size: var(--fs-text-sm);
  font-family: var(--fs-font-sans);
  line-height: var(--fs-leading-normal);
  color: var(--fs-text-primary);
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(198, 198, 205, 0.5);
  border-radius: 0;
  box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.04);
  transition: border-color var(--fs-transition-base),
              background-color var(--fs-transition-base),
              box-shadow var(--fs-transition-base);
  min-height: 44px;
}

.dark .fs-input {
  color: #eff1f3;
  border-bottom-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.04);
}

.fs-input:hover {
  border-bottom-color: rgba(198, 198, 205, 0.8);
}

.dark .fs-input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.fs-input:focus {
  outline: none;
  border-bottom-color: var(--fs-brand-primary, #131b2e);
  box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}

.dark .fs-input:focus {
  border-bottom-color: #e9c176;
  box-shadow: inset 0 -4px 8px -4px rgba(233, 193, 118, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

.fs-input::placeholder {
  color: var(--fs-text-muted);
}

.fs-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Onboarding/inline inputs — used when .fs-input is not applied */
.fs-onboarding-input {
  background: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 2px solid rgba(198, 198, 205, 0.5) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.04) !important;
}

.fs-onboarding-input:hover {
  border-bottom-color: rgba(198, 198, 205, 0.8) !important;
}

.dark .fs-onboarding-input {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 -4px 8px -4px rgba(255, 255, 255, 0.04) !important;
}

.dark .fs-onboarding-input:hover {
  border-bottom-color: rgba(255, 255, 255, 0.4) !important;
}

.fs-onboarding-input:focus {
  outline: none;
  border-bottom-color: var(--fs-brand-primary, #131b2e) !important;
  box-shadow: inset 0 -4px 8px -4px rgba(0, 0, 0, 0.08) !important;
}

.dark .fs-onboarding-input:focus {
  border-bottom-color: #e9c176 !important;
  box-shadow: inset 0 -4px 8px -4px rgba(233, 193, 118, 0.15) !important;
}

/* Input with Icon */
.fs-input-wrapper {
  position: relative;
}

.fs-input-wrapper .fs-input-icon {
  position: absolute;
  left: var(--fs-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-text-muted);
  pointer-events: none;
}

.fs-input-wrapper .fs-input {
  padding-left: var(--fs-space-10);
}

/* Floating Label Input */
.fs-input-floating {
  position: relative;
}

.fs-input-floating label {
  position: absolute;
  left: var(--fs-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--fs-text-muted);
  font-size: var(--fs-text-sm);
  transition: all var(--fs-transition-base);
  pointer-events: none;
  background: transparent;
  padding: 0 var(--fs-space-1);
}

.fs-input-floating .fs-input:focus ~ label,
.fs-input-floating .fs-input:not(:placeholder-shown) ~ label {
  top: 0;
  font-size: var(--fs-text-xs);
  color: var(--fs-brand-primary, #131b2e);
}

.dark .fs-input-floating .fs-input:focus ~ label,
.dark .fs-input-floating .fs-input:not(:placeholder-shown) ~ label {
  color: #eff1f3;
}

/* ========== BADGES / CHIPS ========== */
.fs-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 0.125rem;
}

.fs-badge-success {
  background: rgba(46, 125, 50, 0.10);
  color: #2e7d32;
}

.fs-badge-warning {
  background: rgba(230, 81, 0, 0.10);
  color: #e65100;
}

.fs-badge-error {
  background: rgba(186, 26, 26, 0.10);
  color: #ba1a1a;
}

.fs-badge-info {
  background: #d0e1fb;
  color: #505f76;
}

.fs-badge-neutral {
  background: #eceef0;
  color: #54647a;
}

.fs-badge-gold {
  background: #ffdea5;
  color: var(--fs-brand-primary, #131b2e);
}

.dark .fs-badge-success {
  background: rgba(102, 187, 106, 0.15);
  color: #66bb6a;
}

.dark .fs-badge-warning {
  background: rgba(255, 183, 77, 0.15);
  color: #ffb74d;
}

.dark .fs-badge-error {
  background: rgba(239, 83, 80, 0.15);
  color: #ef5350;
}

.dark .fs-badge-info {
  background: rgba(144, 202, 249, 0.15);
  color: #90caf9;
}

.dark .fs-badge-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: #9ab0cc;
}

.dark .fs-badge-gold {
  background: rgba(233, 193, 118, 0.2);
  color: #ffdea5;
}

/* ========== ALERTS / MESSAGES ========== */
.fs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4);
  border-radius: 0.125rem;
  font-size: var(--fs-text-sm);
  border-left: 3px solid;
}

.fs-alert-success {
  background: rgba(46, 125, 50, 0.08);
  color: #1b5e20;
  border-left-color: #2e7d32;
}

.dark .fs-alert-success {
  color: #a5d6a7;
}

.fs-alert-error {
  background: rgba(186, 26, 26, 0.08);
  color: #b71c1c;
  border-left-color: #ba1a1a;
}

.dark .fs-alert-error {
  color: #ef9a9a;
}

.fs-alert-warning {
  background: rgba(230, 81, 0, 0.08);
  color: #bf360c;
  border-left-color: #e65100;
}

.dark .fs-alert-warning {
  color: #ffcc80;
}

.fs-alert-info {
  background: rgba(80, 95, 118, 0.08);
  color: #37474f;
  border-left-color: #505f76;
}

.dark .fs-alert-info {
  color: #90caf9;
}

/* ========== TABS ========== */
.fs-tabs {
  display: flex;
  gap: var(--fs-space-1);
  background: #f2f4f6;
  padding: 0.25rem;
  border-radius: 0.125rem;
  margin-bottom: var(--fs-space-6);
}

.fs-tab {
  padding: var(--fs-space-2) var(--fs-space-4);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  color: var(--fs-text-muted);
  background: transparent;
  border: none;
  border-radius: 0.125rem;
  cursor: pointer;
  transition: all var(--fs-transition-base);
}

.fs-tab:hover {
  color: var(--fs-text-primary);
  background: #ffffff;
}

.fs-tab-active {
  color: var(--fs-brand-primary, #131b2e);
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.dark .fs-tabs {
  background: rgba(255, 255, 255, 0.05);
}

.dark .fs-tab:hover {
  background: rgba(255, 255, 255, 0.08);
}

.dark .fs-tab-active {
  color: #eff1f3;
  background: #1a2540;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Tab Panels */
.fs-tab-panel {
  display: none;
}

.fs-tab-panel-active {
  display: block;
  animation: fs-fade-in 0.2s ease;
}

@keyframes fs-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== EMPTY STATES ========== */
.fs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--fs-space-12) var(--fs-space-6);
  background: #f7f9fb;
  border-radius: 0.125rem;
}

.fs-empty-state-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--fs-space-4);
  color: var(--fs-text-muted);
}

.fs-empty-state-title {
  font-size: var(--fs-text-xl);
  font-weight: 400;
  font-family: var(--fs-font-serif);
  color: var(--fs-text-primary, #131b2e);
  margin-bottom: var(--fs-space-2);
}

.fs-empty-state-text {
  font-size: var(--fs-text-sm);
  color: var(--fs-text-secondary);
  max-width: 400px;
  margin-bottom: var(--fs-space-6);
}

.dark .fs-empty-state {
  background: #1a2540;
}

.dark .fs-empty-state-title {
  color: #eff1f3;
}

/* ========== LOADING STATES ========== */
.fs-skeleton {
  background: linear-gradient(
    90deg,
    #eceef0 25%,
    #f2f4f6 50%,
    #eceef0 75%
  );
  background-size: 200% 100%;
  animation: fs-skeleton-loading 1.5s infinite;
  border-radius: 0.125rem;
}

@keyframes fs-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dark .fs-skeleton {
  background: linear-gradient(
    90deg,
    #1e293b 25%,
    #243352 50%,
    #1e293b 75%
  );
  background-size: 200% 100%;
}

.fs-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--fs-brand-primary-rgb, 19, 27, 46), 0.15);
  border-top-color: var(--fs-brand-primary, #131b2e);
  border-radius: 50%;
  animation: fs-spin 0.7s linear infinite;
}

.dark .fs-spinner {
  border-color: rgba(255, 255, 255, 0.15);
  border-top-color: #eff1f3;
}

@keyframes fs-spin {
  to { transform: rotate(360deg); }
}

/* ========== TOOLTIPS ========== */
.fs-tooltip {
  position: relative;
}

.fs-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: var(--fs-space-2) var(--fs-space-3);
  background: var(--fs-brand-primary, #131b2e);
  color: #ffffff;
  font-size: var(--fs-text-xs);
  font-weight: 500;
  border-radius: 0.125rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--fs-transition-fast);
  z-index: 50;
}

.fs-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-4px);
}

/* ========== BREADCRUMBS ========== */
.fs-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  color: var(--fs-text-muted);
}

.fs-breadcrumb a {
  color: var(--fs-text-secondary);
  text-decoration: none;
  transition: color var(--fs-transition-fast);
}

.fs-breadcrumb a:hover {
  color: var(--fs-brand-primary, #131b2e);
}

.fs-breadcrumb-separator {
  color: var(--fs-text-muted);
}

.fs-breadcrumb-current {
  color: var(--fs-text-primary, #131b2e);
  font-weight: 500;
}

.dark .fs-breadcrumb a:hover {
  color: #eff1f3;
}

.dark .fs-breadcrumb-current {
  color: #eff1f3;
}

/* ========== FINANCIAL ATELIER SPECIFICS ========== */

/* Serif display text */
.fa-display {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
}

.fa-display-italic {
  font-family: 'Noto Serif', serif;
  font-style: italic;
  font-weight: 300;
}

/* Success gold progress bar */
.fa-progress-gold {
  background: linear-gradient(to right, #e9c176, #ffdea5);
  height: 4px;
  border-radius: 0;
}

/* Ledger table rows */
.fa-ledger-row {
  padding: 0.875rem 1rem;
  transition: background-color var(--fs-transition-fast);
  border-radius: 0.125rem;
}

.fa-ledger-row:hover {
  background: #f2f4f6;
}

.dark .fa-ledger-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Dark surface card (primary-container) */
.fa-card-dark {
  background: var(--fs-brand-primary, #131b2e);
  color: #ffffff;
  border-radius: 0.125rem;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}

/* Glass panel for upload areas */
.fa-glass-panel {
  background: rgba(236, 238, 240, 0.7);
  backdrop-filter: blur(20px);
  border-radius: 0.125rem;
}

.dark .fa-glass-panel {
  background: rgba(19, 27, 46, 0.7);
}

/* ========== AI CHAT ========== */
.fs-ai-chat-body {
  scroll-behavior: smooth;
}

.fs-ai-message {
  max-width: 90%;
  padding: var(--fs-space-4) var(--fs-space-5);
  border-radius: 0.125rem;
  font-size: var(--fs-text-sm);
  line-height: var(--fs-leading-relaxed);
  position: relative;
  overflow: visible;
  word-wrap: break-word;
}

.fs-ai-message-user {
  align-self: flex-end;
  background: var(--fs-brand-primary, #131b2e);
  color: #ffffff;
}

.dark .fs-ai-message-user {
  background: #1e3a5f;
}

.fs-ai-message-assistant {
  align-self: flex-start;
  background: #f2f4f6;
  color: var(--fs-text-secondary, #54647a);
}

.dark .fs-ai-message-assistant {
  background: #1e293b;
  color: #9ab0cc;
}

.fs-ai-gold-accent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 3px;
  background: var(--fs-gold, #e9c176);
}

.fs-ai-message-assistant .fs-ai-content strong {
  color: #191c1e;
}

.dark .fs-ai-message-assistant .fs-ai-content strong {
  color: #eff1f3;
}

.fs-ai-inline-code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: var(--fs-font-mono, 'SF Mono', monospace);
  font-size: 0.85em;
}

.dark .fs-ai-inline-code {
  background: rgba(255, 255, 255, 0.08);
}

/* Typing indicator */
.fs-ai-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.fs-ai-typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fs-gold, #e9c176);
  animation: fsAiTypingPulse 1.4s ease-in-out infinite;
}

.fs-ai-typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.fs-ai-typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes fsAiTypingPulse {
  0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
}