:root {
    /* Navbar Colors */
    --header-color: #780606;
    --nav-bar-color: #008066;
    --nav-text-color1: #D0D0D0;
    --nav-text-color0: #f7fafc;
    --nav-text-color: #e2e8f0;
    --side-drop-bg: #1F1A1A;
    --side-drop-bg-btn: #1F1A1A;
    --side-drop-border: #323832;
    --side-drop-hover-btn: #008066;
    --side-drop-text-head: #FFFFFF;
    --side-drop-text: #FFFFFF;
    --login-form: #4b0404;

    /* Background Colors */
    --background-color: #232323;
    --page-background-color: #333333;

    /* Text Colors */
    --text-color: #e1e1e1;
    --primary-text-color: #c5c5c5;
    --secondary-text-color: #9e9e9e;

    /* Status Warning Colors */
    --status-warning-color: #664d03;
    --status-warning-bg: #fff3cd;
    --status-warning-border: #ffecb5;

    /* Tables */
    --table-hd-bg: #780606;
    --table-hd-text: #e1e1e1;

    /* Link Colors */
    --link-color: #a6ecff;
    --hover-link-color: #b7d4dd;
    --active-link-color: #86afba;

    /* Button Colors */
    --button-background-color: #464646;
    --button-hover-background-color: #004f6c;
    --button-active-background-color: #0081b0;

    /* Form Colors */
    --form-background-color: #2f2f2f;
    --input-background: #3c3c3c;
    --input-border-color: #666666;

    /* Footer Colors */
    --footer-background-color: #212529;
    --footer-text-color: #757575;
}

/* .light-mode { */
[data-theme="light"] {
    /* Navbar Colors */
    --header-color: #8b0707;
    --nav-bar-color: #008066;
    --nav-text-color1: #D0D0D0;
    --nav-text-color0: #f7fafc;
    --nav-text-color: #e2e8f0;
    --side-drop-bg: #008066;
    --side-drop-bg-btn: #008066;
    --side-drop-border: #454c45;
    --side-drop-hover-btn: #009d7b;
    --side-drop-text-head: #FFFFFF;
    --side-drop-text: #000000;
    --login-form: #8b0707;

    /* Background Colors */
    --background-color: #f0f0f0;
    --page-background-color: #f5f5f5;

    /* Text Colors */
    --text-color: #333;
    --primary-text-color: #333;
    --secondary-text-color: #2c2c2c;

    /* Status Warning Colors */
    --status-warning-color: #856404;
    --status-warning-bg: #fff3cd;
    --status-warning-border: #ffeaa7;

    /* Tables */
    --table-hd-bg: #882d2d;
    --table-hd-text: #e2e8f0;

    /* Link Colors */
    --link-color: #007bff;
    --hover-link-color: #0056b3;
    --active-link-color: #004085;

    /* Button Colors */
    --button-background-color: #007bff;
    --button-hover-background-color: #0056b3;
    --button-active-background-color: #004085;

    /* Form Colors */
    --form-background-color: #bfbfbf;
    --input-background-color: #b3b5b6;
    --input-border-color: #2f3132;

    /* Footer Colors */
    --footer-background-color: #f8f9fa;
    --footer-text-color: #444a4f;
}

/* === RESET STYLES === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--background-color);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-color);
    font-size: 1.2em;
    line-height: 1.2;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
}

.row {
    max-width: 1500px;
	margin-left: auto;
    margin-right: auto;
    background-color: var(--background-color);
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

.header {
  background-color: var(--header-color);
  font-family: sans-serif;
  color: var(--nav-text-color1);
  padding: 0;
  border: 0px;
  border-color: #000000;
  box-sizing: border-box;
}

header h2 {
    margin: 0;
    padding: 0;
}

/* ========= */
/* k.css specific */
/* ========= */

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}

.navbar .icon {
	display: none;
}

.navbar {
  width: 100%;
  background-color: var(--nav-bar-color);
  color: var(--nav-text-color);
  overflow: auto;
  margin:0px;padding:0px;
}

.navbar a {
  float: left;
  display: block;
  padding: 8px;
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: var(--header-color);
  color: white;
}

[class*="col-"] {
  float: left;
  padding: 10px;
}

.header a:hover {
  background-color: var(--header-color);
  color: white;
}
.header a:visited {
	color: white;
	text-decoration: underline;
	background-color: var(--header-color);
}
.menu ul {
  list-style-type: none;
  margin: 10px;
  padding: 0;
  background-color: var(--nav-bar-color);
}

.menu ul:hover {
  background-color: var(--header-color);
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  color: var(--nav-text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
  background-color: var(--header-color);
}

.next ul {
  list-style: none;
  list-style-type: none;
  list-style-image: none;
  margin: 0px;
  padding: 0;
}
.next li {
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  padding: 2px 2px 2px 4px;  /* top right bottom left */
  margin-bottom: 0px;
  background-color: var(--nav-bar-color);
  color: var(--nav-text-color);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  list-style: none;
  list-style-type: none;
  list-style-image: none;

}
.next li:hover {
  background-color: var(--header-color);
}

.aside {
  background-color: #003243;
  padding: 15px;
  color: var(--nav-text-color);
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.bside {
	background-color: #003243;
	padding: 15px;
	color: var(--nav-text-color);
	text-align: left;
	font-size: 12px;
	border-radius: 10px;
}
.bside a {
  float: left;
  padding: 12px;
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: 17px;
}

.footer {
  max-width: 1500px;
  color: var(--text-color);
  bottom: 0;
  text-align: center;
  font-size: 11px;
  padding: 6px;
  vertical-align: bottom;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 20%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 60%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-acc {width: 20%;}

.kontent {
	padding: 0px;
    color: var(--primary-text-color);
}

.kontent p {
    line-height: 1.4;
    margin-bottom: 0.7em;
}

.kaption {
	display: block;
	float: right;
}

.dropbtn {
  background-color: var(--nav-bar-color);
  color: var(--nav-text-color);
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: var(--header-color);
}



.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--nav-bar-color);
  min-width: 150px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: .8em;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: #dbf9fe;}

.show {display: block;}

/* ==============dropdown k.css=========*/

/* ======= Accordion is side drop header buttons ========= */

.accordion {
  background-color: var(--side-drop-bg);
  color: var(--side-drop-text-head);
  cursor: pointer;
  padding: 8px; /* 0 */
  width: 100%; /* 100%; */
  border: 4px solid var(--side-drop-bg);
  text-align: left;
  outline: none;
  font-size: 1em;
  transition: 0.4s;
}
.accordion-control{
  text-align: left;
  font-size:1rem;
  font-family:'Montserrat';
  background: var(--side-drop-bg);
  color: var(--nav-text-color);
  border:none;
  padding: 0.8em 1em;
  cursor:pointer;
}
.active, .accordion:hover {
  background-color: var(--header-color);

}

.panel {
  padding: 2px 2px 2px 8px;  /* top right bottom left */
  width: 100%; /* 100%; 180px; */
  display: none;
  background-color: var(--side-drop-bg);
  overflow: hidden;
  border: 4px solid var(--side-drop-border);
  color: var(--nav-text-color);
  font-size: .8em;
  list-style-type: none;
}
/*.panel :hover {
	background-color: #321111;
}*/

.panel ul {
  list-style-type: none;
  background-color: var(--side-drop-bg-btn);
  margin: 10px;
  padding: 0;
}

.panel li {
  padding: 4px;
  margin-bottom: 0px;
  background-color: var(--side-drop-bg-btn); /* the selected li is thru .js on the home page */
  cursor:pointer;
  color: var(--nav-text-color)
  user-select: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.panel li:hover {
  background-color: var(--side-drop-hover-btn);
  color: var(--nav-text-color);
}

a:link {
	color: inherit;
	text-decoration: none;
}

a:visited {
	color: inherit;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	text-decoration: none;
}

.tags ul {
  list-style-type: none;
  padding: 4px 8px 4px 8px; /* top right bottom left  padding: 0; */
  margin: 0px;
}

.tags li {
  padding: 4px 8px 4px 12px; /* top right bottom left */
  list-style-type: none;
  margin-bottom: 0px;
  background-color: var(--login-form);
  color: var(--nav-text-color);
  border-radius: 15px;
}

.tags li:hover {
  background-color: var(--header-color);
  border-radius: 15px;
}

.tags select {
  background-color: var(--input-background);
  color: var(--nav-text-color);
  padding: 4px 8px 4px 12px;
  border-radius: 5px;
}

.tags a {
    background-color: var(--login-form);
	border-radius: 15px;
	color: #d0d0d0;
	font-size: 12px;
  	text-decoration: none;
  	font-size: 17px;
}

.tags a:hover {
	background-color: var(--header-color);
}

 .tags a:link {
	color: var(--text-color);
	text-decoration: none;
}

.tags a:visited {
	color: var(--text-color);
	text-decoration: none;
}

/* tagt = list for text only */
.tagt ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

.tagt li {
  padding: 4px 8px 4px 8px; /* top right bottom left */
  list-style-type: none;
  margin-bottom: 0px;
  background-color: var(--login-form);
  color: var(--nav-text-color);
  border-radius: 15px;
}

.status {
  position: relative;
  padding: 2px 2px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  width: 80%;
  	margin-left: auto;
    margin-right: auto;
}

.status {
  position: relative;
  padding: 2px 2px;
  margin-bottom: 2px;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  width: 80%;
  	margin-left: auto;
    margin-right: auto;
}

.status-warning {
  color: var(--status-warning-color);
  background-color: var(--status-warning-bg);
  border-color: var(--status-warning-border);
}
.status-warning .status-link {
  color: var(--status-warning-color);
}

input{
	border: 2px solid var(--text-color);
    background-color: var(--background-color);
    color: var(--text-color);
  	font-family: sans-serif;
  	font-size: 2em;
  	padding: 4px 0px 4px 12px;
  	text-indent: 1px;
  	border-radius: 6px;
  	box-shadow: none;
 	width: 90%;
 	font-size: 1em;
}

input:focus{
	border-color: var(--text-color);
}

/* Theme toggle button in header */
.theme-toggle-container {
    position: absolute;
    right: 20px;  /* Adjust spacing from right edge */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.theme-toggle-container button {
    background: none;
    border: none;
    color: var(--nav-text-color1);
    font-size: 1.5em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.theme-toggle-container button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 17px;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

#theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* button */
#title{
 	position: relative;
 	margin-top: 0.8em;
 	margin-left: 31%;
 	margin-right: 30%;
 	color: var(--text-color);
 	font-size: 3em;
 	text-align: center;
  	font-family: sans-serif;
}

#login{
	position: relative;
	margin-top: 0px;
	/* height: 50px; */
	text-align: center;
	font-size: 1.5em;
  	font-family: sans-serif;
    color: var(--primary-text-color);
}
 #login_container{

 	position: relative;
 	top: 1em;
 	margin-left: auto;
 	margin-right: auto;
 	width: 380px;
 	height: 20em;
 	border: 2px solid;
 	background: var(--login-form);
    border-radius: 15px;
 }
#login_container_req{
	position: relative;
 	top: 1em;
 	margin-left: auto;
 	margin-right: auto;
 	width: 380px;
 	height: 34em;
 	border: 2px solid;
 	background: var(--login-form);
    border-radius: 15px;
}

 #login_table{

 	position: relative;
 	margin-left: 10%;
 	margin-right: 5%;
 	margin-top: 10%;

 }

 #col1{
 	width: 90%;
 	font-size: 1.2em;
 	color: var(--text-color);
  	font-family: sans-serif;
 }

 #col2{
 	width: 60%;
 	padding-top: 5px;
 	padding-bottom: 5px;
  	float: right;
}


#btn{
  width: 80px;
  margin-left: 80px;
  padding: 4px 0px 4px 8px; /* top right bottom left */
  padding-right: 5px;
  border: 2px solid var(--text-color);
  font-size: 1.2em;
  font-family: sans-serif;
  background: #2e6f24;  /* #*/
  color: var(--text-color);
  border-radius: 6px;
  cursor: pointer;
}

#btn2{

  width: 60%;
  position: relative;
  margin-left: 10%;
  font-size: 1.2em;
  font-family: sans-serif;
  background: black;
  color: var(--text-color);
  width: 25%;
  margin-top: 2%;
}


#btn:hover{
    background-color: var(--side-drop-hover-btn);
    color: var(--text-color);
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}

#btn2:hover{

  background-color: rgb(81, 86, 87);
    color: white;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}

#statusLi{
	color: #ca22ca; /* test then delete */
}

#required_text{
	font-size: 1em;
	visibility: hidden;
}

#not_matching{
	font-size: 1em;
	visibility: hidden;
}
#signup_button{

  text-decoration: none;
}

#guest{
  color: white;
  font-size: 1.2em;
  position: relative;
  left: 20%;
  text-decoration: none;
}

#fg_pass{

  color: white;
  font-size: 1.2em;
  position: relative;
  left: 15%;
  text-decoration: none;
}

#doesnot{

  font-weight: bold;
  color: black;
  text-align: center;
  position: relative;
  margin-top: 0%;
  font-size: 3em;
}

#goback{

  font-weight: bold;
  color: blue;
  text-decoration: none;
  position: relative;
  text-align: center;
  font-size: 2em;
}







/* ========= */
/* /k.css specific */
/* ========= */


/* === FIXED PGPORT RULES (Removed duplicate) === */
.pgport {
    max-width: 750px;
    margin: 0 auto;
    padding: 0;
}

.ledport {
    max-width: 970px;
}

.ledland {
    max-width: 1500px;
}

.pgland {
    max-width: 970px;
}

.maxbody{
    max-width: 100%;
}

.frmsm {
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments */

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
  }

  .navbar.responsive {
  	position: relative;
  	display: block;
  	}

  .navbar.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 768px) {

    [class*="col-"] {
        width: 100%;
    }

    .pagination-controls {
        gap: 4px;
    }

    .pagination-btn {
        padding: 6px 10px;
        font-size: 12px;
        min-width: 25px;
    }

    .records-per-page {
        flex-direction: column;
        gap: 5px;
    }

    .filter-buttons {
        flex-direction: column;
        gap: 5px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .grid-item-nest2 {
        grid-template-columns: 1fr;
    }

    .grid-item-nest3 {
        grid-template-columns: 1fr;
    }

    .form-container {
        max-width: 100%;
        padding: 15px;
        margin: 10px;
    }

    .form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .form-label {
        margin-bottom: 5px;
        flex: none;
        padding-right: 0;
        min-width: auto;
    }

    .form-input {
        width: 100%;
    }
}

/* Medium and larger screens */
@media (min-width: 600px) {
    textarea {
        width: calc(95vw - 20px); /* 95% of the viewport width minus 20 pixels for padding */
    }

    /* For very large screens (desktops and monitors) */
    @media (min-width: 1200px) {
        .form-container {
            max-width: 700px; /* Slightly larger for big screens */
        }
    }
}


textarea {
  padding: 8px 8px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

/* ================pm tbl: table css================================*/

.tbl {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  color: var(--text-color);
  width: 100%;

  width: auto; /* Crucial: Tells table not to stretch to 100% */
  table-layout: auto; /* Content dictates the width */
  overflow-x: auto; /* Scroll if table is wider than screen */

}

.tbl td, .tbl th {
  border: 2px solid var(--input-border-color);
  padding: 4px;
}

.tbl tr input {
    background-color: var(--background-color);
    color: var(--text-color);
}

.tbl th {
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: left;
  background-color: var(--table-hd-bg);
  color: var(--table-hd-text);
}

.tbl th a {
    color: var(--nav-text-color);
}

.tbl td a {
    color: var(--primary-text-color);
}
/* Scrollable table container */
.tbl-container {
    overflow-x: auto;
    overflow-y: auto;
    margin: 20px 0;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    background-color: var(--background-color);
    /* Firefox specific styling for thick scrollbars */
    scrollbar-width: thick;
    scrollbar-color: var(--button-hover-background-color) var(--button-active-background-color);

   /* Alternative approaches */
    scrollbar-width: auto; /* Try auto first */
    scrollbar-color: #ff0000 #00ff00;

    /* Also try */
    -moz-appearance: none; /* This might help Firefox recognize custom scrollbars */

}

.tbl-container .tbl th {
    padding-top: 6px;
    padding-bottom: 6px;
/*     background-color: #780606; /* Keep your existing header color */ */
/*     color: var(--text-color); */
    position: sticky;
    top: 0;
}

/* Webkit browsers (Chrome, Safari, Edge Chromium) - Enhanced */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .tbl-container::-webkit-scrollbar {
        height: 24px;
        width: 24px;
    }

    .tbl-container::-webkit-scrollbar-track {
        background: var(--background-color);
        border-radius: 12px;
        border: 1px solid var(--input-border-color);
    }

    .tbl-container::-webkit-scrollbar-thumb {
        background-color: var(--button-background-color);
        border-radius: 12px;
        border: 4px solid var(--background-color);
        min-width: 24px;
        min-height: 24px;
    }

    .tbl-container::-webkit-scrollbar-thumb:hover {
        background-color: var(--button-hover-background-color);
    }

    .tbl-container {
        overflow-x: auto;
        overflow-y: auto; /* Changed from hidden to auto */
    }
}

/* Firefox specific styling */
@supports (-moz-appearance: none) {
    .tbl-container {
        scrollbar-width: thick;
        scrollbar-color: var(--button-background-color) var(--background-color);

    }
}


/* ================/ custom table css=========================*/

h1 {
    display: block;
    font-size: 1.8em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
    display: block;
    font-size: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.17em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h4 {
    display: block;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: .5em;
    margin-bottom: .5em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h5 {
    display: block;
    font-size: .83em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: .4em;
    margin-bottom: .4em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h6 {
    display: block;
    font-size: .67em;
	font-family: Arial, Helvetica, sans-serif;
    margin-top: .33em;
    margin-bottom: .33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.form-control {
	background-color: var(--background-color);
}

/* ================CANVAS GRID================================*/



/* === button group === */

.grid-container {
	display: grid;
	grid-template-rows: min-content;
	grid-template-columns: max-content max-content max-content max-content max-content max-content  max-content max-content;
	padding: 6px 6px;  /* 2: T&B, R&L...  4: top right bottom left */
	background-color: var(--background-color);
	color: var(--text-color);
}

.grid-item {
	display: grid;
	background-color: var(--background-color);
  	border: none;
	padding: 6px;  /* 2: T&B, R&L...  4: top right bottom left */
  	font-size: 1.8em;
  	font-family: Arial, Helvetica, sans-serif;
  	text-align: left;
	color: var(--text-color);
}

.grid-item-nest1 {
	display: grid;
  	grid-template-columns: 1fr; /* 1fr = 1 column in nested grid item */
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}
.grid-item-nest2 {
	display: grid;
  	grid-template-columns: 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}

.grid-item-nest3 {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}

.grid-item-nest4 {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}
.grid-item-nest5 {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}
.but {
  	background-color: var(--button-background-color);
    border-radius: 4px;
  	color: var(--text-color);
  	border: 2px solid var(--secondary-text-color);
    padding: 0px 4px;
	margin: 2px;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 12px;

}
/* =============pnav: pmdba nav ======================================================= */
.pnavbar {
	width: 100%;
	z-index: 10000;
	position: relative;
	background-color: var(--nav-bar-color);
	color: var(--nav-text-color);
	overflow: auto;
	margin:0px;
	padding:0px;
	border-style: solid;
	border-color: #004234;
	border-width: thick;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
}

.pnavbar a {
	float: left;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	padding: 4px 8px 4px 8px;  /* top right bottom left */
	color: var(--nav-text-color);
	text-decoration: none;
	font-size: 17px;
}

.pnavbar .icon {
	display: none;
}

.pnavbar a:hover {
	background-color: var(--header-color);
	color: var(--nav-text-color);
}

/* =============form modal and/or =================================================================== */

form {
    width: 100%;
    box-sizing: border-box;
}

.form-row {
    width: 100%;
    box-sizing: border-box;
}


.form-control {
	color: var(--text-color);
}

.form-container {
    max-width: 600px; /* Reduced from default */
    margin: 20px auto;
    padding: 20px;
    border: 1px solid var(--input-border-color);
    border-radius: 5px;
    background-color: var(--form-background-color);
    box-sizing: border-box;
    color: var(--text-color);
    width: 100%; /* Ensure it takes full width of parent */
}

.form-container ul {
  list-style-type: none;
  margin: 10px;
  padding: 0;
}

.form-container li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #3f9c32; /* #0099cc; // #099c36; */
  color: var(--text-color);
  list-style-type: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.form-container li:hover {
  /* background-color: #204a87; // #336b02; */
}

.form-container input {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #232323; /* #0099cc; // #099c36; */
  color: var(--text-color);
}

.form-input input,
.form-input textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    background-color: var(--input-background-color);
    color: var(--text-color);
    max-width: 100%; /* Ensures inputs don't overflow */
}

.form-item {
	display: grid;
  	/* background-color: #fffff; */
	/* background-color: #f80f41; (/)
  	border: none;
	padding: 0px 16px;  /* 2: T&B, R&L...  4: top right bottom left */
  	font-size: 1.2em;
  	text-align: left;
}

.form-item-nest1 {
	display: grid;

  	grid-template-columns: 1fr; /* 1fr = 1 column in nested grid item */
  	border: none;
	padding: 4px;
  	font-size: 1em;
  	text-align: left;
}
.form-item-nest2 {
	display: grid;
  	grid-template-columns: .5fr 1.5fr;
  	border: none;
	padding: 4px;
  	font-size: 1em;
  	text-align: left;

}

.form-item-nest3 {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}

.form-item-nest4 {
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr 1fr;
  	border: none;
	padding: 4px;
  	font-size: 16px;
  	text-align: left;
}

/* =========menu div ================*/

menu div {
	width: 100%;
	padding: 0px;
	position: relative;
	margin: 0px;
	background: #3f9c32;
	cursor: pointer;
	color: var(--text-color);
	font-size: 14px;
}

menu a {
  	color: var(--nav-text-color);
	font-family: Arial, Helvetica, sans-serif;
  	text-decoration: none;
}

menu a:visited {
  	color: var(--nav-text-color);
  	text-decoration: none;
}

menu a:hover {
	color: var(--nav-text-color);
	text-decoration: none;
}

menu a:focus {
	color: var(--nav-text-color);
	text-decoration: none;
}

/* =========tool menu================*/

tmenu div {
	padding: 0px;
	position: relative;
	margin: 0px;
	background: var(--background-color);
	cursor: pointer;
	color: var(--text-color);
    font-size: .6em;
}

/* =========/tool menu ================*/

menu ul {
	margin: 0px;
	padding: 0px;
	background: var(--nav-bar-color);
	list-style-type: none;
	position: relative;
	z-index: 10000;
}

menu ul li {
	display: inline-block;
	z-index: 10000;
	padding: 4px 8px 4px 8px;  /* top right bottom left */
  	color: var(--nav-text-color);
	font-size: 1em;
	/* 	font-size: 16px; */
}

menu ul li a {
  padding: 4px 8px 4px 8px;  /* top right bottom left */
  color: var(--nav-text-color);
  text-decoration: none;
  display: block;
}

menu ul li:hover {
  background: var(--header-color);
}

menu ul ul {
  position: absolute;
  min-width: auto;
  background: lightgrey;
  display: none;
}

menu ul ul li {
  display: block;
  background: var(--nav-bar-color);
}

menu ul li:hover ul {
  display: block;
}

nav div {
	width: 100%;
	padding: 0px;
	position: relative;
	margin: 0px;
	background: #3f9c32;
	cursor: pointer;
	color: var(--text-color);
	font-size: 14px;
}

nav a {
  	color: var(--nav-text-color);
	font-family: Arial, Helvetica, sans-serif;
  	text-decoration: none;
}

nav a:visited {
  	color: var(--nav-text-color);
  	text-decoration: none;
}

nav a:hover {
	color: var(--nav-text-color);
	text-decoration: none;
}

nav a:focus {
	color: var(--nav-text-color);
	text-decoration: none;
}

nav ul {
	margin: 0px;
	padding: 0px;
	background: var(--nav-bar-color);
	list-style-type: none;
	position: relative;
	z-index: 10000;
}

nav ul li {
	display: inline-block;
	z-index: 10000;
	padding: 4px 8px 4px 8px;  /* top right bottom left */
  	color: var(--nav-text-color);
	font-size: 1em;
	/* 	font-size: 16px; */
}

nav ul li a {
  padding: 4px 8px 4px 8px;  /* top right bottom left */
  color: var(--nav-text-color);
  text-decoration: none;
  display: block;
}

nav ul li:hover {
  background: var(--header-color);
}

nav ul ul {
  position: absolute;
  min-width: auto;
  background: lightgrey;
  display: none;
}

nav ul ul li {
  display: block;
  background: var(--nav-bar-color);
}

nav ul li:hover ul {
  display: block;
}

/* wait */
.waiting { cursor: wait; }

/* Add pagination styling to match the dark theme */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 8px 12px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 30px;
    text-align: center;
}

.pagination-btn:hover {
    background-color: var(--button-hover-background-color);
    color: var(--text-color);
    border-color: var(--button-hover-background-color);
}

.pagination-btn.active {
    background-color: var(--button-background-color);
    color: var(--text-color);
    border-color: var(--button-background-color);
}

.pagination-btn:disabled {
    background-color: var(--input-background-color);
    color: var(--secondary-text-color);
    cursor: not-allowed;
    border-color: var(--input-border-color);
}

.pagination-btn.prev,
.pagination-btn.next {
    padding: 8px 16px;
}

/* Records per page selector */
.records-per-page {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 6px;
    margin: 4px 4px;
    flex-wrap: wrap;
}

.records-per-page label {
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
}

.records-per-page select {
    background-color: var(--input-background-color);
    color: var(--text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.records-per-page select:hover {
    background-color: var(--button-hover-background-color);
}

/* Center the heading with table */
.heading-container {
    text-align: center;
    margin-bottom: 20px;
}

/* =============ADDED STYLES FOR DOC_FILE_CLIPBOARD.PHP ===================== */

/* Fix for button width */
.but-success {
    display: inline-block;
    white-space: nowrap;
}

/* Custom line numbers styles */
.editor-wrapper {
    position: relative;
    width: 100%;
    margin-top: 10px;
    background-color: var(--input-background-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    overflow: hidden;
}

.line-numbers-container {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background-color: var(--input-background-color);
    border-right: 1px solid var(--input-border-color);
    text-align: right;
    padding: 0 5px;
    overflow: hidden;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    user-select: none;
    box-sizing: border-box;
    /* Fix for text alignment */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.line-number {
    /* Ensure line numbers are properly aligned */
    line-height: 1.5;
    padding: 0;
    margin: 0;
    height: 1.5em; /* Match textarea line height */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Remove any default list styling */
    list-style: none;
}

.textarea-container {
    position: relative;
    margin-left: 40px;
}

.textarea-container textarea {
    background-color: var(--input-background-color);
    color: var(--text-color);
    border: none;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
    resize: vertical;
    /* Ensure proper line height */
    line-height: 1.5;
    /* Match the padding of line numbers container */
    padding-left: 10px;
}

/* =============ADDED STYLES FOR FILTER and SORT===================== */
/* ... (your existing CSS remains unchanged) ... */

.sort-indicator {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.8em;
    color: var(--secondary-text-color);
}

.sort-indicator.asc::after {
    content: "▲";
}

.sort-indicator.desc::after {
    content: "▼";
}

/* Filter Buttons Styling */
.filter-container {
    text-align: center;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.filter-buttons {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 6px 12px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 80px;
}

.filter-btn.active {
    background-color: var(--button-background-color);
    color: var(--text-color);
    border-color: var(--button-background-color);
}

.filter-btn:hover:not(.active) {
    background-color: var(--button-hover-background-color);
    color: var(--text-color);
    border-color: var(--button-hover-background-color);
}

.current-filter {
    color: var(--secondary-text-color);
    font-style: italic;
    font-size: 13px;
    padding: 6px;
}

/* =============ADDED PAGINATION STYLES FOR SPREADSHEET===================== */

/* =============ADDED PAGINATION STYLES FOR SPREADSHEET===================== */
.edit-input {
    display: none;
    width: 100%;
}
.editable-cell {
    position: relative;
}
.display-value {
    cursor: pointer;
}
.data-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
    background-color: var(--background-color);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
}
.data-controls label {
    color: var(--text-color);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.data-controls select {
    background-color: var(--input-background-color);
    color: var(--text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    padding: 6px 10px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    min-width: 80px;
}
.data-controls select:hover {
    background-color: var(--button-hover-background-color);
    border-color: var(--button-hover-background-color);
}
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
    flex-wrap: wrap;
    padding: 10px;
    background-color: var(--background-color);
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
}
.pagination .but {
    padding: 8px 12px;
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--input-border-color);
    border-radius: 4px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    min-width: 35px;
    text-align: center;
    transition: all 0.2s ease;
    margin: 0 2px;
}
.pagination .but:hover:not(.disabled):not(.current) {
    background-color: var(--button-hover-background-color);
    color: var(--text-color);
    border-color: var(--button-hover-background-color);
}
.pagination .but.current {
    background-color: var(--button-background-color);
    color: white;
    font-weight: bold;
    border-color: var(--button-background-color);
}
.pagination .but.disabled {
    background-color: var(--input-background-color);
    color: var(--secondary-text-color);
    cursor: not-allowed;
    border-color: var(--input-border-color);
    opacity: 0.6;
}
.pagination .but.previous,
.pagination .but.next {
    background-color: var(--button-background-color);
    color: white;
    border-color: var(--button-background-color);
}
.pagination .but.previous:hover,
.pagination .but.next:hover {
    background-color: var(--button-hover-background-color);
    border-color: var(--button-hover-background-color);
}
/* =============END PAGINATION STYLES===================== */
* {
    color: inherit;
}