/**
 * design.md — vendor & legacy overrides for dark theme
 * Load after redesign.css and mobile-responsive.css
 */

/* ==========================================================================
   Bootstrap & legacy theme remnants
   ========================================================================== */
body#app-layout .right_col,
body#app-layout .container.body,
body#app-layout .main_container {
  background: var(--pm-bg) !important;
}

body#app-layout .nav-md .container.body .right_col,
body#app-layout .nav-sm .container.body .right_col {
  background: var(--pm-bg) !important;
}

body#app-layout .link-text {
  color: var(--pm-text-1) !important;
}

body#app-layout .link-text:hover {
  color: var(--pm-text-1) !important;
  opacity: 0.85;
}

/* Bootstrap nav tabs */
body#app-layout .nav-tabs {
  border-bottom: 1px solid var(--pm-border) !important;
  gap: 4px;
}

body#app-layout .nav-tabs .nav-link {
  color: var(--pm-text-2) !important;
  border: none !important;
  border-radius: var(--pm-r-md) var(--pm-r-md) 0 0 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: transparent !important;
  transition: color 150ms ease, background 150ms ease;
}

body#app-layout .nav-tabs .nav-link:hover {
  color: var(--pm-text-1) !important;
  background: var(--pm-active-nav) !important;
  border: none !important;
}

body#app-layout .nav-tabs .nav-link.active,
body#app-layout .nav-tabs .nav-item.show .nav-link {
  color: var(--pm-text-1) !important;
  background: var(--pm-active-nav) !important;
  border: none !important;
}

body#app-layout .tab-content {
  background: transparent !important;
  color: var(--pm-text-1) !important;
}

/* Pagination */
body#app-layout .pagination .page-link,
body#app-layout .dataTables_wrapper .paginate_button {
  background: var(--pm-surface) !important;
  border-color: var(--pm-border) !important;
  color: var(--pm-text-2) !important;
  border-radius: var(--pm-r-sm) !important;
}

body#app-layout .pagination .page-link:hover,
body#app-layout .dataTables_wrapper .paginate_button:hover {
  background: var(--pm-active-nav) !important;
  border-color: var(--pm-border-strong) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .pagination .page-item.active .page-link,
body#app-layout .dataTables_wrapper .paginate_button.current {
  background: var(--pm-orange) !important;
  border-color: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
}

/* Alerts */
body#app-layout .alert {
  border-radius: var(--pm-r-md) !important;
  border: 1px solid var(--pm-border) !important;
}

body#app-layout .alert-success {
  background: var(--pm-green-bg) !important;
  color: var(--pm-green) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

body#app-layout .alert-warning {
  background: var(--pm-yellow-bg) !important;
  color: var(--pm-yellow) !important;
  border-color: rgba(234, 179, 8, 0.25) !important;
}

body#app-layout .alert-danger {
  background: var(--pm-red-bg) !important;
  color: var(--pm-red) !important;
  border-color: rgba(220, 38, 38, 0.25) !important;
}

body#app-layout .alert-info {
  background: var(--pm-blue-bg) !important;
  color: var(--pm-text-2) !important;
}

/* ==========================================================================
   DataTables dark theme
   ========================================================================== */
body#app-layout table.dataTable thead th,
body#app-layout table.jambo_table thead th {
  background: var(--bg-elevated-2) !important;
  color: var(--pm-text-2) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

body#app-layout table.dataTable tbody tr,
body#app-layout table.jambo_table tbody tr {
  background: var(--pm-surface) !important;
  color: var(--pm-text-1) !important;
  border-bottom: 1px solid var(--pm-border) !important;
}

body#app-layout table.dataTable tbody tr:hover,
body#app-layout table.jambo_table tbody tr:hover {
  background: var(--pm-active-nav) !important;
}

body#app-layout table.dataTable tbody td,
body#app-layout table.jambo_table tbody td {
  color: var(--pm-text-1) !important;
  border-color: var(--pm-border) !important;
}

body#app-layout .dataTables_wrapper .dataTables_length,
body#app-layout .dataTables_wrapper .dataTables_filter,
body#app-layout .dataTables_wrapper .dataTables_info,
body#app-layout .dataTables_wrapper .dataTables_paginate {
  color: var(--pm-text-2) !important;
}

body#app-layout .dataTables_wrapper .dataTables_filter input,
body#app-layout .dataTables_wrapper .dataTables_length select {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
  border-radius: var(--pm-r-md) !important;
}

body#app-layout table.dataTable.stripe tbody tr.odd,
body#app-layout table.dataTable.display tbody tr.odd {
  background: var(--pm-surface) !important;
}

body#app-layout table.dataTable.stripe tbody tr.even,
body#app-layout table.dataTable.display tbody tr.even {
  background: var(--bg-elevated) !important;
}

/* ==========================================================================
   Select2 dark theme
   ========================================================================== */
body#app-layout .select2-container--default .select2-selection--single,
body#app-layout .select2-container--default .select2-selection--multiple {
  background: var(--bg-elevated-2) !important;
  border-color: var(--pm-border) !important;
}

body#app-layout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--pm-text-1) !important;
}

body#app-layout .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--pm-text-3) !important;
}

body#app-layout .select2-dropdown {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}

body#app-layout .select2-container--default .select2-results__option {
  color: var(--pm-text-1) !important;
}

body#app-layout .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .select2-container--default .select2-results__option[aria-selected='true'] {
  background: rgba(255, 255, 255, 0.08) !important;
}

body#app-layout .select2-search--dropdown .select2-search__field {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
  border-radius: var(--pm-r-sm) !important;
}

/* ==========================================================================
   Modals & dropdowns
   ========================================================================== */
body#app-layout .modal-content {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
  box-shadow: var(--pm-shadow-lg) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout .modal-header {
  border-bottom: 1px solid var(--pm-border) !important;
  background: transparent !important;
}

body#app-layout .modal-footer {
  border-top: 1px solid var(--pm-border) !important;
  background: transparent !important;
}

body#app-layout .modal-title {
  color: var(--pm-text-1) !important;
  font-weight: 600 !important;
}

body#app-layout .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

body#app-layout .dropdown-menu {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}

body#app-layout .dropdown-item {
  color: var(--pm-text-1) !important;
}

body#app-layout .dropdown-item:hover,
body#app-layout .dropdown-item:focus {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

body#app-layout table td .action_dropdown .dropdown-item:hover,
body#app-layout table td .action_dropdown .dropdown-item:focus {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

/* ==========================================================================
   FullCalendar dark theme
   ========================================================================== */
body#app-layout .fc {
  color: var(--pm-text-1) !important;
}

body#app-layout .fc .fc-toolbar-title {
  color: var(--pm-text-1) !important;
  font-weight: 600 !important;
}

body#app-layout .fc .fc-button {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
  border-radius: var(--pm-r-md) !important;
  font-weight: 500 !important;
  text-transform: capitalize !important;
}

body#app-layout .fc .fc-button:hover {
  background: var(--pm-active-nav) !important;
}

body#app-layout .fc .fc-button-primary:not(:disabled).fc-button-active,
body#app-layout .fc .fc-button-primary:not(:disabled):active {
  background: var(--pm-orange) !important;
  border-color: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout .fc .fc-col-header-cell {
  background: var(--bg-elevated-2) !important;
  border-color: var(--pm-border) !important;
}

body#app-layout .fc .fc-col-header-cell-cushion {
  color: var(--pm-text-2) !important;
  font-weight: 500 !important;
}

body#app-layout .fc .fc-daygrid-day {
  background: var(--pm-surface) !important;
  border-color: var(--pm-border) !important;
}

body#app-layout .fc .fc-daygrid-day-number {
  color: var(--pm-text-2) !important;
}

body#app-layout .fc .fc-day-today .fc-daygrid-day-frame {
  background: rgba(255, 255, 255, 0.06) !important;
}

body#app-layout .fc .fc-scrollgrid {
  border-color: var(--pm-border) !important;
}

body#app-layout .fc-theme-standard td,
body#app-layout .fc-theme-standard th {
  border-color: var(--pm-border) !important;
}

/* ==========================================================================
   SweetAlert dark theme
   ========================================================================== */
.swal-modal {
  background: var(--bg-elevated-2, #141414) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.65) !important;
}

.swal-title {
  color: #F5F5F5 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
}

.swal-text {
  color: #9A9A9A !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

.swal-button {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  box-shadow: none !important;
}

.swal-button:not([disabled]):hover {
  background: #E5E5E5 !important;
}

.swal-button--cancel {
  background: transparent !important;
  color: #9A9A9A !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.swal-button--danger {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* ==========================================================================
   Dropify, datetimepicker, multiselect
   ========================================================================== */
body#app-layout .dropify-wrapper {
  background: var(--bg-elevated-2) !important;
  border: 1px dashed var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  color: var(--pm-text-2) !important;
}

body#app-layout .dropify-wrapper:hover {
  background: var(--pm-active-nav) !important;
}

body#app-layout .bootstrap-datetimepicker-widget {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-md) !important;
  color: var(--pm-text-1) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}

body#app-layout .bootstrap-datetimepicker-widget table td,
body#app-layout .bootstrap-datetimepicker-widget table th {
  color: var(--pm-text-1) !important;
}

body#app-layout .bootstrap-datetimepicker-widget table td.active,
body#app-layout .bootstrap-datetimepicker-widget table td.active:hover {
  background: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout .multiselect-container {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
}

body#app-layout .multiselect-container > li > a {
  color: var(--pm-text-1) !important;
}

body#app-layout .multiselect-container > li > a:hover {
  background: var(--pm-active-nav) !important;
}

/* ==========================================================================
   View page headers & workflow
   ========================================================================== */
body#app-layout .view_page_header_bg {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
}

body#app-layout .view_page_header_bg .user-name,
body#app-layout .view_page_header_bg .nav_text.h5 {
  color: var(--pm-text-1) !important;
}

body#app-layout .view_page_header_bg .heading_view {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--pm-r-md) !important;
}

/* Workflow progress stepper */
body#app-layout .workflow-progress .step,
body#app-layout .workflow-progress li {
  color: var(--pm-text-2) !important;
}

body#app-layout .workflow-progress .step.active,
body#app-layout .workflow-progress .step.completed,
body#app-layout .workflow-progress li.active {
  color: var(--pm-text-1) !important;
}

/* Monospace for IDs and technical values */
body#app-layout code,
body#app-layout pre,
body#app-layout .monospace,
body#app-layout [class*='invoice-no'],
body#app-layout [class*='job-no'] {
  font-family: var(--pm-font-mono) !important;
  font-size: 12px !important;
  color: var(--pm-text-2) !important;
}

/* Empty states */
body#app-layout .pm-list-empty-state__heading {
  color: var(--pm-text-1) !important;
}

body#app-layout .pm-list-empty-state {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  background: var(--pm-surface);
  margin: 24px auto;
  max-width: 520px;
}

/* Focus visible for accessibility */
body#app-layout a:focus-visible,
body#app-layout button:focus-visible,
body#app-layout input:focus-visible,
body#app-layout select:focus-visible,
body#app-layout textarea:focus-visible,
body#app-layout .btn:focus-visible {
  outline: 2px solid var(--pm-input-focus-border) !important;
  outline-offset: 2px !important;
}

/* Login page dark split */
body#login-page .header-bnner-login-page-mc {
  background-color: var(--pm-login-brand-bg) !important;
}

body#login-page .main-div-school-container > .row {
  background: var(--pm-bg) !important;
}

body#login-page .content-form-login-page-school-plugin::before {
  color: var(--pm-text-1) !important;
}

body#login-page input.form-control,
body#login-page input[type='email'],
body#login-page input[type='password'],
body#login-page input[type='text'] {
  background: var(--bg-elevated-2) !important;
  border: 1px solid var(--pm-border) !important;
  color: var(--pm-text-1) !important;
  border-radius: var(--pm-r-md) !important;
}

body#login-page .login_form {
  background: var(--pm-bg) !important;
}

body#login-page .footer-line {
  color: var(--pm-text-3) !important;
}

body#login-page .footer-line a {
  color: var(--pm-text-2) !important;
}

/* NProgress bar */
#nprogress .bar {
  background: var(--pm-text-1, #F5F5F5) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px rgba(245, 245, 245, 0.4), 0 0 5px rgba(245, 245, 245, 0.4) !important;
}

/* Card hover animation per design.md */
body#app-layout .x_panel,
body#app-layout .panel.info-box,
body#app-layout .card {
  transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}

body#app-layout .x_panel:hover,
body#app-layout .panel.info-box:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Override legacy inline status colors in Blade templates */
body#app-layout [style*="color: #002e84"],
body#app-layout [style*="color:#002e84"],
body#app-layout [style*="color: #002E84"] {
  color: var(--pm-yellow) !important;
}

body#app-layout [style*="color: #1a2f56"],
body#app-layout [style*="color:#1a2f56"],
body#app-layout [style*="background-color: #1a2f56"],
body#app-layout [style*="background: #1a2f56"],
body#app-layout [style*="border-bottom: 3px solid #1a2f56"] {
  color: var(--pm-text-1) !important;
}

body#app-layout [style*="background-color: #1a2f56"] {
  background-color: var(--pm-orange) !important;
  color: var(--pm-text-inv) !important;
}

body#app-layout [style*="border-bottom: 3px solid #1a2f56"] {
  border-bottom-color: var(--pm-border-strong) !important;
}

/* Settings nav tabs */
body#app-layout .settings_nav,
body#app-layout .settings_navbar {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: var(--pm-r-lg) !important;
}

body#app-layout .settings_nav a,
body#app-layout .settings_navbar a {
  color: var(--pm-text-2) !important;
}

body#app-layout .settings_nav a.active,
body#app-layout .settings_navbar a.active {
  background: var(--pm-active-nav) !important;
  color: var(--pm-text-1) !important;
}

/* Preserve white backgrounds for print/PDF output */
@media print {
  body#app-layout,
  body#app-layout .right_col,
  body#app-layout .x_panel,
  body#app-layout .x_content,
  body#app-layout table,
  body#app-layout .modal-content {
    background: #ffffff !important;
    color: #000000 !important;
  }

  body#app-layout .nav.side-menu,
  body#app-layout .left_col,
  body#app-layout .page-title {
    display: none !important;
  }
}

/* ==========================================================================
   Modal scroll safety net (loads last) — never clip long modals
   ========================================================================== */
body#app-layout.modal-open .modal,
body#app-layout.modal-open .modal.show,
body#app-layout .modal.show {
  position: fixed !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
}

body#app-layout .modal-dialog,
body#app-layout .modal-dialog.modal-dialog-scrollable {
  max-height: none !important;
  height: auto !important;
}

body#app-layout .modal-content,
body#app-layout .modal_data,
body#app-layout .modal-body-data,
body#app-layout .modal-data,
body#app-layout .used_coupn_modal_data,
body#app-layout .modal-body,
body#app-layout .modal-dialog.modal-dialog-scrollable .modal-content,
body#app-layout .modal-dialog.modal-dialog-scrollable .modal-body {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}