@import 'tailwindcss';

@source '../views/**/*.blade.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../../app/**/*.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}

/* Base Enterprise Form Controls & Typography */
@layer base {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        border-width: 1px;
        border-style: solid;
        border-color: #CBD5E1; /* slate-300 */
        background-color: #FFFFFF;
        border-radius: 0.75rem; /* rounded-xl */
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        color: #0F172A; /* slate-900 */
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
    }

    /* Support custom padding classes like pl-10 */
    .pl-8 { padding-left: 2rem !important; }
    .pl-10 { padding-left: 2.5rem !important; }
    .pl-11 { padding-left: 2.75rem !important; }

    input[type="text"]:hover,
    input[type="email"]:hover,
    input[type="password"]:hover,
    input[type="number"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="search"]:hover,
    select:hover,
    textarea:hover {
        border-color: #94A3B8; /* slate-400 */
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    input[type="url"]:focus,
    input[type="search"]:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: #2563EB; /* blue-600 */
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
        background-color: #FFFFFF;
    }

    /* Disappear placeholder immediately upon focus/click */
    input::placeholder,
    textarea::placeholder {
        color: #94A3B8;
        font-weight: 400;
        opacity: 1;
        transition: opacity 0.12s ease-in-out, color 0.12s ease-in-out;
    }

    input:focus::placeholder,
    textarea:focus::placeholder {
        color: transparent !important;
        opacity: 0 !important;
    }

    /* Checkbox & Radio */
    input[type="checkbox"],
    input[type="radio"] {
        border-width: 1px;
        border-style: solid;
        border-color: #CBD5E1;
        border-radius: 0.375rem;
        cursor: pointer;
    }

    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background-color: #2563EB;
        border-color: #2563EB;
    }
}