/* BTS modern touches — layered LAST, on top of AdminLTE/Bootstrap.
   Intentionally minimal: keeps the exact skin-red look (#dd4b39, #222d32,
   #ecf0f5) and layout, only softening corners and adding subtle depth. */

.box {
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.btn {
  border-radius: 5px;
}

.form-control {
  border-radius: 5px;
}

.modal-content {
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.small-box,
.info-box {
  border-radius: 6px;
}

/* ── Hover transitions ────────────────────────────────────────────────────────
   AdminLTE swaps hover colours instantly. Easing them makes the app feel less
   abrupt without changing any of the colours themselves.

   Only properties that actually change on hover are transitioned — naming them
   explicitly rather than using `all` avoids animating layout or inherited
   properties by accident, which is what makes this kind of thing feel janky. */

.table-hover > tbody > tr,
tr.clickable-row {
  transition:
    background-color 0.18s ease-in-out,
    box-shadow 0.18s ease-in-out;
}

/* Clickable rows get a touch more feedback, since they behave like buttons. */
tr.clickable-row:hover {
  box-shadow: inset 3px 0 0 #dd4b39;
}

/* Sidebar items: AdminLTE animates neither the fill nor its active marker. */
.sidebar-menu > li > a,
.sidebar-menu > li > .treeview-menu > li > a {
  transition:
    background-color 0.18s ease-in-out,
    color 0.18s ease-in-out,
    border-left-color 0.18s ease-in-out;
}

/* Top navbar links, including the user/dropdown triggers. */
.main-header .navbar .nav > li > a,
.main-header .logo,
.main-header .sidebar-toggle {
  transition:
    background-color 0.18s ease-in-out,
    color 0.18s ease-in-out;
}

/* Buttons and the filter sidebar's option rows. */
.btn,
.search-filter-checkbox label {
  transition:
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

/* Respect a reduced-motion preference — an accessibility setting, and these are
   decorative. */
@media (prefers-reduced-motion: reduce) {
  .table-hover > tbody > tr,
  tr.clickable-row,
  .sidebar-menu > li > a,
  .sidebar-menu > li > .treeview-menu > li > a,
  .main-header .navbar .nav > li > a,
  .main-header .logo,
  .main-header .sidebar-toggle,
  .btn,
  .search-filter-checkbox label {
    transition: none;
  }
}