/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Tighten the gap between nav items and their dropdown panels -- UIkit's
   default --uk-position-offset (15px) reads as detached from the trigger
   in a compact top navbar. Compound selector so this wins over uikit.css's
   own .uk-navbar-dropdown rule regardless of stylesheet load order. */
.uk-navbar-container .uk-navbar-dropdown {
  --uk-position-offset: 2px;
}

/* Click-to-reveal masked codes (see reveal_controller.js) -- signal the
   masked text is clickable since it isn't a link or button. */
.reveal-code {
  cursor: pointer;
}

/* Ported from legacy's application.css.scss -- used throughout for flagging
   bad/good values inline (e.g. drivers/index.html.slim's pay-plan warnings). */
.warning {
  color: red;
  font-weight: bold;
}
.ok {
  color: green;
  font-weight: bold;
}

/* Distinguishes the minimum-wage comparison (p3) from the budget-formula
   mismatch (p1), which both otherwise render as plain .warning red text
   right next to each other on drivers/index.html.slim. */
.min-wage-warning {
  color: blue;
  font-weight: bold;
}

/* Rails' datetime input renders 5 separate <select> elements (year/month/day/hour/minute)
   inside one .uk-form-controls, marked with a "datetime" class on the wrapping .uk-margin
   div. UIkit's .uk-input,.uk-select,.uk-textarea{width:100%} would otherwise stretch each
   one to fill the line and stack them vertically -- size them to their content and let them
   sit inline instead, like legacy's own datetime fields did. Scoped to .datetime specifically
   so ordinary single-select dropdowns elsewhere keep their full-width default. */
.uk-margin.datetime .uk-form-controls select {
  width: auto;
  display: inline-block;
}

/* Rails' collection_radio_buttons/collection_check_boxes put the option's text label
   directly after its <input> with no gap (handheld's OS Type field). */
.collection_radio_buttons,
.collection_check_boxes {
  margin-left: 4px;
}

/* Give the OS Type radio group the same bordered-box look as every other .uk-input/.uk-select
   field's uk-form-controls, so it lines up visually with the rest of the form instead of
   floating as bare unboxed text. */
.handheld_os .uk-form-controls {
  border: 1px solid #e5e5e5;
  padding: 8px 10px;
}