:root {
  --tum-blue-brand: #3070B3;
  --tum-blue-dark: #072140;
  --tum-blue-dark-1: #0A2D57;
  --tum-blue-dark-2: #0E396E;
  --tum-blue-dark-3: #114584;
  --tum-blue-dark-4: #14519A;
  --tum-blue-dark-5: #165DB1;
  --tum-blue-light: #5E94D4;
  --tum-blue-light-1: #9ABCE4;
  --tum-blue-light-2: #C2D7EF;
  --tum-blue-light-3: #D7E4F4;
  --tum-blue-light-4: #E3EEFA;
  --tum-blue-light-5: #F0F5FA;
  --tum-yellow: #FED702;
  --tum-yellow-dark: #CBAB01;
  --tum-yellow-1: #FEDE34;
  --tum-yellow-2: #FEE667;
  --tum-yellow-3: #FEEE9A;
  --tum-yellow-4: #FEF6CD;
  --tum-orange: #F7B11E;
  --tum-orange-dark: #D99208;
  --tum-orange-1: #F9BF4E;
  --tum-orange-2: #FAD080;
  --tum-orange-3: #FCE2B0;
  --tum-orange-4: #FEF4E1;
  --tum-orange-danger: #C24814;
  --tum-pink: #B55CA5;
  --tum-pink-dark: #9B468D;
  --tum-pink-1: #C680BB;
  --tum-pink-2: #D6A4CE;
  --tum-pink-3: #E6C7E1;
  --tum-pink-4: #F6EAF4;
  --tum-blue-bright: #8F81EA;
  --tum-blue-bright-dark: #6955E2;
  --tum-blue-bright-1: #B6ACF1;
  --tum-blue-bright-2: #C9C2F5;
  --tum-blue-bright-3: #DCD8F9;
  --tum-blue-bright-4: #EFEDFC;
  --tum-blue-medium: #4E85E9;
  --tum-blue-medium-1: #6B92DB;
  --tum-blue-medium-2: #7EBAFF;
  --tum-red: #EA7237;
  --tum-red-dark: #D95117;
  --tum-red-1: #EF9067;
  --tum-red-2: #F3B295;
  --tum-red-3: #F6C2AC;
  --tum-red-4: #FBE4DA;
  --tum-green: #9FBA36;
  --tum-green-dark: #7D922A;
  --tum-green-1: #B6CE55;
  --tum-green-2: #C7D97D;
  --tum-green-3: #D8E5A4;
  --tum-green-4: #E9F1CB;
  --tum-grey-1: #20252A;
  --tum-grey-2: #333A41;
  --tum-grey-3: #475058;
  --tum-grey-4: #6A757E;
  --tum-grey-5: #ABB5BE;
  --tum-grey-6: #CDD4DB;
  --tum-grey-7: #DDE2E6;
  --tum-grey-8: #E8ECEF;
  --tum-grey-9: #F8F9FA;
  --theme-color: var(--tum-blue-dark);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

table {
    margin-top: 1em;
    margin-bottom: 1em;
}

th {
    text-align: left;
}

.topbar {
    background-color: var(--tum-blue-dark-1);
    color: white;
    padding: 0.2rem;
}
.topbar.header-staging {
    background-color: #800;
}

.topbar > div {
    display: flex;
    max-width: 1140px;
    margin: auto;
}

.topbar > div div {
    margin-left: 1rem;
}

header {
    background-color: var(--tum-blue-dark);
    color: white;
    display: flex;
    justify-content: space-between;
    height: 60px;
}
header.header-staging {
    background-color: #a00;
}
header > div {
    max-width: 1140px;
    margin: auto;
    flex: 1;
}

main {
    max-width: 1140px;
    margin: auto;
    flex: 1;
}

#file-label {
    cursor: pointer;
    background-color: #ddd;
    padding: 1rem;
    display: block;
    width: 25%;
    margin: 10px auto;
    border: 1px solid #aaa;
}

#dropzone {
    border: 3px dashed #ccc;
    padding: 50px;
    text-align: center;
    margin-top: 2em;
}

#dropzone input[type="file"] {
    display: none;
}

#dropzone.dropover {
    border: 3px dashed #888;
}

main {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

footer {
    background-color: var(--tum-blue-dark);
    color: white;
    text-align: right;
    min-height: 3rem;
    line-height: 3rem;
}

header a, footer a, .topbar a {
    color: white;
    text-decoration: none;
}

header a:hover {
    text-shadow: 0 0 0 #fff, 0.5px 0 0 #fff, -0.5px 0 0 #fff;
}

header > div > div {
    margin-top: auto;
    margin-bottom: auto;
}

footer a {
    margin-right: 20px;
}

#filelisting {
    display: none;
}

#filelisting .file-entry {
    background-color: var(--tum-blue-light-5);
    padding: 10px;
    margin: 4px;
}

#filelisting div {
    margin: 0px;
}

#errorbox {
    padding: 10px;
    margin: 4px;
    background-color: #F09D9D;
    border: 1px solid #ff3030;
    margin-top: 1em;
    display: none;
}

.option-box {
    padding: 30px;
    border: 1px solid rgb(140, 145, 150);
    margin: 10px 0px;
    cursor: pointer;
}

.option-box:hover {
    background: rgb(200, 205, 210);
}

.option-box.selected {
    background: rgb(240, 245, 250);
    font-weight: bold;
}
.on-select-yes {
    display: none;
}

#select-yes.selected ~ .on-select-yes {
    display: block;
}

.right {
    float: right;
}
.right div {
    margin-left: 1rem;
    cursor: pointer;
}

.left {
    float: left;
    display: flex;
    align-items: center;
}
.left div {
    margin-left: 2rem;
    cursor: pointer;
}

#lang-select-container {
    /* Set to the height of the TUM image */
    line-height: 30px;
}
.right > div, .right > b {
    display: inline-block;
    vertical-align: middle;
}
#signed-in {
    cursor: default;
}

.upload-container {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px solid #aaa;
    border-radius: 8px;
    background: #f5f5f5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Input group styling */
.upload-form .input-group {
    margin-bottom: 1.5rem;
}

/* File label paragraph */
.upload-form .input-group p {
    margin-bottom: 0.5rem;
}

/* File input styling */
.upload-form input[type="file"] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

/* Upload button styling */
.upload-btn {
    width: 100%;
    padding: 0.8rem;
    background-color: #072140;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.upload-btn:hover {
    background-color: #0a3266;
}

/* Regular button styling */
.btn {
    padding: 0.6rem 0.9rem;
    background-color: #072140;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.link_btn {
    display: inline-block;
    padding: 0.6rem 0.9rem;
    background-color: #072140;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.link_btn:hover {
    background-color: #0a3266;
}

/* Messages styling */
.upload-message {
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    color: #3c763d; /* green for success */
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
}

.no-link-style,
.no-link-style:link,
.no-link-style:visited,
.no-link-style:hover,
.no-link-style:active {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.login-container {
    max-width: 400px;
    margin: 3rem auto;
    padding: 2rem;
    border: 1px solid #aaa;
    border-radius: 8px;
    background: #f5f5f5;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Form styling */
.login-form .input-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.login-form input,
.login-form button {
    width: 100%; /* Match lengths */
    box-sizing: border-box;
}

.login-form input {
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

/* Login button styling */
.login-btn {
    padding: 0.8rem;
    background-color: #072140;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.login-btn:hover {
    background-color: #0a3266;
}

/* Messages styling */
.login-message {
    margin-top: 1rem;
    padding: 0.8rem;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    color: #a94442; /* red for error */
    background-color: #f2dede;
    border: 1px solid #ebccd1;
}

.login-message.logout {
    color: #3c763d; /* green for logout success */
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
}

.pabox {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background: var(--tum-blue-light-5);
    padding: 0.5rem;
}

.pabox .id {
    margin-right: 1rem;
}

.pabox .statusline {
    display: flex
}

.pabox .responsible {
    flex: 1;
}

.pabox .name {
    font-weight: bold;
}

.pabox .department {
    flex: 1;
}

.pabox a {
    text-decoration: none;
    color: inherit;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags span {
    white-space: nowrap;
	background: var(--tum-grey-7);
	border-radius: 16px;
	padding: 3px 12px;
	font-size: 0.9rem;
}

.tags span:has(input:checked) {
    background: var(--tum-grey-2);
    color: white;
}

.tags input[type=checkbox] {
    display: none;
}

.preserve-breaks {
    white-space: pre-line;
}

.hidden {
    display: none;
}

.file-topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: space-between;
}

.file-title {
    flex: 1;
}

.file-title:hover {
    color: var(--tum-blue-dark-5);
}

.file-topbar a {
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pages {
    margin-top: 1.5em;
}

.pages .btn {
    text-decoration: none;
    margin-right: 10px;
    background-color: var(--tum-grey-7);
    color: black;
}

.pages .btn-active {
    color: white;
    background-color: var(--tum-blue-dark);
}

.btn:hover {
    color: white;
    background-color: #0a3266;
}

.icon-btn:hover {
    color: var(--tum-blue-dark-5);
}

.icon-btn .material-icons {
    font-size: 20px;
    line-height: 1;
}