:root {
    --appBackground: #352e2e;
    width: 99%;
}

* {    
    background-color: var(--appBackground); */
    font-family: monospace;
    color: rgb(214, 236, 86);
    padding: 0px;
}

html,
body {
   height: 98%;
   margin: 0;
   padding: 0;
}

button
{
    background-color: rgb(85, 85, 85);
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 1px;
    margin-top: 2px;
}

datalist,
select 
{
    background-color: rgb(134, 127, 127);
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 1px;
    margin-top: 2px;
}


.button-84 {
  align-items: center;
  background-color: initial;
  background-image: linear-gradient(grey, #25292e);
  border-radius: 8px;
  border: 1px solid #352e2e;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1),0 3px 6px rgba(0, 0, 0, .05);
  box-sizing: border-box;
  color: rgb(214, 236, 86);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font-size: 13px;
  height: 22px;
  justify-content: center;
  line-height: 1;
  margin-right: 5px;
  outline: none;
  overflow: hidden;
  padding: 0 16px;
  transition: all 50ms;
  vertical-align: baseline;
  white-space: nowrap;  
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.button-84:disabled {
    /* background-color: #cccccc; Light gray background */
    background-color: rgba(255, 255, 255, 0.993);
    background-image: linear-gradient(rgb(255, 255, 255), rgb(128, 128, 128));
    /* color: #666666; Dark gray text */
    cursor: not-allowed; /* Change cursor to indicate disabled state */
    opacity: 0.6; /* Make the button semi-transparent */
}

.button-84:hover {
  box-shadow: rgba(0, 1, 0, .2) 0 2px 8px;
  opacity: .75;
  border: 1px solid white;
}

.button-85 {
    height: 18px;
}


button.cmd {
    background-color: rgb(85, 85, 85);
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    margin-bottom: 2px;
}


input[type=text] {
    color: white;
    background-color: rgb(134, 127, 127);
    border: 1px solid silver;    
    padding-left: 5px;
    padding-right: 5px;
    margin: 2px 3px 1px 3px;
}

input[type=text].light-blue {
    color: #000000;  /* Black */
    background-color: #bcffff; /* Light blue background */
    border: none;    
}


input[type=file] {
    display: none;
}

.fileinput {
    background-color: rgb(85, 85, 85);
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 1px;
    margin-top: 2px;
}

#serialResults {
    font-family: monospace;
    white-space: pre;
    height: calc(100vh - 80px);
    max-width: 1fr;
    min-height: 1fr;
    width: 650px;
    border: 1px solid #ccc;
    overflow-y: scroll;
    background-color: rgb(88, 92, 92);    
    resize: horizontal;
    overflow-x: auto;
}

textarea {
    line-height: 14px;
    width: 100%;
    height: 80px;
}

.appGrid {
    display: grid;

    grid-template-rows: 30px 30px 1fr 30px;
    /* grid-template-columns: 2fr 1fr; */
    grid-template-columns: 1fr;

    grid-template-areas:
       'Header Header'
       'Controls Log'
       'Content Log'
       'Status Log';

    gap: 5px;
    padding: 5px;
    height: calc(100% - 10px);
 }

 #itemHeader {
    grid-area: Header;
 }

 #itemLog {
    grid-area: Log;
 }

 #itemControls {
    grid-area: Controls;
    padding-left: 5px;
 }

 #itemContent {
    grid-area: Content;
 }

 #itemStatus {
    grid-area: Status;
    padding-top: 3px;
    padding-left: 5px;
 }

/* Style the tab */
.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    /*background-color: rgb(85, 85, 85);    */
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    float: left;
    border: 1px solid #ccc;
    border-bottom: 0px;
    outline: none;
    cursor: pointer;
    padding: 5px 5px;
    transition: 0.3s;
    margin-right: 10px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: rgb(219, 235, 132);
    color: rgb(63, 62, 62);
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: rgb(214, 236, 86);
    color: rgb(85, 85, 85);
    font-weight: bold;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    height: calc(100vh - 185px);
    overflow-y: scroll;
}

.response {
    width: 100%;
    
}

h3 {
    width: 100%;
    border-bottom: 1px solid;
    margin-bottom: 0px;
}

h2 {
    width: 100%;
    padding: 5px 0 5px 5px;
    margin: 0px;
    color: #352e2e;
    background-color: rgb(214, 236, 86);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

label {
    text-align: right;
    clear: both;
    margin-right: 10px;
    display: inline-block;
    background-color: inherit;
}

table {
    padding: 0px;
    margin: 0px;
    border: 0px;
}



tr:nth-of-type(odd) {
    background-color: rgb(71, 68, 68);
}

table.parms tr:hover td {
    border-top: 1px solid greenyellow;
    border-bottom: 1px solid greenyellow;
}

table.parms tr:hover th {
    background-color: yellow;
}

th {
    text-align: right;
    color: rgb(71, 68, 68);
    background-color: rgb(219, 235, 132);
    padding: 2px;
    border-bottom: 1px solid;
}

th.heading {
    font-size: larger;
    text-align: left;
    background-color: rgb(214, 236, 86);
    padding: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}


td {
    background-color: inherit;
    padding-left: 5px;
    border-top: 1px solid rgb(71, 68, 68);
    border-bottom: 1px solid rgb(71, 68, 68);
}

span.version {
    font-size: 8px;
    font-style: oblique;
    vertical-align: top;
    background-color: inherit;
    color: inherit;
}

.rotate {
    /* FF3.5+ */
    -moz-transform: rotate(-90.0deg);
    /* Opera 10.5 */
    -o-transform: rotate(-90.0deg);
    /* Saf3.1+, Chrome */
    -webkit-transform: rotate(-90.0deg);
    /* IE6,IE7 */
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
    /* Standard */
    transform: rotate(-90.0deg);
  }

.flags-container {
    display: grid;
    grid-template-columns: repeat(15, 1fr); /* 15 flags per row */
    gap: 10px;
    max-width: 50%;
    margin: 0 auto;
}

.flag > div:first-child {
    margin-bottom: 6px; /* Adjust the value as needed */
}

.flag {
    display: flex;
    height: 200px;
    width: 40px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* background-color: #f9f9f9; */
}

.flag-name {
    white-space: nowrap;
    height:8em;
    vertical-align:bottom


    /* margin-bottom: 8px; Space between name and state */
}

.flag-status {
    padding: 3px 8px;
    border-radius: 12px;
    color: white;
}

.flag-status.on {
    background-color: green;
}

.flag-status.off {
    background-color: red;
}



.rtxt {
/*       -moz-transform:rotate(-90deg); 
    -moz-transform-origin: top left;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: top left;
    -o-transform: rotate(-90deg);
    -o-transform-origin:  top left; */

    transform: rotate(-90deg);
    transform-origin:  top left;

    position:relative;
    top:20px;
}
.rtd {
    white-space: nowrap;
    height:8em;
    vertical-align:bottom
}


.io-container {
    display: grid;
    grid-template-columns: repeat(15, 1fr); /* 15 I/O states per row */
    gap: 10px;
    max-width: 800px; /* Adjust this if needed */
    margin: 0 auto;
}

.io-state {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.io-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-bottom: 4px;
}

.io-status.on {
    background-color: green;
}

.io-status.off {
    background-color: red;
}

.io-label {
    font-size: 12px;
}

.config-container {
    overflow-y: auto;
    display: flex;
}

/* Sidebar */
.sidebar {
    width: 200px;
    color: #000000;  /* Black */ 
    background-color: #f4f4f4;
    padding: 10px;
    border-right: 1px solid #ccc;
    /* height: 600px;  */
    overflow-y: auto;
}

.sidebar ul {
    color: #000000;  /* Black */ 
    list-style-type: none;
    padding: 0;
}

.sidebar li {
    color: #000000;  /* Black */ 
    cursor: pointer;
    padding: 8px;
    margin: 2px 0;
    background-color: #ddd;
}

.sidebar li:hover {
    background-color: #ccc;
}

/* Table Container */
.table-container {
    flex-grow: 1;
    padding: 10px;
    color: #000000;  /* Black */ 
    /* height: 400px; */
    overflow-y: auto;
}

/* General Table Styles */
#table_config {
    width: 100%;
    border-collapse: collapse;
    
}

#table_config th, 
#table_config td {
    color: #000000;  /* Black */ 
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

#table_config th {
    background-color: #eee;
    position: sticky;
    top: 0;
    z-index: 1; 
    color: #000000;  /* Black */ 
}

/* Row Colors */
#table_config tr.green-row {
    color: #000000;  /* Black */  
    background-color: #00FF00; /* Green */
}

#table_config tr.blue-row {
    color: #000000;  /* Black */
    background-color: #00FFFF; /* Blue */
}

#table_config tr.yellow-row {
    color: #000000;  /* Black */
    background-color: #FFFF00; /* Yellow */
}

#table_config tr.red-row {
    color: #000000;  /* Black */
    background-color: #FF0000; /* Red */
}

/* Light Blue Background for Specific Column */
#table_config td.light-blue {
    color: #000000;  /* Black */
    background-color: #bcffff; /* Light blue background */
}

/* Light Blue Background for Specific Column */
#table_config td.button {
    color: #000000;  /* Black */
    background-color: #ffffff; /* Light blue background */
}

/* Light Blue Background for Specific Column */
.config-button {
    color: #000000;  /* Black */
    background-color: #ccc; /* Light blue background */
}

/* Hidden Class */
.hidden {
    display: none;
}

/* Column Widths for table_config */
#table_config th:nth-child(1),
#table_config td:nth-child(1) {
    width: 60%; /* First column width */
}

#table_config th:nth-child(2),
#table_config td:nth-child(2) {
    width: 32%; /* Second column width */
}

#table_config th:nth-child(3),
#table_config td:nth-child(3),
#table_config th:nth-child(4),
#table_config td:nth-child(4),
#table_config th:nth-child(5),
#table_config td:nth-child(5),
#table_config th:nth-child(6),
#table_config td:nth-child(6) {
    width: 1%; /* Small columns (D, ?, R, W) */
}

/* Light Blue Background for Specific Column */
.black {
    color: #000000;  /* Black */
    /* background-color: #bcffff; Light blue background */
}


.container_system_log {
    display: flex;
    align-items: center;
}

.container_ar_log {
    display: flex;
    align-items: center;
}
.container div {
    margin-right: 10px;
}
.input-box {
    width: 60px;
}
button {
    margin-right: 5px;
}

.system_log_head {
    writing-mode: vertical-lr; 
    transform: rotate( 180deg);
    z-index:1;
    position:sticky;
    bottom:0;
    text-align: start; 
}
/* Ensure the table itself has a fixed layout for predictable column widths */
#ar_log_records table { /* Target the table inside the specific div */
    table-layout: fixed;
    width: 100%; /* Make sure the table uses available space */
    border-collapse: collapse; /* Keep this from your HTML */
}

/* General styling for ALL headers using .ar_log_head */
.ar_log_head {
    writing-mode: vertical-lr; /* Sets text to render vertically, from left to right */
    transform: rotate(-180deg); /* Rotates the text 90 degrees (typically bottom-to-top) */
    z-index: 1; /* Ensures it stays above other content if overlapping */
    position: sticky; /* Makes the header sticky */
    bottom: 0; /* Sticks it to the bottom of its scrollable container */
    text-align: start; /* Aligns text to the start (which is 'top' in vertical-lr before rotation) */

    /* Default narrow width for most vertical headers to save space */
    width: 30px;
    /* Height to accommodate the length of the rotated text */
    /*height: 150px; /* Adjust this height if your longest vertical header text gets cut off */*/
    overflow: hidden; /* Hide text that overflows the specified height */
    white-space: nowrap; /* Prevents text from wrapping within the vertical flow */
    padding: 8px 4px; /* Adjust padding for vertical text */
}

/* Specific styling for the "Date/time" column header (2nd th) */
/* This will override the default width from .ar_log_head for this specific column. */
#ar_log_records th.ar_log_head:nth-child(2) {
    /* Set a specific width for the header cell itself to make the column wider.
       This will also influence the width of the data cells due to table-layout: fixed. */
    width: 160px; /* Use the same width as the data cells for consistency. */
    /* No need to set height here unless "Date/time" text needs more vertical space than 150px. */
}

/* Specific styling for the "Date/time" column data cells (2nd td) */
#ar_log_records td:nth-child(2) {
    min-width: 160px; /* Ensures the data cells are wide enough for 'YYYY-MM-DD HH:MM:SS' */
    white-space: nowrap; /* Prevents the date/time string from wrapping in the data cells */
    text-align: center; /* Centers the date/time for neatness */
    padding: 8px; /* Standard padding for data cells */
}

/* Basic styling from your provided HTML for the tbody cells (if not globally applied) */
#ar_log td {
    color: black;
}
#ar_log tr {
    color: black;
    background-color: green;
}

/* Container for the table to manage overall width */
.table-scroll-container {
    width: 100%; /* Or a fixed width like 800px */
    overflow-x: auto; /* Enable horizontal scrolling if table content is wider than container */
    margin-top: 10px; /* Space from controls above */
    border: 1px solid #ddd; /* Visual border for the whole table area */
    border-radius: 4px;
}

/* The main table element */
#ar_log_records table { /* Assuming ar_log_records is now the div that contains the table */
    table-layout: fixed; /* Essential for precise column width control */
    width: 100%; /* Start at 100% and let min-widths define actual width if columns are too wide */
    border-collapse: collapse;
}

/* General styling for ALL headers using .ar_log_head */


/* Container for the scrollable tbody */
.tbody-scroll-wrapper {
    max-height: 400px; /* **REQUIRED**: Set a fixed height for the scrollable body */
    overflow-y: scroll; /* **REQUIRED**: Enable vertical scrolling for the body */
    overflow-x: hidden; /* Hide horizontal scrollbar within tbody, table's overflow-x handles it */
    display: block; /* Important for div acting as a table section */
    width: 100%; /* Ensure it spans the full table width */
}

/* Make tbody display as a block to fit within its scrollable wrapper */
#ar_log2 {
    display: block;
    width: fit-content; /* Allow tbody to stretch based on content width */
    /* To ensure tbody width matches thead, you might need JavaScript or set a fixed width if columns are known */
}

/* Style for cells inside tbody */
#ar_log2 td {
    padding: 8px; /* Standard padding for data cells */
    border: 1px solid #dee2e6; /* Border for data cells */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    color: black; /* From your inline style */
}

#ar_log2 tr {
    color: black; /* From your inline style */
    background-color: green; /* From your inline style */
    display: table-row; /* Ensure rows behave as table rows */
}

/* Column Widths: This is the MOST IMPORTANT part for alignment.
   You must set explicit widths for EACH COLUMN (th and td) to match them.
   The sum of all these widths should ideally be equal to or greater than the .table-scroll-container width
   to trigger horizontal scrolling if needed.
   Adjust these values accurately for your content. */
#ar_log2_thead th:nth-child(1),
#ar_log2 td:nth-child(1) {
    width: 60px; /* Record ID */
}

#ar_log2_thead th:nth-child(2),
#ar_log2 td:nth-child(2) {
    width: 160px; /* Date/time - explicit width for the entire column */
    white-space: nowrap; /* Prevent wrapping in data cells */
    text-align: center; /* Center date/time in data cells */
}

#ar_log2_thead th:nth-child(3),
#ar_log2 td:nth-child(3) {
    width: 50px; /* SBS */
}

/* ... Continue for ALL your 70+ columns.
   This requires knowing the exact order and setting a width for each.
   Example for other columns (adjust widths accordingly): */
#ar_log2_thead th:nth-child(4), #ar_log td:nth-child(4) { width: 80px; } /* Ignition State */
#ar_log2_thead th:nth-child(5), #ar_log td:nth-child(5) { width: 80px; } /* Trip in Progress */
/* ... and so on for all columns up to the 70+th column */


/* IMPORTANT: Override the default width for vertical headers that need specific widths.
   For the "Date/time" header, its `width` (horizontal space on screen) is already 160px
   due to the column definition above. Its `height` (vertical text length) is 150px.
   This seems correct for the request.
*/