/* ============================================================================
   Leafhea Jakarta — App CSS
   Match React v18 mockup styling 1:1
   Mint background (#f4faf6) + Pink primary (#db2777) + Fraunces serif headings
   ============================================================================ */

/* Tabular numbers for currency, dates, IDs */
.num { font-variant-numeric: tabular-nums; }

/* Fraunces serif headings (alias for font-display) */
.font-display, .font-serif { font-family: 'Fraunces', Georgia, serif; }

/* ============================================================================
   CARD — match v18 React: white bg, mint-100 border, 12px radius
   ============================================================================ */
.card {
  background: white;
  border: 1px solid #d1fae5;
  border-radius: 12px;
}

.card-soft {
  background: #f4faf6;
  border: 1px solid #d1fae5;
  border-radius: 12px;
}

/* ============================================================================
   BUTTONS — match v18 React mockup exactly
   ============================================================================ */
.btn-primary {
  background: #db2777;
  color: white;
  transition: all 0.2s;
  font-weight: 500;
}
.btn-primary:hover { background: #be185d; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: white;
  border: 1px solid #d6d3d1;
  color: #44403c;
  transition: all 0.15s;
  font-weight: 500;
}
.btn-secondary:hover { background: #fafaf9; }

.btn-danger {
  background: #dc2626;
  color: white;
  transition: all 0.15s;
}
.btn-danger:hover { background: #b91c1c; }

.btn-outline-emerald {
  background: white;
  border: 1px solid #047857;
  color: #047857;
  transition: all 0.15s;
}
.btn-outline-emerald:hover { background: #ecfdf5; }

/* ============================================================================
   FORM INPUTS — match v18 React: 16px on mobile, 14px on desktop
   ============================================================================ */
.input,
.input-base,
input[type="text"]:not([class*="w-"]):not([class*="h-"]),
input[type="email"]:not([class*="w-"]):not([class*="h-"]),
input[type="password"]:not([class*="w-"]):not([class*="h-"]),
input[type="number"]:not([class*="w-"]):not([class*="h-"]),
input[type="tel"]:not([class*="w-"]):not([class*="h-"]),
input[type="search"]:not([class*="w-"]):not([class*="h-"]),
input[type="date"]:not([class*="w-"]):not([class*="h-"]),
input[type="time"]:not([class*="w-"]):not([class*="h-"]),
input[type="datetime-local"]:not([class*="w-"]):not([class*="h-"]),
input[type="url"]:not([class*="w-"]):not([class*="h-"]),
select:not([class*="w-"]):not([class*="h-"]),
textarea:not([class*="w-"]):not([class*="h-"]) {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 16px;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid #d6d3d1;
  border-radius: 0.5rem;
  background: white;
  color: #1c1917;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .input,
  .input-base,
  input[type="text"]:not([class*="w-"]):not([class*="h-"]),
  input[type="email"]:not([class*="w-"]):not([class*="h-"]),
  input[type="password"]:not([class*="w-"]):not([class*="h-"]),
  input[type="number"]:not([class*="w-"]):not([class*="h-"]),
  input[type="tel"]:not([class*="w-"]):not([class*="h-"]),
  input[type="search"]:not([class*="w-"]):not([class*="h-"]),
  input[type="date"]:not([class*="w-"]):not([class*="h-"]),
  input[type="time"]:not([class*="w-"]):not([class*="h-"]),
  input[type="datetime-local"]:not([class*="w-"]):not([class*="h-"]),
  input[type="url"]:not([class*="w-"]):not([class*="h-"]),
  select:not([class*="w-"]):not([class*="h-"]),
  textarea:not([class*="w-"]):not([class*="h-"]) {
    font-size: 14px;
  }
}

.input:focus,
.input-base:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #db2777;
  box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.15);
}

.input:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  background: #f5f5f4;
  color: #78716c;
  cursor: not-allowed;
}

/* Checkbox & radio — keep size consistent, bg-pink when checked */
input[type="checkbox"],
input[type="radio"] {
  width: 1rem !important;
  height: 1rem !important;
  accent-color: #db2777;
  cursor: pointer;
}

/* ============================================================================
   NAV TABS — match v18 React: emerald active, mint hover
   ============================================================================ */
.tab-btn {
  transition: all 0.2s ease;
}
.tab-btn[data-active="true"],
.tab-btn.active {
  background: #064e3b;
  color: #f4faf6;
}
.tab-btn:not([data-active="true"]):not(.active):hover {
  background: #d1fae5;
}

/* ============================================================================
   TABLES — softer styling
   ============================================================================ */
table.data-table {
  width: 100%;
  border-collapse: collapse;
}
table.data-table thead th {
  background: #f4faf6;
  color: #064e3b;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid #d1fae5;
}
table.data-table tbody td {
  padding: 0.625rem 0.75rem;
  border-top: 1px solid #f5f5f4;
  font-size: 0.875rem;
}
table.data-table tbody tr:hover {
  background: rgba(244, 250, 246, 0.7);
}

/* ============================================================================
   BADGES — soft pastel pill style
   ============================================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 500;
  border: 1px solid transparent;
}

/* ============================================================================
   FLASH MESSAGES — subtle alert bars
   ============================================================================ */
.flash-success {
  background: #d1fae5;
  border-left: 4px solid #047857;
  color: #064e3b;
}
.flash-error {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  color: #7f1d1d;
}
.flash-warning {
  background: #fef3c7;
  border-left: 4px solid #d97706;
  color: #78350f;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }
button, a { -webkit-tap-highlight-color: transparent; }

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   PRINT
   ============================================================================ */
@media print {
  header, footer, nav, .no-print, .toolbar { display: none !important; }
  body { background: white !important; }
  .card { border: none !important; box-shadow: none !important; }
}