/* Staff-friendly touch optimizations - TEMPORARILY applied to all sizes for testing */
@media (max-width: 3000px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        min-height: 38px !important;
        font-size: 15px !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    button,
    .btn,
    .btn-app {
        min-height: 48px !important;
        font-size: 15px !important;
        padding: 10px 16px !important;
    }

    label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    /* Radio/checkbox rows (brand/device/defect lists) - bigger tap targets */
    input[type="radio"],
    input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
    }

    /* Table rows in list views - more breathing room for finger taps */
    table td,
    table th {
        padding: 12px 10px !important;
    }

    /* Sidebar nav items - easier to tap */
    .sidebar a,
    nav a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Compact spacing - fit repair-order forms on one screen without scrolling */
.my-6 { margin-top: 0.75rem !important; margin-bottom: 0.75rem !important; }
@media (max-width: 767px) {
    .mt-5 { margin-top: 0.5rem !important; }
}
.mt-4 { margin-top: 0.5rem !important; }
.mb-6 { margin-bottom: 0.5rem !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.py-3 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
.px-6 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-5 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.px-5 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.form-description-head { font-size: 13px !important; margin-bottom: 2px !important; }
.form-description-text { font-size: 11px !important; }
select.form-input, input.form-input, textarea.form-input {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Rich-text diagnostics editor - full width, native resize behavior preserved */
.tox-tinymce { width: 100% !important; max-width: 100% !important; }
select[multiple] { height: 90px !important; }

/* Description text - re-enabled, compact size */
.form-description-text { display: block !important; font-size: 11px !important; margin-top: 1px !important; }

/* Reduce top page header spacing */
.py-6 { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
.mb-6, .mb-8 { margin-bottom: 0.5rem !important; }
.mt-6, .mt-8 { margin-top: 0.4rem !important; }

/* Trim the border spacing between sections */
hr, .border-b, .divide-y > * + * { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }

/* Trim the section-row wrapper (label + field pairs) used throughout the app */
.md\:gap-6 { gap: 0.5rem !important; }
.py-5 { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; }
.sm\:p-6 { padding: 0.75rem !important; }
.px-4 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }

/* Round 2: tighten remaining gaps */
.gap-6, .gap-4, .gap-x-4, .gap-y-6 { gap: 0.5rem !important; }
.space-y-6 > * + *, .space-y-4 > * + * { margin-top: 0.5rem !important; }
label.form-label, label { margin-bottom: 3px !important; }
.tox-toolbar__primary, .tox-toolbar-overlord { min-height: 32px !important; }
.tox .tox-toolbar__group { padding: 2px 4px !important; }
.pt-1 { padding-top: 2px !important; }

/* Round 3: tighter row spacing between sections */
.border-t, .border-b { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
.col-span-3, .md\:col-span-1, .md\:col-span-2 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }

/* Round 4 fixes */
/* Put the serial-number input and Scan button on the same line (scoped to only that field, not all .pt-1 wrappers) */
.pt-1:has(input[type="file"]) { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; }
.pt-1:has(input[type="file"]) > input.form-input { flex: 1 !important; min-width: 0 !important; }
.pt-1:has(input[type="file"]) .mt-1 { margin-top: 0 !important; }

/* More breathing room around the diagnostics editor toolbar icons */
.tox .tox-toolbar__group { padding: 5px 8px !important; }
.tox-toolbar__primary { padding-bottom: 4px !important; }

/* Tighter brand/device/priority dropdown rows */
.flex.items-center { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; }

/* Round 5: catch-all for any remaining vertical padding utility classes between sections */
[class*="py-"] { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; }
[class*="pt-"] { padding-top: 0.35rem !important; }
[class*="pb-"] { padding-bottom: 0.35rem !important; }

/* Fix: diagnostics textarea also has a file input inside .pt-1 - don't squash it into a flex row */
.pt-1:has(textarea.form-input) { display: block !important; }
.pt-1:has(textarea.form-input) input[type="file"] { flex: none !important; }

/* ===== Visual polish ===== */
input.form-input, select.form-input, textarea.form-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
    border-radius: 8px !important;
    border: 1px solid var(--border, #d8d8d8) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
input.form-input:focus, select.form-input:focus, textarea.form-input:focus,
input:focus, select:focus, textarea:focus {
    border-color: #4472ff !important;
    box-shadow: 0 0 0 3px rgba(68, 114, 255, 0.12) !important;
    outline: none !important;
}

button, .btn, .btn-app {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: transform 0.1s ease, opacity 0.15s ease !important;
}
button:active, .btn:active, .btn-app:active {
    transform: scale(0.98) !important;
}

/* Card-style panels: rounded corners + soft shadow */
.bg-white {
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Primary action buttons - accent color */
.btn-app, button[type="submit"] {
    background-color: #4472ff !important;
    color: #ffffff !important;
    border: none !important;
}
.btn-app:hover, button[type="submit"]:hover {
    background-color: #3560e6 !important;
}

/* Section headers a bit bolder */
.form-description-head {
    font-weight: 600 !important;
    color: #1a1a1a !important;
}

/* Sidebar active item - subtle accent highlight */
.sidebar a.active, nav a.router-link-active {
    background-color: rgba(68, 114, 255, 0.08) !important;
    border-radius: 8px !important;
}