html {
  font-size: 16px;
}
<style >
.table.table-sm.table-striped > tbody > tr.collapse-row {
    background-color: transparent !important;
}

.attributes-row .card {
    background: #f8f9fa;
}

.category-header {
    background-color: #e9ecef;
    font-weight: 600;
    padding: 8px 12px;
    border-left: 4px solid #0d6efd;
}
<style >
.table.table-sm.table-striped > tbody > tr.collapse-row {
    background-color: transparent !important;
}

.attributes-row .card {
    background: #f8f9fa;
}

.category-header {
    background-color: #e9ecef;
    font-weight: 600;
    padding: 8px 12px;
    border-left: 4px solid #0d6efd;
}

.is-invalid {
    border-color: #dc3545 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

</style >
</style >

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}
h1, .h1 {
    font-size: 1.5rem !important;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(100,100,100,0.25);
}

html {
  position: relative;
  min-height: 100%;
}

html, body, #app {
  height: 100%;
}

body {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  /*overflow-x: hidden;  prevent horizontal scroll */
}

/* Modern look & spacing */
body {
    background-color: #f6f8fb;
    color: #6c757d;
}

.card {
  border: 0;
  border-radius: 12px;
}

.table thead th {
  border-bottom: 2px solid rgba(0,0,0,0.05);
  font-weight: 600;
}

.table tbody tr:hover {
  background-color: rgba(100,100,100,0.03);
}

/* Explicit hover for table view (desktop) to a light gray for better row highlighting */
.d-none.d-sm-block .table tbody tr:hover {
  background-color: #f2f2f2 !important;
  transition: background-color 120ms ease-in-out;
}

/* Ensure table cells also get the hover background (overrides other td rules) */
.d-none.d-sm-block .table tbody tr:hover td {
  background-color: #f2f2f2 !important;
}

.btn-primary {
  background-image: linear-gradient(180deg,#6c757d,#5a6268);
  border: 0;
}

.form-control {
  border-radius: 8px;
  padding: .6rem .75rem;
}

.mb-3 { margin-bottom: 1rem; }

/* Mobile-specific adjustments */
@media (max-width: 576px) {
  /* increase base font size by 20% on narrow mobile devices */
  html { font-size: 15.6px; } /* 13px * 1.2 = 15.6px */
  .card-body { padding: 1rem; }
  .navbar-brand { font-size: 1rem; }
  .table { font-size: 0.9rem; }
  .table th, .table td { padding: 0.45rem 0.5rem; }
  .d-flex.toolbar-stack, .d-flex.toolbar-stack > * { width: 100%; }
  .d-flex.toolbar-stack { flex-direction: column; gap: .5rem; }
  .btn { padding: .5rem .6rem; }

/* Larger touch targets for mobile */
.btn, .form-control, .table a {
  min-height: 44px; /* recommended touch target */
  display: inline-flex;
  align-items: center;
}

.form-control { padding-top: .5rem; padding-bottom: .5rem; }

/* Collapsible detail panel styling */
.detail-panel {
  background: #ffffff;
  border-radius: 8px;
  padding: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.details-toggle { cursor: pointer; }

/* Sidebar styles */
.sidebar {
  border: 1px solid rgba(0,0,0,0.04);
  min-height: 120px;
}

@media (max-width: 767px) {
  .sidebar { margin-bottom: 1rem; }
}

/* Contract status formatting */
.table .contract-status,
.contract-status {
  display: inline-block !important;
  padding: .35rem .6rem !important;
  border-radius: .45rem !important;
  font-weight: 600;
  vertical-align: middle;
}
.table .contract-status.contract-signed,
.contract-status.contract-signed {
  background-color: rgba(76, 175, 80, 0.18) !important; /* stronger soft green */
  color: #1b5e20 !important;
  border: 1px solid rgba(76,175,80,0.22) !important;
}
.table .contract-status.contract-pending,
.contract-status.contract-pending {
  background-color: rgba(255, 152, 0, 0.16) !important; /* stronger soft orange */
  color: #e65100 !important;
  border: 1px solid rgba(255,152,0,0.2) !important;
}
.contract-none {
  color: #6c757d;
  background: transparent !important;
}

.badge { vertical-align: middle; }

/* Make success badges light and semi-transparent for a softer look */
.badge.bg-success {
  /* light green background with darker green text for Signed badge */
  background-color: rgba(76, 175, 80, 0.12) !important; /* lighter soft green */
  color: #1b5e20 !important; /* darker green text */
  border: 1px solid rgba(76,175,80,0.18) !important;
}
}

@media (min-width: 577px) {
  .d-flex.toolbar-stack { flex-direction: row; gap: 0; }
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Modern sidebar styling */
.sidebar {
  padding: 1rem;
  border: 0; /* remove extra border to keep card-like look */
  box-shadow: 0 6px 18px rgba(20,20,20,0.04);
}

.sidebar .nav {
  gap: .25rem;
}

.sidebar .nav-link {
  color: #495057; /* neutral dark gray */
  padding: .55rem .6rem;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.sidebar .nav-link svg {
  flex-shrink: 0;
  color: inherit; /* use link color for icons */
}

.sidebar .nav-link:hover {
  background-color: rgba(0,0,0,0.04);
  color: #212529;
  transform: translateX(2px);
  text-decoration: none;
}

.sidebar .nav-item .collapse .nav-link {
  padding-left: 1.1rem;
  font-size: .95rem;
}

.sidebar .nav-link.active, .sidebar .nav-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(108,117,125,0.08), rgba(108,117,125,0.03));
  color: #212529;
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 #6c757d; /* left accent bar */
}

.sidebar .caret {
  font-size: .9rem;
  opacity: .7;
  transition: transform 180ms ease;
}

.sidebar .collapse.show + .caret,
.sidebar a[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

/* Navbar text should be black for contrast */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-item {
  color: #000 !important;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover,
.navbar .dropdown-item:hover {
  color: #111 !important;
}

/* Mobile: hide main nav toggler and show only user item */
@media (max-width: 767px) {
  /* hide the right-side nav toggler button (collapse control) */
  .navbar .navbar-toggler[aria-controls="mainNav"] { display: none; }

  /* hide non-user nav items in the collapsed area, keep user item visible on header */
  .navbar .navbar-nav > .nav-item:not(.user-item) { display: none !important; }

  /* ensure user-item shows and aligns to right */
  .navbar .navbar-nav .user-item { display: block !important; }
}

/* Mobile: enable smooth touch scrolling and hide visible scrollbars while preserving touch scroll */
@media (max-width: 767px) {
  html, body {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  .table-responsive-wrapper, .table-responsive, .table-responsive .table {
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
  }

  /* Hide WebKit scrollbars while allowing touch scroll */
  .table-responsive-wrapper::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar,
  .table-responsive .table::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}
@media (max-width: 767px) {
  html { font-size: 120%; }
}

/* Make sidebar sticky on larger screens */
@media (min-width: 768px) {
  aside { position: sticky; top: 1.25rem; align-self: flex-start; }
}

/* Link color override: use gray instead of default blue */
a, .nav-link, .btn-link {
  color: #6c757d; /* gray */
}

a:hover, a:focus, .nav-link:hover, .btn-link:hover {
  color: #495057; /* darker gray on hover */
  text-decoration: underline;
}