/* 3D Buttons Lite – Core Engine */

/* Target only sidebar-right buttons */
.sidebar-right a,
.sidebar-right button,
.sidebar-right .btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-weight: 600;
    border-radius: 6px;
    background: #e0e0e0;
    color: #222;
    text-decoration: none;
    border: 2px solid #b5b5b5;

    /* 3D magic */
    box-shadow:
        0 4px 0 #9a9a9a,   /* bottom edge */
        0 4px 6px rgba(0,0,0,0.25); /* soft drop shadow */

    transition: all 0.15s ease-out;
}

/* Hover: lift slightly */
.sidebar-right a:hover,
.sidebar-right button:hover,
.sidebar-right .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 0 #8a8a8a,
        0 6px 10px rgba(0,0,0,0.3);
}

/* Active: pressed down */
.sidebar-right a:active,
.sidebar-right button:active,
.sidebar-right .btn:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 #b5b5b5,
        0 1px 3px rgba(0,0,0,0.2);
}

/* Light mode (default) */
.sidebar-right a,
.sidebar-right button,
.sidebar-right .btn {
    background: #e0e0e0;
    color: #222;
    border-color: #b5b5b5;
    box-shadow:
        0 4px 0 #9a9a9a,
        0 4px 6px rgba(0,0,0,0.25);
}

/* Dark mode */
html[data-bs-theme="dark"] .sidebar-right a,
html[data-bs-theme="dark"] .sidebar-right button,
html[data-bs-theme="dark"] .sidebar-right .btn {
    background: #3a3a3a;
    color: #f0f0f0;
    border-color: #2a2a2a;
    box-shadow:
        0 4px 0 #1a1a1a,
        0 4px 6px rgba(0,0,0,0.5);
}

/* === BLOCK 1: Base 3D Style (Classic Upward-Facing Button) ===
   Purpose:
   - Button face looks straight upward (no directional highlight)
   - Bottom edge = deeper shadow (strongest)
   - Left edge = thinner, slightly lighter shadow
   - Creates a solid 3D block effect
*/

.sidebar-right a,
.sidebar-right button,
.sidebar-right .btn {
    display: inline-block;
    padding: 0.6em 1.2em;
    font-weight: 600;
    border-radius: 6px;
    background: #e0e0e0;
    color: #222;
    text-decoration: none;
    border: 2px solid #b5b5b5;

    /* 3D edges: bottom + left */
    box-shadow:
        -2px 0 0 #c8c8c8,        /* left edge (thin + lighter) */
        0 5px 0 #8a8a8a,         /* bottom edge (1px higher + darker) */
        0 5px 6px rgba(0,0,0,0.25); /* soft drop shadow */
    
    transition: all 0.15s ease-out;
}
/* === BLOCK 2: Hover Lift ===
   Purpose: Makes the button rise slightly when hovered.
   - Stronger highlight
   - Deeper shadow
   - Slight upward movement
*/
.sidebar-right a:hover,
.sidebar-right button:hover,
.sidebar-right .btn:hover {
    transform: translateY(-2px);
    box-shadow:
        -1px -1px 3px rgba(255,255,255,0.8),  /* stronger top-left highlight */
        0 6px 0 #8a8a8a,                      /* deeper bottom edge */
        0 6px 10px rgba(0,0,0,0.3);           /* larger drop shadow */
}


/* === BLOCK 3: Active Pressed State ===
   Purpose: Makes the button look pressed into the surface.
   - Shadows collapse
   - Highlight softens
   - Button moves downward
*/
.sidebar-right a:active,
.sidebar-right button:active,
.sidebar-right .btn:active {
    transform: translateY(2px);
    box-shadow:
        -1px -1px 2px rgba(255,255,255,0.6),  /* softer highlight */
        0 1px 0 #b5b5b5,                      /* shallow bottom edge */
        0 1px 3px rgba(0,0,0,0.2);            /* small drop shadow */
}