/*
 * Copyright (c) 2026, Codename One and/or its affiliates. All rights reserved.
 * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER.
 * This code is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License version 2 only, as
 * published by the Free Software Foundation.  Codename One designates this
 * particular file as subject to the "Classpath" exception as provided
 * by Oracle in the LICENSE file that accompanied this code.
 *
 * This code is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License
 * version 2 for more details (a copy is included in the LICENSE file that
 * accompanied this code).
 *
 * You should have received a copy of the GNU General Public License version
 * 2 along with this work; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA.
 *
 * Please contact Codename One through http://www.codenameone.com/ if you
 * need additional information or have any questions.
 */
html, body {
    margin: 0;
    padding: 0;
}

body {
    position: fixed; 
    overflow: hidden;
    width: 100%;
    height: 100%
}
/* Holy Mother!!  This snippet is required so that IE 11 doesn't completely
   block our event listeners!!! */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   body {
        overflow: visible;
        overflow-y: scroll;
        height: auto;
   }
}
body::-webkit-scrollbar { width: 0 !important }

#codenameone-canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    /* Deliver touch gestures to the app instead of letting the browser
       claim them for native pan/zoom. Without this the canvas's touchmove
       handler is treated as passive and the browser swallows drag gestures,
       so touch/drag scrolling never reaches Codename One (mouse-wheel scroll
       still works because it is a separate event). */
    touch-action: none;
    -ms-touch-action: none;
}

.cn1-edit-string, .cn1-string-picker {
    position: absolute;
    background-color: transparent;
    z-index: 1000;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing:content-box;
    resize:none;
}

.cn1-native-peer {
    position: absolute;
    border:none;
}

.cn1-capture-dialog {
    position: fixed;
    /* --cn1-chrome-top is the height of the javascript.titleBar=html chrome (0 without it).
       Fixed boxes are placed against the viewport, not the body the chrome moves down, so each
       full-window overlay offsets itself or its top would sit under the chrome. */
    top: calc(10px + var(--cn1-chrome-top, 0px));
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid black;
    background: rgba(33,33,33,33);
}

.cn1-capture-dialog video {
    
    margin: 0 auto;
}
.cn1-capture-preview-dialog {
    position: fixed;
    top: calc(10px + var(--cn1-chrome-top, 0px));
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid black;
    background: rgba(33,33,33,33);
    z-index: 1000;
    
}



#cn1-splash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    text-align:center;
    font-family: sans-serif;
    color: #666;
    
}

#cn1-splash img.icon {
    width: 2in;
    max-width: 100%;
    margin: auto;
    display: block;
}

#cn1-splash .progress-bar {
    width: 100%;
    border: 1px solid #666;
    background-color: white;
    height: 5mm;
    margin: 1mm;
    position: relative;
    padding:0;
    background-image: none;
    background-color:white;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444; 
    border-radius: 2.5mm;
    overflow:hidden;

}

#cn1-splash .progress-bar .progress-bar-internal {
    position:absolute;
    top:0;
    left:0;
    height: 100%;
    width:0;
    background-image: linear-gradient(#0072ff,#00c6ff);
    border-radius: 2.5mm;
}

#cn1-splash img.progress {
    max-width: 50%;
    max-height: 5mm;
    width:auto;
    height:auto;
}


div.cn1-image-capture-dialog {
    position: fixed;
    top: var(--cn1-chrome-top, 0px);
    left: 0;
    bottom: 0;
    right: 0;
    background: #333;

    
}

div.cn1-image-capture-dialog video, div.cn1-image-capture-dialog.state-accept-snapshot > canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -540px;
    margin-top: -540px;
    width: 1080px;
    
    
}
@media(max-width: 480px) {
    div.cn1-image-capture-dialog video, div.cn1-image-capture-dialog.state-accept-snapshot > canvas {
        
        margin-left: -240px;
        margin-top: -240px;
        width: 480px;
    }
}

@media(max-width: 640px) {
    div.cn1-image-capture-dialog video, div.cn1-image-capture-dialog.state-accept-snapshot > canvas {
        
        margin-left: -320px;
        margin-top: -320px;
        width: 640px;
    }
}


div.cn1-image-capture-dialog div.buttons {
    position: fixed;
    bottom: 1in;
    left: 0;
    width: 100%;
    height: 20%;
    text-align: center;
    z-index: 1000;
}

div.cn1-image-capture-dialog button {
    display: none;
    background: none;
    border: none;
    


}

div.cn1-image-capture-dialog button span {
    display: none;
}

div.cn1-image-capture-dialog button i {
    color: #ccc;
    opacity: 0.7;
    font-size: 3em;
}

div.cn1-image-capture-dialog.state-stream button.capture-btn {
    display:inline;
    
}
div.cn1-image-capture-dialog.state-stream button.capture-btn i {
    color: red;
}

div.cn1-image-capture-dialog.state-stream button.cancel-btn {
    display:inline;
}

div.cn1-image-capture-dialog.state-accept-snapshot video{
    display: none;
}

div.cn1-image-capture-dialog.state-accept-snapshot .use-btn {
    display: inline;
}

div.cn1-image-capture-dialog.state-accept-snapshot .dontuse-btn {
    display: inline;
}


#cn1-peers-container {
    z-index: -1000;
    padding:0;
    margin:0;
    position:absolute;
    padding:0;
    margin:0;

    top:0;
    left:0;

    width: 100%;
    height: 100%;
    background:transparent;
}

div#cn1-video-capture {
    position:fixed;
    top: var(--cn1-chrome-top, 0px);
    width: 100%;
    height: calc(100% - var(--cn1-chrome-top, 0px));
    background-color:black;
    
}
div#cn1-video-capture > video {
    width: 100%;
}
.vjs-control-bar {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background-color:white;
        
}

.vjs-current-time > span.vjs-control-text, .vjs-duration > span.vjs-control-text {
    display:block;
    font-size: 75%;
}
.vjs-time-control.vjs-time-divider {
    border: 1px dotted #cccccc;
    
}
.vjs-time-control.vjs-time-divider > span {
    display:none;
}
.vjs-current-time.vjs-time-control.vjs-control, .vjs-duration.vjs-time-control.vjs-control {
    padding: 1mm;
}


/* The HTML title bar and menu bar of the javascript.titleBar=html build hint
   (JavaScriptDesktopChrome). The port moves the body down by the chrome's height,
   so the canvas and every overlay positioned inside the body start below it. The
   heights are fixed so the port measures the chrome once. */
#cn1-desktop-chrome {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 2147483647;
    font: 13px system-ui, -apple-system, "Segoe UI", Cantarell, Ubuntu, sans-serif;
    color: #1f1f1f;
    background: #f3f3f3;
    border-bottom: 1px solid #d6d6d6;
    user-select: none;
    -webkit-user-select: none;
}
#cn1-desktop-chrome .cn1-chrome-title {
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#cn1-desktop-chrome .cn1-chrome-menubar {
    display: flex;
    height: 28px;
    padding: 0 4px;
    align-items: stretch;
}
#cn1-desktop-chrome .cn1-chrome-menu {
    position: relative;
}
#cn1-desktop-chrome .cn1-chrome-menu > summary {
    list-style: none;
    height: 100%;
    line-height: 28px;
    padding: 0 10px;
    border-radius: 4px;
    cursor: default;
}
#cn1-desktop-chrome .cn1-chrome-menu > summary::-webkit-details-marker {
    display: none;
}
#cn1-desktop-chrome .cn1-chrome-menu > summary:hover,
#cn1-desktop-chrome .cn1-chrome-menu[open] > summary {
    background: rgba(0, 0, 0, 0.07);
}
#cn1-desktop-chrome .cn1-chrome-menu > summary:focus-visible,
#cn1-desktop-chrome .cn1-chrome-menu-item:focus-visible {
    outline: 2px solid #0067c0;
    outline-offset: -2px;
}
#cn1-desktop-chrome .cn1-chrome-menu-items {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    /* Never wider than the window; browser_bridge.js also moves a panel that would run off
       the right edge (a menu near the end of a wide menu bar in a narrow window). */
    max-width: calc(100vw - 8px);
    box-sizing: border-box;
    /* A long menu scrolls inside the window: the body is fixed with overflow hidden, so a
       panel taller than the viewport would put its last commands out of reach. */
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    padding: 4px;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.14);
}
#cn1-desktop-chrome .cn1-chrome-menu-item {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 6px 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: default;
}
#cn1-desktop-chrome .cn1-chrome-menu-item:hover:not([aria-disabled="true"]) {
    background: rgba(0, 0, 0, 0.07);
}
#cn1-desktop-chrome .cn1-chrome-menu-item[aria-disabled="true"] {
    opacity: 0.45;
}
#cn1-desktop-chrome .cn1-chrome-icon {
    display: inline-flex;
    align-items: center;
}
#cn1-desktop-chrome .cn1-chrome-icon canvas {
    display: block;
}
#cn1-desktop-chrome .cn1-chrome-shortcut {
    opacity: 0.6;
}

/* macOS: the title centred in a lighter bar, the system font, rounded selection. */
#cn1-desktop-chrome.cn1-chrome-mac {
    background: #ececec;
    border-bottom-color: #cfcfcf;
}
#cn1-desktop-chrome.cn1-chrome-mac .cn1-chrome-title {
    text-align: center;
    font-weight: 600;
}
#cn1-desktop-chrome.cn1-chrome-mac .cn1-chrome-menu-item:hover:not([aria-disabled="true"]) {
    background: #0a64d8;
    color: #fff;
}

/* GNOME: a HeaderBar-style bar with the title centred in bold. */
#cn1-desktop-chrome.cn1-chrome-linux {
    background: #ebebeb;
    border-bottom-color: #d4d4d4;
}
#cn1-desktop-chrome.cn1-chrome-linux .cn1-chrome-title {
    text-align: center;
    font-weight: 700;
}
#cn1-desktop-chrome.cn1-chrome-linux .cn1-chrome-menu-items {
    border-radius: 12px;
}

/* The menu text colours below (#1f1f1f, #f0f0f0) are also the colours HTML5Implementation
   draws material command icons in; change them together. */
@media (prefers-color-scheme: dark) {
    #cn1-desktop-chrome {
        color: #f0f0f0;
        background: #202020;
        border-bottom-color: #3a3a3a;
    }
    #cn1-desktop-chrome.cn1-chrome-mac {
        background: #2c2c2c;
    }
    #cn1-desktop-chrome.cn1-chrome-linux {
        background: #303030;
    }
    #cn1-desktop-chrome .cn1-chrome-menu > summary:hover,
    #cn1-desktop-chrome .cn1-chrome-menu[open] > summary,
    #cn1-desktop-chrome .cn1-chrome-menu-item:hover:not([aria-disabled="true"]) {
        background: rgba(255, 255, 255, 0.1);
    }
    #cn1-desktop-chrome .cn1-chrome-menu-items {
        background: #2b2b2b;
        border-color: #3f3f3f;
    }
}