/*
 * Dark theme for the M3U8 / MPD Downloader.
 *
 * The tool is a self-contained Vite/React app (hls-downloader-custom) that was
 * built light-only - no `dark:` variants, no `darkMode` in its tailwind config -
 * so it stayed white while the rest of the site switched. This sheet supplies
 * the dark half from outside the bundle, which means it survives a rebuild of
 * the app: the bundle's own hashed CSS can be regenerated without touching it.
 *
 * Two scopes are needed, and missing the second is the easy mistake:
 *
 *   body.theme-dark #root ...        the app itself
 *   body.theme-dark .Mui... ...      the quality / limitations dialogs, which
 *                                    are MUI <Dialog>s and portal to a direct
 *                                    child of <body>, outside #root
 *
 * Specificity: the app's Tailwind is compiled with important: "#root", so its
 * utilities land as `#root .text-gray-500` (one id, one class). Every rule here
 * adds `body.theme-dark`, which outranks that without needing !important.
 *
 * Colours come from the site's brand tokens. The app's original indigo/violet
 * palette was replaced with brand blue in the bundle itself (light mode), so
 * both themes now read as one product.
 *
 * Loaded by resources/views/livewire/frontend/tools/m3u8-downloader.blade.php.
 * Bump the ?v= there when editing this file - /assets is served immutable.
 */

/* ---------- ground ---------- */

body.theme-dark #root .m3u8-bg {
    background: linear-gradient(135deg, #001F4D 0%, #0F172A 100%);
}

body.theme-dark #root {
    color: var(--at-body-fg, #E2E8F0);
}

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

body.theme-dark #root .glass-card,
body.theme-dark #root .download-item {
    background: var(--at-surface, #1E293B);
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .45);
}

body.theme-dark #root .download-item-content {
    border-top-color: rgba(255, 255, 255, .09);
}

body.theme-dark #root .stat-card,
body.theme-dark #root .url-display {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .09);
    color: var(--at-muted-fg, #94A3B8);
}

body.theme-dark #root .stat-card .label {
    color: var(--at-muted-fg, #94A3B8);
}

body.theme-dark #root .stat-card .value {
    color: var(--at-body-fg, #E2E8F0);
}

/* ---------- form controls ---------- */

/* background-COLOR, not the `background` shorthand: the shorthand also resets
   background-repeat and background-position, which strips the base rule's
   `no-repeat` / `right 12px center` off .modern-select and tiles its chevron
   data-URI across the whole field. */
body.theme-dark #root .modern-input,
body.theme-dark #root .modern-select,
body.theme-dark #root .modern-textarea {
    background-color: var(--at-body-bg, #0F172A);
    border-color: rgba(255, 255, 255, .16);
    color: var(--at-body-fg, #E2E8F0);
}

body.theme-dark #root .modern-input::placeholder,
body.theme-dark #root .modern-textarea::placeholder {
    color: #64748B;
}

body.theme-dark #root .modern-input:focus,
body.theme-dark #root .modern-select:focus,
body.theme-dark #root .modern-textarea:focus {
    border-color: var(--at-primary-text, #7DB0FF);
}

/* The chevron is a data-URI, so the stroke colour cannot come from a variable -
   it has to be a second copy with a lighter stroke. */
body.theme-dark #root .modern-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

body.theme-dark #root .btn-secondary {
    background: var(--at-surface, #1E293B);
    color: var(--at-body-fg, #E2E8F0);
    border-color: rgba(255, 255, 255, .2);
}

body.theme-dark #root .btn-secondary:hover {
    border-color: var(--at-primary-text, #7DB0FF);
}

/* ---------- tabs, progress, badges ---------- */

body.theme-dark #root .tab-pills {
    background: rgba(255, 255, 255, .06);
}

body.theme-dark #root .tab-pill {
    color: var(--at-muted-fg, #94A3B8);
}

body.theme-dark #root .tab-pill.active {
    background: var(--at-surface, #1E293B);
    color: var(--at-primary-text, #7DB0FF);
}

body.theme-dark #root .progress-container {
    background: rgba(255, 255, 255, .12);
}

body.theme-dark #root .status-badge.pending {
    background: rgba(255, 255, 255, .08);
    color: var(--at-muted-fg, #94A3B8);
}

body.theme-dark #root .status-badge.downloading,
body.theme-dark #root .icon-circle.primary,
body.theme-dark #root .feature-item {
    background: var(--at-primary-soft, #12244A);
    color: var(--at-primary-text, #7DB0FF);
}

body.theme-dark #root .status-badge.success,
body.theme-dark #root .icon-circle.success {
    background: #064e3b;
    color: #6ee7b7;
}

body.theme-dark #root .status-badge.error {
    background: #4c0519;
    color: #fca5a5;
}

body.theme-dark #root .link-primary {
    color: var(--at-primary-text, #7DB0FF);
}

/* ---------- tailwind utilities the app uses ---------- */

body.theme-dark #root .text-gray-900 { color: var(--at-body-fg, #E2E8F0); }
body.theme-dark #root .text-gray-700 { color: #CBD5E1; }
body.theme-dark #root .text-gray-600,
body.theme-dark #root .text-gray-500 { color: var(--at-muted-fg, #94A3B8); }
body.theme-dark #root .text-gray-400 { color: #64748B; }

body.theme-dark #root .bg-gray-50,
body.theme-dark #root .bg-gray-100 { background-color: rgba(255, 255, 255, .06); }

body.theme-dark #root .border-gray-100,
body.theme-dark #root .border-gray-300 { border-color: rgba(255, 255, 255, .12); }

body.theme-dark #root .bg-red-50,
body.theme-dark #root .bg-red-100 { background-color: rgba(220, 38, 38, .16); }
body.theme-dark #root .border-red-200 { border-color: rgba(248, 113, 113, .38); }
body.theme-dark #root .text-red-700,
body.theme-dark #root .text-red-600,
body.theme-dark #root .text-red-500 { color: #fca5a5; }

body.theme-dark #root .bg-green-100 { background-color: rgba(16, 185, 129, .18); }
body.theme-dark #root .text-green-700,
body.theme-dark #root .text-green-600 { color: #6ee7b7; }

body.theme-dark #root .bg-purple-100 { background-color: var(--at-primary-soft, #12244A); }
body.theme-dark #root .text-purple-600 { color: var(--at-primary-text, #7DB0FF); }

/* ---------- MUI dialogs (portalled outside #root) ---------- */

body.theme-dark .MuiDialog-paper,
body.theme-dark .MuiPaper-root {
    background-color: var(--at-surface, #1E293B);
    background-image: none;
    color: var(--at-body-fg, #E2E8F0);
}

body.theme-dark .MuiDialogTitle-root,
body.theme-dark .MuiDialogContent-root,
body.theme-dark .MuiDialogContentText-root {
    color: var(--at-body-fg, #E2E8F0);
}

body.theme-dark .MuiBackdrop-root {
    background-color: rgba(2, 6, 23, .72);
}

/* The app's own Tailwind is scoped to #root and never reaches the portalled
   dialog (see the utility block below for what leaks in from elsewhere) -
   these are the dialog's own controls. */
body.theme-dark .MuiDialog-paper .btn-secondary {
    background: rgba(255, 255, 255, .06);
    color: var(--at-body-fg, #E2E8F0);
    border-color: rgba(255, 255, 255, .2);
}

body.theme-dark .MuiDialog-paper .btn-secondary:hover {
    border-color: var(--at-primary-text, #7DB0FF);
}

body.theme-dark .MuiIconButton-root,
body.theme-dark .MuiDialog-paper button svg {
    color: var(--at-muted-fg, #94A3B8);
}

/* ---------- utility classes inside the portalled dialogs ---------- */

/*
 * The app's Tailwind is compiled with important: "#root", so none of its
 * utilities reach a MUI <Dialog> - the dialog portals to a direct child of
 * <body>. What DOES reach it is the site-wide sheet
 * assets/css/index-f728637a.css (loaded by frontend/pages.blade.php for every
 * page), which ships a handful of the same utility names UNSCOPED:
 *
 *   .bg-gray-100  .bg-gray-900  .text-gray-500  .text-gray-600
 *   .text-gray-700  .text-gray-900  .text-red-500
 *
 * So dialog text keeps its light-mode greys on the dark paper: the Custom
 * Headers dialog rendered #111827 on #1E293B (about 1.05:1) for a saved header
 * name and #374151 for the "Custom Headers (n)" heading. The `#root`-scoped
 * rules further up this file cannot reach these elements - they have to be
 * repeated in the dialog scope.
 *
 * body.theme-dark .MuiDialog-paper .x is (0,3,1) and outranks the bare .x.
 */

body.theme-dark .MuiDialog-paper .text-gray-900 { color: var(--at-body-fg, #E2E8F0); }
body.theme-dark .MuiDialog-paper .text-gray-700 { color: #CBD5E1; }
body.theme-dark .MuiDialog-paper .text-gray-600,
body.theme-dark .MuiDialog-paper .text-gray-500 { color: var(--at-muted-fg, #94A3B8); }

/* Numbered badges in the Limitations dialog - a light-grey chip on dark paper. */
body.theme-dark .MuiDialog-paper .bg-gray-100 { background-color: rgba(255, 255, 255, .08); }

/* The dialog's own text inputs. `.modern-input` is plain CSS, not a Tailwind
   utility, so it is unscoped too and keeps `background: white` - while the text
   colour is inherited from .MuiDialog-paper (#E2E8F0). Typed header names and
   values were white on white. background-COLOR, not the shorthand, for the same
   reason as the #root block above. */
body.theme-dark .MuiDialog-paper .modern-input,
body.theme-dark .MuiDialog-paper .modern-select,
body.theme-dark .MuiDialog-paper .modern-textarea {
    background-color: var(--at-body-bg, #0F172A);
    border-color: rgba(255, 255, 255, .16);
    color: var(--at-body-fg, #E2E8F0);
}

body.theme-dark .MuiDialog-paper .modern-input::placeholder,
body.theme-dark .MuiDialog-paper .modern-textarea::placeholder {
    color: #64748B;
}

body.theme-dark .MuiDialog-paper .modern-input:focus,
body.theme-dark .MuiDialog-paper .modern-select:focus,
body.theme-dark .MuiDialog-paper .modern-textarea:focus {
    border-color: var(--at-primary-text, #7DB0FF);
}

/* Dark half of the surfaces and hover states supplied by m3u8-dialog.css,
   which carries the layout for these same elements in both themes. */

body.theme-dark .MuiDialog-paper .bg-gray-50      { background-color: rgba(255, 255, 255, .06); }
body.theme-dark .MuiDialog-paper .border-gray-100 { border-color: rgba(255, 255, 255, .12) !important; }

/* #64748B - the value the #root block gives .text-gray-400 - is only 3.0:1 on
   the dialog paper, and this class carries the "No custom headers configured"
   empty state, not just the trash glyph. Muted grey instead: 5.71:1. */
body.theme-dark .MuiDialog-paper .text-gray-400 { color: var(--at-muted-fg, #94A3B8); }

/* The dialog's "your browser will not send this header" warning. index-f728637a
   ships .text-red-500 unscoped too, and its #EF4444 is only 3.89:1 on the dark
   paper. */
body.theme-dark .MuiDialog-paper .text-red-500 { color: #fca5a5; }

body.theme-dark .MuiDialog-paper .hover\:bg-gray-100:hover  { background-color: rgba(255, 255, 255, .08); }
body.theme-dark .MuiDialog-paper .hover\:bg-red-50:hover    { background-color: rgba(220, 38, 38, .16); }
body.theme-dark .MuiDialog-paper .hover\:text-red-500:hover { color: #fca5a5; }

/* The `button svg` rule above pins the glyph's colour on the svg itself, so the
   button's :hover colour cannot cascade into it - the hover has to be restated
   at (0,4,1) to win. */
body.theme-dark .MuiDialog-paper .hover\:text-red-500:hover svg { color: #fca5a5; }

/* ---------- mobile ---------- */

@media (max-width: 640px) {
    /* The light build flattens the gradient to #f9fafb here; match that move. */
    body.theme-dark #root .m3u8-bg {
        background: var(--at-body-bg, #0F172A);
    }

    body.theme-dark #root .glass-card {
        border-left: 0;
        border-right: 0;
    }
}