:root {
    --type-caption: 0.78125rem;
    --type-small: 0.875rem;
    --type-body: 0.9375rem;
    --type-control: 0.9375rem;
    --type-subtitle: 1rem;
    --type-title: 1.125rem;
    --type-display: 1.625rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --control-height: 36px;
    --control-height-sm: 32px;
    --control-height-lg: 40px;
    --control-radius: 8px;
    --check-size: 15px;
}

html,
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--type-body);
    font-weight: var(--weight-regular);
    line-height: 1.5;
}

:root :is(p, span, label, li, a, td, th, small, strong, em, legend, dt, dd) {
    font-size: max(0.78125rem, 1em) !important;
}

:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
    line-height: 1.25 !important;
    color: inherit;
}

:root h1 { font-size: var(--type-display) !important; font-weight: var(--weight-semibold) !important; }
:root h2 { font-size: var(--type-title) !important; font-weight: var(--weight-semibold) !important; }
:root h3 { font-size: 1.0625rem !important; font-weight: var(--weight-medium) !important; }
:root h4 { font-size: 0.9375rem !important; font-weight: var(--weight-medium) !important; }
:root h5 { font-size: 0.875rem !important; font-weight: var(--weight-medium) !important; }
:root h6 { font-size: 0.875rem !important; font-weight: var(--weight-medium) !important; }

button,
input,
select,
textarea {
    font-family: inherit;
}

.btn:not(.btn-link) {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.875rem !important;
    border-radius: var(--control-radius) !important;
    font-size: var(--type-control) !important;
    font-weight: var(--weight-semibold) !important;
    line-height: 1.2 !important;
}

.btn.btn-sm:not(.btn-link) {
    height: var(--control-height-sm) !important;
    min-height: var(--control-height-sm) !important;
    padding: 0.375rem 0.7rem !important;
    font-size: var(--type-small) !important;
}

.btn.btn-lg:not(.btn-link) {
    height: var(--control-height-lg) !important;
    min-height: var(--control-height-lg) !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.9375rem !important;
}

.form-control,
.form-select,
.input,
.single-option-combobox-trigger,
.multi-option-combobox-trigger,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select {
    height: var(--control-height) !important;
    min-height: var(--control-height) !important;
    border-radius: var(--control-radius) !important;
    font-size: var(--type-control) !important;
    font-weight: var(--weight-regular) !important;
    line-height: 1.35 !important;
}

input[type="date"] {
    width: min(11rem, 100%) !important;
    max-width: 100% !important;
    flex: 0 1 11rem;
}

.hero-date-field {
    box-sizing: border-box !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    align-self: stretch;
}

.hero-date-field > span {
    position: absolute !important;
    top: -9px !important;
    left: 9px !important;
    z-index: 1;
    padding: 0 4px !important;
    background: transparent !important;
    font-size: 0.78125rem !important;
    line-height: 14px !important;
}

.hero-date-field > input[type="date"] {
    position: absolute !important;
    left: 10px !important;
    bottom: 2px !important;
    width: calc(100% - 20px) !important;
    height: 26px !important;
    min-height: 26px !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.2 !important;
}

.coupon-hero-controls-row .hero-search-box,
.coupon-hero-controls-row .hero-select-field {
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    align-self: stretch;
}

.coupon-hero-controls-row .coupon-primary-action {
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-self: center;
}

.coupon-hero-controls-row .single-option-combobox-trigger {
    box-sizing: border-box !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 2px 38px 2px 12px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

:root .coupon-hero-controls-row .single-option-combobox-trigger-label {
    font-size: 0.78125rem !important;
    line-height: 14px !important;
}

:root .coupon-hero-controls-row .single-option-combobox-trigger-value {
    font-size: 0.9375rem !important;
    line-height: 18px !important;
}

.apply-action {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: end;
}

.estatisticas-page .apply-action {
    height: 42px !important;
    min-height: 42px !important;
}

.receitas-page .filter-control {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
}

.receitas-page .filter-control.select-control {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.receitas-page .single-option-combobox-trigger {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 38px 0 12px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
    text-align: left !important;
}

textarea,
textarea.form-control {
    min-height: 6rem !important;
    height: auto !important;
    padding: 0.625rem 0.75rem !important;
    font-size: var(--type-control) !important;
    line-height: 1.45 !important;
}

input[type="checkbox"],
.form-check-input[type="checkbox"] {
    width: var(--check-size) !important;
    height: var(--check-size) !important;
    min-height: var(--check-size) !important;
    flex: 0 0 var(--check-size) !important;
    vertical-align: middle;
}

input[type="radio"],
.form-check-input[type="radio"] {
    --radio-size: var(--check-size);
    width: var(--check-size) !important;
    height: var(--check-size) !important;
    min-height: var(--check-size) !important;
    flex: 0 0 var(--check-size) !important;
    vertical-align: middle;
}

.form-check-label,
.form-label {
    font-size: var(--type-body) !important;
    font-weight: var(--weight-medium) !important;
    line-height: 1.4 !important;
}

table th {
    font-weight: var(--weight-semibold);
}

@media (max-width: 640px) {
    :root h1 { font-size: 1.375rem !important; }
    :root h2 { font-size: 1.0625rem !important; }
}
