/*
 * Layout utilities for the M3U8 / MPD Downloader's MUI dialogs.
 *
 * The tool's Vite/React app compiles its Tailwind with important: "#root", so
 * every utility ships as `#root .flex-1`. A MUI <Dialog> portals to a direct
 * child of <body>, so none of those rules reach it - the Quality, Limitations
 * and Custom Headers dialogs render with whatever the *site* stylesheets happen
 * to define under the same class names, and with nothing at all for the rest.
 *
 * That is a both-themes bug, which is why it lives here and not in
 * m3u8-dark.css: this sheet supplies the missing layout/spacing, m3u8-dark.css
 * supplies the dark colours for the same elements (and loads after it).
 *
 * Only the 20 class names actually used inside the three dialogs are covered,
 * with Tailwind's own values. `.MuiDialog-paper .x` is (0,2,0) and outranks the
 * bare `.x` a site sheet may define.
 *
 * Loaded by resources/views/livewire/frontend/tools/m3u8-downloader.blade.php.
 * Bump the ?v= there when editing this file - /assets is served immutable.
 */

/* ---------- box model ---------- */

.MuiDialog-paper .space-y-6 > :not(template) ~ :not(template) { margin-top: 1.5rem; }
.MuiDialog-paper .flex-1     { flex: 1 1 0%; }
.MuiDialog-paper .min-w-0    { min-width: 0; }
.MuiDialog-paper .items-start { align-items: flex-start; }
.MuiDialog-paper .grid       { display: grid; }
.MuiDialog-paper .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.MuiDialog-paper .w-6        { width: 1.5rem; }
.MuiDialog-paper .h-6        { height: 1.5rem; }
.MuiDialog-paper .mr-4       { margin-right: 1rem; }
.MuiDialog-paper .py-6       { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* Tabler defines .p-4 as `padding: 2rem !important` - half a dialog of padding
   on the saved-header row, and the only one of these names that needs
   !important back to reach Tailwind's 1rem. */
.MuiDialog-paper .p-4        { padding: 1rem !important; }

.MuiDialog-paper .rounded-lg   { border-radius: .5rem; }
.MuiDialog-paper .rounded-xl   { border-radius: .75rem; }
.MuiDialog-paper .rounded-full { border-radius: 9999px; }

/* Without this a long header value wraps to a second line instead of
   ellipsising - it needs flex-1 + min-w-0 above to have a width to truncate
   against, so the three only work as a set. */
.MuiDialog-paper .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.MuiDialog-paper .transition-colors {
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
}

/* ---------- surfaces ---------- */

/* `.border` is another Tabler shorthand carrying !important -
   `border: 1px solid rgba(98,105,118,.16) !important` - so it sets the *colour*
   as well and .border-gray-100 has to shout back to be heard. */
.MuiDialog-paper .bg-gray-50      { background-color: #F9FAFB; }
.MuiDialog-paper .border-gray-100 { border-color: #F3F4F6 !important; }
.MuiDialog-paper .text-gray-400   { color: #9CA3AF; }

/* ---------- hover states ---------- */

.MuiDialog-paper .hover\:bg-gray-100:hover  { background-color: #F3F4F6; }
.MuiDialog-paper .hover\:bg-red-50:hover    { background-color: #FEF2F2; }
.MuiDialog-paper .hover\:text-red-500:hover { color: #EF4444; }