/* Fiscalma — Dashboard Styles */

/* Brand colors */
:root {
  --navy: #1f3044;
  --gold: #c9a84c;
  --bg: #f8f9fa;
  --surface: #ffffff;
  --text-primary: #1f3044;
  --text-secondary: #6b7280;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.card {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  border: 1px solid #f1f5f9;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

/* Summary cards get a subtle lift on hover */
.card-animate {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-animate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.15s ease;
}

.nav-link:hover {
  color: #1f2937;
  background-color: #f3f4f6;
}

.nav-link.active {
  color: var(--gold);
  background-color: #fdf8ec;
  border-left: 2px solid var(--gold);
}

/* Smooth transitions */
[x-cloak] { display: none !important; }

/* Alpine applies inline display when x-show opens the mobile menu.
   Keep that overlay impossible to show on desktop/tablet widths. */
@media (min-width: 768px) {
  .mobile-menu-overlay {
    display: none !important;
  }
}

/* Table hover effects */
table tbody tr {
  transition: background-color 0.15s ease;
}

/* Truncated cells with tooltip */
.cell-truncate {
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

/* Company header badge */
.company-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  color: #475569;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Print styles */
@media print {
  nav, footer, .no-print { display: none !important; }
  .card { box-shadow: none; border: 1px solid #e2e8f0; }
  body { background: white; }
}

/* Responsive table scrolling indicator */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Table responsive wrapper - fade hint on right edge */
.table-wrapper {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Footer */
.site-footer {
  border-top: 1px solid #e2e8f0;
  margin-top: 3rem;
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Animation for upload zone */
@keyframes pulse-border {
  0%, 100% { border-color: #93c5fd; }
  50% { border-color: #3b82f6; }
}

/* Mobile nav */
@media (max-width: 639px) {
  .cell-truncate {
    max-width: 120px;
  }
  
  /* Card hover disabled on touch devices */
  .card-animate:hover {
    transform: none;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  }
}

/* iOS safe area support */
.pb-safe-bottom {
  padding-bottom: max(5rem, env(safe-area-inset-bottom, 1.25rem));
}

/* Prevent body scroll when mobile menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* Mobile overlay transitions */
@media (max-width: 639px) {
  .card {
    padding: 1rem;
  }
}

/* Ensure minimum touch target size */
button, a {
  min-height: 44px;
}

nav a, nav button {
  /* Override minimum in nav context where we manage sizes explicitly */
  min-height: unset;
}

/* Touch-friendly button padding on mobile */
@media (max-width: 639px) {
  .btn-mobile-full {
    width: 100%;
    justify-content: center;
  }
}

/* ── Fiscalma Brand Button Classes ───────────────────────── */

.btn-fiscalma {
  background: #1f3044;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.btn-fiscalma:hover { background: #2a4060; }
.btn-fiscalma:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-fiscalma-gold {
  background: #c9a84c;
  color: #1f3044;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-fiscalma-gold:hover { background: #b8943d; }
.btn-fiscalma-gold:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-fiscalma-outline {
  background: transparent;
  color: #1f3044;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1.5px solid #1f3044;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-fiscalma-outline:hover { background: rgba(31,48,68,0.05); }

/* ── Loading spinner brand color ────────────────────────── */
.spinner-brand {
  border-color: #1f3044;
  border-top-color: transparent;
}

/* ── Chat user bubble ───────────────────────────────────── */
.fiscalma-chat-user {
  background: #1f3044 !important;
}

/* ── Animation for upload zone with brand color ─────────── */
@keyframes pulse-border-brand {
  0%, 100% { border-color: #c9a84c; }
  50% { border-color: #1f3044; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Polish & Motion layer
   Principles: animate transform/opacity only (GPU), strong ease-out curves,
   durations < 320ms, scale(0.97) press feedback, hover gated to fine pointers,
   prefers-reduced-motion honoured everywhere. Crisp, not flashy — it's a tool.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 300ms;
}

/* Page entrance — one fast, quiet reveal per navigation. Base state is visible,
   so content never depends on the animation firing (safe on hidden tabs / RM). */
@media (prefers-reduced-motion: no-preference) {
  main { animation: fr-page 0.42s var(--ease-out) both; }
  @keyframes fr-page {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  /* Opt-in stagger for a row of cards (e.g. dashboard KPIs). */
  .stagger-in > * { animation: fr-item 0.5s var(--ease-out) both; }
  .stagger-in > *:nth-child(1) { animation-delay: 30ms; }
  .stagger-in > *:nth-child(2) { animation-delay: 70ms; }
  .stagger-in > *:nth-child(3) { animation-delay: 110ms; }
  .stagger-in > *:nth-child(4) { animation-delay: 150ms; }
  .stagger-in > *:nth-child(5) { animation-delay: 190ms; }
  .stagger-in > *:nth-child(6) { animation-delay: 230ms; }
  @keyframes fr-item {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Cards: GPU-only transitions; lift only on a real (fine) hover. */
.card { transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .card-animate:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px -10px rgba(31, 48, 68, 0.18), 0 4px 8px -4px rgba(0, 0, 0, 0.05);
  }
}
/* Never lift on touch (avoids sticky tap-hover on tablets of any width). */
@media (hover: none) {
  .card:hover, .card-animate:hover { transform: none; box-shadow: 0 1px 3px 0 rgba(0,0,0,.05), 0 1px 2px -1px rgba(0,0,0,.05); }
}

/* Press feedback — instant, subtle, on every actionable control. */
button, .btn-fiscalma, .btn-fiscalma-gold, .btn-fiscalma-outline, [role="button"] {
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
  button:not([disabled]):active,
  .btn-fiscalma:not(:disabled):active,
  .btn-fiscalma-gold:not(:disabled):active,
  .btn-fiscalma-outline:not(:disabled):active,
  [role="button"]:active { transform: scale(0.97); }
}

/* Primary brand buttons: soft resting shadow + a lift on hover. */
.btn-fiscalma, .btn-fiscalma-gold { box-shadow: 0 1px 2px rgba(31, 48, 68, 0.12); }
@media (hover: hover) and (pointer: fine) {
  .btn-fiscalma:hover { box-shadow: 0 6px 16px -4px rgba(31, 48, 68, 0.30); }
  .btn-fiscalma-gold:hover { box-shadow: 0 6px 16px -4px rgba(201, 168, 76, 0.40); }
}

/* Keyboard focus — visible, on-brand; hidden for mouse/touch. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0.4rem;
}
:where(button, a):focus:not(:focus-visible) { outline: none; }

/* Inputs / selects: clear focus affordance in brand navy. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(31, 48, 68, 0.12);
  outline: none;
}

/* Specific transition props (was `all`) on nav links. */
.nav-link { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }

/* Loading skeleton shimmer (for empty/loading states). */
@media (prefers-reduced-motion: no-preference) {
  .skeleton {
    background: linear-gradient(90deg, #eef1f4 25%, #e2e8f0 37%, #eef1f4 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 0.5rem;
  }
  @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
}

/* Global reduced-motion guard: make everything instant, keep layout intact. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}