/* Clean Terminal Mastodon Theme - Full Width */

/* =========================
   GLOBAL TERMINAL STYLES
   ========================= */

* {
    font-family: "Courier New", Courier, monospace !important;
    letter-spacing: 0.5px !important;
}

body {
    background: #000000 !important;
    color: #00ff41 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Retro CRT scanline effect */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 65, 0.03) 0px,
        rgba(0, 255, 65, 0.03) 1px,
        transparent 1px,
        transparent 3px
    );
    z-index: 9999;
}

/* =========================
   LAYOUT - FULL WIDTH
   ========================= */

/* Hide all sidebars */
.drawer,
.drawer__backdrop,
.navigation-panel,
.compose-panel,
.getting-started,
.trends,
.wtf-panel,
.hero-widget,
.directory,
.promotion,
.columns-area__panels__pane--left,
.columns-area__panels__pane--right,
.column[aria-label*="Getting started"],
.column[aria-label*="Compose"],
.column[aria-label*="Navigation"],
.drawer__tab,
.floating-action-button,
.tabs-bar {
    display: none !important;
}

/* Full-width layout */
.ui {
    width: 100% !important;
    max-width: none !important;
    background: #000000 !important;
}

.columns-area {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

.columns-area__panels {
    width: 100% !important;
    justify-content: center !important;
}

.columns-area__panels__main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.column {
    width: 100% !important;
    max-width: none !important;
    background: #000000 !important;
}

/* =========================
   TERMINAL UI COMPONENTS
   ========================= */

/* Main content areas */
.status,
.detailed-status,
.notification,
.column-header,
.compose-form,
.account__header,
.account__header__bar {
    background: rgba(0, 20, 0, 0.8) !important;
    border: 1px solid #00ff41 !important;
    border-radius: 0 !important;
    color: #00ff41 !important;
    margin-bottom: 1px !important;
}

/* Headers and titles */
.column-header__title,
.column-back-button__title,
.account__section-headline,
.detailed-status__display-name,
.status__display-name,
.account__display-name {
    color: #00ff41 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* Content text */
.status__content,
.status__content__text,
.detailed-status__meta,
.account__header__content,
.notification__message {
    color: #00ff41 !important;
    line-height: 1.4 !important;
}

/* Meta information */
.status__relative-time,
.detailed-status__datetime,
.account__username,
.status__visibility-icon {
    color: #00cc33 !important;
}

/* =========================
   INTERACTIVE ELEMENTS
   ========================= */

/* Buttons - consistent terminal style */
.button,
.icon-button,
.text-icon-button,
.compose-form__submit,
.column-header__back-button {
    background: #000000 !important;
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    padding: 8px 12px !important;
    transition: all 0.1s ease !important;
}

.button:hover,
.icon-button:hover,
.text-icon-button:hover,
.compose-form__submit:hover,
.column-header__back-button:hover {
    background: #00ff41 !important;
    color: #000000 !important;
    box-shadow: 0 0 5px #00ff41 !important;
}

.icon-button.active,
.icon-button.star-icon.active {
    background: rgba(0, 255, 65, 0.2) !important;
    color: #00ff41 !important;
}

/* Links */
a,
.status__content a,
.account__header__content a {
    color: #00ff41 !important;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
    color: #33ff66 !important;
}

/* =========================
   FORM ELEMENTS
   ========================= */

/* Input fields */
input,
textarea,
.search__input,
.autosuggest-textarea__textarea,
.compose-form__autosuggest-wrapper textarea {
    background: #000000 !important;
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    border-radius: 0 !important;
    padding: 8px !important;
}

input:focus,
textarea:focus {
    outline: none !important;
    border: 2px solid #00ff41 !important;
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.5) !important;
}

/* Compose form specific */
.compose-form {
    border: 2px solid #00ff41 !important;
    background: rgba(0, 20, 0, 0.9) !important;
}

.compose-form__buttons-wrapper {
    background: #000000 !important;
    border-top: 1px solid #00ff41 !important;
}

/* =========================
   DROPDOWNS AND MODALS
   ========================= */

.dropdown-menu,
.privacy-dropdown__dropdown,
.modal-root__modal,
.boost-modal,
.confirmation-modal {
    background: #000000 !important;
    border: 2px solid #00ff41 !important;
    border-radius: 0 !important;
    color: #00ff41 !important;
}

.dropdown-menu__item a,
.privacy-dropdown__option {
    background: #000000 !important;
    color: #00ff41 !important;
    padding: 8px 12px !important;
}

.dropdown-menu__item a:hover,
.privacy-dropdown__option:hover {
    background: #00ff41 !important;
    color: #000000 !important;
}

/* =========================
   SCROLLBARS
   ========================= */

::-webkit-scrollbar {
    width: 12px !important;
    background: #000000 !important;
}

::-webkit-scrollbar-thumb {
    background: #00ff41 !important;
    border: 1px solid #000000 !important;
}

::-webkit-scrollbar-track {
    background: #001100 !important;
}

/* =========================
   MEDIA AND ATTACHMENTS
   ========================= */

.media-gallery,
.video-player,
.audio-player {
    border: 1px solid #00ff41 !important;
    background: #000000 !important;
    border-radius: 0 !important;
}

/* =========================
   NOTIFICATIONS
   ========================= */

.notification {
    border-left: 3px solid #00ff41 !important;
}

.notification__favourite-icon-wrapper,
.notification__reblog-icon-wrapper {
    background: rgba(0, 255, 65, 0.1) !important;
}

/* =========================
   LOADING AND STATUS
   ========================= */

.loading-indicator {
    color: #00ff41 !important;
}

.empty-column-indicator {
    color: #00ff41 !important;
    background: rgba(0, 20, 0, 0.5) !important;
    border: 1px dashed #00ff41 !important;
}

/* =========================
   ACCESSIBILITY
   ========================= */

*:focus {
    outline: 2px solid #00ff41 !important;
    outline-offset: 2px !important;
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */

@media screen and (max-width: 1174px) {
    .columns-area {
        width: 100% !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 630px) {
    .status,
    .detailed-status,
    .notification {
        margin: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}

/* =========================
   ADMIN AND SETTINGS PAGES
   ========================= */

.simple_form,
.admin-wrapper .content,
.table-wrapper,
.dashboard__counters {
    background: #000000 !important;
    color: #00ff41 !important;
}

.simple_form .input,
.simple_form .textarea {
    background: #000000 !important;
    border: 1px solid #00ff41 !important;
    color: #00ff41 !important;
    border-radius: 0 !important;
}

/* =========================
   TERMINAL CURSOR EFFECT
   ========================= */

.compose-form textarea:focus {
    position: relative;
}

@keyframes terminal-cursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}