/*==================================================
=   Shared custom "dd" dropdown component
=   (trigger button + portaled listbox menu) — used by the landing
=   page's "advanced options" row (index.html) and any dashboard form
=   that needs the same look (e.g. schedule.html's device/network
=   pickers). Behavior lives in js/dropdown.js.
==================================================*/
.dd{
    position:relative;
}

.dd-trigger{
    display:flex;
    align-items:center;
    gap:8px;
    height:42px;
    padding:0 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.1);
    background:var(--panel);
    color:var(--text);
    cursor:pointer;
    transition:.2s;
    font-family:inherit;
    font-size:12.5px;
    white-space:nowrap;
}

.dd-trigger:hover{
    border-color:#3b82f6;
}

.dd-trigger[aria-expanded="true"]{
    border-color:#3b82f6;
    box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

.dd-trigger-icon{
    flex-shrink:0;
    display:flex;
    color:var(--muted);
}

.dd-trigger-label{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
}

.dd-chevron{
    flex-shrink:0;
    color:var(--muted);
    transition:transform .2s;
}

.dd-trigger[aria-expanded="true"] .dd-chevron{
    transform:rotate(180deg);
}

.dd-menu{
    list-style:none;
    margin:0;
    padding:6px;
    border-radius:14px;
    background:var(--panel);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* portaled to <body> by JS so it escapes any ancestor's overflow:hidden clipping.
   z-index باید از بالاترین z-index توی سایت بیشتر باشه — مثلاً پاپ‌آپِ
   «ایجاد تست جدید» توی schedule.css با z-index:9999 روی صفحه میاد، و چون
   این منو هم به body پورتال می‌شه (نه داخلِ خودِ پاپ‌آپ)، اگه z-index کمتر
   از مودال باشه، منو زیرِ backdrop مودال مخفی می‌مونه و انگار "باز نمی‌شه". */
.dd-menu-portal{
    position:fixed;
    z-index:10000;
    width:max-content;
    max-width:260px;
    animation:ddMenuIn .16s ease;
}

.dd-menu-scroll{
    max-height:280px;
    overflow-y:auto;
}

@keyframes ddMenuIn{
    from{opacity:0; transform:translateY(-4px);}
    to{opacity:1; transform:translateY(0);}
}

.dd-menu li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:9px;
    color:var(--text);
    font-size:12.5px;
    cursor:pointer;
    transition:.15s;
}

.dd-menu li:hover{
    background:rgba(59,130,246,.12);
}

.dd-menu li.is-selected{
    background:rgba(59,130,246,.16);
    font-weight:700;
}

/* گزینه‌های قفل‌شده (پلنِ فعلیِ کاربر کافی نیست) — مثل every_1h/3h/6h/12h
   وقتیِ hourly_monitoring_allowed=False. غیرِقابلِ انتخابن، فقط یادآوریِ
   پلنِ لازم رو نشون می‌دن. */
.dd-menu li.is-locked{
    cursor:not-allowed;
    opacity:.55;
}

.dd-menu li.is-locked:hover{
    background:transparent;
}

.dd-opt-text{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
}

.dd-opt-lock-hint{
    color:var(--muted);
    font-size:10px;
    font-weight:500;
}

.dd-opt-lock-icon{
    flex-shrink:0;
    margin-inline-start:auto;
    color:var(--muted);
}

.dd-opt-icon{
    flex-shrink:0;
    display:flex;
    color:var(--muted);
}

/* signal bars (network profile options) */
.dd-bars rect{
    fill:var(--muted);
    opacity:.3;
}

.dd-bars[data-level="1"] rect:nth-child(1),
.dd-bars[data-level="2"] rect:nth-child(-n+2),
.dd-bars[data-level="3"] rect:nth-child(-n+3),
.dd-bars[data-level="4"] rect:nth-child(-n+4){
    fill:#3b82f6;
    opacity:1;
}

/* mobile device phone icons */
.dd-phone{
    flex-shrink:0;
    display:flex;
    color:var(--muted);
}

.dd-phone-cam,
.dd-phone-home{
    fill:currentColor;
    opacity:.7;
}

.dd-phone-chin{
    fill:currentColor;
    opacity:.15;
}

.dd-menu li[data-brand="apple"] .dd-phone{color:#a3a3a3;}
.dd-menu li[data-brand="samsung"] .dd-phone{color:#3b82f6;}
.dd-menu li[data-brand="google"] .dd-phone{color:#22c55e;}
.dd-menu li[data-brand="xiaomi"] .dd-phone{color:#f97316;}
.dd-menu li[data-brand="motorola"] .dd-phone{color:#14b8a6;}

@media(max-width:600px){
    .dd-menu-portal{left:16px!important; right:16px!important; width:auto; max-width:none;}
}