/* Global body background - light blue gradient */
body {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%) !important;
  min-height: 100vh;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}

/* Main content wrapper background for readability */
.content-wrapper {
  background-color: rgba(255, 255, 255, 0.95);
  /* Remove conflicting min-height - now handled by layout template */
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Card backgrounds for better contrast */
.card {
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Bootstrap 3.7 visibl-* depreciated this adjust second has margin only in small view */
@media (min-width: 768px) {
  div.visible-xs {
    margin-top: 0;
  }
}

/* flash message padding align */
#flash-messages div {
  padding-left: 1rem;
}

.brand_title {
  font-size: 2.2em;
  vertical-align: middle;
  font-family: "Crimson Text", serif;
  font-weight: bold;
  white-space: nowrap;
  padding-top: 1em;
  padding-left: 1em;
  color: #1b3294;
}
@media screen and (max-width: 998px) {
  .brand_title {
    display: none;
  }
}

.brand_second_title {
  vertical-align: middle;
  font-family: "Crimson Text", serif;
  font-weight: bold;
  white-space: nowrap;
  color: #1b3294;
}
@media screen and (max-width: 1130px) {
  .brand_second_title {
    display: none;
  }
}

#websiteTitle {
  padding-top: 10%;
  font-size: 3.8em;
  vertical-align: middle;
  font-family: "Crimson Text", serif;
  padding-left: 15px;
  color: #1b3294;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

#header_title {
  padding-top: 5em;
  padding-bottom: 5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 768px) {
  #header_title {
    padding-top: 6em;
  }
}
@media screen and (max-width: 480px) {
  .UC_brand {
    display: none;
  }
}
#websiteSlogan {
  font-size: 2.6em;
  vertical-align: middle;
  font-family: "Crimson Text", serif;
  padding-left: 15px;
  color: #1b3294;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

/* Admin dashboard
-------------------------------------------------- */
#bulk_actions {
  display: none;
  padding-bottom: 8px;
}
#scope {
  margin-bottom: 0;
  width: 160px;
  height: 35px;
  font-weight: 400;
  font-size: 14px;
}
.sort:after {
  content: "\f0dc";
  font-family: FontAwesome;
  margin-left: 6px;
  color: #bbb;
}
.asc:after {
  content: "\f0dd";
  font-family: FontAwesome;
  margin-left: 6px;
  color: #444;
}
.desc:after {
  content: "\f0de";
  font-family: FontAwesome;
  margin-left: 6px;
  color: #444;
}

/* Margin and padding
-------------------------------------------------- */
.lg-margin-bottom {
  margin-bottom: 60px;
}

.md-margin-bottom {
  margin-bottom: 40px;
}

.lg-margin-top {
  margin-top: 60px;
}

.md-margin-top {
  margin-top: 40px;
}

.sm-margin-top {
  margin-top: 20px;
}

.sm-margin-bottom {
  margin-bottom: 20px;
}

.md-padding-top {
  padding-top: 40px;
}
.sm-padding-top {
  padding-top: 20px;
}
/* Bootstrap overrides
-------------------------------------------------- */
label {
  font-weight: 400;
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: 0;
}
.alert {
  padding-left: 16.7777%;
}

.alert-small {
  padding: 5px;
  margin-bottom: 0;
}

.alert-error,
.alert-message {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-error hr,
.alert-message hr {
  border-top-color: #e4b9c0;
}

.alert-error .alert-link,
.alert-message .alert-link {
  color: #843534;
}

dd {
  margin-bottom: 8px;
}
/* Eduqueue Template
-------------------------------------------------- */
#view-source {
  position: fixed;
  display: block;
  right: 0;
  bottom: 0;
  margin-right: 40px;
  margin-bottom: 40px;
  z-index: 900;
}
/* Admin Dashboards
-------------------------------------------------- */
.paginationfooter {
  width: 100%;
  border: None;
  display: -webkit-flex; /* Safari */
  -webkit-justify-content: space-around; /* Safari 6.1+ */
  justify-content: space-around;
}
#cpic {
  display: none;
}
canvas {
  display: none;
}
.flex-container {
  display: flex;
  flex-direction: row; /* make main axis horizontal (default value) */
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.space-between {
  justify-content: space-between;
}
.space-around {
  justify-content: space-around;
}
.space-end {
  justify-content: flex-end;
}
.center {
  align-items: center;
  justify-content: center;
}
.flex-item {
  margin: 5px;
  text-align: left;
}
.flex-item-center {
  margin: 5px;
  text-align: center;
}
.flex-one {
  flex: 1;
  margin: 5px;
  text-align: left;
}
.flex-two {
  flex: 2;
  margin: 5px;
  text-align: right;
}

/* Layout fixes for sidebar alignment */
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  max-width: none;
}

/* Table responsiveness */
.table-responsive {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > .table {
  margin-bottom: 0;
}

/* Prevent content overflow */
.card-body {
  overflow-x: auto;
}

/* DataTables wrapper fixes */
.dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  margin-bottom: 0.5rem;
}

/* Form responsiveness */
.form-group {
  margin-bottom: 1rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Button styling consistency */
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* GLOBAL MODAL FIX - Ensures ALL modals work properly across the entire application */

/* Modal backdrop should be behind modal content */
.modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1040 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

/* Modal container */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1050 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  outline: 0 !important;
}

.modal.show {
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Modal dialog should be above backdrop */
.modal-dialog {
  position: relative !important;
  z-index: 1051 !important;
  margin: 1.75rem auto !important;
}

/* Modal content should be above everything */
.modal-content {
  position: relative !important;
  z-index: 1052 !important;
  background-color: white !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 0.3rem !important;
  outline: 0 !important;
}

/* Remove all filters from modal elements */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}

/* Ensure barcode scanner doesn't affect other modals when hidden */
#barcode-scanner-overlay[style*="display: none"] {
  pointer-events: none !important;
}

/* Force visitor detail modal above everything */
.visitor-detail-modal {
  z-index: 1060 !important;
}

.visitor-detail-modal ~ .modal-backdrop,
.modal-backdrop.visitor-detail-backdrop {
  z-index: 1059 !important;
}

.visitor-detail-modal .modal-dialog {
  z-index: 1061 !important;
}

.visitor-detail-modal .modal-content {
  z-index: 1062 !important;
  background: white !important;
  opacity: 1 !important;
}

/* Ensure all interactive elements in modals work */
.modal button,
.modal a,
.modal input,
.modal select,
.modal textarea,
.modal .close,
.modal [data-dismiss="modal"] {
  pointer-events: all !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Fix for any custom modal classes */
.visitor-detail-modal,
.student-detail-modal {
  pointer-events: none !important;
}

.visitor-detail-modal .modal-dialog,
.student-detail-modal .modal-dialog {
  pointer-events: all !important;
}

/* Remove any filters that might affect modal appearance */
.modal * {
  filter: none !important;
  -webkit-filter: none !important;
}