@import "tailwindcss";

/* ── BeanFlows Brand Theme ── */
@theme {
  --font-display: "Fraunces", "DM Sans", ui-serif, Georgia, serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --color-espresso: #2C1810;
  --color-roast: #4A2C1A;
  --color-copper: #B45309;
  --color-copper-hover: #92400E;
  --color-bean-green: #15803D;
  --color-forest: #064E3B;
  --color-cream: #FFFBF5;
  --color-latte: #F5F0EB;
  --color-parchment: #E8DFD5;
  --color-stone: #78716C;
  --color-stone-dark: #57534E;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-warning: #D97706;
}

/* ── Base layer ── */
@layer base {
  body {
    @apply bg-cream text-stone-dark font-sans antialiased;
  }
  h1, h2, h3 {
    font-family: var(--font-display);
    @apply text-espresso font-bold tracking-tight;
  }
  h4, h5, h6 {
    @apply text-roast font-semibold;
  }
  a {
    @apply text-copper hover:text-copper-hover transition-colors;
  }
  hr {
    @apply border-parchment my-6;
  }
}

/* ── Component classes ── */
@layer components {
  /* ── Navigation ── */
  .nav-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 251, 245, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(232, 223, 213, 0.7);
  }
  .nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
  }
  .nav-logo {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-espresso);
    text-decoration: none;
  }
  .nav-logo:hover {
    color: var(--color-espresso);
  }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
  }
  .nav-links a {
    color: var(--color-stone-dark);
    text-decoration: none;
    transition: color 0.15s;
  }
  .nav-links a:hover {
    color: var(--color-copper);
  }
  a.nav-auth-btn,
  button.nav-auth-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-copper);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.25);
    transition: background 0.15s;
  }
  a.nav-auth-btn:hover,
  button.nav-auth-btn:hover {
    background: var(--color-copper-hover);
    color: #fff;
  }
  .nav-badge {
    @apply bg-copper/10 text-copper px-2 py-0.5 text-xs font-semibold rounded-full;
  }
  .nav-form {
    margin: 0;
    padding: 0;
    display: inline;
  }
  .nav-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-espresso);
  }
  @media (max-width: 768px) {
    .nav-hamburger { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      flex-direction: column;
      background: rgba(255, 251, 245, 0.97);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(232, 223, 213, 0.7);
      padding: 1rem;
      gap: 0.75rem;
      align-items: stretch;
      text-align: center;
    }
    .nav-links.open { display: flex; }
    .nav-inner { position: relative; }
  }

  /* Page container */
  .container-page {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* ── App Shell (authenticated dashboard layout) ── */
  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  .app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: rgba(255, 251, 245, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(232, 223, 213, 0.7);
    flex-shrink: 0;
  }
  .app-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .app-header-email {
    font-size: 0.8125rem;
    color: var(--color-stone);
    display: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }
  @media (min-width: 640px) {
    .app-header-email { display: block; }
  }
  .app-body {
    display: flex;
    flex: 1;
    min-height: 0;
  }
  .app-sidebar {
    width: 220px;
    flex-shrink: 0;
    padding: 1.25rem 0.75rem;
    border-right: 1px solid var(--color-parchment);
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    display: none;
  }
  @media (min-width: 768px) {
    .app-sidebar { display: block; }
  }
  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-stone-dark);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    margin-bottom: 2px;
  }
  .sidebar-item:hover {
    background: var(--color-latte);
    color: var(--color-espresso);
  }
  .sidebar-item.active {
    background: rgba(180, 83, 9, 0.08);
    color: var(--color-copper);
    font-weight: 600;
  }
  .sidebar-item.active svg {
    stroke: var(--color-copper);
  }
  .app-content {
    flex: 1;
    min-width: 0;
    padding: 2rem 2rem 5rem;
  }
  @media (min-width: 768px) {
    .app-content { padding: 2rem 2.5rem 2rem; }
  }

  /* ── Mobile bottom navigation ── */
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: stretch;
    background: rgba(255, 251, 245, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(232, 223, 213, 0.7);
    z-index: 50;
  }
  @media (min-width: 768px) {
    .mobile-bottom-nav { display: none; }
  }
  .mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-stone);
    text-decoration: none;
    transition: color 0.12s;
  }
  .mobile-nav-item:hover,
  .mobile-nav-item.active {
    color: var(--color-copper);
  }
  .mobile-nav-item.active svg {
    stroke: var(--color-copper);
  }

  /* ── Display headings (Fraunces serif) ── */
  .heading-display {
    font-family: var(--font-display);
    @apply text-espresso font-bold tracking-tight;
  }

  /* ── Section heading (centered title + subtitle) ── */
  .section-heading {
    @apply text-center mb-12;
  }
  .section-heading h2 {
    @apply text-3xl md:text-4xl mb-3;
  }
  .section-heading p {
    @apply text-stone text-lg max-w-2xl mx-auto;
  }

  /* ── Hero section ── */
  .hero {
    @apply text-center py-20 md:py-28;
  }
  .hero h1 {
    font-family: var(--font-display);
    @apply text-4xl md:text-5xl lg:text-6xl mb-6 max-w-4xl mx-auto leading-tight;
  }
  .hero p {
    @apply text-lg md:text-xl text-stone max-w-2xl mx-auto mb-8;
  }

  /* ── Feature card (icon + heading + text) ── */
  .feature-card {
    @apply bg-white border border-parchment rounded-2xl p-6 shadow-sm
           hover:shadow-md transition-shadow;
  }
  .feature-card .feature-icon {
    @apply text-3xl mb-3;
  }
  .feature-card h3 {
    @apply text-lg mb-2;
  }
  .feature-card p {
    @apply text-sm text-stone leading-relaxed;
  }

  /* ── Metric card (dashboard KPIs) ── */
  .metric-card {
    @apply bg-white border border-parchment rounded-2xl p-5 shadow-sm;
  }
  .metric-label {
    @apply text-xs font-semibold text-stone uppercase tracking-wider;
  }
  .metric-value {
    @apply text-2xl md:text-3xl font-bold text-espresso font-mono mt-1;
  }
  .metric-sub {
    @apply text-xs text-stone mt-1;
  }

  /* ── Auth card (narrow centered) ── */
  .auth-card {
    @apply bg-white border border-parchment rounded-2xl p-8 shadow-sm
           max-w-md mx-auto my-16;
  }
  .auth-card h1 {
    @apply text-2xl mb-2;
  }
  .auth-card p.subtitle {
    @apply text-stone text-sm mb-6;
  }

  /* ── Pricing cards ── */
  .pricing-card {
    @apply bg-white border border-parchment rounded-2xl p-6 shadow-sm
           flex flex-col;
  }
  .pricing-card-highlighted {
    @apply bg-white border-2 border-copper rounded-2xl p-6 shadow-md
           flex flex-col relative;
  }
  .pricing-badge {
    @apply absolute -top-3 left-1/2 -translate-x-1/2
           bg-copper text-white text-xs font-semibold px-3 py-1 rounded-full;
  }

  /* ── Step number (how-it-works) ── */
  .step-number {
    @apply w-10 h-10 rounded-full bg-copper text-white
           flex items-center justify-center text-sm font-bold mx-auto mb-3;
  }

  /* ── FAQ accordion ── */
  .faq-item {
    @apply border-b border-parchment;
  }
  .faq-item summary {
    @apply py-4 cursor-pointer font-medium text-espresso
           list-none flex justify-between items-center;
  }
  .faq-item summary::after {
    content: "+";
    @apply text-copper text-xl font-light transition-transform;
  }
  .faq-item[open] summary::after {
    content: "\2212";
  }
  .faq-item p {
    @apply pb-4 text-sm text-stone leading-relaxed;
  }

  /* ── Chart container ── */
  .chart-container {
    @apply bg-white border border-parchment rounded-2xl p-4 md:p-6 shadow-sm;
  }
  .chart-container canvas {
    width: 100% !important;
    max-height: 400px;
  }

  /* ── Plan gate (upgrade prompt) ── */
  .plan-gate {
    @apply bg-latte border border-parchment rounded-xl p-4 text-sm text-stone text-center;
  }
  .plan-gate a {
    @apply font-semibold;
  }

  /* ── Danger card ── */
  .danger-card {
    @apply bg-white border-2 border-danger/30 rounded-2xl p-6 shadow-sm;
  }

  /* ── Page header (dashboard) ── */
  .page-header {
    @apply mb-8;
  }
  .page-header h1 {
    @apply text-3xl mb-1;
  }
  .page-header p {
    @apply text-stone text-lg;
  }

  /* Cards */
  .card {
    @apply bg-white border border-parchment rounded-2xl p-6 mb-6 shadow-sm;
  }
  .card-header {
    @apply border-b border-parchment pb-3 mb-4 text-sm text-stone font-medium;
  }

  /* Buttons — shared base */
  .btn, .btn-secondary, .btn-danger {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl
           font-semibold text-sm transition-colors cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-copper/50;
  }
  .btn {
    @apply bg-copper text-white hover:bg-copper-hover shadow-[0_2px_10px_rgba(180,83,9,0.25)];
  }
  .btn-secondary {
    @apply bg-stone-dark text-white hover:bg-espresso;
  }
  .btn-danger {
    @apply bg-danger text-white hover:bg-danger-hover;
  }
  .btn-outline {
    @apply inline-flex items-center justify-center px-5 py-2.5 rounded-xl
           font-semibold text-sm transition-colors cursor-pointer
           bg-transparent text-stone-dark border border-parchment
           hover:bg-latte hover:text-espresso
           focus:outline-none focus:ring-2 focus:ring-copper/50;
  }
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
  }

  /* Forms */
  .form-label {
    @apply block text-sm font-medium text-roast mb-1;
  }
  .form-input {
    @apply w-full px-3 py-2 rounded-xl border border-parchment bg-white
           text-stone-dark placeholder-stone
           focus:outline-none focus:ring-2 focus:ring-copper/50 focus:border-copper
           transition-colors;
  }
  .form-hint {
    @apply text-xs text-stone mt-1;
  }

  /* Tables */
  .table {
    @apply w-full text-sm;
  }
  .table th {
    @apply text-left px-3 py-2 text-xs font-semibold text-stone uppercase tracking-wider
           border-b-2 border-parchment;
  }
  .table td {
    @apply px-3 py-2 border-b border-parchment text-stone-dark;
  }
  .table tbody tr:hover {
    @apply bg-latte;
  }

  /* Flash messages */
  .flash, .flash-error, .flash-success, .flash-warning {
    @apply px-4 py-3 rounded-xl mb-4 border-l-4 bg-white text-stone-dark text-sm;
  }
  .flash {
    @apply border-copper;
  }
  .flash-error {
    @apply border-danger;
  }
  .flash-success {
    @apply border-bean-green;
  }
  .flash-warning {
    @apply border-warning;
  }

  /* Badges */
  .badge, .badge-success, .badge-danger, .badge-warning {
    @apply inline-block px-2 py-0.5 text-xs font-semibold rounded-full;
  }
  .badge {
    @apply bg-copper/10 text-copper;
  }
  .badge-success {
    @apply bg-bean-green/10 text-bean-green;
  }
  .badge-danger {
    @apply bg-danger/10 text-danger;
  }
  .badge-warning {
    @apply bg-warning/10 text-warning;
  }

  /* Heading group */
  .heading-group {
    @apply mb-6;
  }
  .heading-group h1,
  .heading-group h2 {
    @apply mb-1;
  }
  .heading-group p {
    @apply text-stone text-lg;
  }

  /* Grid helpers */
  .grid-auto {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  .grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6;
  }
  .grid-3 {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6;
  }
  .grid-4 {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6;
  }

  /* Monospace data display */
  .metric {
    @apply font-mono text-espresso;
  }
  .mono {
    @apply font-mono;
  }

  /* ── Chart card (shared across dashboard pages) ── */
  .cc-chart-card {
    background: white;
    border: 1px solid var(--color-parchment);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(44,24,16,0.05), 0 4px 20px rgba(44,24,16,0.03);
  }
  .cc-chart-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0;
    gap: 1rem;
  }
  .cc-chart-title {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-espresso);
    line-height: 1.2;
  }
  .cc-chart-meta { font-size: 0.6875rem; color: var(--color-stone); margin-top: 3px; }
  .cc-chart-unit {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-stone);
    background: var(--color-latte);
    border: 1px solid var(--color-parchment);
    padding: 2px 8px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
  }
  .cc-chart-body { padding: 1rem 1.5rem 1.5rem; }
  .cc-chart-body canvas { max-height: 340px !important; }

  /* ── Data table card ── */
  .cc-table-card {
    background: white;
    border: 1px solid var(--color-parchment);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(44,24,16,0.05);
  }
  .cc-table-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--color-parchment);
  }
  .cc-table-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-stone);
    font-weight: 700;
  }
  .cc-table-year {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-stone);
    background: var(--color-latte);
    border: 1px solid var(--color-parchment);
    padding: 2px 7px;
    border-radius: 100px;
  }
  .cc-trow {
    display: grid;
    grid-template-columns: 2rem 1fr 5.5rem;
    align-items: center;
    padding: 0.5625rem 1.5rem;
    border-bottom: 1px solid rgba(232,223,213,0.5);
    transition: background 0.1s;
    gap: 0.5rem;
  }
  .cc-trow:last-child { border-bottom: none; }
  .cc-trow:hover { background: var(--color-latte); }
  .cc-trow-head { padding-top: 0.375rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--color-parchment); }
  .cc-trow-head:hover { background: none; }
  .cc-t-rank { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--color-stone); text-align: right; }
  .cc-t-country { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
  .cc-t-name { font-size: 0.8125rem; font-weight: 500; color: var(--color-espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-t-value { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--color-espresso); text-align: right; }
  .cc-t-head { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-stone); font-weight: 600; }

  /* ── Empty state ── */
  .cc-empty {
    background: white;
    border: 1px solid var(--color-parchment);
    border-radius: 1.25rem;
    padding: 4.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cc-empty-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-latte);
    border: 2px solid var(--color-parchment);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
  }
  .cc-empty-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; color: var(--color-espresso); margin-bottom: 0.5rem; }
  .cc-empty-body { font-size: 0.875rem; color: var(--color-stone); line-height: 1.65; max-width: 300px; }

  @keyframes cc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .cc-in   { animation: cc-in 0.25s ease both; }
  .cc-in-2 { animation: cc-in 0.25s 0.07s ease both; }

  /* ── Filter bar (deep-dive pages) ── */
  .filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-parchment);
  }
  .filter-pills {
    display: flex;
    background: var(--color-latte);
    border: 1px solid var(--color-parchment);
    border-radius: 0.875rem;
    padding: 3px;
    gap: 0;
  }
  .filter-pill {
    padding: 0.3125rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-stone-dark);
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: var(--font-sans);
  }
  .filter-pill:hover:not(.active) { background: white; color: var(--color-espresso); }
  .filter-pill.active {
    background: var(--color-copper);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(180, 83, 9, 0.3);
  }
  .filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-stone-dark);
    cursor: pointer;
    user-select: none;
  }
  .filter-check input[type="checkbox"] {
    accent-color: var(--color-copper);
    width: 14px;
    height: 14px;
    cursor: pointer;
  }

  /* Canvas loading state */
  .canvas-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
  }

  /* Prevent canvas from collapsing to 0 height during HTMX swaps.
     Chart.js needs the container to have non-zero height before it can
     measure the aspect ratio. min-height is locked in JS before each swap. */
  #positioning-canvas, #supply-canvas, #warehouse-canvas, #weather-canvas {
    min-height: 200px;
  }

  /* Freshness badges */
  .freshness-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
  }
  .freshness-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--color-latte);
    border: 1px solid var(--color-parchment);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-stone);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
  }
  .freshness-badge:hover { background: var(--color-parchment); color: var(--color-espresso); }
  .freshness-badge strong { color: var(--color-espresso); font-weight: 600; }

  /* Sparkline chart container */
  .spark-chart {
    position: relative;
    max-height: 160px;
    overflow: hidden;
  }
  .spark-chart canvas {
    max-height: 160px !important;
  }

  /* Page masthead (deep-dive pages) */
  .page-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid var(--color-parchment);
    gap: 1rem;
    flex-wrap: wrap;
  }
  .page-masthead h1 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-espresso);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
  }
  .page-masthead-sub {
    font-size: 0.875rem;
    color: var(--color-stone);
    margin-top: 0.25rem;
  }

  /* HTMX loading indicators */
  .htmx-indicator {
    display: none;
  }
  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    display: inline;
  }

  /* Code blocks */
  code {
    @apply font-mono text-sm bg-latte px-1 py-0.5 rounded;
  }
}
