/* ----------------------
    GLOBAL THEME VARIABLES
----------------------- */
:root{
    --user-borderRadiusMax: 50px;
    --user-borderRadiusMin: 25px;
    --user-lightColor: white;
    --user-darkColor:#092B4D;
    --user-hoverLight: #FFC000;
    --user-fontColor: #092B4D;
    --user-border: var(--user-darkColor);
    --sidebar-width: 75px;
    --subMenuBar-height: 3.2vh;
}

*:not(.material-icons) {
    font-family: Arial, Helvetica, sans-serif;
}

* {
    background-color: var(--user-lightColor);
    color: var(--user-fontColor);
}


/* ----------------------
      PAGE BASICS
----------------------- */
body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

#displayTableResults {
    padding-top: clamp(12px, 2%, 40px);
}

/* ─────────────────────────────────────────────
    CHATGPT STYLE LEFT SIDEBAR (NEW NAVBAR)
────────────────────────────────────────────── */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);                       /* Always 75px wide */
    height: 0;                                         /* Hidden: collapses upward */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    background-color: var(--user-lightColor);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    padding-top: 0;
    transition: height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

/* Sidebar slides DOWN from top when opened */
body.sidebar-open #sidebar {
    height: 100vh;
    overflow: visible;                                 /* Allow tooltips to escape */
    padding-top: 1rem;
}

/* Override the global * rule — make all sidebar children transparent
   so the dark #sidebar background shows through */
#sidebar * {
    background-color: transparent;
}

/* Ensure icons are visible (white on dark) */
#sidebar .sidebarItem i {
    color: var(--user-darkColor);
}
/* Logo */
#sidebarHeader {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}



#sidebarLogo {
    position: relative;
    height: 38px;
    width: 38px;
    border-radius: 50%;
    object-fit: cover;
    filter: brightness(0.95);
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
}

body.sidebar-open #sidebarLogo {
    opacity: 1;
}

/* Tooltip */
#sidebarHeader::after {
    content: attr(data-label);
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);

    background-color: var(--user-darkColor);
    color: var(--user-hoverLight);

    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.85rem;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 101;

    transition: opacity .2s ease, transform .2s ease;
}

/* Show on hover */
#sidebarHeader:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(4px);
}


#sidebarMenu {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
    flex-grow: 1;     /* Pushes bottom menu down */
}

.sidebarItem {
    position: relative;
}

/* Tooltip — floats to the right of the sidebar item */
.sidebarItem::after {
    content: attr(data-label);
    position: fixed;                                   /* Fixed so it escapes overflow */
    left: calc(var(--sidebar-width) + 8px);            /* Just right of sidebar edge */
    top: auto;
    transform: translateY(-50%);

    background-color: var(--user-darkColor);
    color: var(--user-hoverLight);

    padding: 6px 12px;
    border-radius: 6px;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: 500;

    opacity: 0;
    pointer-events: none;
    z-index: 101;

    transition: opacity .18s ease;
}

/* Show tooltip on hover */
.sidebarItem:hover::after {
    opacity: 1;
}

.sidebarItem {
    width: 100%;
    min-height: 36px;
    padding: 6px 0;
    display: flex;
    align-items: center;
    justify-content: center;                           /* Horizontally centered */
    cursor: pointer;
    border-radius: 8px;
    color: var(--user-fontColor);
    transition: background-color .2s ease, color .2s ease;
}

.sidebarItem i {
    font-size: 1.3rem;
    min-width: 28px;
    text-align: center;
 
    height: 28px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .25s ease-in-out;
    pointer-events: none !important; 
}

.sidebarItem:hover i {
    background-color: var(--user-darkColor) !important;
    color: var(--user-hoverLight) !important;
    transform: scale(1.5);
}


/* Active Menu Highlight */
.sidebarItem.active i{
    background-color: var(--user-hoverLight);   /* dark yellow tone */
    color: var(--user-darkColor); 
    transform: scale(1.5);
}

#sidebarBottom {
    width: 100%;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

}


.bottomItem {
    position: relative;
    opacity: 0.9;
}

.bottomItem::after {
    content: attr(data-title);
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%);
    background: var(--user-darkColor);
    color: var(--user-hoverLight);
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.bottomItem:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(4px);
}


/* ─────────────────────────────────────────────
    SLIDE-IN RIGHT PANEL (ChatGPT style)
────────────────────────────────────────────── */
#slidePanel {
    position: fixed;
    top: 0;
    right: -30vw;
    width: 30vw;
    height: 100vh;
    background-color: var(--user-lightColor);
    box-shadow: -8px 0px 25px rgba(0,0,0,0.4);

    transition: right .35s ease;
    z-index: 102;
    display: flex;
    flex-direction: column;
}

#slidePanel.open {
    right: 0;
}

#slidePanelHeader {
    background-color: var(--user-darkColor);
    color: var(--user-hoverLight);

    padding: 1rem;
    font-size: 1.3rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#slidePanelBody {
    padding: 1rem;
    overflow-y: auto;
}

#slidePanelClose {
    cursor: pointer;
    font-size: 2rem;
}


/* ─────────────────────────────────────────────
    TOP SUBMENU BAR (Your original)
────────────────────────────────────────────── */
#subMenuBar {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--subMenuBar-height);
    line-height: var(--subMenuBar-height);
    width: 100%;
    background: linear-gradient(90deg, #092B4D 0%, var(--user-darkColor) 70%);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    overflow: visible;
    transition: left 0.28s ease-in-out, width 0.28s ease-in-out;
    z-index: 100;
}

body.sidebar-open #subMenuBar {
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
}


/* SubMenu Items */
.SubMenu {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  float: right;
  width: fit-content; /*3.8vw;*/
  height: 100%;
  border-radius: 4vh;
  margin: 0 4px; /*0 0.3vw;*/
  padding: 0 6px;
  cursor: pointer;
  background-color: transparent;
  transition: all .2s ease-in-out;
}
/*
.SubMenu {
  padding: 0 6px;
  margin: 0 2px;
}*/

/* Icon: no background, white on dark bar */
.SubMenu i {
  display: block;
  font-size: 1.5rem;
  background-color: transparent !important;
  color: var(--user-lightColor);
  padding: 2px;
  border-radius: 6px;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

/* Hover: contrast yellow bg on icon, dark icon */
.SubMenu:hover i {
  background-color: var(--user-hoverLight) !important;
  color: var(--user-darkColor) !important;
  transform: scale(1.15);
}

/* Tooltip — floats below the bar */
.SubMenu .icontext {
  display: block;
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);

  background-color: var(--user-darkColor);
  color: var(--user-hoverLight);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.02em;

  opacity: 0;
  pointer-events: none;
  z-index: 101;
  transition: opacity 0.15s ease;
}

.SubMenu:hover .icontext {
  opacity: 1;
}



@keyframes slideIn {
    from { left: -100%; }
    to   { left: 0%; }
}


/* ─────────────────────────────────────────────
    MAIN CONTENT AREA
────────────────────────────────────────────── */
#containerAll {
  position: fixed;
  top: var(--subMenuBar-height);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--subMenuBar-height));
  overflow: auto;
  transition: left 0.28s ease-in-out, width 0.28s ease-in-out;
}

body.sidebar-open #containerAll {
  left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
}

/* When sidebar expands */



/* ─────────────────────────────────────────────
   YOUR REMAINING SYSTEM CSS (unchanged)
────────────────────────────────────────────── */

/* visitorData */
#visitorData {
  float: left;
  max-width: 22vw;
  background-color: transparent;
  color: var(--user-hoverLight);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: var(--subMenuBar-height);
  padding-left: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#submenuSwitch {
  background-color: darkgreen;
}

#switchBtn {
  color: white;
  background-color: darkgreen;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 2em;
}

/* (rest of your table, calendar, popup, inputs, flex, button CSS remains exactly as-is) */




/* Shift main content so it doesn’t overlap */
#mainContent {
  margin-left: 0;
  padding: 1rem;
}

/* Alternating SubMenu colors removed — all icons use unified transparent style */



#webSocketDisplay{
      position: fixed;
      top: 0;
      left: 0;
      height: var(--subMenuBar-height);
      line-height: var(--subMenuBar-height);
      width: 100%;
      pointer-events: none;

      background-color: rgba(0, 0, 0, 0.55);  
      color: rgba(9, 43, 77, 0.04);
      font-size: 0.8em;
      border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
      text-align: center;
      display: none;          
      opacity: 0;             
      transition: opacity 0.4s ease;
      z-index: 105;        
      overflow: hidden;
}

@media (max-width: 768px) {
  .SubMenu {
    width: 10vw; 
    border-radius: 5vh; 
  }
}

@media (max-width: 768px) {
  .pageButton {
    width: 10vw; 
    border-radius: 5vh; 
  }
}

#offbutton {
    cursor: pointer;
    color: red;
    font-size: 3em;
  }

  
  #onbutton {
    cursor: pointer;
    color: green;
    font-size: 3em;
  }

  button, input {
    padding: 0.25%;
    border-radius: var(--user-borderRadiusMin);
    resize: vertical;
    background-color: var(--user-lightColor);
    color: var(--user-darkColor);
  }
  
  button {
    border: 1px solid var(--user-darkColor);
  }
  
  input {
    border: 1px solid transparent;
  }

  button:hover, input:hover {
    color: var(--user-hoverLight);
    background-color: var(--user-darkColor);
    cursor: pointer;
  }

/* Padding */
.pad1 {
  padding-top: 1%;
}

.pad1both {
  padding-top: 1%;
  padding-bottom: 1%;
}

.padding {
  padding-top: 2%;
  padding-bottom: 2%;
}





/* Buttons */
input[type="button"] {
  border-radius: var(--user-borderRadiusMin);
  border: none;
  color: var(--user-lightColor);
  background-color: var(--user-darkColor);
  padding: 2%;
}



input[type="button"]:hover {
  text-transform: uppercase;
  color: var(--user-hoverLight);
  cursor: pointer;
}

/* Input Fields */
.inputinform {
  padding: 0;
  margin: 1%;
  text-align: center;
  border: 1px solid var(--user-darkColor);
  border-radius: var(--user-borderRadiusMin);
  resize: vertical;
  background-color: var(--user-lightColor);
  color: var(--user-darkColor);
}

/* Select */
select {
  border: 1px solid var(--user-darkColor);
  padding: 0.2%;
  border-radius: var(--user-borderRadiusMax);
  margin: 1%;
}

select:hover {
  border: 1px solid var(--user-darkColor);
  background-color: var(--user-darkColor);
  color: var(--user-hoverLight);
  padding: 0.2%;
  border-radius: var(--user-borderRadiusMax);
  margin: 1%;
}

select option:checked {
  background-color: var(--user-darkColor);
  color: var(--user-hoverLight);
  box-shadow: 0 0 10px 100px #092B4D inset;
}

/* Links */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* Table */

/* Unordered List */
ul.circle {
  list-style-type: circle;
  list-style-position: outside;
}

ul li span {
  margin-left: 1.5%;
}

/* Upload Enabler */
#Upload_Enabler:hover i {
  color: var(--user-hoverLight);
  background-color: var(--user-darkColor); /* Assuming you have defined this custom property */
  cursor: pointer;
}

/* Close Enabler */
#Close_Enabler:hover i {
  color: red;
  background-color: black;
  cursor: pointer;
}

#Close_Enabler:hover {
  background-color: black;
  cursor: pointer;
}

  
  table {
    border-collapse: collapse;
    margin: 1% 1% 1% 0%; 
    width: 100vw;
    padding: 1%;
  }

  td, th {
    border: var(--user-darkColor) .1px dotted;
    border-collapse: collapse;
  }

  th {
    font-size: 1pc;
    text-transform: initial;
    background-color: var(--user-darkColor);
    color: var(--user-lightColor);
    width: min-content;
  }
  
  td {
    font-size: .8pc;
    word-wrap: normal;
    width: min-content;
  }
  
  tr:hover {
    cursor: pointer;
  }
  
  /* Data table customization */
  div.dt-buttons button {
    border-radius: 50px;
    margin: 0 6px 0 0;
    border: 1px solid var(--user-darkColor);
    background-color: var(--user-lightColor);
    color: var(--user-darkColor);
    display: inline-block;
  }
  
  div.dt-buttons button span {
    background-color: var(--user-lightColor);
    color: var(--user-darkColor);
  }
  
  div.dt-buttons button:hover {
    background-color: var(--user-darkColor);
    color: var(--user-hoverLight);
  }
  
  div.dt-buttons button:hover span {
    background-color: #092B4D;
    color: var(--user-hoverLight);
  }
  
  div.dt-button-collection {
    width: 375px;
    background-color: var(--user-darkColor);
    color: var(--user-lightColor);
    border: 1px solid var(--user-darkColor);
    z-index: 102;
  }
  
  div.dt-button-collection button {
    width: 40%;
  }
  
  div.dt-button-collection button.buttons-page-length {
    width: 50%;
  }
  
  div.dt-button-collection h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 100;
    border-bottom: 1px solid #092B4D;
    font-size: 1em;
  }
  
  div.dt-button-collection h3.not-top-heading {
    margin-top: 10px;
  }
  
  div[role=menu] {
    background-color: var(--user-darkColor);
  }
  
  button.dt-button.buttons-columnVisibility.active {
    background-color: var(--user-hoverLight);
  }
  
  button.dt-button.buttons-columnVisibility.active span {
    background-color: var(--user-hoverLight);
  }
  



#submenuSwitch {
  background-color: darkgreen;
}

#switchBtn {
  color: white;
  background-color: darkgreen;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2em;
}

/* Page Button styling */
.pageButton {
  display: inline-block;
  place-items: center;
  vertical-align: middle;
  text-align: center;
  position: relative;
  float: right;
  width: 5vw;
  height: 5vh;
  line-height: 5vh;
  overflow: hidden;
  border-radius: 5vh;
  margin: 0 1vw;
  box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.pageButton i.material-icons {
  display: inline-block;
  vertical-align: middle !important;
  place-items: center;
  vertical-align: middle;
  text-align: center;
}

.pageButton .icontext {
  display: inline-block;
  vertical-align: middle !important;
  place-items: center;
  text-align: center !important;
}

.pageButton i {
  display: block;
}

.pageButton .icontext {
  display: none;
}

.pageButton:hover i {
  display: none;
}

.pageButton:hover .icontext {
  display: block;
}

.pageButton:hover {
  width: auto;
  min-width: 5vw;

}

.pageButton .icontext {
  font-size: 0.75rem;
  text-transform: initial;
  color: var(--user-darkColor);
}

/* Container styling */
.containerAll {
  position: relative;
}

/* Alert button styling */
.alert_button {
  position: relative;
  left: 0;
  padding-bottom: 1%;
  padding-top: 1%;
}

/* Icon styling in even divs within #pagedesc */
#pagedesc div:nth-child(even) .icon {
  color: var(--user-hoverLight); /* Replace with the appropriate variable */
}

/* Icon styling within even divs within #pagedesc (nested i) */
#pagedesc div:nth-child(even) .icon i {
  color: var(--user-hoverLight); /* Replace with the appropriate variable */
}

/* Hover effect for even divs within #pagedesc */
#pagedesc div:nth-child(even):hover .icon {
  background-color: var(--user-darkColor); /* Replace with the appropriate variable */
  color: var(--user-hoverLight); /* Replace with the appropriate variable */
  cursor: pointer;
}

/* Hover effect for icons within even divs within #pagedesc */
#pagedesc div:nth-child(even):hover i {
  background-color: var(--user-darkColor); /* Replace with the appropriate variable */
  color: var(--user-hoverLight); /* Replace with the appropriate variable */
  cursor: pointer;
}

/* Margin for #pagedesc and #pageinfo */
#pagedesc, #pageinfo {
  margin-left: 1%;
  margin-right: 1%;
}



/* Styling for the universal popup */
#universalpopup {
  z-index: 100000000000;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5vh;
  box-shadow: 3vw 3vw 3vw rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 20vh;
  left: 25vw;
  height: 60vh;
  width: 50vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Styling for the header of the popup */
#universalpopup #pophead {
  font-size: larger;
  text-align: center;
  font-weight: bolder;
  text-transform: uppercase;
  margin: 2vh 2vw;
  flex: 1;
}

/* Styling for the data section of the popup */
#universalpopup #popdata {
  position: relative;
  overflow: scroll;
  word-wrap: normal;
  margin: 2vh 2vw;
  flex: 9;
}

/* Hide the universal popup by default */
#universalpopup {
  display: none;
}

/* Style for Progress Tag */
progress {
  z-index: 5000000;
  position: absolute;
  top: 40vh;
  left: 15vw;
  height: 5vh;
  width: 70vw;
  border-radius: 5vh;
  box-shadow: 3vw 3vw 3vw rgba(0, 0, 0, 0.1);
}

/* ProgressBar */
progress::-webkit-progress-bar {
  background-color: var(--user-darkColor);
  border-radius: 5vh;
  padding: 2%;
}

progress::-webkit-progress-value {
  background-color: var(--user-hoverLight);
  border-radius: 5vh;
  box-shadow: 1px 1px 5px 3px rgba(255, 192, 0, 1);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background-color: var(--user-hoverLight);
  border: 5px dotted white;
}

::-webkit-scrollbar-thumb {
  background-color: var(--user-darkColor);
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}


/*Calendar related codess*/


.cal_container{
  margin-top: 2%;
  margin-left: 1%;
}

#container {
  display: inline-block;
  justify-content: middle;
}

#taskcontainer {
display: inline-block;
position: relative;
float: right; 
}

#taskheadingblank{                           
display: grid;
margin-bottom: 11vh;
}


#taskheading{
height: 5vh;
border-radius: 5vh;
line-height: 5vh;
box-sizing: border-box;
text-align: center;
color: var(--user-hoverLight);
background-color: var(--user-darkColor);    

overflow: hidden;
margin: 0 1vw;
box-shadow: 2vw 2vw 2vw rgba(0, 0, 0, 0.1);
}

#taskeventlisting{
display: grid;
gap: 15px;
margin-top: 15px;

}

#header{
display: grid;
grid-template-columns: auto auto auto auto auto; 
margin-bottom: 15px;
padding: 2%;

}

#monthDisplay{
width: Auto !important;
}

.calendarWidth{
display: grid;
grid-template-columns: auto auto auto auto auto auto auto;
gap: 15px;
margin-top: 15px;
padding: 0.7vw;
}

#weekdays .weekdayName {
padding: 0.7vw;
color: var(--user-hoverLight) !important;
background-color: var(--user-darkColor) !important;
border-radius: 15px !important;
box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1) !important;
overflow:hidden !important;
}

.day {
display: grid;
height: 7vw;
padding: 0.7vw;
width: 7vw;

cursor: pointer;
box-sizing: border-box;
background-color: var(--user-lightColor); 
box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);

}

.spandate{
  display:grid;
  place-items: center;
  grid-template-rows: auto;
  font-size: 0.5em;
  color: var(--user-lightColor); 
}










.day:hover {
  background-color : var(--user-darkColor) !important;
  color: var(--user-lightColor) !important;
  border-radius: 25px !important;
}

#impdates{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-darkColor) !important;
color: var(--user-hoverLight) !important;
}

#impdates i{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-darkColor) !important;
color: var(--user-hoverLight) !important;
}

#impdates .icontext{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-darkColor) !important;
color: var(--user-hoverLight) !important;
}


#todaysdate{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-hoverLight) !important;
color: var(--user-darkColor) !important;
}

#todaysdate i{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-hoverLight) !important;
color: var(--user-darkColor) !important;
}

#todaysdate .icontext{
vertical-align: middle !important;
place-items: center;
text-align: center !important;
background-color : var(--user-hoverLight) !important;
color: var(--user-darkColor) !important;
}

.day + #currentDay {
border-radius: 15px !important;
background-color: var(--user-hoverLight) !important;
color: var(--user-darkColor) !important;
}

.event {
font-size: 10px;
padding: 3px;
background-color: var(--user-darkColor) !important;
color: var(--user-lightColor) !important;
border-radius: 5px;
width: 55px;
max-height: 55px;
overflow: hidden;
}

.paddingCal {
cursor: none;
background-color: var(--user-lightColor) !important;
box-shadow: none !important;
}

.paddingCal:hover {
cursor: none;
background-color: var(--user-lightColor) !important;
box-shadow: none !important;
}

#fortablemis{
  position: absolute;
  display:flex;
  justify-content:center;
}


#containerforpopup, #taskview{
    position: absolute;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: white;
    z-index: 200000000000000000;
}
 
#newEventModal, #tv_Modal {
    margin: auto;
    z-index: 20;
    padding: 25px;
    background-color: var(--user-lightColor);
    box-shadow: 0px 0px 3px var(--user-darkColor);
    border-radius: 5px;
    height: fit-content;
}

#eventTitleInput, #eventsubject, #tv_subject, #tv_desc {
padding: 10px;
width: 100%;
box-sizing: border-box;
margin-bottom: 25px;
border-radius: 3px;
outline: none;
border: none;
box-shadow: 0px 0px 3px gray;
}

#eventTitleInput.error {
border: 2px solid red;
}

#modalBackDrop {
display: none;
top: 0px;
left: 0px;
z-index: 10;
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(0,0,0,0.8);
}

@media (max-width: 768px) {
.hide-on-small-screen {
  display: none;
}
}

#blankCover{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--user-lightColor);
  z-index: 100000000000;
  display: none;
}

#clickedDataDisplay{
  position: fixed;
  margin: auto;
  z-index: 200000000000;
  display: grid;
  place-items: center;
  min-width: 30vw;
  max-width: fit-content;
  max-height: 90vh;
  height: fit-content;
  background-color: var(--user-lightColor);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); 
  overflow: auto;
}

#clickedDataDisplay .close-button {
  position: relative;
  top: 10px;
  right: 10px;
  cursor: pointer;
  margin-right: 1%;
  margin-left: auto;
  padding: 0% 2%;
  border: 1px solid var(--user-darkColor);
  border-radius: 5px;
  background-color: var(--user-darkColor);
  color: var(--user-hoverLight);
  font-weight: bolder;
  text-transform: uppercase;
}




.clickedDataDisplay{
  margin-top: 5%;
  margin-bottom: 5%;
  display: grid;
  grid-template-columns: 2fr 3fr; 
  align-items: center; /* Vertically align the items */
  background-color: var(--user-lightColor);
}

.clickedDataDisplay label{
  background-color: var(--user-lightColor);
  color: var(--user-darkColor);
  font-weight: bolder;
  margin-left: 5%;
  margin-right: 2%;
}

.clickedDataDisplay input{
  margin-right: 5%;
  border: 1px solid var(--user-darkColor);
  border-radius: 25px;
}


.clickedDataSignoff{
  margin-top: 5%;
  margin-bottom: 5%;
  display: grid;
  grid-template-columns: 4.5fr 1fr 4.5fr; 
  align-items: center; 
}

#singleSubmit, #singleReset{
  border: none;
  color: var(--user-lightColor);
  background-color: var(--user-darkColor);
  padding: 5%;
  border-radius: 25px;
}

#singleSubmit:hover, #singleReset:hover{
  text-transform:uppercase;
  background-color: var(--user-darkColor);
  color: var(--user-hoverLight);
  font-weight: bolder;
}

.sand-timer {
  width: 80px;
  height: 160px;
  border: 1px solid #092B4D;
  position: relative;
  overflow: hidden;
}

.sand {
  width: 100%;
  height: 50%;
  background-color: #FFC000; /* Sand color */
  position: absolute;
  bottom: 0;
  left: 0;
  animation: fall 60s linear infinite;
}

@keyframes fall {
  0% { height: 0; }
  100% { height: 50%; }
}


.inputBoarder input {
  border: 1px solid var(--user-border);
  border-radius: 25%;

}



#tablePopUP {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1000000000000000000000000000000000000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--user-lightColor);
  color: var(--user-darkColor);
}


.disabled {
  background-color: rgba(9, 43, 77, 0.15); 
  color: #092B4D; 
  cursor: not-allowed; 
}


.flex-container {
  display: flex;
  flex-direction: column;
}

.stacked {
  flex-direction: row;
}

.chosen-container-single .chosen-single {
 /* background-color: rgba(9, 43, 77, 0.04);  
  color: #092B4D;                
  border: 1px solid rgba(9, 43, 77, 0.15);    */ 
  border-radius: 5px;         /* Rounded corners */

}

.chosen-single > span {
   margin-left: 20px;        
 
}

/* Main container styling for row flex layout */
.main-flex-container-row {
  width: 100vw;
  padding-top: clamp(12px, 2%, 40px);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  flex-direction: row;
  justify-content: space-evenly;

  align-items: flex-start;         /* align items at top */
  align-content: flex-start;       /* align multiple rows toward top */

}

.main-flex-container-col {
  /* Was 100vw. This column sits inside #containerAll, which is the sidebar's width narrower
     than the window, so 100vw pushed every full-width box ~85px past the visible edge. */
  width: 100%;
  padding-top: clamp(12px, 2%, 40px);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  flex-direction: column;
  align-items: flex-start;   
}

/* Button styles */
.show-buttons {
  margin: 2%;
  padding: 1% 4%;
  border: 1px solid white;
  border-radius: 25px;
  box-shadow: 0 1vw 1vw rgba(0, 0, 0, 0.1);
  display: inline-block;
  place-items: center;
  vertical-align: middle;
  text-align: center;
}

.scrolling-containers {
  overflow: scroll;
  scroll-behavior: smooth;
}


.highlightSuccess {
  background-color: darkgreen !important;
  color: white !important;
}


.selected-row {
  background-color: var(--user-hoverLight);
  color: var(--user-darkColor);
}


/* Styling for the Toggle Button */
.toggle-btn {
    cursor: pointer;
    font-size: 1.5rem; /* Make it easily clickable */
    font-weight: normal;
    color: #092B4D;
    transition: color 0.2s;
    margin-left: 10px; /* Space between heading text and button */
}

.toggle-btn:hover {
    color: #092B4D;
}

.flex-element.collapsed {
    height: auto !important; 
    max-height: none !important;
    overflow: hidden; 
}

/* Ensure the heading container has a defined background for clarity */
.statusheading-container {
    background-color: rgba(9, 43, 77, 0.04); 
    border-bottom: 1px solid rgba(9, 43, 77, 0.15);
}

.flex-element {
  box-sizing: max-content;
  min-width: 350px;
/*  margin: 0;*/
}

/* Auto-fit table columns based on content */
table.fit-flex-element {
  width: max-content !important;   /* shrink to content */
  min-width: 100% !important;      /* but don't become smaller than container */
  max-width: 100% !important;
  table-layout: auto !important;
}

table.fit-flex-element th,
table.fit-flex-element td {
  width: auto !important;
  white-space: nowrap;
}

.tableWrap {
  width: 100%;
  overflow-x: auto;
}

/* Large and secondary element styles */
.full-flex-element { width: fit-content; max-width: 100%;}
.large-flex-element { width: fit-content; max-width: 60vw;}
.medium-flex-element { width: fit-content; max-width: 45vw;}

.small-flex-element { width: fit-content; max-width: 30vw;}
.secondary-flex-element { width: fit-content; max-width: 30vw;}

.default-flex-element { width: 90%; max-width: 90vw;}

/* ── Dashboard boxes (addFlexContainer / popUpContainer → prepareDashboardBox, Sep 2026) ──
   Draggable by the title bar, resizable from every edge and corner, stretchable past the
   starting size. The box never scrolls (that clipped jQuery UI's resize handles, which sit
   half outside it); its one scroll area, .dmc-scroll, does, and fills the box as it is
   resized. overflow is !important because callers set overflow-x inline on the box. */
/* align-items: the box also carries .show-buttons (place-items:center), which would centre the
   scroll area at its content width instead of stretching it to the box, so wide tables spilled. */
.dmc-box { overflow: visible !important; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; }
.dmc-box.full-flex-element { width: calc(100% - 20px); }          /* 10px margin each side */
.dmc-box > .heading-row { flex: none; cursor: move; }
.dmc-box > .heading-row .header-actions,
.dmc-box > .heading-row .header-actions * { cursor: pointer; }
.dmc-box > .dmc-scroll { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; }
.dmc-box > .dmc-scroll.dmc-noscroll { overflow: hidden; }
.dmc-box > .ui-resizable-handle { background: transparent; }       /* keep the border visible */
/* A table fills the box (the box's 1% padding is the gap to its border); a wider table
   scrolls sideways inside its own wrapper instead of pushing the box out. */
.dmc-scroll > .dataTables_wrapper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; overflow-x: auto; }
.dmc-scroll table.dataTable { width: 100% !important; }


.fit-flex-element {
  width: fit-content;     /* table becomes as wide as its content */
  table-layout: auto;     /* columns size based on content */
  border-collapse: collapse;
}

.fit-flex-element th,
.fit-flex-element td {
  white-space: nowrap;    /* don't break words */
}



/* HEADER ROW (Modern, Clean, Theme-Matching) */
.heading-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    background-color: var(--user-darkColor);   /* Deep Blue */
    color: var(--user-hoverLight);             /* Accent Yellow */

    padding: 5px 7px;
    border-radius: 20px 20px 0 0;              /* Soft top rounding */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


/* Push actions to the right */
.header-actions {
    background: var(--user-darkColor);
    margin-left: auto;
    display: flex;
    gap: 8px;   /* space between buttons */
}

/*
.header-actions {
    align-items: center;
}

.header-actions .closeElement,
.header-actions .removeElement {
    margin-right: 0;   
}

*/


/* Close Button (super clean, circular, modern) */
.closeElement, .removeElement {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--user-hoverLight);  /* Yellow button */
    color: var(--user-darkColor);              /* Contrast icon */

    border-radius: 50%;                        /* Circular button */
    margin-right: 12px;
    cursor: pointer;

    transition: 0.25s ease-in-out;
    box-shadow: 0 0.35vw 0.35vw rgba(0,0,0,0.25);
}

/* Hover effect (reversed theme – classy) */
.removeElement:hover, .closeElement:hover {
    background-color: var(--user-darkColor);
    color: var(--user-hoverLight);
    transform: scale(1.1);
}

.removeElement {
    margin-left: auto;
}

/* Icon inside */
.removeElement i.material-icons, .closeElement i.material-icons {
    font-size: 1.35rem !important;
    font-weight: bold;
    background-color: transparent !important;
    color: inherit !important;
}

/* Status Heading text inside the row */
.statusheading {
    font-size: 1rem;
    font-weight: bolder;
    color: var(--user-hoverLight);  /* Yellow text */
    background-color: transparent !important;
}



/* =========================================================
   manual.css — STEP 1 : Layout & UX
   ========================================================= */

.upload-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
}

/* ---------- HEADER (10%) ---------- */
.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- CENTER (80%) ---------- */
.upload-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.drop-zone {
  border: 2px dashed rgba(9, 43, 77, 0.15);
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.drop-zone:hover {
  background: rgba(9, 43, 77, 0.04);
}

.drop-inner .drop-icon {
  font-size: 28px;
}

.drop-text {
  font-weight: 500;
  margin-top: 6px;
}

.drop-subtext {
  font-size: 12px;
  color: #092B4D;
}

/* ---------- FOOTER (10%) ---------- */
.upload-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(9, 43, 77, 0.15);
  padding-top: 8px;
}


.footer-right {
  display: flex;
  align-items: center;
  gap: 8px;              /* spacing between dropdowns */
}

.footer-right select {
  min-width: 180px;
  width: auto;
}

/* ---------- QUEUE PLACEHOLDER ---------- */
.upload-queue {
  margin-top: 10px;
}


#importBtn:disabled {
  background: lightgray;
  color: #092B4D;
  cursor: not-allowed;
  opacity: 0.7;
}

#importBtn:active:not(:disabled) {
  transform: scale(0.98);
}

#importBtn:hover:not(:disabled) {
  filter: brightness(1.1);
}

#importBtn {
  background: var(--user-darkColor);
  color: var(--user-hoverLight);
  cursor: pointer;
}


.upload-queue {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.queue-item {
  position: relative;
  background: rgba(9, 43, 77, 0.04);
  border-radius: 6px;
  padding: 6px 8px;
  overflow: hidden;
  cursor: grab;
}

.queue-item:active {
  cursor: grabbing;
}

.queue-item.ui-sortable-helper {
  opacity: 0.8;
  background: rgba(9, 43, 77, 0.15);
}

.queue-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #2e7d32;
  width: 0%;
  z-index: 0;
}

.queue-label {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.queue-filename {
  font-size: 13px;
  cursor: pointer;
}

.queue-actions span {
  margin-left: 8px;
  cursor: pointer;
  font-size: 14px;
}

.queue-item.paused .queue-progress {
  background: #092B4D;
}


/* ─────────────────────────────────────────────
   SIDEBAR TOGGLE BUTTON & OVERLAY
────────────────────────────────────────────── */

#sidebarToggle {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--subMenuBar-height);
    width: calc(var(--subMenuBar-height) * 1.6);
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    padding: 0;
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease;
    outline: none;
}

#sidebarToggle:hover {
    background: rgba(255,255,255,0.1);
    color: var(--user-hoverLight);
}

#sidebarToggle i {
    font-size: 1.15rem;
    background: transparent !important;
    color: inherit !important;
}

/* Overlay removed — sidebar closes via hamburger or close button */
#sidebarOverlay {
    display: none;
}

/* Sidebar close button — top-right corner inside sidebar */
#sidebarClose {
    position: absolute;
    top: 6px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0.55;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 105;
}

#sidebarClose i {
    font-size: 0.9rem;
    background-color: transparent !important;
    color: var(--user-darkColor) !important;
    pointer-events: none;
}

#sidebarClose:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.08);
}


/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — added 2026-05-30 (audit Stage 6, Part 2)
   Breakpoints per CLAUDE.md prompt: 480 / 540 / 600 / 768 / 900 / 1024 / 1025+
   Covers findings F1 (flex container reflow), F2 (input zoom), F3 (tap
   targets), F5 (modals), F7 (sidebar slide-in). Theme strictly #FFFFFF /
   #092B4D / #FFC000.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── ≤1024 : small-laptop / iPad-landscape ──────────────────────────────── */
@media (max-width: 1024px) {
    .large-flex-element                          { max-width: 80vw; }
    .medium-flex-element                         { max-width: 60vw; }
    .small-flex-element,
    .secondary-flex-element                      { max-width: 48vw; }
}

/* ─── ≤900 : tablet-landscape ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .medium-flex-element                         { max-width: 90vw; }
    .small-flex-element,
    .secondary-flex-element                      { max-width: 90vw; }
}

/* ─── ≤768 : tablet-portrait ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* F1 — collapse every card to full width */
    .full-flex-element,
    .large-flex-element,
    .medium-flex-element,
    .small-flex-element,
    .secondary-flex-element,
    .default-flex-element {
        width: 100%;
        max-width: 100%;
    }

    /* F2 — prevent iOS zoom-on-focus by enforcing ≥16px inputs */
    input,
    select,
    textarea,
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="date"] {
        font-size: 16px !important;
    }

    /* F3 — minimum 44×44 tap targets */
    .sidebarItem                                 { min-height: 44px; }
    #sidebarToggle                               { min-width: 44px; min-height: 44px; }
    #sidebarClose                                { width: 44px; height: 44px; }
    #sidebarClose i                              { font-size: 1.1rem; }
    button,
    .btn,
    input[type="button"],
    input[type="submit"]                         { min-height: 44px; padding: 10px 14px; }

    /* F5 — modals / popups go full-screen ≤768 */
    #clickedDataDisplay {
        min-width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
    }
    #universalpopup                              { padding: 5% 8%; }
    #universalpopuphead,
    #universalpopuphead2 {
        margin-top: 5% !important;
        font-size: 1rem;
    }

    /* F7 — sidebar slides in/out off-canvas, with tap-to-close overlay */
    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    body.sidebar-open #sidebar {
        transform: translateX(0);
    }
    body.sidebar-open #sidebarOverlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(9, 43, 77, 0.45);
        z-index: 99;
    }
    #containerAll,
    body.sidebar-open #containerAll {
        left: 0 !important;
        width: 100% !important;
    }
    body.sidebar-open #subMenuBar {
        left: 0 !important;
        width: 100% !important;
    }
}

/* NOTE: Earlier draft hid #sidebarToggle at ≥769px on the assumption the
   sidebar would be persistently visible on desktop. The sidebar is actually
   height:0 by default and opens ONLY via the hamburger — hiding the toggle
   left the sidebar unreachable on desktop. Rule removed. */

/* ─── ≤600 : phablet / small tablet ─────────────────────────────────────── */
@media (max-width: 600px) {
    .heading-row                                 { flex-wrap: wrap; }
    /* DataTables export-buttons row stacks on phablet */
    .dt-buttons                                  { flex-wrap: wrap; gap: 4px; }
}

/* ─── ≤540 : large phone ────────────────────────────────────────────────── */
@media (max-width: 540px) {
    body                                         { font-size: 14px; }
    h1                                           { font-size: 1.25rem; }
    h2                                           { font-size: 1.1rem; }
    h3, h4                                       { font-size: 1rem; }
}

/* ─── ≤480 : phone (smallest tier) ──────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --sidebar-width: 100vw;
        --user-borderRadiusMax: 12px;
        --user-borderRadiusMin: 8px;
    }
    /* Tables: enable horizontal scroll when DataTables responsive plugin
       can't collapse further (e.g. legacy plain tables). */
    .tableWrap,
    .dataTables_wrapper                          { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ════════════ END RESPONSIVE LAYER ════════════════════════════════════════ */