/* Store-scoped mobile-friendly typographic scale & form utilities */
:root {
  --fs-xs: 0.8125rem; /* 13px */
  --fs-sm: clamp(0.875rem, 0.85rem + 0.6vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.95rem + 0.8vw, 1rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 1.2vw, 1.25rem);
  --input-height: 48px;
  --input-radius: 8px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-size: var(--fs-base);
  line-height: 1.5;
}

/* Fluid headings (mobile-friendly) */
h1 { font-size: clamp(1.6rem, 1.4rem + 3vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 1.2rem + 2.2vw, 2rem); }

/* Form utilities to ensure touch-friendly inputs */
.form-field,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  font-size: var(--fs-base);
  min-height: var(--input-height);
  padding: 0.6rem 0.75rem;
  border-radius: var(--input-radius);
  box-sizing: border-box;
}

.form-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-sm);
}

/* Stack labels above inputs on small screens */
@media (max-width: 576px) {
  .form-row { display: block; }
  body { font-size: 0.95rem; }
  h1 { font-size: clamp(1.2rem, 1rem + 2vw, 1.7rem); }
  h2 { font-size: clamp(1.05rem, 0.95rem + 1.5vw, 1.35rem); }

  .input-field,
  .form-group,
  .app-search,
  .input-field.s12,
  .input-field.s6,
  .input-field.col.s6,
  .input-field.col.s3,
  .input-field.col.s4,
  .input-field.col.s12,
  .col.s6,
  .col.s12,
  .admin-form .row .col-md-6,
  .admin-form .row .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 0.75rem !important;
    float: none !important;
    flex: 0 0 100% !important;
  }

  .form-field,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.95rem !important;
    margin-bottom: 0.25rem !important;
  }

  .form-label,
  label:not(.checkbox-label):not(.radio-label),
  .input-field label,
  .input-field > label {
    display: block !important;
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }

  .input-field > label,
  .input-field label {
    font-size: 0.82rem !important;
    top: auto !important;
    transform: none !important;
    position: relative !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
  }

  .input-field .active {
    font-size: 0.82rem !important;
    transform: none !important;
  }

  .input-field.col.s6,
  .input-field.col.s3,
  .input-field.col.s4,
  .input-field.col.s12,
  .admin-form .row .col-md-6,
  .admin-form .row .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }

  .input-field.col.s6 > input,
  .input-field.col.s3 > input,
  .input-field.col.s4 > input,
  .input-field.col.s12 > input,
  .input-field.col.s6 > select,
  .input-field.col.s3 > select,
  .input-field.col.s4 > select,
  .input-field.col.s12 > select {
    width: 100% !important;
    max-width: 100% !important;
  }

  .sb2-2,
  .sb2-1 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .invoice-form,
  .invoice-form .col.s2,
  .invoice-form .col.s3,
  .invoice-form .col.s4,
  .invoice-form .col.s6,
  .invoice-form .col.s12 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 0 !important;
    margin-bottom: 0.75rem !important;
  }

  .invoice-form .invoice-action-col,
  .invoice-form .invoice-action-col button,
  .invoice-form .invoice-action-col .btn,
  .invoice-form .invoice-action-col .waves-effect {
    width: 100% !important;
    display: block !important;
    margin-top: 0.25rem !important;
  }

  body .sb2-2 .admin-form .row,
  body .sb2-2 .tab-inn .row,
  body .sb2-2 .row .row {
    display: block !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .sb2-2 .admin-form .row > [class*="col-"],
  body .sb2-2 .tab-inn .row > [class*="col-"],
  body .sb2-2 .row .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    float: none !important;
    display: block !important;
  }
}

/* Accessibility: focus rings, contrast, and reduced-motion */
:root {
  --store-focus-color: #2878EB;
  --store-focus-ring: rgba(40,120,235,0.18);
  --store-contrast-text: #08121a;
  --store-contrast-border: #2b2f33;
}

/* Ensure readable label/text contrast */
.form-label { color: var(--store-contrast-text); }
.form-field { color: var(--store-contrast-text); background: #fff; border: 1px solid #d1d5db; }

/* Clear, visible focus for keyboard users */
.form-field:focus,
.form-field:focus-visible {
  outline: none;
  border-color: var(--store-focus-color);
  box-shadow: 0 0 0 3px var(--store-focus-ring);
}

/* Buttons and interactive elements */
button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--store-focus-ring);
}

/* Invalid state styling */
.form-field[aria-invalid="true"] {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.12);
}

/* Respect users who request higher contrast */
@media (prefers-contrast: more) {
  .form-field { border-width: 2px; border-color: var(--store-contrast-border); }
  .form-label { font-weight: 600; }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}