/* styles/main.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* YOUR ORIGINAL DARK THEME COLORS */
  --bg-body: #0b1020;      /* Deep Navy */
  --bg-card: #131a2b;      /* Panel Color */
  --bg-input: #0f1525;
  --border: #273352;
  --primary: #1a6bff;
  --text-main: #e9f0ff;
  --text-muted: #9fb0d0;
  --accent-hover: #2563eb;
}

* { box-sizing: border-box; outline: none; }

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  display: flex;
  height: 100vh;      /* Lock height to window size */
  overflow: hidden;   /* Disable body scrollbar */
}

/* Sidebar */
#app-sidebar {
  width: 260px;
  background-color: #080e1e; /* Deep Dark Blue */
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
}

/* Logo Area */
.sidebar-header {
  margin-bottom: 32px;
  padding: 0 8px;
}

.app-logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Navigation Menu */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 8px; /* Pill shape */
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 0.9rem;
}

.nav-icon {
  margin-right: 12px;
  font-size: 1.1rem;
  opacity: 0.7;
  transition: 0.2s;
}

/* Hover State - Subtle Lighten */
.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(4px); /* Little slide animation */
}
.nav-item:hover .nav-icon { opacity: 1; }

/* Active State - Blue Glow */
.nav-item.active {
  background-color: rgba(26, 107, 255, 0.15); /* Translucent Primary Blue */
  color: #fff;
  border-left: 3px solid var(--primary); /* Accent line */
}
.nav-item.active .nav-icon { opacity: 1; }

/* Footer Version Text */
.sidebar-version {
  margin-top: auto;
  padding-left: 12px;
  font-size: 0.75rem;
  color: #334155;
  font-family: monospace;
}

/* Main Content Layout - THE SCROLL FIX IS HERE */
#app-main {
  flex: 1;
  display: flex;
  flex-direction: column; /* Stack vertical */
  height: 100vh;          /* Full height */
  overflow: hidden;       /* No outer scroll */
}

header {
  height: 64px;
  border-bottom: 1px solid var(--border);
  background-color: rgba(13, 20, 38, 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  flex-shrink: 0; /* Header never shrinks */
}

.page-title { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.5px; }

/* Wrapper for Toolbar + Grid */
.content-wrapper {
  flex: 1;                /* Take all remaining height */
  display: flex;
  flex-direction: column; /* Stack them */
  padding: 20px;
  overflow: hidden;       /* Hide overflow here too */
}

.toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-shrink: 0; /* Toolbar never shrinks */
}

/* The Grid Container */
#itemsGrid {
  flex: 1;             /* Grow to fill space */
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px; /* Your original rounded corners */
  background-color: var(--bg-card);
  overflow: hidden;
}

/* Buttons & Inputs (Your Original Style) */
.btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
  transition: 0.2s;
  background: #10182b;
  color: #dbe7ff;
}
.btn-primary {
  background: linear-gradient(180deg, #1a6bff, #1246a3);
  border-color: #2563eb;
  color: white;
}
.btn:hover { border-color: var(--primary); }

input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 8px 12px;
  border-radius: 8px;
}

/* --- Tabulator: Option 2 (Professional Spreadsheet / Zebra) --- */

.tabulator {
  border: none !important;
  background-color: transparent !important;
}

/* 1. The Header - Light Background / Dark Text */
.tabulator-header {
  background-color: #e2e8f0 !important;   /* Light Gray Background */
  border-bottom: 2px solid #94a3b8 !important; /* Darker Gray Border */
  color: #0f172a !important;               /* Dark Navy Text */
  font-weight: 700;
  font-size: 0.9rem;
}

/* Fix the Sort Arrows so they are also dark to match text */
.tabulator-col-sorter {
  color: #0f172a !important;
}

/* 2. The Filter Inputs (Update to stand out against light header) */
.tabulator-header-filter input {
  background-color: #ffffff !important;    /* White Background */
  border: 1px solid #cbd5e1 !important;    /* Light Gray Border */
  color: #334155 !important;               /* Dark Slate Text */
  border-radius: 4px;
  padding: 4px 8px;
}
.tabulator-header-filter input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}

/* 3. Rows & Zebra Striping */
/* Odd Rows (Darker) */
.tabulator-row {
  background-color: #0b1020 !important; /* Matches your main background */
  border-bottom: 1px solid #1e293b !important;
  color: #dbe7ff !important;
  font-size: 0.85rem;
}

/* Even Rows (Lighter) - This creates the Zebra effect */
.tabulator-row.tabulator-row-even {
  background-color: #111729 !important; /* Subtle visual step up */
}

/* 4. Borders (The "Spreadsheet" grid look) */
.tabulator-cell {
  border-right: 1px solid #1e293b !important; /* Vertical lines between columns */
  padding: 6px 10px !important; /* Comfortable spacing */
}

/* 5. Interaction (Hover & Select) */
.tabulator-row:hover {
  background-color: #1f2937 !important; /* Distinct hover state */
  cursor: pointer;
}

.tabulator-row.tabulator-selected {
  background-color: rgba(37, 99, 235, 0.15) !important; /* Blue tint selection */
  border-left: 3px solid var(--primary) !important; /* Blue marker on left */
}

/* Fix for the "frozen" SKU column to match the zebra striping */
.tabulator-row .tabulator-cell.tabulator-frozen {
  border-right: 2px solid #334155 !important; /* Stronger divider for frozen col */
}
/* Ensure frozen column background matches the row it sits on */
.tabulator-row.tabulator-row-even .tabulator-cell.tabulator-frozen {
  background-color: #111729 !important; 
}
.tabulator-row .tabulator-cell.tabulator-frozen {
  background-color: #0b1020 !important;
}