/*
 * Umbrella LOG's own overrides. Loaded after the Modernize stylesheet, and the
 * only CSS in the tree we wrote.
 *
 * It exists so the vendor stylesheet stays byte-identical to the one that ships
 * with the theme. Every failure mode of this template is silent (a page simply
 * renders as plain Bootstrap), so a local edit inside styles.css would survive
 * exactly until the next theme update and then be lost without an error.
 */

/*
 * Density.
 *
 * Modernize sizes everything in rem, including --bs-body-font-size (0.875rem)
 * and the whole .fs-* scale, so one change to the root size scales the entire
 * interface proportionally rather than leaving headings and tables out of step.
 * 14px against the browser's default 16px is 87.5%.
 *
 * The .fs-7 and above steps use calc(... + Nvw), so they shrink less than the
 * rest. That is the right way round: those are page headings, which should not
 * collapse into the body text just because the tables got denser.
 */
html {
  font-size: 14px;
}

/*
 * Table rows carry the density that actually matters here -- a trace result is
 * read 500 rows at a time, and the vertical padding, not the type size, is what
 * decides how many of them fit. The cells still hold two stacked lines in the
 * live stream, so this is trimmed rather than removed.
 */
.table > :not(caption) > * > * {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/*
 * The log tables are dense grids of addresses and ports, where a digit that is
 * one pixel narrower than its neighbour makes a column impossible to scan down.
 * Tabular figures keep every digit the same width without changing the face.
 */
.table td,
.table th {
  font-variant-numeric: tabular-nums;
}

/*
 * Vertical rhythm.
 *
 * Modernize spaces its cards for a marketing dashboard with six figures on it.
 * This application's pages are dense -- twelve panels, or five hundred log rows
 * -- and the theme's 30px gutters and 30px card padding push the third row of
 * anything below the fold on a laptop. These are the theme's own variables and
 * classes, retuned; nothing is restructured.
 */
:root {
  --bs-gutter-x: 1.25rem;
  --bs-gutter-y: 0;
}

.card {
  margin-bottom: 1.25rem;
}

.card-body {
  padding: 1.1rem;
}

/* The body wrapper's own padding is set for the theme's wide cards. */
.body-wrapper > .container-fluid {
  padding: 1.25rem 1.25rem 0;
}

/*
 * Modernize's topbar is 70px tall and the sidebar header matches it. Nothing on
 * this appliance's topbar needs that: it holds a product name and one account
 * control. Both are trimmed together -- they are separate rules in styles.css
 * and changing one leaves the sidebar logo hanging.
 */
.topbar .navbar {
  min-height: 58px;
}

.topbar .navbar .navbar-nav .nav-item .nav-link {
  line-height: 58px;
  height: 58px;
}

/*
 * min-height as well as height: the theme's own rule is
 * `.brand-logo{min-height:70px;padding:0 24px}`, and a bare `height:58px`
 * loses to it -- the box stays 70px tall and the sidebar's brand sits 12px
 * below the topbar it is supposed to line up with. Nothing reports this; the
 * page simply looks a little off.
 */
.left-sidebar .brand-logo {
  height: 58px;
  min-height: 58px;
}

[data-layout="vertical"] .body-wrapper {
  padding-top: 58px;
}

/*
 * Card titles. The theme's h4/h5 inside a card are sized for a page with three
 * cards on it; at twelve they read as a wall of headings.
 */
.card-title {
  font-size: 1rem;
  line-height: 1.35;
}

.card-subtitle {
  font-size: 0.75rem;
}

/*
 * Fixed-size round wells. Modernize ships .round-48 and .round-20 but not the
 * two sizes this application's denser cards want.
 */
.round-40 {
  width: 40px;
  height: 40px;
}

.round-32 {
  width: 32px;
  height: 32px;
}

/*
 * A panel swapped in by the dashboard's refresh should not flash. Fifteen
 * seconds apart, an abrupt repaint reads as the page having reloaded -- which
 * is precisely the impression the refresh exists to avoid.
 */
[id^="dash-"] .card {
  transition: opacity 0.15s ease-in-out;
}

/* ------------------------------------------------------------------ *
 * Brand
 *
 * The Umbrella identity: an arch cut into four, whose four colours are the
 * four colours of the suite. templates/brand.php draws the mark; everything
 * below sizes and colours the lockup around it, and exposes the palette
 * as variables so the rest of the interface can use the same four
 * colours without copying hex values into a template.
 * ------------------------------------------------------------------ */

:root {
  --umbrella-violet: #7a5af8; /* Umbrella Cloud    */
  --umbrella-cyan: #01c0c8;   /* Umbrella LOG      */
  --umbrella-amber: #f59e0b;  /* Umbrella Business */
  --umbrella-coral: #f66d72;  /* family accent     */

  /* The mark read left to right. Used as a hairline wherever the
     interface needs to say "Umbrella" without repeating the logo. */
  --umbrella-spectrum: linear-gradient(90deg,
      var(--umbrella-violet) 0%,
      var(--umbrella-cyan) 34%,
      var(--umbrella-amber) 67%,
      var(--umbrella-coral) 100%);
}

/*
 * The lockup is HTML rather than a single SVG so the wordmark is set in the
 * page's own Plus Jakarta Sans and inherits the theme's ink colour -- see the
 * header of templates/brand.php. Sizes derive from --ubrand-size, the mark's
 * height in px, which the partial sets inline; one number scales the whole
 * lockup.
 */
.ubrand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--bs-heading-color);
  text-decoration: none;
}

.ubrand-mark {
  flex: 0 0 auto;
  display: block;
}

.ubrand-text {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.ubrand-name {
  font-size: calc(var(--ubrand-size, 34px) * 0.46);
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.ubrand-product {
  font-weight: 800;
  margin-left: 0.3em;
}

/*
 * The endorsement line is tracked-out uppercase, which stops being legible
 * below about 8px however large the mark is -- hence the floor rather than a
 * plain ratio.
 */
.ubrand-sub {
  margin-top: 0.4em;
  font-size: max(8px, calc(var(--ubrand-size, 34px) * 0.185));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bs-body-color);
  opacity: 0.7;
  white-space: nowrap;
}

/*
 * Under mini-sidebar the theme clips .logo-img to 40px and relies on overflow
 * to hide everything past the icon (`[data-sidebartype=mini-sidebar]
 * .logo-img{width:40px;overflow:hidden}`). That works only because the mark is
 * the leftmost thing in the lockup and nothing in it wraps.
 */
.left-sidebar .brand-logo .ubrand {
  gap: 0.5rem;
}

/*
 * A two-pixel spectrum under the sidebar's brand area. It is the cheapest way to
 * carry the four colours into the interface itself, and it doubles as the rule
 * that separates the brand from the navigation.
 */
.left-sidebar .brand-logo {
  position: relative;
}

.left-sidebar .brand-logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--umbrella-spectrum);
  opacity: 0.85;
}