/* The settings screen (component/settings_menu.js, settings_layout.js) and
   everything that goes in it: sections with a side menu, cards of rows, one
   look for every control. Loaded after windows7.css and arcade.css, whose
   rules are mostly !important, hence the "html body" prefix and !important
   on anything those style. Colours come from arcade.css's --ar-* tokens. */

html body .settings {
    --set-line: rgba(15, 51, 95, 0.1);
    --set-field-border: #c9d5e3;
    --set-soft: #f3f6fa;
    --set-ok: #1f8a3a;
    --set-warn: #a86b00;
    --set-error: #c0322b;
    max-width: 1080px !important;
    margin: 16px auto 48px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: var(--ar-text) !important;
    font-family: var(--ar-font) !important;
    text-align: left;
}

/* ------------------------------------------------ side menu + pages */

html body .settings.set-paged {
    display: grid !important;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 0 16px !important;
    box-sizing: border-box;
}

.set-nav {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid var(--ar-border);
    background: var(--ar-card);
    box-shadow: 0 12px 34px rgba(8, 30, 60, 0.22);
}

.set-nav-heading {
    margin: 12px 12px 4px;
    color: var(--ar-muted);
    font: 700 11.5px var(--ar-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html body .settings .set-nav-item,
html body .settings .set-nav-item:hover:not(:disabled) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    text-align: left !important;
    text-shadow: none !important;
    font: 600 14.5px var(--ar-font) !important;
    cursor: pointer;
}

html body .settings .set-nav-item:hover:not(:disabled) {
    background: rgba(15, 51, 95, 0.06) !important;
}

html body .settings .set-nav-item.active,
html body .settings .set-nav-item.active:hover:not(:disabled) {
    background: var(--ar-accent-soft) !important;
    color: var(--ar-accent) !important;
}

.set-nav-item svg {
    flex: none;
    opacity: 0.8;
}

.set-nav-item.active svg {
    opacity: 1;
}

.set-pages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

html body .settings.set-paged .set-pages {
    padding: 24px 28px 28px;
    border-radius: 20px;
    border: 1px solid var(--ar-border);
    background: var(--ar-card);
    box-shadow: 0 12px 34px rgba(8, 30, 60, 0.28);
}

.set-paged .set-section:not(.active) {
    display: none !important;
}

/* ------------------------------------------------ sections and cards */

.set-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Stacked (embedded, e.g. a role's defaults): space between sections */
.settings:not(.set-paged) .set-section + .set-section {
    margin-top: 20px;
}

html body .settings .set-section-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--ar-text) !important;
    font: 800 22px/1.25 var(--ar-font) !important;
    letter-spacing: -0.01em;
    text-shadow: none !important;
}

html body .settings .set-section-desc {
    margin: 4px 0 0 !important;
    color: var(--ar-muted) !important;
    font: 14px/1.45 var(--ar-font) !important;
}

.set-card {
    border-radius: 14px;
    border: 1px solid var(--set-line);
    background: #fff;
}

.set-card-head {
    padding: 16px 18px 6px;
}

html body .settings .set-card-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--ar-text) !important;
    font: 700 15.5px var(--ar-font) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

html body .settings .set-card-desc {
    margin: 3px 0 0 !important;
    color: var(--ar-muted) !important;
    font: 13px/1.45 var(--ar-font) !important;
}

.set-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--set-line);
}

.set-inline-status {
    margin-right: auto;
    color: var(--ar-muted);
    font: 600 13.5px var(--ar-font);
}

/* "Advanced": a card that opens on click */
.set-advanced > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    color: var(--ar-muted);
    font: 600 14.5px var(--ar-font);
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.set-advanced > summary::-webkit-details-marker {
    display: none;
}

.set-advanced > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.set-advanced[open] > summary::before {
    transform: rotate(45deg);
}

.set-advanced > summary:hover {
    color: var(--ar-text);
}

.set-advanced > summary:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.3);
}

/* ------------------------------------------------ rows */

html body .settings .set-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 8px 20px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    border-top: 1px solid var(--set-line);
    border-radius: 0 !important;
    background: none !important;
}

.set-card > .set-row:first-child,
.set-card-head + .set-row,
.set-advanced > summary + .set-row {
    border-top: none;
}

.set-advanced[open] > summary + .set-row {
    border-top: 1px solid var(--set-line);
}

html body .settings .set-row-label {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ar-text) !important;
    font: 600 14.5px/1.35 var(--ar-font) !important;
}

html body .settings .set-row-desc {
    margin: 3px 0 0 !important;
    padding: 0 !important;
    color: var(--ar-muted) !important;
    font: 13px/1.45 var(--ar-font) !important;
}

html body .settings .set-readout {
    color: var(--ar-accent) !important;
    font-weight: 600 !important;
}

.set-row-control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* Rows whose control goes under the text (the preset buttons, paths) */
html body .settings .set-row-stack,
html body .settings .set-row-wide {
    grid-template-columns: minmax(0, 1fr);
}

.set-row-stack .set-row-control,
.set-row-wide .set-row-control {
    justify-content: flex-start;
}

.set-row-wide .set-row-control {
    width: 100%;
}

html body .settings .set-row-wide .set-row-control input:not([type="checkbox"]):not([type="range"]) {
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
}

/* Custom width/height only while Video size is Custom */
html body .settings .set-row.set-row-off {
    display: none !important;
}

html body .settings .set-row[hidden],
html body .settings .set-card[hidden],
html body .settings .set-section[hidden],
html body .settings button[hidden],
html body .settings .set-status:empty {
    display: none !important;
}

/* ------------------------------------------------ controls */

html body .settings .set-row-control select,
html body .settings .set-row-control input:not([type="checkbox"]):not([type="range"]),
html body .settings .tc-prefs .tc-select,
html body .settings .tc-system-row .tc-select {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 190px;
    max-width: 280px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid var(--set-field-border) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 14.5px var(--ar-font) !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}

html body .settings .set-row-control input[type="number"] {
    min-width: 0 !important;
    width: 110px !important;
}

html body .settings .set-row-control select:focus,
html body .settings .set-row-control input:not([type="checkbox"]):not([type="range"]):focus,
html body .settings .tc-select:focus {
    border-color: var(--ar-accent) !important;
    outline: 3px solid rgba(31, 111, 209, 0.22) !important;
}

html body .settings .set-row-control input:disabled,
html body .settings .set-row-control select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

html body .settings input[type="range"] {
    width: 200px;
    max-width: 40vw;
    margin: 0 !important;
    accent-color: var(--ar-accent);
    background: none !important;
}

/* On/off switches */
html body .settings .set-switch input[type="checkbox"],
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
    flex: none;
    width: 46px !important;
    height: 28px !important;
    min-width: 46px;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: #c3cedc !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer;
    transition: background 0.15s ease;
}

html body .settings .set-switch input[type="checkbox"]::before,
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"]::before {
    content: "" !important;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

html body .settings .set-switch input[type="checkbox"]::after,
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"]::after {
    display: none !important;
}

html body .settings .set-switch input[type="checkbox"]:checked,
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"]:checked {
    background: var(--ar-accent) !important;
}

html body .settings .set-switch input[type="checkbox"]:checked::before,
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

html body .settings .set-switch input[type="checkbox"]:focus-visible,
html body .settings :is(.tc-prefs, .tc-editor-panel) .tc-field > input[type="checkbox"]:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.3) !important;
    outline-offset: 2px;
}

html body .settings .set-switch input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* An optional number: tick to use it, then set it */
html body .settings .set-optional input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    accent-color: var(--ar-accent);
}

/* Preset buttons (settings_layout.js segmented) */
html body .settings .set-segmented-select .set-row-control > select {
    display: none !important;
}

.set-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px;
    border-radius: 13px;
    background: #e9eef5;
}

html body .settings .set-segment,
html body .settings .set-segment:hover:not(:disabled) {
    min-width: 84px;
    height: 38px;
    margin: 0 !important;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ar-muted) !important;
    text-shadow: none !important;
    font: 600 14px var(--ar-font) !important;
    cursor: pointer;
}

html body .settings .set-segment:hover:not(:disabled) {
    color: var(--ar-text) !important;
}

html body .settings .set-segment.active,
html body .settings .set-segment.active:hover:not(:disabled) {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 51, 95, 0.18) !important;
    color: var(--ar-accent) !important;
}

/* Buttons */
html body .settings .set-button,
html body .settings .set-button:hover:not(:disabled),
html body .settings .tc-prefs .tc-actions button,
html body .settings .tc-prefs .tc-actions button:hover:not(:disabled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 10px !important;
    border: 1px solid var(--set-field-border) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    text-shadow: none !important;
    white-space: nowrap;
    font: 600 14px var(--ar-font) !important;
    transform: none !important;
    cursor: pointer;
}

html body .settings .set-button:hover:not(:disabled),
html body .settings .tc-prefs .tc-actions button:hover:not(:disabled) {
    border-color: #93aac5 !important;
    background: #f5f8fc !important;
}

html body .settings .set-button.primary,
html body .settings .set-button.primary:hover:not(:disabled) {
    border-color: var(--ar-accent) !important;
    background: var(--ar-accent) !important;
    color: #fff !important;
}

html body .settings .set-button.primary:hover:not(:disabled) {
    border-color: #185cb0 !important;
    background: #185cb0 !important;
}

html body .settings .set-button.danger,
html body .settings .set-button.danger:hover:not(:disabled) {
    color: var(--set-error) !important;
}

html body .settings .set-button.danger:hover:not(:disabled) {
    border-color: rgba(192, 50, 43, 0.45) !important;
    background: rgba(192, 50, 43, 0.06) !important;
}

html body .settings .set-button:disabled {
    opacity: 0.5;
    cursor: default;
}

html body .settings .set-button:focus-visible,
html body .settings .set-segment:focus-visible,
html body .settings .set-nav-item:focus-visible {
    outline: 3px solid rgba(31, 111, 209, 0.35) !important;
    outline-offset: 2px;
}

/* Status and notices */
html body .settings .set-status {
    margin: 0 18px 14px !important;
    padding: 10px 12px !important;
    border-radius: 10px;
    background: var(--set-soft);
    color: var(--ar-text) !important;
    font: 13.5px/1.5 var(--ar-font) !important;
    white-space: pre-line;
}

html body .settings .set-status[data-status="ok"] {
    background: rgba(31, 138, 58, 0.1);
}

html body .settings .set-status[data-status="warn"] {
    background: rgba(168, 107, 0, 0.12);
}

html body .settings .set-status[data-status="error"] {
    background: rgba(192, 50, 43, 0.1);
    color: #8f1f19 !important;
}

html body .settings .set-notice {
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px;
    background: #fff4d6;
    color: #6b4b00 !important;
    font: 600 13.5px var(--ar-font) !important;
}

/* ------------------------------------------------ host health */

.luma-health-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
}

/* Copy diagnostics / Report a problem, under the checks */
.luma-health-foot {
    border-top: 1px solid var(--set-line);
    justify-content: flex-end;
}

.luma-health-foot .set-inline-status {
    flex: 1 1 220px;
}

html body .settings .luma-health-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    font: 700 15.5px var(--ar-font) !important;
}

.luma-health-summary::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--set-ok);
    box-shadow: 0 0 0 4px rgba(31, 138, 58, 0.15);
}

.luma-health-summary[data-status="warn"]::before {
    background: var(--set-warn);
    box-shadow: 0 0 0 4px rgba(168, 107, 0, 0.15);
}

.luma-health-summary[data-status="error"]::before {
    background: var(--set-error);
    box-shadow: 0 0 0 4px rgba(192, 50, 43, 0.15);
}

.luma-health-summary:empty::before {
    display: none;
}

html body .settings .luma-health {
    margin: 0;
    padding: 0;
    list-style: none;
}

.luma-health-row {
    display: grid;
    grid-template-columns: 26px minmax(140px, 200px) minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 12px 18px;
    border-top: 1px solid var(--set-line);
    font-family: var(--ar-font);
}

/* A fix offered with a check (Restart Sunshine): under its detail. */
.luma-health-row .luma-health-action {
    grid-column: 3;
    justify-self: start;
}

.luma-health-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font: 800 13px var(--ar-font);
}

.luma-health-ok .luma-health-icon {
    background: rgba(31, 138, 58, 0.14);
    color: var(--set-ok);
}

.luma-health-warn .luma-health-icon {
    background: rgba(168, 107, 0, 0.16);
    color: var(--set-warn);
}

.luma-health-error .luma-health-icon {
    background: rgba(192, 50, 43, 0.14);
    color: var(--set-error);
}

.luma-health-label {
    color: var(--ar-text);
    font-weight: 600;
    font-size: 14.5px;
}

.luma-health-detail {
    color: var(--ar-muted);
    font-size: 13.5px;
    line-height: 1.4;
}

.luma-health-error .luma-health-detail {
    color: #8f1f19;
}

.luma-health-busy .luma-health {
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

html body .settings .luma-log {
    margin: 0 18px 16px;
    padding: 12px;
    max-height: 240px;
    overflow: auto;
    border-radius: 10px;
    background: #0f1a2a;
    color: #cfe1ff;
    font: 12px/1.5 ui-monospace, Consolas, monospace;
    white-space: pre-wrap;
}

/* ------------------------------------------------ extra seats (luma_seats.js) */

.luma-seat-pad {
    margin: 0 18px 14px !important;
}

html body .settings .luma-seat-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 18px 14px;
    color: var(--ar-text);
    font: 13.5px/1.45 var(--ar-font);
}

html body .settings .luma-seat-check input {
    margin-top: 2px;
    flex: none;
}

.luma-seat-list {
    display: flex;
    flex-direction: column;
}

html body .settings .luma-seat-empty {
    margin: 0 !important;
    padding: 6px 18px 18px !important;
    color: var(--ar-muted) !important;
    font: 13.5px/1.45 var(--ar-font) !important;
}

.luma-seat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--set-line);
}

.luma-seat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.luma-seat-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.luma-seat-name {
    color: var(--ar-text);
    font: 700 15.5px var(--ar-font);
}

.luma-seat-chip {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--set-soft);
    color: var(--ar-muted);
    font: 700 11.5px var(--ar-font);
    letter-spacing: 0.02em;
}

.luma-seat-chip.ok {
    background: rgba(31, 138, 58, 0.12);
    color: var(--set-ok);
}

.luma-seat-chip.warn {
    background: rgba(168, 107, 0, 0.14);
    color: var(--set-warn);
}

.luma-seat-chip.error {
    background: rgba(192, 50, 43, 0.12);
    color: var(--set-error);
}

.luma-seat-who {
    color: var(--set-ok);
    font: 600 13.5px var(--ar-font);
}

.luma-seat-who.busy {
    color: var(--ar-text);
}

html body .settings .luma-seat-facts {
    margin: 0 !important;
    color: var(--ar-muted) !important;
    font: 13px/1.4 var(--ar-font) !important;
}

.luma-seat-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.luma-seat-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--set-soft);
    overflow: hidden;
}

.luma-seat-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ar-accent, #1f6fd1);
    transition: width 0.4s ease;
}

.luma-seat-step {
    color: var(--ar-text);
    font: 600 13px var(--ar-font);
}

html body .settings .luma-seat-status {
    margin: 0 !important;
}

.luma-seat-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

html body .settings .luma-seat-log {
    margin: 0;
}

.luma-seat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 18px;
    padding: 6px 18px 16px;
}

.luma-seat-wide {
    grid-column: 1 / -1;
}

html body .settings .luma-seat-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: var(--ar-font);
}

.luma-seat-field-label {
    color: var(--ar-text);
    font: 600 13.5px var(--ar-font);
}

.luma-seat-field-hint {
    color: var(--ar-muted);
    font: 12.5px/1.4 var(--ar-font);
}

html body .settings .luma-seat-field input:not([type="checkbox"]),
html body .settings .luma-seat-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid var(--set-field-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--ar-text) !important;
    font: 14px var(--ar-font) !important;
    box-shadow: none !important;
}

html body .settings .luma-seat-field input:focus,
html body .settings .luma-seat-field select:focus {
    outline: 2px solid rgba(31, 111, 209, 0.35);
    outline-offset: 1px;
}

/* ------------------------------------------------ touch controls */

.tc-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

html body .settings .tc-prefs .tc-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 20px;
    padding: 14px 18px;
    border-top: 1px solid var(--set-line);
}

html body .settings .tc-prefs .tc-field:first-child {
    border-top: none;
}

html body .settings .tc-prefs .tc-field-label {
    color: var(--ar-text);
    font: 600 14.5px/1.35 var(--ar-font);
}

html body .settings .tc-prefs .tc-field > :not(.tc-field-label):not(.tc-field-hint) {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
}

html body .settings .tc-prefs .tc-field-hint {
    grid-column: 1;
    opacity: 1;
    color: var(--ar-muted);
    font: 13px/1.45 var(--ar-font);
}

html body .settings .tc-prefs .tc-range {
    width: 280px;
    max-width: 50vw;
}

html body .settings .tc-prefs .tc-range input {
    width: auto;
}

.tc-prefs .tc-range-value {
    color: var(--ar-text);
    font: 600 14px var(--ar-font);
}

html body .settings .tc-prefs .tc-actions {
    justify-content: flex-end;
    padding: 14px 18px;
    border-top: 1px solid var(--set-line);
}

html body .settings .tc-systems {
    padding: 0 0 6px;
}

html body .settings .tc-system-table {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 0 28px;
    padding: 4px 18px 8px;
}

html body .settings .tc-system-row {
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--set-line);
}

html body .settings .tc-system-row .tc-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

.tc-system-name {
    color: var(--ar-text);
    font: 600 14px var(--ar-font);
}

html body .settings .tc-system-row .tc-select {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 13.5px !important;
}

html body .settings .tc-layouts {
    padding: 0;
}

.tc-layouts > .set-row:first-child {
    border-top: none;
}

/* Duplicate / Undo / Export / Import, with Reset or Delete apart on the right */
html body .settings .tc-layout-actions {
    justify-content: flex-start;
}

html body .settings .tc-layout-actions .set-button.danger {
    margin-left: auto !important;
}

html body .settings .tc-preview-row .set-row-control {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

html body .settings .tc-editor {
    padding: 12px 18px 18px;
}

/* The editing panel beside/below the preview (touch_controls/editor.js
   EditorPanel). Only here: over the stream it keeps its own dark look. */
html body .settings .tc-editor-panel {
    flex: 1 1 280px;
    max-width: none;
    box-sizing: border-box;
    padding: 14px !important;
    border-radius: 14px !important;
    border: 1px solid var(--set-line) !important;
    background: #f7f9fc !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 14px/1.45 var(--ar-font) !important;
}

html body .settings .tc-editor-panel .tc-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 13px;
    background: #e9eef5;
}

html body .settings .tc-editor-panel .tc-tabs .tc-tab,
html body .settings .tc-editor-panel .tc-tabs .tc-tab:hover:not(:disabled) {
    flex: 1 1 0;
    height: 36px;
    margin: 0 !important;
    padding: 0 10px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ar-muted) !important;
    text-shadow: none !important;
    font: 600 14px var(--ar-font) !important;
    cursor: pointer;
}

html body .settings .tc-editor-panel .tc-tabs .tc-tab:hover:not(:disabled) {
    color: var(--ar-text) !important;
}

html body .settings .tc-editor-panel .tc-tabs .tc-tab.tc-tab-on,
html body .settings .tc-editor-panel .tc-tabs .tc-tab.tc-tab-on:hover:not(:disabled) {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15, 51, 95, 0.18) !important;
    color: var(--ar-accent) !important;
}

html body .settings .tc-editor-panel .tc-btn,
html body .settings .tc-editor-panel .tc-btn:hover:not(:disabled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--set-field-border) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    text-shadow: none !important;
    font: 600 13.5px var(--ar-font) !important;
    transform: none !important;
    cursor: pointer;
}

html body .settings .tc-editor-panel .tc-btn:hover:not(:disabled) {
    border-color: #93aac5 !important;
    background: #f5f8fc !important;
}

html body .settings .tc-editor-panel .tc-btn.tc-primary,
html body .settings .tc-editor-panel .tc-btn.tc-primary:hover:not(:disabled) {
    border-color: var(--ar-accent) !important;
    background: var(--ar-accent) !important;
    color: #fff !important;
}

html body .settings .tc-editor-panel .tc-btn.tc-danger,
html body .settings .tc-editor-panel .tc-btn.tc-danger:hover:not(:disabled) {
    color: var(--set-error) !important;
}

html body .settings .tc-editor-panel .tc-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

html body .settings .tc-editor-panel .tc-palette-item,
html body .settings .tc-editor-panel .tc-palette-item:hover:not(:disabled) {
    justify-content: flex-start;
    width: 100%;
}

html body .settings .tc-editor-panel .tc-field-label {
    color: var(--ar-text);
    font: 600 13.5px var(--ar-font);
}

html body .settings .tc-editor-panel .tc-field-hint,
html body .settings .tc-editor-panel .tc-empty,
html body .settings .tc-editor-panel .tc-hint {
    opacity: 1;
    color: var(--ar-muted);
    font: 13px/1.45 var(--ar-font);
}

html body .settings .tc-editor-panel .tc-group {
    color: var(--ar-muted);
    opacity: 1;
    font: 700 11.5px var(--ar-font);
}

html body .settings .tc-editor-panel .tc-select,
html body .settings .tc-editor-panel .tc-text {
    box-sizing: border-box !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    border: 1px solid var(--set-field-border) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    font: 14px var(--ar-font) !important;
}

html body .settings .tc-editor-panel .tc-chip,
html body .settings .tc-editor-panel .tc-chip:hover:not(:disabled) {
    margin: 0 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--set-field-border) !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--ar-text) !important;
    text-shadow: none !important;
    font: 600 12px var(--ar-font) !important;
}

html body .settings .tc-editor-panel .tc-chip.tc-chip-on,
html body .settings .tc-editor-panel .tc-chip.tc-chip-on:hover:not(:disabled) {
    border-color: var(--ar-accent) !important;
    background: var(--ar-accent) !important;
    color: #fff !important;
}



/* ------------------------------------------------ narrow screens */

@media (max-width: 860px) {
    html body .settings.set-paged {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        margin-top: 8px !important;
        padding: 0 12px !important;
    }

    /* The side menu becomes a row of tabs that scrolls sideways */
    .set-nav {
        top: 0;
        z-index: 5;
        flex-direction: row;
        gap: 4px;
        padding: 6px;
        overflow-x: auto;
        border-radius: 14px;
        scrollbar-width: none;
    }

    .set-nav::-webkit-scrollbar {
        display: none;
    }

    .set-nav-heading {
        display: none;
    }

    html body .settings .set-nav-item,
    html body .settings .set-nav-item:hover:not(:disabled) {
        flex: none;
        width: auto !important;
        min-height: 40px;
        gap: 8px !important;
        padding: 0 12px !important;
        white-space: nowrap;
        font-size: 14px !important;
    }

    html body .settings.set-paged .set-pages {
        padding: 18px 14px 20px;
        border-radius: 16px;
    }
}

@media (max-width: 600px) {
    html body .settings .set-row,
    html body .settings .tc-prefs .tc-field {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px !important;
    }

    .set-row-control {
        justify-content: flex-start;
    }

    /* Switches stay on the right of their text */
    html body .settings .set-row:has(> .set-switch) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    html body .settings .set-row-control select,
    html body .settings .set-row-control input:not([type="checkbox"]):not([type="range"]):not([type="number"]),
    html body .settings .tc-prefs .tc-select {
        width: 100% !important;
        max-width: none !important;
    }

    html body .settings .set-row-control:has(select),
    html body .settings .set-row-control:has(input[type="text"]) {
        width: 100%;
    }

    html body .settings .tc-prefs .tc-field > :not(.tc-field-label):not(.tc-field-hint) {
        grid-column: 1;
        grid-row: auto;
        justify-self: stretch;
    }

    html body .settings .tc-prefs .tc-field:has(> input[type="checkbox"]) {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    html body .settings .tc-prefs .tc-field:has(> input[type="checkbox"]) > input[type="checkbox"] {
        grid-column: 2;
        grid-row: 1 / span 2;
        justify-self: end;
    }

    html body .settings .tc-prefs .tc-range {
        width: 100%;
        max-width: none;
    }

    .luma-health-row {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .luma-health-detail,
    .luma-health-row .luma-health-action {
        grid-column: 2;
    }

    html body .settings .tc-system-table {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 14px 8px;
    }

    .set-segmented {
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    html body .settings .set-segment,
    html body .settings .set-segment:hover:not(:disabled) {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 6px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .set-advanced > summary::before,
    html body .settings .set-switch input[type="checkbox"],
    html body .settings .set-switch input[type="checkbox"]::before {
        transition: none;
    }
}