:root {
          --cell-width: 120px; /* js will change this to match 10% of table-width. */
          --col1-width: 50px;
          --col2-width: 250px;
          --col3-width: 60px;
          --primary-color: #0d6efd;
            --success-color: #198754;
            --danger-color: #dc3545;
            --warning-color: #fd7e14;
            --info-color: #20c997;
            --secondary-color: #6c757d;
            --light-gray: #f8f9fa;
            --border-color: #e9ecef;
        }

        html {
        box-sizing: border-box;
        }

        *,
        *:before,
        *:after {
        box-sizing: inherit;
        }

        /* Professional Card Header */
        .room-management-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 0.5rem 0.5rem 0 0;
        margin: -1.25rem -1.25rem 1.5rem -1.25rem;
        }

        .room-management-header h1 {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 600;
        text-align: center;
        }

        .room-management-header .subtitle {
        text-align: center;
        margin-top: 0.5rem;
        opacity: 0.9;
        font-size: 0.95rem;
        }

        /* Professional Table Container */
        .table-scroll-wrap {
        position: relative;
        margin: 0;
        width: 100%;
        max-width: 100%;
        height: 75vh;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid var(--border-color);
        overflow: hidden;
        }

        .table-scroll {
        position: relative;
        width: 100%;
        z-index: 1;
        margin: 0;
        overflow: auto;
        height: 100%;
        }

    .table-scroll table {
      width: 100%;
      margin: 0;
      /* use automatic table layout so columns can size to content (status headers follow label width) */
      table-layout: auto;
      border-collapse: separate;
      border-spacing: 0;
      word-wrap: break-word;
      }

        /* Enhanced Table Styling */
    .table-scroll th,
    .table-scroll td {
      padding: 12px 16px;
      border-right: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      background: #fff;
      vertical-align: middle;
      /* allow cells to size to content by default; sticky columns keep explicit widths below */
      width: auto;
      min-width: 40px;
      text-align: center;
      font-size: 0.875rem;
    }

  .table-scroll thead th {
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
    color: #495057;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    font-size: 0.75rem;
    z-index: 10;
    border-bottom: 2px solid var(--border-color);
  }

  /* Status Column Headers: auto-size up to 200px and truncate if too long */
  .table-scroll thead th.status-header {
      width: auto !important;
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.75rem;
      text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      border-color: rgba(255,255,255,0.2) !important;
  }

  /* Status color utility classes (use these on the TH to reuse the table for other views)
      Each class sets a solid background and ensures readable white text. */
  .status-clean { background: var(--success-color) !important; color: #fff !important; }
  .status-dirty { background: var(--danger-color) !important; color: #fff !important; }
  .status-inspected { background: var(--warning-color) !important; color: #fff !important; }
  .status-sanitized { background: var(--info-color) !important; color: #fff !important; }
  .status-ooo { background: black !important; color: #fff !important; }
  .status-nostatus { background: var(--secondary-color) !important; color: #fff !important; }
  
  .status-maintenance { background: #8e44ad !important; color: #fff !important; }
  .status-reserved { background: #e67e22 !important; color: #fff !important; }
  .status-blocked { background: #2c3e50 !important; color: #fff !important; }
  .status-damaged { background: #c0392b !important; color: #fff !important; }
  .status-available { background: #27ae60 !important; color: #fff !important; }

  /* Neutral "No Status" header (requested appearance) */
  

  /* Professional Sticky Columns */
  .col {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 5; /* keep sticky cols above scrolling cells */
    background: #fff;
    border-left: none !important;
    border-right: none !important;
    /* ensure pseudo divider can be painted above moving cells */
    box-shadow: none;
  }

  /* Draw a stable vertical divider for sticky cols so it doesn't shift when scrolling */
  .col::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    pointer-events: none;
  }

  .col1 {
  left: 0;
  width: var(--col1-width);
  min-width: var(--col1-width);
  }

  .col2 {
  /* sticky room type column: explicit width so it doesn't shrink */
  left: var(--col1-width); /* sits right after .col1 */
  width: var(--col2-width);
  min-width: calc(var(--col2-width) - 50px);
  text-align: left !important;
  }

  .col3 {
  /* people column positioned after col1 + col2 */
  left: calc(var(--col1-width) + var(--col2-width));
  width: var(--col3-width);
  min-width: var(--col3-width);
  }

  /* Ensure header/body cells for sticky cols use exact same widths */
  .table-scroll th.col1, .table-scroll td.col1 { width: var(--col1-width); min-width: var(--col1-width); }
  .table-scroll th.col2, .table-scroll td.col2 { width: var(--col2-width); min-width: var(--col2-width); }
  .table-scroll th.col3, .table-scroll td.col3 { width: var(--col3-width); min-width: var(--col3-width); }

  /* Give sticky columns (col1/col2/col3) normal cell padding; other cells keep zero padding */
  .table-scroll td.col,
  .table-scroll td.col1,
  .table-scroll td.col2,
  .table-scroll td.col3 {
      padding: 12px 16px !important;
  }

  /* All other td cells: compact (0) padding to keep grid tight */
  .table-scroll td:not(.col):not(.col1):not(.col2):not(.col3) {
      padding: 0px !important;
  }

  tbody .col {
    background: #fcfcfd;
    /* remove the old border so the pseudo-element controls the divider appearance */
    border-right: none;
  }

  thead .col,
  .table-scroll tfoot .col {
  z-index: 15;
  background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  border-right: 2px solid var(--border-color);
  }

  /* ensure the TH cells for the three sticky columns are above other cells */
  .table-scroll thead th.col1,
  .table-scroll thead th.col2,
  .table-scroll thead th.col3,
  .table-scroll tfoot th.col1,
  .table-scroll tfoot th.col2,
  .table-scroll tfoot th.col3 {
  z-index: 15; /* explicit to ensure sticky header cells overlay scrolling content */
  }

  /* Footer Styling */
  .table-scroll tfoot,
  .table-scroll tfoot th,
  .table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  z-index: 10;
  border-top: 3px solid var(--primary-color);
  font-weight: 600;
  }

  /* Ensure footer cells keep the same padding as body header cells so the footer height stays stable
     across view switches (prevents footer from collapsing to minimal height when dynamic cells are empty). */
  .table-scroll tfoot td {
    padding: 12px 16px !important;
    vertical-align: middle;
    /* ensure footer cells keep consistent height even when content changes */
    min-height: 48px;
    height: 48px !important;
    line-height: 1.1;
  }

  /* force the footer row to maintain its layout and avoid collapsing when dynamic cells are empty */
  .table-scroll tfoot tr {
    display: table-row;
    height: 48px !important;
  }

  /* Parent Row Styling */
  .parent-row {
  background: linear-gradient(180deg, #f1f3f4 0%, #e8eaed 100%);
  font-weight: 600;
  border-left: 4px solid var(--primary-color);
  }

  .parent-row td {
  background: inherit;
  border-bottom: 2px solid var(--border-color);
  }

  /* Child Row Enhancements */
  .child-row:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
  transition: all 0.2s ease;
  }

  /* Badge Improvements */
  

  /* Border Indicators */
  .border-indicator-clean { border-left: 4px solid var(--success-color) !important; }
  .border-indicator-dirty { border-left: 4px solid var(--danger-color) !important; }
  .border-indicator-inspected { border-left: 4px solid var(--warning-color) !important; }
  .border-indicator-sanitized { border-left: 4px solid var(--info-color) !important; }

  /* Responsive Design */
  @media screen and (max-width: 1200px) {
  .table-scroll-wrap { width: 100%; }
  .room-management-header h1 { font-size: 1.5rem; }
  }

  @media screen and (max-width: 900px) {
  .table-scroll table { table-layout: auto; }
  .table-scroll tbody .col { position: static; }
  .table-scroll thead .col,
  .table-scroll tfoot .col { left: auto; right: auto; }
  .table-scroll tbody td.col { background: #fff; }
  .table-scroll th,
  .table-scroll td { min-width: 120px; }
  }

  /* Professional Icons */
  .icon-person {
  font-size: 1rem;
  color: var(--secondary-color);
  }

  /* Checkbox Styling */
  input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  }
  .badge.status-badge {
      width: 100%;   
  }

  /* Drag & Drop visuals */
  .status-badge[draggable="true"] { cursor: grab; }
  .status-badge.dragging { opacity: 0.65; cursor: grabbing; }
  td.drop-target { outline: 2px dashed rgba(13,110,253,0.45); background: rgba(13,110,253,0.03); }

  /* Dropzone used for drag->drop edit (appears while dragging a badge) */
  /* Floating dropzone removed — offcanvas is now triggered by clicking a badge or dropping into an empty cell */

  /* Minor offcanvas form tweaks to match the provided screenshot */
  .offcanvas .form-label{ font-weight:600; }
  .offcanvas .offcanvas-footer{ background: #fff; }
  .offcanvas .input-group-text{ display:flex; align-items:center; justify-content:center; }