* { margin:0;padding:0; box-sizing: border-box; }
:root {font-family: sans-serif;font-size: 13px; height: 100%}


body {
    min-height: 100%;

    /* https://www.mshr.app/mesh/1684341499831 ennek az animációjának a végéből lett */
    background-color: hsla(52, 73%, 83%, 1);
    background-image:
        radial-gradient(circle at 96% 62%, hsla(154, 53%, 78%, 1) 8%, transparent 50%),
        radial-gradient(circle at 11% 14%, hsla(25, 80%, 79%, 1) 14%, transparent 78%),
        radial-gradient(circle at 34% 84%, hsla(57, 72%, 56%, 1) 9%, transparent 63%),
        radial-gradient(circle at 32% 21%, hsla(40, 91%, 79%, 1) 17%, transparent 86%),
        radial-gradient(circle at 88% 91%, hsla(39, 72%, 66%, 1) 18%, transparent 55%);

    background-blend-mode: normal, normal, normal, normal, normal;
    contain: paint;

    display: flex;
}


form {
    flex-grow: 1;
    display: flex;
    padding: 1rem;
    gap: 1rem;
}
form > #tabbedPane { flex-grow: 1; }

textarea {
    resize: none;
    border: none;
    padding: .5rem;
    background: #fff8;
    box-shadow: white 0 0 2px inset, #00000077 0 0 2px;
    border-radius: 8px;
}
textarea:focus-visible {
    outline: none;
    background: #fffb;
}

#idLengthLabel {grid-area: idLengthLabel }
#idLength {grid-area: idLengthField }
#dispositionLabel {grid-area: dispositionLabel }
#disposition {grid-area: dispositionField }
#filenameLabel {grid-area: filenameLabel }
#filenameFieldWrapper {grid-area: filenameField }
#contentTypeKindLabel {grid-area: contentTypeKindLabel }
#contentTypeKind {grid-area: contentTypeKindField }
#contentTypeLabel {grid-area: contentTypeLabel }
#contentTypeField {grid-area: contentTypeField }
#uploadButton {grid-area: uploadButton; }

button { outline: none; border: 0 }
.btn, .tabButton {
    padding: .7em;
    border-radius: .4em;
    color: #111;
    background: transparent;
    cursor: pointer;
    background: #fff4;
    box-shadow: #0007 0 0 2px;
}
.btn:hover, .tabButton:hover {
    background: #fff7;
    box-shadow: #0007 0 0 3px;
}
.btn:active, .tabButton:active {
    background: #ddd5;
    box-shadow: #0007 0 0 2px;
}
#tabbedPane { display: flex; flex-direction: column; }
.tabButton {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    font-size: 1rem; /* buttonnál felülírja UA stylesheet */

    /* alul ne legyen shadow */
    -webkit-clip-path: inset(-5px -5px 0 -5px);
    clip-path: inset(-5px -5px 0 -5px);
}
.tabButtonSelected {
    background: #fff8;
}
#tabButtons {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    gap: 1rem;
    z-index: 1;
}
#tabbedPaneContent {
    flex-grow: 1;
    display: flex;
}
#tabbedPaneContent > * {
    flex-grow: 1;
}
#tabbedPaneContent > *:not(.tabbedPaneContentShown) { display: none }
#uploadButton {
    background: #fff7;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: bold;
    font-size: 1.1rem;
}
#uploadButton:hover {
    background: #fff9;
}
#uploadButton:active {
    background: #ddd9;
}
#dropHereLabel { display: none; }
#dropHereLabel svg {
    opacity: .3;
    margin-bottom: -20%;
    margin-top: 15%;
}

.hiddenInput {  /* hidden button vagy input type=file, ld. LayoutElement::onClickFormAction */
	background-color: transparent;
	position: absolute;
	left: -1000px;
	height: 1px;
	width: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

#side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
}
#side input {
    width: 100%; /* különben vmiért nagyobb akar lenni */
}

input {
    padding: .4em;
    background: #fff9;
    border: 1px solid #0003;
    outline: transparent;
    border-radius: 4px;
    height: 2.5rem;
    font-size: 1.1rem;
}

#idLength { box-shadow: #0008 0 0 2px 0; display: table; overflow: hidden; border-radius: 4px;  }
#idLength > label {
    padding: .5em;
    display: table-cell;
    text-align: center;
    min-width: 36px;
    cursor: pointer;
    background: #fff5;
}
#idLength > label:not(:nth-child(2)) { border-left: 1px solid #0004 }
#idLength > label:hover { background: #ddd7; }
#idLength > label:active { background: #dc6; }
#idLength > input:checked + label { background: #b7eb82; }


#filenameField { padding-right: 2rem /* hogy ne lógjon rá a clear gomb a szövegre */ }
#filenameFieldWrapper { position: relative}
.clearFieldButton {
    position: absolute;
    right: 1px;
    top: .5px;
    height: calc(100% - 1px);
    background: transparent;
    outline: transparent;
    border: none;
    width: 2rem;
    text-align: center;
    cursor: default;
    transition: background .2s, opacity .2s;
    opacity: 0;
    pointer-events: none;
}
.clearFieldButton:hover {
    background: #ddd;
}
.clearFieldButton:active {
    background: #bbb;
}

dialog {
    background: white;
    border-radius: 4px;
    box-shadow: #aaa 0px 1px 5px 1px;
    outline: transparent;
    border: none;

    min-width: min(33em, calc(100vw - 2rem)); /* ne nyúljunk túl a kijelzőn, és legalább 1rem margó maradjon */
    min-height: 10em;
    margin: auto;
    transition: opacity .3s ease;
    opacity: 0;
}
#selectedFile {
    border-radius: 8px;
    position: static;
    padding: 2em;
    background: #fff8;
    box-shadow: #aaa 0px 1px 3px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#selectedFileName {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 1em;

    word-break: break-word; /* lehet hogy kevés a fájlnévben a kötőjel vagy hasonló karakter, pl. Androidon fényképeknél */
}
#selectedFileName, #selectedFileSize, #selectedFileLastModified {
    text-align: center;
}
#selectFileButton { margin-top: 1.3em }
dialog[open] {
    opacity: 1;
}
dialog::backdrop {
    transition: opacity .3s ease;
    opacity: 0;
}
@keyframes backdropDarken {
  from { opacity: 0 }
  to { opacity: 1 }
}
@keyframes backdropLighten {
  from { opacity: 1 }
  to { opacity: 0 }
}
dialog[open]::backdrop {
    animation-name: backdropDarken;
    animation-duration: .3s;
    animation-fill-mode: both;
}
dialog[open].closing {
    opacity: 0;
    pointer-events: none; /* TODO ez nem hatásos */
}
dialog[open].closing::backdrop {
    animation-name: backdropLighten;
    animation-duration: .3s;
    animation-fill-mode: both;
    pointer-events: none;
}
.windowCaptionBar {
    display: flex;
    justify-content: space-between;
    font-size: 1.2em;
}
#windowTitle {
    padding: 1em;
    font-weight: bold;
}
.upload-error #windowContent h3 {font-size:1em; margin-top: .2em}
.upload-error #windowContent pre {font-family:Consolas,monospace}
.upload-error #windowContent {text-align: left; padding-top: 1em }
.upload-error .windowCaptionBar {border-bottom: 1px solid #aaa}
#closeButton {
    padding: 1em;
    cursor: pointer;
    transition: background .2s ease;
    background: transparent;
    border: 0;
    outline: transparent;
}
#closeButton:hover { background: #ddd; }
#closeButton:active { background: #bbb; }
#windowContent { padding: 2em; padding-top: 1.5em }

#invalidDrag_multipleFiles {
    color: #a00;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fee;

    pointer-events: none;
}

.uploadedFileLink {
    color: #0C5A8D;
    text-decoration: underline;
    font-size: 2.0em;
    text-align: center;
    display: block;
}

@media screen and (max-width: 699.98px) {
    form { flex-direction: column }
    #side {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "contentTypeLabel contentTypeField"
            "filenameLabel    filenameField"
            "idLengthLabel    idLengthField"
            "uploadButton     uploadButton";
        align-items: center;
        align-content: start;

        border-radius: 8px;
        padding: 16px;
        background: #fff8;
        box-shadow: #aaa 0px 1px 3px;
    }
}
@media screen and (min-width: 700px) {
    #side {
        padding-top: 2.6rem; /* tabbedpanecontent-tel egy vonalban kezdődjön */
    }
    #side > #idLength, #side > input { margin-bottom: 8px; }
    #uploadButton {
        position: relative;
        color: white;
        background: radial-gradient(#0a06, #080c);
        box-shadow: #0226 0 0 5px;
        letter-spacing: 1px;
        font-size: 1.1em;
    }
    #uploadButton:hover {
        background: radial-gradient(#0c06, #0a0c);
    }
    #uploadButton:active {
        background: radial-gradient(#0906, #070c);
        box-shadow: #0226 0 0 3px;
    }
}

@media screen and (min-width: 700px) and (max-height: 400px) { /* mobil landscape */
    #side {
        padding-top: 0rem; /* nem kell tabbedpanecontent-tel egy vonalban kezdődnie, mert nem fér ki */

        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "contentTypeLabel contentTypeLabel"
            "contentTypeField contentTypeField"
            "filenameLabel    filenameLabel"
            "filenameField    filenameField"
            "idLengthLabel    idLengthField"
            "uploadButton     uploadButton";
        align-items: center;
        align-content: start;
    }
    #side > #idLength { margin-bottom: 0 }
}
@media (pointer: coarse) {
    :root { font-size: 15px; }
}