:root {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scroll-snap-strictness: proximity;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(var(--colors-blue-500), 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    --tw-bg-opacity: 1 !important;
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
}

.shadow,
.card {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.form-input,
.form-control,
.form-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--surface-alt, #F6F8F6) !important;
    border: 1px solid var(--border-light, #E5EAE4) !important;
    border-radius: 12px !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
    padding: .6rem .85rem !important;
    width: 100% !important;
    color: var(--dark, #151E17) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}

button,
input,
optgroup,
select,
textarea {
    font-feature-settings: inherit !important;
    font-family: inherit !important;
    font-size: 100% !important;
    font-variation-settings: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.form-control {
    box-sizing: border-box !important;
    height: 2.9em !important;
    line-height: 1.5 !important;
}

.form-input:hover,
.form-control:hover,
.form-select:hover {
    border-color: var(--primary, #00843D) !important;
}

.form-input:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--primary, #00843D) !important;
    border-width: 1px !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 132, 61, 0.16) !important;
    background-color: var(--surface, #ffffff) !important;
}

html.dark .form-input,
html.dark .form-control,
html.dark .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--border-light) !important;
    color: var(--dark) !important;
}

html.dark .form-input:focus,
html.dark .form-control:focus,
html.dark .form-select:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(47, 190, 114, 0.20) !important;
}

/* Create/Edit form card wrapper (w3.css utility classes used across all module forms) */
.w3-white.w3-round-large {
    background: var(--surface, #fff) !important;
    border: 1px solid var(--border-light, #E5EAE4) !important;
    border-radius: 18px !important;
    box-shadow: var(--shadow-card, 0 10px 25px rgba(0, 0, 0, 0.06)) !important;
    color: var(--dark, #151E17) !important;
}

.w3-white.w3-round-large label {
    color: var(--muted, #69766B) !important;
    font-size: 0.85rem !important;
    display: inline-block;
    margin-bottom: 4px;
}