/* =============================================================================
   DAZZLE Semantic Layer

   Thin semantic aliases on top of DaisyUI + Tailwind.
   This layer provides:
   1. App shell structure (.dz-app, .dz-app__main)
   2. Semantic workspace/panel classes
   3. Custom semantic attributes for LLM-readability

   DaisyUI provides: btn, input, select, table, card, alert, badge, loading, etc.
   Tailwind provides: flex, grid, gap-*, p-*, m-*, text-*, bg-base-*, etc.
   ============================================================================= */

/* =============================================================================
   App Shell - Root layout structure
   ============================================================================= */

#app,
.dz-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dz-app__header {
  /* Use DaisyUI navbar inside this */
}

.dz-app__main {
  flex: 1;
  padding: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 640px) {
  .dz-app__main {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .dz-app__main {
    padding: 2.5rem 3rem;
  }
}

.dz-app__sidebar {
  /* Use DaisyUI drawer inside this */
}

.dz-app__footer {
  /* Use DaisyUI footer inside this */
}

/* =============================================================================
   Workspace Semantic Classes

   These provide semantic meaning for LLM operations while
   leveraging DaisyUI/Tailwind for actual styling.
   ============================================================================= */

/* Workspace container - a logical grouping of related UI */
.dz-workspace {
  /* Typically a DaisyUI card or just a container */
}

/* Metric card - for displaying KPIs/stats */
.dz-metric-card {
  /* Use DaisyUI stats component */
}

/* List panel - for entity listings */
.dz-list-panel {
  /* Use DaisyUI card + table */
}

/* Detail panel - for entity detail views */
.dz-detail-panel {
  /* Use DaisyUI card */
}

/* Form panel - for create/edit forms */
.dz-form-panel {
  /* Use DaisyUI card + form elements */
}

/* =============================================================================
   Semantic Label Component

   For form labels - extends DaisyUI's label
   ============================================================================= */

.dz-field-label {
  font-weight: 500;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  display: block;
}

.dz-field-label--required::after {
  content: " *";
  color: oklch(var(--er));
}

/* =============================================================================
   Text Utilities (semantic variants)
   ============================================================================= */

.dz-text-muted {
  opacity: 0.7;
}

.dz-text-label {
  font-weight: 500;
  font-size: 0.875rem;
}

/* =============================================================================
   Semantic Data Attributes

   These are used by the DNR system for semantic DOM identification.
   They don't provide styling but enable LLM/automation to understand the UI.

   [data-dazzle-entity]    - Entity name (e.g., "Task")
   [data-dazzle-field]     - Field identifier (e.g., "Task.title")
   [data-dazzle-action]    - Action identifier (e.g., "Task.create")
   [data-dazzle-view]      - View name (e.g., "task_list")
   [data-dazzle-form]      - Form entity
   [data-dazzle-table]     - Table entity
   ============================================================================= */

/* Optional: subtle visual indicators for dev mode */
[data-dazzle-entity]:hover {
  /* outline: 1px dashed oklch(var(--p) / 0.3); */
}

/* =============================================================================
   Additional Utility Classes (Design System v0.22.0)
   ============================================================================= */

/* Ghost button variant with muted text */
.dz-btn-ghost {
  background: transparent;
  border: none;
  box-shadow: none;
  color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
}

.dz-btn-ghost:hover {
  background: hsl(var(--accent, 240 4.8% 95.9%));
  color: hsl(var(--accent-foreground, 240 5.9% 10%));
}

/* Link-style button */
.dz-btn-link {
  background: transparent;
  border: none;
  box-shadow: none;
  color: hsl(var(--primary, 240 5.9% 10%));
  text-decoration: underline;
  text-underline-offset: 4px;
}

.dz-btn-link:hover {
  text-decoration-thickness: 2px;
}

/* Form field label matching spec */
.dz-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground, 240 10% 3.9%));
  margin-bottom: 0.375rem;
  display: block;
}

/* Improved empty state */
.dz-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
}

.dz-empty-state h3 {
  font-weight: 600;
  color: hsl(var(--foreground, 240 10% 3.9%));
  margin-bottom: 0.25rem;
}

.dz-empty-state p {
  color: hsl(var(--muted-foreground, 240 3.8% 46.1%));
  font-size: 0.875rem;
}
