/* Data Workspace Grid + Theme System
 * Lightweight CSS Grid utilities, spacing, typography, and dark theme tokens.
 * No build step required.
 */

:root {
  /* Color palette */
  --dw-bg: #0d1117;
  --dw-bg-elevated: #0f141c;
  --dw-bg-muted: #111821;
  --dw-surface: #161b22;
  --dw-surface-strong: #1c2330;
  --dw-border: #2b3543;
  --dw-border-strong: #3a4556;
  --dw-text: #e6edf3;
  --dw-text-muted: #9fb0c2;
  --dw-accent: #58a6ff;
  --dw-accent-strong: #4a8dd8;
  --dw-accent-soft: rgba(88, 166, 255, 0.16);
  --dw-success: #3fb950;
  --dw-danger: #f85149;
  --dw-warning: #c69026;
  --dw-card-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

  /* Spacing scale */
  --dw-space-1: 4px;
  --dw-space-2: 8px;
  --dw-space-3: 12px;
  --dw-space-4: 16px;
  --dw-space-5: 20px;
  --dw-space-6: 24px;
  --dw-space-7: 32px;
  --dw-space-8: 40px;

  /* Radii */
  --dw-radius-sm: 6px;
  --dw-radius: 10px;
  --dw-radius-lg: 14px;

  /* Typography */
  --dw-font-body: "Roboto", "Inter", system-ui, -apple-system, sans-serif;
  --dw-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --dw-font-size-xs: 12px;
  --dw-font-size-sm: 13px;
  --dw-font-size-md: 14px;
  --dw-font-size-lg: 16px;
  --dw-font-size-xl: 20px;
  --dw-line-height: 1.5;

  /* Grid */
  --dw-grid-gap: var(--dw-space-4);
  --dw-grid-columns: 12;
  --dw-max-width: 1400px;
}

/* Legacy variable bridge for existing components */
:root {
  --color-bg: var(--dw-bg);
  --color-bg-light: var(--dw-bg-muted);
  --color-bg-card: var(--dw-surface);
  --color-bg-hover: var(--dw-bg-muted);
  --color-border: var(--dw-border);
  --color-border-strong: var(--dw-border-strong);
  --color-text: var(--dw-text);
  --color-text-muted: var(--dw-text-muted);
  --color-primary: var(--dw-accent);
  --color-primary-strong: var(--dw-accent-strong);
  --color-success: var(--dw-success);
  --color-danger: var(--dw-danger);
  --bg-primary: var(--dw-bg);
  --bg-secondary: var(--dw-bg-elevated);
  --bg-tertiary: var(--dw-bg-muted);
  --border-primary: var(--dw-border);
  --border-secondary: var(--dw-border-strong);
  --text-primary: var(--dw-text);
  --text-muted: var(--dw-text-muted);
  --accent-primary: var(--dw-accent);
  --shadow-elevated: var(--dw-card-shadow);
  --radius-sm: var(--dw-radius-sm);
  --radius-md: var(--dw-radius);
  --radius-lg: var(--dw-radius-lg);
  --transition-base: 150ms ease;
}

/* Layout containers */
.dw-app-shell {
  min-height: 100vh;
  background: var(--dw-bg);
  color: var(--dw-text);
  font-family: var(--dw-font-body);
}

.dw-shell {
  width: 100%;
  max-width: var(--dw-max-width);
  margin: 0 auto;
  padding: var(--dw-space-6) var(--dw-space-5) var(--dw-space-8);
}

.dw-grid {
  display: grid;
  grid-template-columns: repeat(var(--dw-grid-columns), minmax(0, 1fr));
  gap: var(--dw-grid-gap);
}

.dw-grid.gap-tight {
  gap: var(--dw-space-3);
}

.dw-grid.gap-loose {
  gap: var(--dw-space-6);
}

.dw-col-span-12 { grid-column: span 12; }
.dw-col-span-9  { grid-column: span 9; }
.dw-col-span-8  { grid-column: span 8; }
.dw-col-span-6  { grid-column: span 6; }
.dw-col-span-4  { grid-column: span 4; }
.dw-col-span-3  { grid-column: span 3; }
.dw-col-span-2  { grid-column: span 2; }

@media (max-width: 1200px) {
  .dw-col-span-9,
  .dw-col-span-8 { grid-column: span 12; }
}

@media (max-width: 960px) {
  .dw-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dw-col-span-6 { grid-column: span 6; }
  .dw-col-span-4 { grid-column: span 6; }
  .dw-col-span-3 { grid-column: span 3; }
}

@media (max-width: 720px) {
  .dw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dw-col-span-3,
  .dw-col-span-2 { grid-column: span 4; }
}

@media (max-width: 520px) {
  .dw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dw-col-span-4,
  .dw-col-span-3,
  .dw-col-span-2 { grid-column: span 2; }
}

/* Cards & panels */
.dw-card,
.dw-panel {
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-card-shadow);
  padding: var(--dw-space-5);
}

.dw-card.compact,
.dw-panel.compact { padding: var(--dw-space-4); }

.dw-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dw-space-3);
  margin-bottom: var(--dw-space-3);
}

.dw-panel-title {
  font-size: var(--dw-font-size-lg);
  font-weight: 600;
  color: var(--dw-text);
}

.dw-muted {
  color: var(--dw-text-muted);
}

/* Buttons */
.dw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dw-space-2);
  padding: var(--dw-space-2) var(--dw-space-4);
  border-radius: var(--dw-radius-sm);
  border: 1px solid var(--dw-border);
  background: var(--dw-bg-muted);
  color: var(--dw-text);
  font-weight: 600;
  font-size: var(--dw-font-size-md);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.dw-btn:hover { background: var(--dw-surface); border-color: var(--dw-border-strong); }
.dw-btn:active { transform: translateY(1px); }
.dw-btn-primary {
  background: linear-gradient(135deg, var(--dw-accent) 0%, var(--dw-accent-strong) 100%);
  border-color: var(--dw-accent-strong);
  color: #0b1220;
}

.dw-btn-danger {
  background: var(--dw-danger);
  border-color: var(--dw-danger);
  color: #fff;
}

.dw-btn-danger:hover {
  box-shadow: 0 6px 16px rgba(248, 81, 73, 0.25);
}

.dw-btn-ghost {
  background: transparent;
  border-color: var(--dw-border);
}

.dw-btn-secondary {
  background: var(--dw-bg-muted);
  border-color: var(--dw-border-strong);
}

.dw-btn-full { width: 100%; }
.dw-btn-sm { padding: var(--dw-space-1) var(--dw-space-3); font-size: var(--dw-font-size-sm); }
.dw-btn-icon { width: 36px; height: 36px; padding: 0; }

/* Tables */
.dw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dw-font-size-md);
  color: var(--dw-text);
}

.dw-table th,
.dw-table td {
  padding: var(--dw-space-3) var(--dw-space-4);
  border-bottom: 1px solid var(--dw-border);
}

.dw-table thead th {
  background: var(--dw-bg-muted);
  font-weight: 600;
}

.dw-table-striped tbody tr:nth-child(every odd) {
  background: var(--dw-bg-muted);
}

.dw-table-hover tbody tr:hover {
  background: var(--dw-accent-soft);
}

.dw-sortable {
  cursor: pointer;
}

/* Modals */
.dw-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 13, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(6px);
}

/* Support for stacked modals - higher z-index will be set inline */
.dw-modal-overlay[style*="z-index"] {
  /* Inline style takes precedence */
}

.dw-modal-overlay.is-visible { display: flex; }

.dw-modal {
  background: var(--dw-surface-strong);
  border: 1px solid var(--dw-border-strong);
  border-radius: var(--dw-radius-lg);
  box-shadow: var(--dw-card-shadow);
  max-width: 760px;
  width: min(90vw, 760px);
  padding: var(--dw-space-6);
  display: grid;
  gap: var(--dw-space-4);
  animation: dw-fade-in 160ms ease, dw-pop 160ms ease;
}

.dw-modal.wide { max-width: 960px; }
.dw-modal.narrow { max-width: 520px; }

.dw-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dw-space-3);
}

.dw-modal-title {
  font-size: var(--dw-font-size-xl);
  font-weight: 700;
}

.dw-modal-actions {
  display: flex;
  gap: var(--dw-space-3);
  justify-content: flex-end;
}

.dw-modal-body {
  display: grid;
  gap: var(--dw-space-3);
  color: var(--dw-text-muted);
  line-height: var(--dw-line-height);
}

.dw-modal-body p {
  margin: 0;
  color: var(--dw-text);
}

.dw-modal-overlay.closing { animation: dw-fade-out 140ms ease forwards; }
.dw-modal.closing { animation: dw-fade-out 140ms ease, dw-slide-down 140ms ease; }

@keyframes dw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dw-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes dw-pop {
  from { transform: translateY(8px) scale(0.98); }
  to { transform: translateY(0) scale(1); }
}

@keyframes dw-slide-down {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(6px) scale(0.98); }
}

/* Utilities */
.dw-hidden { display: none !important; }
.dw-flex { display: flex; }
.dw-inline-flex { display: inline-flex; }
.dw-block { display: block; }
.dw-column { flex-direction: column; }
.dw-align-center { align-items: center; }
.dw-leading-tight { line-height: 1.2; }
.dw-w-full { width: 100%; }
.dw-mt-1 { margin-top: var(--dw-space-1); }
.dw-mt-2 { margin-top: var(--dw-space-2); }
.dw-mt-3 { margin-top: var(--dw-space-3); }
.dw-mt-4 { margin-top: var(--dw-space-4); }
.dw-mb-2 { margin-bottom: var(--dw-space-2); }
.dw-mb-3 { margin-bottom: var(--dw-space-3); }
.dw-mb-0 { margin-bottom: 0; }
.dw-mr-2 { margin-right: var(--dw-space-2); }
.dw-p-0 { padding: 0; }
.dw-p-3 { padding: var(--dw-space-3); }
.dw-gap-2 { gap: var(--dw-space-2); }
.dw-gap-3 { gap: var(--dw-space-3); }
.dw-gap-4 { gap: var(--dw-space-4); }
.dw-text-xs { font-size: var(--dw-font-size-xs); }
.dw-text-sm { font-size: var(--dw-font-size-sm); }
.dw-text-center { text-align: center; }
.dw-scroll {
  overflow: auto;
  scrollbar-color: var(--dw-border-strong) var(--dw-bg-muted);
}

.dw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--dw-space-2);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--dw-border);
  background: var(--dw-bg-muted);
  color: var(--dw-text-muted);
  font-size: var(--dw-font-size-sm);
}

.dw-status {
  display: inline-flex;
  align-items: center;
  gap: var(--dw-space-2);
}

.dw-status.success { color: var(--dw-success); }
.dw-status.danger { color: var(--dw-danger); }
.dw-status.warning { color: var(--dw-warning); }

/* Form controls */
.dw-input, .dw-select, .dw-textarea {
  width: 100%;
  background: var(--dw-bg-muted);
  color: var(--dw-text);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius-sm);
  padding: var(--dw-space-3);
  font-size: var(--dw-font-size-md);
}

.dw-input:focus,
.dw-select:focus,
.dw-textarea:focus {
  outline: 2px solid var(--dw-accent-soft);
  border-color: var(--dw-accent-strong);
}

.dw-label {
  font-weight: 600;
  font-size: var(--dw-font-size-sm);
  color: var(--dw-text);
}

.dw-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dw-space-3);
}

.dw-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--dw-space-1);
  padding: 2px 8px;
  border-radius: var(--dw-radius-sm);
  background: var(--dw-bg-muted);
  border: 1px solid var(--dw-border);
  font-size: var(--dw-font-size-sm);
}

/* Standardized host containers */
.dw-section {
  display: grid;
  gap: var(--dw-space-4);
}

.dw-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dw-space-3);
}

.dw-section-title {
  font-size: var(--dw-font-size-xl);
  font-weight: 700;
}

/* Data Workspace layout retrofit */
.data-workspace-content {
  display: grid;
  gap: var(--dw-space-6);
}

.workspace-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dw-space-4);
}

.workspace-upload { grid-column: span 5; }
.workspace-preview { grid-column: span 7; }

@media (max-width: 960px) {
  .workspace-upload,
  .workspace-preview { grid-column: span 12; }
}

.tools-container {
  display: grid;
  gap: var(--dw-space-5);
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dw-space-4);
}

.tool-card {
  background: var(--dw-surface);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  padding: var(--dw-space-4);
  display: grid;
  gap: var(--dw-space-2);
  color: var(--dw-text);
  text-decoration: none;
  box-shadow: var(--dw-card-shadow);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--dw-border-strong);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.tool-icon {
  font-size: 1.6rem;
}

.tool-name {
  font-size: var(--dw-font-size-lg);
  margin: 0;
}

.tool-description {
  color: var(--dw-text-muted);
  margin: 0;
}