/*
 * LocaZ UI: one look for every panel page (tenant, SuperAdmin, legacy dashboards).
 * The pages are written with Tailwind utilities (CDN); these rules only refine them. They are scoped to
 * body.ui (and mostly to <main>) so they win over the utilities without !important, and never touch the
 * dark sidebars or the public pages. Brand colours come from the --brand-* variables the tenant layout
 * sets from the tenant's own colour; the SuperAdmin layout sets its own.
 */

:root {
    --ui-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-bg: #f4f6fb;
    --ui-surface: #ffffff;
    --ui-border: rgba(15, 23, 42, 0.08);
    --ui-border-strong: rgba(15, 23, 42, 0.14);
    --ui-text: #0f172a;
    --ui-muted: #64748b;
    --ui-radius: 16px;
    --ui-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -18px rgba(15, 23, 42, 0.18);
    --ui-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.05), 0 18px 40px -20px rgba(15, 23, 42, 0.28);
    --brand: #4f46e5;
    --brand-rgb: 79, 70, 229;
    --brand-50: #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
}

/* ---------- Base ---------- */
body.ui {
    font-family: var(--ui-font);
    color: var(--ui-text);
    background-color: var(--ui-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.ui main {
    background:
        radial-gradient(900px 320px at 100% -80px, rgba(var(--brand-rgb), 0.07), transparent 70%),
        radial-gradient(700px 260px at -10% -60px, rgba(var(--brand-rgb), 0.05), transparent 70%),
        var(--ui-bg);
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, 0.18) transparent;
}
body.ui main::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui main::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
body.ui main::-webkit-scrollbar-thumb:hover { background-color: rgba(15, 23, 42, 0.28); }
body.ui ::selection { background: rgba(var(--brand-rgb), 0.18); }
body.ui main :is(h1, h2, h3) { letter-spacing: -0.02em; }
body.ui main .text-gray-900, body.ui main .text-slate-900 { color: var(--ui-text); }

/* ---------- Cards ---------- */
body.ui main .bg-white:is([class*="shadow"], .border):not(.rounded-full):not(input):not(select):not(textarea):not(button):not(a):not(span) {
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
}
body.ui main .bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md, .rounded):is([class*="shadow"], .border):not(input):not(select):not(textarea):not(button):not(a):not(span) {
    border-radius: var(--ui-radius);
}
body.ui main .bg-white[class*="shadow"].overflow-hidden > table,
body.ui main .bg-white[class*="shadow"] > .overflow-x-auto > table { border-radius: 0; }
/* Cards that are links lift on hover */
body.ui main a.bg-white:is([class*="shadow"], .border):not(.rounded-full) {
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.ui main a.bg-white:is([class*="shadow"], .border):not(.rounded-full):hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-shadow-hover);
    border-color: rgba(var(--brand-rgb), 0.25);
}
body.ui main a.bg-white:is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-md):is([class*="shadow"], .border) { border-radius: var(--ui-radius); }

/* ---------- Tables (the calendar widget keeps its own grid) ---------- */
body.ui main table:not(.fc *):not([class*="fc-"]) { border-collapse: separate; border-spacing: 0; }
body.ui main table:not(.fc *):not([class*="fc-"]) thead th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ui-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--ui-border);
    white-space: nowrap;
}
body.ui main table:not(.fc *):not([class*="fc-"]) thead tr { background: transparent; }
body.ui main table:not(.fc *):not([class*="fc-"]) tbody tr { transition: background-color .12s ease; }
body.ui main table:not(.fc *):not([class*="fc-"]) tbody tr:hover { background-color: rgba(var(--brand-rgb), 0.035); }
body.ui main table:not(.fc *):not([class*="fc-"]) tbody td { border-color: rgba(15, 23, 42, 0.06); }
body.ui main table:not(.fc *):not([class*="fc-"]) tbody > tr + tr > td { border-top: 1px solid rgba(15, 23, 42, 0.06); }
body.ui main :is(.divide-y, .divide-gray-200, .divide-gray-100, .divide-slate-100) > :not([hidden]) ~ :not([hidden]) { border-color: rgba(15, 23, 42, 0.06); }

/* ---------- Form controls ---------- */
body.ui main :is(
    input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"],
    input[type="time"], input[type="search"], input[type="tel"], input[type="password"], input[type="url"],
    input[type="month"], input:not([type]), select, textarea
):not(.sr-only) {
    border-color: rgb(203 213 225 / 0.9);
    border-radius: 12px;
    background-color: #fff;
    color: var(--ui-text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.ui main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.sr-only):hover {
    border-color: rgb(148 163 184);
}
body.ui main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.sr-only):focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.14);
    --tw-ring-shadow: 0 0 #0000;
}
body.ui main :is(input, select, textarea)::placeholder { color: #94a3b8; }
body.ui main :is(input, select, textarea):disabled { background-color: #f1f5f9; color: #94a3b8; cursor: not-allowed; }
body.ui main select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right .6rem center;
    background-repeat: no-repeat;
    background-size: 1.1em;
    padding-right: 2.2rem;
}
body.ui main input[type="checkbox"]:not(.sr-only), body.ui main input[type="radio"]:not(.sr-only) { accent-color: var(--brand-600); }
body.ui main label { color: #334155; }

/* ---------- Buttons ---------- */
body.ui main :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-indigo-600, .bg-blue-500) {
    background-color: var(--brand-600);
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 18px -10px rgba(var(--brand-rgb), 0.7);
}
body.ui main :is(button, a, input[type="submit"]):is(.bg-blue-600, .bg-indigo-600, .bg-blue-500):hover { background-color: var(--brand-700); }
body.ui main :is(button, a):is(.text-blue-600, .text-indigo-600):not([class*="bg-"]) { color: var(--brand-600); }
body.ui main :is(button, a):is(.text-blue-600, .text-indigo-600):not([class*="bg-"]):hover { color: var(--brand-700); }
body.ui main :is(button, a, input[type="submit"]):is(.rounded, .rounded-md, .rounded-lg):not(.rounded-full) { border-radius: 11px; }
body.ui main :is(button, a, input[type="submit"]):is([class*="bg-"], .border):not(.rounded-full) {
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease, color .15s ease;
}
body.ui main :is(button, a):is([class*="bg-"]):not(.rounded-full):not(:disabled):active { transform: translateY(1px); }
/* The old "UPPERCASE TRACKING-WIDEST" buttons read like shouting: normal case, same weight */
body.ui main :is(button, a).uppercase:is(.tracking-widest, .tracking-wider) {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.875rem;
    font-weight: 600;
}
body.ui main :is(button, a, input[type="submit"]):focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.22);
}

/* ---------- Badges / pills ---------- */
body.ui main span.rounded-full:is([class*="bg-"][class*="-100"], [class*="bg-"][class*="-50"]) {
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

/* ---------- Pagination (Laravel tailwind view) ---------- */
body.ui main nav[role="navigation"] :is(a, span[aria-current] > span, span[aria-disabled] > span) { border-color: var(--ui-border); }
body.ui main nav[role="navigation"] span[aria-current="page"] > span {
    background: var(--brand-600);
    color: #fff;
    border-color: var(--brand-600);
}

/* ---------- Page header (layouts) ---------- */
.ui-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--ui-border);
}
.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--ui-border);
    background: #fff;
    color: #334155;
}
.ui-chip-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

/* ---------- Flash alerts (layouts) ---------- */
.ui-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    border: 1px solid;
    font-size: .9rem;
    line-height: 1.45;
    box-shadow: 0 8px 24px -18px rgba(15, 23, 42, .35);
    animation: ui-alert-in .25s ease-out;
}
.ui-alert-icon { flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-size: .85rem; font-weight: 700; }
.ui-alert-body { flex: 1; min-width: 0; overflow-wrap: anywhere; padding-top: .1rem; }
.ui-alert-close { flex-shrink: 0; opacity: .5; font-size: 1.1rem; line-height: 1; padding: .1rem .25rem; border-radius: 6px; }
.ui-alert-close:hover { opacity: 1; background: rgba(15, 23, 42, .06); }
.ui-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.ui-alert-success .ui-alert-icon { background: #dcfce7; color: #15803d; }
.ui-alert-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.ui-alert-error .ui-alert-icon { background: #fee2e2; color: #b91c1c; }
.ui-alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ui-alert-warning .ui-alert-icon { background: #fef3c7; color: #b45309; }
.ui-alert-info { background: #f0f9ff; border-color: #bae6fd; color: #075985; }
.ui-alert-info .ui-alert-icon { background: #e0f2fe; color: #0369a1; }
@keyframes ui-alert-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ui-alert { animation: none; }
    body.ui main a.bg-white:hover { transform: none; }
}