/* =====================================================
   InvoiceTrack – Core Design System CSS
   -----------------------------------------------------
   This file captures the visual spec described
   (typography, colours, spacing, components) and
   provides reusable utility classes.
   ===================================================== */

/* ----------------------------
   1. Design Tokens (CSS Vars)
   ---------------------------- */
:root {
  /* Spacing – 8‑point scale (reduced by 10%) */
  --space-0: 1.8px;
  --space-1: 3.6px;
  --space-2: 7.2px;
  --space-3: 10.8px;
  --space-4: 14.4px;
  --space-5: 21.6px;
  --space-6: 28.8px;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;

  /* Colour */
  --color-primary:          #0062ff; /* Brand blue */
  --color-primary-hover:    #004fcc;
  --color-text:             #212121;
  --color-header-text:      #4a4a4a;
  --color-placeholder:      #8a8a8a;
  --color-border:           #d9dde2;
  --color-border-subtle:    #e8eaed;
  --color-bg:               #ffffff;

  /* Status */
  --color-status-blue:      #0052ff;
  --color-status-red:       #e03838;
  --color-status-black:     #000000;
}

/* ----------------------------
   1.5. Page Title Sizing (Updated to 14px base for titles)
   ---------------------------- */
/* Heading sizes with 14px as base for main titles */
h1 { font-size: 14px !important; }      /* Main page titles */
h2 { font-size: 13px !important; }      /* Section headings */
h3 { font-size: 12px !important; }      /* Subsection headings - matches body */
h4 { font-size: 12px !important; }      /* Small headings - matches body */
h5 { font-size: 11px !important; }      /* Micro headings */
h6 { font-size: 10px !important; }      /* Smallest headings */

/* Bootstrap display classes adjusted proportionally */
.display-1 { font-size: 2.5rem !important; }   /* Large displays */
.display-2 { font-size: 2rem !important; }     /* Medium displays */
.display-3 { font-size: 1.75rem !important; }  /* Small displays */
.display-4 { font-size: 1.5rem !important; }   /* Extra small displays */
.display-5 { font-size: 1.25rem !important; }  /* Tiny displays */
.display-6 { font-size: 1rem !important; }     /* Micro displays */

/* ----------------------------
   2. Base / Resets
   ---------------------------- */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }

body {
  font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px; /* Updated from 11px to 12px */
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  padding-top: 60px; /* Navbar height + extra space */
  padding-bottom: 44px; /* Footer height + extra space to prevent content being hidden */
}

/* ----------------------------
   2.5. Global Font Size Overrides
   ---------------------------- */
/* Override Bootstrap defaults for consistent 12px across all elements */

/* All text elements inherit the 12px base */
p, span, div, li, td, th, label, legend, small,
.form-text, .text-muted, .form-control, .form-select,
.btn, .dropdown-item, .navbar-nav .nav-link,
.breadcrumb-item, .pagination .page-link,
.badge, .alert, .card-text, .list-group-item,
.modal-body, .modal-footer, .tooltip, .popover-body {
  font-size: 12px !important;
}

/* Form elements with adjusted dimensions for 12px font */
.form-control, .form-select, .form-check-label,
.form-floating > label, .input-group-text,
input, textarea, select, option {
  font-size: 12px !important;
}

/* Form control sizing adjustments */
.form-control, .form-select, input[type="text"], input[type="email"], 
input[type="password"], input[type="number"], input[type="tel"], 
input[type="url"], input[type="search"], textarea, select {
  height: 26px !important; /* Reduced height for 12px font */
  padding: 3px 8px !important; /* Reduced padding to match 12px font */
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Textarea specific sizing */
textarea.form-control {
  height: auto !important;
  min-height: 52px !important; /* Reduced from 56px - about 2 lines at 12px */
  padding: 5px 8px !important; /* Slightly more vertical padding for multi-line text */
}

/* Input group adjustments */
.input-group-text {
  height: 26px !important; /* Match form control height */
  padding: 3px 8px !important; /* Match form control padding */
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Form floating label adjustments */
.form-floating > .form-control {
  height: 30px !important; /* Slightly taller for floating labels */
  padding: 7px 8px 1px 8px !important; /* Adjusted for floating label space */
}

.form-floating > .form-select {
  height: 30px !important;
  padding: 7px 8px 1px 8px !important;
}

.form-floating > label {
  font-size: 12px !important;
  padding: 8px 8px !important;
  line-height: 1.2 !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  font-size: 9px !important;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem) !important;
}

/* Bootstrap button overrides with adjusted dimensions */
.btn {
  display: inline-flex !important; /* Force flex display for centering */
  align-items: center !important; /* Ensures vertical centering */
  justify-content: center !important; /* Ensures horizontal centering */
  font-size: 12px !important;
  padding: 4px 12px !important; /* Reduced padding for more compact size */
  line-height: 1 !important; /* Tighter line-height for better vertical centering */
  min-height: 28px !important; /* Reduced to standard size */
  vertical-align: middle !important; /* Additional vertical alignment */
  box-sizing: border-box !important;
}

.btn-m {
  display: inline-flex !important; /* Force flex display for centering */
  align-items: center !important; /* Ensures vertical centering */
  justify-content: center !important; /* Ensures horizontal centering */
  font-size: 11px !important;
  padding: 3px 10px !important; /* Medium padding between regular and small */
  line-height: 1 !important; /* Tighter line-height for better vertical centering */
  min-height: 26px !important; /* Medium height between regular and small */
  vertical-align: middle !important; /* Additional vertical alignment */
}

.btn-lg {
  display: inline-flex !important; /* Force flex display for centering */
  align-items: center !important; /* Ensures vertical centering */
  justify-content: center !important; /* Ensures horizontal centering */
  font-size: 12px !important;
  padding: 6px 16px !important; /* Reduced padding for large buttons */
  line-height: 1 !important; /* Tighter line-height for better vertical centering */
  min-height: 32px !important; /* Reduced height for large buttons */
  vertical-align: middle !important; /* Additional vertical alignment */
}

/* Checkbox and radio adjustments */
.form-check-input {
  width: 14px !important;
  height: 14px !important;
}

.form-check-label {
  font-size: 12px !important;
  padding-left: 4px !important;
}

/* Select box arrow and padding adjustments */
.form-select {
  background-position: right 6px center !important;
  background-size: 12px 9px !important;
  padding-right: 24px !important;
}

/* Navigation and navbar */
.navbar-brand {
  font-size: 14px !important; /* Slightly larger for branding */
}

.navbar-nav .nav-link,
.nav-tabs .nav-link,
.nav-pills .nav-link {
  font-size: 12px !important;
}

/* Modal and popup overrides */
.modal-header, .modal-body, .modal-footer,
.modal-title {
  font-size: 12px !important;
}

.modal-title {
  font-size: 14px !important; /* Title hierarchy */
}

/* Ultra-compact table styling - overrides moved to end of file */

/* Sortable table header hover effect */
.table thead th:hover {
  background-color: var(--color-border-subtle) !important; /* Light gray background on hover */
  color: var(--color-primary) !important; /* Primary color text on hover */
}

/* Sort indicator styling */
.table thead th::after {
  content: '\2195' !important; /* Up-down arrow (↕) */
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 10px !important;
  color: var(--color-placeholder) !important;
  opacity: 0.5 !important;
  transition: all 0.2s ease !important;
}

/* Sort indicator on hover */
.table thead th:hover::after {
  opacity: 1 !important;
  color: var(--color-primary) !important;
}

/* Ascending sort indicator */
.table thead th.sort-asc::after {
  content: '\2191' !important; /* Up arrow (↑) */
  color: var(--color-primary) !important;
  opacity: 1 !important;
  font-weight: bold !important;
}

/* Descending sort indicator */
.table thead th.sort-desc::after {
  content: '\2193' !important; /* Down arrow (↓) */
  color: var(--color-primary) !important;
  opacity: 1 !important;
  font-weight: bold !important;
}

/* Active sort column styling */
.table thead th.sort-asc,
.table thead th.sort-desc {
  background-color: rgba(0, 98, 255, 0.1) !important; /* Light primary background for active sort */
  color: var(--color-primary) !important;
}

/* Table header sort indicator spacing - using ultra-compact padding */
.table thead th {
  padding-right: calc(.25rem + 15px) !important; /* Compact padding + space for sort indicator */
}

/* Card components */
.card-body, .card-text, .card-title {
  font-size: 12px !important;
}

.card-title {
  font-size: 12px !important;
}

/* List groups */
.list-group-item {
  font-size: 12px !important;
}

/* Dropdown menus */
.dropdown-menu .dropdown-item {
  font-size: 12px !important;
}

/* Alerts and notifications */
.alert {
  font-size: 12px !important;
}

/* Pagination */
.pagination .page-link {
  display: inline-flex !important; /* Force flex display for centering */
  align-items: center !important; /* Ensures vertical centering */
  justify-content: center !important; /* Ensures horizontal centering */
  font-size: 12px !important;
  padding: 4px 8px !important; /* Reduced padding for more compact size */
  line-height: 1 !important; /* Tighter line-height for better vertical centering */
  min-height: 28px !important; /* Reduced height to match buttons */
  vertical-align: middle !important; /* Additional vertical alignment */
  box-sizing: border-box !important;
}

/* Breadcrumbs */
.breadcrumb .breadcrumb-item {
  font-size: 12px !important;
}

/* Form validation messages */
.valid-feedback, .invalid-feedback,
.form-text {
  font-size: 10px !important;
}

/* Tooltips and popovers */
.tooltip-inner {
  font-size: 10px !important;
}

.popover-body {
  font-size: 12px !important;
}

.popover-header {
  font-size: 12px !important;
}

a,button,input,select { font-family: inherit; }

/* Accessibility focus outline */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ----------------------------
   3. Global Header (Top Bar)
   ---------------------------- */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px; /* Increased to be proportional to 12px font */
  padding: 0 var(--space-5);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.nav-link {
  font-size: 12px; /* Matches the body font for navigation */
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  margin-right: var(--space-4);
}

.nav-link.active { color: var(--color-primary); }

/* ----------------------------
   4. Buttons
   ---------------------------- */
.button-pill {
  display: inline-flex;
  align-items: center; /* Ensures vertical centering */
  justify-content: center; /* Ensures horizontal centering */
  padding: 4px var(--space-3); /* Reduced padding for more compact size */
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 12px; /* Matches body font size */
  line-height: 1; /* Tighter line-height for better vertical centering */
  border: none;
  background: var(--color-primary);
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease-in-out;
  min-height: 28px; /* Reduced to more standard size */
  vertical-align: middle; /* Additional vertical alignment */
}
.button-pill:hover,
.button-pill:focus { background: var(--color-primary-hover); }

/* Icon‑only buttons */
.icon-button {
  display: inline-flex;
  align-items: center; /* Ensures vertical centering */
  justify-content: center; /* Ensures horizontal centering */
  width: 28px; /* Reduced to more standard size */
  height: 28px; /* Reduced to more standard size */
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: .54;
  vertical-align: middle; /* Additional vertical alignment */
}
.icon-button:hover,
.icon-button:focus { opacity: .9; }

/* ----------------------------
   5. Filter Panel (Form)
   ---------------------------- */
.filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); /* Reduced by 10% from 220px */
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg);
}

.label {
  display: block;
  font-size: 11px; /* Slightly smaller than body for labels */
  font-weight: 500;
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

.input-field,
.select-field {
  width: 100%;
  height: 28px; /* Increased to match 12px font size */
  padding: 5px var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  font-size: 12px; /* Matches body font size */
  line-height: 1.2;
}

.input-field::placeholder { 
  color: var(--color-placeholder);
  font-size: 12px;
}

/* Custom arrow for select */
.select-field {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23646464' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  background-size: 12px 12px; /* Slightly larger for better visibility */
  padding-right: 26px; /* Space for dropdown arrow */
}

/* ----------------------------
   6. Data Table
   ---------------------------- */
.table-wrapper { overflow-x: auto; }

/* data-table class removed - using standard Bootstrap .table classes instead */

/* Status dots */
.status-dot {
  width: 7.2px; /* Reduced by 10% from 8px */
  height: 7.2px; /* Reduced by 10% from 8px */
  border-radius: 50%;
  display: inline-block;
}
.status-dot.blue  { background: var(--color-status-blue); }
.status-dot.red   { background: var(--color-status-red); }
.status-dot.black { background: var(--color-status-black); }

/* ----------------------------
   7. Utility Classes (Spacing)
   ---------------------------- */
/* Margin top */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* Margin left */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }

/* Padding */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }

/* ----------------------------
   8. Optional – Custom Scrollbar
   ---------------------------- */
.table-wrapper::-webkit-scrollbar { height: 7.2px; } /* Reduced by 10% from 8px */
.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle);
  border-radius: var(--radius-xs);
}

/* =====================================================
   SELECT2 BOOTSTRAP 5 THEME - CONSOLIDATED
   -----------------------------------------------------
   Enhanced dropdown styling for Select2 components
   ===================================================== */

/*!
 * Select2 v4 Bootstrap 5 theme v1.3.0
 * Consolidated into main site.css for single-file approach
*/

/* Core Select2 Bootstrap 5 Theme */
.select2-container--bootstrap-5{display:block}select+.select2-container--bootstrap-5{z-index:1}.select2-container--bootstrap-5 :focus{outline:0}.select2-container--bootstrap-5 .select2-selection{width:100%;min-height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-family:inherit;font-size:0.9rem;font-weight:400;line-height:1.4;color:#212529;background-color:#fff;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none}@media (prefers-reduced-motion:reduce){.select2-container--bootstrap-5 .select2-selection{transition:none}}.select2-container--bootstrap-5.select2-container--focus .select2-selection,.select2-container--bootstrap-5.select2-container--open .select2-selection{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection{border-bottom:0 solid transparent;border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection{border-top:0 solid transparent;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap-5 .select2-search{width:100%}.select2-container--bootstrap-5 .select2-search--inline .select2-search__field{vertical-align:top}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear{position:absolute;top:50%;right:2.25rem;width:.75rem;height:.75rem;padding:.25em;overflow:hidden;text-indent:100%;white-space:nowrap;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;transform:translateY(-50%)}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear:hover,.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover{background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear>span,.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear>span{display:none}.select2-container--bootstrap-5+.select2-container--bootstrap-5{z-index:1056}.select2-container--bootstrap-5 .select2-dropdown{z-index:1056;overflow:hidden;color:#212529;background-color:#fff;border-color:#86b7fe;border-radius:.25rem}.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below{border-top:0 solid transparent;border-top-left-radius:0;border-top-right-radius:0}.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--above{border-bottom:0 solid transparent;border-bottom-right-radius:0;border-bottom-left-radius:0}.select2-container--bootstrap-5 .select2-dropdown .select2-search{padding:.375rem .75rem}.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field{display:block;width:100%;padding:.375rem .75rem;font-family:inherit;font-size:0.9rem;font-weight:400;line-height:1.4;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field{transition:none}}.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus{border-color:#86b7fe;box-shadow:0 0 0 .25rem rgba(13,110,253,.25)}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options:not(.select2-results__options--nested){max-height:15rem;overflow-y:auto}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option{padding:.375rem .75rem;font-size:0.9rem;font-weight:400;line-height:1.4}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message{color:#6c757d}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted{color:#000;background-color:#e9ecef}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted){color:#fff;background-color:#0d6efd}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled,.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-disabled=true]{color:#6c757d}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group]{padding:0}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group{padding:.375rem;font-weight:500;line-height:1.4;color:#6c757d}.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__options--nested .select2-results__option{padding:.375rem .75rem}.select2-container--bootstrap-5 .select2-selection--single{padding:.375rem 2.25rem .375rem .75rem;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:16px 12px}.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered{padding:0;font-weight:400;line-height:1.4;color:#212529}.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder{font-weight:400;line-height:1.4;color:#6c757d}.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__arrow{display:none}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered{display:flex;flex-direction:row;flex-wrap:wrap;padding-left:0;margin:0;list-style:none}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice{display:flex;flex-direction:row;align-items:center;padding:.35em .65em;margin-right:.375rem;margin-bottom:.375rem;font-size:0.9rem;color:#212529;cursor:auto;border:1px solid #ced4da;border-radius:.25rem}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove{width:.75rem;height:.75rem;padding:.25em;margin-right:.25rem;overflow:hidden;text-indent:100%;white-space:nowrap;background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat;border:0}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover{background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/.75rem auto no-repeat}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove>span{display:none}.select2-container--bootstrap-5 .select2-selection--multiple .select2-search{display:block;width:100%;height:1.5rem}.select2-container--bootstrap-5 .select2-selection--multiple .select2-search .select2-search__field{width:100%;height:1.5rem;margin-top:0;margin-left:0;font-family:inherit;line-height:1.4;background-color:transparent}.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear{right:.75rem}.select2-container--bootstrap-5.select2-container--disabled .select2-selection,.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection{color:#6c757d;cursor:not-allowed;background-color:#e9ecef;border-color:#ced4da;box-shadow:none}.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection--multiple .select2-selection__choice{cursor:not-allowed}.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove,.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove{display:none}.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__rendered:not(:empty),.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection--multiple .select2-selection__rendered:not(:empty){padding-bottom:0}.select2-container--bootstrap-5.select2-container--disabled .select2-selection--multiple .select2-selection__rendered:not(:empty)+.select2-search,.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus .select2-selection--multiple .select2-selection__rendered:not(:empty)+.select2-search{display:none}.input-group.has-validation>:nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu).select2-container--bootstrap-5 .select2-selection,.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu).select2-container--bootstrap-5 .select2-selection{border-top-right-radius:0;border-bottom-right-radius:0}.input-group>.btn~.select2-container--bootstrap-5 .select2-selection,.input-group>.dropdown-menu~.select2-container--bootstrap-5 .select2-selection,.input-group>.input-group-text~.select2-container--bootstrap-5 .select2-selection{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .select2-container--bootstrap-5{flex-grow:1}.input-group .select2-container--bootstrap-5 .select2-selection{height:100%}.is-valid+.select2-container--bootstrap-5 .select2-selection,.was-validated select:valid+.select2-container--bootstrap-5 .select2-selection{border-color:#198754}.is-valid+.select2-container--bootstrap-5.select2-container--focus .select2-selection,.is-valid+.select2-container--bootstrap-5.select2-container--open .select2-selection,.was-validated select:valid+.select2-container--bootstrap-5.select2-container--focus .select2-selection,.was-validated select:valid+.select2-container--bootstrap-5.select2-container--open .select2-selection{border-color:#198754;box-shadow:0 0 0 .25rem rgba(25,135,84,.25)}.is-valid+.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection,.was-validated select:valid+.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection{border-bottom:0 solid transparent}.is-valid+.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection,.was-validated select:valid+.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection{border-top:0 solid transparent;border-top-left-radius:0;border-top-right-radius:0}.is-invalid+.select2-container--bootstrap-5 .select2-selection,.was-validated select:invalid+.select2-container--bootstrap-5 .select2-selection{border-color:#dc3545}.is-invalid+.select2-container--bootstrap-5.select2-container--focus .select2-selection,.is-invalid+.select2-container--bootstrap-5.select2-container--open .select2-selection,.was-validated select:invalid+.select2-container--bootstrap-5.select2-container--focus .select2-selection,.was-validated select:invalid+.select2-container--bootstrap-5.select2-container--open .select2-selection{border-color:#dc3545;box-shadow:0 0 0 .25rem rgba(220,53,69,.25)}.is-invalid+.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection,.was-validated select:invalid+.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection{border-bottom:0 solid transparent}.is-invalid+.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection,.was-validated select:invalid+.select2-container--bootstrap-5.select2-container--open.select2-container--above .select2-selection{border-top:0 solid transparent;border-top-left-radius:0;border-top-right-radius:0}

/* Select2 Size Variants */
.select2-container--bootstrap-5 .select2--small.select2-selection{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.7875rem;border-radius:.2rem}.select2-container--bootstrap-5 .select2--large.select2-selection{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.125rem;border-radius:.3rem}

/* Form Select Size Integration */
.form-select-sm~.select2-container--bootstrap-5 .select2-selection{min-height:calc(1.5em + .5rem + 2px);padding:.25rem .5rem;font-size:.7875rem;border-radius:.2rem}.form-select-lg~.select2-container--bootstrap-5 .select2-selection{min-height:calc(1.5em + 1rem + 2px);padding:.5rem 1rem;font-size:1.125rem;border-radius:.3rem}

/* ASP.NET Core Identity specific overrides */
.form-floating > label {
  font-size: 12px !important;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  font-size: 10px !important;
}

.text-danger, .field-validation-error {
  font-size: 10px !important;
}

/* Validation summary */
.validation-summary-errors ul li {
  font-size: 10px !important;
}

/* Links in forms */
form a, .form-group a {
  font-size: 12px !important;
}

/* Removed DataTables integration - using pure JavaScript/Vue instead */

/* Responsive table padding adjustments */
@media (max-width: 768px) {
  .table th, .table td,
  .table-sm th, .table-sm td {
    /* Ultra-compact padding for mobile */
    padding: .125rem .125rem !important;
    font-size: 10px !important;
  }
}

/* Ensure all other elements inherit properly */
* {
  font-size: inherit;
}

/* ----------------------------
   9. Fixed Footer
   ---------------------------- */
.footer {
  position: fixed !important; /* Fixed position to stay at bottom of viewport */
  bottom: 0 !important; /* Stick to bottom of viewport */
  left: 0 !important; /* Align to left edge */
  right: 0 !important; /* Stretch to right edge */
  width: 100% !important;
  height: 32px !important; /* Reduced height to match button proportions for 12px font */
  background: var(--color-bg) !important;
  border-top: 1px solid var(--color-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--space-3) !important; /* Reduced padding to match compact sizing */
  font-size: 11px !important; /* Slightly smaller than body for footer text */
  color: var(--color-header-text) !important;
  z-index: 1000 !important; /* Ensure footer stays on top of other content */
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow above footer */
}

/* Ensure footer container doesn't interfere with footer positioning */
.footer .container {
  margin: 0 !important; /* Remove any container margins */
  padding: 0 !important; /* Remove any container padding */
  width: auto !important; /* Let the container size naturally */
  max-width: none !important; /* Remove max-width restrictions */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Fill the footer height */
}

.footer a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 11px;
}

.footer a:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

/* Main content area with proper spacing for fixed footer */
.main-content {
  margin-bottom: 44px; /* Space for fixed footer */
}

/* Ensure containers have proper spacing for fixed footer */
.container,
.container-fluid {
  margin-bottom: 0; /* No extra margin needed since main-content handles spacing */
}

/* ----------------------------
   3. Fixed Header Navigation
   ---------------------------- */
.navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 40px !important; /* Reduced from 48px */
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border) !important;
  z-index: 1050; /* Higher than footer to stack properly */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow below navbar */
  margin-bottom: 0 !important; /* Remove default margin */
  padding: 0 !important; /* Remove default padding */
}

/* Ensure navbar content is properly aligned */
.navbar .container {
  height: 40px !important; /* Match navbar height */
  display: flex !important;
  align-items: center !important; /* Vertically center all navbar content */
  justify-content: space-between !important;
  padding: 0 0.75rem !important; /* Consistent with footer padding */
  margin: 0 auto !important;
  max-width: 1140px; /* Bootstrap container max-width */
}

/* Ensure navbar nav and items are vertically centered */
.navbar-nav {
  display: flex !important;
  align-items: center !important; /* Vertically center nav items */
  margin-bottom: 0 !important; /* Remove any default margin */
}

.navbar-nav .nav-item {
  display: flex !important;
  align-items: center !important; /* Vertically center each nav item */
}

.navbar-nav .nav-link {
  display: flex !important;
  align-items: center !important; /* Vertically center link content */
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

/* Ensure navbar brand is vertically centered */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
}

/* Ensure navbar toggler is vertically centered */
.navbar-toggler {
  display: flex !important;
  align-items: center !important;
}

/* Ensure navbar collapse is vertically centered */
.navbar-collapse {
  display: flex !important;
  align-items: center !important;
}

/* Navbar brand styling */
.navbar-brand {
  font-size: 14px !important; /* Slightly larger for branding */
  font-weight: 600 !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin-right: var(--space-4) !important;
}

/* Navigation links styling */
.navbar-nav .nav-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  padding: 8px var(--space-3) !important; /* Compact padding */
  text-decoration: none !important;
  transition: color 120ms ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--color-primary) !important;
}

/* Navbar toggler for mobile */
.navbar-toggler {
  border: none !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

/* The body already has padding-top set earlier in the file, and flexbox layout handles footer */

/* Remove any top margin from main content since body has padding */
.main-content {
  margin-top: 0; /* Remove any top margin since body has padding */
}

/* ----------------------------
   10. Standard Form Design for Identity Pages
   ---------------------------- */

/* Standardized form design for all Identity pages */
body[data-page-path*="/identity/account"] .mb-3,
.manage-pages .mb-3 {
  margin-bottom: var(--space-4) !important; /* Use design system spacing */
}

body[data-page-path*="/identity/account"] .form-control,
body[data-page-path*="/identity/account"] .form-select,
.manage-pages .form-control,
.manage-pages .form-select {
  height: 26px !important; /* Compact height */
  padding: 3px 8px !important; /* Compact padding */
  font-size: 12px !important;
  line-height: 1.2 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xs) !important;
  background: var(--color-bg) !important;
}

body[data-page-path*="/identity/account"] .form-label,
.manage-pages .form-label {
  font-size: 11px !important; /* Slightly smaller than body for labels */
  font-weight: 500 !important;
  margin-bottom: var(--space-1) !important;
  color: var(--color-text) !important;
  display: block !important;
}

/* Input focus states for Identity pages */
body[data-page-path*="/identity/account"] .form-control:focus,
body[data-page-path*="/identity/account"] .form-select:focus,
.manage-pages .form-control:focus,
.manage-pages .form-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 98, 255, 0.25) !important;
  outline: none !important;
}

/* Button styling for Identity pages */
body[data-page-path*="/identity/account"] .btn,
.manage-pages .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  line-height: 1 !important;
  min-height: 28px !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-sm) !important;
}

body[data-page-path*="/identity/account"] .btn-primary,
.manage-pages .btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #ffffff !important;
}

body[data-page-path*="/identity/account"] .btn-primary:hover,
body[data-page-path*="/identity/account"] .btn-primary:focus,
.manage-pages .btn-primary:hover,
.manage-pages .btn-primary:focus {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}

/* Card styling for manage pages */
body[data-page-path*="/identity/account/manage"] .card,
.manage-pages .card {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

body[data-page-path*="/identity/account/manage"] .card-header,
.manage-pages .card-header {
  background: var(--color-bg) !important;
  border-bottom: 1px solid var(--color-border-subtle) !important;
  padding: var(--space-4) !important;
}

body[data-page-path*="/identity/account/manage"] .card-body,
.manage-pages .card-body {
  padding: var(--space-5) !important;
}

body[data-page-path*="/identity/account/manage"] .card-title,
.manage-pages .card-title {
  font-size: 14px !important; /* Match heading hierarchy */
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin-bottom: 0 !important;
}

/* Alert styling for Identity pages */
body[data-page-path*="/identity/account"] .alert,
.manage-pages .alert {
  font-size: 11px !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border-subtle) !important;
}

body[data-page-path*="/identity/account"] .alert-info,
.manage-pages .alert-info {
  background-color: rgba(0, 98, 255, 0.05) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-text) !important;
}

/* Form validation styling for Identity pages */
body[data-page-path*="/identity/account"] .text-danger,
body[data-page-path*="/identity/account"] .field-validation-error,
.manage-pages .text-danger,
.manage-pages .field-validation-error {
  font-size: 10px !important;
  color: var(--color-status-red) !important;
  margin-top: var(--space-1) !important;
}

body[data-page-path*="/identity/account"] .validation-summary-errors,
.manage-pages .validation-summary-errors {
  font-size: 10px !important;
  color: var(--color-status-red) !important;
  margin-bottom: var(--space-4) !important;
}

/* Disabled form controls in Identity pages */
body[data-page-path*="/identity/account"] .form-control:disabled,
body[data-page-path*="/identity/account"] .form-control[readonly],
.manage-pages .form-control:disabled,
.manage-pages .form-control[readonly] {
  background-color: #e9ecef !important;
  border-color: #ced4da !important;
  color: #495057 !important;
  cursor: not-allowed !important;
}

/* Form check styling for Identity pages */
body[data-page-path*="/identity/account"] .form-check,
.manage-pages .form-check {
  margin-bottom: var(--space-3) !important;
}

body[data-page-path*="/identity/account"] .form-check-input,
.manage-pages .form-check-input {
  width: 14px !important;
  height: 14px !important;
  margin-top: 2px !important;
}

body[data-page-path*="/identity/account"] .form-check-label,
.manage-pages .form-check-label {
  font-size: 12px !important;
  color: var(--color-text) !important;
  margin-left: var(--space-1) !important;
}

/* Specific compact styling for ChangePassword page */
body[data-page-path*="/identity/account/manage/changepassword"] .form-control,
body[data-page-path*="/identity/account/manage/changepassword"] .form-select,
.manage-pages .form-control[type="password"] {
  height: 24px !important; /* Further reduced height for ChangePassword page */
  padding: 2px 6px !important; /* Minimal padding to match 12px font precisely */
  line-height: 1.1 !important; /* Tighter line height for compact appearance */
}

/* Button adjustments for ChangePassword page */
body[data-page-path*="/identity/account/manage/changepassword"] .btn {
  height: 24px !important; /* Match input height */
  padding: 2px 8px !important; /* Minimal padding */
  line-height: 1.1 !important;
  min-height: 24px !important;
}

/* Organization & Role readonly fields styling */
body[data-page-path*="/identity/account/manage/index"] .bg-light,
.manage-pages[data-page-path*="index"] .bg-light {
  background-color: #e9ecef !important;
  border: 1px solid #ced4da !important;
  color: #495057 !important;
  height: 26px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-xs) !important;
  cursor: not-allowed !important;
}

/* ----------------------------
   11. Bootstrap 5 Default Card Layout (Reset)
   ---------------------------- */

/* Use Bootstrap 5 defaults for all cards - no custom overrides */

/* ----------------------------
   12. Bootstrap 5 Default Table Layout (Reset)
   ---------------------------- */

/* Use Bootstrap 5 defaults for all tables - no custom overrides */

/* ----------------------------
   13. Bootstrap 5 Default Layout (Reset)
   ---------------------------- */

/* Use Bootstrap 5 defaults for all layout elements - no custom overrides */

/* ----------------------------
   14. Ultra-Compact Table Styling (JavaScript/Vue Tables)
   ---------------------------- */

/* Ultra-compact tables for better space utilization */
.table-sm th, .table-sm td {
  padding: .125rem .25rem !important; /* Ultra-compact padding */
  font-size: 10px !important; /* Smaller font for maximum compactness */
  line-height: 1.1 !important;
  vertical-align: middle !important; /* Center text vertically */
}

.table th, .table td {
  padding: .25rem .25rem !important; /* More compact than Bootstrap default */
  font-size: 12px !important;
  line-height: 1.2 !important;
  vertical-align: middle !important; /* Center text vertically */
}

/* Table header specific styling for ultra-compact tables */
.table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  position: relative !important; /* For sort indicator positioning */
  cursor: pointer !important; /* Indicate clickable headers */
  user-select: none !important; /* Prevent text selection on click */
  transition: background-color 0.2s ease !important; /* Smooth hover transition */
  vertical-align: middle !important; /* Center text vertically */
}

/* Make all tables use the table-sm compact styling by default */
.table {
  font-size: 11px !important; /* Compact font size */
}

.table tbody tr {
  height: auto !important; /* Let Bootstrap handle natural height */
}

/* Remove custom data-table styling - using standard Bootstrap tables */
.data-table {
  /* Reset to use standard Bootstrap table classes instead */
}

/* =====================================================
   Auto-Sizing Table Columns (Content-Based Width)
   ----------------------------------------------------- */

/* Default table layout for auto-sizing columns based on content */
.table {
  font-size: 11px !important; /* Compact font size */
  table-layout: auto !important; /* Auto-size columns based on content */
  width: 100% !important;
}

/* Override resizable table fixed layout when auto-sizing is desired */
.table:not([data-resizable="true"]) {
  table-layout: auto !important; /* Auto-size for non-resizable tables */
}

/* Content-based column sizing */
.table:not([data-resizable="true"]) th,
.table:not([data-resizable="true"]) td {
  width: auto !important; /* Let content determine width */
  min-width: fit-content !important; /* Minimum width based on content */
  white-space: nowrap !important; /* Prevent text wrapping for consistent sizing */
  overflow: visible !important; /* Show all content */
  text-overflow: clip !important; /* Don't use ellipsis */
}

/* Special handling for action columns to keep them compact */
.table:not([data-resizable="true"]) th:last-child,
.table:not([data-resizable="true"]) td:last-child {
  width: 1% !important; /* Minimal width for action columns */
  white-space: nowrap !important;
}

/* Auto-sizing for responsive table wrappers */
.table-responsive .table:not([data-resizable="true"]) {
  min-width: auto !important; /* Remove minimum width constraints */
}

.table tbody tr {
  height: auto !important; /* Let Bootstrap handle natural height */
}

/* Remove custom data-table styling - using standard Bootstrap tables */
.data-table {
  /* Reset to use standard Bootstrap table classes instead */
}

/* =====================================================
   Resizable Table Columns (Keep existing functionality)
   ----------------------------------------------------- */
   
/* Ensure table headers are positioned relatively for resize handles */
.table[data-resizable="true"] thead th {
    position: relative !important;
    user-select: none;
}

/* Visual feedback when hovering over resizable columns */
.table[data-resizable="true"] thead th:hover .column-resize-handle {
    background-color: rgba(0, 123, 255, 0.1) !important;
}

/* Resize cursor for the entire header when resizing */
.table[data-resizable="true"].resizing {
    cursor: col-resize !important;
}

/* Disable text selection during resize */
.table[data-resizable="true"].resizing,
.table[data-resizable="true"].resizing * {
    user-select: none !important;
}

/* Column resize handle styling */
.column-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 10;
    user-select: none;
    transition: background-color 0.2s ease;
}

/* Handle hover effect */
.column-resize-handle:hover {
    background-color: rgba(0, 123, 255, 0.2) !important;
}

/* Handle active state during resize */
.column-resize-handle.resizing {
    background-color: rgba(0, 123, 255, 0.3) !important;
}

/* Visual indicator for resizable columns */
.table[data-resizable="true"] thead th:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 2px;
    width: 2px;
    height: 50%;
    background-color: rgba(0, 123, 255, 0.1);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.table[data-resizable="true"] thead th:not(:last-child):hover::after {
    opacity: 1;
}

/* Ensure fixed table layout for consistent resizing */
.table[data-resizable="true"] {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Smooth transitions for column width changes */
.table[data-resizable="true"] th,
.table[data-resizable="true"] td {
    transition: width 0.1s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle !important; /* Center text vertically */
}

/* Remove transitions during active resize for better performance */
.table[data-resizable="true"].resizing th,
.table[data-resizable="true"].resizing td {
    transition: none !important;
}

/* =====================================================
   Table Sizing Utility Classes
   ----------------------------------------------------- */

/* Force auto-sizing for specific tables */
.table-auto-size {
  table-layout: auto !important;
}

.table-auto-size th,
.table-auto-size td {
  width: auto !important;
  min-width: fit-content !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Force fixed layout for specific tables (override auto-sizing) */
.table-fixed-size {
  table-layout: fixed !important;
}

.table-fixed-size th,
.table-fixed-size td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.table tbody tr {
  height: auto !important; /* Let Bootstrap handle natural height */
}

/* =====================================================
   ULTRA-COMPACT LAYOUT STYLES
   ----------------------------------------------------- */

/* Remove container max-width restrictions */
.container-fluid {
  padding-left: 0.25rem !important; /* Reduced padding since we have margins on main-content */
  padding-right: 0.25rem !important; /* Reduced padding since we have margins on main-content */
  max-width: 100% !important;
}

/* Ultra-compact main content with thin margin */
.main-content {
  margin-bottom: 32px !important; /* Reduced footer space */
  padding: 0 !important;
  margin-top: 0.25rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Reduce body padding for header */
body {
  padding-top: 40px !important; /* Reduced from 48px */
}

/* Ultra-compact navbar */
.navbar {
  height: 40px !important; /* Reduced from 48px */
  padding: 0 !important;
}

.navbar .container-fluid {
  height: 40px !important;
  padding: 0 0.75rem !important;
  display: flex !important;
  align-items: center !important; /* Vertically center all navbar content */
}

/* Ultra-compact footer with centered text */
.footer {
  height: 32px !important; /* Reduced from 44px */
  font-size: 11px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  text-align: center !important; /* Center text horizontally */
}

.footer .container-fluid {
  padding: 0 0.75rem !important;
  text-align: center !important; /* Center text in container */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

/* Ultra-compact cards */
.card {
  margin-bottom: 0.5rem !important;
}

.card-header {
  padding: 0.5rem 0.75rem !important;
  font-size: 12px !important;
}

.card-body {
  padding: 0.75rem !important;
}

/* Ultra-compact page margins */
.row {
  margin-left: -0.125rem !important;  /* Reduced to match smaller container margins */
  margin-right: -0.125rem !important; /* Reduced to match smaller container margins */
}

.col, [class*="col-"] {
  padding-left: 0.125rem !important;  /* Reduced to match smaller container margins */
  padding-right: 0.125rem !important; /* Reduced to match smaller container margins */
}

/* Ultra-compact headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Ultra-compact paragraphs and lists */
p, ul, ol {
  margin-bottom: 0.5rem !important;
}

/* Ultra-compact form elements */
.mb-3 {
  margin-bottom: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.25rem !important;
}

/* Ultra-compact buttons */
.btn {
  padding: 0.25rem 0.5rem !important;
  font-size: 11px !important;
  min-height: 24px !important;
}

/* Ultra-compact alerts */
.alert {
  padding: 0.5rem 0.75rem !important;
  margin-bottom: 0.5rem !important;
}

/* Ultra-compact breadcrumb */
.breadcrumb {
  padding: 0.25rem 0 !important;
  margin-bottom: 0.5rem !important;
  font-size: 11px !important;
}

/* Remove unnecessary spacing from main content */
main > .container-fluid,
main > .container {
  padding: 0 !important;
}

/* Ultra-compact spacing utilities override */
.mt-3 { margin-top: 0.5rem !important; }
.mb-3 { margin-bottom: 0.5rem !important; }
.mt-4 { margin-top: 0.75rem !important; }
.mb-4 { margin-bottom: 0.75rem !important; }
.pt-3 { padding-top: 0.5rem !important; }
.pb-3 { padding-bottom: 0.5rem !important; }
.pt-4 { padding-top: 0.75rem !important; }
.pb-4 { padding-bottom: 0.75rem !important; }

/* Ensure tables use full width */
.table-responsive {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove default Bootstrap container padding on specific pages */
.container-fluid > .row:first-child {
  margin-top: 0.5rem !important;
}

/* =====================================================
   SUPER RESPONSIVE MAIN CONTAINER
   ----------------------------------------------------- */

/* Base responsive main content */
.main-content {
  margin-bottom: 32px !important; /* Space for footer */
  padding: 0 !important;
  margin-top: 0.25rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ultra-compact responsive main container margins */
@media (max-width: 575.98px) {
  .main-container {
    margin-left: 0.1rem !important;
    margin-right: 0.175rem !important; /* Increased from 0.15rem */
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .main-container {
    margin-left: 0.15rem !important;
    margin-right: 0.233rem !important; /* Increased from 0.2rem */
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .main-container {
    margin-left: 0.2rem !important;
    margin-right: 0.35rem !important; /* Increased from 0.3rem */
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .main-container {
    margin-left: 0.25rem !important;
    margin-right: 0.467rem !important; /* Increased from 0.4rem */
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .main-container {
    margin-left: 0.3rem !important;
    margin-right: 0.583rem !important; /* Increased from 0.5rem */
  }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
  .main-container {
    margin-left: 0.35rem !important;
    margin-right: 0.7rem !important; /* Increased from 0.6rem */
  }
}

@media (min-width: 1600px) {
  .main-container {
    margin-left: 0.4rem !important;
    margin-right: 0.817rem !important; /* Increased from 0.7rem */
  }
}

/* Ensure responsive container fluid */
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive padding for container-fluid */
@media (min-width: 1200px) {
  .container-fluid {
    padding-left: 0.25rem !important;  /* Reduced from 0.5rem */
    padding-right: 0.25rem !important; /* Reduced from 0.5rem */
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .container-fluid {
    padding-left: 0.1875rem !important;  /* Reduced from 0.375rem */
    padding-right: 0.1875rem !important; /* Reduced from 0.375rem */
  }
}

@media (max-width: 767px) {
  .container-fluid {
    padding-left: 0.125rem !important;  /* Reduced from 0.25rem */
    padding-right: 0.125rem !important; /* Reduced from 0.25rem */
  }
}

@media (max-width: 375px) {
  .container-fluid {
    padding-left: 0.0625rem !important;  /* Reduced from 0.125rem */
    padding-right: 0.0625rem !important; /* Reduced from 0.125rem */
  }
}

/* Ensure content doesn't overflow on any screen size */
main {
  width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Prevent horizontal scrolling */
body {
  overflow-x: hidden !important;
}

/* Make all direct children of main responsive */
main > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Responsive tables */
@media (max-width: 767px) {
  .table-responsive {
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
  }
}

/* Responsive cards */
@media (max-width: 575px) {
  .card {
    margin-bottom: 0.375rem !important;
  }
  
  .card-header {
    padding: 0.375rem 0.5rem !important;
  }
  
  .card-body {
    padding: 0.5rem !important;
  }
}

/* Responsive text sizes */
@media (max-width: 575px) {
  body {
    font-size: 11px !important;
  }
  
  h1 { font-size: 13px !important; }
  h2 { font-size: 12px !important; }
  h3 { font-size: 11px !important; }
  h4 { font-size: 11px !important; }
  h5 { font-size: 10px !important; }
  h6 { font-size: 9px !important; }
}

/* Responsive navbar adjustments */
@media (max-width: 575px) {
  .navbar {
    height: 36px !important;
  }
  
  .navbar .container-fluid {
    height: 36px !important;
    padding: 0 0.5rem !important;
  }
  
  body {
    padding-top: 36px !important;
  }
}

/* Responsive footer adjustments */
@media (max-width: 575px) {
  .footer {
    height: 28px !important;
    font-size: 10px !important;
  }
}