* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background: #050505;
    color: #33ff66;
    font-family: "Courier New", monospace;
    font-size: 16px;
}

a {
    color: #66ff88;
    text-decoration: none;
}

a:hover {
    background: #33ff66;
    color: #050505;
}

.terminal {
    max-width: 1050px;
    margin: auto;
    padding: 18px;
}

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

.logo {
    font-weight: bold;
}

.topbar nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rule {
    border-top: 1px solid #33ff66;
    margin: 14px 0;
}

hr {
    border: 0;
    border-top: 1px solid #33ff66;
    margin: 16px 0;
}

.hero {
    text-align: center;
    padding: 20px 0;
}

.box {
    border: 1px solid #33ff66;
    padding: 16px;
    margin: 18px 0;
    background: #071007;
}

/* Darker border used for thread post boxes */
.thread-box {
    border: 1px solid #257a3b;
}

.box-title {
    border-bottom: 1px dashed #33ff66;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 20px 0;
}

.menu a {
    padding: 8px;
    border: 1px solid transparent;
}

/* Legacy table support */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
}

th,
td {
    border: 1px solid #257a3b;
    padding: 9px;
    text-align: left;
    vertical-align: top;
}

th {
    font-weight: bold;
}

input:not([type="hidden"]),
textarea,
select {
    display: block;
    width: 100%;
    max-width: 700px;
    background: #020602;
    color: #66ff88;
    border: 1px solid #33ff66;
    padding: 9px;
    font: inherit;
    margin-top: 5px;
}

textarea {
    min-height: 150px;
    resize: vertical;
}

label {
    display: block;
    margin: 12px 0;
}

form.inline {
    display: inline-flex;
    width: auto;
    margin: 0 6px 0 0;
    padding: 0;
    vertical-align: middle;
}

form.inline button {
    display: inline-block;
    width: auto;
    margin: 0;
}

button,
.button {
    background: #050505;
    color: #66ff88;
    border: 1px solid #33ff66;
    padding: 8px 13px;
    font: inherit;
    cursor: pointer;
    display: inline-block;
}

button:hover,
.button:hover {
    background: #33ff66;
    color: #050505;
}

.notice {
    border: 1px dashed #33ff66;
    padding: 10px;
    margin: 12px 0;
}

.post {
    display: grid;
    grid-template-columns: 180px 1fr;
    border: 1px solid #257a3b;
    margin: 14px 0;
}

.post aside {
    padding: 12px;
    border-right: 1px solid #257a3b;
    background: #071007;
}

.post > div {
    padding: 12px;
}

.dim {
    opacity: 0.7;
    font-size: 0.9em;
}

.post-body {
    margin-top: 16px;
    line-height: 1.5;
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    opacity: 0.75;
    font-size: 0.85em;
}

/* =========================================================
   PROFILE
   ========================================================= */

.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
}

.profile-info,
.profile-avatar {
    margin: 0; border-color: #257a3b;
}

.profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

.avatar-svg {
    width: min(220px, 70%);
    height: auto;
    color: #33ff66;
}

.password-box {
    margin-top: 18px;
}

/* =========================================================
   ASCII HEADER
   ========================================================= */

.ascii-logo {
    white-space: pre;
    overflow-x: auto;
    max-width: 100%;
}

/* =========================================================
   RESPONSIVE TABLE FALLBACK
   ========================================================= */

.responsive-table {
    width: 100%;
    overflow-x: auto;
}

.responsive-table table {
    width: 100%;
    border-collapse: collapse;
}

/* =========================================================
   BOARDS LIST
   # | BOARD | DESCRIPTION | THREADS
   ========================================================= */

.board-list {
    width: 100%;
    margin: 15px 0;
}

.board-row {
    display: grid;
    grid-template-columns: 60px 180px minmax(0, 1fr) 90px;
    width: 100%;
    align-items: stretch;
    background: #071007;
    border-left: 1px solid #257a3b;
    border-right: 1px solid #257a3b;
    border-bottom: 1px solid #257a3b;
}

.board-row:first-child {
    border-top: 1px solid #257a3b;
}

.board-row > div {
    min-width: 0;
    padding: 9px;
    border-left: 1px solid #257a3b;
}

.board-row > div:first-child {
    border-left: 0;
    text-align: center;
}

.board-header {
    font-weight: bold;
    background: #050505;
}

.board-row a {
    overflow-wrap: anywhere;
}

/* =========================================================
   THREAD LIST
   SUBJECT | BY | POSTS | DATE
   ========================================================= */

.thread-list {
    width: 100%;
    margin: 15px 0;
}

.thread-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px 90px 170px;
    width: 100%;
    align-items: stretch;
    background: #071007;
    border-left: 1px solid #257a3b;
    border-right: 1px solid #257a3b;
    border-bottom: 1px solid #257a3b;
}

.thread-row:first-child {
    border-top: 1px solid #257a3b;
}

.thread-row > div {
    min-width: 0;
    padding: 9px;
    border-left: 1px solid #257a3b;
}

.thread-row > div:first-child {
    border-left: 0;
}

.thread-row > div:nth-child(3) {
    text-align: center;
}

.thread-header {
    font-weight: bold;
    background: #050505;
}

.thread-row a {
    overflow-wrap: anywhere;
}

.thread-empty {
    border: 1px solid #257a3b;
    padding: 12px;
    background: #071007;
}

/* =========================================================
   PRIVATE MAIL
   TYPE | FROM / TO | SUBJECT | DATE
   ========================================================= */

.mail-list {
    width: 100%;
    margin: 15px 0;
}

.mail-row {
    display: grid;
    grid-template-columns: 90px 180px minmax(0, 1fr) 180px;
    width: 100%;
    align-items: stretch;
    background: #071007;
    border-left: 1px solid #257a3b;
    border-right: 1px solid #257a3b;
    border-bottom: 1px solid #257a3b;
}

.mail-row:first-child {
    border-top: 1px solid #257a3b;
}

.mail-row > div {
    min-width: 0;
    padding: 9px;
    border-left: 1px solid #257a3b;
}

.mail-row > div:first-child {
    border-left: 0;
    text-align: center;
}

.mail-header {
    font-weight: bold;
    background: #050505;
}

.mail-row a {
    overflow-wrap: anywhere;
}

.mail-item {
    color: #66ff88;
    text-decoration: none;
}

.mail-item:hover {
    background: #33ff66;
    color: #050505;
}

.mail-item.unread {
    font-weight: bold;
}

.mail-subject {
    overflow-wrap: anywhere;
}

.mail-empty {
    border: 1px solid #257a3b;
    padding: 12px;
    background: #071007;
}

/* =========================================================
   ADMIN / SYSOP
   ========================================================= */

.admin-list,
.admin-threads {
    width: 100%;
    margin: 15px 0;
}

/*
   USERS
   ID | HANDLE | ADMIN | STATUS | ACTION
*/

.admin-user {
    display: grid;
    grid-template-columns:
        60px
        minmax(140px, 1fr)
        90px
        110px
        minmax(260px, 1.4fr);
    width: 100%;
    align-items: stretch;
    background: #071007;
    border-left: 1px solid #257a3b;
    border-right: 1px solid #257a3b;
    border-bottom: 1px solid #257a3b;
}

.admin-user:first-child {
    border-top: 1px solid #257a3b;
}

.admin-user > div {
    min-width: 0;
    padding: 9px;
    border-left: 1px solid #257a3b;
}

.admin-user > div:first-child {
    border-left: 0;
    text-align: center;
}

/*
   RECENT THREADS
   BOARD | THREAD | BY | ACTION

   ACTION widened to 150px so [ DELETE ] stays
   on one line.
*/

.admin-thread {
    display: grid;
    grid-template-columns:
        160px
        minmax(0, 1fr)
        150px
        150px;
    width: 100%;
    align-items: stretch;
    background: #071007;
    border-left: 1px solid #257a3b;
    border-right: 1px solid #257a3b;
    border-bottom: 1px solid #257a3b;
}

.admin-thread:first-child {
    border-top: 1px solid #257a3b;
}

.admin-thread > div {
    min-width: 0;
    padding: 9px;
    border-left: 1px solid #257a3b;
}

.admin-thread > div:first-child {
    border-left: 0;
}

.admin-header {
    font-weight: bold;
    background: #050505;
}

.admin-actions {
    white-space: normal;
}

.admin-actions form {
    display: inline-block;
    margin: 0 6px 4px 0;
}

/* Keep admin buttons such as [ DELETE ] on one line */
.admin-user button,
.admin-thread button {
    white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    /* Hide desktop site title */
    .logo {
        display: none;
    }

    /* ASCII art does not scale cleanly on small displays */
    .ascii-logo {
        display: none;
    }

    .hero pre {
        font-size: 10px;
    }

    /* Posts */
    .post {
        grid-template-columns: 1fr;
    }

    .post aside {
        border-right: 0;
        border-bottom: 1px solid #257a3b;
    }

    /* Profile */
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-avatar {
        min-height: 220px;
    }

    /* Legacy table fallback */
    .responsive-table table {
        min-width: 600px;
    }

    /*
       Desktop column headings are unnecessary on mobile because
       each card displays its own labels.
    */

    .board-header,
    .thread-header,
    .mail-header,
    .admin-header {
        display: none !important;
    }

    /*
       Convert board/thread/mail/admin records into terminal cards.
    */

    .board-row:not(.board-header),
    .thread-row:not(.thread-header),
    .mail-row:not(.mail-header),
    .admin-user:not(.admin-header),
    .admin-thread:not(.admin-header) {
        display: block;
        border: 1px solid #257a3b;
        margin: 12px 0;
        padding: 9px;
    }

    .board-row > div,
    .thread-row > div,
    .mail-row > div,
    .admin-user > div,
    .admin-thread > div {
        border-left: 0;
        border-top: 1px solid #257a3b;
        padding: 8px 0 0;
        margin-top: 8px;
        text-align: left !important;
    }

    .board-row > div:first-child,
    .thread-row > div:first-child,
    .mail-row > div:first-child,
    .admin-user > div:first-child,
    .admin-thread > div:first-child {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    /*
       Mobile field labels
    */

    .board-row > div::before,
    .thread-row > div::before,
    .mail-row > div::before,
    .admin-user > div::before,
    .admin-thread > div::before {
        display: block;
        font-weight: bold;
        opacity: 0.7;
        font-size: 0.82em;
        margin-bottom: 3px;
    }

    /* Boards */
    .board-row > div:nth-child(1)::before {
        content: "#";
    }

    .board-row > div:nth-child(2)::before {
        content: "BOARD";
    }

    .board-row > div:nth-child(3)::before {
        content: "DESCRIPTION";
    }

    .board-row > div:nth-child(4)::before {
        content: "THREADS";
    }

    /* Threads */
    .thread-row > div:nth-child(1)::before {
        content: "SUBJECT";
    }

    .thread-row > div:nth-child(2)::before {
        content: "BY";
    }

    .thread-row > div:nth-child(3)::before {
        content: "POSTS";
    }

    .thread-row > div:nth-child(4)::before {
        content: "DATE";
    }

    /* Mail */
    .mail-row > div:nth-child(1)::before {
        content: "TYPE";
    }

    .mail-row > div:nth-child(2)::before {
        content: "FROM / TO";
    }

    .mail-row > div:nth-child(3)::before {
        content: "SUBJECT";
    }

    .mail-row > div:nth-child(4)::before {
        content: "DATE";
    }

    /* Admin users */
    .admin-user > div:nth-child(1)::before {
        content: "ID";
    }

    .admin-user > div:nth-child(2)::before {
        content: "HANDLE";
    }

    .admin-user > div:nth-child(3)::before {
        content: "ADMIN";
    }

    .admin-user > div:nth-child(4)::before {
        content: "STATUS";
    }

    .admin-user > div:nth-child(5)::before {
        content: "ACTION";
    }

    /* Admin recent threads */
    .admin-thread > div:nth-child(1)::before {
        content: "BOARD";
    }

    .admin-thread > div:nth-child(2)::before {
        content: "THREAD";
    }

    .admin-thread > div:nth-child(3)::before {
        content: "BY";
    }

    .admin-thread > div:nth-child(4)::before {
        content: "ACTION";
    }
}

/* Alert / flash messages */
.notice {
    border: 1px solid #33ff66;
    background: #071007;
    color: #66ff88;
    padding: 12px;
    margin: 12px 0;
    font-weight: bold;
}

.notice::before {
    content: "[ SYSTEM ] ";
    color: #33ff66;
}


/* Scalable retro BBS logo */
.bbs-logo-svg {
    display: block;
    width: min(420px, 90%);
    height: auto;
    margin: 20px auto;
    color: #33ff66;
    filter: drop-shadow(0 0 4px rgba(51, 255, 102, 0.35));
}

@media (max-width: 700px) {
    .bbs-logo-svg {
        width: min(320px, 88%);
        margin: 14px auto;
    }
}