/*
  Site-wide UI refresh.
  Auto-loaded by Perfex on top of style.css (see assets_helper.php /
  template_helper.php: both check `file_exists(FCPATH . 'assets/css/custom.css')`),
  so every admin page and external form picks this up without touching the
  core style.css / style.min.css build.
*/

/* ============================= Base ============================= */

body {
  background: #eef1f5;
}

#wrapper {
  background: #eef1f5;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================= Header ============================= */

#header {
  border-bottom: 1px solid #e7eaf0;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / 0.04);
}

/* ============================= Sidebar (dark) ============================= */

.sidebar {
  background: #1b2431;
  border-right-color: rgba(255, 255, 255, 0.06);
}

[dir="rtl"] .sidebar {
  border-left-color: rgba(255, 255, 255, 0.06);
}

.sidebar ul.nav li a {
  color: #a7b1c2;
}

.sidebar ul.nav li a i.menu-icon {
  color: #74829a;
}

.sidebar>ul.nav>li:hover a:first-child,
.sidebar>ul.nav>li.active a:first-child {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.sidebar ul.nav li.active>a,
.sidebar ul.nav>li>a:hover,
.sidebar ul.nav>li>a:focus,
.sidebar ul.nav>li>a:hover .menu-icon,
.sidebar ul.nav>li>a:focus .menu-icon {
  color: #ffffff;
}

.sidebar ul.nav li.active>a .menu-icon {
  color: #5b9bff;
}

.sidebar ul.nav li .nav-second-level li a {
  color: #8b96a9;
}

.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:hover,
.sidebar ul.nav>li .nav-second-level>li:not(.active)>a:focus {
  color: #ffffff;
}

.sidebar ul.nav li .nav-second-level a:hover .menu-icon,
.sidebar ul.nav li .nav-second-level a:focus .menu-icon {
  color: #ffffff;
}

.sidebar .arrow,
.sidebar .fa.arrow {
  color: #74829a;
}

/*
  is_admin_sidebar_background_light() doesn't exist in this codebase, so
  aside.php always renders the profile card with light-sidebar text
  classes. Force readable colors here since the sidebar itself is now dark.
*/
.sidebar .sidebar-user-profile .profile {
  color: #e7ebf1 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.sidebar .sidebar-user-profile .profile:hover,
.sidebar .sidebar-user-profile .profile:focus {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .sidebar-user-profile .profile .tw-font-semibold {
  color: #ffffff;
}

.sidebar .sidebar-user-profile .profile .tw-font-normal {
  color: #8b96a9 !important;
}

/* ============================= Cards / panels ============================= */

.panel,
.panel_s {
  border-color: #e5e9f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.05);
}

.panel-heading {
  border-radius: 9px 9px 0 0;
}

.panel-footer {
  border-radius: 0 0 9px 9px;
}

/* ============================= Buttons ============================= */

.btn {
  border-radius: 8px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.btn-default {
  border-color: #d8dde5;
}

.dropdown-menu {
  border-color: #e5e9f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px -4px rgb(15 23 42 / 0.12), 0 2px 6px -2px rgb(15 23 42 / 0.08);
  padding: 6px;
}

.dropdown-menu>li>a {
  border-radius: 6px;
}

/* ============================= Forms ============================= */

.form-control,
select.form-control,
.selectize-input,
.bootstrap-select>.btn {
  border-radius: 8px;
  border-color: #d8dde5;
}

.form-control:focus,
.selectize-input.focus {
  border-color: #e8c792;
  box-shadow: 0 0 0 3px rgb(209 161 83 / 0.12);
}

/* ============================= Tables ============================= */

.table>thead>tr>th {
  border-bottom-width: 1px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: .02em;
}

.table>tbody>tr>td,
.table>tbody>tr>th {
  border-color: #eef1f5;
}

.table-hover>tbody>tr:hover {
  background-color: #f7f9fb;
}

/* ---------- Brand color overrides for Bootstrap defaults (#337ab7 -> #d1a153) ---------- */

a {
  color: #d1a153;
}

a:hover,
a:focus {
  color: #b8842e;
}

.text-primary,
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
.panel-primary > .panel-heading .badge {
  color: #d1a153;
}

a.text-primary:hover,
a.text-primary:focus {
  color: #b8842e;
}

.bg-primary {
  background-color: #d1a153;
}

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: #b8842e;
}

.btn-primary {
  background: #d1a153;
  border-color: #d1a153;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: #b8842e !important;
  border-color: #b8842e !important;
}

.btn-link {
  color: #d1a153;
}

.btn-link:hover,
.btn-link:focus {
  color: #b8842e;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus,
.label-primary,
.progress-bar,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.panel-primary > .panel-heading {
  background-color: #d1a153;
  border-color: #d1a153;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #b8842e;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active,
.panel-primary,
.panel-primary > .panel-heading + .panel-collapse > .panel-body,
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-color: #d1a153;
}

.pagination > li > a,
.pagination > li > span {
  color: #d1a153;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #b8842e;
}