/* ================================================================
   OntLease AI – Premium Ontario Property Suite
   Defensive Layout & Typography Stylesheet
   Specialized for Bilingual Expansion & Grid Integrity
   ================================================================ */

/* ── Reset & Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport for mobile browser chrome */
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Defensive Typography & Anti-Clipping Rules ──────────────────
   French translations expand up to 25-30% longer than English equivalents.
   These rules prevent localized words, compounds, and alphanumeric strings
   from overflowing, clipping, or breaking responsive grid boundaries.
   ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
p, span, label, legend, button, a,
li, td, th, figcaption,
[data-i18n], [data-i18n-btn] {
  overflow-wrap: anywhere;
  word-wrap: break-word;          /* legacy webkit */
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Output containers: completely dynamic height, never clip, wrap cleanly */
.output-box {
  min-height: 140px;
  height: auto;
  max-height: none;
  overflow-y: visible;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: normal;
  -webkit-hyphens: auto;
  hyphens: auto;
  white-space: pre-line;          /* preserve intentional paragraph breaks */
  transition: min-height 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Empty output box styling */
.output-box:empty {
  min-height: 120px;
  background-color: #f8fafc;
  border: 1px dashed #cbd5e1;
}

.output-box:not(:empty) {
  border: 1px solid #e2e8f0;
  background-color: #ffffff;
}

/* Inputs, Selects & Textareas: prevent flex grid blowout */
input, select, textarea {
  min-width: 0;                   /* overrides flex child min-width: auto */
  max-width: 100%;
  overflow-wrap: break-word;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* ── Custom Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Spinner Keyframes ─────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Shimmer Pulse for Processing State ────────────────────────── */
@keyframes shimmerPulse {
  0%, 100% { opacity: 0.35; background-color: #f1f5f9; }
  50%      { opacity: 0.75; background-color: #e2e8f0; }
}
.shimmer {
  animation: shimmerPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

/* ── Smooth Fade-Up Reveal for Generated Text ──────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.output-text {
  animation: fadeUp 0.35s ease both;
}

/* ── Clipboard Feedback Flash ──────────────────────────────────── */
@keyframes flashSuccess {
  0%   { background-color: #22c55e; color: #ffffff; border-color: #16a34a; }
  100% { background-color: #f8fafc; color: #334155; border-color: #cbd5e1; }
}
.flash {
  animation: flashSuccess 0.45s ease;
}

/* ── Dropdown Select Styling ───────────────────────────────────── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

/* ── Focus Outline ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ── Form Slot Entrance Transition ─────────────────────────────── */
.form-slot-enter {
  animation: slotFadeIn 0.25s ease both;
}
@keyframes slotFadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile Touch Target Accessibility ─────────────────────────── */
@media (pointer: coarse) {
  button, select, input, textarea {
    min-height: 44px;
  }
}

/* ================================================================
   DARK MODE THEME OVERRIDES (.dark on body or html)
   Theme: Sleek Dark Slate (bg-gray-900), Bright Text (text-gray-100),
   and Accessible Dark-Mode Surfaces (bg-gray-800 border-gray-700)
   ================================================================ */
body.dark {
  background-color: #111827 !important; /* bg-gray-900 */
  color: #f3f4f6 !important;            /* text-gray-100 */
}

/* Console & Workspace card surfaces transform to bg-gray-800 border-gray-700 */
body.dark #inputConsoleSection,
body.dark #workspaceSection > div,
body.dark .bg-white {
  background-color: #1f2937 !important; /* bg-gray-800 */
  border-color: #374151 !important;     /* border-gray-700 */
  color: #f3f4f6;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important;
}

/* Card inner dividers & sub-borders */
body.dark .border-b,
body.dark .border-slate-100,
body.dark .border-slate-200,
body.dark .border-slate-200\/90 {
  border-color: #374151 !important;     /* border-gray-700 */
}

/* Headings and labels in dark mode */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark .text-slate-700 {
  color: #f3f4f6 !important;            /* text-gray-100 */
}

body.dark .text-slate-500,
body.dark .text-slate-400 {
  color: #9ca3af !important;            /* text-gray-400 */
}

body.dark label {
  color: #e5e7eb !important;            /* text-gray-200 */
}

/* Form input fields, selects & textareas */
body.dark .input-field,
body.dark input[type="text"],
body.dark select,
body.dark textarea {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #4b5563 !important;     /* border-gray-600 */
  color: #f3f4f6 !important;            /* text-gray-100 */
}

body.dark .input-field:focus,
body.dark input[type="text"]:focus,
body.dark select:focus,
body.dark textarea:focus {
  background-color: #111827 !important;
  border-color: #3b82f6 !important;     /* focus:border-blue-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25) !important;
}

body.dark .input-field::placeholder,
body.dark textarea::placeholder {
  color: #6b7280 !important;            /* placeholder-gray-500 */
}

body.dark select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
}

/* Language Toggle Button in Dark Mode */
body.dark #langToggle {
  background-color: rgba(30, 58, 138, 0.25) !important;
  border-color: rgba(59, 130, 246, 0.45) !important;
  color: #93c5fd !important;
}
body.dark #langToggle:hover {
  background-color: rgba(30, 58, 138, 0.4) !important;
  border-color: #3b82f6 !important;
}
body.dark #langBadge {
  background-color: #1e3a8a !important;
  color: #bfdbfe !important;
}

/* Tab Bar and Tab Switchers in Dark Mode */
body.dark div[role="tablist"],
body.dark .bg-slate-100 {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #374151 !important;     /* border-gray-700 */
}

body.dark #tabResidential[aria-selected="true"],
body.dark #tabCommercial[aria-selected="true"] {
  background-color: #1f2937 !important; /* bg-gray-800 */
  color: #60a5fa !important;            /* text-blue-400 */
  border: 1px solid #374151 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

body.dark #tabResidential[aria-selected="false"],
body.dark #tabCommercial[aria-selected="false"] {
  background-color: transparent !important;
  color: #9ca3af !important;
  border: 1px solid transparent !important;
}

body.dark #tabResidential[aria-selected="false"]:hover,
body.dark #tabCommercial[aria-selected="false"]:hover {
  color: #f3f4f6 !important;
}

/* Output Containers in Dark Mode */
body.dark .output-box:empty {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #4b5563 !important;     /* border-gray-600 dashed */
}

body.dark .output-box:not(:empty) {
  background-color: #111827 !important; /* bg-gray-900 */
  border-color: #374151 !important;     /* border-gray-700 */
  color: #f3f4f6 !important;            /* text-gray-100 */
}

body.dark .output-text {
  color: #f3f4f6 !important;
}

/* Dark mode Shimmer Pulse */
body.dark .shimmer {
  animation: shimmerPulseDark 1.2s ease-in-out infinite;
}
@keyframes shimmerPulseDark {
  0%, 100% { opacity: 0.35; background-color: #111827; }
  50%      { opacity: 0.75; background-color: #374151; }
}

/* Word count badge in Dark Mode */
body.dark #wordCountBadge {
  background-color: #374151 !important;
  color: #e5e7eb !important;
}

/* Copy buttons in Dark Mode */
body.dark .copy-btn {
  background-color: #374151 !important; /* bg-gray-700 */
  border-color: #4b5563 !important;     /* border-gray-600 */
  color: #e5e7eb !important;
}
body.dark .copy-btn:hover {
  background-color: #4b5563 !important;
  color: #ffffff !important;
}

/* Footer in Dark Mode */
body.dark footer {
  background-color: rgba(17, 24, 39, 0.75) !important;
  border-color: #1f2937 !important;
}
body.dark footer p {
  color: #9ca3af !important;
}

/* ── PWA Install Banner ────────────────────────────────────────── */
#pwaInstallBanner {
  z-index: 9999;
}
body.dark #pwaInstallBanner {
  background-color: rgba(31, 41, 55, 0.95) !important;
  border-color: #374151 !important;
  color: #f3f4f6 !important;
}

/* ── Print / PDF Export Stylesheet ─────────────────────────────── */
@media print {
  header, button, #apiKeyModal, #statusMessage { display: none !important; }
  .output-box { border: 1px solid #94a3b8 !important; background: transparent !important; }
  #pdfComplianceWatermark {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: #ffffff !important;
    border-top: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    font-size: 10pt;
    text-align: center;
  }
}