/* ============================================================================
   Authorization Server (User Management) — app-wide design tokens.
   Kept in line with the EHS React apps (airis-theme.css / cat / moc / ohc).
   Loaded in includes/commonScriptAndCSS.jsp AFTER bootstrap + default.css.

   Scoped to  body:has(.lp-tabs)  — every User-Management / list page pulls in
   includes/menu.jsp which renders the `.lp-tabs` nav; the Welcome dashboard
   (`.hp-shell` / `.gsp-*`, its own design) does not, so it is left untouched.
   ---------------------------------------------------------------------------
   1) Font        : Roboto on the content.
   2) Field labels: UPPERCASE / 10px / weight 700 / tracked / muted gray.
   3) Controls    : 12px, gray-300 1px border, 4px radius, 6px 6px padding,
                    uniform 30px height (single-line).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

:root {
  --ui-font: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --ui-control-border: #d1d5db;
  --ui-control-radius: 4px;
  --ui-control-fs: 12px;
  --ui-control-pad: 6px 6px;
  --ui-control-h: 30px;
  --ui-label-color: #6b7280;
  --ui-label-fs: 10px;
}

/* ---------- 1) Font ----------------------------------------------------- */
body:has(.lp-tabs),
body:has(.lp-tabs) input,
body:has(.lp-tabs) select,
body:has(.lp-tabs) textarea,
body:has(.lp-tabs) button,
body:has(.lp-tabs) .btn,
body:has(.lp-tabs) table,
body:has(.lp-tabs) .dataTables_wrapper {
  font-family: var(--ui-font) !important;
}

/* ---------- 2) Field labels ---------------------------------------------
   <div class="form-group"><label class="control-label required"><b>X</b> …    */
body:has(.lp-tabs) .form-group > label,
body:has(.lp-tabs) .control-label,
body:has(.lp-tabs) form label:not(.btn):not(.form-check-label) {
  display: inline-block;
  margin-bottom: 2px;
  padding: 0;
  font-size: var(--ui-label-fs);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--ui-label-color);
  text-transform: uppercase;
}
body:has(.lp-tabs) .control-label b,
body:has(.lp-tabs) .form-group > label b {
  font-weight: 700;
}

/* checkbox / radio option labels — inline, normal case */
body:has(.lp-tabs) .form-check-label,
body:has(.lp-tabs) input[type="checkbox"] + label,
body:has(.lp-tabs) input[type="radio"] + label,
body:has(.lp-tabs) label:has(> input[type="checkbox"]),
body:has(.lp-tabs) label:has(> input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  font-size: var(--ui-control-fs);
  font-weight: 400;
  letter-spacing: normal;
  color: inherit;
  text-transform: none;
}

/* ---------- 3) Inputs / selects / textareas --------------------------------- */
body:has(.lp-tabs) .form-control,
body:has(.lp-tabs) .form-select,
body:has(.lp-tabs)
  input:not(
    :where(
      [type="checkbox"], [type="radio"], [type="file"], [type="button"],
      [type="submit"], [type="reset"], [type="hidden"], [type="range"]
    )
  ),
body:has(.lp-tabs) select:not([multiple]),
body:has(.lp-tabs) textarea {
  font-size: var(--ui-control-fs) !important;
  line-height: 1.2 !important;
  border: 1px solid var(--ui-control-border) !important;
  border-radius: var(--ui-control-radius) !important;
  padding: var(--ui-control-pad) !important;
  box-sizing: border-box !important;
  height: var(--ui-control-h) !important;
  min-height: var(--ui-control-h) !important;
}
body:has(.lp-tabs) textarea,
body:has(.lp-tabs) textarea.form-control {
  height: auto !important;
  min-height: 46px !important;
  line-height: 1.35 !important;
}
body:has(.lp-tabs) select:not([multiple]),
body:has(.lp-tabs) .form-select {
  padding-right: 22px !important;
}
body:has(.lp-tabs) .form-control:focus,
body:has(.lp-tabs) input:focus,
body:has(.lp-tabs) select:focus,
body:has(.lp-tabs) textarea:focus {
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.2) !important;
}
body:has(.lp-tabs) .form-control:disabled,
body:has(.lp-tabs) .form-control[readonly],
body:has(.lp-tabs) input:disabled,
body:has(.lp-tabs) select:disabled,
body:has(.lp-tabs) textarea:disabled {
  background-color: #e9ecef !important;
}

/* ---------- 3b) bootstrap-duallistbox (Membership / User-Site / Department-User
   / Location-User mapping widget) — leave its list boxes, filter fields and
   Move / Remove buttons alone; the generic control rules above squash them.   */
body:has(.lp-tabs) .bootstrap-duallistbox-container select[multiple],
body:has(.lp-tabs) select[multiple] {
  height: auto !important;
  min-height: 150px !important;
  padding: 4px !important;
  font-size: var(--ui-control-fs) !important;
}
body:has(.lp-tabs) .bootstrap-duallistbox-container .btn {
  height: auto !important;
  min-height: 0 !important;
  padding: 5px 10px !important;
  font-size: var(--ui-control-fs) !important;
}
body:has(.lp-tabs) .bootstrap-duallistbox-container input {
  height: 28px !important;
  min-height: 0 !important;
  font-size: var(--ui-control-fs) !important;
}
body:has(.lp-tabs) .bootstrap-duallistbox-container .box1,
body:has(.lp-tabs) .bootstrap-duallistbox-container .box2 {
  padding: 0 4px;
}

/* ---------- 4) Compact form spacing --------------------------------------- */
body:has(.lp-tabs) .form-group {
  margin-bottom: 8px !important;
}

/* ---------- 5) Section / page headers ----------------------------------- */
body:has(.lp-tabs) .lp-heading h2,
body:has(.lp-tabs) .panel-heading,
body:has(.lp-tabs) .card-header,
body:has(.lp-tabs) form h2,
body:has(.lp-tabs) form h3,
body:has(.lp-tabs) form h4 {
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-weight: 700 !important;
  color: var(--ui-label-color) !important;
  font-size: 15px !important;
}

/* ---------- 6) DataTables list pages ------------------------------------- */
body:has(.lp-tabs) table.dataTable,
body:has(.lp-tabs) table.dataTable td,
body:has(.lp-tabs) table.dataTable th,
body:has(.lp-tabs) .dataTables_wrapper .dataTables_info,
body:has(.lp-tabs) .dataTables_wrapper .dataTables_length,
body:has(.lp-tabs) .dataTables_wrapper .dataTables_filter,
body:has(.lp-tabs) .dataTables_wrapper .dataTables_paginate {
  font-size: var(--ui-control-fs) !important;
}
body:has(.lp-tabs) table.dataTable thead th {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ui-label-color);
}