/* Datakar shared UI system
   Central design tokens for consistent controls, focus states and dividers.
   Change these variables once to update all apps. */

:root {
  --ui-field-height: 54px;
  --ui-field-radius: 8px;
  --ui-field-border-width: 1px;
  --ui-field-padding-block: 0.68rem;
  --ui-field-font-size: var(--font-size-base, 1rem);
  --ui-focus-ring-width: 1px;
  --ui-divider-width: 1px;
  --ui-motion-fast: 160ms;
}

/* Single-line data-entry controls only.
   QR's textarea intentionally keeps its own larger dimensions. */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
select {
  box-sizing: border-box;
  height: var(--ui-field-height) !important;
  min-height: var(--ui-field-height) !important;
  padding-block: var(--ui-field-padding-block) !important;
  border-width: var(--ui-field-border-width) !important;
  border-style: solid;
  border-radius: var(--ui-field-radius) !important;
  font-size: var(--ui-field-font-size) !important;
  line-height: 1.45;
  transition: border-color var(--ui-motion-fast) ease,
              box-shadow var(--ui-motion-fast) ease,
              background-color var(--ui-motion-fast) ease;
}

/* One clean focus highlight across all data-entry fields. */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-primary, var(--primary, #e67e22)) !important;
  box-shadow: 0 0 0 var(--ui-focus-ring-width)
    var(--color-primary, var(--primary, #e67e22)) !important;
}

/* Keep QR/text areas flexible; only normalize border/focus language. */
textarea {
  border-width: var(--ui-field-border-width) !important;
  border-radius: var(--ui-field-radius) !important;
  transition: border-color var(--ui-motion-fast) ease,
              box-shadow var(--ui-motion-fast) ease,
              background-color var(--ui-motion-fast) ease;
}

/* Shared divider thickness. Component styles still control spacing and color. */
hr,
.divider,
.section-divider {
  border-width: 0 !important;
  border-top: var(--ui-divider-width) solid
    var(--color-border, var(--border, #e0e0e0)) !important;
}

/* Known separator rows use the same central thickness token. */
.supporting-results,
#language-section,
.language-section,
.mobile-drawer-header,
.mobile-drawer-footer {
  border-top-width: var(--ui-divider-width);
  border-bottom-width: var(--ui-divider-width);
}

.mobile-drawer-divider {
  height: var(--ui-divider-width) !important;
}

@media (prefers-reduced-motion: reduce) {
  input,
  select,
  textarea {
    transition: none !important;
  }
}

/* ======================================================
   Datakar unified automatic dark theme — v1.1
   Monochrome-first palette for reliable contrast across
   apps, documentation, navigation, forms and result cards.
   ====================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* App palette */
    --color-primary: #f2f2f3;
    --color-primary-light: #ffffff;
    --color-complementary: #b8b8bd;
    --color-bg: #0d0d0f;
    --color-surface: #171719;
    --color-text: #f4f4f5;
    --color-muted: #a5a5ab;
    --color-border: #343438;

    /* Documentation palette */
    --primary: #f2f2f3;
    --primary-dark: #ffffff;
    --accent: #b8b8bd;
    --bg: #0d0d0f;
    --surface: #171719;
    --surface-soft: #202023;
    --text: #f4f4f5;
    --muted: #a5a5ab;
    --border: #343438;
    --code-bg: #1d1d20;
    --shadow: 0 16px 42px rgba(0, 0, 0, 0.34);

    /* Shared component tokens */
    --ui-dark-field-bg: #141416;
    --ui-dark-field-hover: #19191c;
    --ui-dark-subtle-bg: #202023;
    --ui-dark-hover-bg: #26262a;
    --ui-dark-strong-bg: #f2f2f3;
    --ui-dark-strong-text: #111113;
    --ui-dark-placeholder: #7f7f86;
  }

  html,
  body {
    background: var(--color-bg, var(--bg));
    color: var(--color-text, var(--text));
  }

  /* Form controls */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    background-color: var(--ui-dark-field-bg) !important;
    color: var(--color-text, var(--text)) !important;
    border-color: var(--color-border, var(--border)) !important;
    caret-color: var(--color-text, var(--text));
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--ui-dark-placeholder) !important;
    opacity: 1;
  }

  input:focus,
  select:focus,
  textarea:focus {
    background-color: var(--ui-dark-field-hover) !important;
    border-color: #d9d9dc !important;
    box-shadow: 0 0 0 var(--ui-focus-ring-width) #d9d9dc !important;
  }

  /* Native/date/select controls remain visible on dark surfaces. */
  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) grayscale(1);
    opacity: .78;
  }

  select {
    color-scheme: dark;
  }

  /* Common surfaces */
  .app-item,
  .about-section,
  .calculator,
  .calculator-card,
  .tax-calculator,
  .results,
  .result,
  .result-card,
  .info-card,
  .card,
  .panel,
  .section,
  .converter-card,
  .calendar-result,
  .generator-card,
  .qr-result,
  .barcode-result,
  .optional-panel,
  .exchange-rate-group,
  .rate-list,
  .example-card,
  .mobile-toc,
  .language-label,
  .source-links a,
  .doc-card {
    background-color: var(--color-surface, var(--surface)) !important;
    border-color: var(--color-border, var(--border)) !important;
    color: var(--color-text, var(--text));
  }

  /* Secondary / muted text */
  .intro,
  .description,
  .field-help,
  .form-label-muted,
  .helper-text,
  .language-section-inner,
  .language-label,
  .rate-note,
  .optional-panel-help,
  .calendar-label,
  .calendar-numeric,
  .rate-caption,
  .formula-label,
  .updated,
  .breadcrumb,
  .doc-pagination span,
  .doc-card span,
  .mini-result dt,
  .mobile-toc a,
  .page-toc a,
  footer,
  small {
    color: var(--color-muted, var(--muted)) !important;
  }

  /* Hard-coded light text colors from older component styles. */
  nav a,
  .currency-option span,
  .lead,
  .note-card p,
  .example-card p,
  .source-links a,
  .page-toc > p,
  .brand span,
  .drawer-nav a,
  .desktop-sidebar a {
    color: var(--color-text, var(--text)) !important;
  }

  .lead,
  .note-card p,
  .example-card p {
    color: #c7c7cb !important;
  }

  /* Primary action buttons: neutral high-contrast treatment. */
  .app-button,
  #calculate-button,
  #convert-button,
  #generate-button,
  .calculate-button,
  .primary-button,
  button[type="submit"] {
    background: var(--ui-dark-strong-bg) !important;
    color: var(--ui-dark-strong-text) !important;
    border-color: var(--ui-dark-strong-bg) !important;
  }

  .app-button:hover,
  .app-button:focus-visible,
  #calculate-button:hover,
  #calculate-button:focus-visible,
  #convert-button:hover,
  #convert-button:focus-visible,
  #generate-button:hover,
  #generate-button:focus-visible,
  .calculate-button:hover,
  .calculate-button:focus-visible,
  .primary-button:hover,
  .primary-button:focus-visible,
  button[type="submit"]:hover,
  button[type="submit"]:focus-visible {
    background: #ffffff !important;
    color: #09090a !important;
  }

  /* Secondary actions */
  #reset-button,
  #copy-button,
  #download-png,
  #download-svg,
  .reset-button,
  .secondary-button,
  .secondary-inline-button,
  .download-button {
    background: var(--ui-dark-subtle-bg) !important;
    color: var(--color-text, var(--text)) !important;
    border-color: var(--color-border, var(--border)) !important;
  }

  #reset-button:hover,
  #reset-button:focus-visible,
  #copy-button:hover,
  #copy-button:focus-visible,
  #download-png:hover:not(:disabled),
  #download-png:focus-visible:not(:disabled),
  #download-svg:hover:not(:disabled),
  #download-svg:focus-visible:not(:disabled),
  .reset-button:hover,
  .reset-button:focus-visible,
  .secondary-button:hover,
  .secondary-button:focus-visible,
  .secondary-inline-button:hover,
  .secondary-inline-button:focus-visible,
  .download-button:hover,
  .download-button:focus-visible {
    background: var(--ui-dark-hover-bg) !important;
    color: #ffffff !important;
  }

  button:disabled,
  .download-button:disabled {
    opacity: .45;
  }

  /* Currency selector */
  .currency-switch {
    background: var(--ui-dark-subtle-bg) !important;
    border-color: var(--color-border) !important;
  }

  .currency-option span {
    background: transparent !important;
    border-color: transparent !important;
    color: #c2c2c7 !important;
  }

  .currency-option input:checked + span {
    background: #f0f0f1 !important;
    border-color: #f0f0f1 !important;
    color: #111113 !important;
    box-shadow: none !important;
  }

  /* Tables and structured results */
  table,
  th,
  td {
    border-color: var(--color-border, var(--border)) !important;
  }

  th,
  .tax-rates-table th {
    background: #202023 !important;
    color: var(--color-text) !important;
  }

  td,
  .tax-rates-table td {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
  }

  tr:nth-child(even) td {
    background: #151517 !important;
  }

  /* Results hierarchy */
  .primary-result,
  .primary-results,
  .supporting-result,
  .supporting-results {
    background: transparent !important;
  }

  .primary-result dt,
  .primary-result dd,
  .result-row strong,
  .calendar-date,
  .calendar-result.primary-result .calendar-label {
    color: var(--color-text) !important;
  }

  .supporting-result dt,
  .supporting-result .calculation-rule,
  .result-label,
  .tax-label,
  .summary-label,
  .muted,
  .hint {
    color: var(--color-muted) !important;
  }

  /* Neutral heading accent in dark mode. */
  .heading-with-bar::before {
    background: #bdbdc2 !important;
  }

  /* Links remain distinct without relying on orange/green. */
  a,
  .language-hint-link,
  .cross-language-hint a {
    color: #d5d5d9 !important;
  }

  .docs-reference-link,
  .rate-refresh-link,
  .drawer-footer a,
  .doc-pagination strong,
  .breadcrumb a:hover,
  .mobile-toc a:hover,
  .page-toc a:hover,
  .page-toc a.active,
  .source-links a:hover,
  .eyebrow,
  .rate-item > strong {
    color: #eeeeef !important;
  }

  a:hover,
  a:focus-visible,
  .docs-reference-link:hover,
  .docs-reference-link:focus-visible {
    color: #ffffff !important;
  }

  /* Language controls */
  .language-button,
  .footer-language-button {
    color: var(--color-muted) !important;
    background: transparent !important;
  }

  .language-button:hover,
  .language-button:focus-visible,
  .language-button.active,
  .language-button[aria-pressed="true"],
  .footer-language-button:hover,
  .footer-language-button:focus-visible,
  .footer-language-button.active,
  .footer-language-button[aria-pressed="true"] {
    color: #ffffff !important;
  }

  /* Documentation navigation and cards */
  .site-header {
    background: rgba(23, 23, 25, .94) !important;
    border-color: var(--border) !important;
  }

  .menu-button span {
    background: #e6e6e8 !important;
  }

  .docs-drawer,
  .site-footer {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  .drawer-nav a:hover,
  .desktop-sidebar a:hover,
  .doc-card:hover {
    background: var(--surface-soft) !important;
    border-color: #525258 !important;
    color: #ffffff !important;
  }

  .drawer-nav a[aria-current="page"],
  .desktop-sidebar a.active {
    background: #29292d !important;
    color: #ffffff !important;
  }

  .note-card {
    background: #1b1b1e !important;
    border-color: #3a3a3f !important;
    border-inline-start-color: #9e9ea4 !important;
    border-inline-end-color: #9e9ea4 !important;
  }

  .formula-block,
  .calculation-line {
    background: var(--code-bg) !important;
    border-color: var(--border) !important;
  }

  .formula-block code,
  .calculation-line code {
    color: #ededee !important;
  }

  .source-links a:hover {
    border-color: #57575d !important;
  }

  /* Keep scannable generated codes on white canvas. */
  .qr-preview,
  #barcode-preview,
  .barcode-preview {
    background: #ffffff !important;
    border-color: #55555b !important;
  }

  /* Backdrops and separators */
  .drawer-backdrop,
  .mobile-nav-backdrop {
    background: rgba(0, 0, 0, .58) !important;
  }

  hr,
  .divider,
  .section-divider,
  .primary-result + .primary-result,
  .supporting-results,
  #language-section,
  .language-section,
  .sources-section,
  .doc-pagination,
  .site-footer,
  .rate-item,
  .mini-result > div,
  .doc-hero,
  .page-toc nav {
    border-color: var(--color-border, var(--border)) !important;
  }
}