/*!
 * Copyright (c) 2025 Denis Khorkin
 *
 * Licensed under the BSD 3-Clause "New" or "Revised" License;
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      https://opensource.org/license/bsd-3-clause
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

:root {
    /* color constants
     *
     * color palette */
    --black:    #000;
    --red:      #cc4a4a;
    --orange:   #fe9f27;
    --blue:     #0088e8;

    /* component colors */
    --sidebar-bg:   #111;
    --header-bg:    #222;
    --border-color: #333;
    --color-error:  var(--red);


    /* typography
     *
     * 1rem = browser's default font size (usually 16px)
     * font-size: 12px (measured) / 16px ≈ 0.75rem */
    --base-font-size: 0.75rem;
    /* line-height: 14px (measured) / 12px (font-size) ≈ 1.1667 */
    --base-line-height: 1.1667;
    --spacing-text-block: 0px;  /* top/bottom */
    --spacing-text-inline: 0px; /* left/right */
    --row-height: calc(
    var(--base-font-size) * var(--base-line-height) +
    var(--spacing-text-block) * 2
    );


    /* layout constants */
    --sidebar-width: 200px;
    --rooms-visible-rows: 5;
}

/* base layout */
body {
    background: var(--black);
    color: var(--orange);
    font-family: monospace;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/* sidebar layout */
#sidebar {
    height: 100vh;
    width: var(--sidebar-width);
    border-right: 1px solid var(--border-color);
    background: var(--sidebar-bg);
    transition: width 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

#sidebar-header {
    border-bottom: 1px solid var(--border-color);
    background: var(--header-bg);
    color: var(--orange);
    padding: 8px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

#sidebar-header span {
    flex: 1;
    text-align: center;
}

#sidebar-toggle {
    border: none;
    background: none;
    color: inherit;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.sidebar-section-header {
    border-bottom: 1px solid var(--border-color);
    color: var(--orange);
    padding: 8px 5px;
    display: flex;
    justify-content: center;
}

#rooms-list {
    min-height: calc(var(--rooms-visible-rows) * var(--row-height));
    max-height: 20vh;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

#rooms-list li.active {
    color: var(--blue);
    font-weight: bold;
}

#users-list {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}

#rooms, #users {
    list-style: none;
    padding: 0;
    margin: 0;
}

#rooms li, #users li {
    padding: 0;
    cursor: pointer;
}

#rooms li:hover, #users li:hover {
    background: var(--header-bg);
}

#sidebar.collapsed {
    width: 30px;
}

#sidebar.collapsed #sidebar-header {
    border-bottom: none;
    background: none;
}

#sidebar.collapsed #sidebar-header span {
    display: none;
}

#sidebar.collapsed #sidebar-toggle {
    transform: none;
    width: 30px;
}

#sidebar.collapsed .sidebar-section-header,
#sidebar.collapsed #rooms-list,
#sidebar.collapsed #users-list {
    display: none;
}

/* main layout */
#main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;   /* prevents overflow */
}

#message-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.system.rooms-info {
    padding: 0;
    margin: 2px 0;
    color: var(--blue);
}

.system.rooms-info pre {
    font-family: monospace;
    margin-top: 1px;
}

#status-line {
    border-top: 1px solid var(--border-color);
    background: var(--sidebar-bg);
    color: var(--blue);
    padding: 5px 10px;
}

#command-line {
    width: 100%;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    background: var(--black);
    color: var(--orange);
    padding: 5px;
}

#command-line.error {
    color:          var(--color-error);
    border-color:   var(--color-error);
}