/* ==========================================================================
   1. GLOBAL VARIABLES & UTILITIES (Merged from Second Code)
   ========================================================================== */
:root {
  --control-height: 38px;
  /* match Bootstrap input height */
}

.bold {
  font-weight: bold !important;
}

.important::after {
  content: '*';
  color: red;
}

.hidden {
  display: none !important;
}

textarea {
  resize: none;
}

.fa-2x {
  font-size: 2em !important;
}

/* ==========================================================================
   2. GLOBAL LAYOUT & BRANDING FIXES (From First Code)
   ========================================================================== */
.logo-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 15px !important;
  height: 70px;
}

.sidebar-logo {
  max-height: 32px !important;
  width: auto !important;
  object-fit: contain;
}

/* Added from Second Code */
.logo-icon {
  max-width: 30px !important;
}

/* Global Navbar Overlap Fix - Increased to 130px to clear the 94px fixed navbar with a ~36px gap */
.page-wrapper.compact-wrapper .page-body {
  margin-top: 130px !important;
}

@media (max-width: 991px) {
  /*
  .page-wrapper.compact-wrapper .page-body {
    margin-top: 110px !important;
  }
  */
}

/* Header Logo Constraint Fix */
.header-wrapper .logo-wrapper img,
.page-header .header-logo-wrapper img {
  height: 30px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

/* Login Page Logo Fix */
.login-logo {
  max-width: 150px !important;
  margin-bottom: 20px;
}

/* ==========================================================================
   3. SIDEBAR & NAVIGATION STYLING (Merged from Second Code)
   ========================================================================== */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li .sidebar-link.active span {
  color: var(--theme-deafult);
  transition: all 0.3s ease;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li a.active .stroke-icon {
  color: var(--theme-deafult);
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content>li a:hover .stroke-icon {
  color: var(--theme-deafult) !important;
}

.stroke-icon {
  color: rgba(82, 82, 108, 0.8);
}

/* ==========================================================================
   4. DASHBOARD & SETTINGS CARDS (From First Code - "Colorful" Restoration)
   ========================================================================== */
.settings-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.settings-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Added wrapper from Second Code for alignment */
.settings-icon-wrapper {
  display: flex;
  justify-content: center;
}

.settings-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #fff !important;
  font-size: 22px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.settings-icon.programs {
  background: linear-gradient(135deg, #7366ff 0%, #a29bfe 100%);
}

.settings-icon.donors {
  background: linear-gradient(135deg, #F73164 0%, #ff80b0 100%);
}

.settings-icon.grants {
  background: linear-gradient(135deg, #51BB25 0%, #a2d149 100%);
}

.settings-icon.projects {
  background: linear-gradient(135deg, #a66dd4 0%, #c496e6 100%);
}

.settings-icon.states {
  background: linear-gradient(135deg, #f8d62b 0%, #fbe681 100%);
}

.settings-icon.departments {
  background: linear-gradient(135deg, #544fff 0%, #827fff 100%);
}

.settings-icon.budget {
  background: linear-gradient(135deg, #ff9f40 0%, #ffc080 100%);
}

.settings-icon.exchange {
  background: linear-gradient(135deg, #16aaff 0%, #70c9ff 100%);
}

.settings-icon.car-hire {
  background: linear-gradient(135deg, #483d8b 0%, #6a5acd 100%);
}

.settings-icon.hotel {
  background: linear-gradient(135deg, #d2691e 0%, #cd853f 100%);
}

.settings-icon.perdiem {
  background: linear-gradient(135deg, #708090 0%, #778899 100%);
}

.settings-icon.designations {
  background: linear-gradient(135deg, #32cd32 0%, #90ee90 100%);
}

.settings-card h6,
.settings-card h5 {
  font-weight: 700;
  color: #2c323f;
  margin-top: 10px;
}

/* ==========================================================================
   5. TABLES & FORMS (Merged Mix)
   ========================================================================== */

/* From Second Code: Rounded Table */
.rounded-table {
  border-collapse: separate;
  /* VERY IMPORTANT */
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  /* clips inner cells */
  border: 1px solid #ccc;
}

/* From Second Code: Compact Table */
.table-compact th,
.table-compact td {
  padding: 10px 6px;
  font-size: 13px;
  line-height: 1.2;
}


.table-small th,
.table-small td {
  padding: 5px 3px;
  font-size: 12px;
  line-height: 1.2;
}

.table-small2 th,
.table-small2 td {
  padding: 2px 3px;
  font-size: 12px;
  line-height: 1.2;
}

.currency-select {
  width: 100% !important;
}

.table-small2 .form-control {
  font-size: 12px;
  padding: 3px !important;
  height: 30px !important;
}

.select2-search__field {
  min-width: 100px !important;
}

.table-small2 select {
  /* height: 30px !important; */
}

.table-small2 .select2-container .select2-selection--single {
  height: 30px !important;
}

.table-small2 .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 0 0 12px !important;
}

.table-small2 .select2-container .select2-selection--single {
  /* border-radius: 0.25rem !important;
    border-color: #efefef;
    height: 47px !important; */
  padding: 0px !important;
}

/* .table-small2 .select2-container .select2-selection--single {
  height: 30px !important;
}

.table-small2 .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 30px !important;
}

.table-small2 .select2-container .select2-selection--single .select2-selection__arrow {
  height: 30px !important;
}
 */


/* From Second Code: Global Form Control Height */
.form-control:not(textarea),
.form-select {
  height: var(--control-height);
}

/* From Second Code: Global Select2 Fixes */
/* .select2-container--default .select2-selection--single {
  border-color: #efefef !important;
}

.select2-container .select2-selection--multiple {
  min-height: var(--control-height);
  display: flex;
  align-items: center;
  padding: 2px 6px;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  align-items: center;
  gap: 4px;
}

.select2-container .select2-selection--multiple .select2-search__field {
  margin-top: 0;
} */

/* ==========================================================================
   6. SECURITY MODULE SPECIFIC STYLING (Isolated with .security-page)
   ========================================================================== */

/* Refined Filter Container */
.security-page .filter-container {
  background: #ffffff;
  border: 1px solid #dee2e6 !important;
  border-left: 3px solid #7366ff !important;
  border-radius: 10px;
  padding: 15px 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.security-page .filter-container label {
  color: #495057 !important;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.security-page .select2-filter+.select2-container .select2-selection--single {
  height: 38px !important;
  border: 1px solid #dee2e6 !important;
  padding-top: 4px;
}

.security-page #expectedChart,
.security-page #distributionChart {
  width: 100%;
  margin: 0 auto;
  min-height: 210px !important;
}

.security-page .page-title {
  padding-bottom: 20px !important;
}

.security-page .card-header h6 {
  font-weight: 700;
  color: #2c323f;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
}

.security-page .card-header h6::before {
  content: '';
  width: 3px;
  height: 16px;
  background: #dee2e6;
  margin-right: 10px;
  border-radius: 2px;
}

.security-page .static-top-widget h4 {
  font-weight: 700;
  font-size: 22px !important;
}

.security-page .static-top-widget span {
  font-size: 13px !important;
  opacity: 0.9;
}

.security-page .visitor-datatable thead th {
  background-color: #f8f9fa !important;
  color: #2c323f !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  padding: 12px 10px !important;
  border-bottom: 2px solid #edeff2 !important;
}

.security-page .visitor-datatable tbody td {
  padding: 10px 10px !important;
  vertical-align: middle !important;
  font-size: 13px;
  border-bottom: 1px solid #f0f2f5 !important;
  color: #2c323f !important;
  /* Explicitly dark for visibility */
}

.security-page .visitor-datatable tbody td strong {
  color: #1c212b !important;
  font-weight: 700;
}

.security-page .visitor-datatable tbody tr {
  transition: background-color 0.2s ease;
}

.security-page .visitor-datatable tbody tr:hover {
  background-color: rgba(115, 102, 255, 0.03) !important;
}

.security-page .nav-tabs {
  margin-bottom: 20px !important;
  border-bottom: none !important;
}

.security-page .nav-tabs .nav-link {
  background-color: #f8f9fa !important;
  border: 1px solid #edeff2 !important;
  margin-right: 15px;
  border-radius: 30px !important;
  color: #898989 !important;
  /* Subdued gray for inactive */
  font-size: 13px;
  padding: 8px 22px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  display: flex;
  align-items: center;
  opacity: 0.8;
}

.security-page .nav-tabs .nav-link i {
  font-size: 16px;
  margin-right: 8px;
  filter: grayscale(100%);
  /* Make inactive icons gray */
  opacity: 0.7;
}

.security-page .nav-tabs .nav-link.active {
  background-color: #7366ff !important;
  /* Primary Purple */
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(115, 102, 255, 0.3);
  border-color: #7366ff !important;
  opacity: 1;
}

.security-page .nav-tabs .nav-link.active i {
  filter: grayscale(0%);
  /* Restore icon color */
  opacity: 1;
  color: #ffffff !important;
  /* Make icon white on primary background for contrast */
}

/* Colored Tab Icons */
.security-page .nav-tabs #expected-tab i {
  color: #f8d62b;
}

/* Warning/Yellow */
.security-page .nav-tabs #staff-req-tab i {
  color: #16aaff;
}

/* Info/Blue */
.security-page .nav-tabs #walkins-tab i {
  color: #51BB25;
}

/* Success/Green */
.security-page .nav-tabs #history-tab i {
  color: #7366ff;
}

/* Primary/Purple */

/* Fix Readonly Visibility (Check-in Modal) */
.security-page .form-control:read-only,
.security-page .form-control[readonly],
.modal .form-control:read-only,
.modal .form-control[readonly] {
  background-color: #f4f6f9 !important;
  color: #1a1c21 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  border: 1px solid #ced4da !important;
}

.security-page .dashboard-actions .btn {
  padding: 3px 8px !important;
  font-size: 11px !important;
  white-space: nowrap;
}

.security-page .badge-light.text-dark {
  background-color: #f0f2f5;
  color: #444 !important;
  border: 1px solid #e1e4e8;
}

/* ==========================================================================
   7. FOOTER FIXES
   ========================================================================== */
.footer {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  z-index: 2;
}

@media (max-width: 991px) {
  .page-wrapper.compact-wrapper .page-body-wrapper .footer {
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    position: relative !important;
  }

  .footer .footer-copyright {
    text-align: center !important;
    width: 100% !important;
    padding: 0 15px !important;
  }

  .footer .footer-copyright p {
    width: 100% !important;
    white-space: normal !important;
    display: block !important;
  }
}

/* ==========================================================================
   UI ALIGNMENT FIXES
   ========================================================================== */
/* Ensure DataTables plugins don't strip background colors from our primary headers */
table thead.bg-primary th,
.dataTables_scrollHeadInner table thead.bg-primary th,
.dataTables_wrapper .dataTables_scrollHead table thead.bg-primary th {
  background-color: #7366ff !important;
  color: white !important;
}

/* .line-total-budget {
  background-color: #DBEAFE !important;
  color: lightblue;
}

.line-advance {
  background-color: #FEF3C7 !important;
  color: lightsalmon;
} */

.total-budget {
  color: #DC2626;
  font-weight: bold;
  font-size: 1rem;
  background-color: white !important;
  background: white !important;
}

.total-advance {
  color: teal;
  background-color: white !important;
  background: white !important;
  font-weight: bold;
  font-size: 1rem;
}