/* prevent the drop down icon going onto a new line for the top bar language link */
.top-bar-language-nav-link {
  min-width: 65px;
}

/* bootstrap model showing two scroll bars */
html {
  overflow: visible;
}

/* main sidebar not under model */
.modal {
  z-index: 1110;
}

.form-group.required .col-form-label:after {
  color: #d00;
  content: "*";
  position: absolute;
  margin-left: 3px;
}

.nav-user-menu .user-image {
  width: 20px;
  margin-right: 4px;
  margin-top: -4px;
}

.famfamfam-flags {
  display: inline-block;
}

.sidebar ul li p {
  white-space: nowrap !important;
  text-overflow: ellipsis;
  transition: opacity 0.5s ease-in-out !important;
  opacity: 1;
}

.sidebar-mini .main-sidebar .sidebar,
.sidebar-mini .main-sidebar .sidebar:hover {
  overflow-x: auto !important;
  width: 250px;
  transition: width 0.3s ease-in-out;
}

/* =====================================================
   Compact Datatable Action Buttons (global)
   Icon-only, single-line, professional look
   ===================================================== */

/* Compact size for all table action buttons */
table.dataTable .btn.btn-sm,
.table .btn.btn-sm {
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 4px;
  white-space: nowrap;
}

/* Make icons slightly smaller to match compact buttons */
table.dataTable .btn.btn-sm i,
.table .btn.btn-sm i {
  font-size: 0.72rem;
  margin-right: 0 !important;
}

/* Keep action buttons in a compact single row with gap */
table.dataTable .d-flex,
.table .d-flex {
  gap: 3px;
  align-items: center;
  flex-wrap: nowrap;
}

/* =====================================================
   Theme Customization (Left hand menu color matching)
   ===================================================== */
:root {
  --theme-primary: #1e8181;
  --theme-secondary: #004E50;
  --sidebar-bg: #00383a;
  --sidebar-brand-bg: #002d2f;
  --sidebar-hover-bg: #004d50;
  --sidebar-text: #c2ecec;
  --sidebar-border: #004d50;
}

.main-sidebar.sidebar-dark-primary {
  background-color: var(--sidebar-bg) !important;
}

.main-sidebar.sidebar-dark-primary .brand-link {
  background-color: var(--sidebar-brand-bg) !important;
  border-bottom: 1px solid var(--sidebar-border) !important;
}

.main-sidebar.sidebar-dark-primary .brand-link .brand-text {
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .user-panel {
  border-bottom: 1px solid var(--sidebar-border) !important;
}

.main-sidebar.sidebar-dark-primary .user-panel a {
  color: var(--sidebar-text) !important;
}

.main-sidebar.sidebar-dark-primary .user-panel a:hover {
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
  color: var(--sidebar-text) !important;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .nav-treeview {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link {
  color: var(--sidebar-text) !important;
}

.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link:hover {
  background-color: var(--sidebar-hover-bg) !important;
  color: #ffffff !important;
}

.main-sidebar.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
  background-color: var(--theme-primary) !important;
  color: #ffffff !important;
}

/* =====================================================
   Pin / Unpin Favorite Star in Sidebar Menu
   ===================================================== */
.btn-pin-favorite {
  cursor: pointer;
  padding: 0 4px;
  display: inline-block;
  opacity: 0.65;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.btn-pin-favorite:hover {
  opacity: 1;
  transform: scale(1.25);
}

.btn-pin-favorite.is-pinned {
  opacity: 1;
}

.btn-pin-favorite .pin-icon-hover {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.nav-link:hover .btn-pin-favorite .pin-icon-hover,
.btn-pin-favorite:hover .pin-icon-hover {
  opacity: 0.85;
}

.btn-pin-favorite.is-pinned .fa-star {
  color: #ffc107 !important;
  text-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
}

/* =====================================================
   Global Purchase Request Design System (Standardized)
   ===================================================== */

/* Content Header Icon & Title Alignment */
.content-header h1 {
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.content-header h1 i {
  font-size: 1.5rem;
}

/* Card Outline Accent (Primary Blue Top Border on ALL content cards) */
.content .card,
.content-wrapper .card,
.card-outline.card-primary,
.card.card-primary.card-outline {
  border-top: 3px solid #007bff !important;
  box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
  border-radius: 4px;
}

/* Tab Strip Styling */
.card-tabs .card-header .nav-tabs .nav-link {
  font-weight: 600;
  font-size: 14px;
  color: #007bff;
  padding: 10px 16px;
  border-top: 3px solid transparent;
}
.card-tabs .card-header .nav-tabs .nav-link.active {
  color: #212529;
  border-top-color: #007bff;
  background-color: #ffffff;
}

/* Search & Filter Row Buttons */
.content-filter-row {
  margin-bottom: 1rem;
}
.btn-info,
.btn-search-cyan,
.content button[id*="Search"],
.content button[id*="btnSearch"] {
  background-color: #17a2b8 !important;
  border-color: #17a2b8 !important;
  color: #ffffff !important;
}
.btn-info:hover,
.btn-search-cyan:hover,
.content button[id*="Search"]:hover,
.content button[id*="btnSearch"]:hover {
  background-color: #138496 !important;
  border-color: #117a8b !important;
}
.btn-secondary,
.content button[id*="Clear"],
.content button[id*="btnClear"] {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}
.btn-secondary:hover,
.content button[id*="Clear"]:hover,
.content button[id*="btnClear"]:hover {
  background-color: #5a6268 !important;
  border-color: #545b62 !important;
}
.btn-success,
.content [id*="btnExport"],
.content [id*="bttNew"],
.content a[href*="/Create"] {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #ffffff !important;
}
.btn-success:hover,
.content [id*="btnExport"]:hover,
.content [id*="bttNew"]:hover,
.content a[href*="/Create"]:hover {
  background-color: #218838 !important;
  border-color: #1e7e34 !important;
}

/* Universal Data Table Dark Header across ALL Feature pages */
.thead-dark th,
.bg-black-header th,
.content table thead th,
table.table thead th,
table.table thead.thead-dark th,
table.dataTable thead th,
table.grid-view thead th {
  background-color: #1e252b !important;
  color: #ffffff !important;
  border-color: #32383e !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  padding: 8px 12px !important;
}

/* Table Body Formatting across all feature pages */
.table-bordered {
  border: 1px solid #dee2e6;
}
.table-sm td, .table-sm th,
.table td, .table th,
table.dataTable tbody td {
  padding: 0.45rem 0.6rem;
  vertical-align: middle;
}

/* Compact Table Action Buttons Alignment */
.content table .btn-action,
.content table td .btn-sm,
table.dataTable td .btn-sm {
  padding: 0.22rem 0.45rem !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
  border-radius: 4px !important;
}

/* =====================================================
   RyEMS Global Brand Logo Styling
   ===================================================== */
.ryems-brand-link {
  display: flex !important;
  align-items: center;
  padding: 0.8125rem 0.8rem !important;
  transition: all 0.2s ease;
}

.ryems-brand-link .ryems-brand-mark {
  width: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  margin-left: 0.2rem !important;
  margin-right: 0.75rem !important;
  border-radius: 8px;
  filter: drop-shadow(0 2px 8px rgba(0, 102, 255, 0.45));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.ryems-brand-link:hover .ryems-brand-mark {
  transform: scale(1.08) rotate(2deg);
  filter: drop-shadow(0 4px 12px rgba(0, 210, 255, 0.6));
}

.ryems-brand-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  letter-spacing: -0.2px;
}

.ryems-brand-name .brand-ry {
  background: linear-gradient(135deg, #00d2ff 0%, #0070f3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.ryems-brand-name .brand-ems {
  color: #ffffff;
  font-weight: 900;
}

.ryems-brand-badge {
  font-size: 0.65rem !important;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 6px;
  background: linear-gradient(135deg, #0f4c81 0%, #00a09d 100%) !important;
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #ffffff !important;
  text-transform: uppercase;
}