@font-face { font-family: 'Vazirmatn'; font-weight: 300; font-style: normal; src: url('/fonts/Vazirmatn-Light.ttf') format('truetype'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 400; font-style: normal; src: url('/fonts/Vazirmatn-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 500; font-style: normal; src: url('/fonts/Vazirmatn-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 600; font-style: normal; src: url('/fonts/Vazirmatn-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Vazirmatn'; font-weight: 700; font-style: normal; src: url('/fonts/Vazirmatn-Bold.ttf') format('truetype'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body, #root {
  width: 100%; height: 100%; overflow: hidden;
  font-family: 'Vazirmatn', 'Archivo', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Concrete & Blueprint — architectural design system ─────────────────── */

/* Text selection — blueprint slate */
::selection { background: #2d4a5e; color: #f4f3f0; }

/* P3.4 — Dark mode + High-contrast themes via data-theme attribute */
html[data-theme="dark"] {
  background: #161a1f;
  color-scheme: dark;
}
html[data-theme="dark"] body, html[data-theme="dark"] #root { background: #161a1f; color: #e8e6e1; }
html[data-theme="dark"] .draft-grid,
html[data-theme="dark"] .draft-grid-fine {
  background-image:
    linear-gradient(to right,  rgba(214,221,231,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214,221,231,0.05) 1px, transparent 1px);
}
html[data-theme="hicontrast"] {
  background: #000;
  color: #fff;
  color-scheme: dark;
}
html[data-theme="hicontrast"] body, html[data-theme="hicontrast"] #root { background: #000; color: #fff; }
html[data-theme="hicontrast"] a, html[data-theme="hicontrast"] button { outline: 2px solid #ffd400 !important; }

/* P3.4 — Visible keyboard focus for every interactive element. */
:focus-visible {
  outline: 2px solid #3f7d5d;
  outline-offset: 2px;
}

/* Latin display face — applied to numerals, codes, eyebrows via class */
.font-display {
  font-family: 'Archivo', 'Vazirmatn', system-ui, sans-serif;
}
.font-expanded {
  font-family: 'Archivo Expanded', 'Archivo', 'Vazirmatn', sans-serif;
  letter-spacing: -0.01em;
}

/* Faint drafting grid — paper-blueprint texture for canvases/heroes */
.draft-grid {
  background-image:
    linear-gradient(to right,  rgba(45,74,94,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,74,94,0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.draft-grid-fine {
  background-image:
    linear-gradient(to right,  rgba(45,74,94,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45,74,94,0.05) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* Architectural slim scrollbar */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(45,74,94,0.22);
  border-radius: 0;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(45,74,94,0.4); background-clip: padding-box; }

/* Corner-tick decoration — architectural registration marks */
.corner-ticks { position: relative; }
.corner-ticks::before,
.corner-ticks::after {
  content: ''; position: absolute; width: 7px; height: 7px;
  border-color: rgba(45,74,94,0.5); pointer-events: none;
}
.corner-ticks::before { top: -1px; right: -1px; border-top: 1.5px solid; border-right: 1.5px solid; }
.corner-ticks::after  { bottom: -1px; left: -1px; border-bottom: 1.5px solid; border-left: 1.5px solid; }

/* ── Mobile responsive overrides ────────────────────────────────────────── */
/* These rules target inline-styled pages by overriding common patterns. */

@media (max-width: 768px) {
  /* Page container — tighter padding on mobile */
  [data-page-content] {
    padding: 16px !important;
  }

  /* Tables — wrap in horizontal scroll */
  [data-responsive-table] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-responsive-table] table {
    min-width: 600px;
  }

  /* Multi-column grids → single column */
  [data-grid-2col],
  [data-grid-3col],
  [data-grid-4col] {
    grid-template-columns: 1fr !important;
  }

  /* Project detail hero — stack columns */
  [data-stack-mobile] {
    grid-template-columns: 1fr !important;
  }

  /* Page headers — stack title and action button */
  [data-page-header] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  /* Filter bars — wrap freely */
  [data-filter-bar] {
    flex-wrap: wrap !important;
  }
  [data-filter-bar] > div[data-filter-search] {
    max-width: none !important;
    width: 100% !important;
  }

  /* Hide on mobile (e.g. desktop-only nav) */
  [data-hide-mobile] {
    display: none !important;
  }

  /* Login — collapse the two-column blueprint layout to one */
  [data-login-grid] {
    grid-template-columns: 1fr !important;
  }

  /* Show only on mobile */
  [data-show-mobile] {
    display: flex !important;
  }

  /* Project hero stat row */
  [data-hero-stats] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* Top header bars (customer dashboard, design viewer) */
  [data-header-bar] {
    padding: 12px 16px !important;
  }

  /* Modal padding tweaks for narrow screens */
  [data-modal-overlay] {
    padding: 12px !important;
    align-items: flex-start !important;
  }

  /* DesignViewer scene + side panel — stack vertically */
  [data-viewer-body] {
    flex-direction: column !important;
  }
  [data-side-panel] {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 50vh !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* TasksTab summary bar — stack 3 sections vertically */
  [data-tasks-summary] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  [data-tasks-summary] [data-tasks-status-grid] {
    padding-left: 0 !important;
    padding-top: 14px !important;
    border-left: none !important;
    border-top: 1px solid #dcdad2 !important;
    gap: 6px !important;
  }
  [data-tasks-summary] [data-tasks-status-grid] button {
    padding: 8px 6px !important;
    text-align: center !important;
  }
  [data-tasks-summary] [data-tasks-status-grid] button > div:first-child {
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  [data-tasks-add] {
    padding-top: 4px !important;
    border-top: 1px solid #dcdad2 !important;
  }
  [data-tasks-add] button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ProjectDetail hero — tighter padding on mobile */
  [data-hero-card] {
    padding: 16px 16px 0 !important;
  }
  /* Tab strip negative margins compensate */
  [data-hero-card] [data-tab-strip] {
    margin: 0 -16px !important;
    padding: 0 16px !important;
  }
  /* Stepper — smaller circles + labels on mobile */
  [data-stepper] {
    margin-bottom: 14px !important;
  }
  [data-stepper] > div > div:first-child > div:first-child {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }
  [data-stepper] span {
    font-size: 10px !important;
  }
}

/* Show-mobile is hidden by default on desktop */
[data-show-mobile] {
  display: none;
}

/* Touch-friendly — larger tap targets on coarse pointers */
@media (pointer: coarse) {
  button, a, input, select, textarea {
    -webkit-tap-highlight-color: transparent;
  }
}

/* Prevent iOS zoom on input focus by ensuring 16px minimum */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px !important;
  }
}