/* =====================================================================
   1) RESET & PAGE BASICS
   ===================================================================== */

/* Light page background for subtle app chrome */
html, body {
  background-color: #f8f9fb; /* very light gray-blue */
}

/* White footer with vertical padding */
footer {
  background-color: white;
  padding: 1rem 0;
}

/* Utility to force white backgrounds where needed (cards/sections) */
.background-white {
  background-color: #ffffff !important;
}

/* =====================================================================
   2) BRAND / LOGO
   ===================================================================== */

/* Scales horizontally; fixed height for consistent navbar/header sizing */
.logo-img {
  height: 60px;
  display: block;
  width: auto;
}

/* =====================================================================
   3) ACCESSIBILITY & FOCUS
   ===================================================================== */

/* Visible keyboard focus ring on links (WCAG-friendly) */
a:focus-visible {
  outline: 1px solid #0d6efd;
  outline-offset: 1px;
}

/* =====================================================================
   4) LINKS (GLOBAL)
   ===================================================================== */

/* Brand link color, remove underline by default */
a {
  color: #2A4D9B !important;                 /* Brand-ish primary blue */
  text-decoration: none !important;          /* No underline by default */
}

/* On hover/focus/active: darker blue and show underline for affordance */
a:hover,
a:focus,
a:active {
  color: #1E3A8A !important;                 /* Darker blue on interaction */
  text-decoration: underline !important;     /* Add underline on hover */
}

/* =====================================================================
   5) LINKS THAT LOOK LIKE BUTTONS
   ===================================================================== */

/* Ensure button-styled links keep white text and no underline */
a.btn {
  color: #fff !important;                     /* Keep white text on .btn */
  text-decoration: none !important;           /* Never underline buttons */
}

/* Outline primary button links: keep primary color when idle */
a.btn-outline-primary {
  color: #0d6efd !important;                  /* Bootstrap primary */
}

/* On interaction, outline buttons typically invert to white text */
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
a.btn-outline-primary:active {
  color: #fff !important;                     /* Match Bootstrap behavior */
}

/* =====================================================================
   6) NAVBAR / HEADER
   ===================================================================== */

/* White navbar with subtle bottom border to separate from content */
nav.navbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Add breathing room between central navbar items */
.navbar-nav li {
  margin-right: 1.5rem !important;
}

/* =====================================================================
   7) AVATARS & PROFILE IMAGES
   ===================================================================== */

/* Main & modal profile avatars: circular, centered, cover object fit */
#profile-photo,
#profile-photo-modal {
  width: 120px;                               /* Default (main) size */
  height: 120px;
  object-fit: cover;                          /* Crop to fill circle */
  border-radius: 50%;                         /* Circle */
  display: block;                             /* Center via margins */
  margin-left: auto;
  margin-right: auto;
}

/* Smaller avatar for modal variant */
#profile-photo-modal {
  width: 80px;
  height: 80px;
}

/* Name beneath profile image */
.profile-name {
  font-size: 1.5rem;
  text-align: center;
}

/* Tiny circular avatar for navbar user menu */
#navbar-profile-photo {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 0.5rem;                       /* Space before text */
  vertical-align: middle;                     /* Align with baseline text */
}

/* Small inline avatars (tables/lists) */
.profile-photo {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
}

/* =====================================================================
   8) DROPDOWNS
   ===================================================================== */

/* Remove default padding/margins to get tighter menus */
.dropdown-menu {
  padding: 0;
  margin: 0;
}

/* Reset li spacing inside dropdown menus; give small internal padding */
.dropdown-menu li {
  margin-right: 0 !important;
  padding: 0.2rem;
}

/* Keep item background transparent on interaction (custom styling elsewhere) */
.dropdown-menu li a:active,
.dropdown-menu li a:focus, 
.dropdown-menu li a:hover {
  background-color: transparent !important;
}

/* Full-width “status” links inside dropdown menus */
.status-link-dropdown {
  text-decoration: none !important;           /* No underline */
  width: 100% !important;                     /* Stretch to menu width */
}

/* Gentle hover state for status links */
.dropdown-menu .status-link-dropdown:hover,
.dropdown-menu .status-link-dropdown:focus {
  background-color: #e9f2fb !important;       /* Soft blue-gray highlight */
  text-decoration: none !important;           /* Keep no underline */
}

/* =====================================================================
   9) TABLES
   ===================================================================== */

/* Slightly heavier header weight for readability */
thead th {
  font-weight: 500;
}

/* Slightly smaller body text to fit more data */
tbody {
  font-size: 0.9rem;
}

/* =====================================================================
   10) COMPONENT-SPECIFIC STYLES
   ===================================================================== */

/* Job detail view: make badges smaller to reduce visual noise */
#jobDetailContainer .badge {
  font-size: 0.75rem;
}

/* Phone extension input (very narrow). Consider >10px if clipping occurs. */
.phone-EXT {
  width: 10px !important;
}

.tax-rate-section input {
  width: 120px;
}

.background-gray {
  background-color:gray !important; /* very light gray-blue */
}

.color-red {
  color: red !important; /* very light gray-blue */
}

/* =====================================================================
   11) READONLY / INTERACTION UTILITIES
   ===================================================================== */

/* Visually indicate readonly and block pointer input (for custom cases) */
.readonly-bg {
  background-color: #e9ecef !important;       /* Bootstrap disabled bg */
  pointer-events: none;                        /* Prevent interaction */
}