/**
 * TukaTasks design tokens — sits on Vuexy/Bootstrap --bs-* and site_theme.
 * Prefer these semantic vars in first-party CSS instead of hardcoded hex.
 * Accent fallback is ink (not Vuexy purple #7367f0).
 */
:root {
  /* Semantic surfaces */
  --tt-ink: #1c2430;
  --tt-muted: #6b7585;
  --tt-line: rgba(28, 36, 48, 0.10);
  --tt-line-strong: rgba(28, 36, 48, 0.16);
  --tt-surface: #f4f6f8;
  --tt-panel: #ffffff;
  --tt-accent: var(--bs-primary, #1c2430);

  /* Radius */
  --tt-radius-sm: 6px;
  --tt-radius: 10px;
  --tt-radius-md: var(--tt-radius);
  --tt-radius-lg: 14px;

  /* Spacing scale */
  --tt-space-1: 0.25rem;
  --tt-space-2: 0.5rem;
  --tt-space-3: 0.75rem;
  --tt-space-4: 1rem;
  --tt-space-5: 1.5rem;
  --tt-space-6: 2rem;

  /* Type — optical defaults for IRANYekanX; overridden per html[data-font] in typography.css */
  --tt-font: "IRANYekanX", Tahoma, sans-serif;
  --tt-fs-meta: 0.75rem;
  --tt-fs-label: 0.8125rem;
  --tt-fs-body: 0.9375rem;
  --tt-fs-section: 1.0625rem;
  --tt-fs-title: 1.25rem;
  --tt-fs-display: 1.375rem;
  --tt-fw-body: 400;
  --tt-fw-medium: 500;
  --tt-fw-semibold: 600;
  --tt-fw-bold: 700;
  --tt-lh-body: 1.7;
  --tt-lh-snug: 1.4;

  /* Elevation */
  --tt-shadow-sm: 0 1px 2px rgba(28, 36, 48, 0.06);
  --tt-shadow: 0 4px 16px rgba(28, 36, 48, 0.08);

  /* Focus */
  --tt-focus: 0 0 0 3px color-mix(in srgb, var(--tt-accent) 28%, transparent);

  /* Control sizes */
  --tt-control-min: 2.5rem; /* 40px */
  --tt-touch-min: 2.75rem; /* 44px */

  /* Breakpoint reference (use in media queries as literals) */
  /* sm 576 | md 768 | lg 992 | xl 1200 */
}

/* Shared utilities */
.tt-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tt-space-3);
  margin-bottom: var(--tt-space-4);
}

.tt-page-header-copy {
  min-width: 0;
  flex: 1 1 12rem;
}

.tt-page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-2);
}

.tt-page-header h1,
.tt-page-header .tt-page-title {
  font-size: var(--tt-fs-title);
  font-weight: var(--tt-fw-semibold, 600);
  color: var(--tt-ink);
  margin: 0;
  line-height: var(--tt-lh-snug, 1.35);
}

.tt-page-header .tt-page-subtitle {
  margin: 0.25rem 0 0;
  font-size: var(--tt-fs-label);
  color: var(--tt-muted);
  line-height: var(--tt-lh-snug, 1.5);
}

.tt-empty-state {
  text-align: center;
  padding: var(--tt-space-6) var(--tt-space-4);
  color: var(--tt-muted);
}

.tt-empty-state .tt-empty-title {
  color: var(--tt-ink);
  font-weight: 600;
  margin-bottom: var(--tt-space-2);
}

.tt-filter-label {
  display: block;
  font-size: var(--tt-fs-meta);
  font-weight: 600;
  color: var(--tt-muted);
  margin-bottom: 0.25rem;
}

.tt-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  font-size: var(--tt-fs-label);
}

.tt-breadcrumb .breadcrumb-item a {
  color: var(--tt-muted);
  text-decoration: none;
}

.tt-breadcrumb .breadcrumb-item a:hover {
  color: var(--tt-accent);
}

.tt-breadcrumb .breadcrumb-item.active {
  color: var(--tt-ink);
  font-weight: 500;
}

.tt-table-cards {
  display: none;
}

@media (max-width: 767.98px) {
  .tt-table-desktop {
    display: none !important;
  }
  .tt-table-cards {
    display: flex;
    flex-direction: column;
    gap: var(--tt-space-3);
  }
  .tt-table-card {
    background: var(--tt-panel);
    border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius);
    padding: var(--tt-space-3) var(--tt-space-4);
    box-shadow: var(--tt-shadow-sm);
  }
  .tt-table-card-row {
    display: flex;
    justify-content: space-between;
    gap: var(--tt-space-2);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--tt-line);
    font-size: var(--tt-fs-label);
  }
  .tt-table-card-row:last-child {
    border-bottom: none;
  }
  .tt-table-card-label {
    color: var(--tt-muted);
    flex-shrink: 0;
  }
  .tt-table-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: var(--tt-space-2);
  }
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.page-link:focus-visible {
  outline: none;
  box-shadow: var(--tt-focus);
}

/* Shell: menu section labels — sentence case, not ALL-CAPS demo chrome */
.menu-header,
.menu-header .menu-header-text {
  text-transform: none !important;
  letter-spacing: normal;
  font-size: var(--tt-fs-meta);
  font-weight: 600;
  color: var(--tt-muted);
}

/* Touch-friendly primary controls in shell (skip icon-only denseness) */
.btn:not(.btn-icon) {
  min-height: var(--tt-control-min);
}

.btn.btn-sm:not(.btn-icon) {
  min-height: 2rem;
}

.btn.btn-lg:not(.btn-icon) {
  min-height: var(--tt-touch-min);
}

@media (prefers-reduced-motion: reduce) {
  .tt-page-header,
  .panel-hub-card,
  .panel-btn,
  .menu-header {
    transition: none !important;
  }
}