/* ============================================================
   "Windows 7" theme for moonlight-web-stream
   Everything here is !important. Reason: styles/index.js calls
   document.head.appendChild(styleLink) on the #style <link> the
   very first time it runs, which *moves* that link to the end of
   <head> — after this stylesheet, however early it's linked in
   the HTML source. Plain cascade order can't be relied on to win
   against a stylesheet the app itself reorders at runtime, so
   every overriding declaration here is forced explicitly instead.
   Kept as a separate file (not a patch to standard.css/moonlight.css)
   so it survives re-deploying a newer moonlight-web-stream release —
   just re-link this file again.
   ============================================================ */

:root {
    /* Aero blue, not cyan-neon */
    --bg-0: #0a2a52 !important;
    --bg-1: #1c4f8c !important;
    --bg-2: #071d3c !important;
    --bg-3: #1c4f8c !important;
    --text-1: #eaf3ff !important;
    --text-2: #ffffff !important;
    --accent-cyan: #3d94f6 !important;
    --accent-cyan-2: #5aa7f7 !important;
    --accent-cyan-light: #bfe0ff !important;
    --muted: rgba(255, 255, 255, 0.08) !important;
    --error: #d63a3a !important;
    --error-light: #ff9a9a !important;
    --success: #2f9e44 !important;
    --warning: #e0a400 !important;
    --status-online: #2f9e44 !important;
    --status-offline: #8a8a8a !important;
    --status-connecting: #e0a400 !important;

    /* Win7 dialogs used tight 3-4px corners, not 12-16px pills */
    --radius-sm: 3px !important;
    --radius-md: 4px !important;
    --radius-lg: 6px !important;

    --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
    --shadow-3: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
    --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    --glow-cyan: 0 0 0 rgba(0, 0, 0, 0) !important;
    --glow-cyan-bright: 0 0 0 rgba(0, 0, 0, 0) !important;

    --aero-glass-light: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(238, 244, 251, 0.92) 45%, rgba(214, 228, 245, 0.92) 100%);
    --aero-titlebar: linear-gradient(180deg, #6fb1f0 0%, #3d84d8 6%, #2568c2 45%, #1959b3 55%, #0f4aa0 100%);
    --win7-text-dark: #1a1a1a;
}

/* Segoe UI first (real on Windows), period-accurate fallbacks after */
body {
    /* standard.css only zeroes margin-top/margin-bottom, leaving the
       browser's default 8px left/right body margin in place — that's
       the gap on both sides of the top bar. */
    margin: 0 !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55) !important;
    background-color: #0d3f6e !important;
}

/* Desktop wallpaper: an approximation of the Win7 "Harmony" default —
   a teal-to-blue radial swirl behind everything, standing in for a
   real bitmap since we can't ship one here. */
body::before {
    background:
        radial-gradient(ellipse 90% 70% at 30% 20%, rgba(93, 200, 210, 0.55) 0%, rgba(93, 200, 210, 0) 55%),
        radial-gradient(ellipse 80% 60% at 75% 85%, rgba(56, 150, 210, 0.5) 0%, rgba(56, 150, 210, 0) 55%),
        linear-gradient(160deg, #0d3f6e 0%, #12578f 35%, #0a3f75 65%, #041c3d 100%) !important;
}

h2,
h3 {
    text-shadow: none !important;
    font-weight: 600 !important;
    color: var(--win7-text-dark);
}

/* ---- Buttons: glossy Aero, not neon-pill ----
   standard.css's original button rule sets `background-size: 60px` (a
   small fixed icon-sized patch, not a fill) and `background-repeat:
   no-repeat` — since that property was never overridden here, our
   gradient was only painting a tiny 60px patch in the middle of every
   button instead of filling it, leaving the rest transparent. Explicit
   background-size/repeat/position below fixes that for good. */
.file-button,
button {
    background-color: transparent !important;
    background-image: linear-gradient(180deg, #fdfefe 0%, #eaf2fb 45%, #d3e6f9 50%, #eef6fe 100%) !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 1px solid #6a97c2 !important;
    border-radius: 4px !important;
    padding: 8px 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    color: var(--win7-text-dark) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    font-weight: 400 !important;
    transform: none !important;
}

.file-button:hover:not(:disabled),
button:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #fdfefe 0%, #d9ecfd 45%, #b7d9f8 50%, #d9edfe 100%) !important;
    background-size: 100% 100% !important;
    border-color: #2a68c2 !important;
    box-shadow: 0 0 0 2px rgba(61, 148, 246, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-1px) !important;
    color: var(--win7-text-dark) !important;
}

button:disabled {
    background-image: none !important;
    background-color: #d9d9d9 !important;
    border-color: #b3b3b3 !important;
    color: #7a7a7a !important;
}

/* Round Aero "orb" treatment for the icon-only action buttons —
   evokes the Start orb / pinned taskbar buttons rather than a glowing
   sci-fi tile. The icon itself is drawn as a ::after pseudo-element
   layered on top, sized/positioned independently of the button's own
   background — deliberately not stacked as another background-image
   layer, since that's what caused the button-fill bug above and is
   fragile the same way. */
.logout-button,
.login-button,
.admin-button,
.open-settings,
.host-add,
.user-button {
    position: relative !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid #12408c !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transform: none !important;
}

.logout-button::before,
.login-button::before,
.admin-button::before,
.open-settings::before,
.host-add::before,
.user-button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-image:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #4fa3ef 0%, #2a72d6 45%, #1c57ac 55%, #2f7fdb 100%);
    background-size: 100% 100%;
    z-index: 0;
}

.logout-button::before,
.admin-button::before {
    background-image:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #ef6f5f 0%, #d6402a 45%, #ac1c1c 55%, #db4a2f 100%);
}

.host-add::before {
    background-image:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(180deg, #6fcf7a 0%, #3fa04a 45%, #237a2c 55%, #4bb356 100%);
}

.logout-button::after,
.login-button::after,
.admin-button::after,
.open-settings::after,
.host-add::after,
.user-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    background-size: 34px 34px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
}

.open-settings::after {
    background-image: url("../resources/settings.svg");
}

.login-button::after,
.user-button::after {
    background-image: url("../resources/new/user.svg");
}

.logout-button::after {
    background-image: url("../resources/new/logout-svgrepo-com.svg");
}

.admin-button::after {
    background-image: url("../resources/new/admin-svgrepo-com.svg");
}

.host-add::after {
    background-image: url("../resources/ic_add_to_queue_white_48px.svg");
}

.logout-button,
.admin-button {
    border-color: #8c1212 !important;
}

.host-add {
    border-color: #1c5c22 !important;
}

.logout-button:hover,
.login-button:hover,
.admin-button:hover,
.open-settings:hover,
.host-add:hover,
.user-button:hover {
    transform: translateY(-1px) scale(1.04) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* ---- Checkboxes: flat classic Windows box, not a glow ring ---- */
input[type="checkbox"] {
    border: 1px solid #6a7a8c !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #ffffff 0%, #e4ecf5 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

input[type="checkbox"]:hover {
    border-color: #2a68c2 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

input[type="checkbox"]::after {
    color: #1a1a1a !important;
}

input[type="checkbox"]:checked {
    background: linear-gradient(180deg, #eaf3ff 0%, #cfe4fb 100%) !important;
    border-color: #2a68c2 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* ---- Text fields: recessed Aero field, not a glow field ---- */
.textlike,
textarea,
select,
.select-polyfill-display,
input[type=text],
input[type=password],
input[type=number] {
    color: var(--win7-text-dark) !important;
    background-color: #ffffff !important;
    border: 1px solid #7f9db9 !important;
    border-radius: 2px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
}

.textlike:hover,
textarea:hover:enabled,
select:hover:enabled,
.select-polyfill-display:hover,
input[type=text]:hover:enabled,
input[type=password]:hover:enabled,
input[type="number"]:hover:enabled {
    background-color: #ffffff !important;
    border-color: #2a68c2 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(61, 148, 246, 0.4) !important;
}

select option {
    background-color: #ffffff !important;
    color: var(--win7-text-dark) !important;
}

a, label {
    color: var(--win7-text-dark);
}

/* ---- Modals & sidebar: light Aero-glass window, not a dark neon panel ---- */
.modal-content,
.sidebar-content {
    background: var(--aero-glass-light) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #6a97c2 !important;
    border-radius: 8px 8px 6px 6px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: var(--win7-text-dark) !important;
}

.modal-content a,
.modal-content label,
.sidebar-content a,
.sidebar-content label {
    color: var(--win7-text-dark) !important;
}

/* Fake Aero titlebar strip along the top of every dialog */
.modal-content {
    padding-top: 44px !important;
}

.modal-content::before {
    content: "Luma Arcade";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    line-height: 34px;
    padding: 0 14px;
    background: var(--aero-titlebar);
    border-radius: 7px 7px 0 0;
    border-bottom: 1px solid #123a70;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.modal-content h2,
.modal-content h3,
.modal-content label,
.modal-content p {
    color: var(--win7-text-dark) !important;
    text-shadow: none !important;
}

/* ---- Context menu: flat classic Windows menu, not a glass panel ---- */
.context-menu-background {
    background: #fdfdfd !important;
    backdrop-filter: none !important;
    border: 1px solid #8fa9c7 !important;
    border-radius: 3px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

.context-menu-element {
    color: var(--win7-text-dark) !important;
    border-radius: 2px !important;
}

.context-menu-element:hover {
    background: linear-gradient(180deg, #e5f2ff 0%, #cfe8fd 100%) !important;
    transform: none !important;
    border-left: 1px solid #7fb4ea !important;
    padding-left: 10px !important;
}

.context-menu-element-red {
    color: #b02a2a !important;
}

.context-menu-element-red:hover {
    background: linear-gradient(180deg, #ffe5e5 0%, #ffd0d0 100%) !important;
    border-left-color: #e08a8a !important;
}

/* ---- Host tiles: desktop-icon look, not a glowing card ---- */
.host-element {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transform: none !important;
}

.host-element:hover {
    transform: none !important;
    background: linear-gradient(180deg, rgba(146, 200, 255, 0.35) 0%, rgba(94, 163, 235, 0.35) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(20, 80, 160, 0.25) !important;
}

.host-element:hover .host-image {
    transform: none !important;
    box-shadow: none !important;
}

.host-name {
    font-weight: 400 !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85), -1px -1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ---- Top bar: Aero taskbar strip instead of a floating cluster ---- */
.top-line {
    background: linear-gradient(180deg, rgba(60, 110, 170, 0.55) 0%, rgba(20, 55, 105, 0.65) 100%) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
    padding: 6px 10px !important;
}

.top-line h1 {
    color: #ffffff !important;
}

/* ---- Toasts/notifications: Windows 7 balloon-tip style ---- */
.toast,
.notification-element {
    background: linear-gradient(180deg, #fffef0 0%, #fff4c2 100%) !important;
    border: 1px solid #d9b23c !important;
    color: #4a3b00 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}

.toast.success {
    background: linear-gradient(180deg, #f2ffef 0%, #d8f5cf 100%) !important;
    border-color: #6fbf5c !important;
    color: #1f4a17 !important;
}

.toast.error {
    background: linear-gradient(180deg, #fff0f0 0%, #ffd6d6 100%) !important;
    border-color: #d9756c !important;
    color: #5a1414 !important;
}

.toast.warning {
    background: linear-gradient(180deg, #fffef0 0%, #fff0c2 100%) !important;
    border-color: #d9b23c !important;
    color: #4a3b00 !important;
}

/* ---- Stream settings panel: Aero glass card, not a bare label/input
   dump straight on the wallpaper ---- */
.settings {
    display: block !important;
    max-width: 760px !important;
    margin: 90px auto 40px !important;
    padding: 24px 32px 32px !important;
    background: var(--aero-glass-light) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid #6a97c2 !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    color: var(--win7-text-dark) !important;
}

/* Each h3 starts a new settings section -- style it like a small Aero
   ribbon/tab strip so the 6 sections are easy to scan at a glance,
   rather than just another bit of bold text in a long flat list. */
.settings h3 {
    margin: 28px -12px 12px !important;
    padding: 7px 12px !important;
    background: linear-gradient(180deg, rgba(146, 200, 255, 0.35) 0%, rgba(94, 163, 235, 0.22) 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-bottom: 1px solid #7fb4ea !important;
    border-radius: 4px !important;
    color: #0f335f !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

.settings h3:first-child {
    margin-top: 0 !important;
}

.settings .input-div {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px 12px !important;
    padding: 8px 8px 2px !important;
    border-radius: 3px !important;
}

.settings .input-div:hover {
    background: rgba(61, 148, 246, 0.12) !important;
}

.settings .input-div label {
    flex: 1 1 auto !important;
    min-width: 160px !important;
    color: var(--win7-text-dark) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

.settings .input-div input,
.settings .input-div select,
.settings .input-div .select-polyfill-wrapper,
.settings .input-div .textlike {
    flex: 0 0 auto !important;
    max-width: 220px !important;
    margin: 0 !important;
}

.settings input[type="range"] {
    flex: 1 1 auto !important;
}

/* Explanatory line under each setting -- these used to just be a bare
   label with zero context for what the option actually does. */
.settings small.setting-hint {
    display: block !important;
    width: 100% !important;
    margin: -2px 0 10px 8px !important;
    padding-right: 8px !important;
    color: #3f5872 !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}

/* ---- Scrollbars (Chromium/WebKit) ---- */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #dbe7f2;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c3d6e8 0%, #9fb9d4 100%);
    border: 1px solid #7f9db9;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d3e2f0 0%, #aec6de 100%);
}

/* ---- Stream video: fill the viewport without cropping ----
   The stream is requested in the viewer's own screen shape (see
   matchScreenAspect in stream/index.js), so in fullscreen it fills the
   screen exactly. object-fit: contain keeps the whole picture visible
   whenever the shapes still differ (a windowed browser, an unusual
   screen): thin bars rather than cropping ES-DE's edges and help bar off,
   which is what object-fit: cover did on 16:10 laptops. */
.video-stream {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
}

video.video-stream,
canvas.video-stream {
    object-fit: contain !important;
}


/* ---- Admin panel: tabs, panels, user/role list rows ---- */
.admin-panel-tabs {
    display: flex !important;
    gap: 8px !important;
    padding: 16px 20px 0 !important;
}

.admin-panel-content {
    padding: 16px 20px 40px !important;
}

.user-panel,
.role-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    max-width: 420px !important;
}

.user-panel input,
.role-panel input {
    width: 100% !important;
    max-width: 320px !important;
}

.user-list,
.role-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px !important;
    width: 100% !important;
    max-width: 320px !important;
    background: var(--aero-glass-light) !important;
    border: 1px solid #6a97c2 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.user-element,
.role-element {
    padding: 8px 10px !important;
    border-radius: 2px !important;
    color: var(--win7-text-dark) !important;
    cursor: pointer !important;
}

.user-element:hover,
.role-element:hover {
    background: linear-gradient(180deg, #e5f2ff 0%, #cfe8fd 100%) !important;
    border-left: 1px solid #7fb4ea !important;
    padding-left: 9px !important;
}


/* ---- Stream sidebar volume slider ---- */
.sidebar-volume-label {
    display: block !important;
    margin-top: 14px !important;
    margin-bottom: 4px !important;
    color: var(--win7-text-dark) !important;
    font-size: 0.9rem !important;
}

.sidebar-volume-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #c7d8ea 0%, #eef4fa 100%) !important;
    border: 1px solid #7f9db9 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    outline: none !important;
    margin: 0 !important;
}

.sidebar-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #fdfefe 0%, #cfe4fb 100%) !important;
    border: 1px solid #2a68c2 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
}

.sidebar-volume-slider::-moz-range-thumb {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #fdfefe 0%, #cfe4fb 100%) !important;
    border: 1px solid #2a68c2 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    cursor: pointer !important;
}

.sidebar-volume-slider::-moz-range-track {
    height: 6px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, #c7d8ea 0%, #eef4fa 100%) !important;
    border: 1px solid #7f9db9 !important;
}

/* ---- Quality Preset: the first thing in Settings, styled to stand
   out from the regular section headers below it ---- */
.settings h3:first-of-type {
    margin-top: 0 !important;
    background: linear-gradient(180deg, #6fcf7a 0%, #3fa04a 45%, #237a2c 55%, #4bb356 100%) !important;
    border-bottom-color: #1c5c22 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}