/* -----------------------------
   common.layout.style.css (Cleaned)
----------------------------- */

/* ============================== */
/* Table and Grid Layout         */
/* ============================== */

.table-row,
.table-header,
.table-body .table-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-col {
  flex: 1;
  padding: 5px;
  box-sizing: border-box;
}

/* Flex helpers for column widths */
.table-col.col-1  { flex: 1; }
.table-col.col-2  { flex: 2; min-width: 100px; }
.table-col.col-3  { flex: 3; }
.table-col.col-4  { flex: 4; }
.table-col.col-10 { display: flex; align-items: center; }

.table-body {
  display: flex;
  flex-direction: column;
  padding: 5px;
  width: 100%;
}

.table-body .table-col-right  { text-align: right; }
.table-body .table-col-center { text-align: center; }


/* ============================== */
/* Block Headers (Page Sections) */
/* ============================== */

.block-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 18px;
  border-bottom: 0;
  background-color: var(--whsBlue1);
}


/* Dark theme override */
.theme-dark .block-header {
  background-color: var(--whsDark2);  
}

.header-item {
  padding: 5px 15px;
  font-weight: bold;
}


.button-spaced {
  margin-top: 6px;
  margin-bottom: 6px;
}


.small-toggle-button {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 1;
  margin-left: 10px;
}

/* ============================== */
/* Adjustments (Mobile)   */
/* ============================== */

/* Remove padding from block-header on mobile */
body.screen-mobile .block-header {
  padding: 15 !important;
}

/* Remove padding from content-area on mobile */
body.screen-mobile .content-area {
  padding: 15 !important;
}


@media (max-width: 768px) {
  #headerUserInfo,
  #headerLogo {
    display: none !important;
  }
}

.site-header-inner {
  padding-left: 5% !important;
  padding-right: 5% !important;
}

@media (max-width: 768px) {
  .site-header-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}