/* ============================================================================
   tailwind-shell.css
   ----------------------------------------------------------------------------
   Static, pre-compiled replacement for the utility classes the original
   index.html injected at runtime via the Tailwind JIT CDN. By serving these
   rules as static CSS we avoid shipping a ~300KB in-browser JIT engine and
   the long-running class-lookup work it does on first paint.

   Only the utilities actually used by the app are included, hand-written
   with the smallest possible selectors.
   ============================================================================ */

/* --- color tokens (oklch equivalents of Tailwind's slate ramp) --- */
:root {
  --tw-slate-50:  oklch(0.98 0.005 85);
  --tw-slate-100: oklch(0.95 0.01 85);
  --tw-slate-200: oklch(0.88 0.015 85);
  --tw-slate-300: oklch(0.78 0.02 85);
  --tw-slate-400: oklch(0.68 0.02 85);
  --tw-slate-500: oklch(0.58 0.02 85);
  --tw-slate-600: oklch(0.48 0.02 85);
  --tw-slate-700: oklch(0.38 0.02 85);
  --tw-slate-800: oklch(0.28 0.02 85);
  --tw-slate-900: oklch(0.20 0.015 85);
  --tw-slate-950: oklch(0.15 0.012 85);
  --accent: #f4b400;
  --accent-hover: #e0a600;
}

/* --- base shell: dark background, light text --- */
html, body, #app { min-height: 100vh; }
html, body {
  background-color: var(--tw-slate-950);
  color: var(--tw-slate-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  margin: 0;
}
#app { background-color: var(--tw-slate-950); color: var(--tw-slate-100); }
.container, .sidebar-container, .header-content, .status-panel,
.upload-settings, .main-container {
  background-color: var(--tw-slate-950);
}
.container { min-height: 100vh; color: var(--tw-slate-100); }
.antialiased { -webkit-font-smoothing: antialiased; }

/* --- layout primitives --- */
.min-h-screen { min-height: 100vh; }
.w-full { width: 100%; }
.max-w-1600 { max-width: 1600px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.gap-2 { gap: 0.5rem; }
.gap-6 { gap: 1.5rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-left { text-align: left; }
.overflow-hidden { overflow: hidden; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.border-none { border: none; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.45); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); }
.shadow-black\/50 { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); }
.bg-slate-900 { background-color: var(--tw-slate-900); }
.bg-slate-950 { background-color: var(--tw-slate-950); }
.bg-slate-950\/70 { background-color: color-mix(in oklch, var(--tw-slate-950) 70%, transparent); }
.bg-slate-900\/50 { background-color: color-mix(in oklch, var(--tw-slate-900) 50%, transparent); }
.text-slate-100 { color: var(--tw-slate-100); }
.text-slate-200 { color: var(--tw-slate-200); }
.text-slate-300 { color: var(--tw-slate-300); }
.text-slate-400 { color: var(--tw-slate-400); }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.font-medium { font-weight: 500; }
.tracking-tight { letter-spacing: -0.025em; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border { border-width: 1px; border-style: solid; }
.border-slate-800 { border-color: var(--tw-slate-800); }
.border-slate-800\/50 { border-color: color-mix(in oklch, var(--tw-slate-800) 50%, transparent); }
.border-slate-700 { border-color: var(--tw-slate-700); }
.ring-1 { box-shadow: inset 0 0 0 1px var(--tw-slate-800); }
.focus\:outline-none:focus { outline: none; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(244, 180, 0, 0.5); }
.hover\:bg-slate-700:hover { background-color: var(--tw-slate-700); }
.hover\:bg-slate-800:hover { background-color: var(--tw-slate-800); }
.hover\:bg-slate-800\/80:hover { background-color: color-mix(in oklch, var(--tw-slate-800) 80%, transparent); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.5); }

/* --- responsive grids --- */
.grid { display: grid; }
@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) {
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- element-plus overrides (only the ones still needed after app.css) --- */
.el-card,
.overview-card,
.chart-card,
.action-card,
.file-info-card,
.main-table,
.channel-group,
.channel-card,
.el-dropdown-menu,
.el-dialog {
  background-color: var(--tw-slate-900);
  border: none;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.4);
  color: var(--tw-slate-100);
}
.el-button {
  background-color: var(--tw-slate-800);
  color: var(--tw-slate-200);
  border: none;
  border-radius: 0.75rem;
  font-weight: 500;
}
.el-button:hover { background-color: var(--tw-slate-700); }
.el-button--primary {
  background-color: var(--accent) !important;
  color: #000 !important;
}
.el-button--primary:hover { background-color: var(--accent-hover) !important; }
.el-input__wrapper, .custom-select-trigger, .date-input, .el-select__wrapper {
  background-color: var(--tw-slate-950);
  color: var(--tw-slate-100);
  border-radius: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--tw-slate-800) !important;
  transition: box-shadow 0.15s ease;
}
.el-input__wrapper.is-focus, .el-select__wrapper.is-focus,
.custom-select-trigger:focus, .date-input:focus {
  box-shadow: 0 0 0 2px rgba(244, 180, 0, 0.5) !important;
}
.el-dropdown-menu__item {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--tw-slate-300);
  font-weight: 500;
}
.el-dropdown-menu__item:hover { background-color: var(--tw-slate-800); }
.el-pagination, .pagination-container { color: var(--tw-slate-400); }

/* --- friendlier scrollbars (cheap, no images) --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tw-slate-800); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--tw-slate-700); }

/* --- accessibility helper --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}