@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

/*
 * Stitch Design System — Precision Metric ERP
 * Custom Tailwind utilities for design token alignment.
 */

@layer base {
  body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Tabular numbers for monospaced data */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Custom thin scrollbar for sidebar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 5px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.2);
    border-radius: 9999px;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.35);
  }
}

@layer components {
  /* Stitch primary button */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-[#4F46E5] hover:bg-[#4338CA] focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:ring-offset-2 transition-colors duration-150;
  }

  /* Stitch secondary / outline button */
  .btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-[#CBD5E1] rounded-lg text-sm font-medium text-[#334155] bg-white hover:bg-[#F8FAFC] hover:text-[#0F172A] focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:ring-offset-2 transition-colors duration-150;
  }

  /* Stitch danger button */
  .btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-lg text-sm font-medium text-white bg-[#EF4444] hover:bg-[#DC2626] focus:outline-none focus:ring-2 focus:ring-[#EF4444] focus:ring-offset-2 transition-colors duration-150;
  }

  /* Stitch input field */
  .input-field {
    @apply block w-full border border-[#CBD5E1] rounded-lg h-10 px-3 text-sm text-[#0F172A] bg-white placeholder-[#94A3B8] focus:border-[#4F46E5] focus:ring-[0_0_0_3px_rgba(79,70,229,0.15)] focus:outline-none transition-shadow duration-150;
  }

  /* Stitch textarea */
  .textarea-field {
    @apply block w-full border border-[#CBD5E1] rounded-lg px-3 py-2 text-sm text-[#0F172A] bg-white placeholder-[#94A3B8] focus:border-[#4F46E5] focus:ring-[0_0_0_3px_rgba(79,70,229,0.15)] focus:outline-none transition-shadow duration-150;
  }

  /* Stitch select field */
  .select-field {
    @apply block w-full border border-[#CBD5E1] rounded-lg h-10 px-3 text-sm text-[#0F172A] bg-white focus:border-[#4F46E5] focus:ring-[0_0_0_3px_rgba(79,70,229,0.15)] focus:outline-none transition-shadow duration-150;
  }

  /* Stitch checkbox */
  .checkbox-field {
    @apply h-[18px] w-[18px] rounded border-[#CBD5E1] text-[#4F46E5] focus:ring-[#4F46E5] focus:ring-[0_0_0_3px_rgba(79,70,229,0.15)];
  }

  /* Stitch form label */
  .form-label {
    @apply block text-[13px] font-medium text-[#334155] mb-1.5;
  }

  /* Stitch card / surface */
  .card {
    @apply bg-white border border-[#E2E8F0] rounded-xl;
  }

  /* Stitch card with padding */
  .card-padded {
    @apply bg-white border border-[#E2E8F0] rounded-xl p-6;
  }

  /* Stitch table wrapper */
  .table-wrapper {
    @apply border border-[#E2E8F0] rounded-xl overflow-hidden;
  }

  /* Stitch table */
  .stitch-table {
    @apply min-w-full divide-y divide-[#E2E8F0];
  }

  /* Stitch table header */
  .stitch-table thead {
    @apply bg-[#F8FAFC];
  }

  /* Stitch table header cell */
  .stitch-table th {
    @apply px-6 py-3 text-left text-[11px] font-semibold text-[#64748B] uppercase tracking-wider;
  }

  /* Stitch table body */
  .stitch-table tbody {
    @apply bg-white divide-y divide-[#E2E8F0];
  }

  /* Stitch table body row hover */
  .stitch-table tbody tr {
    @apply hover:bg-[#F1F5F9] transition-colors duration-75;
  }

  /* Stitch table body cell */
  .stitch-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-[#0F172A];
  }

  /* Stitch status badge (pill) */
  .badge-active {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#ECFDF5] text-[#065F46];
  }

  .badge-pending {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#EFF6FF] text-[#1E40AF];
  }

  .badge-rejected {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#FEF2F2] text-[#991B1B];
  }

  .badge-inactive {
    @apply inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#F1F5F9] text-[#475569];
  }

  /* Status dot indicator */
  .badge-dot {
    @apply w-1.5 h-1.5 rounded-full;
  }

  .badge-active .badge-dot { @apply bg-[#10B981]; }
  .badge-pending .badge-dot { @apply bg-[#3B82F6]; }
  .badge-rejected .badge-dot { @apply bg-[#EF4444]; }
  .badge-inactive .badge-dot { @apply bg-[#94A3B8]; }

  /* Stitch tab underline */
  .tab-active {
    @apply border-b-2 border-[#4F46E5] text-[#4F46E5] font-medium;
  }

  .tab-inactive {
    @apply border-b-2 border-transparent text-[#64748B] hover:text-[#0F172A] hover:border-[#CBD5E1];
  }

  /* Flash notice (success) */
  .flash-notice {
    @apply bg-[#ECFDF5] border border-[#A7F3D0] rounded-xl p-4 flex items-start gap-3;
  }

  .flash-notice-text {
    @apply text-sm font-medium text-[#065F46];
  }

  /* Flash alert (error) */
  .flash-alert {
    @apply bg-[#FEF2F2] border border-[#FECACA] rounded-xl p-4 flex items-start gap-3;
  }

  .flash-alert-text {
    @apply text-sm font-medium text-[#991B1B];
  }

  /* Numeric data cell (JetBrains Mono) */
  .data-mono {
    @apply font-['JetBrains_Mono'] tabular-nums text-sm;
  }

  /* Page heading */
  .page-heading {
    @apply text-[28px] font-bold text-[#0F172A] tracking-tight;
  }

  /* Page subtitle */
  .page-subtitle {
    @apply text-sm text-[#64748B] mt-1;
  }

  /* Section heading */
  .section-heading {
    @apply text-[16px] font-semibold text-[#0F172A] tracking-tight;
  }

  /* Stitch section card with colored header */
  .section-card {
    @apply bg-white border border-[#E2E8F0] rounded-xl overflow-hidden;
  }

  .section-card-header {
    @apply flex items-start justify-between pb-4 mb-4 border-b border-[#E2E8F0];
  }

  .section-card-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0;
  }

  .section-card-title {
    @apply text-[16px] font-semibold text-[#0F172A];
  }

  .section-card-desc {
    @apply text-[13px] text-[#64748B] mt-0.5;
  }

  /* Stitch input with leading icon */
  .input-icon-wrapper {
    @apply relative;
  }

  .input-icon-wrapper .input-field {
    @apply pl-10;
  }

  .input-icon-wrapper .input-icon {
    @apply absolute inset-y-0 left-0 flex items-center pl-3 text-[#94A3B8] pointer-events-none;
  }

  /* Stitch select with custom arrow */
  .select-wrapper {
    @apply relative;
  }

  .select-wrapper .select-field {
    @apply appearance-none pr-10 cursor-pointer;
  }

  .select-wrapper .select-arrow {
    @apply absolute right-2.5 top-2.5 pointer-events-none text-[#94A3B8];
  }

  /* Stitch toggle switch */
  .toggle-switch {
    @apply relative inline-flex h-6 w-11 items-center rounded-full cursor-pointer;
  }

  .toggle-switch-input {
    @apply sr-only;
  }

  .toggle-switch-track {
    @apply w-11 h-6 bg-[#CBD5E1] rounded-full;
    transition: background-color 0.2s;
  }

  .toggle-switch-track::after {
    content: '';
    @apply absolute top-[2px] left-[2px] bg-white rounded-full h-5 w-5;
    transition: transform 0.2s;
  }

  .toggle-switch-input:checked + .toggle-switch-track {
    @apply bg-[#4F46E5];
  }

  .toggle-switch-input:checked + .toggle-switch-track::after {
    transform: translateX(20px);
  }

  .toggle-switch-input:focus + .toggle-switch-track {
    @apply outline-none ring-2 ring-[#4F46E5] ring-offset-2;
  }

  /* Stitch radio pill */
  .radio-pill {
    @apply flex items-center gap-3 p-3 rounded-lg border border-[#E2E8F0] bg-white hover:bg-[#F8FAFC] cursor-pointer transition-colors has-[:checked]:bg-[#EEF2FF] has-[:checked]:border-[#4F46E5];
  }

  .radio-pill-input {
    @apply w-4 h-4 text-[#4F46E5] focus:ring-[#4F46E5] focus:ring-[0_0_0_3px_rgba(79,70,229,0.15)];
  }

  /* Stitch subheader bar */
  .subheader-bar {
    @apply w-full bg-white px-8 py-4 border-b border-[#E2E8F0] shadow-sm;
  }

  /* Stitch context sidebar card */
  .context-card {
    @apply bg-white border border-[#E2E8F0] rounded-xl p-4;
  }

  .context-card-header {
    @apply flex items-center justify-between pb-3 mb-3 border-b border-[#E2E8F0];
  }

  .metric-tile {
    @apply p-4 rounded-xl bg-[#F8FAFC];
  }

  .metric-label {
    @apply text-[11px] font-semibold uppercase tracking-wider text-[#64748B];
  }

  .metric-value {
    @apply text-[28px] font-bold text-[#0F172A] leading-tight;
  }

  .metric-sub {
    @apply text-[12px] text-[#64748B];
  }

  /* Stitch action toolbar button */
  .action-toolbar-btn {
    @apply inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors;
  }

  /* Stitch bottom action bar */
  .bottom-action-bar {
    @apply p-4 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] flex flex-col sm:flex-row items-center justify-between gap-4;
  }

  /* ============================================
     Data Table System — Row States
     ============================================ */

  /* Selected row (checkbox checked) */
  .row-selected {
    @apply bg-[#EEF2FF];
  }

  /* Alert row (critical / SLA breach) */
  .row-alert {
    @apply bg-[#FEF2F2]/40 border-l-4 border-l-[#EF4444];
  }

  /* Disabled / expired row */
  .row-disabled {
    @apply opacity-60 text-[#94A3B8];
  }

  .row-disabled td {
    @apply text-[#94A3B8];
  }

  .row-disabled a {
    @apply text-[#94A3B8] pointer-events-none;
  }

  /* ============================================
     Data Table System — Sortable Headers
     ============================================ */

  .sortable-header {
    @apply cursor-pointer select-none;
  }

  .sortable-header:hover {
    @apply text-[#0F172A];
  }

  .sort-icon {
    @apply w-3.5 h-3.5 text-[#94A3B8] transition-colors;
  }

  .sortable-header:hover .sort-icon {
    @apply text-[#64748B];
  }

  .sort-icon-active {
    @apply text-[#4F46E5];
  }

  /* ============================================
     Data Table System — Filter Chips
     ============================================ */

  .filter-chip {
    @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border transition-colors;
  }

  .filter-chip-brand {
    @apply bg-[#EEF2FF] border-[#C7D2FE] text-[#4F46E5];
  }

  .filter-chip-brand .filter-chip-remove:hover {
    @apply text-[#3730A3];
  }

  .filter-chip-emerald {
    @apply bg-[#ECFDF5] border-[#A7F3D0] text-[#065F46];
  }

  .filter-chip-emerald .filter-chip-remove:hover {
    @apply text-[#064E3B];
  }

  .filter-chip-remove {
    @apply hover:text-[#991B1B] transition-colors;
  }

  /* ============================================
     Data Table System — Pagination
     ============================================ */

  .table-footer {
    @apply py-3.5 px-5 bg-[#F8FAFC] border-t border-[#E2E8F0] flex flex-wrap items-center justify-between gap-4 text-xs text-[#64748B];
  }

  .pagination-btn {
    @apply w-8 h-8 rounded-lg flex items-center justify-center text-xs font-medium transition-colors;
  }

  .pagination-btn-active {
    @apply bg-[#4F46E5] text-white shadow-xs;
  }

  .pagination-btn-default {
    @apply bg-white border border-[#E2E8F0] text-[#64748B] hover:bg-[#F1F5F9] hover:text-[#0F172A];
  }

  .pagination-btn-disabled {
    @apply opacity-50 pointer-events-none;
  }

  .selection-bar {
    @apply flex items-center gap-2 text-[#4F46E5] bg-[#EEF2FF] px-2.5 py-1 rounded-lg border border-[#C7D2FE] font-medium text-xs;
  }

  /* ============================================
     Data Table System — Skeleton Loading
     ============================================ */

  .skeleton-pulse {
    @apply animate-pulse bg-[#E2E8F0] rounded;
  }

  .skeleton-row {
    @apply flex items-center gap-3 py-4 px-6;
  }

  .skeleton-cell {
    @apply h-4 rounded animate-pulse bg-[#E2E8F0];
  }

  /* ============================================
     Data Table System — View Switcher
     ============================================ */

  .view-switcher {
    @apply flex items-center p-0.5 bg-[#F1F5F9] rounded-lg border border-[#E2E8F0] text-[#94A3B8];
  }

  .view-switcher-btn {
    @apply p-1.5 rounded-md transition-colors;
  }

  .view-switcher-btn-active {
    @apply bg-white text-[#4F46E5] shadow-xs;
  }

  .view-switcher-btn-inactive {
    @apply hover:text-[#64748B];
  }

  /* ============================================
     Data Table System — Facet Filters
     ============================================ */

  .facet-filter-btn {
    @apply px-3 py-2 rounded-xl bg-[#F8FAFC] border border-[#E2E8F0] text-xs font-medium text-[#64748B] flex items-center gap-2 hover:bg-[#F1F5F9] transition-colors cursor-pointer;
  }

  .facet-filter-btn strong {
    @apply text-[#0F172A] font-semibold;
  }

  /* ============================================
     Data Table System — Status Tabs (Pills)
     ============================================ */

  .status-tabs {
    @apply flex items-center gap-1 bg-[#F1F5F9] p-1 rounded-xl;
  }

  .status-tab {
    @apply px-3.5 py-1.5 rounded-lg text-xs font-medium transition-colors cursor-pointer;
  }

  .status-tab-active {
    @apply bg-white text-[#4F46E5] shadow-sm font-bold;
  }

  .status-tab-inactive {
    @apply text-[#64748B] hover:text-[#0F172A];
  }

  .status-tab-count {
    @apply ml-1.5 px-1.5 py-0.5 rounded-full text-[10px] font-mono font-bold;
  }

  /* ============================================
     Data Table System — Empty State
     ============================================ */

  .empty-state-icon {
    @apply w-12 h-12 rounded-2xl bg-[#EEF2FF] border border-[#C7D2FE] flex items-center justify-center text-[#4F46E5];
  }

  .empty-state-icon-muted {
    @apply w-12 h-12 rounded-2xl bg-[#F1F5F9] flex items-center justify-center text-[#94A3B8];
  }

  /* ============================================
     Data Table System — Kebab Menu
     ============================================ */

  .kebab-btn {
    @apply p-1 rounded-lg text-[#94A3B8] hover:text-[#64748B] hover:bg-[#F1F5F9] transition-colors;
  }
}