/* The styles repeated across the Device views.
 *
 * Only values used in more than one place are here; the ones used once stay on
 * their elements. Rules that set display are left inline, because the scripts
 * assign and read element.style.display directly.
 */

/* 19 uses */
.device-copy-icon {
    cursor:pointer;
    zoom:0.7;
}

/* 18 uses */
.device-clickable {
    cursor:pointer;
}

/* 18 uses */
.device-action-right {
    cursor:pointer;
    float:right;
}

/* 12 uses */
.device-text-13 {
    font-size:13px;
}

/* 11 uses */
.device-text-11 {
    font-size:11px;
}

/* 8 uses */
.device-col-250 {
    width:250px;
}

/* 6 uses */
.device-fill-height {
    height:100%;
}

/* 6 uses */
.device-counter-visible {
    visibility: visible;
}

/* 6 uses */
.device-panel-80 {
    min-height:80px;
}

/* 4 uses */
.device-col-140 {
    width:140px;
}

/* 4 uses */
.device-dot {
    width:0.825rem;
    height:0.825rem;
}

/* 4 uses */
.device-text-11-tight {
    font-size:11px;
    margin-top:-8px;
}

/* 4 uses */
.device-align-left {
    text-align: left;
}

/* 3 uses */
.device-text-16 {
    font-size:16px;
}

/* 3 uses */
.device-col-118 {
    width:118px;
}

/* 3 uses */
.device-col-124 {
    width:124px;
}

/* 3 uses */
.device-scroll-68vh {
    max-height:68vh;
    overflow:auto;
}

/* 3 uses */
.device-scroll-65vh {
    max-height:65vh;
    overflow:auto;
}

/* 3 uses */
.device-spacer-10 {
    height: 10px;
}

/* 2 uses */
.device-text-12 {
    font-size:12px;
}

/* 2 uses */
.device-row-36 {
    min-height:36px;
}

/* 2 uses */
.device-scroll-32vh {
    max-height:32vh;
    overflow:auto;
}

/* 2 uses */
.device-scroll-260 {
    max-height:260px;
    overflow:auto;
}

/* 2 uses */
.device-scroll-65vh-padded {
    padding-bottom:90px;
    max-height:65vh;
    overflow:auto;
}

/* 2 uses */
.device-label-120-spaced {
    width:120px;
    margin-right:7px;
    font-size:12px;
}

/* 2 uses */
.device-label-120 {
    width:120px;
    font-size:12px;
}

/* 2 uses */
.device-label-150 {
    width:150px;
    font-size:12px;
}

/* 2 uses */
.device-pull-up-5 {
    margin-top:-5px;
}

/* 2 uses */
.device-gap-below-5 {
    margin-bottom:5px;
}

/* Site device settings on a device: a lock, or the site's value in use, beside the setting's name. */
.device-settings-site {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .6rem;
    vertical-align: middle;
    padding: .1rem .5rem;
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bs-primary) 10%, transparent);
    color: var(--bs-primary);
    font-size: .7rem;
    font-weight: 600;
}

.device-settings-site.is-locked {
    background: rgba(138, 146, 166, .15);
    color: #8a92a6;
}
.site-setting { padding: .75rem 0; border-bottom: 1px solid rgba(138, 146, 166, .15); }
.site-setting__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.site-setting__head > div { flex: 1; }
.site-setting__lock { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: 0; border-radius: .5rem; color: #8a92a6; cursor: pointer; }
.site-setting__lock input { position: absolute; opacity: 0; pointer-events: none; }
.site-setting__lock:has(input:checked) { background: color-mix(in srgb, var(--bs-primary) 12%, transparent); color: var(--bs-primary); }
.site-setting__lock:has(input:disabled) { opacity: .35; cursor: default; }

.dark .site-confirm-modal .modal-content { background: #222738; color: #e4e6ee; }
.dark .site-confirm-modal .modal-title { color: #e4e6ee; }
.dark .site-confirm-modal .modal-header, .dark .site-confirm-modal .modal-footer { border-color: #30384f; }
.dark .site-confirm-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
/* Category navigation on the settings screens; the setting rows keep their own look. */
.device-settings-tabs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: .5rem; }
.device-settings-tabs__nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .25rem; }
.device-settings-tabs__picker { display: none; }
.device-settings-tabs__group { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: .65rem; background: none; color: inherit; text-align: left; }
.device-settings-tabs__group:hover { background: rgba(138, 146, 166, .1); }
.device-settings-tabs__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .6rem; background: rgba(138, 146, 166, .12); color: #8a92a6; }
.device-settings-tabs__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.device-settings-tabs__group.is-active { background: color-mix(in srgb, var(--bs-primary) 10%, transparent); }
.device-settings-tabs__group.is-active .device-settings-tabs__icon { background: var(--bs-primary); color: #fff; }
.device-settings-tabs__name { display: flex; flex-direction: column; min-width: 0; font-weight: 500; line-height: 1.25; }
.device-settings-tabs__group.is-active .device-settings-tabs__name { color: var(--bs-primary); font-weight: 600; }
.device-settings-tabs__count { color: #8a92a6; font-size: .75rem; font-weight: 400; }
.device-settings-tabs__panel { margin-top: 0 !important; }
.device-settings-tabs__panel > [data-settings-category] { width: 100%; }
@media (max-width: 991.98px) {
    .device-settings-tabs { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .device-settings-tabs__nav { display: none; }
    .device-settings-tabs__picker { display: block; }
}