/*
 * Shared form standard for all Blade portals (admin, franchisee, provider, customer, auth).
 * Plain CSS: served as-is, no build step. Tailwind is injected by its CDN script after this
 * file, so rules here rely on element+attribute specificity (0,1,1+) to beat single utility
 * classes such as .text-sm or .rounded-md.
 */

:root {
    --ui-accent: #4f46e5;
    --ui-accent-ring: rgb(99 102 241 / 0.35);
    --ui-accent-border: #6366f1;
    --ui-border: #d1d5db;
    --ui-danger: #ef4444;
    --ui-danger-ring: rgb(239 68 68 / 0.3);
    --ui-radius: 0.5rem;
    --ui-field-min-h: 2.5rem;
    --ui-field-min-h-touch: 2.75rem;
}

/* ── Text-like fields ─────────────────────────────────────────────── */

input:is(:not([type]), [type="text"], [type="email"], [type="tel"], [type="password"], [type="number"],
         [type="search"], [type="url"], [type="date"], [type="datetime-local"], [type="time"],
         [type="month"], [type="week"], [type="color"]),
select:not([multiple]):not([size]) {
    min-height: var(--ui-field-min-h);
}

input:is(.rounded, .rounded-sm, .rounded-md, .rounded-xl, .rounded-2xl),
select:is(.rounded, .rounded-sm, .rounded-md, .rounded-xl, .rounded-2xl),
textarea:is(.rounded, .rounded-sm, .rounded-md, .rounded-xl, .rounded-2xl) {
    border-radius: var(--ui-radius);
}

input:is(:not([type]), [type="text"], [type="email"], [type="tel"], [type="password"], [type="number"],
         [type="search"], [type="url"], [type="date"], [type="datetime-local"], [type="time"],
         [type="month"], [type="week"]):focus,
select:focus,
textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--ui-accent-border);
    box-shadow: 0 0 0 3px var(--ui-accent-ring);
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

input:is(.is-invalid, [aria-invalid="true"]),
select:is(.is-invalid, [aria-invalid="true"]),
textarea:is(.is-invalid, [aria-invalid="true"]) {
    border-color: var(--ui-danger);
}

input:is(.is-invalid, [aria-invalid="true"]):focus,
select:is(.is-invalid, [aria-invalid="true"]):focus,
textarea:is(.is-invalid, [aria-invalid="true"]):focus {
    border-color: var(--ui-danger);
    box-shadow: 0 0 0 3px var(--ui-danger-ring);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--ui-accent);
}

/* Grouped fields (country code + number, prefix + amount) must be able to shrink on phones */
.flex > input:not([type="checkbox"]):not([type="radio"]),
.flex > select,
.flex > textarea {
    min-width: 0;
}

/* ── Phones: 16px text stops iOS Safari zooming on focus; 44px touch targets ── */

@media (max-width: 639.98px) {
    input:is(:not([type]), [type="text"], [type="email"], [type="tel"], [type="password"], [type="number"],
             [type="search"], [type="url"], [type="date"], [type="datetime-local"], [type="time"],
             [type="month"], [type="week"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    input:is(:not([type]), [type="text"], [type="email"], [type="tel"], [type="password"], [type="number"],
             [type="search"], [type="url"], [type="date"], [type="datetime-local"], [type="time"],
             [type="month"], [type="week"], [type="color"]),
    select:not([multiple]):not([size]) {
        min-height: var(--ui-field-min-h-touch);
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 1.125rem;
        min-height: 1.125rem;
    }
}

/* ── Responsive helpers used by the portal layouts ───────────────── */

.ui-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ui-drawer-is-open {
    transform: translateX(0) !important;
}

@media (max-width: 1023.98px) {
    body.ui-drawer-open {
        overflow: hidden;
    }

    .ui-main {
        overflow-wrap: break-word;
    }
}

[x-cloak] {
    display: none !important;
}

/* ── Dark mode (admin portal toggles html.dark) ──────────────────── */

html.dark input:is(:not([type]), [type="text"], [type="email"], [type="tel"], [type="password"], [type="number"],
                   [type="search"], [type="url"], [type="date"], [type="datetime-local"], [type="time"],
                   [type="month"], [type="week"]),
html.dark select,
html.dark textarea {
    background-color: #374151 !important;
    border-color: #4b5563;
    color: #f3f4f6 !important;
    color-scheme: dark;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #9ca3af;
}

html.dark .section-card,
html.dark .info-card {
    background-color: #1f2937 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

html.dark .section-header,
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #374151 !important;
}

html.dark .bg-gray-50  { background-color: #1a2332 !important; }
html.dark .bg-gray-100 { background-color: #374151 !important; }
html.dark .bg-gray-200 { background-color: #4b5563 !important; }

html.dark .text-black,
html.dark .text-gray-900,
html.dark .text-gray-800 { color: #f3f4f6 !important; }
html.dark .text-gray-700 { color: #e5e7eb !important; }
html.dark .text-gray-600 { color: #d1d5db !important; }
html.dark .text-gray-500 { color: #9ca3af !important; }

html.dark .peer:checked ~ [class*="peer-checked:bg-"] {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

html.dark .document-upload-area {
    border-color: #4b5563;
}

html.dark .document-upload-area:hover {
    background-color: rgba(99, 102, 241, 0.08);
}

/* Pale tinted panels (bg-*-50/100) with dark text become translucent tints with light text */
html.dark .bg-slate-50, html.dark .bg-slate-100 { background-color: rgba(148,163,184,.12) !important; }
html.dark .border-slate-100, html.dark .border-slate-200 { border-color: rgba(148,163,184,.3) !important; }
html.dark .text-slate-700, html.dark .text-slate-800, html.dark .text-slate-900 { color: #cbd5e1 !important; }
html.dark .bg-indigo-50, html.dark .bg-indigo-100 { background-color: rgba(129,140,248,.12) !important; }
html.dark .border-indigo-100, html.dark .border-indigo-200 { border-color: rgba(129,140,248,.3) !important; }
html.dark .text-indigo-700, html.dark .text-indigo-800, html.dark .text-indigo-900 { color: #a5b4fc !important; }
html.dark .bg-blue-50, html.dark .bg-blue-100 { background-color: rgba(96,165,250,.12) !important; }
html.dark .border-blue-100, html.dark .border-blue-200 { border-color: rgba(96,165,250,.3) !important; }
html.dark .text-blue-700, html.dark .text-blue-800, html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .bg-sky-50, html.dark .bg-sky-100 { background-color: rgba(56,189,248,.12) !important; }
html.dark .border-sky-100, html.dark .border-sky-200 { border-color: rgba(56,189,248,.3) !important; }
html.dark .text-sky-700, html.dark .text-sky-800, html.dark .text-sky-900 { color: #7dd3fc !important; }
html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(74,222,128,.12) !important; }
html.dark .border-green-100, html.dark .border-green-200 { border-color: rgba(74,222,128,.3) !important; }
html.dark .text-green-700, html.dark .text-green-800, html.dark .text-green-900 { color: #86efac !important; }
html.dark .bg-emerald-50, html.dark .bg-emerald-100 { background-color: rgba(52,211,153,.12) !important; }
html.dark .border-emerald-100, html.dark .border-emerald-200 { border-color: rgba(52,211,153,.3) !important; }
html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #6ee7b7 !important; }
html.dark .bg-teal-50, html.dark .bg-teal-100 { background-color: rgba(45,212,191,.12) !important; }
html.dark .border-teal-100, html.dark .border-teal-200 { border-color: rgba(45,212,191,.3) !important; }
html.dark .text-teal-700, html.dark .text-teal-800, html.dark .text-teal-900 { color: #5eead4 !important; }
html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(248,113,113,.12) !important; }
html.dark .border-red-100, html.dark .border-red-200 { border-color: rgba(248,113,113,.3) !important; }
html.dark .text-red-700, html.dark .text-red-800, html.dark .text-red-900 { color: #fca5a5 !important; }
html.dark .bg-rose-50, html.dark .bg-rose-100 { background-color: rgba(251,113,133,.12) !important; }
html.dark .border-rose-100, html.dark .border-rose-200 { border-color: rgba(251,113,133,.3) !important; }
html.dark .text-rose-700, html.dark .text-rose-800, html.dark .text-rose-900 { color: #fda4af !important; }
html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(250,204,21,.12) !important; }
html.dark .border-yellow-100, html.dark .border-yellow-200 { border-color: rgba(250,204,21,.3) !important; }
html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #fde047 !important; }
html.dark .bg-amber-50, html.dark .bg-amber-100 { background-color: rgba(251,191,36,.12) !important; }
html.dark .border-amber-100, html.dark .border-amber-200 { border-color: rgba(251,191,36,.3) !important; }
html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(251,146,60,.12) !important; }
html.dark .border-orange-100, html.dark .border-orange-200 { border-color: rgba(251,146,60,.3) !important; }
html.dark .text-orange-700, html.dark .text-orange-800, html.dark .text-orange-900 { color: #fdba74 !important; }
html.dark .bg-purple-50, html.dark .bg-purple-100 { background-color: rgba(192,132,252,.12) !important; }
html.dark .border-purple-100, html.dark .border-purple-200 { border-color: rgba(192,132,252,.3) !important; }
html.dark .text-purple-700, html.dark .text-purple-800, html.dark .text-purple-900 { color: #d8b4fe !important; }
html.dark .bg-pink-50, html.dark .bg-pink-100 { background-color: rgba(244,114,182,.12) !important; }
html.dark .border-pink-100, html.dark .border-pink-200 { border-color: rgba(244,114,182,.3) !important; }
html.dark .text-pink-700, html.dark .text-pink-800, html.dark .text-pink-900 { color: #f9a8d4 !important; }
html.dark .bg-violet-50, html.dark .bg-violet-100 { background-color: rgba(167,139,250,.12) !important; }
html.dark .border-violet-100, html.dark .border-violet-200 { border-color: rgba(167,139,250,.3) !important; }
html.dark .text-violet-700, html.dark .text-violet-800, html.dark .text-violet-900 { color: #c4b5fd !important; }
html.dark .bg-cyan-50, html.dark .bg-cyan-100 { background-color: rgba(34,211,238,.12) !important; }
html.dark .border-cyan-100, html.dark .border-cyan-200 { border-color: rgba(34,211,238,.3) !important; }
html.dark .text-cyan-700, html.dark .text-cyan-800, html.dark .text-cyan-900 { color: #67e8f9 !important; }