/*
 * Styles for Bottom Sheet Component v4 - Hierarchical & Responsive Fix
 */
.bottom-sheet-container {
    position: fixed;
    inset: 0;
    z-index: 1010;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.bottom-sheet-container.is-open {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.bottom-sheet-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(2px);
}
.bottom-sheet-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    border-radius: 20px 20px 0 0;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.bottom-sheet-container.is-open .bottom-sheet-panel {
    transform: translateY(0);
}
.bottom-sheet-header {
    padding: 8px 20px 16px 20px;
    flex-shrink: 0;
    text-align: center;
    position: relative;
    cursor: grab;
}
.bottom-sheet-grabber {
    margin: 0 auto 12px auto;
    width: 40px;
    height: 5px;
    background-color: #e0e0e0;
    border-radius: 2.5px;
}
.bottom-sheet-title {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}
.bottom-sheet-close {
    background: #f1f3f5;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}
.bottom-sheet-close:hover {
    background: #e9ecef;
}
.bottom-sheet-close svg {
    width: 20px;
    height: 20px;
    fill: #6c757d;
}
.bottom-sheet-content {
    overflow-y: auto;
    padding: 0 16px 16px 16px;
}
.quick-access-sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.no-items-message {
    text-align: center;
    color: #6c757d;
    padding: 40px 0;
}

/* ======================================================= */
/* START: CORRECTED HIERARCHICAL STYLES (DESKTOP & MOBILE) */
/* ======================================================= */
.quick-access-sheet-list a {
    display: block; /* Changed from flex */
    position: relative;
    padding: 16px 48px; /* Base padding for right (indent) and left (arrow) */
    border-bottom: 1px solid #f1f3f5;
    text-decoration: none;
    color: #343a40;
    font-weight: 500;
    transition: background-color 0.2s;
}

.quick-access-sheet-list li:last-child a {
    border-bottom: none;
}

.quick-access-sheet-list a:hover {
    background-color: #f8f9fa;
}

/* Arrow Icon (Left Side) - Absolutely Positioned */
.quick-access-sheet-list a::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23adb5bd'%3E%3Cpath d='M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Dash Indicator (Right Side) - Absolutely Positioned */
.quick-access-sheet-list a:not([data-depth="0"])::before {
    content: '-';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-weight: 600;
    /* Dynamic right position based on depth */
    right: calc( (var(--depth, 1) * 20px) + 8px ); 
}

/* Define depth variable and apply indentation via padding */
.quick-access-sheet-list a[data-depth="0"] { --depth: 0; }
.quick-access-sheet-list a[data-depth="1"] { --depth: 1; }
.quick-access-sheet-list a[data-depth="2"] { --depth: 2; }
.quick-access-sheet-list a[data-depth="3"] { --depth: 3; }

.quick-access-sheet-list a {
    padding-right: calc(var(--depth, 0) * 20px + 24px); /* 24px base padding + 20px per depth level */
}

/* Style for the active (current page) item */
.quick-access-sheet-list a.is-active {
    font-weight: 700;
    color: #009a77; /* Theme primary color */
}

.quick-access-sheet-list a.is-active::after {
    display: none; /* Hide arrow on active item */
}
/* ======================================================= */
/* END: CORRECTED HIERARCHICAL STYLES                      */
/* ======================================================= */