/* ==========================================================================
   RIL Pre-Verification — design system
   --------------------------------------------------------------------------
   Clean light enterprise theme layered over Bootstrap 3 + AdminLTE 2.

   Loaded LAST in application/views/admin/_templates/header.php so it wins
   over the framework defaults. AdminLTE leans on !important in a number of
   its skin rules, so this file matches that where it has to in order to
   override them — not as a general habit.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --ril-accent:        #0c6fa0;
  --ril-accent-hover:  #08567c;
  --ril-accent-light:  #2298c9;
  --ril-accent-wash:   #eaf4fa;

  /* Top bar. Matches the panel headers used across the app
     (#1e3c72 -> #2a5298), so the chrome and the content read as one. */
  --ril-bar:           #0b5e85;
  --ril-bar-grad:      linear-gradient(135deg, #07405c 0%, #0e76a6 100%);
  --ril-bar-hover:     rgba(255, 255, 255, .10);
  --ril-bar-active:    rgba(255, 255, 255, .14);
  --ril-bar-text:      rgba(255, 255, 255, .92);
  --ril-bar-underline: #ffc48a;

  /* Neutrals ------------------------------------------------------------- */
  --ril-canvas:        #f5f7f9;
  --ril-surface:       #ffffff;
  --ril-surface-alt:   #fafbfd;
  --ril-border:        #e3e8ec;
  --ril-border-strong: #ccd4db;

  /* Text ----------------------------------------------------------------- */
  --ril-text:          #16222e;
  --ril-text-muted:    #6b7280;
  --ril-text-faint:    #9aa1ac;

  /* Status --------------------------------------------------------------- */
  --ril-success:       #157347;
  --ril-success-wash:  #e8f5ee;
  --ril-warning:       #b45309;
  --ril-warning-wash:  #fdf3e6;
  --ril-danger:        #b42318;
  --ril-danger-wash:   #fdecea;
  --ril-info:          #0c6fa0;
  --ril-info-wash:     #eaf4fa;

  /* Shape ---------------------------------------------------------------- */
  --ril-radius:        8px;
  --ril-radius-sm:     6px;
  --ril-shadow:        0 1px 2px rgba(16, 24, 40, .06);
  --ril-shadow-md:     0 4px 12px rgba(16, 24, 40, .08);
  --ril-shadow-pop:    0 8px 24px rgba(16, 24, 40, .12);

  /* Type ----------------------------------------------------------------- */
  --ril-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ril-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                   "Liberation Mono", monospace;
}

/* ==========================================================================
   1. Base
   ========================================================================== */

html,
body {
  font-family: var(--ril-font) !important;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--ril-text);
  background: var(--ril-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper,
.content-wrapper {
  background: var(--ril-canvas);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ril-font);
  color: var(--ril-text);
  font-weight: 600;
  letter-spacing: -.005em;
}

a {
  color: var(--ril-accent);
}

a:hover,
a:focus {
  color: var(--ril-accent-hover);
}

/* Numeric columns line up when the figures share a width. */
.text-right,
td.text-right,
th.text-right {
  font-variant-numeric: tabular-nums;
}

::selection {
  background: rgba(12, 111, 160, .16);
}

/* ==========================================================================
   2. Page chrome
   ========================================================================== */

.content-wrapper {
  min-height: calc(100vh - 100px);
}

.content-header {
  padding: 12px 14px 4px;
  background: transparent;
}

.content-header > h1 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--ril-text);
}

.content-header > h1 > small {
  font-size: 13px;
  color: var(--ril-text-muted);
  margin-left: 8px;
}

.content-header > .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  top: 14px;
  right: 14px;
  font-size: 12px;
  border-radius: 0;
}

.content-header > .breadcrumb > li > a {
  color: var(--ril-text-muted);
}

.content-header > .breadcrumb > .active {
  color: var(--ril-text);
}

.content {
  padding: 20px 14px 18px;
}

/* ==========================================================================
   3. Top navigation — Pro-Team brand bar
   Colours sampled from the logo artwork. The logo's bright cyan (#2298c9)
   only reaches 3.28:1, so it is kept for decoration; the bar uses the deeper
   #0b5e85 where white labels sit at 7.11:1, and the brand orange is
   lightened to #ffb067 so the active marker clears 3:1.
   ========================================================================== */

.main-header {
  border-bottom: 0;
}

.main-header .navbar,
.skin-green .main-header .navbar {
  background: var(--ril-bar) !important;
  background: var(--ril-bar-grad) !important;
  border-bottom: 0 !important;
  /* A hairline of the lighter stop, so the bar meets the white page on a
     defined edge rather than a hard colour break. */
  box-shadow: 0 1px 0 rgba(14, 118, 166, .55),
              0 2px 6px rgba(11, 45, 66, .18);
  min-height: 48px;
}

/* Top-level items --------------------------------------------------------- */

.main-header .navbar .nav > li > a,
.skin-green .main-header .navbar .nav > li > a {
  color: var(--ril-bar-text) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 13px 14px;
  background: transparent !important;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.skin-green .main-header .navbar .nav > li > a:hover,
.skin-green .main-header .navbar .nav > li > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
}

.main-header .navbar .nav > .active > a,
.main-header .navbar .nav > .open > a,
.main-header .navbar .nav > .active > a:hover,
.main-header .navbar .nav > .open > a:hover,
.skin-green .main-header .navbar .nav > .active > a,
.skin-green .main-header .navbar .nav > .open > a {
  color: #fff !important;
  background: rgba(255, 255, 255, .14) !important;
  border-bottom-color: var(--ril-bar-underline) !important;
  font-weight: 600;
}

.main-header .navbar .nav > li > a i,
.skin-green .main-header .navbar .nav > li > a i {
  color: inherit !important;
  margin-right: 6px;
  opacity: .9;
}

.main-header .navbar .sidebar-toggle,
.skin-green .main-header .navbar .sidebar-toggle {
  color: var(--ril-bar-text) !important;
  background: transparent !important;
}

.main-header .navbar .sidebar-toggle:hover,
.skin-green .main-header .navbar .sidebar-toggle:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .10) !important;
}

.navbar-toggle {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

.navbar-toggle .fa {
  color: #fff;
}

/* ==========================================================================
   4. Dropdown menus
   Menu items are a single scannable column: one icon rail, one label, no
   dividers. Depth comes from the panel, not from lines between rows.
   ========================================================================== */

.dropdown-menu {
  border: 1px solid var(--ril-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16, 24, 40, .14),
              0 2px 6px rgba(16, 24, 40, .06) !important;
  padding: 7px;
  margin-top: 8px;
  min-width: 248px;
  background: var(--ril-surface);
  overflow: visible;
}

/* A small notch tying the panel to the nav item above it. */
.navbar-nav > .dropdown > .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 20px;
  width: 9px;
  height: 9px;
  background: var(--ril-surface);
  border-left: 1px solid var(--ril-border);
  border-top: 1px solid var(--ril-border);
  transform: rotate(45deg);
}

/* Items ------------------------------------------------------------------ */

.dropdown-menu > li > a,
.dropdown-menu > li > a.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--ril-radius-sm);
  color: var(--ril-text);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.35;
  white-space: normal;
  transition: background-color .12s ease, color .12s ease;
}

/* The icon rail: fixed width so every label starts on the same x. */
.dropdown-menu > li > a > i,
.dropdown-menu > li > a.nav-link > i {
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ril-text-faint);
  margin: 0;
  transition: color .12s ease;
}

.dropdown-menu > li > a > span {
  flex: 1;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > li > a.nav-link:hover,
.dropdown-menu > li > a.nav-link:focus,
.skin-green .main-header .navbar .dropdown-menu li a:hover {
  background: var(--ril-accent-wash) !important;
  color: var(--ril-accent) !important;
}

.dropdown-menu > li > a:hover > i,
.dropdown-menu > li > a.nav-link:hover > i {
  color: var(--ril-accent);
}

/* Current page ------------------------------------------------------------ */

.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover,
.dropdown-menu > li.active > a.nav-link,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
  background: var(--ril-accent-wash) !important;
  color: var(--ril-accent) !important;
  font-weight: 600;
}

.dropdown-menu > li.active > a > i,
.dropdown-menu > .active > a > i {
  color: var(--ril-accent);
}

/* Accent bar marking the active row. */
.dropdown-menu > li.active > a::before,
.dropdown-menu > .active > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ril-accent);
}

/* Section label ----------------------------------------------------------- */

.dropdown-menu > li.dropdown-header,
.dropdown-menu > .dropdown-header {
  padding: 8px 12px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ril-text-faint);
}

.dropdown-menu .divider {
  background-color: var(--ril-border);
  margin: 6px 5px;
  height: 1px;
}

/* Nested flyouts ---------------------------------------------------------- */

.dropdown-menu .dropdown-submenu > a::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid var(--ril-text-faint);
  border-bottom: 1.5px solid var(--ril-text-faint);
  transform: rotate(-45deg);
}

.dropdown-menu .submenu {
  top: -7px;
  left: 100%;
  margin-left: 3px;
  border-radius: 10px;
}

/* Opening motion ---------------------------------------------------------- */

.open > .dropdown-menu {
  animation: ril-menu-in .16s cubic-bezier(.2, .8, .3, 1);
}

@keyframes ril-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .open > .dropdown-menu {
    animation: none;
  }
}

/* The caret on a parent nav item turns with the menu. */
.navbar-nav > .dropdown > a .caret {
  margin-left: 5px;
  transition: transform .15s ease;
}

.navbar-nav > .dropdown.open > a .caret {
  transform: rotate(180deg);
}

/* User menu: same panel and same rows as every other dropdown. */

.navbar-nav > .user-menu > .dropdown-menu {
  right: 0;
  left: auto;
  min-width: 240px;
}

/* Notch aligns to the right edge, since this menu is right-anchored. */
.navbar-nav > .user-menu > .dropdown-menu::before {
  left: auto;
  right: 22px;
}

/* Mobile: the collapsed nav is a flat list, so drop the panel treatment. */
@media (max-width: 767px) {
  .navbar-collapse .dropdown-menu {
    box-shadow: none !important;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0 0 4px;
    background: var(--ril-surface-alt);
    min-width: 0;
  }

  .navbar-collapse .dropdown-menu::before {
    display: none;
  }

  .navbar-collapse .dropdown-menu > li > a {
    border-radius: 0;
    padding-left: 38px !important;
  }
}

/* ==========================================================================
   5. Box — the primary content container
   ========================================================================== */

.box {
  background: var(--ril-surface);
  border: 1px solid var(--ril-border);
  border-top: 1px solid var(--ril-border);   /* kill AdminLTE's 3px accent bar */
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow);
  margin-bottom: 14px;
}

/* AdminLTE colours the top border per box variant; flatten them all. */
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger,
.box.box-default {
  border-top-color: var(--ril-border);
}

.box-header {
  padding: 14px 18px;
  border-bottom: 1px solid transparent;
  display: block;
}

.box-header.with-border {
  border-bottom: 1px solid var(--ril-border);
}

.box-header > .box-title,
.box-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ril-text);
  line-height: 1.4;
}

.box-header > .box-tools {
  top: 10px;
  right: 14px;
}

.box-body {
  padding: 14px;
}

.box-footer {
  background: var(--ril-surface-alt);
  border-top: 1px solid var(--ril-border);
  padding: 14px 18px;
  border-radius: 0 0 var(--ril-radius) var(--ril-radius);
}

/* Small stat callouts */
.small-box {
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow);
}

.info-box {
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow);
  background: var(--ril-surface);
  border: 1px solid var(--ril-border);
}

/* ==========================================================================
   6. Tables
   ========================================================================== */

.table {
  font-size: 13px;
  color: var(--ril-text);
  margin-bottom: 0;
}

.table > thead > tr > th {
  background: var(--ril-surface-alt);
  border-bottom: 1px solid var(--ril-border-strong) !important;
  border-top: 0;
  color: var(--ril-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.table > tbody > tr > td {
  border-top: 1px solid var(--ril-border);
  padding: 10px 12px;
  vertical-align: middle;
}

.table > tbody > tr:hover > td {
  background: var(--ril-accent-wash);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--ril-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--ril-surface-alt);
}

/* A table that fills a box should meet its edges. */
.box-body > .table:first-child,
.box-body > .table-responsive > .table {
  margin-bottom: 0;
}

/* ==========================================================================
   7. DataTables
   ========================================================================== */

.dataTables_wrapper {
  padding: 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
  padding: 4px 8px;
  font-size: 13px;
  background: var(--ril-surface);
  color: var(--ril-text);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none;
  border-color: var(--ril-accent);
  box-shadow: 0 0 0 3px rgba(12, 111, 160, .12);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
  color: var(--ril-text-muted);
  font-size: 12px;
  padding: 10px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--ril-radius-sm) !important;
  border: 1px solid transparent !important;
  color: var(--ril-text-muted) !important;
  padding: 5px 10px !important;
  margin: 0 1px;
  background: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--ril-accent-wash) !important;
  border-color: var(--ril-border) !important;
  color: var(--ril-accent) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--ril-accent) !important;
  border-color: var(--ril-accent) !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: .45;
}

/* DataTables Buttons (copy / excel / pdf …) */
.dt-buttons .dt-button {
  background: var(--ril-surface) !important;
  border: 1px solid var(--ril-border-strong) !important;
  border-radius: var(--ril-radius-sm) !important;
  color: var(--ril-text) !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 6px 12px !important;
  box-shadow: none !important;
}

.dt-buttons .dt-button:hover {
  background: var(--ril-accent-wash) !important;
  border-color: var(--ril-accent) !important;
  color: var(--ril-accent) !important;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

.control-label,
label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ril-text-muted);
  margin-bottom: 5px;
}

.form-group {
  margin-bottom: 16px;
}

.form-control {
  height: auto;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--ril-text);
  background: var(--ril-surface);
  border: 1px solid var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
  border-color: var(--ril-accent);
  box-shadow: 0 0 0 3px rgba(12, 111, 160, .12);
  outline: none;
}

.form-control::placeholder {
  color: var(--ril-text-faint);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: var(--ril-surface-alt);
  color: var(--ril-text-muted);
  cursor: not-allowed;
}

.input-group-addon {
  background: var(--ril-surface-alt);
  border: 1px solid var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
  color: var(--ril-text-muted);
  font-size: 12px;
}

.has-error .form-control {
  border-color: var(--ril-danger);
}

.has-error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

.has-error .control-label,
.has-error .help-block {
  color: var(--ril-danger);
}

.help-block {
  font-size: 12px;
  color: var(--ril-text-muted);
}

/* Select2 — the app forces a 25px height in header.php; give it room. */
.select2-container .select2-selection--single {
  height: 30px !important;
  border: 1px solid var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 28px;
  padding-left: 11px;
  color: var(--ril-text);
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 28px;
}

.select2-container .select2-selection--multiple {
  min-height: 30px !important;
  border: 1px solid var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ril-accent);
  box-shadow: 0 0 0 3px rgba(12, 111, 160, .12);
}

.select2-dropdown {
  border-color: var(--ril-border-strong);
  border-radius: var(--ril-radius-sm);
  box-shadow: var(--ril-shadow-md);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--ril-accent);
}

/* ==========================================================================
   9. Buttons
   ========================================================================== */

.btn {
  border-radius: var(--ril-radius-sm);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease;
}

.btn:focus,
.btn:active:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(12, 111, 160, .18);
}

.btn-default {
  background: var(--ril-surface);
  border-color: var(--ril-border-strong);
  color: var(--ril-text);
}

.btn-default:hover,
.btn-default:focus {
  background: var(--ril-surface-alt);
  border-color: var(--ril-border-strong);
  color: var(--ril-text);
}

.btn-primary,
.btn-success {
  background: var(--ril-accent);
  border-color: var(--ril-accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: var(--ril-accent-hover);
  border-color: var(--ril-accent-hover);
  color: #fff;
}

.btn-info {
  background: var(--ril-accent-light);
  border-color: var(--ril-accent-light);
  color: #fff;
}

.btn-info:hover,
.btn-info:focus {
  background: #1877cc;
  border-color: #1877cc;
  color: #fff;
}

.btn-warning {
  background: var(--ril-warning);
  border-color: var(--ril-warning);
  color: #fff;
}

.btn-warning:hover,
.btn-warning:focus {
  background: #9a4708;
  border-color: #9a4708;
  color: #fff;
}

.btn-danger {
  background: var(--ril-danger);
  border-color: var(--ril-danger);
  color: #fff;
}

.btn-danger:hover,
.btn-danger:focus {
  background: #991d14;
  border-color: #991d14;
  color: #fff;
}

.btn-link {
  color: var(--ril-accent);
}

.btn-xs  { padding: 3px 8px;  font-size: 11px; }
.btn-sm  { padding: 5px 11px; font-size: 12px; }
.btn-lg  { padding: 10px 20px; font-size: 15px; }

.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* ==========================================================================
   10. Alerts, labels, badges
   ========================================================================== */

.alert {
  border: 1px solid transparent;
  border-radius: var(--ril-radius);
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: none;
}

.alert-success {
  background: var(--ril-success-wash);
  border-color: rgba(21, 115, 71, .25);
  color: var(--ril-success);
}

.alert-info {
  background: var(--ril-info-wash);
  border-color: rgba(12, 111, 160, .22);
  color: var(--ril-info);
}

.alert-warning {
  background: var(--ril-warning-wash);
  border-color: rgba(180, 83, 9, .25);
  color: var(--ril-warning);
}

.alert-danger,
.alert-error {
  background: var(--ril-danger-wash);
  border-color: rgba(180, 35, 24, .25);
  color: var(--ril-danger);
}

.label,
.badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 8px;
  border-radius: 20px;
}

.label-success { background: var(--ril-success-wash); color: var(--ril-success); }
.label-warning { background: var(--ril-warning-wash); color: var(--ril-warning); }
.label-danger  { background: var(--ril-danger-wash);  color: var(--ril-danger); }
.label-info,
.label-primary { background: var(--ril-info-wash);    color: var(--ril-info); }
.label-default { background: #eef0f3;                 color: var(--ril-text-muted); }

.badge {
  background: var(--ril-accent);
}

/* ==========================================================================
   11. Modals, tabs, pagination
   ========================================================================== */

.modal-content {
  border: 0;
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow-pop);
}

.modal-header {
  border-bottom: 1px solid var(--ril-border);
  padding: 16px 20px;
}

.modal-header .modal-title {
  font-size: 15px;
  font-weight: 600;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  border-top: 1px solid var(--ril-border);
  background: var(--ril-surface-alt);
  padding: 14px 20px;
  border-radius: 0 0 var(--ril-radius) var(--ril-radius);
}

.modal-backdrop.in {
  opacity: .4;
}

.nav-tabs {
  border-bottom: 1px solid var(--ril-border);
}

.nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ril-text-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  margin-right: 2px;
}

.nav-tabs > li > a:hover {
  background: var(--ril-accent-wash);
  border-bottom-color: var(--ril-border-strong);
  color: var(--ril-accent);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--ril-accent);
  color: var(--ril-accent);
  background: transparent;
  font-weight: 600;
}

.nav-tabs-custom {
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow);
  border: 1px solid var(--ril-border);
}

.nav-tabs-custom > .nav-tabs > li.active {
  border-top-color: var(--ril-accent);
}

.pagination > li > a,
.pagination > li > span {
  color: var(--ril-text-muted);
  border-color: var(--ril-border);
  padding: 6px 12px;
  font-size: 13px;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  border-radius: var(--ril-radius-sm) 0 0 var(--ril-radius-sm);
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-radius: 0 var(--ril-radius-sm) var(--ril-radius-sm) 0;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background: var(--ril-accent);
  border-color: var(--ril-accent);
  color: #fff;
}

.pagination > li > a:hover {
  background: var(--ril-accent-wash);
  border-color: var(--ril-border);
  color: var(--ril-accent);
}

/* ==========================================================================
   12. Misc framework bits used around the app
   ========================================================================== */

.main-footer {
  background: var(--ril-surface);
  border-top: 1px solid var(--ril-border);
  color: var(--ril-text-muted);
  font-size: 12px;
  padding: 14px 22px;
}

.progress {
  height: 8px;
  border-radius: 20px;
  background: #eceef1;
  box-shadow: none;
  margin-bottom: 0;
}

.progress-bar {
  background: var(--ril-accent);
  box-shadow: none;
}

.callout {
  border-radius: var(--ril-radius);
  border: 1px solid var(--ril-border);
  border-left-width: 3px;
  box-shadow: none;
}

hr {
  border-top-color: var(--ril-border);
}

.well {
  background: var(--ril-surface-alt);
  border-color: var(--ril-border);
  border-radius: var(--ril-radius);
  box-shadow: none;
}

/* Toastr sits above everything; align it with the palette. */
#toast-container > .toast {
  border-radius: var(--ril-radius);
  box-shadow: var(--ril-shadow-pop) !important;
  opacity: 1;
}

/* ==========================================================================
   13. Print — reports get printed from these screens
   ========================================================================== */

@media print {
  .main-header,
  .main-footer,
  .box-tools,
  .dt-buttons,
  .dataTables_filter,
  .dataTables_length,
  .dataTables_paginate {
    display: none !important;
  }

  .content-wrapper,
  .box {
    background: #fff;
    box-shadow: none;
    border: 0;
    margin: 0;
  }

  .table > thead > tr > th {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   14. Top bar — brand and user menu
   ========================================================================== */

/* Brand ------------------------------------------------------------------ */

.main-header .navbar-brand.ril-brand,
.skin-green .main-header .navbar .navbar-brand.ril-brand {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  margin: 0;
  text-decoration: none;
  /* Keeps the divider the old wordmark had. */
  border-right: 1px solid rgba(255, 255, 255, .22);
}

/* Served at 2x (160x80) so it stays crisp on high-DPI screens. */
.ril-brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

@media (max-width: 767px) {
  .ril-brand-logo {
    height: 26px;
  }
}

/* User menu --------------------------------------------------------------- */

.main-header .navbar .nav > li > a.ril-user,
.skin-green .main-header .navbar .nav > li > a.ril-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  height: 48px;
  border-bottom: 3px solid transparent;
}

.main-header .navbar .ril-user .user-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ril-border);
  margin: 0;
  object-fit: cover;
  background: var(--ril-surface-alt);
}

.ril-user-name {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

.ril-user-caret {
  font-size: 11px;
  color: #ffffff;
  opacity: .6;
}

/* ==========================================================================
   15. Panel headers and table headers
   Applied application-wide: a brand-blue box header with the orange marker,
   and a solid accent table header. Previously scoped to one view.
   ========================================================================== */

.box {
  overflow: hidden;
}

.box > .box-header.with-border {
  background: var(--ril-bar);
  background: var(--ril-bar-grad);
  border-bottom: 2px solid var(--ril-bar-underline);
  padding: 8px 14px;
  min-height: 0;
}

.box > .box-header.with-border > .box-title,
.box > .box-header.with-border > .box-title small,
.box > .box-header.with-border > h3 {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  margin: 0;
}

/* Icons and any plain text placed directly in the header. */
.box > .box-header.with-border > i,
.box > .box-header.with-border > .box-tools > span {
  color: #fff;
}

/* Buttons sit on the blue, so they read as outlines rather than competing
   fills. Covers the app's one-off .btn-upload as well. */
.box > .box-header.with-border .btn-info,
.box > .box-header.with-border .btn-upload,
.box > .box-header.with-border .btn-primary,
.box > .box-header.with-border .btn-success,
.box > .box-header.with-border .btn-default {
  background: rgba(255, 255, 255, .16) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 4px 11px !important;
  line-height: 18px;
  border-radius: var(--ril-radius-sm);
}

/* Keep the tool strip centred against the shorter header. */
.box > .box-header.with-border > .box-tools {
  top: 7px;
  right: 12px;
}

.box > .box-header.with-border .btn i,
.box > .box-header.with-border .btn .fa {
  font-size: 11px;
  margin-right: 4px;
}

.box > .box-header.with-border .btn-info:hover,
.box > .box-header.with-border .btn-upload:hover,
.box > .box-header.with-border .btn-primary:hover,
.box > .box-header.with-border .btn-success:hover,
.box > .box-header.with-border .btn-default:hover {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ril-bar) !important;
}

/* The close/collapse widgets AdminLTE puts in box-tools. */
.box > .box-header.with-border .btn-box-tool {
  color: rgba(255, 255, 255, .85) !important;
  background: transparent !important;
  border: 0 !important;
}

/* Table headers ----------------------------------------------------------- */

.table > thead > tr > th {
  background: var(--ril-accent) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .18) !important;
  border-bottom: 0 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* DataTables draws its sort arrows inside the header cells. */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
  color: #fff;
  opacity: .85;
}

/* Filter strips that sit between the header and the table. */
.box .panel-body {
  background: var(--ril-surface) !important;
  border-bottom: 1px solid var(--ril-border);
}

.box .panel-body label {
  color: var(--ril-text-muted);
  font-weight: 600;
}

/* A box with no bordered header keeps a plain top edge. */
.box > .box-header:not(.with-border) > .box-title {
  color: var(--ril-text);
}

/* ==========================================================================
   16. Horizontal forms
   ========================================================================== */

/* Bootstrap right-aligns these at >=768px; the padding lines the text up with
   the middle of a 34px field instead of the top of it. */
.form-horizontal .control-label {
  padding-top: 6px;
  margin-bottom: 0;
  line-height: 1.35;
}

.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}

/* Selects and inputs share a height so rows line up across columns. */
.form-control,
select.form-control,
textarea.form-control {
  min-height: 30px;
}

select.form-control {
  padding-right: 26px;
}

textarea.form-control {
  min-height: 62px;
  padding-top: 6px;
}

/* The password-strength meter is empty until the plugin fills it, and an
   empty .progress track reads as a stray grey slab under the field. Keep the
   space reserved but invisible until a bar actually appears. */
.form-group .progress,
.form-horizontal .progress {
  background: transparent;
  height: 4px;
  margin-top: 6px;
  box-shadow: none;
}

.form-group .progress .progress-bar,
.form-horizontal .progress .progress-bar {
  border-radius: 20px;
}

/* Static text rendered in place of a field. */
.form-control-static {
  padding-top: 6px;
  min-height: 30px;
  color: var(--ril-text);
}

/* Inline help and required markers. */
.control-label.required:after,
label.required:after {
  content: " *";
  color: var(--ril-danger);
}

/* Action row at the foot of a form. */
.form-horizontal .form-group:last-child {
  margin-bottom: 0;
}

.form-horizontal .btn + .btn {
  margin-left: 6px;
}