/**
 * INVARIABLY DIGITAL - OMNI APPLICATION STYLES
 * invdg-omni.css
 * 
 * Purpose: Override Material Dashboard defaults with Invariably Digital brand standards
 * Load Order: MUST load AFTER material-dashboard.min.css
 * 
 * Customizations:
 * - Neutral grey input borders (industry standard)
 * - Soft, muted color palette (easy on eyes for long work sessions)
 * - Professional, Zoho-inspired design aesthetic
 * 
 * KEY STRATEGY: Override CSS VARIABLES (--bs-*) to prevent magenta from appearing
 */

/* ================================================
   OVERRIDE BOOTSTRAP CSS VARIABLES
   Material Dashboard uses --bs-* CSS variables
   We must override these at the :root level
   ================================================ */
:root {
  /* Override primary color CSS variables */
  --bs-primary: #475569 !important;
  --bs-primary-rgb: 71, 85, 105 !important;
  
  /* Override button CSS variables */
  --bs-btn-color: #ffffff !important;
  --bs-btn-bg: #475569 !important;
  --bs-btn-border-color: #475569 !important;
  --bs-btn-hover-bg: #334155 !important;
  --bs-btn-hover-border-color: #334155 !important;
  --bs-btn-active-bg: #334155 !important;
  --bs-btn-active-border-color: #334155 !important;
  --bs-btn-disabled-bg: #CBD5E1 !important;
  --bs-btn-disabled-border-color: #CBD5E1 !important;
  
  /* Override link colors */
  --bs-link-color: #475569 !important;
  --bs-link-hover-color: #334155 !important;
}

/* ================================================
   OVERRIDE MATERIAL DASHBOARD INPUT COLORS
   Strategy: Match their selector specificity exactly
   Key: Material Dashboard uses .form-label+.form-control
        (adjacent sibling selector) which we match below
   ================================================ */

/* ================================================
   AGGRESSIVE INPUT OVERRIDES
   Must catch ALL input states to prevent magenta
   ================================================ */

/* Default state - ALL inputs get grey borders */
input.form-control,
textarea.form-control,
select.form-control,
.form-control,
.input-group-outline .form-control,
.input-group-outline input.form-control,
.input-group-outline textarea.form-control,
.input-group-outline select.form-control,
.input-group-outline input,
.input-group-outline textarea,
.input-group-outline select {
  border: 1px solid #CBD5E1 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #CBD5E1, inset -1px 0 #CBD5E1, inset 0 -1px #CBD5E1 !important;
}

/* Hover state - Slightly darker grey */
.input-group-outline .form-control:hover:not(:focus),
.input-group-outline input.form-control:hover:not(:focus),
.input-group-outline textarea.form-control:hover:not(:focus),
.input-group-outline select.form-control:hover:not(:focus) {
  border-color: #CED4DA !important;
}

/* Focus state - Per Design System: #475569 (Brand Primary) 
   Note: This is overridden by the more specific .form-label+ selector below
   for Material Dashboard compatibility */
.input-group-outline .form-control:focus,
.input-group-outline input.form-control:focus,
.input-group-outline textarea.form-control:focus,
.input-group-outline select.form-control:focus {
  border-color: #475569 !important;
  box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.2) !important;
}

/* Filled + Focused state - handled by .form-label+ selector below */

/* Filled but not focused - handled by .form-label+ selector below */

/* Labels - neutral grey */
.input-group-outline .form-label,
.input-group-outline label.form-label,
.input-group-static label.form-label,
.input-group-static label {
  color: #6C757D !important;
}

/* Focused labels - darker grey */
.input-group-outline.is-focused .form-label,
.input-group-outline.is-focused label.form-label {
  color: #495057 !important;
}

/* Validation states - keep colored */
.form-control.is-invalid,
input.form-control.is-invalid,
.input-group-outline .form-control.is-invalid {
  border-color: #DC3545 !important;
}

.form-control.is-valid,
input.form-control.is-valid,
.input-group-outline .form-control.is-valid {
  border-color: #28A745 !important;
}

/* Disabled state */
.form-control:disabled,
input.form-control:disabled,
textarea.form-control:disabled,
select.form-control:disabled {
  border-color: #E9ECEF !important;
  background-color: #F8F9FA !important;
  opacity: 0.6;
}

/* ================================================
   PAGINATION INPUT OVERRIDES
   Fix magenta borders on per-page input
   ================================================ */
   
/* Pagination wrapper inputs */
.pagination-controls input.form-control,
.pagination-controls input[type="number"],
input.form-control[type="number"] {
  border: 1px solid #CBD5E1 !important;
  border-top-color: #CBD5E1 !important;
  border-right-color: #CBD5E1 !important;
  border-bottom-color: #CBD5E1 !important;
  border-left-color: #CBD5E1 !important;
}

.pagination-controls input.form-control:focus,
.pagination-controls input[type="number"]:focus,
input.form-control[type="number"]:focus {
  border-color: #475569 !important;
  border-top-color: #475569 !important;
  border-right-color: #475569 !important;
  border-bottom-color: #475569 !important;
  border-left-color: #475569 !important;
  box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.2) !important;
}

/* ================================================
   MATERIAL DASHBOARD SPECIFIC OVERRIDES
   Match their exact selector pattern with adjacent sibling (+)
   They use !important, so we must too (no other way)
   ================================================ */

/* CRITICAL: Match Material Dashboard's EXACT focused selector */
.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-focused .form-label+input.form-control,
.input-group.input-group-outline.is-focused .form-label+textarea.form-control,
.input-group.input-group-outline.is-focused .form-label+select.form-control {
  border-color: #475569 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #475569, inset -1px 0 #475569, inset 0 -1px #475569 !important;
  outline: none !important;
}

/* Additional focus states */
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
.form-control:focus {
  border-color: #475569 !important;
  outline: none !important;
}

/* CRITICAL: Match Material Dashboard's EXACT selector with !important */
.input-group.input-group-outline.is-filled .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+input.form-control,
.input-group.input-group-outline.is-filled .form-label+textarea.form-control,
.input-group.input-group-outline.is-filled .form-label+select.form-control {
  border-color: #CBD5E1 !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 #CBD5E1, inset -1px 0 #CBD5E1, inset 0 -1px #CBD5E1 !important;
}

/* Label color on focus */
.input-group-outline.is-focused .form-label,
.input-group-outline.is-focused .form-label:before,
.input-group-outline.is-focused .form-label:after {
  color: #475569 !important;
  border-top-color: #475569 !important;
  box-shadow: inset 0 1px #475569 !important;
}

/* ================================================
   BUTTON OVERRIDES
   Eliminate all magenta from buttons globally
   ================================================ */

/* Primary buttons - use charcoal instead of magenta */
.btn-primary,
.btn.bg-gradient-primary,
button.btn-primary,
a.btn-primary {
  background-color: #475569 !important;
  background-image: linear-gradient(195deg, #475569 0%, #334155 100%) !important;
  border-color: #475569 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(71, 85, 105, 0.2) !important;
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: #334155 !important;
  background-image: linear-gradient(195deg, #334155 0%, #1e293b 100%) !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 14px -8px rgba(71, 85, 105, 0.3), 0 3px 18px 0 rgba(71, 85, 105, 0.1), 0 7px 8px -4px rgba(71, 85, 105, 0.18) !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn.bg-gradient-primary:focus,
.btn.bg-gradient-primary:active {
  background-color: #334155 !important;
  border-color: #334155 !important;
}

/* Outline primary buttons */
.btn-outline-primary {
  color: #475569 !important;
  border-color: #475569 !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

/* Icon buttons - Only override PRIMARY icon buttons */
.btn-icon.btn-primary {
  background-color: #0EA5E9 !important;
  border-color: #0EA5E9 !important;
}

.btn-icon.btn-primary:hover {
  background-color: #0284C7 !important;
  border-color: #0284C7 !important;
}

/* OMNI BUTTON STYLES - Moved from design-tokens.css for reliable load order
   This file loads LAST in index.html, ensuring these styles always apply */

/* Primary CTA (Save, Submit, Continue, Accept) */
.omni-btn-primary {
  background-color: #475569 !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}

.omni-btn-primary:hover {
  background-color: #334155 !important;
  border: 1px solid #334155 !important;
}

/* Secondary (New..., Open, important but non-primary) */
.omni-btn-secondary {
  background-color: #ffffff !important;
  border: 1px solid #475569 !important;
  color: #475569 !important;
}

.omni-btn-secondary:hover {
  background-color: rgba(71, 85, 105, 0.05) !important;
  border: 1px solid #475569 !important;
}

/* Search / Filter Apply */
.omni-btn-search {
  background-color: #475569 !important;
  background-image: linear-gradient(195deg, #475569 0%, #334155 100%) !important;
  border: 1px solid #475569 !important;
  color: #ffffff !important;
}

.omni-btn-search:hover {
  background-color: #334155 !important;
  background-image: linear-gradient(195deg, #334155 0%, #1e293b 100%) !important;
  border: 1px solid #334155 !important;
}

/* Filter/Reset buttons - Standardized across entire app */
.btn-filter-neutral,
.btn-outline-secondary.btn-icon {
  background-color: transparent !important;
  border: 1px solid #737373 !important;
  color: #6C757D !important;
}

.btn-filter-neutral:hover,
.btn-outline-secondary.btn-icon:hover {
  background-color: #F8F9FA !important;
  border: 1px solid #5a5a5a !important;
  color: #495057 !important;
}

/* Destructive (Delete, Remove) */
.omni-btn-destructive {
  background-color: #dc3545 !important;
  border: 1px solid #dc3545 !important;
  color: #ffffff !important;
}

.omni-btn-destructive:hover {
  background-color: #b53636 !important;
  border: 1px solid #b53636 !important;
}

/* Links */
a,
.btn-link {
  color: #475569 !important;
}

a:hover,
.btn-link:hover {
  color: #334155 !important;
}

/* Dropdown toggles */
.dropdown-toggle::after {
  color: currentColor !important;
}

/* ================================================
   BADGE OVERRIDES
   Eliminate magenta from badges + standardize padding
   ================================================ */
.badge-primary,
.badge.bg-gradient-primary {
  background-color: #475569 !important;
  background-image: linear-gradient(195deg, #475569 0%, #334155 100%) !important;
  color: #ffffff !important;
}

/* Standardize all badge padding to match PRIMARY badge compact style */
.badge,
.badge-sm,
span.badge,
span.badge-sm,
.badge.bg-gradient-success,
.badge.bg-gradient-info,
.badge.bg-gradient-primary,
.badge.bg-gradient-secondary,
span.badge.bg-gradient-success,
span.badge.bg-gradient-info,
span.badge.bg-gradient-primary,
span.badge.bg-gradient-secondary {
  padding: 0.35rem 0.65rem !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  padding-left: 0.65rem !important;
  padding-right: 0.65rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: auto !important;
}

/* ================================================
   FLATPICKR DATE PICKER OVERRIDES
   Eliminate magenta from date picker
   ================================================ */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.today {
  background: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #475569 !important;
}

/* ================================================
   ALL FORM INPUT TYPES
   Checkboxes, radios, toggles, ranges, etc.
   ================================================ */

/* Checkboxes - Material Dashboard uses custom styling */
.form-check-input:checked {
  background-color: #475569 !important;
  border-color: #475569 !important;
}

.form-check-input:focus {
  border-color: #475569 !important;
  box-shadow: 0 0 0 0.2rem rgba(71, 85, 105, 0.25) !important;
}

.form-check-input:checked[type="checkbox"] {
  background-color: #475569 !important;
  border-color: #475569 !important;
}

/* Radio buttons */
.form-check-input:checked[type="radio"] {
  background-color: #475569 !important;
  border-color: #475569 !important;
}

/* Toggle switches */
.form-switch .form-check-input:checked {
  background-color: #475569 !important;
  border-color: #475569 !important;
}

.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23475569'/%3e%3c/svg%3e") !important;
  border-color: #475569 !important;
}

/* Range sliders */
input[type="range"]::-webkit-slider-thumb {
  background: #475569 !important;
}

input[type="range"]::-moz-range-thumb {
  background: #475569 !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #CBD5E1 !important;
}

input[type="range"]::-moz-range-track {
  background: #CBD5E1 !important;
}

/* File upload buttons */
input[type="file"]::file-selector-button {
  background-color: #475569 !important;
  border-color: #475569 !important;
  color: #ffffff !important;
}

input[type="file"]::file-selector-button:hover {
  background-color: #334155 !important;
}

/* Color picker */
input[type="color"] {
  border-color: #CBD5E1 !important;
}

input[type="color"]:focus {
  border-color: #475569 !important;
}

/* Select dropdowns (native) */
select:focus {
  border-color: #475569 !important;
  box-shadow: 0 0 0 0.2rem rgba(71, 85, 105, 0.25) !important;
}

/* ================================================
   PREVENT MAGENTA IN ALL CONTEXTS
   Catch any inline magenta styles
   ================================================ */
*[style*="#e91e63"],
*[style*="rgb(233, 30, 99)"] {
  border-color: #475569 !important;
}

/* Accent color for native form controls (checkboxes, radios, etc.) */
input:not([type="submit"]):not([type="button"]):not([type="reset"]) {
  accent-color: #475569 !important;
}

/* ================================================
   BUTTON ICON HOVER FIXES
   Fix delete/danger icons to show white on hover
   ================================================ */

/* Delete/danger icon buttons - show white icon on red background */
.btn-link.text-danger:hover,
.btn-link.text-gradient.text-danger:hover {
  background-color: #f44336 !important;
  border-radius: 0.375rem;
}

.btn-link.text-danger:hover i,
.btn-link.text-gradient.text-danger:hover i,
.btn-link.text-danger:hover .material-symbols-rounded,
.btn-link.text-gradient.text-danger:hover .material-symbols-rounded {
  color: #ffffff !important;
  background: transparent !important;
}

/* ================================================
   FINAL NUCLEAR OPTION
   Override ANY remaining magenta borders
   ================================================ */

/* Override Material Dashboard's exact input border selectors */
.input-group.input-group-outline .form-label+.form-control,
.input-group.input-group-outline .form-label+input,
.input-group.input-group-outline .form-label+select,
.input-group.input-group-outline .form-label+textarea {
  border-color: #CBD5E1 !important;
}

/* Override Material Dashboard's exact FILLED selector (default grey) */
.input-group.input-group-outline.is-filled .form-label+.form-control,
.input-group.input-group-outline.is-filled .form-label+input,
.input-group.input-group-outline.is-filled .form-label+select,
.input-group.input-group-outline.is-filled .form-label+textarea {
  border-color: #CBD5E1 !important;
}

/* Override Material Dashboard's exact FOCUSED selector (charcoal) */
.input-group.input-group-outline.is-focused .form-label+.form-control,
.input-group.input-group-outline.is-focused .form-label+input,
.input-group.input-group-outline.is-focused .form-label+select,
.input-group.input-group-outline.is-focused .form-label+textarea {
  border-color: #475569 !important;
}

/* Override Material Dashboard's label text color */
.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label {
  color: #475569 !important;
}

/* Override Material Dashboard's label pseudo-elements (before/after) */
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after,
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after {
  border-top-color: #475569 !important;
  box-shadow: inset 0 1px #475569 !important;
}

/* Catch any element with magenta border */
*[style*="border-color: rgb(233, 30, 99)"],
*[style*="border-color:#e91e63"],
*[style*="border-color: #e91e63"] {
  border-color: #475569 !important;
}

/* ========================================
   TAB NAVIGATION HOVER STATES
   Fix poor contrast on hover (dark blue bg + dark text)
   ======================================== */

/* Nav tabs - subtle hover state with good contrast - MAXIMUM SPECIFICITY */
.nav.nav-tabs .nav-link:hover,
.nav.nav-tabs .nav-item .nav-link:hover,
.nav.nav-tabs button.nav-link:hover,
ul.nav.nav-tabs li.nav-item button.nav-link:hover,
button.nav-link.mb-0:hover:not(.active) {
  background-color: #f8f9fa !important;
  background-image: none !important;
  border-color: transparent transparent #dee2e6 transparent !important;
  border-bottom: 1px solid #dee2e6 !important;
  color: #495057 !important;
  box-shadow: none !important;
}

/* Active tab - keep primary color */
.nav.nav-tabs .nav-link.active,
.nav.nav-tabs .nav-item .nav-link.active,
.nav.nav-tabs button.nav-link.active,
ul.nav.nav-tabs li.nav-item button.nav-link.active,
button.nav-link.mb-0.active {
  color: #475569 !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent transparent #475569 transparent !important;
  border-bottom: 2px solid #475569 !important;
  box-shadow: none !important;
}

/* Override any remaining Bootstrap/Material Dashboard hover states */
.nav-tabs .nav-link:hover {
  background-color: #f8f9fa !important;
  color: #495057 !important;
  isolation: isolate;
}

/* ================================================
   INPUT GROUP - SEAMLESS BUTTON ATTACHMENT
   Bootstrap-style input groups with no spacing
   ======================================== */

/* Remove gaps between input-group elements */
.input-group > .btn,
.input-group > .form-control {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure buttons attach seamlessly - remove rounded corners on touching sides */
.input-group > .btn:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.input-group > .btn:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Make sure borders line up perfectly */
.input-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.input-group > * {
  flex-shrink: 0 !important;
}

/* ================================================
   FORM VALIDATION STATES
   ======================================== */

/* Error state - red border and label */
.input-group.input-group-outline.is-error .form-control,
.input-group.input-group-outline.is-error select.form-control,
.input-group.input-group-outline.is-error textarea.form-control {
  border-color: #dc3545 !important;
}

.input-group.input-group-outline.is-error.is-focused .form-control,
.input-group.input-group-outline.is-error.is-focused select.form-control,
.input-group.input-group-outline.is-error.is-focused textarea.form-control {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15) !important;
}

.input-group.input-group-outline.is-error .form-label {
  color: #dc3545 !important;
}

.input-group.input-group-outline.is-error.is-focused .form-label:before,
.input-group.input-group-outline.is-error.is-focused .form-label:after,
.input-group.input-group-outline.is-error.is-filled .form-label:before,
.input-group.input-group-outline.is-error.is-filled .form-label:after {
  border-top-color: #dc3545 !important;
  box-shadow: inset 0 1px #dc3545 !important;
}

/* Warning state - orange border and label */
.input-group.input-group-outline.is-warning .form-control,
.input-group.input-group-outline.is-warning select.form-control,
.input-group.input-group-outline.is-warning textarea.form-control {
  border-color: #ff9800 !important;
}

.input-group.input-group-outline.is-warning.is-focused .form-control,
.input-group.input-group-outline.is-warning.is-focused select.form-control,
.input-group.input-group-outline.is-warning.is-focused textarea.form-control {
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.15) !important;
}

.input-group.input-group-outline.is-warning .form-label {
  color: #ff9800 !important;
}

.input-group.input-group-outline.is-warning.is-focused .form-label:before,
.input-group.input-group-outline.is-warning.is-focused .form-label:after,
.input-group.input-group-outline.is-warning.is-filled .form-label:before,
.input-group.input-group-outline.is-warning.is-filled .form-label:after {
  border-top-color: #ff9800 !important;
  box-shadow: inset 0 1px #ff9800 !important;
}

/* Reference data list styling */
.reference-type-item {
  border-left: 4px solid transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.reference-type-item.active,
.reference-type-item:focus,
.reference-type-item:hover {
  background-color: #e2e8f0;
  color: #0f172a;
  border-left-color: #94a3b8;
}

.reference-type-item.active .badge {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* ================================================
   PRINT-ONLY TEMPLATES
   Hide templates from screen view but show for printing
   ================================================ */
.print-only-template {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
}

@media print {
  .print-only-template {
    position: static !important;
    left: auto !important;
    top: auto !important;
  }

  /* Thermal Receipt Printer Optimization */
  @page {
    size: 80mm auto;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
  }

  /* Hide everything except the receipt template when printing */
  body > *:not(.print-only-template) {
    display: none !important;
  }

  .print-only-template {
    display: block !important;
    width: 80mm !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}