/* Reset */
.h-menu, .h-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Horizontal Menu Container */
.h-menu {
    background: #2c3e50;
    display: flex;
    gap: 10px;
    padding: 0 15px;
}

/* Top-level Menu Items */
.h-menu > li {
    position: relative;
}

.h-menu > li > a {
    display: block;
    padding: 14px 18px;
    color: #ecf0f1;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background 0.3s ease;
}

.h-menu > li > a:hover {
    background: #34495e;
    border-radius: 4px;
}

/* Dropdown Menu */
.d-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 999;
	opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

/* Show dropdown on hover */
.h-menu > li:hover > .d-menu {
    display: block;
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
}

/* Dropdown items */
.d-menu li a {
    display: block;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.25s;
}

.d-menu li a:hover {
    background: #f2f2f2;
}

/* Subtle hover for li (when using onclick on li) */
.d-menu li:hover {
    cursor: pointer;
}

/*Above d-menu only works in combination with h-menu. Independent dropdown menu is below.*/
/* Dropdown menu */
/*Syntax - Dropdown Menu
<div class="dropdown">
    <ul class="dropdown-menu">
        <li><a href="#">All Items</a></li>
        <li><a href="#">Active</a></li>
        <li><a href="#">Archived</a></li>
    </ul>
</div>
*/

/* Dropdown wrapper */
.dropdown {
    position: relative;
    display: inline-block;
    font-size: 14px;
	padding-bottom:10px;
}

/* Auto-generated Filter button */
.dropdown::before {
    content: "Filter ▾";
    display: inline-block;
    padding: 10px 14px;   
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}


.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    margin-top: 0px;

    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);

    list-style: none;
    padding: 6px 0;

    display: none;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;

    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 999;
}

/* Show dropdown when hovering the "button" */
.dropdown:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Dropdown items */
.dropdown-menu li a {
    display: block;
    padding: 10px 14px;
    color: #333;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background: #f2f2f2;
}

/*section menu*/
/* =========================================================
   PRODUCTION GRADE REUSABLE SECTION MENU UI
   ---------------------------------------------------------
   Features:
   - Themeable with CSS variables
   - Dark mode ready
   - Multiple layouts
   - Size variants
   - Reusable utility classes
   - Smooth animations
   - Accessible hover/focus states
   - Mobile optimized
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
	/*BORDER*/
	--sm-top-border-width:5px;
	--sm-top-border-color:#4facfe;

    /* CARD */
    --sm-card-bg:#ffffff;
    --sm-card-text:#222222;
    --sm-card-border:#e8e8e8;

    /* ITEMS */
    --sm-item-bg:#f5f8ff;
    --sm-item-text:#333333;

    /* HOVER */
    --sm-hover-start:#4facfe;
    --sm-hover-end:#00f2fe;
    --sm-hover-text:#ffffff;

    /* BADGE */
    --sm-badge-bg:#ff4d4f;
    --sm-badge-text:#ffffff;

    /* SHADOWS */
    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.10);

    --sm-shadow-hover:
        0 18px 40px rgba(0,0,0,0.20);

    /* RADIUS */
    --sm-radius-card:18px;
    --sm-radius-item:12px;
    --sm-radius-badge:20px;

    /* SPACING */
    --sm-gap:16px;
    --sm-padding-card:18px;
    --sm-padding-item:12px;

    /* TYPOGRAPHY */
    --sm-title-size:16px;
    --sm-item-size:14px;

    /* ANIMATION */
    --sm-transition:0.30s ease;

    /* WIDTH */
    --sm-card-width:260px;

    /* SCROLLBAR */
    --sm-scrollbar:#cccccc;

}


/* =========================================================
   BASE GRID
========================================================= */

.section-grid{
    display:flex;
    gap:var(--sm-gap);

    overflow-x:auto;
    overflow-y:hidden;
    padding:0 10px 12px 10px;

    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}


/* =========================================================
   OPTIONAL GRID MODE
========================================================= */

.section-grid.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    overflow:visible;
}


/* =========================================================
   VERTICAL MODE
========================================================= */

.section-grid.vertical{
    flex-direction:column;
    overflow-x:hidden;
}


/* =========================================================
   SCROLLBAR
========================================================= */

.section-grid::-webkit-scrollbar{height:6px;}

.section-grid::-webkit-scrollbar-thumb{
    background:var(--sm-scrollbar);
    border-radius:10px;
}


/* =========================================================
   CARD
========================================================= */

.section-card{
    min-width:var(--sm-card-width);
    flex-shrink:0;

    background:var(--sm-card-bg);
    color:var(--sm-card-text);

    border:1px solid var(--sm-card-border);
    border-radius:var(--sm-radius-card);
	border-top:
        var(--sm-top-border-width) solid
        var(--sm-top-border-color);

    padding:var(--sm-padding-card);
    box-shadow:var(--sm-shadow);

    transition:
        transform var(--sm-transition),
        box-shadow var(--sm-transition),
        background var(--sm-transition);

    position:relative;
    overflow:hidden;
    animation:smFadeUp .45s ease;
}


/* =========================================================
   CARD HOVER EFFECTS
========================================================= */

.section-card.float-hover:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:var(--sm-shadow-hover);
}

/* Soft Glow Hover */
.section-card.glow-hover:hover{
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04),
        0 12px 30px rgba(0,0,0,0.25),
        0 0 25px rgba(79,172,254,0.25);
}


/* Floating Hover */
.section-card.float-hover:hover{
    transform:
        translateY(-10px)
        scale(1.03)
        rotate(.3deg);
}


/* Pulse Hover */
.section-card.pulse-hover:hover{
    animation:smPulse .8s ease;
}

@keyframes smPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.03);}
    100%{transform:scale(1);}
}


/* Border Glow Hover */
.section-card.border-glow:hover{
    border-color:var(--sm-hover-start);
    box-shadow:
        0 0 0 1px var(--sm-hover-start),
        0 12px 35px rgba(0,0,0,0.22);
}


/* Zoom Hover */
.section-card.zoom-hover:hover{
    transform:scale(1.04);
}


/* =========================================================
   SHINE EFFECT
========================================================= */

.section-card.shine::before{
    content:'';
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.35),
            transparent
        );
    opacity:0;
    pointer-events:none;
}


.section-card.shine:hover::before{
    opacity:1;
    animation:smShine 1s linear;
}


/* =========================================================
   TITLE
========================================================= */

.section-title{
    font-size:var(--sm-title-size);
    font-weight:700;
    margin-bottom:14px;

    color:var(--sm-card-text);
    border-bottom:1px solid var(--sm-card-border);
    padding-bottom:8px;
}


/* =========================================================
   ITEM
========================================================= */

.section-item{
    display:block;
    width:100%;
    padding:var(--sm-padding-item);

    margin-bottom:10px;
    border:none;
    outline:none;

    background:var(--sm-item-bg);
    color:var(--sm-item-text);
    border-radius:var(--sm-radius-item);

    text-decoration:none;
    font-size:var(--sm-item-size);
    font-weight:500;

    position:relative;
    z-index:2;
    transition:
        transform var(--sm-transition),
        background var(--sm-transition),
        color var(--sm-transition),
        box-shadow var(--sm-transition);

    cursor:pointer;
}


/* =========================================================
   ITEM HOVER / FOCUS
========================================================= */

.section-item:hover,
.section-item:focus-visible{
    background:
        linear-gradient(
            135deg,
            var(--sm-hover-start),
            var(--sm-hover-end)
        );
    color:var(--sm-hover-text);
    transform:translateX(5px);

    box-shadow:0 8px 20px rgba(0,0,0,0.20);
}

/* =========================================================
   BADGE
========================================================= */

.badge-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:22px;
    height:22px;

    padding:0 8px;
    margin-left:8px;

    background:var(--sm-badge-bg);
    color:var(--sm-badge-text);

    font-size:11px;
    font-weight:700;

    border-radius:var(--sm-radius-badge);
}


/* =========================================================
   SIZE VARIANTS
========================================================= */

.section-card.sm{--sm-card-width:200px;}
.section-card.md{--sm-card-width:260px;}
.section-card.lg{--sm-card-width:340px;}

/* =========================================================
   THEME : BLUE
========================================================= */

.theme-blue{
    --sm-hover-start:#4facfe;
    --sm-hover-end:#00f2fe;
    --sm-item-bg:#f5f8ff;
	--sm-top-border-color:#2196f3;
}


/* =========================================================
   THEME : GREEN
========================================================= */

.theme-green{
    --sm-hover-start:#43e97b;
    --sm-hover-end:#38f9d7;
    --sm-item-bg:#f4fff5;
	--sm-top-border-color:#00c853;
}


/* =========================================================
   THEME : PURPLE
========================================================= */

.theme-purple{
    --sm-hover-start:#7f00ff;
    --sm-hover-end:#e100ff;
    --sm-item-bg:#faf5ff;
	--sm-top-border-color:#aa00ff;
}


/* =========================================================
   THEME : ORANGE
========================================================= */

.theme-orange{
    --sm-hover-start:#ff9966;
    --sm-hover-end:#ff5e62;
    --sm-item-bg:#fff6f1;
	--sm-top-border-color:#ff6d00;
}


/* =========================================================
   THEME : DARK
========================================================= */

.theme-dark{
    --sm-card-bg:#1f1f1f;
    --sm-card-text:#f5f5f5;

    --sm-card-border:#333333;

    --sm-item-bg:#2c2c2c;
    --sm-item-text:#f0f0f0;

    --sm-scrollbar:#555555;

    --sm-shadow:0 10px 25px rgba(0,0,0,0.40);

    --sm-shadow-hover:0 20px 45px rgba(0,0,0,0.55);
	
	--sm-top-border-color:#64b5f6;
}

/* =========================================================
   OTHER DARK THEME : EMERALD DARK
========================================================= */

.theme-emerald{
    --sm-card-bg:#16211f;
    --sm-card-text:#f3f7f5;

    --sm-card-border:#26433d;

    --sm-item-bg:#20352f;
    --sm-item-text:#e9fff8;

    --sm-hover-start:#11998e;
    --sm-hover-end:#38ef7d;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.35);

    --sm-shadow-hover:
        0 20px 45px rgba(0,0,0,0.50);

    --sm-scrollbar:#3d5f57;

    --sm-top-border-color:#38ef7d;

}


/* =========================================================
   THEME : ROYAL BLUE
========================================================= */
.theme-royal{
    --sm-card-bg:#182436;
    --sm-card-text:#f5f9ff;

    --sm-card-border:#2d4668;

    --sm-item-bg:#24344d;
    --sm-item-text:#edf5ff;

    --sm-hover-start:#396afc;
    --sm-hover-end:#2948ff;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.40);

    --sm-shadow-hover:
        0 22px 48px rgba(0,0,0,0.55);

    --sm-scrollbar:#496080;

    --sm-top-border-color:#4facfe;

}


/* =========================================================
   THEME : SUNSET
========================================================= */
.theme-sunset{
    --sm-card-bg:#33201c;
    --sm-card-text:#fff4ef;

    --sm-card-border:#5b3b34;

    --sm-item-bg:#442b25;
    --sm-item-text:#fff5f1;

    --sm-hover-start:#ff7e5f;
    --sm-hover-end:#feb47b;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.35);

    --sm-shadow-hover:
        0 22px 48px rgba(0,0,0,0.50);

    --sm-scrollbar:#76524a;

    --sm-top-border-color:#ffb88c;

}


/* =========================================================
   THEME : CRIMSON DARK
========================================================= */
.theme-crimson{
    --sm-card-bg:#24161a;
    --sm-card-text:#fff5f6;

    --sm-card-border:#4b2b32;

    --sm-item-bg:#3a2027;
    --sm-item-text:#fff1f3;

    --sm-hover-start:#c31432;
    --sm-hover-end:#240b36;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.38);

    --sm-shadow-hover:
        0 22px 48px rgba(0,0,0,0.52);

    --sm-scrollbar:#69444c;

    --sm-top-border-color:#ff4d6d;

}


/* =========================================================
   THEME : MIDNIGHT
========================================================= */
.theme-midnight{
    --sm-card-bg:#111827;
    --sm-card-text:#f9fafb;

    --sm-card-border:#2a3441;

    --sm-item-bg:#1f2937;
    --sm-item-text:#f3f4f6;

    --sm-hover-start:#434343;
    --sm-hover-end:#000000;

    --sm-shadow:
        0 10px 30px rgba(0,0,0,0.50);

    --sm-shadow-hover:
        0 25px 55px rgba(0,0,0,0.65);

    --sm-scrollbar:#4b5563;

    --sm-top-border-color:#9ca3af;

}


/* =========================================================
   THEME : VIOLET NIGHT
========================================================= */
.theme-violet{
    --sm-card-bg:#21162d;
    --sm-card-text:#faf5ff;

    --sm-card-border:#46325e;

    --sm-item-bg:#322146;
    --sm-item-text:#f5ebff;

    --sm-hover-start:#7f00ff;
    --sm-hover-end:#e100ff;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.38);

    --sm-shadow-hover:
        0 22px 50px rgba(0,0,0,0.55);

    --sm-scrollbar:#68527d;

    --sm-top-border-color:#d291ff;

}


/* =========================================================
   THEME : ADMIN DARK
========================================================= */
.theme-admindark{

    --sm-card-bg:#1b1b2f;
    --sm-card-text:#f5f5f7;

    --sm-card-border:#31314b;

    --sm-item-bg:#25253d;
    --sm-item-text:#f1f1f5;

    --sm-hover-start:#0f0c29;
    --sm-hover-end:#302b63;

    --sm-shadow:
        0 10px 25px rgba(0,0,0,0.45);

    --sm-shadow-hover:
        0 24px 55px rgba(0,0,0,0.60);

    --sm-scrollbar:#4b4b63;

    --sm-top-border-color:#a18cd1;

}


/* =========================================================
   OUTLINE MODE
========================================================= */

.section-card.outline{
    background:transparent;
    border:2px solid var(--sm-card-border);
    box-shadow:none;
}


/* =========================================================
   GLASS MODE
========================================================= */
.section-card.glass{
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.15);
}


/* =========================================================
   COMPACT MODE
========================================================= */

.compact .section-item{
    padding:8px 10px;
    margin-bottom:8px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes smShine{
    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }
}


@keyframes smFadeUp{
    from{
        opacity:0;
        transform:translateY(16px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* =========================================================
   DARK MODE AUTO SUPPORT
========================================================= */

@media (prefers-color-scheme:dark){
    .auto-dark{
        --sm-card-bg:#1f1f1f;
        --sm-card-text:#f5f5f5;

        --sm-card-border:#333333;

        --sm-item-bg:#2c2c2c;
        --sm-item-text:#f0f0f0;

        --sm-scrollbar:#555555;
    }
}


/* =========================================================
   MOBILE OPTIMIZATION
========================================================= */

@media (max-width:768px){
    .section-grid{gap:12px;}
    .section-card{
        min-width:220px;
        padding:14px;
    }
    .section-title{font-size:15px;}
    .section-item{font-size:13px;}
}


/* =========================================================
   REDUCED MOTION SUPPORT
========================================================= */

@media (prefers-reduced-motion:reduce){
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }

}