/*************************************************************************/
/* Copyright 2025 Alessandro Bertulli                                    */
/*                                                                       */
/* This file is part of LCARS-NG.                                        */
/*                                                                       */
/* LCARS-NG is free software: you can redistribute it and/or modify it   */
/* under the terms of the GNU General Public License as published by the */
/* Free Software Foundation, version 3 of the License.                   */
/*                                                                       */
/* LCARS-NG is distributed in the hope that it will be useful, but       */
/* WITHOUT ANY WARRANTY; without even the implied warranty of            */
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      */
/* General Public License for more details.                              */
/*                                                                       */
/* You should have received a copy of the GNU General Public License     */
/* along with LCARS-NG. If not, see <https://www.gnu.org/licenses/>.     */
/*************************************************************************/
:root {
    /* LCARS TNG/Voyager palette */
    --lcars-black: #000000;
    --lcars-gray: #101010;
    --lcars-orange: #ff9900;
    --lcars-purple: #cc99cc;
    --lcars-blue: #9999ff;
    --lcars-red: #cc0000;
    --lcars-beige: #ffcc99;

    --lcars-link: var(--lcars-blue);
    
    /* LCARS typical spacing */
    --gap: 5px;         /* Black lines between blocks */
    --curve: 30px;      /* Radius of the curve */
    --bar-height: 40px; /* Horizontal bars' height */
    --header-bar-height: calc(var(--bar-height) + var(--gap));
    --sidebar-width: 150px;
    /* font-size: 33px; */
    font-size: 23px;

    --background-color: var(--lcars-gray);
    background-color: var(--background-color);
}

body {
    color: var(--lcars-orange);
    font-family: 'Antonio', 'Arial Narrow', sans-serif;
    margin: 1rem;
    overflow-x: hidden;
    line-height: 1.5;
}

header {
    border-bottom: 1px solid #222;
    margin-bottom: 1rem;
    text-transform: uppercase; /* LCARS is usually uppercase */
    text-align: center;
}

footer {
    border-top: 1px solid #222;
    margin-top: 1rem;
}

a {
    color: var(--lcars-link);
    text-decoration: none;
    transition: color linear 0.2s;
}

a:hover {
  color: #ffffff;
}

/* Main layout (grid) */
.lcars-container {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;    /* Menu column | Content */
    grid-template-rows: var(--header-bar-height) 1fr;   /* Title bar   | Content */
    gap: var(--gap);
    padding: var(--gap);
}

.lcars-header-background {
    grid-column: 1 / 2;
    grid-row: 1 / span 1;
    width: 100vw;
    height: calc(100% + 1 * var(--gap));
    background-color: var(--background-color);
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 1;
}

/* 1. Heading (Header bar) */
.lcars-header {
    grid-column: 2 / span 1; /* Occupies the second column */
    background-color: var(--lcars-orange);
    border-top-right-radius: var(--curve);
    border-bottom-right-radius: var(--curve);
    display: flex;
    align-items: center;
    padding-left: 20px;
    /* margin-top: var(--gap); */
    font-size: 1.5rem;
    color: var(--lcars-black);
    font-weight: bold;
    text-transform: uppercase; /* Again, usually uppercase */
    position: sticky;
    top: var(--gap);
    margin-top: var(--gap);
    /* padding-top: var(--gap); */
    /* margin-bottom: var(--gap); */
    padding-bottom: var(--gap);
    z-index: 5;
}

/* 2. Elbow (Top left corner) */
.lcars-elbow {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    background-color: var(--lcars-orange);
    border-top-left-radius: var(--curve);
    /* This is for the "continuous" effect to the bottom */
    margin-bottom: 0; 
    /* margin-top: var(--gap); */
    position: relative;
    position: sticky;
    top: var(--gap);
    margin-top: var(--gap);
    padding-top: var(--gap);
    /* margin-bottom: var(--gap); */
    /* padding-bottom: var(--gap); */
    z-index: 10;
}

/* Trick for the internal elbow curve */
.lcars-elbow::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Exceeds a bit to cover */
    right: -10px;
    width: 20px;
    height: 20px;
    /* Optional: small adjustments for the internal curve */
}

/* 3. Lateral bar (Menu) */
.lcars-sidebar {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    /* border: 20px; */
    /* border-top: 20px; */
    text-transform: uppercase; /* Again uppercase*/
    position: sticky;
    top: calc(var(--header-bar-height) + var(--gap));
    height: fit-content;
    padding-bottom: var(--gap);
    background-color: var(--background-color);
}

/* 4. Composable blocks (buttons/panels) */
.lcars-block {
    background-color: var(--lcars-purple); /* Default color */
    height: auto;
    min-height: 40px;
    border-top-left-radius: var(--curve); /* Curve just to the left */
    border-bottom-left-radius: var(--curve);
    display: flex;
    align-items: center; /* Center text */
    justify-content: flex-end; /* Text aligned to the right */
    text-align: end;
    padding-right: 10px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background-color linear 0.2s;
}

a.lcars-block:hover {
    color: black;
}

/* Alternate colors for the blocks */
.lcars-block:nth-child(even) { background-color: var(--lcars-beige); }
.lcars-block:hover { background-color: white; }

/* Spacer block, extending to fill the remaining space */
.lcars-spacer {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    flex-grow: 1;
    background-color: var(--lcars-blue);
    border-bottom-left-radius: var(--curve);
    top-margin: var(--gap);
    top-padding: var(--gap);
    bottom-margin: var(--gap);
    bottom-padding: var(--gap);
}

/* 5. Main content area */
.lcars-main {
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    padding: 20px;
    border: 2px solid var(--lcars-blue); /* Optional border */
    border-radius: var(--curve);
    color: var(--lcars-orange);
    overflow-y: auto;
}