/* Mobile-First Fluid styles.css */
:root {
  /* Spacing */
  --spacing-xs: 0.5rem;   /* 8px */
  --spacing-sm: 1rem;     /* 16px */
  --spacing-md: 1.5rem;   /* 24px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 2.5rem;   /* 40px */
  /* Typography */
  --font-size-xs: 0.875rem; /* 14px */
  --font-size-sm: 1rem;     /* 16px */
  --font-size-md: 1.125rem; /* 18px */
  --font-size-lg: 1.25rem;  /* 20px */
  /* Container widths */
  --container-max: 62.5rem; /* 1000px */
  --form-max: 37.5rem;      /* 600px */
  /* Breakpoints */
  --bp-sm: 37.5rem; /* 600px */
  --bp-md: 64rem;   /* 1024px */
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 100%; /* 16px */
}
body {
  font-family: Arial, sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: #333;
  background-color: #fafafa;
}

/* Utility Containers */
.container {
  width: 100%;
  max-width: var(--container-max);
  padding: var(--spacing-sm);
  margin: 0 auto;
}
.page-container,
.form-container {
  width: 100%;
  max-width: var(--form-max);
  margin: var(--spacing-xl) auto;
  background-color: #fff;
  padding: var(--spacing-md);
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.1);
  border-radius: 0.5rem;
}

/* Navbar & Menu */
.navbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: #f0f0f0;
  padding: var(--spacing-sm);
}
.logo,
.login-logo {
  width: 3rem; /* 48px */
  align-self: center;
  height: fit-content;
}
.support-icon {
  text-decoration: none;
  padding: 1px;
  padding-left: 4px;
  padding-right: 4px;
  border-radius: 50%;
  border:1px solid ;
  color: #ccffcc;
  background-color: #00E900;
}
.menu {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  border: 0.0625rem solid #ccc;
  background-color: #f9f9f9;
  border-radius: 0.3125rem;
}
.menu li,
.menuItem {
  list-style: none;
}

/* Tabs & Dropdown */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  gap: var(--spacing-md);
  background-color: #f0f0f0;
  padding: var(--spacing-sm);
}
.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-weight: bold;
  font-size: var(--font-size-sm);
  color: #333;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
}
.tab:hover,
.dropbtn:hover {
  color: green;
}
.tab.active {
  color: #fff;
  background-color: green;
}
.tab.dropdown,
.tab.dropdown.user-service {
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 10rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.2);
  z-index: 100;
  border-radius: 0.25rem;
  overflow: hidden;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown-content a {
  display: block;
  padding: var(--spacing-sm);
  text-decoration: none;
  color: #333;
}
.dropdown-content a:hover {
  background-color: #f0f0f0;
}
.user-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-left: var(--spacing-sm);
}

a.dropbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-weight: bold;
  font-size: var(--font-size-sm);
  color: #333;
  text-decoration: none;
  border: none;
  border-radius: 0.25rem;
}

/* Content & Pages */
.content {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Project & Sensor Lists */
#projectList {
  list-style: none;
  padding: 0;
}
#projectList li {
  padding: var(--spacing-xs);
  cursor: pointer;
}
#projectList li:hover {
  background-color: #f0f0f0;
}
.project-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.project-container label {
  font-weight: bold;
  display: block;
  width: 100%;
}

#sensorList li:hover,
#sensorUnitsWithAlarms li:hover {
  background-color: #f0f0f0;
}
#sensorUnitsWithAlarms {
  list-style: none;
  padding: 0;
  max-height: 12.5rem; /* 200px */
  overflow-y: auto;
  border: 0.0625rem solid #ccc;
  margin: var(--spacing-sm) 0;
}
#sensorUnitsWithAlarms li.selected {
  background-color: #cce5ff;
  font-weight: bold;
}

/* Info & Charts */
.info-box,
.pie-chart-container {
  flex: 1;
  padding: var(--spacing-sm);
  min-width: 18.75rem; /* 300px */
}
.system-status-label {
  font-size: var(--font-size-lg);
  text-align: center;
  margin-bottom: var(--spacing-md);
}

/* Styling for dropdown to only show arrow and no text */
.dropdown-container {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 5px; /* Ensures space between text and dropdown */
}

#statusFilter {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	border: none;
	width: 30px; /* Adjusted width to prevent movement */
	height: 20px;
	cursor: pointer;
	padding: 0;
	text-indent: -9999px; /* Hide text */
}

/* Visible dropdown arrow */
.dropdown-container select {
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.dropdown-container::after {
	content: '\25BC'; /* Unicode downward arrow */
	font-size: 14px;
	color: black;
	position: absolute;
	pointer-events: none; /* Prevent clicking the arrow itself */
}

#statusFilter:focus {
	outline: none;
}


/* Forms & Inputs */
.sensor-form,
.login-form {
  width: 100%;
  max-width: var(--form-max);
  background-color: #fff;
  padding: var(--spacing-md);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.1);
  margin: var(--spacing-lg) auto;
}
.sensor-form input,
.sensor-form select,
.form-container input,
.form-container select {
  width: 100%;
  padding: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  border: 0.0625rem solid #ccc;
  border-radius: 0.25rem;
  font-size: var(--font-size-sm);
}
.sensor-form label,
.form-container label {
  display: block;
  margin-top: var(--spacing-sm);
  font-weight: bold;
}
.sensor-form button,
.form-container button,
.login-form button {
  width: auto;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: var(--spacing-xs) 0;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  background-color: #007BFF;
  color: #fff;
  font-size: var(--font-size-sm);
}
.sensor-form button:hover,
.form-container button:hover,
.login-form button:hover {
  background-color: #0056b3;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* Sensor Messages */
#sensorMessage {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: #f44336;
}

/* Dialogs */
dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: var(--form-max);
  padding: var(--spacing-md);
  background-color: #fff;
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
  z-index: 1000;
}
dialog::backdrop {
  background: rgba(0,0,0,0.5);
}
dialog input {
  width: 100%;
  padding: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  border: 0.0625rem solid #ccc;
  border-radius: 0.25rem;
  font-size: var(--font-size-sm);
}
dialog ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}
dialog ul li {
  padding: var(--spacing-xs);
  border: 0.0625rem solid #ddd;
  border-radius: 0.25rem;
  margin-bottom: var(--spacing-xs);
  background-color: #f9f9f9;
}
dialog ul li:hover {
  background-color: #eee;
}
/* Images & Decorations */
#imageContainer {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: var(--spacing-lg);
}
img,
embed {
  width: 100%;
  height: auto;
}
.circle {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.circle.current {
  box-shadow: 0 0 0 0.1875rem rgba(0,123,255,0.5);
}
.text-label {
  position: absolute;
  display: inline;
  /* font-size: var(--font-size-xs); */
  color: black;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: transparent;
  border: none;
  padding: 0;
}

/* Administration Panel */
#administrationMenu {
  background: #f0f0f0;
  padding: var(--spacing-md);
  border-radius: 0.25rem;
}
#administration-content {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: #fff;
  border: 0.0625rem solid #ccc;
}

/* Responsive Overrides */
@media (max-width: 600px) {
  .navbar,
  .tabs {
    flex-direction: column;
    align-items: stretch;
  }
  .menu {
    font-size: var(--font-size-xs);
  }
}

/* ──────────────────────────────────────────────────────
   Login Page Overrides — mobile-first, fluid, scoped
────────────────────────────────────────────────────── */

/* Center the login container full-viewport */
.login-container {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  align-items: center;
  justify-content: center;
  height: 100vh;            /* full viewport height */
  padding: var(--spacing-sm);
  text-align: center;
}

/* Style the white “card” */
.login-form {
  background-color: #fff;
  padding: var(--spacing-md);
  border-radius: 0.5rem;    /* 8px */
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 18.75rem;      /* 300px */
  margin: 0 var(--spacing-sm);
}

/* Logo above the card */
.login-logo {
  width: 9.375rem;          /* 150px */
  margin-bottom: var(--spacing-lg); /* 32px */
}

/* Headings and labels */
.login-form h2 {
  margin-bottom: var(--spacing-md);
}
.login-form label {
  display: block;
  margin-top: var(--spacing-sm);
  font-weight: bold;
  text-align: left;
}

/* Text inputs */
.login-form input {
  width: 100%;
  padding: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  border: 0.0625rem solid #ccc;
  border-radius: 0.25rem;
  font-size: var(--font-size-sm);
}

/* Submit button */
.login-form button {
  width: 100%;
  padding: var(--spacing-sm);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.login-form button:hover {
  background-color: #0056b3;
}

/* Validation / error message */
.error-message {
  margin-top: var(--spacing-sm);
  color: #f44336;
  font-weight: bold;
  text-align: center;
}

/* ──────────────────────────────────────────────────────
   Home Page: Two-column labels/values under pie chart
────────────────────────────────────────────────────── */

/* keep two columns – shrink first one to label width   */
.info-box{
  display:grid;
  grid-template-columns:max-content 1fr !important;   /* label | value  */
  gap:.25rem .75rem;                       /* row | col gap  */
}

/* let the children of .labels / .values participate
        directly in the parent grid                          */
.info-box .labels,
.info-box .values{
  display:contents;
}

/* force each value into its matching row */
.info-box .values > :nth-child(1){ grid-row:1; }
.info-box .values > :nth-child(2){ grid-row:2; }
.info-box .values > :nth-child(3){ grid-row:3; }
.info-box .values > :nth-child(4){ grid-row:4; }
.info-box .values > :nth-child(5),
.info-box .latest-warning{          grid-row:5; }   /* warning block */

/* ── Home Page: keep labels in col-1, values in col-2 ─────────────── */
.info-box .labels > * {   /* every child of the .labels wrapper  */
  grid-column: 1;         /* always the first column           */
}

.info-box .values > * {   /* every child of the .values wrapper  */
  grid-column: 2;         /* always the second column          */
}

/* phones: still two columns, nothing collapses         */
@media(max-width:600px){
  .info-box{ grid-template-columns:max-content 1fr; }
}


/* ──────────────────────────────────────────────────────
   Dropdown positioning fix — keep existing mobile-first
────────────────────────────────────────────────────── */

.tab.dropdown,
.user-icon.dropdown {
  position: relative; /* anchor for the submenu */
}

/* Position the submenu immediately below its parent */
.dropdown-content {
  position: absolute;
  top: 100%; /* no gap */
  left: 0;
  min-width: max-content;              /* ensure content isn’t squashed */
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.2);
  z-index: 200;                         /* float above everything */
}

/* Optional: add a small transition & slight opacity for polish */
.dropdown-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.tab.dropdown:hover .dropdown-content,
.user-icon.dropdown:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
}

/* Active Tab Harmonization */
.tabs .tab.active,
.tab.dropdown.user-service.active .dropbtn,
.tab.dropdown.active .dropbtn {
  color: #fff;
}

/* ─── Fix: keep the user-icon dropdown inside the viewport ───────── */
.tab.dropdown.user-service .dropdown-content{
  /* open the menu towards the left instead of the right */
  left:  auto;         /* override the generic rule */
  right: 0;

  /* optional – guarantees the box never exceeds the screen width   */
  max-width: calc(100vw - 0.75rem);
}

/* you can keep the existing min-width: 10rem; – or shrink it here   */
@media (max-width:600px){
  .tab.dropdown.user-service .dropdown-content{
    min-width: 8rem;   /* ≈128 px – fits comfortably on 390 px phones */
  }
}


/* ────────────────────────────────────────────────────────────────────
   Previous and Next buttons under the imageDisplay (the scaffold image)
──────────────────────────────────────────────────────────────────── */
/* Desktop, IPad or similar screens */
#imageDisplay > div:last-child {
  display: flex;
  justify-content: center;			/* space between buttons */
  gap: var(--spacing-md);			/* center them under the image */
  /* margin-top: var(--spacing-md); */ /* extra space */
}

#prevImage,
#nextImage {
  /* padding: var(--spacing-sm) var(--spacing-md); */ /* larger hit-area */
  font-size: var(--font-size-md);	/* slightly bigger text */
}

/* Mobile screens (≤600px) */
@media (max-width: 600px) {
  #imageDisplay > div:last-child {
    gap: var(--spacing-sm) !important;
    margin-top: var(--spacing-sm) !important;
  }

  #prevImage,
  #nextImage {
    /* padding: var(--spacing-xs) var(--spacing-sm) !important; */ /* shrink padding */
    font-size: var(--font-size-sm) !important;	/* smaller text */
    min-width: auto !important;  				/* wrap text naturally */
  }
}

/*──────────────────────────────────────────
   Page overflow: visible on phones, hidden on desktop
──────────────────────────────────────────*/
.page,
.page.active,
.page-container,
.page-container.active {
  position: relative;
  overflow-x: visible !important; /* force mobile to show scroll */
}

/*──────────────────────────────────────────
   Page “card” styling (background, border, radius, shadow)
──────────────────────────────────────────*/
.page,
.page.active {
  background-color: #fff;               /* white card background */
  border: 1px solid #ddd;               /* light gray border */
  border-radius: 0.3125rem;             /* 5px rounding */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* subtle lift */
  padding: var(--spacing-lg);           /* match your grid gutter */
}

/*──────────────────────────────────────────
   MOBILE-ONLY:
──────────────────────────────────────────*/
@media (max-width: 37.5rem) {            /* ≤ 600 px phones */
  /* 1-A.  The card itself must NOT grow wider than the viewport */
  .page,
  .page.active,
  .page-container,
  .page-container.active {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* 1-B.  Make the table-container the ONLY horizontal scroller */
  .table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    /* pull the scroll area into the card’s side-padding on BOTH sides */
    margin: 0 calc(var(--spacing-lg) * -1);
    padding: 0;
  }

  /* 2.  Table must be wider than the wrapper to create overflow */
  .table-container table {
    min-width: max-content;
  }

  /* 3.  Tighter cell spacing for small screens */
  .table-container th,
  .table-container td {
	padding: var(--spacing-xs);
    font-size: var(--font-size-xs);
    white-space: nowrap;
  } 
}

/*──────────────────────────────────────────
  DESKTOP / TABLET  ≥ 37.5 rem  (600 px)
──────────────────────────────────────────*/
@media (min-width: 37.5rem) {
  /* 1-A  constrain the card (600 px + centered) */
  .page,
  .page.active {
    max-width: var(--container-max); /* 1000 px */
    margin: var(--spacing-xl) auto;  /* vertical space + centered */
    overflow-x: hidden;              /* keep scroll inside */
  }
  
  .page-container,
  .page-container.active {
    max-width: var(--form-max);     /* 600 px */
    margin: var(--spacing-xl) auto; /* vertical space + centered */
    overflow-x: hidden;             /* keep scroll inside */
  }
  
  /* 1-B  turn table back into a normal full-width grid */
  .table-container {
    margin: 0;                      /* cancel mobile bleed */
    padding: 0;
    overflow-x: visible;            /* no horizontal scroll here */
  }
  .table-container table {
    width: 100%;                    /* fill the card */
    min-width: 0;                   /* cancel max-content from phones */
    table-layout: auto;             /* let browser size columns */
	border-collapse: collapse;
    border-spacing: 0;
  }
  /* 2  prevent the date/time cell from wrapping */
  .table-container td:nth-child(3),   /* assuming Last Seen is col-3 */
  .table-container th:nth-child(3) {
    white-space: nowrap;
  }
  
  .table-container th,
  .table-container td {
    border: 1px solid #e0e0e0;
    /* keep small vertical padding, but expand horizontal */
    padding-top:   var(--spacing-xs);
    padding-bottom:var(--spacing-xs);
    padding-left:  var(--spacing-md);
    padding-right: var(--spacing-md);	
  }
}

/* Sensor-status – edit icon for comment */
.comment-cell { position: relative; padding-right: 22px; }
.comment-cell .edit-icon {
    position: absolute;          /* keeps it far right */
    right: 4px;
    top: 50%; transform: translateY(-50%);
    font-size: .8em;
    opacity: .55;
    pointer-events: none;        /* click still hits the <td> */
    transition: opacity .2s;
}
.comment-cell:hover .edit-icon { opacity: .9; }

@media (min-width: 64rem) { /* ≥1024px */
  .page,
  .page.active {
    max-width: var(--container-max);
  }
}

@media (min-width: 37.5rem) {
  /* Turn both menus into flex‐containers so we can use gap */
  #projectMenu > div,
  #scaffoldMenu {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);  /* match scaffoldMenu’s natural spacing */
  }

  /* Enlarge the buttons in both menus */
  #projectMenu button,
  #scaffoldMenu button {
    font-size: var(--font-size-lg);  /* larger text */
  }
  
  /* Enlarge the “Next Device to Deploy:” label */
  #scaffoldMenu label {
    font-size: var(--font-size-lg);
  }

  /* Enlarge the sensor dropdown text & hit-area */
  #scaffoldMenu select {
    font-size: var(--font-size-lg);
    /* padding: var(--spacing-sm) var(--spacing-md); */
  }  
}


/* ── Device-mode page ──────────────────────────────────────────*/
.device-mode-wrapper{
  display:flex;
  gap:var(--spacing-lg);
  /* align-items:flex-start; */
  align-items:flex-stretch;
}

.sensor-table{
  border:1px solid #ccc;
  border-collapse:collapse;
  max-height:12.5rem;          /* same scroll height as alarms list */
  overflow-y:auto;
}

.sensor-table th,
.sensor-table td{
  padding:var(--spacing-xs) var(--spacing-sm);
  border-bottom:1px solid #eee;
}

/* selected row styling */
.sensor-table tr.selected {
  background: #cce5ff;
  font-weight: bold;
  cursor: pointer;
}

/* only non-selected rows get the hover effect */
.sensor-table tr:not(.selected):hover {
  background: transparent;
  cursor: pointer;
}

.command-list li{
  list-style:none;
  padding:var(--spacing-xs);
  cursor:pointer;
}

.command-list li:hover,
.command-list li.selected{
  background:#cce5ff;
  font-weight:bold;
}

/* ── Commands list ───────────────────────────────*/
.command-list{
  border: 1px solid #ccc;
  padding: 0;
  list-style: none;
}

/* Sensor-status “Chart” column */
.chart-cell{
  text-align:center;       /* horizontal centring */
  vertical-align:middle;
}

.chart-cell button,
.chart-cell img{             /* works for either <button> or <img> */
    display:inline-block;
    line-height:1;           /* prevents baseline shift             */
    border:none;             /* no border around the icon           */
    background:none;
    margin:0;
    padding:0;
    cursor:pointer;
    font-size:1.1rem;        /* when showing an emoji glyph */
}

/* -----------------------------------------
   Allow comment-text to wrap on mobile
   ----------------------------------------- */
@media (max-width: 37.5rem) {
  .comment-cell .comment-text {
    display: block !important;
    max-width: 200px;       /* or calc(100vw * 0.5) etc */
    white-space: normal !important;
    word-break: break-word !important;
  }
}


/* ------------------------------------------------------
   Dropdown: hover on desktop, click-to-toggle on mobile
   ------------------------------------------------------ */

/* Always hide by default */
.tab.dropdown .dropdown-content {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Desktop only: hover to show */
@media (hover: hover) {
	.tab.dropdown:hover .dropdown-content {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* Always show if .open is added */
.tab.dropdown.open .dropdown-content {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* ─── Configuration Device-Mode page overrides ───────────────────────────────── */

/* commands list shall be non-scrollable and adapt its height according to the number of commands */
#configurationDeviceModePage .command-list {
  max-height: none;
  overflow-y: visible;
}

/* Keep the table header fixed when scrolling */
.config-device-table thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 2;
}

/* Don’t highlight the “Available modes:” header when hovering over it */
#configurationDeviceModePage .command-list li:first-child:hover {
  background: none;
}

/* ─── Fix the devices table borders ─────────────────────────── */

/* Keep the outer left border so body rows have their left frame */
#devicesInOpenProject {
  border-left: 1px solid #ccc !important;  /* restore left edge */
  border-top: none           !important;  /* remove only the top edge */
}

/* Sticky <th> draws its own 1px top and left as before */
#devicesInOpenProject thead th {
  border-top: 1px solid #ccc !important;
}
#devicesInOpenProject thead th:first-child {
  border-left: 1px solid #ccc !important;
}

/* ─── One-pixel frame & header-top for devices table ───────────────────── */

/* A) Kill the table’s own border entirely */
#devicesInOpenProject {
  border: none !important;
  border-collapse: separate !important;  /* keep sticky headers behaving */
}

/* B) Give the scroll-container the left, right & bottom edges */
#configurationDeviceModePage .config-device-table {
  border-left:   1px solid #ccc;
  border-right:  1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

/* C) Let each sticky <th> draw only its top edge */
#devicesInOpenProject thead th {
  border-top: 1px solid #ccc !important;
}

/* D) Remove any per-cell left border so you don’t double up */
#devicesInOpenProject thead th:first-child {
  border-left: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
  Reusable button styling from configuration-device-mode.html
───────────────────────────────────────────────────────────────────────────── */
.config-button {
  margin-top: 16px;
  padding: 6px 14px;
  font-size: 0.95rem;
}

/* ─── Override sensor-form’s blue buttons for our .config-button items ───────────────── */

.sensor-form button.config-button {
  /* Match the default grey/white look of the config-device-mode page */
  background-color: #f0f0f0 !important;
  color:            #333    !important;
  border:           1px solid #ccc !important;
  border-radius:    0.25rem !important;

  /* Preserve existing spacing rules */
  margin-top: 16px;
  padding:    6px 14px;
  font-size:  0.95rem;
}

/* ─── Work-Hours row: top-align & kill the button’s margin ────────────────── */

/* 1) In the “End time” flex-row, line everything up at the top (not centered) */
#configurationDeviceModePage 
  #workHoursSection 
  > div      /* the inline-flex wrapper */
  > div:nth-child(2)  /* the second inner flex row (End time + button) */
{
  align-items: flex-start !important;
}

/* 2) Remove the 16px top gap from the Set Work Hours button */
#configurationDeviceModePage #setWorkHoursButton {
  margin-top: 0 !important;
}

/* STACK DEVICE-LIST + COMMANDS PANEL ON MOBILE ≤600px */
@media (max-width: 37.5rem) {  /* 600px */
  /* turn the two‐column flex into a single column */
  #configurationDeviceModePage .device-mode-wrapper {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--spacing-md) !important;  /* optional, adds some breathing room */
  }

  /* make each panel full-width within that column */
  #configurationDeviceModePage .device-mode-wrapper > div {
    width: 100% !important;
  }
}

/* ─── Collapse header-row gaps in the devices table ───────────────── */

/* Remove any cell‐spacing gap that sits above/below the header row */
#devicesInOpenProject {
  border-spacing: 0 !important;
}

/* ─── Add row borders to the commands list to match the table ───────────────── */
#configurationDeviceModePage .command-list li {
  border-bottom: 1px solid #eee;  /* same as .sensor-table td/th */ 
}

#configurationDeviceModePage .command-list li:last-child {
  border-bottom: none;            /* avoid extra line at the very bottom */
}

@media (max-width: 37.5rem) {
  #configurationDeviceModePage .sensor-table th {
    text-align: left !important;
  }
}

@media (max-width: 37.5rem) {  /* ≤600px phones */
  /* Make the table wrapper fill its flex container’s width */
  #configurationDeviceModePage .config-device-table {
    width: 100% !important;
  }

  /* And force the <table> inside to span that full width as well */
  #configurationDeviceModePage .config-device-table table {
    width: 100% !important;
    table-layout: fixed;   /* optional: make columns distribute evenly */
  }
}

/* ─── SweetAlert: Styling classes to fit inside modal dialog ───────────────── */

/* Compact alert popup */
.compact-swal {
  padding: 1em 1em !important;
  font-size: 0.95rem;
  max-height: 220px;
  box-sizing: border-box;
}

/* Smaller icon */
.compact-icon {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto 10px auto !important;
}

/* Smaller confirm button */
.compact-confirm {
  padding: 4px 12px !important;
  font-size: 0.9rem !important;
}

.readonly-grey {
    background-color: #eee !important;
    color: #555;
    cursor: not-allowed;
}