/* Summary: This CSS file defines the styles for the SillikaLM application.
   It includes styles for the main container, buttons, tables, and other UI elements.
   The styles aim to provide a consistent and visually appealing user interface.
   Copyright © 2025 Krishnakanth Allika.
   Licensed under the GNU General Public License v3 (GPLv3).
   This program 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, either version 3 of the License, or
   any later version.
   This program 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 this program. If not, see https://www.gnu.org/licenses/gpl-3.0-standalone.html.
   For inquiries, contact: speed-acorn-whiff@duck.com
   Full license details: See LICENSE file. */

@font-face {
    font-family: 'Cascadia Code';
    src: url('/static/fonts/CascadiaCode.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: #2e2e2e; /* Dark grey background */
    color: #ffffff; /* White text */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

.main-container {
    max-width: 1320px; /* Increased by 10% from 1320px */
    margin: 0 auto;
    padding: 10px; /* Reduced padding */
}

.container {
    display: flex;
    align-items: flex-start; /* Aligns the flex items to the top */
    margin-bottom: 10px; /* Reduced margin-bottom */
    border-radius: 10px; /* Rounded corners for container */
}

.main-container .container {
    height: 500px;
    border-radius: 10px; /* Rounded corners for main container */
}

.operations {
    flex: 1;
    margin-right: 20px;
    margin-top: 10px; /* Reduced margin-top */
    border-radius: 10px; /* Rounded corners for operations */
}

.output {
    flex: 2;
    margin-top: 10px;
    /* padding-top: 10px; Add top padding to the output section */
    border-radius: 10px; /* Rounded corners for output */
    max-height: 450px; /* Adjust the height as needed */
    overflow-y: auto; /* Add scroll if content overflows */
    width: 121%; /* Increased width by 10% from 110% */
    font-size: 0.9em; /* Reduced font size */
}

h1 {
    color: #ffcc00; /* Amber color for headings */
    text-align: center; /* Center align the title */
    margin-bottom: 10px; /* Reduced margin-bottom */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

button {
    background-color: #ffcc00; /* Amber color for buttons */
    color: #2e2e2e; /* Dark grey text on buttons */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 5px 0;
    border-radius: 10px; /* Rounded corners for buttons */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

button:hover {
    background-color: #ffd700; /* Yellow color on hover */
}

button:disabled {
    background-color: #ffcc00; /* Amber color for buttons */
    color: #7a7a7a; /* Grey text on disabled buttons */
    cursor: not-allowed;
    border-radius: 10px; /* Rounded corners for disabled buttons */
}

input[type="text"], select {
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px; /* Rounded corners for input and select */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

.response {
    margin-top: 10px; /* Reduced margin-top */
    padding: 10px;
    background-color: #2e2e2e; /* Match background color to page */
    color: #ffffff;
    border-radius: 10px; /* Rounded corners for response */
    font-family: 'Cascadia Code', Arial, sans-serif;
    font-size: 0.9em; /* Reduced font size */
}

.section {
    border: 1px solid #ffcc00; /* Thinner amber border for sections */
    padding: 10px;
    margin-bottom: 10px; /* Reduced margin-bottom */
    border-radius: 10px; /* Rounded corners for sections */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

pre {
    background-color: #2e2e2e;
    color: #ffffff;
    padding: 10px;
    border-radius: 10px; /* Rounded corners for pre */
    overflow: auto;
    font-family: 'Cascadia Code', Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px; /* Reduced margin-top */
    font-size: 0.8em; /* Reduced font size */
    border-radius: 10px; /* Rounded corners for table */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

th, td {
    border: 1px solid #ffcc00;
    padding: 10px;
    text-align: left;
    border-radius: 10px; /* Rounded corners for table cells */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

th {
    background-color: #3e3e3e;
}

.note {
    font-size: 0.9em;
    color: #ffcc00; /* Amber color for the note */
    margin-top: 5px;
    font-family: 'Cascadia Code', Arial, sans-serif; /* Terminal font */
    display: none; /* Initially hidden */
    border-radius: 10px; /* Rounded corners for note */
}

.spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #ffcc00; /* Amber */
    border-radius: 50%; /* Rounded corners for spinner */
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    display: none; /* Initially hidden */
    margin: 20px auto; /* Center the spinner */
}

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

.logs {
    margin-top: 10px; /* Reduced margin-top */
    padding: 20px;
    background-color: #2e2e2e;
    color: #ffffff;
    border: 1px solid #ffcc00;
    border-radius: 10px; /* Rounded corners for logs */
    font-family: 'Cascadia Code', Arial, sans-serif;
    /* width: 100%; Increased width by 10% from 110% */
    max-width: 1320px;
}

.logs h2 {
    color: #ffcc00;
    font-size: 1em; /* Smaller font size for the title */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

.logs pre {
    background-color: #2e2e2e;
    color: #b6b6b6; /* Grey color for logs */
    padding: 10px;
    border-radius: 10px; /* Rounded corners for logs pre */
    overflow: auto;
    max-height: 200px;
    white-space: pre-wrap; /* Ensure logs are displayed with preserved whitespace */
    font-size: 0.7em; /* Smaller font size for logs */
    font-family: 'Cascadia Code', Arial, sans-serif;
}

.shutdown-button {
    color: red;
    margin-left: 10px;
}

.delete-all-button {
    color: red;
}