/* ==============================================
   Nested Popup Menu Styles
   ============================================== */

/* Container for the settings button and dropdown */
.settings-menu-container {
    position: relative; /* Needed for absolute positioning of the dropdown */
    display: inline-block;
}

/* Existing .settings-btn styles are kept */

/* Main Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px); /* Position below the button with a small gap */
    right: 0; /* Align to the right edge of the container */
    width: 240px; /* Menu width */
    background-color: var(--bg-color, #ffffff);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.08); /* Softer shadow */
    z-index: 1000;
    overflow: visible; /* Allow submenus to overflow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0.15s;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
    padding: 6px;
}

/* Dark Mode Dropdown Menu */
body.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-elevated, #1f2937);
    border-color: var(--dark-border-color, rgba(255, 255, 255, 0.1));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Show Dropdown Menu */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Base Dropdown Item Styling */
.dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
    position: relative;
    color: var(--text-color, #333);
    border-radius: 6px;
    font-size: 14px;
    margin: 2px 0;
}

body.dark-mode .dropdown-item {
    color: var(--dark-text-color, #e5e7eb);
}

/* Dropdown Item Hover State */
.dropdown-item:hover {
    background-color: var(--hover-bg-color, rgba(0, 0, 0, 0.05));
    color: var(--text-color-hover, var(--text-color, #111));
}

body.dark-mode .dropdown-item:hover {
    background-color: var(--dark-hover-bg-color, rgba(255, 255, 255, 0.08));
    color: var(--dark-text-color-hover, var(--dark-text-color, #fff));
}

/* Item Icons (Left side) */
.dropdown-item > i:first-child,
.dropdown-trigger > i:first-child {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary-color, #6b7280);
}

body.dark-mode .dropdown-item > i:first-child,
body.dark-mode .dropdown-trigger > i:first-child {
    color: var(--dark-text-secondary-color, #9ca3af);
}

/* Item Text */
.dropdown-item span:not(.check-mark),
.dropdown-trigger span {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Right Arrow Icon (for submenus) - Changed to Left Arrow */
i.fa-chevron-left.float-right {
    margin-left: auto; /* Push to the far right */
    padding-left: 10px; /* Space before the arrow */
    font-size: 12px;
    color: var(--text-secondary-color, #9ca3af);
    transition: transform 0.2s ease;
}

body.dark-mode i.fa-chevron-left.float-right {
    color: var(--dark-text-secondary-color, #9ca3af);
}

/* Submenu Trigger (Container for item content when it has a submenu) */
.dropdown-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0; /* Padding is handled by the parent .dropdown-item */
    background: none;
    border: none;
    text-align: left;
    color: inherit; /* Inherit color from .dropdown-item */
    font: inherit; /* Inherit font styles */
    cursor: pointer;
}

/* Submenu Styles - Opens Left */
.dropdown-submenu {
    position: absolute;
    top: 0;
    margin-top: -7px; 
    left: auto; 
    right: calc(100% + 8px); 
    width: 220px;
    background-color: var(--bg-color, #ffffff);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px) scale(0.95); /* Slightly adjusted animation */
    transform-origin: top right;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.09));
    padding: 6px;
    /* Base z-index moved to specific level rules */
    /* z-index: 1010; */ 
}

/* Ensure all submenus *default* to left opening */
.dropdown-submenu.left { 
    /* This class might be redundant now if default is left, but keep for clarity */
    left: auto;
    right: calc(100% + 8px); 
    transform-origin: top right;
    transform: translateX(-12px) scale(0.97);
}

/* Override positioning for submenus forced to open right (by JS) */
.dropdown-submenu.opens-right { 
    left: calc(100% + 8px);
    right: auto;
    transform-origin: top left;
    transform: translateX(15px) scale(0.95); /* Adjusted animation */
}

/* Increment z-index aggressively for deeper nesting - Increased values! */
/* Direct child submenu */
.dropdown-menu > .dropdown-item > .dropdown-submenu,
.dropdown-menu > .has-submenu > .dropdown-submenu { z-index: 1100; }
/* Second level */
.dropdown-submenu > .dropdown-item > .dropdown-submenu,
.dropdown-submenu > .has-submenu > .dropdown-submenu { z-index: 1200; }
/* Third level */
.dropdown-submenu > .dropdown-submenu > .dropdown-item > .dropdown-submenu,
.dropdown-submenu > .dropdown-submenu > .has-submenu > .dropdown-submenu { z-index: 1300; }
/* Fourth level */
.dropdown-submenu > .dropdown-submenu > .dropdown-submenu > .dropdown-item > .dropdown-submenu,
.dropdown-submenu > .dropdown-submenu > .dropdown-submenu > .has-submenu > .dropdown-submenu { z-index: 1400; }

/* Dark Mode Submenu */
body.dark-mode .dropdown-submenu {
    background-color: var(--dark-bg-elevated, #1f2937);
    border-color: var(--dark-border-color, rgba(255, 255, 255, 0.12));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Show Submenu - Adjusted transform */
.dropdown-submenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* Active State for Submenu Trigger Item */
.dropdown-item.has-submenu.active {
    background-color: var(--hover-bg-color, rgba(0, 0, 0, 0.05));
}

body.dark-mode .dropdown-item.has-submenu.active {
    background-color: var(--dark-hover-bg-color, rgba(255, 255, 255, 0.08));
}

/* Arrow Rotation (Optional - less common for left-opening menus) */
/* 
.dropdown-item.has-submenu.active > .dropdown-trigger i.fa-chevron-left.float-right {
    transform: rotate(-90deg);
}
*/

/* Check Mark Styling */
.check-mark {
    font-size: 14px;
    color: var(--primary-color, #3b82f6);
    margin-left: auto; /* Push check mark to the right */
    padding-left: 10px; /* Space before check mark */
}

body.dark-mode .check-mark {
    color: var(--dark-primary-color, #60a5fa);
}

/* Divider Line */
.dropdown-divider {
    height: 1px;
    background-color: var(--border-color, rgba(0, 0, 0, 0.08));
    margin: 6px -6px; /* Span full width minus padding */
}

body.dark-mode .dropdown-divider {
    background-color: var(--dark-border-color, rgba(255, 255, 255, 0.1));
}

/* Submenu Header */
.dropdown-header {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary-color, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
    margin-bottom: 2px;
}

body.dark-mode .dropdown-header {
    color: var(--dark-text-secondary-color, #9ca3af);
}

/* Color Options Container */
.color-options {
    display: flex;
    flex-wrap: wrap;
    padding: 4px 8px; /* Reduced padding */
    gap: 8px;
}

/* Individual Color Option */
.color-option {
    width: 28px; /* Smaller size */
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.color-option:hover {
    border-color: var(--primary-color, #3b82f6);
}

body.dark-mode .color-option:hover {
    border-color: var(--dark-primary-color, #60a5fa);
}

/* Color Preview Circle */
.color-preview {
    width: 20px; /* Smaller size */
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); /* Subtle inner border */
}

/* Default Color Scheme Preview */
.scheme-default {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

body.dark-mode .scheme-default {
    background: linear-gradient(135deg, #2d3748, #1a202c);
}

/* Other Color Scheme Previews */
.scheme-scheme1 { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.scheme-scheme2 { background: linear-gradient(135deg, #84fab0, #8fd3f4); }
.scheme-scheme3 { background: linear-gradient(135deg, #d4aefb, #a6c1ee); }
.scheme-scheme4 { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.scheme-scheme5 { background: linear-gradient(135deg, #a1c4fd, #8edcff); }

/* Check Mark within Color Option */
.color-option .check-mark {
    position: absolute;
    font-size: 10px; /* Smaller check mark */
    color: var(--bg-contrast-color, #333);
    /* Remove text-shadow if not needed */
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
}

body.dark-mode .color-option .check-mark {
    color: var(--dark-bg-contrast-color, #fff);
}

/* Mobile Adaptations */
@media screen and (max-width: 768px) {
    /* Adjust main dropdown position slightly if needed */
    .dropdown-menu {
        /* Maybe slightly wider to accommodate touch targets */
        /* width: 260px; */
    }

    /* Make sure submenus don't go off-screen */
    .dropdown-submenu.left {
        /* Consider dynamic adjustment if still overflowing */
    }

    /* Increase tap target size */
    .dropdown-item {
        padding: 10px 14px; /* Slightly larger padding */
    }
}

/* Make sure items with submenus also have relative positioning */
.dropdown-item.has-submenu {
    position: relative;
}