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

/* Tailwind directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Light theme - clean and modern */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 217 91% 60%; /* Neutral blue */
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 217 91% 60%;
    --radius: 0.5rem;
    
    /* Custom theme colors */
    --color-intelligent: 271 50% 60%; /* Purple for intelligent templates */
    --color-activity-read: 142 71% 45%; /* Green */
    --color-activity-write: 217 91% 60%; /* Blue */
    --color-activity-inactive: 0 0% 45%;
    --color-success: 142 71% 45%;
    --color-warning: 38 92% 50%;
    --color-error: 0 84% 60%;
    --color-info: 217 91% 60%;
  }

  .dark {
    /* Dark theme - oxide-inspired */
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 217 91% 60%;
    
    /* Custom dark theme colors */
    --color-intelligent: 271 50% 70%;
    --color-activity-read: 142 71% 55%;
    --color-activity-write: 217 91% 70%;
    --color-activity-inactive: 0 0% 55%;
    --color-success: 142 71% 55%;
    --color-warning: 38 92% 60%;
    --color-error: 0 84% 70%;
    --color-info: 217 91% 70%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom utility classes */
@layer utilities {
  /* Animations */
  @keyframes in {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  .animate-in {
    animation: in 0.2s ease-out;
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  /* Scrollbar styling */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground)) transparent;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: hsl(var(--muted-foreground));
    border-radius: 3px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: hsl(var(--foreground) / 0.5);
  }
}

/* Component-specific styles */
@layer components {
  /* Card styles */
  .card-gradient {
    @apply bg-gradient-to-br from-card to-muted/50;
  }

  /* Button styles */
  .btn-gradient {
    @apply bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70;
  }

  /* Status indicators */
  .status-online {
    @apply bg-green-500 animate-pulse;
  }

  .status-offline {
    @apply bg-red-500;
  }

  .status-warning {
    @apply bg-yellow-500 animate-pulse;
  }
}

/* ============================================================================
   DataTable Styles - Outside @layer for proper CSS specificity
   These styles ensure DataTable components work correctly without users
   needing to battle Tailwind specificity issues.
   ============================================================================ */

/* DataTablePage: Search bar should not be full width */
.data-table-page-header .w-full.sm\:w-auto {
  width: auto !important;
  min-width: 200px !important;
  max-width: 320px !important;
  flex-shrink: 0 !important;
}

/* DataTablePage: Header padding */
.data-table-page-header {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1rem !important;
}

/* Sticky checkbox column (left side) */
.sticky-actions-table thead tr th:first-child:has(input[type="checkbox"]),
.sticky-actions-table thead tr th.sticky-select-header {
  position: sticky !important;
  left: 0 !important;
  z-index: 32 !important;
  background-color: hsl(var(--muted)) !important;
}

.sticky-actions-table tbody tr td:first-child:has(input[type="checkbox"]),
.sticky-actions-table tbody tr td.sticky-select-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 6 !important;
  background-color: white !important;
}

/* Right border on checkbox column */
.sticky-actions-table thead tr th:first-child:has(input[type="checkbox"])::after,
.sticky-actions-table thead tr th.sticky-select-header::after,
.sticky-actions-table tbody tr td:first-child:has(input[type="checkbox"])::after,
.sticky-actions-table tbody tr td.sticky-select-cell::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: hsl(var(--border));
}

/* Sticky actions column (right side) */
.sticky-actions-table thead tr th:last-child {
  position: sticky !important;
  right: 0 !important;
  z-index: 20 !important;
  background-color: hsl(var(--muted)) !important;
}

.sticky-actions-table tbody tr td:last-child:not([colspan]) {
  position: sticky !important;
  right: 0 !important;
  z-index: 10 !important;
  background-color: white !important;
}

/* Left border on actions column */
.sticky-actions-table thead tr th:last-child::before,
.sticky-actions-table tbody tr td:last-child:not([colspan])::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: hsl(var(--border));
}

/* Column resize handles */
/*
 * Fixed layout makes the per-column width styles authoritative rather than mere
 * minimums, so dragging a resize handle actually grows AND shrinks the column.
 * DataTable sets an explicit table width from the visible columns, so the table
 * still overflows into the horizontal scroll container when needed.
 */
.resizable-table {
  table-layout: fixed;
}

/*
 * Clip overflowing body content so a shrunk column doesn't spill into its
 * neighbour. NOT applied to <th>: the header hosts the resize handle, which
 * intentionally overhangs the column edge (right: -6px) and must not be clipped.
 */
.resizable-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.resizable-table th {
  position: relative !important;
}

/*
 * Flexible spacer column: no fixed width, so under table-layout: fixed it soaks
 * up any leftover width when the columns are narrower than the container (and
 * collapses to 0 when they overflow). Keeps resized columns at their exact
 * widths while the sticky actions column stays pinned to the right edge.
 */
.data-table-spacer {
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.resize-handle {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  right: -6px !important;
  width: 12px !important;
  z-index: 50 !important;
  cursor: col-resize !important;
  touch-action: none;
  transition: background-color 0.15s;
}

.resize-handle:hover,
.resize-handle[data-resizing="true"] {
  background-color: hsl(var(--border) / 0.3) !important;
}

.resize-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background-color: hsl(var(--border) / 0.5);
}

/* DataTable scroll container */
.data-table-scroll-container {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

.data-table-scroll-container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.data-table-scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

.data-table-scroll-container::-webkit-scrollbar-thumb {
  background-color: hsl(var(--border));
  border-radius: 4px;
}

.data-table-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.5);
}

/* Sticky header */
.data-table-scroll-container thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
}

.data-table-scroll-container thead tr,
.data-table-scroll-container thead th {
  background-color: hsl(var(--muted)) !important;
}

/* Header bottom border - cohesive border instead of individual cell borders */
.data-table-scroll-container thead {
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.data-table-scroll-container thead th {
  border: none !important;
}

/* Remove top border from first body row to prevent double border with header */
.data-table-scroll-container tbody tr:first-child,
.data-table-scroll-container tbody tr:first-child td {
  border-top: none !important;
}

/* Empty state: container fills remaining space below table header */
.data-table-scroll-container:has(.empty-state-container) {
  display: flex;
  flex-direction: column;
  background-color: white;
}

.data-table-scroll-container:has(.empty-state-container) table {
  flex-shrink: 0;
}

.data-table-scroll-container .empty-state-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}