* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    color: #c0c0c0;
    font-family: 'Courier New', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
    font-size: 14px;
    line-height: 1.2;
    overflow: hidden;
    height: 100vh;
}

.terminal-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #000000;
    border: 2px solid #404040;
    border-radius: 0;
}

.terminal-header {
    background-color: #1a1a1a;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #404040;
    flex-shrink: 0;
}

.terminal-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
}

.connection-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #808080;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.status-indicator.connected {
    background-color: #00ff00;
    animation: none;
}

.status-indicator.disconnected {
    background-color: #ff0000;
    animation: none;
}

.status-text {
    color: #c0c0c0;
    font-size: 12px;
    white-space: nowrap;
}

.terminal-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #000000;
    white-space: pre-wrap;
    word-break: break-word;
}

.terminal-content::-webkit-scrollbar {
    width: 8px;
}

.terminal-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.terminal-content::-webkit-scrollbar-thumb {
    background: #404040;
    border-radius: 4px;
}

.terminal-content::-webkit-scrollbar-thumb:hover {
    background: #606060;
}

.terminal-input-area {
    background-color: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    border: none;
    flex-shrink: 0;
    margin-top: 0;
}

.terminal-prompt {
    margin-right: 8px;
    font-weight: bold;
    line-height: 1.2;
}

.terminal-input {
    flex: 1;
    background-color: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: inherit;
    caret-color: #ffffff;
    vertical-align: baseline;
    line-height: 1.2;
}

.terminal-input::placeholder {
    color: #808080;
}

.command-history {
    display: none;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #404040;
    border-top: 3px solid #00ff00;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-text {
    color: #c0c0c0;
    font-size: 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Terminal line styling */
.terminal-line {
    margin-bottom: 2px;
}

/* Interactive input styling for multi-line prompts */
.terminal-line.interactive-input {
    color: #a0a0a0;
    font-style: italic;
    margin-left: 8px;
    position: relative;
}

/* Interactive mode styling for input area */
.terminal-input-area.interactive-mode {
    margin-left: 0px;
    margin-top: 0px;
}

.terminal-input-area.interactive-mode .terminal-prompt {
    color: #a0a0a0;
    font-style: italic;
}

.terminal-output {
    margin-bottom: 4px;
}

.terminal-error {
    color: #ff0000;
}

.terminal-success {
    color: #00ff00;
}

.terminal-warning {
    color: #ffff00;
}

.terminal-info {
    color: #00ffff;
}

/* Cursor animation */
.cursor {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Login Modal */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.login-form {
    background-color: #1a1a1a;
    border: 2px solid #404040;
    border-radius: 8px;
    padding: 32px;
    min-width: 320px;
    max-width: 400px;
}

.login-form h2 {
    color: #ffffff;
    margin-bottom: 24px;
    text-align: center;
    font-size: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #c0c0c0;
    margin-bottom: 4px;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 8px 12px;
    background-color: #000000;
    border: 1px solid #404040;
    border-radius: 4px;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: #ffff00;
    box-shadow: 0 0 4px rgba(255, 255, 0, 0.3);
}

.form-actions {
    margin-top: 24px;
    text-align: center;
}

.form-actions button {
    background-color: #404040;
    color: #ffffff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
}

.form-actions button:hover {
    background-color: #606060;
}

.form-actions button:disabled {
    background-color: #202020;
    color: #808080;
    cursor: not-allowed;
}

.login-error {
    margin-top: 16px;
    padding: 8px 12px;
    background-color: #330000;
    border: 1px solid #ff0000;
    border-radius: 4px;
    color: #ff6666;
    font-size: 14px;
}

/* Responsive design */
@media (max-width: 768px) {
    body {
        font-size: 12px;
    }
    
    .terminal-container {
        border: none;
        border-radius: 0;
    }
    
    .terminal-content
    {
        padding: 12px;
    }
    
    .terminal-header {
        padding: 8px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    /* Logged-in users know where they are; reclaim the header space */
    body.logged-in .terminal-tagline {
        display: none;
    }

    .login-form {
        margin: 16px;
        min-width: auto;
        max-width: none;
        padding: 24px;
    }
}

/* User Command Display */
.user-command {
    color: #ffffff;
    margin: 4px 0;
    white-space: pre-wrap;
    opacity: 0.8;
}

/* Terminal Output Formatting */
.terminal-output {
    margin: 2px 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* SAY/SHOUT Message Styling */
.say-shout-message {
    background-color: #1a1a2e;
    border-left: 4px solid #4a9eff;
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 0 4px 4px 0;
    color: #ffffff;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    animation: message-fade-in 0.3s ease-in-out;
}

@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Editor Modal */
.editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
}

.editor-container {
    background-color: #1a1a1a;
    border: 2px solid #404040;
    border-radius: 8px;
    width: 94%;
    max-width: 1100px;
    height: 88vh;
    height: 88dvh;
    display: flex;
    flex-direction: column;
}

.editor-header {
    background-color: #2a2a2a;
    padding: 16px 20px;
    border-bottom: 1px solid #404040;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.editor-header h2 {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
}

.editor-close {
    background: none;
    border: none;
    color: #c0c0c0;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.editor-close:hover {
    background-color: #404040;
    color: #ffffff;
}

/* min-height:0 lets this box shrink below its content so the writing area below
   is what scrolls, not the page. overflow-y:auto already zeroes the automatic
   minimum size, but writing it out keeps the intent if the overflow ever
   changes - and it stays as a safety valve: if the fixed parts (subject field,
   labels, toolbar) outgrow the panel, a scrolling body beats an unreachable
   Spara button. */
.editor-body {
    flex: 1;
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    /* Flex chain down to the text editor so it fills the modal height */
    display: flex;
    flex-direction: column;
}

.editor-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.editor-form .form-group {
    margin-bottom: 16px;
}

/* The content group (always last) grows to fill the remaining height */
.editor-form .form-group:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

.editor-form .form-group:last-child textarea.form-input {
    flex: 1;
}

.editor-modal .EasyMDEContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The height comes from the flex chain above (.editor-container -> .editor-body
   -> .editor-form -> .form-group:last-child -> .EasyMDEContainer), not from the
   height property: flex:1 means flex-basis:0%, which wins over height in a
   column flex container. height:auto must stay anyway - EasyMDE's fullscreen
   mode takes this element out of the flow with top/bottom offsets and derives
   its height from them.
   .CodeMirror-scroll (easymde.min.css) is height:100% of this box and is the
   surface that actually scrolls - but only as long as EasyMDE does not put a
   floor under it. That floor is switched off in editor.js with minHeight:'0px';
   without it the scroller is 300px tall inside a shorter box and .CodeMirror's
   overflow:hidden silently clips the text, leaving nothing to scroll. */
.editor-modal .EasyMDEContainer .CodeMirror {
    flex: 1 !important;
    height: auto !important;
    min-height: 120px !important;
}

/* A fling at the end of the text should stop here, not carry on into
   .editor-body behind it. No height or min-height here on purpose: the
   height:100% from easymde.min.css must remain the only height source. */
.editor-modal .EasyMDEContainer .CodeMirror-scroll {
    overscroll-behavior: contain;
}

.editor-form label {
    display: block;
    color: #c0c0c0;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: bold;
}

.editor-form .form-input {
    width: 100%;
    padding: 10px 12px;
    background-color: #000000;
    border: 1px solid #404040;
    border-radius: 4px;
    color: #ffffff;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}

.editor-form .form-input:focus {
    outline: none;
    border-color: #ffff00;
    box-shadow: 0 0 4px rgba(255, 255, 0, 0.3);
}

.editor-form textarea.form-input {
    min-height: 200px;
    font-family: 'Courier New', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
    line-height: 1.4;
}

.editor-footer {
    padding: 16px 20px;
    border-top: 1px solid #404040;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    background-color: #2a2a2a;
}

/* On mobile the touch keyboard owns the lower half of the screen - anchor
   the editor at the top and leave the bottom free.
   This is the ONLY @media block that may style the editor. There used to be a
   second one further down, and it quietly won on cascade order: height:52dvh
   became height:85%, max-height:none came back and a 16px margin pulled the
   panel away from the edges. */
@media (max-width: 768px) {
    .editor-modal {
        align-items: flex-start;
    }

    .editor-container {
        width: 100%;
        max-width: none;
        /* The panel takes the visual viewport: exactly the part of the screen
           the touch keyboard is not covering, measured by editor.js. That
           replaces a guess at how tall a keyboard is, which is wrong on most
           phones - they run from a third to over half the screen depending on
           device, language and whether the emoji row is up.
           margin-top follows Chrome panning the page to keep the focused field
           above the keyboard; without it the top-anchored panel would start
           above the visible area, since position:fixed is anchored to the
           layout viewport.
           The fallback must be written inside var() - a custom property that
           resolves to nothing invalidates the declaration rather than falling
           back to an earlier one. The bare 52vh below it is for browsers
           without dvh, where the whole var() declaration is invalid.
           No min-height: a floor that bursts the panel is exactly the lock-up
           this rule set exists to prevent. */
        margin-top: var(--vv-top, 0px);
        height: 52vh;
        height: var(--vv-h, 52dvh);
        /* Resolves against .editor-modal, which is position:fixed and full
           height. Keeps Spara on screen in landscape. */
        max-height: 100%;
        border-left: none;
        border-right: none;
        border-top: none;
        border-radius: 0 0 8px 8px;
    }

    .editor-header {
        padding: 8px 12px;
    }

    .editor-header h2 {
        font-size: 15px;
    }

    .editor-body {
        padding: 8px 12px;
    }

    .editor-form .form-group {
        margin-bottom: 8px;
    }

    /* The 120px floor from the desktop rule can itself outgrow what the panel
       has left once the subject field, labels and toolbar have taken their
       share. */
    .editor-modal .EasyMDEContainer .CodeMirror {
        min-height: 96px !important;
    }

    /* Fourteen buttons are ~450px and wrap onto two or three rows on a phone,
       each row eating writing space from an already tight panel. One row that
       scrolls sideways has a known height instead. */
    .editor-modal .editor-toolbar {
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 6px 8px;
    }

    /* EasyMDE flags side-by-side and fullscreen as noMobile itself. */
    .editor-modal .editor-toolbar button.no-mobile {
        display: none;
    }

    .editor-footer {
        padding: 8px 12px;
        flex-direction: column-reverse;
    }
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn-secondary {
    background-color: #404040;
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: #606060;
}

.btn-primary {
    background-color: #0066cc;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #0088ff;
}

.btn:disabled {
    background-color: #202020;
    color: #808080;
    cursor: not-allowed;
}

/* Full-width buttons on a phone, for every .btn on the site: the editor footer,
   the registration modal and the "Lägg till nyckel" button on the SSH key page.
   This rule used to live inside the editor's @media block, which made it look
   editor-specific while it in fact reached all three. */
@media (max-width: 768px) {
    .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* EasyMDE Dark Theme Overrides */
/* The toolbar is a flex child of .EasyMDEContainer, so without flex-shrink:0 a
   tight panel squeezes it below its own content height - which the base CSS
   hides by letting the buttons spill out of the box, but the mobile rules below
   turn that into clipped buttons. */
.editor-modal .editor-toolbar {
    flex-shrink: 0;
    background-color: #2a2a2a !important;
    border-color: #404040 !important;
    border-bottom: 1px solid #404040 !important;
}

/* EasyMDE 2.18 builds the toolbar from <button>; older versions used <a>. Only
   the <a> half of this was here, so on 2.18 it matched nothing and the icons
   kept the library's own colour - black, chosen for the white toolbar it ships
   with. Measured against our #2a2a2a bar that is a contrast ratio of 1.46:1.
   #c0c0c0 brings it to about 8:1. Both selectors are listed so the rules hold
   whichever markup the library emits. */
.editor-modal .editor-toolbar button,
.editor-modal .editor-toolbar a {
    color: #c0c0c0 !important;
    border-color: transparent !important;
}

.editor-modal .editor-toolbar button:hover,
.editor-modal .editor-toolbar button.active,
.editor-modal .editor-toolbar a:hover,
.editor-modal .editor-toolbar a.active {
    background: #404040 !important;
    border-color: #404040 !important;
    color: #ffffff !important;
}

/* The separators between button groups are <i class="separator"> drawn as a pair
   of borders, and they inherit the same white-toolbar defaults. */
.editor-modal .editor-toolbar i.separator {
    border-left-color: #404040 !important;
    border-right-color: #555555 !important;
}

.editor-modal .CodeMirror {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #404040 !important;
    font-family: 'Courier New', 'Liberation Mono', 'DejaVu Sans Mono', monospace !important;
}

.editor-modal .CodeMirror-cursor {
    border-left: 1px solid #ffffff !important;
}

.editor-modal .CodeMirror-selected {
    background: #333333 !important;
}

.editor-modal .CodeMirror-line {
    color: #ffffff !important;
}

.editor-modal .editor-preview {
    background-color: #1a1a1a !important;
    color: #c0c0c0 !important;
    border: 1px solid #404040 !important;
}

.editor-modal .editor-preview h1,
.editor-modal .editor-preview h2,
.editor-modal .editor-preview h3,
.editor-modal .editor-preview h4,
.editor-modal .editor-preview h5,
.editor-modal .editor-preview h6 {
    color: #ffffff !important;
}

.editor-modal .editor-preview blockquote {
    border-left: 4px solid #404040 !important;
    background-color: #2a2a2a !important;
}

.editor-modal .editor-preview code {
    background-color: #2a2a2a !important;
    color: #ffff00 !important;
}

.editor-modal .editor-preview pre {
    background-color: #2a2a2a !important;
    border: 1px solid #404040 !important;
}

.editor-modal .editor-preview pre code {
    background-color: transparent !important;
    color: #c0c0c0 !important;
}

/* The editor's mobile rules live in the single @media block further up, next to
   the desktop editor rules. This second block used to sit here and override it
   on cascade order alone. Its full-width `.btn` rule was unscoped and hit every
   button on the page; the editor's own footer now carries a scoped version. */

/* Registration Link */
/* Links wrap as one unit; the separator lives between them so no line ever
   starts or ends with a stray pipe */
.status-links {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.register-link {
    color: #c0c0c0;
    font-size: 12px;
    white-space: nowrap;
}

.register-link:not(:last-child)::after {
    content: "|";
    color: #606060;
    margin-left: 8px;
}

.register-link a {
    color: #4a9eff;
    text-decoration: none;
    cursor: pointer;
}

.register-link a:hover {
    color: #66b3ff;
    text-decoration: underline;
}

/* Registration Modal */
.registration-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
}

.modal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #1a1a1a;
    border: 2px solid #404040;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.modal-header {
    background-color: #2a2a2a;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #404040;
}

.modal-header h2 {
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}

.modal-close {
    background: none;
    border: none;
    color: #c0c0c0;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #ffffff;
    background-color: #404040;
    border-radius: 4px;
}

.modal-body {
    padding: 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    color: #c0c0c0;
    font-size: 14px;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 10px 12px;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #404040;
    border-radius: 4px;
    font-family: 'Courier New', 'Liberation Mono', 'DejaVu Sans Mono', monospace;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: #4a9eff;
}

.error-message {
    background-color: #2d1b1b;
    color: #ff6b6b;
    padding: 10px 12px;
    border: 1px solid #ff6b6b;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 10px;
}

.modal-footer {
    background-color: #2a2a2a;
    padding: 16px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #404040;
}

/* Mobile responsive for registration modal */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        margin: 16px;
    }
    
    .modal-footer {
        flex-direction: column-reverse;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin-bottom: 8px;
    }
}