/* Step 1: Global form-field UX safety net.
   Tailwind utilities sometimes vary across pages (some inputs ship without `focus:ring-2`
   or without padding). These rules give every text-like input, textarea, and select a
   consistent baseline so no single field can render with a missing border or invisible
   focus state. Inputs that already specify Tailwind classes still win for layout
   utilities (width, margin, etc.); these rules only enforce the visual baseline. */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="search"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea,
select {
    border: 1px solid rgb(203 213 225); /* slate-300 */
    border-radius: 6px;
    padding: 8px 12px;                  /* matches Tailwind px-3 py-2 */
    font-size: 14px;
    background-color: #ffffff;
    color: rgb(15 23 42);               /* slate-900 */
    transition: border-color 120ms, box-shadow 120ms;
}

textarea {
    min-height: 88px;
    line-height: 1.5;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="search"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgb(99 102 241);                         /* indigo-500 */
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.25);          /* soft indigo halo */
}

input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled {
    background-color: rgb(248 250 252);                    /* slate-50 */
    color: rgb(71 85 105);                                 /* slate-600 */
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder {
    color: rgb(148 163 184);                               /* slate-400 */
}

/* Step 2: File-upload control — make the visible button consistent on browsers that show it directly */
input[type="file"]:not(.hidden) {
    border: 1px solid rgb(203 213 225);
    border-radius: 6px;
    padding: 6px;
    font-size: 14px;
    background-color: #ffffff;
}
input[type="file"]:not(.hidden)::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: 1px solid rgb(203 213 225);
    border-radius: 6px;
    background-color: rgb(248 250 252);
    color: rgb(51 65 85);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
input[type="file"]:not(.hidden)::file-selector-button:hover {
    background-color: rgb(241 245 249);
}

/* Step 3: Polish the spinner buttons on number inputs (less visual noise on desktop, hidden on mobile) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 0.5;
}