/* --- Premium Custom Scrollbar System --- */

/* Firefox standard properties */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.45) transparent;
}

html.dark, html.dark body, html.dark * {
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 139, 250, 0.45) transparent;
}

/* Universal WebKit Scrollbars */
*::-webkit-scrollbar,
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.6) 0%, rgba(99, 102, 241, 0.75) 100%);
    border-radius: 9999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.25s ease;
}

*::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8b5cf6 0%, #4f46e5 100%);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}

*::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(180deg, #7c3aed 0%, #4338ca 100%);
}

*::-webkit-scrollbar-corner,
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dedicated Sidebar Scrollbar (Frosted translucent white) */
.sidebar *::-webkit-scrollbar,
.sidebar nav::-webkit-scrollbar,
#sidebar-menu-scroll-area::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.sidebar *::-webkit-scrollbar-track,
.sidebar nav::-webkit-scrollbar-track,
#sidebar-menu-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar *::-webkit-scrollbar-thumb,
.sidebar nav::-webkit-scrollbar-thumb,
#sidebar-menu-scroll-area::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 9999px;
}

.sidebar *::-webkit-scrollbar-thumb:hover,
.sidebar nav::-webkit-scrollbar-thumb:hover,
#sidebar-menu-scroll-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.55);
}

.sidebar, .sidebar * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

/* Utility: Custom Slim Scrollbars */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.5);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(59, 130, 246, 0.75);
}

.custom-scrollbar-slim::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.custom-scrollbar-slim::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
    border-radius: 9999px;
}

/* Utility: Hide scrollbar while keeping scroll functionality */
.no-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.no-scrollbar,
.hide-scrollbar {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

body {
    background: linear-gradient(-45deg, #7dd3fc, #ffffff, #38bdf8, #ffffff, #7dd3fc) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 10s ease infinite !important;
    background-attachment: fixed !important;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.padB{
    margin-bottom: 20px;
}
.profile-image-btn {
    transition: transform 0.2s ease;
}
.profile-image-btn:hover {
    transform: scale(1.1);
}
.locked-input {
  background-color: #cacaca98; /* light gray */
  color: #6b7280;            /* gray-600 */
  cursor: not-allowed;            /* keep it visible even when disabled */
}
.progress-bar-container {
  display: flex;
  height: 16px;
  width: 100%;
  background-color: #e5e7eb; /* Light gray base */
  border-radius: 9999px; /* Full pill shape */
  overflow: hidden;
}

.progress-segment {
  height: 100%;
}

.progress-segment.correct {
  background-color: #4ade80; /* Green */
}

.progress-segment.incorrect {
  background-color: #f87171; /* Red */
}

.progress-segment.unanswered {
  background-color: #cbd5e1; /* Gray */
}

/* select */

/* --- The Wrapper --- */
.custom-select-wrapper {
  position: relative; /* This is crucial for positioning the options */
  width: 250px;
  font-family: Arial, sans-serif;
}

/* --- Hide the Original Select --- */
.original-select {
  display: none; /* Hide it completely! */
}

/* --- The Custom Select Box (The Trigger) --- */
.select-custom {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.select-custom:hover {
  border-color: #888888;
}

.select-custom.open {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.select-custom__trigger {
  color: #555;
}

/* --- The Custom Arrow --- */
.arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #555;
  transition: transform 0.3s ease;
}

.select-custom.open .arrow {
  transform: rotate(180deg); /* Flip the arrow when open */
}

/* --- The Custom Options Panel --- */
.select-options {
  position: absolute;
  top: 110%; /* Position it just below the custom select box */
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  overflow: hidden; /* Ensures the border-radius is respected by children */
  display: none; /* Hidden by default */
}

.select-options.open {
  display: block; /* Shown when the 'open' class is added */
}

/* --- Individual Custom Option --- */
.select-option {
  padding: 8px 15px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.select-option:hover {
  background-color: #007bff2c;
}

.select-option.selected {
  background-color: #007bff;
  color: white;
}

.shadow-bevel-strong {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3),
              inset -3px -3px 6px rgba(255,255,255,0.8);
}

/* --- Premium Interactive Sidebar & Header --- */

/* Sidebar Animated Gradient Background: Blue on top, Violet at the bottom */
.sidebar {
    background-image: linear-gradient(180deg, #1d4ed8 0%, #2563eb 25%, #4f46e5 60%, #7c3aed 90%, #6d28d9 100%) !important;
    background-size: 100% 200% !important;
    animation: sidebarGradientShift 15s ease infinite !important;
    transition: all 0.3s ease !important;
    box-shadow: 4px 0 25px rgba(99, 102, 241, 0.12) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow-x: hidden !important; /* Remove horizontal scrollbar */
    z-index: 50 !important;
}

/* Mobile Sidebar Backdrops/Overlays */
#overlay, #sidebarOverlay, #admin-sidebar-overlay, #sr-sidebar-overlay, #quiz-sidebar-overlay, #sim-sidebar-overlay {
    z-index: 45 !important;
}

@keyframes sidebarGradientShift {
    0% { background-position: 50% 0%; }
    50% { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}

/* Remove horizontal scrollbars on scrollable elements */
.sidebar nav, #sidebar-menu-scroll-area {
    overflow-x: hidden !important;
}

/* Remove the blue line under MedicaDashboard and above Accueil */
.sidebar > div:first-child {
    border-bottom: none !important;
}

/* Sidebar Item Base Styles & Interactions */
.sidebar-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    width: calc(100% - 24px) !important; /* Make all items exactly the same size */
    display: flex !important;
    align-items: center !important;
}

/* Sidebar Hover Effect */
.sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    transform: translateX(4px) translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    color: #ffffff !important;
}

/* Active Sidebar State (Glassmorphism + Accent Border) */
.sidebar-item.bg-blue-900 {
    background-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 15px rgba(0, 0, 0, 0.12) !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Active Accent Indicator (glowing bar on left) */
.sidebar-item.bg-blue-900::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 4px !important;
    background-color: #38bdf8 !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
}

/* Notification Alert Badge styling */
#notification-count {
    background: linear-gradient(135deg, #38bdf8, #818cf8) !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Custom Dropdown Toggle Indicator (Replacing Chevron with interactive Rotating Plus icon) */
.sidebar-item .fa-chevron-down {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-item .fa-chevron-down::before {
    content: "\f067" !important; /* FontAwesome Plus (+) icon code */
    font-weight: 900 !important;
}

/* Beautiful diagonal rotation when open (plus becomes cross/x) */
.sidebar-item .fa-chevron-down.rotate-180 {
    transform: rotate(135deg) !important;
    color: #38bdf8 !important;
}




/* Dropdown Sub-menu Indentation & Styling */
.sidebar div[id$="Dropdown"] a,
.sidebar div[id$="dropdown"] a {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 8px !important;
    padding-left: 14px !important;
    margin-left: 28px !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    position: relative !important;
}

.sidebar div[id$="Dropdown"] a:hover,
.sidebar div[id$="dropdown"] a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateX(4px) !important;
    padding-left: 18px !important;
}

/* Logout Container & Button same theme styling */
.sidebar > div:last-child {
    background: transparent !important;
    background-image: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar #logoutBtn {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left: none !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar #logoutBtn:hover {
    background-color: rgba(239, 68, 68, 0.2) !important; /* Soft premium red hover for logout */
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #ef4444 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.sidebar #logoutBtn:hover .sidebar-icon {
    color: #ef4444 !important;
    transform: translateX(2px) !important;
}

/* Premium Floating Glassmorphic Header - Sticky */
header, header.bg-white {
    position: sticky !important;
    top: 0.75rem !important;
    z-index: 30 !important;
    margin: 0.75rem 1.5rem 0.5rem 1.5rem !important;
    border-radius: 20px !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(229, 231, 235, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0.85rem 1.75rem !important;
}

@media (max-width: 640px) {
    header, header.bg-white {
        margin: 0.5rem 0.75rem !important;
        top: 0.5rem !important;
        padding: 0.6rem 1rem !important;
        border-radius: 16px !important;
    }
}

/* Premium Header Page Title Typography */
header h2 {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #4f46e5 !important;
    transition: all 0.3s ease !important;
}

/* Mobile menu toggle */
header #menuToggle {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

header #menuToggle:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    transform: scale(1.05) !important;
}

/* Profile Pill Container */
header .flex.items-center:has(> #headerProfileImage) {
    background-color: rgba(243, 244, 246, 0.7) !important;
    border: 1px solid rgba(229, 231, 235, 0.9) !important;
    padding: 4px 14px 4px 4px !important;
    border-radius: 9999px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    position: relative !important;
}

header .flex.items-center:has(> #headerProfileImage):hover {
    background-color: rgba(243, 244, 246, 0.95) !important;
    border-color: rgba(209, 213, 219, 0.95) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

/* User online status glow dot on profile avatar */
header .flex.items-center:has(> #headerProfileImage)::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 26px !important;
    width: 9px !important;
    height: 9px !important;
    background-color: #22c55e !important;
    border: 2px solid #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.7) !important;
    transition: all 0.25s ease !important;
}

header #headerProfileImage {
    width: 30px !important;
    height: 30px !important;
    border: 2px solid rgba(255, 255, 255, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease !important;
}

header .flex.items-center:has(> #headerProfileImage):hover #headerProfileImage {
    transform: scale(1.06) !important;
}

/* Header Dark Mode Toggle Button */
header #dark-mode-toggle {
    border: 1px solid rgba(229, 231, 235, 0.9) !important;
    background-color: rgba(243, 244, 246, 0.7) !important;
    border-radius: 9999px !important;
    width: 38px !important;
    height: 38px !important;
    transition: all 0.25s ease !important;
    margin-right: 10px !important;
    cursor: pointer !important;
}

header #dark-mode-toggle:hover {
    background-color: rgba(243, 244, 246, 0.95) !important;
    border-color: rgba(209, 213, 219, 0.95) !important;
    transform: translateY(-1px) rotate(15deg) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}




/* ============================================================
   MEDICA — MOBILE RESPONSIVE STYLES
   Scope: max-width 767px only. Desktop (>=768px) is untouched.
   Philosophy:
     - No page-level horizontal overflow.
     - Wide components (tables, PDF, mindmap) scroll inside
       their own overflow-x: auto container.
     - No global * rules. Every selector is targeted.
     - !important used only where Tailwind utility classes
       or per-page inline styles must be overridden.
   ============================================================ */

/* ----------------------------------------------------------
   A · SIDEBAR — mobile navigation responsiveness
   Guarantee hidden by default on mobile, smoothly revealable.
   Supports:
     - script.js (toggles -translate-x-full & translate-x-0)
     - admin-layout.js (toggles -translate-x-full & translate-x-0)
     - notification-handler.js (toggles .active)
     - repetition-espacee-session.html (toggles -translate-x-full & translate-x-0)
     - quiz.html & simulation.html (toggles -translate-x-full & translate-x-0)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    /* Primary sidebar (all dashboard pages) — hidden by default without !important */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out !important;
    }

    /* Force hidden when -translate-x-full is present */
    .sidebar.-translate-x-full {
        transform: translateX(-100%) !important;
    }

    /* When JS adds .translate-x-0 or .active, reveal sidebar */
    .sidebar.translate-x-0,
    .sidebar.active {
        transform: translateX(0) !important;
    }

    /* Quiz/SR session pages use a separate #sidebar element
       that correctly sets -translate-x-full as a Tailwind class.
       Don't override that — let the class handle it. */

    /* Main content: must fill full width when sidebar is fixed */
    .flex-1.overflow-auto,
    .flex-1.overflow-y-auto,
    .flex-1.overflow-hidden,
    .relative.z-0.flex-1.flex.flex-col {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Outer layout wrapper: prevent body-level horizontal overflow */
    .flex.h-screen.overflow-hidden {
        overflow-x: hidden !important;
    }
}

/* ----------------------------------------------------------
   B · HEADER — spacing and title on narrow screens
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    header h2 {
        font-size: 1rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 155px !important;
    }

    /* Reduce gap in right-side header cluster */
    header .flex.items-center.space-x-4 {
        gap: 0.5rem !important;
    }

    /* Dark mode toggle: slightly smaller tap area still meets 44px */
    header #dark-mode-toggle {
        width: 34px !important;
        height: 34px !important;
        margin-right: 6px !important;
    }
}

/* ----------------------------------------------------------
   C · MAIN PADDING — reduce on narrow screens
   ---------------------------------------------------------- */
@media (max-width: 479px) {
    /* Cover the common p-6 / p-4 md:p-8 / py-8 px-4 patterns */
    main.p-6 {
        padding: 0.75rem !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    main.p-6 {
        padding: 1rem !important;
    }
}

/* ----------------------------------------------------------
   D · WELCOME CARD — typography on very small screens
   ---------------------------------------------------------- */
@media (max-width: 380px) {
    #user-welcome-name,
    #dashboard-welcome-card h1 {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
    }

    #user-study-year {
        font-size: 0.875rem !important;
    }

    #dashboard-welcome-card .grid.grid-cols-3 {
        gap: 0.5rem !important;
    }

    #stat-modules-followed,
    #stat-questions-answered,
    #stat-success-rate {
        font-size: 1.1rem !important;
    }
}

/* ----------------------------------------------------------
   E · CUSTOM SELECT WRAPPER — fixed 250px overflows at 320px
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .custom-select-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .select-custom {
        width: 100% !important;
    }
}

/* ----------------------------------------------------------
   F · OPTION CARDS (Quiz & Spaced Repetition)
   Right padding must accommodate the ::after icon position.
   ---------------------------------------------------------- */
@media (max-width: 479px) {
    .option,
    .option-sr {
        padding: 1rem 2.75rem 1rem 1rem !important;
    }

    .option::after,
    .option-sr::after {
        right: 0.75rem !important;
        font-size: 1rem !important;
    }

    .option::before,
    .option-sr::before {
        width: 24px !important;
        height: 24px !important;
        margin-right: 10px !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }
}

/* ----------------------------------------------------------
   G · TABLE SCROLL CONTAINERS
   Tables inside .overflow-x-auto scroll horizontally within
   their own container — not at the page level.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Tables inside scroll wrappers need a minimum width
       to stay readable instead of being crushed */
    .overflow-x-auto table {
        min-width: 520px;
    }

    /* Suivi cours progress grid: keep 2 cols on small screens */
    .grid.grid-cols-2.md\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ----------------------------------------------------------
   H · CHART CONTAINERS — prevent flex-parent overflow
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .chart-container {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   I · FEYNMAN PAGE — step pills, dropzone, AI response
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    /* Step pills: compact on mobile */
    #stepTab1,
    #stepTab2,
    #stepTab3,
    #stepTab4 {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* PDF dropzone: reduce padding */
    #dropzone {
        padding: 1.5rem 1rem !important;
    }

    #dropzone h4 {
        font-size: 0.875rem !important;
    }

    /* Custom topic input: flex-shrink correctly */
    #customTopicInput {
        min-width: 0 !important;
        flex: 1 1 0% !important;
    }

    /* Phase sections: tighter padding */
    #phase1Section,
    #phase2Section,
    #phase3Section,
    #phase4Section {
        padding: 1rem !important;
    }

    /* AI content box: scrollable, readable */
    .ai-content {
        max-height: 40vh !important;
        font-size: 0.875rem !important;
    }

    /* Processing alert banner: wrap on small screens */
    #renderColdStartAlert {
        flex-wrap: wrap !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        gap: 0.5rem !important;
    }
}

/* ----------------------------------------------------------
   J · TIMER PAGE — notification toast repositioned
   The original uses translateX(400px) to slide off right.
   On mobile we override to slide from top instead.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    .notification-toast {
        right: 0.75rem !important;
        left: 0.75rem !important;
        top: 1rem !important;
        width: auto !important;
        transform: translateY(-130px) !important;
        transition: transform 0.3s ease !important;
    }

    .notification-toast.show {
        transform: translateY(0) !important;
    }

    .settings-content {
        padding: 1.25rem !important;
    }
}

/* ----------------------------------------------------------
   K · PERFORMANCE / QUIZ RESULT MODAL
   ---------------------------------------------------------- */
@media (max-width: 479px) {
    /* Summary stat cards inside modal */
    .grid.grid-cols-3.gap-3.mb-4 > div {
        padding: 0.5rem !important;
    }

    #perf-score,
    #perf-correct-count,
    #perf-time {
        font-size: 1rem !important;
    }

    /* Action buttons: stack on very narrow screens */
    #perf-stage-results .flex.gap-3 {
        flex-direction: column !important;
    }

    #perf-btn-pdf span,
    #perf-btn-confirm span {
        font-size: 0.75rem !important;
    }
}

/* ----------------------------------------------------------
   L · SUIVI COURS HEADER — save button compression
   ---------------------------------------------------------- */
@media (max-width: 479px) {
    #saveProgressBtn {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
    }

    #saveProgressBtn i {
        margin-right: 0.25rem !important;
    }
}

/* ----------------------------------------------------------
   M · MODALS — general: stay within viewport on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #setup-modal > div,
    #performance-modal > div {
        margin: 0.75rem !important;
        max-height: 92vh !important;
        overflow-y: auto !important;
    }
}

/* ----------------------------------------------------------
   N · BIBLIOTHEQUE — PDF viewer iframes
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    iframe {
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   O · ABONNEMENT — pricing card padding on mobile
   ---------------------------------------------------------- */
@media (max-width: 639px) {
    .pricing-card {
        padding: 1.25rem !important;
    }
}

/* ----------------------------------------------------------
   P · CREER-QUESTION — year select full width on mobile
   ---------------------------------------------------------- */
@media (max-width: 767px) {
    #yearSelect {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------
   Q · DARK MODE — mobile-specific dark mode tweaks
   All dark.css class selectors work at any breakpoint
   without modification. No mobile-specific dark overrides
   are needed beyond what dark.css already provides.
   ---------------------------------------------------------- */

/* ----------------------------------------------------------
   END OF MEDICA MOBILE RESPONSIVE STYLES
   ---------------------------------------------------------- */