/* MuFlix 2.0 — Main CSS Entry Point */
@import url('./variables.css');
@import url('./themes/dark.css');
@import url('./themes/light.css');
@import url('./reset.css');
@import url('./typography.css');
@import url('./animations.css');
@import url('./responsive.css');

/* ── Global Body ── */
body {
    background-color: var(--mf-bg);
    color: var(--mf-text);
}

/* ── App Layout ── */
.mf-app {
    display: flex;
    min-height: 100vh;
    padding-top: var(--mf-header-height);
}

.mf-main {
    flex: 1;
    margin-left: var(--mf-sidebar-width);
    padding-top: var(--mf-header-height);
    min-height: 100vh;
    transition: margin-left var(--mf-transition-base);
}

.mf-main.expanded { margin-left: 0; }

.mf-main-inner {
    padding: var(--mf-space-xl) var(--mf-space-2xl);
    max-width: var(--mf-content-max-width);
    margin: 0 auto;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mf-space-xs);
    padding: var(--mf-space-sm) var(--mf-space-lg);
    font-size: var(--mf-font-size-md);
    font-weight: var(--mf-font-weight-semibold);
    border-radius: var(--mf-radius-sm);
    transition: all var(--mf-transition-fast);
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.btn-primary { background: var(--mf-white); color: var(--mf-black); }
.btn-primary:hover { background: rgba(255,255,255,0.8); }
.btn-secondary { background: rgba(109,109,110,0.7); color: var(--mf-white); }
.btn-secondary:hover { background: rgba(109,109,110,0.5); }
.btn-accent { background: var(--mf-red); color: var(--mf-white); }
.btn-accent:hover { background: var(--mf-red-hover); }
.btn-ghost { background: transparent; color: var(--mf-text); border: 1px solid var(--mf-border); }
.btn-ghost:hover { border-color: var(--mf-border-hover); background: var(--mf-bg-surface); }
.btn-icon { padding: var(--mf-space-xs); border-radius: var(--mf-radius-full); background: transparent; color: var(--mf-text); }
.btn-icon:hover { background: rgba(255,255,255,0.1); }
.btn-lg { padding: var(--mf-space-md) var(--mf-space-xl); font-size: var(--mf-font-size-base); }
.btn-sm { padding: var(--mf-space-xxs) var(--mf-space-sm); font-size: var(--mf-font-size-sm); }

/* ── Glass Card ── */
.glass { background: var(--mf-glass-bg); -webkit-backdrop-filter: var(--mf-glass-blur); backdrop-filter: var(--mf-glass-blur); border: 1px solid var(--mf-glass-border); }

/* ── Loading Overlay ── */
.mf-loading-overlay {
    position: fixed; inset: 0; background: var(--mf-bg); z-index: var(--mf-z-loading);
    display: flex; align-items: center; justify-content: center;
}
.mf-loading-spinner {
    width: 40px; height: 40px; border: 4px solid var(--mf-gray-600);
    border-top-color: var(--mf-red); border-radius: 50%; animation: mf-spin 1s linear infinite;
}

/* ── Hidden ── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }