body {
    background-color: rgb(48, 48, 48);
    font-size: 1.2rem;
    font-family: sans-serif;
    margin: 0;
}

/* Prevent pull down refresh when Streaming */
html.stream,
body.stream {
    overscroll-behavior: none !important;
}

h1 {
    color: white;
}

h2,
h3 {
    margin-top: 12px;
    margin-bottom: 8px;
}

/** Input Div */
.input-div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/** Hide the file input */
input[type="file"] {
    display: none;
}

/** Label */
.file-label,
label {
    cursor: default;
    margin-right: 5px;
    margin-left: 5px;
    color: white;
}

/** Button */
.file-button,
button {
    background-color: rgba(63, 81, 181, 1.0);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px;
    margin: 8px;
    font-size: 1.2rem;
    cursor: pointer;
}

.file-button:hover,
button:hover {
    transition: box-shadow 0.2s;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2);
}

/** Checkbox */
input[type="checkbox"] {
    /* remove native box */
    appearance: none;
    vertical-align: middle;
    min-width: 24px;
    min-height: 24px;
    border: 2px solid #555;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

input[type="checkbox"]::after {
    content: "✓";
    color: white;
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    /* start hidden */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

input[type="checkbox"]:checked {
    /* box fill */
    background: rgb(206, 147, 216);
    border-color: rgb(206, 147, 216);
}

input[type="checkbox"]:checked::after {
    /* scale in */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/** Text Field likes  */
.textlike,
textarea,
select,
input[type=text],
input[type=password],
input[type=number] {
    color: white;
    font-size: 1.2rem;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* multiline */
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre-wrap;

    max-height: max-content;
}

.textlike:hover,
textarea:hover:enabled,
select:hover:enabled,
input[type=text]:hover:enabled,
input[type=password]:hover:enabled,
input[type="number"]:hover:enabled {
    transition: all 0.2s;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(255, 255, 255, 0.7);
}

textarea:disabled,
select:disabled,
input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled {
    color: gray;
}

select option {
    background-color: rgb(66, 66, 66);
}

/** Select Buttons */
.select-button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    margin: 5px;
}

.select-button {
    background-color: rgb(66, 66, 66);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0;
}

.select-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.select-button.selected {
    background-color: rgba(63, 81, 181, 1.0);
    border-color: rgba(63, 81, 181, 1.0);
}

.select-button.selected:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/** Hide the number up down thingy on number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    /* <-- Apparently some margin are still there even though it's hidden */
    margin: 0;
}

input[type=number] {
    appearance: textfield;
    /* Firefox */
    -moz-appearance: textfield;
}

/** Modal */
.modal-background {
    display: block;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    /** animation */
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, background 0.1s linear, opacity 0.1s linear;
}

.modal-content {
    background-color: rgb(86, 92, 100);

    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 5px;

    width: 80%;
    max-width: 500px;

    color: white;
}

@media (max-height: 500px) {
    .modal-content {
        margin: 10px auto;
    }
}

.stream .modal-content {
    max-width: none;
}

.modal-disabled {
    /** animation */
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: all 0.1s linear;
}

/** Context Menu */
.context-menu-background {
    display: block;
    position: fixed;
    z-index: 2;
    border-radius: 5px;
    background-color: rgb(86, 92, 100);
    /** animation */
    scale: 1;
    opacity: 1;
    translate: 0 0;
    transition: visibility 0s, opacity 0.05s linear, scale 0.05s linear, translate 0.05s linear;
}

.context-menu-list {
    list-style-type: none;
}

.context-menu-element {
    margin: 0;
    padding: 10px;
    min-width: 110px;
    cursor: pointer;
    border-radius: 5px;
    /** animation */
    transition: all 0.15s;
    background-color: rgba(255, 255, 255, 0);
    color: white;
}

.context-menu-element:hover {
    /** animation */
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.2);
}

.context-menu-disabled {
    visibility: hidden;
    /** animation */
    opacity: 0;
    scale: 0.7;
    translate: -30% -30%;
    transition: all 0.1s linear, opacity 0.1s ease-out;
}

/** Sidebar */
.sidebar-overlay {
    position: fixed;
    z-index: 1;
    pointer-events: none;
}

.sidebar-background {
    display: flex;
    align-items: center;
    /** animation */
    transition: all 0.2s 0s linear;
}

.sidebar-background * {
    pointer-events: all;
}

.sidebar-overlay.sidebar-edge-left {
    top: 50%;
    left: 0;
}

.sidebar-edge-left .sidebar-background {
    flex-direction: row-reverse;
    transform: translate(calc(-100% + 30px), -50%);
}

.sidebar-overlay.sidebar-edge-right {
    top: 50%;
    right: 0;
}

.sidebar-edge-right .sidebar-background {
    flex-direction: row;
    transform: translate(calc(100% - 30px), -50%);
}

.sidebar-edge-left.sidebar-show .sidebar-background,
.sidebar-edge-right.sidebar-show .sidebar-background {
    transform: translate(0, -50%);
}

.sidebar-overlay.sidebar-edge-up {
    top: 0;
    left: 50%;
}

.sidebar-edge-up .sidebar-background {
    flex-direction: column-reverse;
    transform: translate(-50%, calc(-100% + 30px));
}

.sidebar-overlay.sidebar-edge-down {
    bottom: 0;
    left: 50%;
}

.sidebar-edge-down .sidebar-background {
    flex-direction: column;
    transform: translate(-50%, calc(100% - 30px));
}

.sidebar-edge-down.sidebar-show .sidebar-background,
.sidebar-edge-up.sidebar-show .sidebar-background {
    transform: translate(-50%, 0);
}

.sidebar-button {
    /** Note: Button full size: 30px(width / height) + 5px(padding as in button selector) + 5px(.sidebar-background gap) = 40px */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.sidebar-button-image {
    transition: all 0.3s linear;
}

.sidebar-edge-left .sidebar-button-image {
    rotate: 180deg;
}

.sidebar-edge-right .sidebar-button-image {
    rotate: 0deg;
}

.sidebar-edge-up .sidebar-button-image {
    rotate: 270deg;
}

.sidebar-edge-down .sidebar-button-image {
    rotate: 90deg;
}

.sidebar-show .sidebar-button-image {
    transform: rotate(180deg);
}


.sidebar-content {
    background-color: rgb(86, 92, 100);
    border-radius: 5px;
    padding: 10px 10px 10px 10px;
    display: flex;
    flex-direction: column;
}

/** TODO: reorder stream sidebar */

/** Errors */
.error-list {
    visibility: hidden;
    position: fixed;
    z-index: 1;

    right: 0;
    bottom: 0;

    display: flex;
    flex-direction: column;
    margin-right: 1cm;
}

.error-element {
    visibility: visible;
    display: flex;
    flex-direction: row;

    padding-left: 0.4cm;
    padding-right: 0.4cm;
    padding-top: 0.2cm;
    padding-bottom: 0.2cm;
    margin-bottom: 0.5cm;

    background-color: rgb(86, 92, 100);
}

.error-image {
    margin-right: 0.3cm;
}

/** Animated Lists */
.animated-list-element {
    /** animation */
    opacity: 0;
}

.animated-list-element.list-show {
    /** animation */
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/** Actions */
.actions-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/** Settings */
.open-settings {
    background-image: url("resources/settings.svg?v=fd20b769e564");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px;
    width: 70px;
    height: 70px;
}

.fullscreen-launch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.85;
}
.fullscreen-launch:hover { opacity: 1; }

.settings {
    color: white;
}

/** Hosts */
.host-add {
    background-image: url("resources/ic_add_to_queue_white_48px.svg?v=fd20b769e564");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px;
    width: 70px;
    height: 70px;
}

.host-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.host-element {
    cursor: pointer;
    margin: 0.2cm;
    padding-top: 0.1cm;
    padding-bottom: 0.5cm;
    padding-left: 0.4cm;
    padding-right: 0.4cm;
}

.host-element:hover {
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.2);
}

.host-image {
    width: 6cm;
    height: auto;
}

.host-name {
    margin: 0;
    color: white;
    font-size: 3rem;
    text-align: center;
}

/** Apps */
.app-list {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.app-element>div {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px;
}

.app-element:hover {
    transition: all 0.2s;
    background-color: rgba(255, 255, 255, 0.2);
}

.app-image {
    /** Ratio: w:h 200:266 */
    width: 200px;
    height: 266px;
    /** animation */
    transition: all 0.4s linear;
    opacity: 0;
}

.app-image-loaded {
    /** animation */
    opacity: 1;
    transition: opacity 0.1s ease-in;
}

.app {
    transition: all 0.4s linear;
}

.app-active .app-image {
    border-style: solid;
    /** TODO: gold doesn't fit this theme */
    border-color: gold;
    border-width: 4px;
    border-radius: 4px;

    transition: all 0.4s ease-in;
}

.app-inactive {
    filter: brightness(30%);

    transition: all 0.2s ease-in;
}

/** Stream Connect Modal */
.modal-video-connect {
    max-width: 100%;
    max-height: 100%;
}

.modal-video-connect .modal-video-connect-debug {
    max-width: 75vw;
    max-height: 40vh;
}

/** Stream */
.video-stream {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    min-width: 100vmin;
    min-height: 100vmin;
    width: auto;
    height: auto;
    outline: none;
}

canvas.video-stream {
    /* Override the centering transform from .video-stream — transform forces the compositor
       to apply a matrix on every vsync even when the canvas content hasn't changed.
       For a full-viewport canvas, position: fixed + inset: 0 achieves the same layout
       without any per-frame compositor cost. */
    top: 0;
    left: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    min-width: unset;
    min-height: unset;
    max-width: unset;
    max-height: unset;
    object-fit: contain;
    will-change: contents;
}

video.video-stream.video-stream-stretched {
    width: 100vw;
    height: 100vh;
    min-width: unset;
    min-height: unset;
    object-fit: fill;
}

/** Stream Stats Overlay */
.stream-stats-overlay {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    color: #0f0;
    font-family: "Courier New", monospace;
    font-size: 0.75rem;
    padding: 8px 12px;
    border-radius: 4px;
    pointer-events: none;
    line-height: 1.5;
    min-width: 180px;
}

.stream-stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.stream-stats-label {
    color: #ccc;
}

.stream-stats-value {
    color: #0f0;
    text-align: right;
}

.sidebar-stream {
    display: flex;
    flex-direction: column;
}

.sidebar-stream div {
    padding: 5px;
}

.sidebar-stream-buttons {
    display: grid;
    grid-template-columns: 50% 50%;
}

.sidebar-build-tag {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    word-break: break-all;
}

.hiddeninput {
    position: fixed;
    width: 1px;
    height: 1px;
    bottom: -9999px;
    right: -9999px;
    z-index: -9999;
    opacity: 0;
    pointer-events: none;
    resize: none;
    border: none;
}

/** Input-only page (input.html) */

/* The dummy `#input` element doubles here as the visible input surface — the
   whole area below the toolbar. Touches/clicks anywhere on it are sent to the
   host; touches on the toolbar (a separate, fixed-position sibling on top of
   it) never reach it, so the buttons can't also register as clicks.

   Position and height are set by JavaScript (input.ts) to account for the
   toolbar's actual height and viewport changes (e.g., soft keyboard appearing
   on mobile). This ensures the toolbar buttons stay accessible even when the
   soft keyboard appears/disappears. */
.input-only-surface {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

.input-only-surface-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80vw;
    padding: 0 24px;
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

/* Deliberately NOT positioned: the screen keyboard's hidden textarea is
   appended into this div and relies on escaping to the viewport as its
   containing block (see .hiddeninput's `translate: 200vw 200vh`) — giving
   this element `position` would make it that containing block instead and
   pull the "hidden" textarea back on screen. The toolbar below carries its
   own `position: fixed` and z-index, which is all the stacking control
   that's actually needed here. */
.input-only-app {
}

.input-only-toolbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    color: white;
    background: rgba(20, 20, 20, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    max-height: 70vh;
    overflow-y: auto;
}

.input-only-status {
    font-size: 1rem;
}

.input-only-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.input-only-settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

/* Prevent starting animation for elements */
.prevent-start-transition {
    transition: none;
}

/** Settings Layout */
.settings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    align-items: stretch;
}

.settings-section {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 20px;
    background-color: rgba(30, 30, 30, 0.5);
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.settings-section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    color: #64b5f6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

/* Vertical layout for inputs in settings */
.settings-section .input-div {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
}

.settings-section .input-div label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-size: 1rem;
}

/* Full width inputs */
.settings-section .input-div input[type="text"],
.settings-section .input-div input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.settings-section .input-div .select-button-group {
    width: 100%;
    margin: 0;
    gap: 10px;
}

.settings-section .input-div .select-button {
    flex: 1;
    text-align: center;
}

/* Checkboxes horizontal */
.settings-section .input-div.input-type-checkbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 4px;
}

.settings-section .input-div.input-type-checkbox label {
    margin-bottom: 0;
    margin-right: 10px;
}

.settings-section h3 {
    margin-top: 10px;
    font-size: 1.1rem;
    color: white;
}

/* App Container for full layout */
.app-container {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent scrolling on the container itself */
}

/* Header Bar */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(63, 81, 181, 1.0); /* Blue color from existing buttons */
    color: white;
    padding: 10px 20px;
    height: 60px; /* Fixed height for the bar */
    flex-shrink: 0; /* Prevent it from shrinking */
    position: sticky; /* Keep it at the top when scrolling, if content scrolls */
    top: 0;
    z-index: 1;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-center {
    flex-grow: 1; /* Allows center to take up available space */
    text-align: center;
}

.header-title {
    margin: 0; /* Remove default h1 margin */
    font-size: 1.5rem;
    font-weight: normal;
    color: white;
}

/* Back Button styling */
.back-button {
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem; /* Bigger arrow */
    cursor: pointer;
    padding: 0 15px; /* More padding */
    margin: 0;
}

.back-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* App Content area */
.app-content {
    flex-grow: 1; /* Take all remaining vertical space */
    overflow-y: auto; /* Allow content to scroll if it overflows */
    padding-top: 20px; /* Add some space between header and content */
    padding-left: 20px;
    padding-right: 20px;
}

/* Adjustments for existing open-settings and host-add buttons */
.header-left .host-add,
.header-right .open-settings {
    width: 50px; /* Bigger icon buttons */
    height: 50px;
    background-size: 70%; /* Adjust background image size */
    margin: 0; /* Remove default button margin */
    padding: 0;
    border-radius: 50%; /* Make them round */
    background-color: rgba(255, 255, 255, 0.1); /* Lighter background for action buttons */
}
.header-left .host-add:hover,
.header-right .open-settings:hover {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
}

/* Override default h2/h3 margin for settings_menu if needed */
.app-content h2,
.app-content h3 {
    margin-top: 12px;
    margin-bottom: 8px;
}

/* Override .settings padding which is now handled by .app-content padding */
.app-content .settings {
    padding: 0;
    margin: 0;
}

/* Modal Forms - applying similar styling to settings sections */
.modal-content .input-div {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px; /* Increased gap */
}

.modal-content .input-div label {
    font-weight: bold;
    margin-bottom: 8px;
    color: #e0e0e0;
    font-size: 1rem;
}

.modal-content .input-div input[type="text"],
.modal-content .input-div input[type="password"],
.modal-content .input-div input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px; /* Consistent with other inputs */
}

.modal-content h2 { /* For modal headers */
    color: #64b5f6; /* Consistent with settings section headers */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

/* Modal Buttons */
.modal-content button, .sidebar-stream-buttons button {
    padding: 10px 20px;
    margin: 5px;
    border-radius: 4px; /* Consistent with other buttons */
    color: white;
}

/* Style for the Cancel button specifically */
.modal-content form button:last-child { /* Assuming cancel is always last */
    background-color: rgb(80, 80, 80); /* Grey background */
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.modal-content form button:last-child:hover {
    background-color: rgb(100, 100, 100);
    box-shadow: none; /* Remove default hover shadow */
}

/* Modal specific input group for horizontal layout */
.modal-content .add-host-input-group {
    display: flex;
    flex-direction: row;
    gap: 15px; /* Space between the two inputs */
    align-items: flex-end; /* Align inputs themselves at the bottom */
    margin-bottom: 20px;
}

.modal-content .add-host-input-group .input-div {
    flex-direction: column; /* Keep labels on top */
    align-items: flex-start;
    margin-bottom: 0; /* Reset previous margin if any */
}

/* Address input should take most of the space */
.modal-content .add-host-input-group .input-div:first-child {
    flex-grow: 1;
}

/* Port input field styling */
.modal-content .add-host-input-group .input-type-text:last-child { /* Targeting the last input-div (port) */
    width: 100px; /* Small width for 6 digits */
    flex-shrink: 0; /* Prevent it from shrinking */
}

.modal-content .add-host-input-group .input-type-text:last-child input[type="text"],
.modal-content .add-host-input-group .input-type-text:last-child input[type="number"] {
    width: 100px; /* Specific width for the input element */
}