* {
  box-sizing: border-box;
  font-family: var(--font-family-ui);
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  padding: 0;
  background-color: var(--surface-page);
  background-image: linear-gradient(180deg, var(--surface-page) 0%, var(--surface-subtle) 100%);
  color: var(--text-primary);
  font-weight: var(--fw-body);
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   RESET / GLOBAL
   Surfaces globales, controles generiques et compatibilite mobile.
   -------------------------------------------------------------------------- */

/* Surfaces carte: blanc pur sur toutes les vues */
.home-main-card,
.settings-card,
.edit-panel,
.alarm-view .alarm-section,
.alarm-notice-modal,
.onboarding-modal,
.legal-text,
.settings-period,
.update-banner {
  background-color: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-1) !important;
}

/* Carte principale: léger dégradé interne pour éviter le rendu plat */
:where(.home-main-card, .settings-card, .tax-real-card) {
  background-image: linear-gradient(180deg, var(--surface-card) 0%, var(--surface-subtle) 100%) !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}

:where(button) {
  transition:
    transform 100ms ease,
    opacity 100ms ease,
    filter 100ms ease;
}

button.ui-pressed {
  transform: scale(0.985) !important;
  opacity: 0.94;
}

button.ui-loading {
  pointer-events: none;
  opacity: 0.86;
}

button.ui-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  margin-left: 8px;
  display: inline-block;
  animation: uiSpin 0.65s linear infinite;
}

@keyframes uiSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bloque la sélection/callout natifs sur l'UI mobile.
   On garde la sélection active dans les champs éditables. */
*:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

input[type="date"],
input[type="month"] {
  -webkit-appearance: auto;
  appearance: auto;
  height: var(--input-height);
  min-height: var(--input-height);
  border-radius: var(--control-radius);
  padding: 0 10px;
  line-height: 1.2;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: 1;
}

@supports (-webkit-touch-callout: none) {
  input[type="date"],
  input[type="month"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="none" stroke="black" stroke-width="2"/><line x1="3" y1="9" x2="21" y2="9" stroke="black" stroke-width="2"/><line x1="8" y1="2.5" x2="8" y2="6" stroke="black" stroke-width="2" stroke-linecap="round"/><line x1="16" y1="2.5" x2="16" y2="6" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
    padding-right: 36px;
  }
}