/* ========= Dynamic theme tokens =====================================
   --header-color            ← {{\s*contractor_info.header_color.*?}}
   --box-color               ← {{\s*contractor_info.box_color.*?}}
   --combo-header-color      ← {{\s*combo.header.*?}}
   --combo-box-color         ← {{\s*combo.box.*?}}
   (inline) width%          ← {{ health_score }}
======================================================================== */

.error-page {
  margin: 2rem auto;
  text-align: center;
}

.error-page h1 {
  color: #dc3545;
  font-size: 6rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.error-page h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.error-page p {
  color: #6c757d;
  font-size: 1rem;
}

.error-page a.btn {
  margin-top: 1rem;
}

.error-page-wrapper {
  min-height: calc(100vh - 4rem);
}

body.landing-page > .wrapper, body.landing-page .content-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

body.landing-page .main-sidebar, body.landing-page .main-header, body.landing-page .main-footer {
  display: none !important;
}

body.landing-page .main-footer {
  margin-left: 0 !important;
  width: 100% !important;
}

.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  overflow: hidden;
  padding: 4rem 0;
  position: relative;
  text-align: center;
}

.hero-section::before {
  background: rgba(0, 0, 0, 0.1);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
  opacity: 0.95;
}

.hero-buttons .btn {
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0.5rem;
  padding: 0.75rem 2rem;
  transition: all 0.3s ease;
}

.btn-hero-primary {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
}

.btn-hero-primary:hover {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.btn-hero-secondary {
  background: white;
  border: 2px solid white;
  color: #667eea;
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.feature-grid {
  padding: 4rem 0;
}

.feature-card {
  height: 100%;
  padding: 2rem 1rem;
  text-align: center;
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  color: #667eea;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-title {
  color: #2c3e50;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feature-description {
  color: #6c757d;
  line-height: 1.6;
}

.feature-section {
  padding: 3rem 0;
}

.feature-section:nth-child(even) {
  background: #f8f9fa;
}

.feature-image {
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  height: 300px;
  object-fit: cover;
  width: 100%;
}

.feature-content h3 {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feature-content p {
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  color: #495057;
  padding: 0.5rem 0;
}

.feature-list li::before {
  color: #28a745;
  content: "✓";
  font-weight: bold;
  margin-right: 0.5rem;
}

.pricing-section {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.1),
    rgba(118, 75, 162, 0.1)
  );
  padding: 4rem 0;
}

.pricing-calculator {
  margin: 0 auto;
  max-width: 600px;
}

.pricing-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.pricing-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 0.75rem 0.75rem 0 0;
  color: white;
  padding: 2rem;
  text-align: center;
}

.pricing-title {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.account-controls {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin: 2rem 0;
}

.account-slider {
  appearance: none;
  background: #e9ecef;
  border-radius: 4px;
  flex: 1;
  height: 8px;
  outline: none;
}

.account-slider::-webkit-slider-thumb {
  appearance: none;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  height: 24px;
  width: 24px;
}

.account-slider::-moz-range-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: 2px solid white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  height: 24px;
  width: 24px;
}

.account-input {
  border: 2px solid #e9ecef;
  border-radius: 0.375rem;
  font-weight: 600;
  padding: 0.5rem;
  text-align: center;
  width: 80px;
}

.pricing-display {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  padding: 1.5rem;
  text-align: center;
}

.price-per-user {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.subtotal {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.pricing-body {
  padding: 2rem;
  text-align: center;
}

.pricing-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.pricing-features li {
  background: #f8f9fa;
  border-radius: 2rem;
  color: #495057;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.register-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 2rem;
  color: white;
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1rem 2rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.register-btn:hover {
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

.about-footer {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  margin-top: 4rem;
  padding: 3rem 0 2rem;
}

.footer-links a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer-links a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.modal-header {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0;
  color: white;
  padding: 1.5rem;
}

.modal-header .close {
  color: white;
  opacity: 0.8;
  text-shadow: none;
}

.modal-header .close:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .content-container {
    padding: 0 10px;
  }

  .card-body {
    padding: 1rem;
  }

  .dt-top-left,
  .dt-top-right,
  .dt-bottom-left,
  .dt-bottom-right {
    float: none;
    margin: 0.5rem 0;
    text-align: center;
  }

  #calendar {
    padding: 0.5rem;
    min-height: 400px;
  }
}

body {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  transition: background-color 0.4s ease;
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #fff;
  margin-bottom: 2rem;
  padding: 2rem 1.5rem;
}

.page-header h1 {
  font-size: 2.25rem;
  font-weight: 600;
  margin: 0;
}

.page-header p {
  opacity: .9;
}

.btn-header-action {
  background: #ffffff;
  border: 1px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: #007bff;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-header-action:hover {
  background: #f8f9fa;
  color: #0056b3;
  transform: translateY(-1px);
}

.content-container{
    width: 100%;              /* stop fighting the flexbox */
    flex: 1 1 auto;           /* grow/shrink with viewport changes   */
    max-width: 1700px;        /* honour your overall cap             */
    margin: 0 auto;           /* keep centred when narrower than cap */
}

@media (min-width: 992px) {
}

/* C) Page-level safety clamp (phones): never allow page h-scroll. */
@media (max-width: 768.98px){
  html, body, .content-container, .content-wrapper { max-width:100%; overflow-x:hidden; }
}


.content-wrapper {
  animation: fadeIn 0.3s ease-in-out;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  transition: background-color 0.4s ease;
}

.card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 2rem;
  transition: all 0.3s ease !important;
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.alert {
  border: none !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  font-weight: 500;
  margin-bottom: 1rem !important;
  padding: 1rem 3rem 1rem 1rem !important;
  position: relative !important;
}

.alert-success {
  background: #d4edda;
  color: #155724;
}

.alert-danger {
  background: linear-gradient(135deg, #f8d7da, #f5c6cb) !important;
  color: #721c24 !important;
}

.alert-warning {
  background: #fff3cd;
  color: #856404;
}

.alert-info {
  background: linear-gradient(135deg, #d1ecf1, #bee5eb) !important;
  color: #0c5460 !important;
}

.alert-dismiss {
  background: none !important;
  border: none !important;
  color: inherit !important;
  cursor: pointer !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  opacity: 0.6 !important;
  position: absolute !important;
  right: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: opacity 0.2s ease !important;
}

.alert-dismiss:hover {
  opacity: 1 !important;
}

/* ── base.html responsive header tweaks ─────────────────────────── */
@media (max-width: 768px){
  .page-header{ padding:1.5rem 1rem; }
  .page-header h1{ font-size:1.75rem; }
}

/* ── about.html responsive tweaks ──────────────────────────────── */
@media (max-width: 768px){
  .hero-title       { font-size: 2.5rem; }
  .hero-subtitle    { font-size: 1.2rem; }

  .hero-buttons .btn{
    display:block;
    width:200px;
    margin:0.5rem auto;
  }

  .feature-section  { padding: 2rem 0; }
  .pricing-section  { padding: 2rem 0; }

  .account-controls { flex-direction: column; gap:1rem; }
  .account-slider   { width:100%; }

  .pricing-features {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px){
  .page-header{ padding:1.25rem 1rem; }
  .page-header h1{ font-size:1.5rem; }
}

/* ── contractor_info.html responsive tweaks ─────────────────── */
@media (max-width: 576px){
  .payment-logos-grid { grid-template-columns: 1fr; }
  .color-history      { justify-content: center; }
  .upload-zone        { padding: 1rem; }
}

/* ── create_estimate.html responsive tweaks ─────────────────── */
@media (max-width: 576px){
  .content-container     { width: 95%; }
  .item-form             { padding: 1rem; }
  .remove-item-btn       { position: static; width: 100%; margin-bottom: 1rem; border-radius: .25rem; }
  .btn-group-spaced      { display: flex; flex-direction: column; width: 100%; }
  .btn-group-spaced .btn { width: 100%; margin-bottom: .5rem; }
}

/* ── edit_estimate.html wrapper ─────────────────────────────── */
.estimate-create-container { max-width: 1320px; margin: 0 auto; }
@media (max-width: 576px){
  .estimate-create-container { width: 95%; }
}

/* ── customers.html default view state ─────────────────────── */
#card-view { display: none; }   /* hidden until user clicks “Cards” */

/* ── gradient versions to match danger/info alerts ─────────────── */
.alert-success{
  background:linear-gradient(135deg,#d4edda,#c3e6cb) !important;
  color:#155724 !important;
}
.alert-warning{
  background:linear-gradient(135deg,#fff3cd,#ffeaa7) !important;
  color:#856404 !important;
}

.main-footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1) !important;
  color: #ffffff !important;
}

.main-footer a {
  color: #ffffff !important;
  position: relative !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.main-footer a:hover {
  color: #f8f9fa !important;
  text-decoration: none !important;
}

.main-footer a:hover::after {
  background: #ffffff !important;
  border-radius: 1px !important;
  bottom: -2px !important;
  content: "" !important;
  height: 2px !important;
  left: 0 !important;
  position: absolute !important;
  width: 100% !important;
}

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 4px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8, #6a4190);
}

*:focus-visible {
  outline: 2px solid #4ade80 !important;
  outline-offset: 2px !important;
}

body.dark-mode {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  color: #e8f4fd !important;
}

body.dark-mode .content-wrapper {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
}

body.dark-mode .card {
  background: linear-gradient(135deg, #2d3748, #4a5568) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #e8f4fd !important;
}

body.dark-mode .card-header {
  background: linear-gradient(
    135deg,
    rgba(74, 144, 226, 0.2),
    rgba(80, 200, 120, 0.2)
  ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .alert-success {
  background: linear-gradient(
    135deg,
    rgba(72, 187, 120, 0.2),
    rgba(56, 161, 105, 0.2)
  ) !important;
  border: 1px solid rgba(72, 187, 120, 0.3) !important;
  color: #9ae6b4 !important;
}

body.dark-mode .alert-danger {
  background: linear-gradient(
    135deg,
    rgba(245, 101, 101, 0.2),
    rgba(229, 62, 62, 0.2)
  ) !important;
  border: 1px solid rgba(245, 101, 101, 0.3) !important;
  color: #feb2b2 !important;
}

body.dark-mode .alert-warning {
  background: linear-gradient(
    135deg,
    rgba(237, 137, 54, 0.2),
    rgba(221, 107, 32, 0.2)
  ) !important;
  border: 1px solid rgba(237, 137, 54, 0.3) !important;
  color: #fbd38d !important;
}

body.dark-mode .alert-info {
  background: linear-gradient(
    135deg,
    rgba(66, 153, 225, 0.2),
    rgba(49, 130, 206, 0.2)
  ) !important;
  border: 1px solid rgba(66, 153, 225, 0.3) !important;
  color: #90cdf4 !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767.98px) {
  .brand-text {
    display: none;
  }

  .nav-sidebar .nav-link {
    padding: 0.5rem 1rem;
  }

  .nav-section-header {
    padding: 0.25rem 1rem;
    font-size: 0.7rem;
  }
}

.card-rounded {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-header-primary {
  background: #007bff;
  color: #fff;
}

.card-header-success {
  background: #28a745;
  color: #fff;
}

.card-body {
  background: #ffffff;
  padding: 1.5rem;
}

.card-header {
  border-radius: 0.5rem 0.5rem 0 0 !important;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #ddf600 0%, #ff0000 100%);
  border-bottom: 1px solid #dee2e6;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-check {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
}

.form-check-label {
  font-size: 0.95rem;
  line-height: 1.4;
}

.form-control {
  border: 1px solid #ced4da;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  transform: translateY(-1px);
}

.usage-badge {
  background: #e8f0fe;
  border-radius: 0.5rem;
  color: #1a73e8;
  display: inline-block;
  font-weight: 500;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}

.remaining-searches {
  background: #34a853;
  border-radius: 1rem;
  color: white;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
}

.btn-primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
  font-size: 1rem;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
  transform: translateY(-1px);
}

.card-header-info {
  background: #17a2b8;
  color: #fff;
  position: relative;
}

.card-header-secondary {
  background: #b106f8;
  color: #fff;
    position: relative;
    text-align: center;
    justify-content: space-between;
    display: flex;
}

.upload-zone {
  background: rgba(0, 123, 255, 0.05);
  border: 2px dashed #007bff;
  border-radius: 0.6rem;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.upload-zone:hover {
  background: rgba(0, 123, 255, 0.1);
  border-color: #0056b3;
}

.payment-logos-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-top: 1rem;
}

.payment-logo-item {
  align-items: center;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  transition: all 0.2s ease;
}

.payment-logo-item:hover {
  background-color: rgba(0, 123, 255, 0.05);
  border-color: #007bff;
}

.payment-logo-item input[type="checkbox"] {
  transform: scale(1.2);
}

.payment-logo-item img {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  height: 32px;
  padding: 4px;
}

.color-picker-group {
  position: relative;
}

.color-preview {
  border: 2px solid #dee2e6;
  border-radius: 0.375rem;
  display: inline-block;
  height: 40px;
  margin-left: 0.5rem;
  vertical-align: middle;
  width: 40px;
}

.color-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.color-swatch {
  border: 2px solid #dee2e6;
  border-radius: 0.375rem;
  cursor: pointer;
  height: 60px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 60px;
}

.color-swatch:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.color-swatch::after {
  background: var(--box-color);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  bottom: 0;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  right: 0;
}

.current-logo-display {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.6rem;
  padding: 1.5rem;
  text-align: center;
}

.current-logo-display img {
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 120px;
  max-width: 100%;
}

.item-form {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  padding: 1.5rem;
  position: relative;
  transition: all 0.2s ease;
}

.item-form:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.remove-item-btn {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 0.875rem;
  height: 30px;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 30px;
}

.form-group label {
  color: #495057;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.btn-group-spaced {
  gap: 0.5rem;
}

.subtotal-display {
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-weight: 600;
  margin-top: 0.5rem;
  padding: 0.5rem;
  text-align: right;
}

body.dark-mode .form-control, body.dark-mode .custom-select, body.dark-mode .subtotal-display {
  background: #495057 !important;
  border-color: #6c757d !important;
  color: #f8f9fa !important;
}

body.dark-mode .select2-container--bootstrap4 .select2-selection--single, body.dark-mode .select2-container--bootstrap4 .select2-selection--multiple {
  background: #495057 !important;
  border-color: #6c757d !important;
  color: #f8f9fa !important;
}

body.dark-mode input:-webkit-autofill, body.dark-mode textarea:-webkit-autofill, body.dark-mode select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #495057 inset !important;
  -webkit-text-fill-color: #f8f9fa !important;
}

.select2-container--bootstrap4 .select2-selection--single {
  align-items: center;
  background: #fff !important;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  display: flex;
  font-size: 0.95rem !important;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  padding-left: 1rem !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered, .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  line-height: 1 !important;
  padding: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
  line-height: 1 !important;
  padding: 0 !important;
}

.card-header-warning {
  background: #ffc107;
  color: #212529;
}

.card-header-danger {
  background: #dc3545;
  color: #fff;
}

.status-active {
  background: #d4edda !important;
}

.status-inactive {
  background: #f8d7da !important;
}

.status-prospect {
  background: #fff3cd !important;
}

.rotate-180 {
  transform: rotate(180deg);
}

.badge-residential {
  background: #6f42c1;
  color: #fff;
}

.badge-commercial {
  background: #fd7e14;
  color: #fff;
}

.health-bar {
  height: 10px;
}

.health-text {
  font-size: 0.75rem;
}

.view-toggle .btn {
  padding: 0.25rem 0.5rem;
}

.view-toggle .btn i {
  font-size: 1rem;
}

.customer-card {
  transition: all 0.2s ease;
}

.customer-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
}

.quick-add-form .form-group {
  margin-bottom: 0.5rem;
}

.card-rounded.action-bar-card {
  position: relative;
  z-index: 2;
}

.card-rounded.action-bar-card .dropdown-menu {
  position: absolute;
  z-index: 3;
}

.card-header-info .show-archived-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.stat-tile {
  background: white;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}

.stat-tile:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.stat-tile-header {
  background: linear-gradient(
    135deg,
    var(--tile-color),
    var(--tile-color-dark)
  );
  border: none;
  color: white;
  padding: 1rem 1.5rem;
  position: relative;
}

.stat-tile-body {
  background: white;
  padding: 1.5rem;
}

.stat-number {
  color: var(--tile-color);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #6c757d;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.stat-details {
  color: #495057;
  font-size: 0.875rem;
  line-height: 1.4;
}

.stat-icon {
  font-size: 3rem;
  opacity: 0.2;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.stat-footer {
  background: rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1.5rem;
}

.stat-footer a {
  color: var(--tile-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.stat-footer a:hover {
  color: var(--tile-color-dark);
  text-decoration: none;
}

.tile-customers {
  --tile-color: #17a2b8;
  --tile-color-dark: #138496;
}

.tile-jobs {
  --tile-color: #28a745;
  --tile-color-dark: #1e7e34;
}

.tile-invoices {
  --tile-color: #ffc107;
  --tile-color-dark: #e0a800;
}

.tile-employees {
  --tile-color: #dc3545;
  --tile-color-dark: #c82333;
}

.tile-scheduling {
  --tile-color: #007bff;
  --tile-color-dark: #0056b3;
}

.tile-messages {
  --tile-color: #6c757d;
  --tile-color-dark: #545b62;
}

.chart-card {
  background: white;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.chart-card-header {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: none;
  padding: 1.5rem;
}

.chart-card-title {
  color: #495057;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.chart-tabs {
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 1rem;
}

.chart-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #6c757d;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.chart-tab.active {
  border-bottom-color: #007bff;
  color: #007bff;
}

.chart-tab:hover {
  background: rgba(0, 123, 255, 0.05);
  color: #007bff;
}

.chart-content {
  display: none;
}

.chart-content.active {
  display: block;
}

#activity-stats{display:none;}   /* hide Jobs & Customers stats at load */

.chart-stats {
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  padding: 1.5rem;
}

.stat-block {
  padding: 0 1rem;
  text-align: center;
}

.stat-block:not(:last-child) {
  border-right: 1px solid #dee2e6;
}

.stat-percentage {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.stat-value {
  color: #495057;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.stat-text {
  color: #6c757d;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-card {
  background: white;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.calendar-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  padding: 1.5rem;
}

.calendar-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.estimate-create-container {
  margin: 0 auto;
  max-width: 1320px;
}

.dt-top-row, .dt-bottom-row {
  background: #f8f9fa;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  /* no independent overflow here; let the table wrapper handle it */
  overflow: visible;
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .25rem 0;
    flex-wrap: wrap;
}

@media (min-width: 769px) {
  .dt-top-left, .dt-bottom-left  { float: left;  margin-left: 1rem; }
  .dt-top-right, .dt-bottom-right{ float: right; margin-right: 1rem; }
}

#payment-element {
  background: #fff;
  border: 2px solid #e0e6ed;
  border-radius: 0.5rem;
  margin-top: 1rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

#payment-element.disabled {
  opacity: 0.5;
  pointer-events: none;
}

#card-errors {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.status-approved {
  background: #d4edda !important;
}

.status-pending {
  background-color: rgba(255, 193, 7, 0.1);
}

.status-rejected {
  background: #f8d7da !important;
}

td.details-control {
  cursor: pointer;
  padding: 0.5rem !important;
  text-align: center;
  vertical-align: middle;
  width: 2rem;
}

tr.child td {
  background-color: #f8f9fa !important;
  border-top: 1px solid #dee2e6;
}

.estimate-card {
  transition: all 0.2s ease;
}

.estimate-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
}

.amount-ring {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 0.75rem;
  font-weight: bold;
  height: 60px;
  justify-content: center;
  position: relative;
  width: 60px;
}

.amount-ring.approved {
  background: #28a745;
  color: white;
}

.amount-ring.pending {
  background: #ffc107;
  color: #212529;
}

.amount-ring.rejected {
  background: #dc3545;
  color: white;
}

.estimate-header {
  align-items: center;
  background-color: var(--header-color, #343a40);
  border-radius: 0.6rem 0.6rem 0 0;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rem;
}

.estimate-header-left {
  align-items: center;
  display: flex;
  flex: 1;
}

.estimate-logo {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-right: 1.5rem;
  max-height: 100px;
  max-width: 250px;
  padding: 0.5rem;
}

.estimate-header-right {
  flex-shrink: 0;
  text-align: right;
}

.estimate-header-right h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.estimate-header-right p {
  font-size: 1.1rem;
  margin: 0.25rem 0;
  opacity: 0.95;
}

.estimate-toolbar {
  align-items: center;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.estimate-toolbar h4 {
  color: #495057;
  font-weight: 600;
  margin: 0;
}

.info-section {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  padding: 2rem;
}

.info-box {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.info-box-header {
  background-color: var(--box-color, #e9ecef);
  border-bottom: 1px solid #dee2e6;
  color: #495057;
  font-weight: 600;
  padding: 1rem;
}

.info-box-body {
  background: #fff;
  padding: 1.5rem;
}

.info-box-body p {
  margin: 0.5rem 0;
}

.info-box-body strong {
  color: #495057;
  font-weight: 600;
}

.items-section {
  padding: 0 2rem 2rem;
}

.items-table {
  border-collapse: collapse;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
  overflow: hidden;
  width: 100%;
}

.items-table th {
  background-color: var(--box-color, #e9ecef);
  border-bottom: 2px solid #dee2e6;
  color: #495057;
  font-weight: 600;
  padding: 1rem 0.75rem;
  text-align: left;
}

.items-table td {
  border-bottom: 1px solid #f1f3f4;
  padding: 0.75rem;
  vertical-align: top;
}

.items-table tbody tr:hover {
  background-color: #f8f9fa;
}

.items-table tbody tr:last-child td {
  border-bottom: none;
}

.totals {
  padding: 0 2rem 2rem;
  text-align: right;
}

.totals-box {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  display: inline-block;
  min-width: 300px;
  padding: 1.5rem;
  text-align: left;
}

.totals-box p {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.totals-box .grand-total {
  border-top: 2px solid #dee2e6;
  color: #28a745;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.content-section {
  margin-bottom: 1rem;
  padding: 0 2rem 1rem;
}

.content-section h5 {
  align-items: center;
  color: #495057;
  display: flex;
  font-weight: 600;
  margin-bottom: 1rem;
}

.content-section h5 i {
  color: #007bff;
  margin-right: 0.5rem;
}

.payment-logos {
  margin: 1rem 0;
}

.payment-logos img {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  height: 30px;
  margin-right: 0.5rem;
  padding: 2px;
}

.signature-section {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 2rem;
  padding: 2rem;
}

.signature-block {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  overflow: hidden;
  text-align: center;
}

.signature-block h5 {
  background-color: var(--box-color, #e9ecef);
  border-bottom: 1px solid #dee2e6;
  color: #495057;
  font-weight: 600;
  margin: 0;
  padding: 1rem;
}

.signature-block-body {
  background: #fff;
  padding: 2rem 1rem;
}

.signature-line {
  border-top: 1px solid #000;
  height: 2px;
  margin: 2rem 0 1rem;
  width: 100%;
}

.signature-name {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 0.75rem 0;
}


/* ── invoice_template & estimate_template — print-optimisation ── */
@media print {
  @page {
    size: Letter;
    margin: 0.5in;
  }

  .estimate-toolbar,
  .invoice-toolbar,
  .action-buttons,
  .btn {
    display: none !important;
  }

  .estimate-create-container {
    max-width: none !important;
    margin: 0 !important;
  }

  .card {
    border: none !important;
    box-shadow: none !important;
  }

  .info-section,
  .items-section,
  .totals,
  .content-section,
  .signature-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

body.login-page > .wrapper, body.login-page .content-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

/* ── estimate & invoice templates → public / no-sidebar view ── */
body.no-sidebar .content-wrapper,
body.no-sidebar .main-footer{
  margin-left:0!important;            /* remove AdminLTE’s sidebar gutter */
}

body.login-page, .wrapper {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
  margin: 0;
  padding: 0;
  width: 100%;
}

.login-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 1rem;
  width: 100%;
}

.login-container {
  animation: fadeInUp 0.6s ease-out;
  background:#fff;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  max-width: 450px;
  width:100%;
  margin:0 auto;
  padding:0;           /* hero + content supply padding */
  overflow:hidden;
}

/* ── Login page responsive tweaks ───────────────────────────── */
@media (max-width:768px){
  .login-wrapper{padding:0.5rem 0.5rem 0;align-items:flex-start;padding-top:2rem;}
  .login-container{max-width:100%;margin:0;}
  .login-hero{padding:1.5rem 1rem 1rem;}
  .login-hero h2{font-size:1.5rem;}
  .login-hero img{max-width:150px;}
  .login-content{padding:1.5rem 1rem;}
  .login-card h3{font-size:1.25rem;margin-bottom:1.5rem;}
}
@media (max-width:480px){
  .login-hero{padding:1rem 0.75rem 0.75rem;}
  .login-content{padding:1rem 0.75rem;}
  .form-group{margin-bottom:1rem;}
}

.main-header {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 58px;
  transition: all 0.3s ease;
}

.main-header.scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-nav .nav-link {
  color: #ffffff !important;
  font-weight: 600;
  position: relative;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #f8f9fa !important;
  text-decoration: none;
}

.navbar-nav .nav-link:hover::after {
  background: #ffffff;
  border-radius: 1px;
  bottom: -2px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 80%;
}

.navbar-nav .nav-link:focus {
  outline: 2px solid #4ade80;
  outline-offset: 2px;
}

/* ── small utility helpers ───────────────────────── */
.text-faded{
  opacity:.9;
}

.user-info {
  color: #e8f4fd !important;
  font-size: 0.875rem;
  font-weight: 500;
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
  color: white;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 4px 8px rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

#themeToggleBtn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: #ffffff;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  transition: all 0.3s ease;
}

#themeToggleBtn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

@media (min-width: 768px) {
  /* Legacy circular theme toggle removed; unified in header layout rules below */
}

.clock-display {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  color: #e8f4fd !important;
  font-family: "Courier New", monospace;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
}

@media (max-width: 500px) {
  .user-info {
    font-size: 0.75rem;
  }


  .clock-display {
    display: none !important;
  }

  .btn-sm {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
  }
}

.nav-link[data-widget="pushmenu"]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.inbox-sidebar {
  background: #f8f9fa;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: fit-content;
  padding: 1.5rem;
}

.inbox-sidebar .nav-link {
  border-radius: 0.5rem;
  color: #495057;
  margin-bottom: 0.25rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.inbox-sidebar .nav-link:hover {
  background-color: #e9ecef;
  color: #495057;
  transform: translateX(2px);
}

.inbox-sidebar .nav-link.active {
  background-color: #007bff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
  color: white;
}

.compose-btn {
  background: linear-gradient(45deg, #28a745, #20c997);
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  transition: all 0.2s ease;
}

.compose-btn:hover {
  box-shadow: 0 5px 12px rgba(40, 167, 69, 0.4);
  transform: translateY(-2px);
}

.mailbox-main {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* was: overflow: hidden;  — removing avoids clipping the table/footer on small screens */
}

.mailbox-header {
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 1.25rem 1.5rem;
}

.mailbox-header h3 {
  color: #495057;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.mailbox-toolbar {
  flex-direction: row; /* stay horizontal */
  align-items: center;
  background: white;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.toolbar-left, .toolbar-right {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.toolbar-btn {
  background: white;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.375rem;
  color: #6c757d;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background: #f8f9fa;
  border-color: #adb5bd;
  color: #495057;
}

.toolbar-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.mailbox-unread {
  background-color: #fff3cd !important;
  border-left: 3px solid #ffc107;
  font-weight: bold;
}

.mailbox-messages table {
  margin: 0;
}

.mailbox-messages tbody tr {
  border-bottom: 1px solid #f1f3f4;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mailbox-messages tbody tr:hover {
  background-color: #f8f9fa;
  box-shadow: inset 0 0 0 1px #e9ecef;
}

.mailbox-messages tbody tr:nth-child(even) {
  background-color: #fbfcfd;
}

.mailbox-messages tbody tr:nth-child(even):hover {
  background-color: #f1f3f4;
}

.mailbox-messages td {
  border: none;
  padding: 1rem 0.75rem;
  vertical-align: middle;
}

.mailbox-star i {
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
}

.mailbox-star i:hover {
  transform: scale(1.2);
}

.mailbox-name {
  color: #495057;
  font-weight: 500;
  min-width: 150px;
}

.mailbox-subject-truncate {
  color: #6c757d;
  display: inline-block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.mailbox-subject-preview {
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mailbox-date {
  color: #6c757d;
  font-size: 0.875rem;
  min-width: 100px;
  text-align: right;
  white-space: nowrap;
}

.mailbox-attachment {
  color: #6c757d;
  text-align: center;
  width: 40px;
}

/* ── Mailbox: mobile refinements ───────────────────────────────── */
@media (max-width: 768px) {

  /* 1. Stacked toolbar */
  .mailbox-toolbar{
    flex-direction: column;
    align-items: stretch;
  }

  /* 2. Centre toolbar groups */
  .toolbar-left,
  .toolbar-right{
    justify-content: center;
  }

  /* 3. More compact buttons */
  .toolbar-btn{
    padding: 0.5rem;          /* <— overwrite default 0.5rem 0.75rem */
    font-size: 0.8rem;
  }
  .toolbar-btn span{          /* hide long labels on phones */
    display: none;
  }

  /* 4. Table-row text that can wrap sooner */
  .mailbox-subject-truncate{  max-width: 150px; }
  .mailbox-name{
    min-width: auto;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 5. Modal breathing-room on small screens */
  .modal-body{   padding: 1rem; }
  .modal-footer{ padding: 1rem; }
}

.modal-content {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.modal-header .modal-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  border-top: 1px solid #f1f3f4;
  padding: 1.5rem 2rem;
}

.select2-container .select2-selection--single {
  border: 1px solid #e0e6ed !important;
  border-radius: 0.5rem !important;
  height: 48px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #495057 !important;
  line-height: 46px !important;
  padding-left: 1rem !important;
}

.select2-dropdown {
  border: 1px solid #dee2e6 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.message-meta {
  background: #f8f9fa;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.message-meta h6 {
  color: #495057;
  margin-bottom: 0.5rem;
}

.message-content {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  max-height: 400px;
  min-height: 200px;
  overflow-y: auto;
  padding: 1.5rem;
}

.attachment-chip {
  background: #e9ecef;
  border-radius: 1rem;
  color: #495057;
  display: inline-block;
  font-size: 0.875rem;
  margin: 0.25rem;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.attachment-chip:hover {
  background: #dee2e6;
  color: #495057;
  text-decoration: none;
}

.timestamp-badge {
  background: #6c757d;
  border-radius: 1rem;
  color: white;
  display: inline-block;
  font-size: 0.8rem;
  margin-top: 1rem;
  padding: 0.25rem 0.75rem;
}

.search-group {
  flex: 2;
  max-width: 250px;
  min-width: 300px;
  position: relative;
}

.search-group .form-control {
  border-radius: 1.5rem;
  padding-right: 2.5rem;
}

.search-group .search-btn {
  background: none;
  border: none;
  color: #6c757d;
  padding: 0.25rem;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.status-draft {
  background: #e2e3e5 !important;
}

.status-sent {
  background: #d1ecf1 !important;
}

.status-partial {
  background-color: rgba(23, 162, 184, 0.1);
}

.status-paid {
  background: #d4edda !important;
  background-color: rgba(40, 167, 69, 0.1);
}

.status-overdue {
  background-color: rgba(220, 53, 69, 0.1);
}

.status-cancelled {
  background-color: rgba(108, 117, 125, 0.1);
}

.status-not-initiated {
  background-color: rgba(108,117,125,0.05);
}

.invoice-card {
  transition: all 0.2s ease;
}

.invoice-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
}

.amount-ring.overdue {
  background: #dc3545;
  color: white;
}

.amount-ring.due-soon {
  background: #ffc107;
  color: #212529;
}

.amount-ring.paid {
  background: #28a745;
  color: white;
}

.amount-ring.partial {
  background: #17a2b8;
  color: white;
}

.amount-ring.draft {
  background: #6c757d;
  color: white;
}

.aging-bucket {
  background: linear-gradient(45deg, #f8f9fa, #e9ecef);
  border-left: 4px solid #007bff;
  padding: 1rem;
  text-align: center;
}

.aging-bucket.current {
  border-left-color: #28a745;
}

.aging-bucket.bucket-30 {
  border-left-color: #ffc107;
}

.aging-bucket.bucket-60 {
  border-left-color: #fd7e14;
}

.aging-bucket.bucket-90 {
  border-left-color: #dc3545;
}

.summary-tax-toggle {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
}

.card-header-danger, .card-header-info, .card-header-secondary {
  position: relative;
}

.card-header-danger .show-archived-toggle, .card-header-info .show-archived-toggle, .card-header-secondary .show-archived-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.invoice-header {
  align-items: center;
  background-color: var(--header-color, #343a40);
  border-radius: 0.6rem 0.6rem 0 0;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2rem;
}

.invoice-header-left {
  align-items: center;
  display: flex;
  flex: 1;
}

.invoice-logo {
  background: #fff;
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-right: 1.5rem;
  max-height: 100px;
  max-width: 250px;
  padding: 0.5rem;
}

.invoice-header-right {
  flex-shrink: 0;
  text-align: right;
}

.invoice-header-right h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.invoice-header-right p {
  font-size: 1.1rem;
  margin: 0.25rem 0;
  opacity: 0.95;
}

.invoice-toolbar {
  align-items: center;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.invoice-toolbar h4 {
  color: #495057;
  font-weight: 600;
  margin: 0;
}

.status-scheduled {
  background: #fff3cd !important;
  background-color: #fff3cd !important;
  border-left: 4px solid #ffc107;
}

.status-in-progress {
  background-color: #cce5ff !important;
  border-left: 4px solid #007bff;
}

.status-completed {
  background-color: #d4edda !important;
  border-left: 4px solid #28a745;
}

.priority-high {
  background-color: #dc3545;
  color: white;
}

.priority-medium {
  background-color: #ffc107;
  color: #212529;
}

.priority-low {
  background-color: #28a745;
  color: white;
}

.job-card {
  transition: all 0.2s ease;
}

.job-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-3px);
}

.week-badge {
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
}

.dt-top-row .dataTables_filter {
  flex: 1 1 220px;
  margin-top: 0.5rem;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-hero {
  background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
  color: white;
  overflow: hidden;
  padding: 2rem 1.5rem 1.5rem;
  position: relative;
  text-align: center;
}

.login-hero::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.login-hero img {
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
  height: auto;
  margin-bottom: 1rem;
  max-width: 180px;
}

.login-hero h2 {
  font-size: 2rem;
  font-weight: 300;
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 1;
}

.login-hero p {
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.login-content {
  padding: 2rem 1.5rem;
}

.login-card h3 {
  color: #495057;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
}

.input-group {
  border: 1px solid #e0e6ed;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.2s ease,
    transform 0.2s ease;
}

.input-group:focus-within {
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
  transform: translateY(-1px);
}

.input-group .form-control {
  border: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
}

.input-group .form-control:focus {
  box-shadow: none;
  outline: none;
}

.input-group-append .input-group-text {
  align-items: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: none;
  color: #6c757d;
  display: flex;
  font-size: 1rem;
  line-height: 1;
  padding: 0 1rem;
}

.input-group:focus-within .input-group-text {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-color: #007bff;
  color: #007bff;
}

.btn-primary:focus, .btn-primary:active {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  transform: translateY(-1px);
}

.login-content a {
  color: #007bff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.login-content a:hover {
  color: #0056b3;
  text-decoration: underline;
}

body.login-page .main-footer {
  background: #fff;
  border-top: 1px solid #ddd;
  bottom: 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  left: 0;
  margin-left: 0 !important;
  padding: 10px 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: 1000;
}

@media (max-width: 480px) {
  .register-hero {
    padding: 1rem 0.75rem 0.75rem;
  }

  .register-form,
  .order-summary {
    padding: 1rem 0.75rem;
  }

  .form-row .form-group {
    margin-bottom: 1rem;
  }
}

.filter-controls {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 2rem;
  overflow: visible;
  padding: 1.5rem;
}

.filter-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.filter-group {
  flex: 1;
  min-width: 200px;
}

.filter-group label {
  color: #495057;
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.note-category-card {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 1.5rem;
  overflow: visible;
  transition: all 0.3s ease;
}

.select2-container--open .select2-dropdown {
  position: absolute !important;
  z-index: 9999 !important;
}

.note-category-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.general-notes-header {
  background: linear-gradient(135deg, #17a2b8, #138496);
  border: none;
  color: #fff;
}

.customer-notes-header {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  color: #fff;
}

.job-notes-header {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  border: none;
  color: #000;
}

.invoice-notes-header {
  background: linear-gradient(135deg, #dc3545, #c82333);
  border: none;
  color: #fff;
}

.estimate-notes-header {
  background: linear-gradient(135deg, #28a745, #1e7e34);
  border: none;
  color: #fff;
}

.card-header h3 {
  align-items: center;
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.card-header .fas {
  font-size: 1.1rem;
  margin-right: 0.75rem;
}

.note-item {
  background: white;
  border: none !important;
  border-bottom: 1px solid #f1f3f4 !important;
  padding: 1.25rem 1.5rem;
  transition: all 0.2s ease;
}

.note-item:last-child {
  border-bottom: none !important;
}

.note-item:hover {
  background: #f8f9fa;
  border-left: 4px solid #007bff !important;
  transform: translateX(4px);
}

.note-item h5 {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.note-item p {
  color: #6c757d;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.note-item small {
  color: #868e96;
  font-size: 0.8rem;
}

.badge {
  border-radius: 0.5rem;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding: 0.4rem 0.8rem;
}

.badge-info {
  background: linear-gradient(135deg, #17a2b8, #138496);
}

.badge-warning {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  color: #000;
}

.badge-danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
}

.badge-success {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

.tag-work {
  border-left: 4px solid #dc3545;
}

.tag-personal {
  border-left: 4px solid #28a745;
}

.tag-important {
  border-left: 4px solid #ffc107;
}

.tag-miscellaneous {
  border-left: 4px solid #17a2b8;
}

.btn-add-note {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 0.75rem 2rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.btn-add-note:hover {
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
  transform: translateY(-2px);
}

.form-control:not(textarea), .select2-container .select2-selection--single {
  height: 48px !important;
  line-height: 1.5;
  padding-bottom: 0.375rem !important;
  padding-top: 0.375rem !important;
}

input[type="file"].form-control {
  height: 48px !important;
  padding: 0.375rem 0.75rem;
}

.modal-body .form-group {
  overflow: visible;
}

.collapse-toggle {
  cursor: pointer;
  user-select: none;
}

.collapse-toggle::after {
  content: "\f077";
  float: right;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: transform 0.3s ease;
}

.collapse-toggle.collapsed::after {
  transform: rotate(180deg);
}

.empty-state {
  color: #6c757d;
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state .fas {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

.card-header.payments-header {
  background: #dc3545;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
}

.bulk-actions-toolbar {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

body.confirmation-page > .wrapper, body.confirmation-page .content-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
}

body.confirmation-page, .wrapper {
  background: #fff !important;
  margin: 0;
  padding: 0;
  width: 100%;
}

.confirmation-wrapper {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding-bottom: 60px;
  padding-top: 20px;
  width: 100%;
}

.confirmation-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin: 0 1.5rem;
  max-width: 900px;
  padding: 20px;
  width: 100%;
}

.confirmation-header {
  margin-bottom: 1.5rem;
  text-align: center;
}

.confirmation-header h1 {
  color: #17a2b8;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.confirmation-header h2 {
  margin-bottom: 1rem;
}

.confirmation-header img.company-logo {
  margin-bottom: 15px;
  max-height: 120px;
}

.invoice-summary .table thead th {
  background-color: #e9ecef;
}

.print-btn {
  margin-top: 20px;
  text-align: center;
}

.profile-card {
  animation: fadeInUp 0.5s ease-out;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  transition: box-shadow 0.2s ease;
}

.profile-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.card-header.profile-page-header {
  background: linear-gradient(135deg, #17a2b8, #20c997);
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
  padding: 1.25rem 1.5rem;
}

/* ── profile.html: mobile button stack ───────────────────────── */
@media (max-width: 768px){
  .profile-card .btn{
    width: 100%;
    margin-bottom: .5rem;
  }
  .profile-card .btn + .btn{
    margin-left: 0;
  }
}

.card-header.subscription-header {
  background: linear-gradient(135deg, #dc3545, #e83e8c);
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
  padding: 1.25rem 1.5rem;
}

.card-header.transfer-header {
  background: linear-gradient(135deg, #ffc107, #fd7e14);
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #000;
  padding: 1.25rem 1.5rem;
}

.card-header.pm-header {
  background: linear-gradient(135deg, #28a745, #20c997);
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
  padding: 1.25rem 1.5rem;
}

.form-control, .form-control-plaintext {
  border: 1px solid #e0e6ed;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.btn {
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  text-transform: none;
  transition: all 0.2s ease;
}

.btn:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, #28a745, #1e7e34);
}

.btn-warning {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  color: #000;
}

.btn-info {
  background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
  color: white;
}

.btn-outline-info {
  background: transparent;
  border: 2px solid #17a2b8;
  color: #17a2b8;
}

.btn-outline-info:hover {
  background: #17a2b8;
  color: white;
}

.stripe-element-container {
  background: #fff;
  border: 1px solid #e0e6ed;
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: border-color 0.15s ease-in-out;
}

.stripe-element-container:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.select2-container--default .select2-selection--single, .select2-container--bootstrap4 .select2-selection--single {
  border: 1px solid #e0e6ed !important;
  border-radius: 0.5rem !important;
  height: 48px !important;
  /*padding: 0.25rem 0 !important;   Took this out to fix contact us, Reason for contact select 2 spot*/
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  color: #495057 !important;
  line-height: 46px !important;
  padding-left: 1rem !important;
}

.select2-container--default .select2-selection--single:focus, .select2-container--bootstrap4 .select2-selection--single:focus, .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--bootstrap4.select2-container--focus .select2-selection--single {
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.select2-container {
  width: 100% !important;
}

.form-text {
  color: #6c757d;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.form-control, .select2-container {
  transition: all 0.2s ease;
}

.reactivate-container {
  margin: auto;
  max-width: 98vw;
  width: 75%;
}

.card-header.reactivate-header {
  background-color: #17a2b8;
  color: #fff;
}

.card-header.billing-header {
  background-color: #dc3545;
  color: #fff;
}

.register-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 60px);
  padding: 1rem;
  padding-bottom: 80px;
  width: 100%;
}

.register-hero {
  animation: fadeInUp 0.6s ease-out;
  background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
  border-radius: 1rem 1rem 0 0;
  color: white;
  margin-bottom: 0;
  max-width: 900px;
  overflow: hidden;
  padding: 2rem 1.5rem 1.5rem;
  position: relative;
  text-align: center;
  width: 100%;
}

.register-hero::before {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  bottom: 0;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}

.register-hero img {
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
  height: auto;
  margin-bottom: 0.75rem;
  max-width: 120px;
}

.register-hero h1 {
  font-size: 1.75rem;
  font-weight: 300;
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 1;
}

.register-hero p {
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

.register-container {
  animation: fadeInUp 0.7s ease-out;
  background: #fff;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  max-width: 900px;
  overflow: hidden;
  width: 100%;
}

.register-form {
  background: #fff;
  flex: 2;
  padding: 2rem;
}

.register-form h2 {
  color: #495057;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}

    /* Responsive design */
    @media (max-width: 768px) {
      .register-wrapper {
        padding: 0.5rem;
        padding-bottom: 100px; /* Extra space for footer on mobile */
      }

      .register-hero {
        padding: 1.5rem 1rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
      }

      .register-hero h1 {
        font-size: 1.5rem;
      }

      .register-hero img {
        max-width: 100px;
      }

      .register-container {
        flex-direction: column;
        border-radius: 0 0 0.5rem 0.5rem;
      }

      .register-form,
      .order-summary {
        flex: none;
        padding: 1.5rem 1rem;
      }

      .order-summary {
        border-left: none;
        border-top: 1px solid #dee2e6;
        background: #fff;
      }

      .btn-block {
        margin-top: 1rem;
      }

      .promo {
        flex-direction: column;
        gap: 0.75rem;
      }

      .promo .btn {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .register-hero {
        padding: 1rem 0.75rem 0.75rem;
      }

      .register-form,
      .order-summary {
        padding: 1rem 0.75rem;
      }

      .form-row .form-group {
        margin-bottom: 1rem;
      }
    }

.form-control.select2 {
  height: 52px !important;
  padding: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding-left: 0 !important;
}

.select2-container--bootstrap4 .select2-selection--single:focus {
  border-color: #007bff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important;
}

.select2-container .select2-results__options {
  max-height: 220px !important;
  overflow-y: auto !important;
}

.btn-primary:hover:not(.disabled) {
  background: linear-gradient(135deg, #0056b3, #004085);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

.btn-secondary {
  background:linear-gradient(135deg,#4a90e2,#50c878);
  border: none;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  color: #fff;
  font-weight: 600;
  padding: 0.875rem 1.5rem;
  transition: all .3s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #357abd, #45b36b);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.btn-outline-secondary {
  border: 2px solid #6c757d;
  border-radius: 0.5rem;
  color: #6c757d;
  transition: all 0.2s ease;
}

.btn-outline-secondary:hover {
  background: #6c757d;
  color: #fff;
  transform: translateY(-1px);
}

.btn.disabled, .btn:disabled {
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
}

.order-summary {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-left: 1px solid #dee2e6;
  flex: 1;
  padding: 2rem;
}

.order-summary h4 {
  color: #495057;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.summary-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row.font-weight-bold {
  border-top: 2px solid #dee2e6;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1rem;
  padding-top: 1rem;
}

.promo {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.promo input {
  flex: 1;
}

#payment-element:focus-within {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

#payment-element.disabled, #pay-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.form-check-input {
  margin-top: 0.3rem;
}

.form-check-label a {
  color: #007bff;
  font-weight: 500;
  text-decoration: none;
}

.form-check-label a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.form-check-inline {
  margin-right: 1.5rem;
}

.btn-info:hover {
  background: linear-gradient(135deg, #138496 0%, #117a8b 100%);
  transform: translateY(-1px);
}

.accordion .card {
  border-radius: 0;
  margin-bottom: 0;
}

.accordion .card:first-child {
  border-radius: 1rem 1rem 0 0;
}

.accordion .card:last-child {
  border-radius: 0 0 1rem 1rem;
}

.accordion .card:only-child {
  border-radius: 1rem;
}

.accordion .btn-link {
  color: #333;
  font-weight: 600;
  text-decoration: none;
}

.accordion .btn-link:hover {
  color: #667eea;
}

.nav-tabs {
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 1.5rem;
}

.nav-tabs .nav-link {
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  color: #6c757d;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.nav-tabs .nav-link.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
}

.nav-tabs .nav-link:hover:not(.active) {
  background: #f8f9fa;
  color: #667eea;
}

.table-responsive {
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  margin-bottom: 0;
}

.table thead th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr:hover {
  background-color: #f8f9fc;
}

.table td {
  border-top: 1px solid #e9ecef;
  padding: 0.75rem 1rem;
}

.status-badge {
  align-items: center;
  border-radius: 0.5rem;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
}

.status-badge.positive {
  background: #d4edda;
  color: #155724;
}

.status-badge.negative {
  background: #f8d7da;
  color: #721c24;
}

.status-badge.neutral {
  background: #e2e3e5;
  color: #383d41;
}

.chart-container {
  height: 300px;
  margin: 1rem 0;
  position: relative;
}

.dataTables_wrapper .dataTables_filter input {
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.dataTables_wrapper .dataTables_length {
  align-items: center;
  display: flex;
  gap: 0.5rem;
}

.dataTables_wrapper .dataTables_length select {
  background: #fff;
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  box-sizing: border-box;
  font-size: 0.9rem;
  height: auto;
  max-width: 90px;
  padding: 0.4rem 0.5rem;
}

.card-header.add-schedule-header {
  background: #007bff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  color: #fff;
}

.card-header.filter-header {
  background: #28a745;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  color: #fff;
}

.card-header.all-schedules-header {
  background: #dc3545;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  color: #fff;
}

.card-header.calendar-header {
  background: #6c757d;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  color: #fff;
}




td.details-control:hover {
  background-color: #e9ecef;
}

.job-details, .customer-details {
  background: #f8f9fa;
  border-left: 3px solid #007bff;
  border-radius: 0.375rem;
  color: #6c757d;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
}

#calendar {
  background: #fff;
  border-radius: 0.375rem;
  min-height: 600px;
  padding: 1rem;
}

.fc-toolbar-title {
  color: #495057;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}

.fc-button-primary {
  background-color: #007bff !important;
  border-color: #007bff !important;
  border-radius: 0.375rem !important;
  font-weight: 500;
}

.fc-button-primary:hover {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
}

.fc-day-today {
  background-color: #e3f2fd !important;
}

.fc-event-scheduled {
  background-color: #ffc107 !important;
  border-color: #ffc107 !important;
  color: #212529 !important;
}

.fc-event-in-progress {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: #fff !important;
}

.fc-event-completed {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: #fff !important;
}

.fc-event {
  border-radius: 0.25rem !important;
  font-weight: 500;
  padding: 2px 4px;
}

.quick-actions {
  background: #f8f9fa;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.quick-actions .btn {
  border-radius: 0.375rem;
  font-weight: 500;
  margin: 0.25rem;
  transition: all 0.2s ease;
}

.main-sidebar {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.main-sidebar, .main-sidebar::before {
    transition: margin-left .3s ease-in-out,width .3s ease-in-out;
    width: 250px;
}

.brand-link {
  align-items: center;
  background: linear-gradient(
    135deg,
    rgba(74, 144, 226, 0.2),
    rgba(80, 200, 120, 0.2)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  overflow: hidden;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.brand-link:hover {
  background: linear-gradient(
    135deg,
    rgba(74, 144, 226, 0.3),
    rgba(80, 200, 120, 0.3)
  );
  text-decoration: none;
}

.brand-image {
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  height: 35px;
  object-fit: cover;
  width: 35px;
}

.brand-text {
  color: #ffffff !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  margin-left: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.user-panel {
  background: none;
  border-bottom: none;
  margin: 0;
  padding: 0.75rem 1.5rem;
}

.user-panel .info {
  color: #e8f4fd !important;
  font-size: 0.85rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-section-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  text-transform: uppercase;
}

.nav-sidebar .nav-item {
  margin-bottom: 2px;
}

.nav-sidebar .nav-link {
  border-left: 4px solid transparent;
  border-radius: 0 25px 25px 0;
  color: #cbd5e1 !important;
  margin: 0 0.5rem 0 0;
  padding: 0.75rem 1.5rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-left: 4px solid #4ade80;
  color: #ffffff !important;
  transform: translateX(4px);
}

.nav-sidebar .nav-link.active {
  background: linear-gradient(
    90deg,
    rgba(74, 222, 128, 0.2),
    rgba(34, 197, 94, 0.1)
  ) !important;
  border-left: 4px solid #4ade80;
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.3);
  color: #ffffff !important;
}

.nav-sidebar .nav-link .nav-icon {
  font-size: 1.1rem;
  margin-right: 0.75rem;
  transition: transform 0.3s ease;
  width: 1.5rem;
}

.nav-sidebar .nav-link:hover .nav-icon {
  transform: scale(1.1);
}

.nav-sidebar .nav-link p {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0;
}

.nav-sidebar .nav-link.text-danger {
  color: #f87171 !important;
}

.nav-sidebar .nav-link.text-danger:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-left: 4px solid #ef4444;
  color: #ffffff !important;
}

.nav-sidebar .nav-link:focus {
  outline: 2px solid #4ade80;
  outline-offset: 2px;
}

.brand-link:focus {
  outline: 2px solid #4ade80;
  outline-offset: 2px;
}

/* ── Collapsed-sidebar (icon-only) refinements ───────────────────────── */
@media (min-width: 992px) {
body.sidebar-mini.sidebar-collapse .wrapper{
  display:block;                           /* default flow – fixes header width */
}

/* 1) Widths + spacing -------------------------------------------------- */
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .main-sidebar{
  width:70px !important;                  /* rail size (matches header)*/
}
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .content-wrapper,
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .main-footer{
  margin-left:70px !important;            /* prevent overlap           */
  transition:margin-left .3s ease;
}

/* 2) Brand strip ------------------------------------------------------- */
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .brand-link{
  justify-content:center;                 /* logo stays centred        */
  padding:.75rem;                         /* equal on all sides        */
}
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .brand-text{
  display:none;                           /* hide company name         */
}

/* 3) Nav items --------------------------------------------------------- */
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .nav-section-header,
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .user-panel .info,
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .nav-sidebar .nav-link p{
  display:none;                           /* remove labels             */
}
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .nav-sidebar .nav-link{
  justify-content:center;                 /* icon dead-centre          */
  padding:.75rem .5rem;                   /* tighter                   */
}
body.sidebar-mini.sidebar-collapse:not(.sidebar-expanded-on-hover) .nav-sidebar .nav-icon{
  margin-right:0;                         /* no hanging gap            */
}
}

@media (prefers-color-scheme: dark) {
  .main-sidebar {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%) !important;
  }
}

.card-header.stripe-header {
  background: #17a2b8;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
}

.card-header.stripe-help-header {
  background: #6c757d;
  border-radius: 0.75rem 0.75rem 0 0 !important;
  color: #fff;
}

.stripe-account-id {
  background: #e9ecef;
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  padding: 0.75rem;
  word-break: break-all;
}

.status-badge.connected {
  background: #d4edda;
  color: #155724;
}

.status-badge.disconnected {
  background: #f8d7da;
  color: #721c24;
}

div[data-auto-19bf79] {
  background-color: var(--header-color, #343a40);
  color: white;
}

div[data-auto-076180] {
  right: 20px;
  top: 20px;
  z-index: 1050;
}

div[data-auto-c10965] {
  min-height: calc(100vh - 4rem);
}

p[data-auto-40f03e] {
  opacity: 0.9;
}

div[data-auto-f69d58] {
  display: none;
}

p[data-auto-9faa64] {
  opacity: 0.9;
}

p[data-auto-cc21f7] {
  opacity: 0.9;
}

div[data-auto-446928] {
  display: none;
}

img[data-auto-fe10f3] {
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 100px;
}

div[data-auto-864473] {
  background-color: #343a40;
}

div[data-auto-b151d0] {
  background-color: #e9ecef;
}

div[data-auto-d1c6be] {
  --box-color: var(--combo-box-color, #f8f9fa);
  background-color: var(--combo-header-color, #343a40);
}

p[data-auto-7ac3ad] {
  opacity: 0.9;
}

p[data-auto-780646] {
  opacity: 0.9;
}

p[data-auto-1fb4d7] {
  opacity: 0.9;
}

th[data-auto-a6312b] {
  width: 42px;
}

div[data-auto-4f7c36] {
  ;
}

div[data-auto-36f4aa] {
  display: none;
}

p[data-auto-29d59f] {
  opacity: 0.9;
}

div[data-auto-a4c235] {
  display: none;
}

p[data-auto-1cf11e] {
  opacity: 0.9;
}

p[data-auto-d57bdb] {
  opacity: 0.9;
}

p[data-auto-d41905] {
  opacity: 0.9;
}

input[data-auto-0ed3f3] {
  display: none;
}

div[data-auto-f36037] {
  display: none;
}

div[data-auto-e837c0] {
  display: none;
}

div[data-auto-d0d8c8] {
  display: none;
}

form[data-auto-3ff83b] {
  display: flex;
  gap: 0.5rem;
}

form[data-auto-5571d8] {
  display: inline;
}

p[data-auto-87b690] {
  opacity: 0.9;
}

div[data-auto-23e743] {
  display: none;
}

p[data-auto-d4b866] {
  opacity: 0.9;
}

td[data-auto-3878f5] {
  width: 40px;
}

td[data-auto-1aa9ab] {
  width: 40px;
}

select[data-auto-29567b] {
  width: 100%;
}

div[data-auto-43ca6c] {
  background-color: var(--header-color, #343a40);
  color: white;
}

div[data-auto-dcde94] {
  right: 20px;
  top: 20px;
  z-index: 1050;
}

p[data-auto-6a7d0c] {
  opacity: 0.9;
}

div[data-auto-4ac23e] {
  display: none;
}

p[data-auto-fa1282] {
  opacity: 0.9;
}

div[data-auto-282c2b] {
  display: none;
}

p[data-auto-e029a3] {
  opacity: 0.9;
}

p[data-auto-51c69e] {
  opacity: 0.9;
}

div[data-auto-56cdee] {
  display: none;
}

div[data-auto-fa8196] {
  display: none;
}

p[data-auto-48034c] {
  opacity: 0.9;
}

p[data-auto-e7d4ad] {
  display: none;
}

div[data-auto-43234a] {
  display: none;
}

div[data-auto-18e901] {
  display: none;
}

div[data-auto-44e9bc] {
  display: none;
}

p[data-auto-bf08bd] {
  opacity: 0.9;
}

body[data-auto-a44656] {
  color: #333;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  padding: 20px;
}

p[data-auto-bab0cd] {
  margin: 30px 0;
  text-align: left;
}

a[data-auto-3fff3d] {
  background-color: #007bff;
  border-radius: 4px;
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  padding: 12px 24px;
  text-decoration: none;
}

p[data-auto-fa89c9] {
  margin-top: 40px;
  text-align: left;
}

img[data-auto-2996bf] {
  height: auto;
  max-width: 150px;
}

p[data-auto-3b35cc] {
  margin-top: 20px;
  text-align: left;
}

p[data-auto-f718cc] {
  opacity: 0.9;
}

div[data-auto-8536ce] {
  display: none;
}

div[data-auto-98774f] {
  display: none;
}

div[data-auto-e43f2a] {
  display: none;
}

th[data-auto-3c7e0b] {
  width: 80px;
}

p[data-auto-175685] {
  opacity: 0.9;
}

/* ── Utility: 90% opacity for inline text ───────────────── */
.opacity-90 { opacity: 0.9; }

/* ── Scheduling page header ───────────────── */
.schedule-page .page-header {
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color: #fff;
  padding: 2rem 1.5rem;
  border-radius: .75rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.schedule-page .page-header h1 {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 600;
}
@media (max-width:768px) {
  .schedule-page .page-header {
    padding: 1.5rem 1rem;
  }
  .schedule-page .page-header h1 {
    font-size: 1.75rem;
  }
}

/* ==== GLOBAL UTILITIES – 2025-08-11 (updated 2025-08-20) ==== */
/* Unified scroll wrapper: works for DT, Bootstrap, and our utility */
.u-table-fluid,
.table-responsive,
.dt-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Let the global DT block handle sizing/wrapping; no forced min-width */
.u-table-fluid .table { min-width: 0; }

/* Prevent wrapping for labels/cells on small screens where space is tight */
@media (max-width: 576.98px) {
  .u-nowrap-sm-down { white-space: nowrap; }
}

/* Ensure tap targets meet 44px minimum on phones for accessibility */
@media (max-width: 576.98px) {
  .u-touch-target { min-height: 44px; min-width: 44px; padding-left: 0.75rem; padding-right: 0.75rem; }
}


/* ==== GLOBAL UTILITIES – 2025-08-11 (additions) ==== */
/* Keep action button groups on a single line inside table cells */
.u-actions-nowrap { white-space: nowrap; }

/* Slightly wider buttons on small screens (use only where needed) */
@media (max-width: 576px) {
  .u-btn-wide-sm { padding-left: .75rem; padding-right: .75rem; min-width: 44px; }
}

/* ==== GLOBAL FIXES — 2025-08-12 (header) ==== */
/* XS: hide header button text labels while keeping icons and hit targets */
@media (max-width: 576.98px) {
  .main-header .btn .btn-text { display: none; }
}





/* ==== GLOBAL FIXES — 2025-08-12 (header layout) ==== */
/* Make header flexible and consistent across breakpoints */
.main-header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* allow wrap if needed on tight bands */
}
/* Right-side group spacing without relying on utility margins */
.main-header .navbar-nav.ml-auto > li + li { margin-left: .5rem; }

/* Normalize header buttons */
.main-header .btn { display: inline-flex; align-items: center; }

/* Unify label visibility: show at ≥577px (XS already handled elsewhere) */
@media (min-width: 577px) {
  #themeToggleBtn .btn-text { display: inline; }
  #themeToggleBtn {
    width: auto; height: auto;
    padding: .25rem .5rem; /* match .btn-sm */
    border-radius: .2rem;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* Reduce pressure in narrow bands by hiding the clock to keep buttons on one line */

/* ==== GLOBAL FIXES — 2025-08-13 (header layout) ==== */
/* Flex robustness: allow right-side group to shrink without overflow */
.main-header .navbar-nav.ml-auto { min-width: 0; }

/* Equalize header button sizing without affecting other pages */
/* Clamp small phones (≤576): keep the same compact padding as at 576 */
@media (max-width: 576.98px) {
  .main-header .btn.btn-sm { padding: .25rem .5rem; }
  /* Ensure theme toggle matches Sign Out sizing (rectangular, not circular) */
  #themeToggleBtn { width: auto; height: auto; padding: .25rem .5rem; border-radius: .2rem; }
}

/* Band fix: keep header compact and avoid wrap on iPad widths */
@media (min-width: 768px) and (max-width: 836.98px) {
  .main-header .clock-display { display: none; }
}

@media (min-width: 993px) and (max-width: 1086.98px) {
  .main-header .clock-display { display: none; }
}

/* ==== customers.html — 2025-08-13 ==== */
@media (max-width: 768.98px){
  /* Let the table shrink naturally */
  .customers-page #customersTable{
    table-layout: auto;
    width: 100% !important;
    min-width: 0;
  }

  /* Hide extra columns: Address, Type, Completeness, Actions */
  .customers-page #customersTable thead th.col-address,
  .customers-page #customersTable tbody td.col-address,
  .customers-page #customersTable thead th.col-type,
  .customers-page #customersTable tbody td.col-type,
  .customers-page #customersTable thead th.col-completeness,
  .customers-page #customersTable tbody td.col-completeness,
  .customers-page #customersTable thead th.col-actions,
  .customers-page #customersTable tbody td.col-actions{
    display: none !important;
  }

  /* Make absolutely sure the expand + checkbox columns stay visible */
  .customers-page #customersTable th.u-dt-toggle,
  .customers-page #customersTable td.details-control,
  .customers-page #customersTable th.u-col-select,
  .customers-page #customersTable td.u-col-select{
    display: table-cell !important;
  }

  /* Avoid nowrap from forcing width */
  .customers-page #customersTable .text-nowrap{ white-space: normal !important; }
}

  /* Name cell houses the checkbox + chevron; keep content readable */
  .customers-page #customersTable td .name-utils { display:flex !important; justify-content:space-between; align-items:center; min-width:0; margin-bottom:.35rem; }
  .customers-page #customersTable td .name-utils .chk-wrap { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; }
  .customers-page #customersTable td .name-utils .row-check { width:.95rem; height:.95rem; appearance:auto; transform: scale(.85); transform-origin: center; }
  .customers-page #customersTable td[data-label="Name"] { cursor: pointer; }
  .customers-page #customersTable td[data-label="Name"] .btn.row-toggle { color: #007bff; }
  .customers-page #customersTable td[colspan] { padding:.5rem 1rem; }
  .customers-page #customersTable td .email-line { overflow-wrap:anywhere; }
  /* Neutralize stacked labels on this table when stacked */
  .customers-page #customersTable td[data-label]::before { content: none; }
  /* Even gaps for customers toolbars when wrapping — unified globally (see global block) */
  /* Action bar wrap unified globally; keep mobile button min-height below */
  .customers-page .action-bar-card .btn { padding-left: .5rem; padding-right: .5rem; min-height: 44px; }
  /* Align hero Table / Cards toggles */
  .customers-page .view-toggle .btn { display:inline-flex; align-items:center; line-height:1.25; padding:.35rem .75rem; }

  /* Comfortable tap targets for any visible buttons */
  .customers-page #customersTable .btn { min-height: 44px; }



/* ==== GLOBAL UTILITIES — 2025-08-14 ==== */
/* Row expand icon size (used by .row-toggle on all tables) */
.u-rowtoggle-icon { font-size: 1.15rem; line-height: 1; }
@media (max-width: 768.98px) {
  .u-rowtoggle-icon { font-size: 1.25rem; }
}

/* ==== customers.html — 2025-08-14 (TOOLBAR UNIFY — all widths) ==== */
.customers-page .u-filterbar { display:flex; flex-wrap:wrap; gap:.5rem; }
.customers-page .u-filterbar > * { margin: 0; }
.customers-page .action-bar-card .btn-toolbar,
.customers-page .action-bar-card .ml-auto { flex: 0 0 100%; max-width: 100%; margin-left: 0; }
.customers-page .action-bar-card .input-group { display:inline-flex; flex-wrap: wrap; width: auto; }

/* ==== customers.html — 2025-08-14 (DESKTOP NO H-SCROLL) ==== */
@media (min-width: 769px) {
  /* customers.html — page-specific: identity truncation and column proportions */
  .customers-page #customersTable td[data-label="Name"] > strong,
  .customers-page #customersTable td[data-label="Name"] .email-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    display: block;
  }
  .customers-page #customersTable th.col-type,
  .customers-page #customersTable td.col-type { max-width: 12ch; }
  .customers-page #customersTable th.col-address,
  .customers-page #customersTable td.col-address { max-width: 26ch; }
  .customers-page #customersTable th.col-completeness,
  .customers-page #customersTable td.col-completeness { max-width: 22ch; }
  /* Fallback targeting by attribute for actions group */
  .customers-page #customersTable td[colname="Actions"] .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: .25rem;
    white-space: nowrap;
  }
}


/* ==== GLOBAL UTILITIES — 2025-08-15 ==== */
/* Single-line truncation utility for identity cells and headers */
.u-cell-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: block; }

/* Flexible filter/tool bar used across pages */
.u-filterbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.u-filterbar > * { margin: 0; }

/* ==== GLOBAL UTILITIES — 2025-08-15 (DT toolbar) ==== */
/* DataTables/Action toolbar layout to match Customers (all widths) */
.u-dt-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; }
.u-dt-toolbar > * { margin:0; }
.u-dt-toolbar .btn-toolbar,
.u-dt-toolbar .ml-auto { flex:0 0 100%; max-width:100%; margin-left:0; }
.u-dt-toolbar .input-group { display:inline-flex; flex-wrap:wrap; width:auto; }


/* ==== GLOBAL UTILITIES — 2025-08-15 (DT toolbar split) ==== */
.u-dt-toolbar--split { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.u-dt-toolbar__start, .u-dt-toolbar__end { display:flex; flex-wrap:inherit; gap:.5rem; }
@media (min-width: 769px){
  .u-dt-toolbar--split { flex-wrap: nowrap; }
  .u-dt-toolbar__end { margin-left: auto; } /* push right cluster to the right */
}
/* Solo button inside a group shouldn’t look “merged with nothing” */
.u-dt-toolbar .btn-group > .btn:only-child,
.u-dt-toolbar .input-group > .btn:only-child {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}
/* Outline variants keep visible right border when solo */
.u-dt-toolbar .btn-group > .btn:only-child { border-right-color: currentColor; }

/* Cover common BS structure where the solo button sits in .input-group-prepend */
.u-dt-toolbar .input-group-prepend > .btn:only-child {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  border-right-color: currentColor;
}

/* ==== GLOBAL UTILITIES — 2025-08-16 (metrics typography) ==== */
.u-metric-value { font-size: 1.5rem; line-height: 1.2; font-weight: 700; margin: 0; display: block; }
.u-metric-label { font-size: 0.875rem; line-height: 1.2; font-weight: 600; margin: 0; display: block; }
.u-metric-value + .u-metric-label { margin-top: .125rem; } /* consistent micro-gap */
/* Notes: no color here; tiles keep their existing colors via existing classes. */

/* ==== GLOBAL UTILITIES — 2025-08-19 (Card grid responsive @≥768) ==== */
@media (min-width: 768px){
  /* Grid container: global utility or any element with id="card-view" */
  .u-cards-grid,
  #card-view{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* auto-size columns */
    gap: 1rem;
    align-items: stretch;
    margin-left: 0;   /* neutralize row negative margins */
    margin-right: 0;
  }

  /* Children behave in the grid even if Bootstrap cols are present */
  .u-cards-grid > *,
  #card-view > *{
    min-width: 0;
    max-width: none;
    width: auto;
    padding-left: 0;   /* avoid double gutters; rely on grid gap */
    padding-right: 0;
  }

  /* Card stretches to fill its grid cell; body flexes */
  .u-cards-grid .card,
  #card-view .card{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .u-cards-grid .card .card-body,
  #card-view .card .card-body{
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Button groups inside cards can wrap nicely */
  .u-cards-grid .btn-group,
  #card-view .btn-group{
    flex-wrap: wrap;
    gap: .25rem;
  }
}


/* ==== GLOBAL — 2025-08-19 (Cards/Table class toggle) ==== */
/* Default: table visible, cards hidden */
#card-view { display: none; }
#table-view { display: block; }

/* When Cards mode is active, flip visibility */
.is-cards #card-view { display: block; }
.is-cards #table-view { display: none; }

/* Desktop+: Cards become a grid */
@media (min-width: 768px){
  .is-cards #card-view {
    display: grid;
  }
}

/* ==== GLOBAL — 2025-08-19 (Invoices polish) ==== */
/* A) Clamp DT wrapper so the table never extends past the card (kills right-side white strip) */

/* B) Allow button groups to wrap on phones so nothing overflows */
@media (max-width: 768.98px){
  /* Only the TOP-LEVEL group directly inside the quick-actions card should stretch */
  .quick-actions > .btn-group,
  #card-view > .btn-group{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .25rem;
  }

  /* Buttons inside that top-level group lay out 2-up */
  .quick-actions > .btn-group > .btn,
  .quick-actions > .btn-group > .btn-group > .btn,
  #card-view > .btn-group > .btn{
    flex: 1 1 48%;
    margin: .25rem 0;
  }

  /* But the individual groups used by the Jobs toolbar should NOT stretch */
  .quick-actions .u-dt-toolbar .btn-group{
    width: auto !important;
    flex: 0 0 auto;
  }
}

/* ==== GLOBAL — 2025-08-20 (DataTables width + actions) ==== */
/* Always let the table fill the card and ignore DT’s inline widths */
table.dataTable { table-layout: auto; width: 100% !important; }

/* DT often writes widths on <colgroup><col> and <th>; neutralize them */
table.dataTable colgroup col { width: auto !important; }
table.dataTable thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  width: auto !important;
}
table.dataTable tbody td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  width: auto !important;
}

/* Actions column stays on one line and has predictable width */
table.dataTable thead th.col-actions,
table.dataTable tbody td.col-actions { white-space: nowrap; min-width: 9.25rem; }
table.dataTable tbody td.col-actions .btn-group {
  display: inline-flex; flex-wrap: nowrap; gap: .25rem; white-space: nowrap;
}

/* Wrapper hygiene so the wrapper rows don’t introduce side gutters */
.dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
.dataTables_wrapper > .row > [class^="col-"] { padding-left: 0; padding-right: 0; }

/* Mobile / tablet layout fixes (this was nested incorrectly before) */
@media (max-width: 768.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 .5rem 0;
  }
}

/* ==== GLOBAL UTILITIES — 2025-08-21 (card header layout) ==== */
.u-cardhead{
  display:flex;
  flex-wrap:wrap;            /* allow a clean wrap on very narrow screens */
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.u-cardhead-title{
  flex:1 1 auto;             /* title grows, prevents overlap */
  min-width:0;
  margin:0;                  /* kill default h* margins */
}
.u-cardhead-right{
  flex:0 0 auto;
  white-space:nowrap;        /* keep "show total with tax" on one line when possible */
}

/* Ultra-narrow phones: stack control under title for readability */
@media (max-width: 420px){
  .u-cardhead{ flex-direction:column; align-items:flex-start; }
  .u-cardhead-right{ width:100%; display:flex; justify-content:flex-end; white-space:normal; }
}


/* Invoices — keep Summary header title and toggle from colliding */
@media (max-width: 768.98px){
  .invoices-page .summary-tax-toggle{
    position: static;      /* ignore any absolute pinning */
    margin-left: auto;     /* keep it to the right */
    margin-top: .25rem;    /* small breathing room if it wraps */
  }
  .invoices-page .card-header.card-header-secondary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;       /* allow clean two-line wrap */
    gap: .25rem;
  }
}

/* ==== Invoices — 2025-08-21 (≤768: keep Job + Invoice # + Status; mobile actions grid) ==== */
@media (max-width: 768.98px){

  /* Keep the table flexible and full width */
  .invoices-page #invoicesTable { table-layout: auto; width: 100% !important; }

  /* SHOW ONLY: Job (with Invoice # inside that cell) + Status (+ the first toggle/checkbox column) */
  /* Hide Due Date, Balance, and Actions in both header and body */
  .invoices-page #invoicesTable thead th.date-col,
  .invoices-page #invoicesTable tbody td[data-label="Due Date"],
  .invoices-page #invoicesTable thead th.amount-col,
  .invoices-page #invoicesTable tbody td[data-label="Balance"],
  .invoices-page #invoicesTable thead th.col-actions,
  .invoices-page #invoicesTable tbody td[data-label="Actions"] { display: none; }

  /* Clean up any legacy nowrap and stacked “data-label” prefixes */
  .invoices-page #invoicesTable .text-nowrap { white-space: normal; }
  .invoices-page #invoicesTable tbody td[data-label]::before { content: none; }

  /* Mobile-actions layout
     Preferred: put class="u-actions-grid" on the container that holds the quick-action buttons.
     (If you can’t add that class in HTML now, the fallback below still improves layout.) */
  .u-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
  .u-actions-grid .btn { width: 100%; min-height: 44px; min-width: 0; }


  /* Fallback: improve layout for any buttons inside the DataTables child row */
  #invoicesTable tr.child td.child .btn        { width: 100%; min-height: 44px; margin-bottom: .5rem; }
  #invoicesTable tr.child td.child .btn-group  { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
}

/* GLOBAL – child-row buttons don’t cause horizontal overflow on phones */
@media (max-width: 768.98px){
  table.dataTable tr.child td.child .btn        { width:100%; min-height:44px; margin-bottom:.5rem; }
  table.dataTable tr.child td.child .btn-group  { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; }
}


/* ==== GLOBAL — Mobile DataTables (opt-in trim) — 2025-08-26 ==== */
/* Use when your table columns are: [toggle][select][Job][Status][Date][Amount][Actions]
   Wrap the scroll container in: .u-dt-trim-sm (you already did on Estimates) */
@media (max-width: 768.98px){

  /* Keep the table flexible and full width inside its wrapper */
  .u-dt-trim-sm table{ table-layout:auto; width:100% !important; }

  .u-dt-trim-sm table thead th.date-col,
  .u-dt-trim-sm table thead th.amount-col,
  .u-dt-trim-sm table thead th.col-actions{ display:none; }

  /* Also hide any explicitly-marked optional columns (more resilient across layouts) */
  .u-dt-trim-sm table tbody td.col-actions{ display: none; }
  .u-dt-trim-sm table thead th.col-dates,
  .u-dt-trim-sm table tbody td.col-dates,
  .u-dt-trim-sm table thead th.col-priority,
  .u-dt-trim-sm table tbody td.col-priority{ display: none; }

  /* Guard by position so the body hides even if hooks are missing */
  .u-dt-trim-sm table thead th:nth-child(5),
  .u-dt-trim-sm table tbody td:nth-child(5), /* Date */
  .u-dt-trim-sm table thead th:nth-child(6),
  .u-dt-trim-sm table tbody td:nth-child(6), /* Amount */
  .u-dt-trim-sm table thead th:nth-child(7),
  .u-dt-trim-sm table tbody td:nth-child(7){ /* Actions */
    display:none;
  }

  /* Don’t prepend stacked "data-label" prefixes on trimmed tables */
  .u-dt-trim-sm table tbody td[data-label]::before{ content:none; }

  /* Child rows: prevent overflow and keep buttons tidy on phones */
  .u-dt-trim-sm table.dataTable tr.child td.child{
  max-width: 100%;
  box-sizing: border-box;   /* override DataTables’ content-box */
  overflow-x: hidden;       /* kill inner scrollbar */
}
  .u-dt-trim-sm .u-actions-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem; width:100%; padding:.75rem 0;
  }
  .u-dt-trim-sm .u-actions-grid .btn{ min-width:0; width:100%; margin:0; min-height:44px; box-sizing:border-box; display:block; }

  /* Neutralize desktop spacing that caused overflow inside child rows */
  .u-dt-trim-sm table.dataTable tr.child td.child .action-buttons .btn{ margin:0; min-width:0; }
  /* Allow grid items (forms/links/buttons) to shrink with their track */
  .u-dt-trim-sm .u-actions-grid > *{ min-width:0; }

  /* Child row: keep the action area flush on phones */
  .u-dt-trim-sm table.dataTable tr.child td.child .action-buttons{ padding:.75rem 0 !important; }



  /* Safety clamp: page itself never scrolls sideways on phones */
  body, .content-wrapper{ overflow-x:hidden; }
}

/* ==== estimates.html — 2025-08-26 (tablet & mobile parity with invoices) ==== */

/* ≤768px: keep [toggle][select][Job][Status]; hide Date (Expiration), Total, and Actions */
@media (max-width: 768.98px){
  .estimates-page #estimatesTable { table-layout: auto; width: 100% !important; }

  /* Hide by semantic hooks (preferred) */
  .estimates-page #estimatesTable thead th.date-col,
  .estimates-page #estimatesTable tbody td[data-label="Expiration Date"],
  .estimates-page #estimatesTable thead th.amount-col,
  .estimates-page #estimatesTable tbody td[data-label="Total"],
  .estimates-page #estimatesTable thead th.col-actions,
  .estimates-page #estimatesTable tbody td[data-label="Actions"] { display: none; }

  /* Clean up any legacy stacked labels/nowrap */
  .estimates-page #estimatesTable .text-nowrap { white-space: normal; }
  .estimates-page #estimatesTable tbody td[data-label]::before { content: none; }
}

/* 576–768px (“tablet band”): mirror invoices by also hiding Select + Amount + Actions */
@media (min-width: 576px) and (max-width: 768.98px){
  /* Tablet: keep Select visible; only hide Total + Actions */
  .estimates-page #estimatesTable thead th.amount-col,
  .estimates-page #estimatesTable tbody td[data-label="Total"],
  .estimates-page #estimatesTable thead th.col-actions,
  .estimates-page #estimatesTable tbody td[data-label="Actions"] { display: none; }
}

/* HOTFIX — Estimates child row overflow (≤768px) */
@media (max-width: 768.98px){
  /* 1) Let long button labels wrap inside the 2-col grid */
  .u-dt-trim-sm .u-actions-grid .btn,
  table.dataTable tr.child td.child .btn{
    white-space: normal;           /* override Bootstrap’s nowrap */
    line-height: 1.25;             /* nicer multi-line buttons */
  }

  /* 2) Child cell itself should never create a sideways scrollbar */
  .u-dt-trim-sm table.dataTable tr.child td.child{
    overflow-x: hidden;
  }

  /* 3) Since we’re trimming columns on phones, kill the inner h-scroll */
  .u-dt-trim-sm.table-responsive{
    overflow-x: hidden;
  }
}

@media (max-width: 768.98px){
  /* Avoid grid column overflow and let labels wrap */
  .u-dt-trim-sm .u-actions-grid{ min-width: 0; }
  .u-dt-trim-sm .u-actions-grid .btn,
  .u-dt-trim-sm table.dataTable tr.child td.child .btn{
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }

  /* Clamp every common scroll wrapper under this opt-in */
  .u-dt-trim-sm.table-responsive,
  .u-dt-trim-sm .dataTables_wrapper,
  .u-dt-trim-sm .dt-table-wrap{ overflow-x: clip; }
}

/* HOTFIX — Child-row gutters & wrapping (≤768px) — v2 */
@media (max-width: 768.98px){

  /* Neutralize Bootstrap gutters inside the DT child cell */
  .u-dt-trim-sm table.dataTable tr.child .row,
  .u-dt-trim-sm table.dataTable tr.child .form-row{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .u-dt-trim-sm table.dataTable tr.child .row > [class^="col-"],
  .u-dt-trim-sm table.dataTable tr.child .form-row > [class^="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* The child cell itself must be the clamp */
  .u-dt-trim-sm table.dataTable tr.child td.child{
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
  /* DataTables often wraps the fragment in .p-3 – trim its side padding */
  .u-dt-trim-sm table.dataTable tr.child td.child > .p-3{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Buttons grid: allow true shrinking & wrapping */
  .u-dt-trim-sm table.dataTable tr.child .u-actions-grid{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* critical */
    gap: .5rem;
    width: 100%;
    min-width: 0;
    padding: .75rem 0 !important;
  }
  .u-dt-trim-sm table.dataTable tr.child .u-actions-grid .btn{
    min-width: 0 !important;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
}

/* ==== GLOBAL — Ultra-narrow child actions (≤480px) ==== */
/* On tiny phones, stack the action buttons so nothing clips */
@media (max-width: 480px){
  .u-dt-trim-sm .u-actions-grid{
    grid-template-columns: 1fr !important;   /* override 2-col default */
    min-width: 0;                             /* allow grid to shrink */
  }
  .u-dt-trim-sm .u-actions-grid .btn{
    min-width: 0;
    width: 100%;
    margin: 0;                 /* rely on grid gap only */
    padding: .5rem .625rem;    /* slightly slimmer but tappable */
    font-size: .875rem;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
    display: grid;
  }
}


/* ==== GLOBAL — DataTable column utilities (portable across all tabs) ==== */

/* Select/checkbox column */
th.col-select,
td.col-select,
.u-col-select {                     /* allows using a utility class on TH/TD */
  text-align: center;
  vertical-align: middle;           /* Bootstrap defaults to top */
  width: 44px;
  min-width: 44px;
  padding-left: .25rem;
  padding-right: .25rem;
}

th.col-select input[type="checkbox"],
td.col-select input[type="checkbox"],
.u-col-select input[type="checkbox"]{
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

/* (Optional) Actions column alignment, if you want to unify that too later */
th.col-actions,
td.col-actions { text-align: center; white-space: nowrap; }

/* ==== GLOBAL — DataTables common columns (all tabs) ==== */
table.dataTable th.u-dt-toggle,
table.dataTable td.u-dt-toggle { width: 42px; }

table.dataTable th.u-dt-check,
table.dataTable td.u-dt-check {
  width: 44px;                 /* keep column narrow but stable */
  text-align: center;
  vertical-align: middle;
}

/* ==== GLOBAL — Phone polish for all DT tables using our mobile trim ==== */
@media (max-width: 768.98px){

  /* Give the table scroll area equal side gutters so it doesn't "hug" the edge */
  .u-table-fluid{
    box-sizing: border-box;
    padding-left: .5rem;
    padding-right: .5rem;
  }

  /* Normalize header padding on phones and remove DT's sort chevron reserve */
  .u-dt-trim-sm table.dataTable thead th{
    padding-right: .75rem !important; /* match td default so header/body align */
  }
  .u-dt-trim-sm table.dataTable thead th:before,
  .u-dt-trim-sm table.dataTable thead th:after{
    display: none !important; /* hide DT sorting pseudo icons on phones */
  }
}

/* ==== Inbox — phone fit, no scroll, no child rows (≤768.98px) ==== */
@media (max-width: 768.98px){

  /* 1) Always fit the table by trimming non-essential columns on phones */
  #mailboxTable .mailbox-subject,
  #mailboxTable .mailbox-attachment,
  #mailboxTable .mailbox-date{
    display: none !important;
  }

  /* 2) Tighten the leading utility columns and let sender actually shrink */
  #mailboxTable td.u-col-select,
  #mailboxTable td.mailbox-star{
    width: 40px;
    min-width: 40px;
    padding-left: .25rem;
    padding-right: .25rem;
    text-align: center;
    vertical-align: middle;
  }
  #mailboxTable .mailbox-name{ min-width: 0; }

  /* 3) Header shouldn’t force overflow: allow it to wrap the search */
  .mailbox-header{ flex-wrap: wrap; }
  .mailbox-header h3{ margin-bottom: .5rem; }
  .mailbox-header .search-group{ flex: 1 1 100%; }
}

/* Keep using global wrappers you already ship:
   - .u-table-fluid adds inner gutters on phones【turn17file1 L48-L53】.
   - .u-dt-trim-sm clamps overflow on the scroll wrapper itself【turn17file0 L11-L15】. */

/* ── Modal fixes: trap scroll inside modals and stop background scroll ───────── */

/* AdminLTE scroll clamp when a modal is open */
body.modal-open .content-wrapper,
body.modal-open .wrapper {
  overflow: hidden !important;
  height: 100dvh; /* use dynamic viewport height on mobile */
}

/* Prevent scroll from bubbling to the page */
.modal,
.modal-dialog,
.modal-content,
.modal-body {
  overscroll-behavior: contain;
}

@media (max-width: 768.98px) {
  .modal-dialog { margin: .5rem auto; }

  /* Ensure the whole modal fits the screen */
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100dvh - 1rem) !important; /* .5rem top + .5rem bottom margins */
  }

  /* Give the body a reliable scroll area (header+footer safety budget) */
  :root { --modal-safety: 190px; } /* tweak if you enlarge header/footer later */

  .modal-dialog-scrollable .modal-body {
    max-height: calc(100dvh - var(--modal-safety)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep action buttons reachable at all times */
  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 -2px 6px rgba(0,0,0,.06);
  }
}

/* ── Employees: phone fit & action layout (append-only) ───────── */
@media (max-width: 768.98px){
  /* Compact cell padding so 4 cols fit without h-scroll */
  .u-dt-trim-sm #employeesTable th,
  .u-dt-trim-sm #employeesTable td{
    padding: .5rem .5rem !important;
    vertical-align: middle;
  }

  /* Let long emails truncate instead of pushing the table wide */
  #employeesTable td [class*="u-cell-ellipsis"]{
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Wrap actions into a tidy grid on phones (2 cols → 1 if very narrow) */
  #employeesTable .action-buttons.u-actions-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: .5rem;
  }

  /* Keep buttons tappable but compact */
  #employeesTable .action-buttons .btn{
    padding: .45rem .6rem;
    font-size: .875rem;
    width: 100%;            /* each grid cell becomes a full-width button */
  }
}

/* On ultra-narrow screens, fall back to a single column grid */
@media (max-width: 400px){
  #employeesTable .action-buttons.u-actions-grid{
    grid-template-columns: 1fr;
  }
}

/* ── Employees: force-fit 4 simple columns on any screen ───────── */
.u-fit-4col {
  table-layout: fixed;       /* ignore content’s natural width */
  width: 100%;
}

/* compress cells safely; let CSS control widths */
.u-fit-4col th,
.u-fit-4col td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;       /* keep one-line where possible */
  vertical-align: middle;
}

/* allow the Actions cell to wrap buttons instead of widening the table */
.u-fit-4col td[data-label="Actions"] {
  white-space: normal;
}

/* inline inputs in the Name column must be allowed to shrink */
#employeesTable td .form-control {
  min-width: 0;              /* override any intrinsic min-width */
  width: 100%;
}

/* column balance: tweak as needed; totals = 100% */
#employeesTable .col-name    { width: 26%; }
#employeesTable .col-email   { width: 34%; }
#employeesTable .col-role    { width: 16%; }
#employeesTable .col-actions { width: 24%; }

/* phones: keep actions usable and prevent overflow */
@media (max-width: 768.98px) {
  .u-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2-up buttons on phones */
    gap: .5rem;
  }
  .u-actions-grid .btn {
    white-space: normal;          /* allow 'Reset Password' to wrap */
    padding: .375rem .5rem;       /* compact touch target */
    font-size: .85rem;
  }
}

/* ── Employees: mobile 2-line row stack (Name+Email / Role+Actions) ───────── */
@media (max-width: 768.98px){
  /* Hide header row on phones; we render each row as a 2x2 grid */
  .u-dt-trim-sm #employeesTable thead{
    display: none !important;
  }

  /* Turn each table row into a grid:
     line 1: Name | Email, line 2: Role | Actions */
  .u-dt-trim-sm #employeesTable tbody{
    display: block;
  }
  .u-dt-trim-sm #employeesTable tbody tr{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name email"
      "role actions";
    gap: .5rem .75rem;
    padding: .75rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
    background: #fff;
  }

  /* Cells behave like blocks inside the grid */
  .u-dt-trim-sm #employeesTable td{
    display: block;
    width: 100%;
    white-space: normal;          /* allow wrapping instead of forcing overflow */
    overflow-wrap: anywhere;      /* long emails/names wrap cleanly */
    word-break: break-word;
    padding: .375rem .25rem !important;
  }

  .u-dt-trim-sm #employeesTable td[data-label="Name"]    { grid-area: name; }
  .u-dt-trim-sm #employeesTable td[data-label="Email"]   { grid-area: email; }
  .u-dt-trim-sm #employeesTable td[data-label="Role"]    { grid-area: role; }
  .u-dt-trim-sm #employeesTable td[data-label="Actions"] { grid-area: actions; }

  /* Inputs inside the Name cell must shrink to container */
  #employeesTable td[data-label="Name"] .form-control{
    min-width: 0;
    width: 100%;
  }

  /* Actions: wrap neatly, full-width buttons per grid cell */
  #employeesTable .action-buttons.u-actions-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
  }
  #employeesTable .action-buttons .btn{
    width: 100%;
    white-space: normal;          /* let 'Reset Password' wrap */
    padding: .45rem .6rem;
    font-size: .875rem;
  }
}

/* Ultra narrow: stack actions in a single column */
@media (max-width: 400px){
  #employeesTable .action-buttons.u-actions-grid{
    grid-template-columns: 1fr;
  }
}

/* ==== payments.html — 2025-09-11 ==== */
/* Mobile DataTables — payments-page-only */
@media (max-width: 768.98px) {
  /* Always show: icon (1), select (2), Invoice # (3) */
  .payments-page #paymentsTable thead th:nth-child(1),
  .payments-page #paymentsTable tbody td:nth-child(1),
  .payments-page #paymentsTable thead th:nth-child(2),
  .payments-page #paymentsTable tbody td:nth-child(2),
  .payments-page #paymentsTable thead th:nth-child(3),
  .payments-page #paymentsTable tbody td:nth-child(3) { display: table-cell; }

  /* Show Payment Status (4) */
  .payments-page #paymentsTable thead th:nth-child(4),
  .payments-page #paymentsTable tbody td:nth-child(4) { display: table-cell; }

  /* Keep Invoice Date (5) trimmed on mobile (global already trims) */

  /* Payments: match Invoices on phones — keep only 4 visible columns */
  @media (max-width: 768.98px){
    .payments-page #paymentsTable thead th:nth-child(6),
    .payments-page #paymentsTable tbody td:nth-child(6){
      display: none !important;
    }
  }

  /* Hide amounts (7,8) and actions (9) on mobile */
  .payments-page #paymentsTable thead th:nth-child(7),
  .payments-page #paymentsTable tbody td:nth-child(7),
  .payments-page #paymentsTable thead th:nth-child(8),
  .payments-page #paymentsTable tbody td:nth-child(8),
  .payments-page #paymentsTable thead th:nth-child(9),
  .payments-page #paymentsTable tbody td:nth-child(9) { display: none; }
  .payments-page #paymentsTable thead th.col-actions { display: none; }
  .payments-page #paymentsTable tbody td.col-actions { display: none; }
}

/* ==== payments.html — Child-row actions fix (≤769) — 2025-09-15 ==== */
@media (max-width: 769px){
  /* Prevent side overflow of child content (match Invoices/global) */
  .payments-page #paymentsTable tr.child td.child{
    overflow-x: hidden; /* was visible */
  }

  /* Tight, wrap-safe 2-col grid */
  .payments-page #paymentsTable tr.child .action-buttons{
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: .5rem;
    padding: .25rem 0;
    margin: 0;
    width: 100%;
    min-width: 0;
  }

  /* Let grid items (forms or direct buttons) actually shrink */
  .payments-page #paymentsTable tr.child .action-buttons > *{ min-width: 0; }

  /* Make the button the grid item when it sits inside a form */
  .payments-page #paymentsTable tr.child .action-buttons > form{ display: contents; }

  /* Smaller buttons, no overflow */
  .payments-page #paymentsTable tr.child .action-buttons .btn{
    display: block;
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.25;
    padding: .45rem .6rem;
    font-size: .875rem;
  }
}

/* ── Global: 4-column fit for phones (opt-in via .u-fit-4col) ───────── */
@media (max-width: 768px){
  .u-fit-4col th.col-address,
  .u-fit-4col td.col-address,
  .u-fit-4col th.col-type,
  .u-fit-4col td.col-type,
  .u-fit-4col th.col-completeness,
  .u-fit-4col td.col-completeness,
  .u-fit-4col th.col-actions,
  .u-fit-4col td.col-actions { display: none !important; }

  /* Let name/email breathe without triggering overflow */
  .u-fit-4col .u-cell-ellipsis { max-width: 240px; }
}

/* Safety clamp: never allow page-level horizontal scroll on phones */
@media (max-width: 768.98px){
  html, body, .content-container, .content-wrapper { max-width:100%; overflow-x:hidden; }
}

/* ================== Customers — phone layout to match Jobs (4 columns) ================== */
@media (max-width: 768.98px){
  /* Use fixed layout so four kept columns share the width and don't overflow */
  #customersTable.u-dt-trim-sm,
  .u-dt-trim-sm #customersTable,
  #customersTable { table-layout: fixed !important; width: 100% !important; }

  /* Hide non-essential columns at phone sizes (like Jobs does via globals) */
  #customersTable thead th.col-address,
  #customersTable tbody td.col-address,
  #customersTable thead th.col-type,
  #customersTable tbody td.col-type,
  #customersTable thead th.col-completeness,
  #customersTable tbody td.col-completeness,
  #customersTable thead th.col-actions,
  #customersTable tbody td.col-actions {
    display: none !important;
  }

  /* Keep the expand and select columns narrow and stable */
  #customersTable th.u-dt-toggle,
  #customersTable td.details-control,
  #customersTable th.u-col-select,
  #customersTable td.u-col-select {
    width: 40px !important;
    min-width: 40px !important;
    padding-left: .25rem !important;
    padding-right: .25rem !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
  }

  /* Name/email: allow truncation inside the fixed-layout cell */
  #customersTable td[data-label="Name"] .u-cell-ellipsis {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    min-width: 0;
  }

  /* Status: keep on one line so it doesn't force the column wider */
  #customersTable th.col-status,
  #customersTable td.col-status {
    white-space: nowrap;
  }
}

/* ===== Invoices — Card view: phone layout matches Estimates (no overhang) ===== */
@media (max-width: 768.98px){
  /* Only style the card grid when it is NOT hidden */
  .invoices-page #card-view:not(.d-none){
    display: grid;                   /* no !important */
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-left: 0;
    margin-right: 0;
  }
  .invoices-page #card-view:not(.d-none) > [class^="col-"],
  .invoices-page #card-view:not(.d-none) > [class*=" col-"]{
    padding-left: 0;
    padding-right: 0;
  }
  .invoices-page #card-view:not(.d-none) .card{
    min-width: 0;
  }
}

/* ==== FIX: card-view buttons wrapping on phones (≤768px) ==== */
@media (max-width: 768.98px){
  /* Let each card's footer button group wrap instead of forcing one long row */
  #card-view .card-footer .btn-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .25rem;
  }
  /* Make buttons share the line in twos and wrap nicely */
  #card-view .card-footer .btn-group > .btn {
    flex: 1 1 48%;
    margin: .25rem 0;
  }

  /* Remove .row side gutters in the cards view so nothing clips on the right */
  #card-view {
    margin-left: 0;
    margin-right: 0;
  }
  #card-view > [class^="col-"],
  #card-view > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
  }
}


/* === Owner Panel (Roles & Access) — appended on 2025-09-22 === */
.owner-perm-matrix-container {
  overflow-x: auto;
}
@media (max-width: 768px) {
  .owner-perm-matrix-container {
    overflow-x: auto; /* horizontal scroll for matrix only */
  }
}
#perm-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f9fa; /* light header background */
}
#perm-matrix .sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ffffff;
}
#perm-matrix .perm-subcol {
  width: 80px; /* narrow admin/worker sub-columns */
}
#perm-matrix td, #perm-matrix th {
  vertical-align: middle;
  white-space: nowrap;
}

/* === Owner Panel (Mobile-first redesign) — 2025-09-23 === */
@media (max-width: 767.98px) {
  .perm-desktop { display: none; }
  .perm-mobile  { display: block; }
}
@media (min-width: 768px) {
  .perm-desktop { display: block; }
  .perm-mobile  { display: none; }
}

/* Header readability + sticky */
.perm-matrix thead th {
  background:#f8f9fa;
  color:#212529;
  position:sticky;
  top:0;
  z-index:2;
}
.perm-matrix .col-resource {
  position:sticky;
  left:0;
  z-index:1;
  background:#fff;
}

/* Role visibility */
.perm-matrix.show-role-admin  .col-role-worker { display:none; }
.perm-matrix.show-role-worker .col-role-admin  { display:none; }
.perm-mobile.show-role-admin  [data-role="worker"] { display:none; }
.perm-mobile.show-role-worker [data-role="admin"]  { display:none; }

/* Chip buttons */
.perm-toggle {
  min-width:2rem;
  height:2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:.5rem;
}
.perm-toggle.active {
  background:#0d6efd;
  color:#fff;
  border-color:#0d6efd;
}
.perm-chip-row { display:flex; gap:.375rem; flex-wrap:wrap; }
.perm-quick .btn { border-radius:.5rem; }

/* Mobile card layout */
.perm-card { margin-bottom:.5rem; }
.perm-card .perm-card-title { display:flex; flex-direction:column; gap:.25rem; }
@media (max-width: 375px) { .perm-quick { margin-top:.25rem; } }

/* Spacing */
.perm-matrix td, .perm-matrix th { padding:.5rem; vertical-align:middle; }
.perm-matrix .form-check { margin:0; }

/* === Owner Panel (Header align + no presets) — 2025-09-23 === */
#perm-table-admin { display: none; }
#perm-table-worker { display: none; }
.show-role-admin  #perm-table-admin  { display: table; }
.show-role-worker #perm-table-worker { display: table; }

/* === Owner Panel (NA cells) — 2025-09-23 === */
.perm-na { color: #6c757d; }
.perm-na[title] { cursor: help; }


.rbac-disabled {
  opacity: .55;
  pointer-events: none;
  cursor: not-allowed !important;
}

/* For links specifically, avoid underlines to signal disabled */
a.rbac-disabled { text-decoration: none; }


/* === 2025-10-18 Select2 overflow guards === */

/* Ensure the control never exceeds its container */
.select2-container {
  box-sizing: border-box;
  max-width: 100%;
}

/* Keep dropdown within viewport width */
.select2-dropdown {
  box-sizing: border-box;
  max-width: 100vw;
}

/* The search input should not grow beyond the dropdown */
.select2-container .select2-search__field {
  width: 100% !important;
}

/* Results list scrolls vertically instead of growing the page */
.select2-results__options {
  max-height: 280px;
  overflow-y: auto;
}

/* When a Select2 is open, never allow accidental horizontal scroll */
body.has-open-select2 {
  overflow-x: hidden;
}

/* Avoid accidental horizontal scroll on our main content wrapper */
.content-container {
  overflow-x: hidden;
}

/* ==== ACTION BAR DROPDOWNS — 2025-10-30 ==== */
/* Allow dropdown menus inside action-bar input groups to escape the box */
.action-bar-card .input-group {
  overflow: visible !important;
}

/* ==== ACTION BAR DROPDOWNS (overlay) — 2025-10-30 ==== */
.action-bar-card .dropdown-menu {
  z-index: auto; /* above table rows/headers */
}

/* ==== About page styling — 2025-11-03 ==== */
  *, *::before, *::after { box-sizing: border-box; }
  img, video { max-width: 100%; height: auto; display: inline; }
  :root{
    --brand1:#5b7cfa; --brand2:#7c3aed;
    --ink:#0f172a; --ink-2:#111827; --muted:#64748b;
    --ok:#16a34a; --no:#ef4444;
    --bg:#f6f7fb; --surface:#ffffff; --border:rgba(2,6,23,.10);
    --radius:16px; --radius-lg:22px; --shadow:0 10px 28px rgba(2,6,23,.08);
    --space-1:8px; --space-2:12px; --space-3:16px; --space-4:20px;
    --space-5:24px; --space-6:28px; --space-7:36px; --space-8:48px;
  }
  body{ background:var(--bg) !important; color:var(--ink); }
  .about-wrap{ max-width:1600px; margin:0 auto; padding:0 var(--space-1); }

  .surface{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
  .section-surface{ padding:var(--space-6); }
  .center-row{ display:flex; gap:var(--space-2); justify-content:center; flex-wrap:wrap; }
  .justify-end{ justify-content:flex-end; }
  .input-compact{ width:84px; padding:6px 10px; border:1px solid var(--border); border-radius:10px; background:#fff; color:#111827; }
  .badge-contrast{ color:#1f2937 !important; }
  .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); }
  .mb-1{ margin-bottom:var(--space-1); } .mb-3{ margin-bottom:var(--space-3); }
  .mr-1{ margin-right:var(--space-1); } .mr-2{ margin-right:var(--space-2); }
  .text-muted{ color:#6b7280; }
  :focus-visible{ outline:3px solid rgba(91,124,250,.35); outline-offset:2px; border-radius:6px; }
  a.btn:focus-visible{ outline-color:rgba(255,255,255,.9); }

  /* Hero */
  .super-hero{
    position:relative; overflow:hidden; color:#fff;
    background:
     radial-gradient(800px 400px at 10% -10%, rgba(124,58,237,.35), transparent 60%),
     radial-gradient(800px 400px at 90% 0%, rgba(91,124,250,.35), transparent 60%),
     linear-gradient(180deg, #0b1020 0%, #121735 100%);
    padding: clamp(72px, 8vw, 96px) 0 clamp(40px, 6vw, 60px);
  }
  .brand-badge{
    position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
    border-radius:999px; padding:8px 12px; backdrop-filter: blur(6px);
  }
  .brand-badge img{ width:40px; height:40px; border-radius:8px; }
  .brand-badge span{ font-weight:800; letter-spacing:.2px; color:#e5e7eb; font-size:15px; }

  .super-hero .grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:var(--space-7); align-items:center; }
  .product-name{ font-weight:1000; letter-spacing:-.02em; font-size:clamp(36px, 6vw, 64px); line-height:1; margin-bottom:10px; }
  .headline{ font-weight:900; letter-spacing:-.02em; font-size:clamp(28px, 4.5vw, 44px); line-height:1.1; }
  .subhead{ font-size:clamp(16px, 2vw, 18px); opacity:.95; margin-top:var(--space-2); color:#e5e7eb; }
  .made-by{ margin-top:8px; color:#cbd5e1; font-size:14px; }
  .made-by a{ color:#fff; text-decoration:underline; }
  .cta-row{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
  .cta-row .btn{ border-radius:999px; padding:12px 20px; font-weight:800; }
  .btn-glow{ background:#fff; color:#2b2f56; border:2px solid #fff; }
  .btn-ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.5); }
  .btn-mail{ background:#22c55e; color:#0b1020; border:2px solid #22c55e; }
  .chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--space-2); }
  .chip{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); padding:6px 10px; border-radius:999px; font-size:13px; backdrop-filter: blur(6px); }
  .device{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-lg);
    padding:var(--space-3); box-shadow:0 30px 60px rgba(0,0,0,.35);
  }
  .device img{ border-radius:14px; cursor: zoom-in; }

  /* Sections */
  .section-head{ text-align:center; margin:clamp(36px, 6vw, 56px) 0 var(--space-3); }
  .section-head h2{ font-size:clamp(24px, 3.1vw, 32px); font-weight:900; color:var(--ink); }
  .section-head p{ color:var(--muted); max-width:1100px; margin:8px auto 0; }
  .bandA, .bandB{ background:var(--bg); padding: var(--space-6) 0; }

  .trust{ margin: var(--space-4) auto var(--space-6); padding:var(--space-4); }
  .trust ul{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; margin:0; padding:0; list-style:none; color:#475569; font-weight:600; }
  .trust li::before{ content:"✓"; color:var(--ok); font-weight:900; margin-right:8px; }

  .feature-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:var(--space-3); }
  .fcard{ padding:var(--space-4); text-align:center; }
  .fcard i{ font-size:28px; margin-bottom:var(--space-2); color:var(--brand1); }
  .fcard h5{ font-weight:800; color:var(--ink-2); margin-bottom:6px; }
  .fcard p{ color:#64748b; margin:0; }

  .deep{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); align-items:center; margin:var(--space-7) 0; }
  .deep h3{ font-weight:900; color:var(--ink-2); }
  .deep ul{ list-style:none; padding-left:0; margin:var(--space-2) 0 0; }
  .deep li{ padding:6px 0; color:#334155; }
  .deep li::before{ content:"✓"; color:var(--ok); font-weight:900; margin-right:8px; }

  .slider{ position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
  .slides{ display:flex; transition: transform .5s ease; }
  .slides img{ width:100%; height:340px; object-fit:cover; flex:0 0 100%; cursor: zoom-in; }
  .sctrl{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:none; width:38px; height:38px; border-radius:999px; }
  .sctrl:hover{ background:rgba(0,0,0,.6); }
  .prev{ left:10px; } .next{ right:10px; }
  .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; }
  .dot{ width:8px; height:8px; border-radius:999px; background:rgba(0,0,0,.25); border:0; }
  .dot.active{ background:#111827; }

  .compare table{ width:100%; border-collapse:collapse; }
  .compare th, .compare td{ padding:14px 12px; border-bottom:1px solid #eef2f7; text-align:center; }
  .compare th{ background:#f8fafc; font-weight:800; color:#0f172a; }
  .check{ color:var(--ok); font-weight:900; } .x{ color:var(--no); font-weight:900; }

  .pricing{ background:var(--bg); padding:var(--space-8) 0; }
  .pcard{ overflow:hidden; }
  .phead{ text-align:center; padding:var(--space-5); color:#fff; background:linear-gradient(135deg, var(--brand1), var(--brand2)); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
  .pbody{ padding:var(--space-5); text-align:center; }
  .tiers{ display:flex; gap:var(--space-2); flex-wrap:wrap; justify-content:center; list-style:none; padding:0; margin:var(--space-3) 0 var(--space-1); }
  .tiers li{ background:#f1f5f9; border-radius:999px; padding:8px 14px; color:#334155; font-weight:600; }
  .slider-row{ display:flex; gap:var(--space-3); align-items:center; justify-content:center; margin:var(--space-3) 0 var(--space-2); }
  input[type=range]{ width:min(640px,60%); }
  .price-box{ background:#f8fafc; border:1px solid var(--border); border-radius:12px; padding:var(--space-4); margin:var(--space-4) auto; max-width:520px; }
  .subtotal{ font-size:28px; font-weight:800; color:#0f172a; }
  .promo{ font-weight:700; color:#16a34a; display:block; text-align:center; }

  .faq .card{ border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:var(--space-3); }
  .faq .card-header{ background:#f8fafc; padding:12px 16px; cursor:pointer; }
  .faq .card-body{ padding:14px 16px; }

  .final-cta{ text-align:center; padding:var(--space-8) 0; }
  .final-cta .btn{ border-radius:999px; padding:14px 22px; font-weight:800; }

  .sticky-cta{
    position: fixed; left: var(--space-1); right: var(--space-1);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    z-index: 1000;
    display: none; align-items: center; justify-content: space-between; gap: var(--space-2);
    background: linear-gradient(90deg, rgba(91,124,250,.95), rgba(124,58,237,.95));
    color:#fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition: transform .25s ease, opacity .25s ease;
  }
  .sticky-cta .title{ font-weight:800; }
  .sticky-cta .btn{ border-radius:999px; background:#fff; color:#1f2937; font-weight:800; padding:8px 14px; }
  .sticky-cta.is-muted{ transform: translateY(120%); pointer-events:none; }

  .reveal{ opacity:0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }

  @media (max-width: 1200px){ .feature-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media (max-width: 992px){
    .super-hero .grid{ grid-template-columns:1fr; }
    .feature-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .deep{ grid-template-columns:1fr; gap:var(--space-5); }
  }
  @media (max-width: 576px){ .feature-grid{ grid-template-columns:1fr; } }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; }
    .slides{ transition:none !important; }
  }

  /* Lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:2000;
  }
  .lightbox.is-open{ display:flex; }
  .lightbox__img{ max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
  .lightbox__close, .lightbox__nav{
    position:absolute; top:16px; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
    border-radius:999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(6px);
  }
  .lightbox__close{ right:16px; }
  .lightbox__nav{ top:50%; transform:translateY(-50%); }
  .lightbox__prev{ left:16px; } .lightbox__next{ right:16px; }
  .lightbox__caption{ position:absolute; bottom:16px; left:0; right:0; color:#e5e7eb; text-align:center; font-size:14px; padding:6px 12px; }

  /* Contact form */
  #contact{ scroll-margin-bottom:120px; }
  .contact-card .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
  .contact-card label{ font-weight:700; color:#111827; }
  .contact-card input, .contact-card select, .contact-card textarea{
    width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:#fff;
  }
  .contact-card textarea{ min-height:140px; resize:vertical; }
  @media (max-width: 768px){ .contact-card .form-row{ grid-template-columns:1fr; } }

/* Top-right login button in hero */
.hero-topbar{
  position:absolute; top:16px; right:16px; z-index:10;
  display:flex; align-items:center; gap:8px;
}
.hero-topbar .btn{ border-radius:999px; padding:8px 14px; font-weight:800; }
/* Optional: make outline variant readable on dark hero */
.hero-topbar .btn-outline-light{
  border:2px solid rgba(255,255,255,.7); color:#fff; background:transparent;
}
@media (max-width: 576px){
  .hero-topbar{ top:12px; right:12px; }
}