/* Fonts */
@font-face {
    font-family: 'WinThreeOne';
    src: url('fonts/w95fa.woff2') format('woff2'),
        url('fonts/w95fa.woff') format('woff');
}

@font-face {
    font-family: 'DOS';
    src: url('fonts/LessPerfectDOSVGA.woff2') format('woff2'),
        url('fonts/LessPerfectDOSVGA.woff') format('woff');
}

/* Overall */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: 'WinThreeOne', sans-serif;
    background-color: #c0c4c8;
    font-size: 12px;
    font-smooth: never;
    -webkit-font-smoothing: none;
}

/* Windows */
.window {
    padding: 4px;
    background-color: white;
    box-shadow:
        inset 0 0 0 1px black,
        inset 0 0 0 3px lightgrey,
        inset 0 0 0 4px black;
    user-select: none; /* Disable text selection */
    min-width: 200px; /* Minimum width for all windows */
    min-height: 150px; /* Minimum height for all windows */
}

.windowheader {
    background-color: white;
    color: black;
    border-bottom: 1px solid black;
    font-size: 14px;
    height: 20px;
}

.selectedwindow .windowheader {
    background-color: 0000a8;
    color: white;
}

.windowtitle {
    padding: 2px;
    line-height: 16px;
    text-align: center;
    cursor: default;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

.windowclose {
    float: left;
    display: inline-block;
    width: 15px;
    height: 19px;
    padding: 0 0 1px 5px;
    background-color: lightgrey;
    border-right: 1px solid black;
    font-size: 20px;
    color: white;
    font-weight: bold;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: black;
    text-shadow: 1px 1px darkgrey;
    cursor: default;
}

.windowmenubar {
    background-color: white;
    border-bottom: 1px solid black;
    font-size: 14px;
    height: 12px;
    padding: 4px;
    line-height: 16px;
    cursor: default;
}

.windowclose::before {
    content: '-';
}

.ui-icon-gripsmall-diagonal-se {
    background-image: none !important;
}

/* Window contents */
.windowinner {
    height: calc(100% - 21px);
    width: 100%;
    overflow: hidden;
}

.windowinner.scrollable {
    overflow-y: scroll; /* Enable vertical scrolling */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.windowinner.scrollable::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}

.windowmenubar+.windowinner {
    height: calc(100% - 42px) !important;
}

textarea.fullwindowtextarea {
    padding: 5px;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    font-family: 'WinThreeOne', sans-serif;
    font-size: 12px;
}

textarea.fullwindowdosprompt {
    padding: 5px;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    outline: none;
    background-color: black;
    color: lightgrey;
    font-family: 'DOS', monospace;
    font-size: 16px;
}

#dosprompt-output {
    padding: 5px;
    width: 100%;
    height: 100%;
    background-color: black;
    color: lightgrey;
    font-family: 'DOS', monospace;
    font-size: 16px;
    overflow-y: scroll;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#dosprompt-output::-webkit-scrollbar {
    display: none; /* Hide scrollbar for WebKit browsers */
}

.prompt-line {
    display: flex;
    align-items: center;
}

.prompt-input {
    background-color: black;
    color: lightgrey;
    border: none;
    outline: none;
    font-family: 'DOS', monospace;
    font-size: 16px;
    flex-grow: 1;
}

.fullwindowicons {
    padding: 0px 10px;
}

/* Icons */
.icon {
    display: inline-block;
    margin: 5px;
    text-align: center;
}

.icon p {
    display: block;
    margin: 5px auto 0 auto;
    padding: 0;
    cursor: default;
    width: 60px; /* Use max-width instead of width */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflow text */
}

.icon p.highlight {
    background-color: darkblue;
    color: white;
}

/* Bottom left icons */
.bottom-left-icons {
    position: absolute;
    bottom: 10px;
    left: 10px;
    user-select: none; /* Disable text selection */
}

.bottom-left-icons .icon {
    display: inline-block;
    margin: 5px;
    text-align: center;
}

/* DOOM */
#doomcanvas {
    background-color: black;
    width: 640px;
    height: 480px;
}

.clock-time {
    margin-top: 70px;
    font-family: Arial, sans-serif;
    font-size: 40px;
    text-align: center;
}

.clock-date {
    margin-top: 5px;
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
}

/* File list */
#file-list {
    padding: 5px 0 0 0; /* Remove padding */
    margin: 0; /* Remove margin */
    font-family: 'WinThreeOne', sans-serif;
    font-size: 12px;
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.file-item {
    display: flex;
    align-items: center;
    padding: 2px 5px; /* Remove padding */
    margin: 0; /* Remove margin */
    cursor: pointer;
}

.file-item img {
    width: 16px; 
    height: 16px;
    margin-right: 5px;
}

.file-item.selected {
    background-color: darkblue;
    color: white;
}

/* Cardfile */
.cardfile-item {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid lightgrey;
    cursor: pointer;
}

.cardfile-item img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.cardfile-item .details {
    display: flex;
    flex-direction: column;
}

.cardfile-item .details .name {
    font-weight: bold;
}

.cardfile-item .details .title {
    font-size: 12px;
    color: grey;
}

.cardfile-item.selected {
    background-color: darkblue;
    color: white;
}

/* Email list */
.email-item {
    display: flex;
    align-items: center;
    padding: 5px;
    border-bottom: 1px solid lightgrey;
    cursor: pointer;
}

.email-item .details {
    display: flex;
    flex-direction: column;
}

.email-item .details .subject {
    font-weight: bold;
}

.email-item .details .from {
    font-size: 12px;
    color: grey;
}

.email-item.selected {
    background-color: darkblue;
    color: white;
}

.email-details {
    padding: 10px;
}

.email-details p {
    margin: 5px 0;
    white-space: pre-wrap; /* Ensure text wraps */
    word-wrap: break-word; /* Break long words */
}

#filedetails img {
    display: block;
    margin: auto;
    border: 1px solid black;
    box-shadow:
        inset 0 0 0 1px black,
        inset 0 0 0 3px lightgrey,
        inset 0 0 0 4px black;
}