/* active-onsite.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pg-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pg-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pg-search-wrap {
  position: relative;
  margin-bottom: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: var(--card-shadow);
}
.pg-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
}
.pg-search-input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: transparent;
  outline: none;
  color: var(--text-dark);
}
.pg-search-input::placeholder {
  color: var(--text-muted);
}
.pg-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
}
.pg-table thead {
  background: var(--sidebar-bg);
}
.pg-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.pg-table tbody tr:last-child {
  border-bottom: none;
}
.pg-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.pg-table tbody td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.op-id-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.op-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.op-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.op-name {
  font-weight: 600;
  font-size: 14px;
}
.op-phone-sm {
  font-size: 12px;
  color: var(--text-muted);
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.op-project {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dark);
}
.op-project i {
  color: var(--text-muted);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.active {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
}
.tbl-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.no-results {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  font-size: 14px;
}
@media (max-width: 768px) {
  .pg-table thead {
    display: none;
  }
  .pg-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pg-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 13px;
  }
  .pg-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

/* ================================================
   all-operatives.css — All Operatives Page
   ================================================ */

/* Logo box */
.ao-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ao-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}

/* ── Page Header ── */
.ao-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.ao-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.ao-page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

/* ── Invite Button ── */
.ao-invite-btn {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}
.ao-invite-btn:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.35);
}

/* ── Alert Banner ── */
.ao-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(253, 126, 20, 0.06);
  border: 1px solid rgba(253, 126, 20, 0.28);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #854d0e;
  line-height: 1.5;
}
.ao-alert-icon {
  color: #fd7e14;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.ao-alert-sub {
  font-size: 13px;
  opacity: 0.85;
}

/* ── Search & Filter Row ── */
.ao-search-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ao-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.ao-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
  pointer-events: none;
}
.ao-search-input {
  width: 100%;
  padding: 11px 14px 11px 42px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  color: var(--text-dark);
  outline: none;
  transition: all 0.25s ease;
}
.ao-search-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}
.ao-search-input::placeholder {
  color: var(--text-muted);
}

.ao-filter-select {
  padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
  min-width: 150px;
  transition: all 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.ao-filter-select:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* ── Stats Cards ── */
.ao-stat-card {
  background: white;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}
.ao-stat-card:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-4px);
  border-color: var(--primary-color);
}
.ao-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.ao-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}
.ao-stat-value.ao-green {
  color: var(--primary-color);
}
.ao-stat-value.ao-orange {
  color: #fd7e14;
}

/* ── Table Card ── */
.ao-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* ── Data Table ── */
.ao-table {
  width: 100%;
  border-collapse: collapse;
}
.ao-table thead {
  background: var(--sidebar-bg);
}
.ao-table thead th {
  padding: 13px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.ao-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}
.ao-table tbody tr:last-child {
  border-bottom: none;
}
.ao-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.ao-table tbody td {
  padding: 15px 16px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}

/* Operative ID */
.ao-op-id {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Name Cell */
.ao-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ao-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ao-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  color: var(--text-dark);
}
.ao-phone {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Role */
.ao-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dark);
}

/* Project */
.ao-project {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dark);
}
.ao-project.ao-unassigned {
  color: var(--text-muted);
  font-style: italic;
}

/* Pay */
.ao-pay {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

/* Status Badges */
.ao-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.ao-status.active {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.ao-status.inactive {
  background: rgba(108, 117, 125, 0.12);
  color: #6c757d;
}
.ao-status.pending {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}

/* Clock time */
.ao-clock {
  font-size: 13px;
  color: var(--text-dark);
}
.ao-clock.ao-muted {
  color: var(--text-muted);
}

/* View Button */
.ao-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.ao-view-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateX(3px);
}

/* No results */
.ao-no-results {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 14px;
}
.ao-no-results i {
  font-size: 28px;
  margin-bottom: 10px;
  display: block;
  opacity: 0.4;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .ao-table th:nth-child(7),
  .ao-table td:nth-child(7) {
    display: none;
  }
}
@media (max-width: 768px) {
  .ao-page-title {
    font-size: 22px;
  }
  .ao-stat-value {
    font-size: 26px;
  }
  .ao-table thead {
    display: none;
  }
  .ao-table tbody tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
  }
  .ao-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border: none;
    font-size: 13px;
  }
  .ao-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}
@media (max-width: 576px) {
  .ao-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .ao-invite-btn {
    width: 100%;
    justify-content: center;
  }
  .ao-search-row {
    flex-direction: column;
  }
  .ao-filter-select {
    width: 100%;
  }
}

/* approval-queue.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pg-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pg-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pg-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.pg-alert.blue {
  background: rgba(13, 110, 253, 0.05);
  border: 1px solid rgba(13, 110, 253, 0.2);
  color: #084298;
}
.pg-alert-icon.blue {
  color: #0d6efd;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pg-alert strong {
  display: block;
  margin-bottom: 2px;
}
.pg-alert span {
  font-size: 13px;
  opacity: 0.9;
}
.pg-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
}
.pg-table thead {
  background: var(--sidebar-bg);
}
.pg-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.pg-table tbody tr:last-child {
  border-bottom: none;
}
.pg-table tbody tr:hover {
  background: rgba(13, 110, 253, 0.06);
}
.pg-table tbody td {
  padding: 18px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.op-id-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.op-name {
  font-weight: 600;
  font-size: 15px;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.aq-contact {
  font-size: 14px;
  color: var(--text-dark);
}
.aq-contact-phone {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.date-txt {
  font-size: 13px;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
}
.tbl-btn.review {
  border-color: #0d6efd;
  color: #0d6efd;
}
.tbl-btn.review:hover {
  background: #0d6efd;
  color: white;
}
@media (max-width: 768px) {
  .pg-table thead {
    display: none;
  }
  .pg-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pg-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    border: none;
    font-size: 13px;
  }
  .pg-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 5px;
}

.page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

.action-button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 166, 81, 0.2);
}

.action-button:hover {
  background: var(--secondary-color);
  box-shadow: 0 4px 12px rgba(0, 166, 81, 0.3);
  transform: translateY(-2px);
}

/* Stats Cards for Clients Page */
.client-stats-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  height: 100%;
}

.client-stats-card:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

.client-stats-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.client-stats-icon.blue {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.client-stats-icon.green {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}

.client-stats-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.client-stats-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.client-stats-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

/* Data Table */
.data-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.table-responsive {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  margin: 0;
}

.data-table thead {
  background: var(--sidebar-bg);
}

.data-table thead th {
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

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

.data-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}

.data-table tbody td {
  padding: 20px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}

.client-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 12px;
  flex-shrink: 0;
}

.client-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.client-id {
  font-size: 12px;
  color: var(--text-muted);
}

.contact-info {
  display: flex;
  flex-direction: column;
}

.contact-name {
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.contact-email {
  font-size: 12px;
  color: var(--text-muted);
}

.phone-number {
  color: var(--text-dark);
  font-weight: 500;
}

.address-text {
  color: var(--text-dark);
  max-width: 300px;
  line-height: 1.4;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 6px 12px;
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
}

.manage-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

.manage-button:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateX(4px);
}

.manage-button i {
  font-size: 16px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .address-text {
    max-width: 200px;
  }
}

@media (max-width: 991px) {
  .data-table thead th,
  .data-table tbody td {
    padding: 12px 16px;
  }

  .client-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: 24px;
  }

  .client-stats-value {
    font-size: 28px;
  }

  /* Stack table for mobile */
  .data-table thead {
    display: none;
  }

  .data-table tbody tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
  }

  .data-table tbody td {
    display: block;
    padding: 8px 0;
    border: none;
  }

  .data-table tbody td:before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
  }

  .address-text {
    max-width: 100%;
  }
}

/* dashboard.css - Complete responsive dashboard styles */

/* ── Stats Cards ── */
.dash-stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  height: 100%;
}

.dash-stat-card:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

.dash-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 14px;
}

.dash-stat-icon.blue {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.dash-stat-icon.green {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}

.dash-stat-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.dash-stat-icon.orange {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}

.dash-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 500;
}

.dash-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

/* ── Alert Cards (Awaiting Verification, Inductions, Timesheets) ── */
.dash-alert-card {
  background: white;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dash-alert-card.yellow {
  border-left: 4px solid #ffc107;
}

.dash-alert-card.purple {
  border-left: 4px solid #6f42c1;
}

.dash-alert-card.orange {
  border-left: 4px solid #fd7e14;
}

.dash-alert-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.dash-alert-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.dash-alert-icon.yellow {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.dash-alert-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.dash-alert-icon.orange {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}

.dash-alert-info {
  flex: 1;
  min-width: 0;
}

.dash-alert-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 3px;
}

.dash-alert-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.dash-alert-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.dash-alert-badge.yellow {
  background: rgba(255, 193, 7, 0.15);
  color: #ffc107;
}

.dash-alert-badge.purple {
  background: rgba(111, 66, 193, 0.15);
  color: #6f42c1;
}

.dash-alert-badge.orange {
  background: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
}

.dash-alert-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-alert-item {
  background: var(--sidebar-bg);
  padding: 12px 14px;
  border-radius: 8px;
  transition: all 0.2s;
}

.dash-alert-item:hover {
  background: #e9ecef;
  transform: translateX(3px);
}

.dash-alert-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.dash-alert-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.dash-alert-id {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.dash-alert-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.dash-alert-item-details span {
  display: inline-flex;
  align-items: center;
}

.dash-alert-item-details span:not(:last-child)::after {
  content: "•";
  margin-left: 8px;
  color: var(--border-color);
}

.dash-alert-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  margin-top: auto;
}

.dash-alert-link:hover {
  color: var(--secondary-color);
  transform: translateX(3px);
}

.dash-alert-link::after {
  content: "→";
  font-size: 16px;
}

/* ── Section Cards (Recent Activity, Quick Actions) ── */
.dash-section-card {
  background: white;
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: var(--card-shadow);
  height: 100%;
}

.dash-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 20px;
}

/* ── Recent Activity ── */
.dash-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-activity-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s;
}

.dash-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dash-activity-item:hover {
  background: var(--sidebar-bg);
  margin: 0 -26px;
  padding: 14px 26px;
  border-radius: 8px;
}

.dash-activity-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.dash-activity-icon.success {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}

.dash-activity-icon.info {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}

.dash-activity-icon.warning {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
}

.dash-activity-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.dash-activity-content {
  flex: 1;
  min-width: 0;
}

.dash-activity-text {
  font-size: 14px;
  color: var(--text-dark);
  margin: 0 0 4px;
  line-height: 1.4;
}

.dash-activity-text strong {
  font-weight: 600;
}

.dash-activity-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Quick Actions ── */
.dash-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dash-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: white;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  text-align: center;
}

.dash-quick-action:hover {
  border-color: var(--primary-color);
  background: rgba(0, 166, 81, 0.06);
  color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: var(--hover-shadow);
}

.dash-quick-action i {
  font-size: 28px;
  color: var(--primary-color);
}

.dash-quick-action:hover i {
  transform: scale(1.1);
}

/* ── Responsive Breakpoints ── */

/* Tablets and below */
@media (max-width: 991px) {
  .dash-stat-value {
    font-size: 28px;
  }

  .dash-alert-title {
    font-size: 15px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .dashboard-title {
    font-size: 24px;
  }

  .dash-stat-card {
    padding: 18px 20px;
  }

  .dash-stat-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }

  .dash-stat-value {
    font-size: 26px;
  }

  .dash-alert-card {
    padding: 18px 20px;
  }

  .dash-alert-title {
    font-size: 14px;
  }

  .dash-alert-badge {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .dash-section-card {
    padding: 20px 18px;
  }

  .dash-section-title {
    font-size: 16px;
  }

  .dash-activity-item:hover {
    margin: 0 -18px;
    padding: 14px 18px;
  }

  .dash-quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Small mobile */
@media (max-width: 576px) {
  .dash-stat-card {
    padding: 16px 18px;
  }

  .dash-stat-label {
    font-size: 12px;
  }

  .dash-stat-value {
    font-size: 24px;
  }

  .dash-alert-item {
    padding: 10px 12px;
  }

  .dash-alert-name {
    font-size: 13px;
  }

  .dash-alert-item-details {
    font-size: 11px;
    flex-direction: column;
    gap: 4px;
  }

  .dash-alert-item-details span::after {
    display: none;
  }

  .dash-activity-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .dash-activity-text {
    font-size: 13px;
  }

  .dash-quick-action {
    padding: 20px 14px;
    font-size: 13px;
  }

  .dash-quick-action i {
    font-size: 24px;
  }
}

.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.um-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.um-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.um-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.um-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #0d6efd;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.um-add-btn:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}
.um-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.um-search-wrap {
  position: relative;
  flex: 1;
  min-width: 250px;
}
.um-search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 15px;
}
.um-search-input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  outline: none;
}
.um-search-input:focus {
  border-color: #0d6efd;
}
.um-filter-select {
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  outline: none;
  cursor: pointer;
  min-width: 150px;
}
.um-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  margin-bottom: 20px;
}
.um-table {
  width: 100%;
  border-collapse: collapse;
}
.um-table thead {
  background: var(--sidebar-bg);
}
.um-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.um-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.um-table tbody tr:last-child {
  border-bottom: none;
}
.um-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.um-table tbody td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.um-uid {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.um-role {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.um-role.employee {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.um-role.supervisor {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.um-role.manager {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.um-role.admin {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.um-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.um-status.active {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.um-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.um-action-btn:hover {
  background: var(--sidebar-bg);
}
.um-stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--card-shadow);
}
.um-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.um-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
}
@media (max-width: 768px) {
  .um-filters {
    flex-direction: column;
  }
  .um-filter-select {
    width: 100%;
  }
  .um-table thead {
    display: none;
  }
  .um-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .um-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 13px;
  }
  .um-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
  }
}

/* settings.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}

/* Header */
.settings-header {
  margin-bottom: 24px;
}
.settings-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.settings-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* Tabs */
.settings-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border-color);
  flex-wrap: wrap;
}
.settings-tab {
  padding: 12px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s;
  white-space: nowrap;
}
.settings-tab:hover {
  color: var(--text-dark);
  background: rgba(0, 0, 0, 0.02);
}
.settings-tab.active {
  color: #0d6efd;
  border-bottom-color: #0d6efd;
}
.settings-tab i {
  font-size: 16px;
}

/* Tab Content */
.settings-tab-content {
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Section */
.settings-section {
  margin-bottom: 28px;
}
.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.section-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 24px;
}

/* Notification Cards */
.notification-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}
.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.notification-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.notification-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.notification-body {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* Email Preview */
.email-preview {
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
}
.email-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.email-preview-content {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dark);
}
.email-preview-content p {
  margin: 0 0 10px;
}
.email-preview-content p:last-child {
  margin-bottom: 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #cbd5e1;
  border-radius: 34px;
  transition: 0.3s;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
  background: #0d6efd;
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Inputs */
.input-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.settings-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  outline: none;
  background: white;
  transition: all 0.25s;
}
.settings-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* Deadline Cards */
.deadline-card {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.deadline-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.deadline-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  outline: none;
  cursor: pointer;
  transition: all 0.25s;
}
.deadline-select:focus {
  border-color: #0d6efd;
}
.deadline-help {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Role Sections */
.role-section {
  background: white;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--card-shadow);
}
.role-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 16px;
}

/* Permissions List */
.permissions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.permission-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.permission-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.permission-name {
  font-size: 14px;
  color: var(--text-dark);
}

/* Actions */
.settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 24px 0;
  border-top: 2px solid var(--border-color);
}
.settings-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.3s;
}
.settings-btn.outline {
  background: white;
  border: 1.5px solid var(--border-color);
  color: var(--text-dark);
}
.settings-btn.outline:hover {
  border-color: var(--text-dark);
  background: var(--sidebar-bg);
}
.settings-btn.primary {
  background: #0d6efd;
  color: white;
  border: 1.5px solid #0d6efd;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.settings-btn.primary:hover {
  background: #0b5ed7;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .settings-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }
  .notification-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .settings-actions {
    flex-direction: column;
  }
  .settings-btn {
    width: 100%;
    justify-content: center;
  }
}

/* induction-signoff.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pg-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pg-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pg-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.pg-alert.purple {
  background: rgba(111, 66, 193, 0.05);
  border: 1px solid rgba(111, 66, 193, 0.2);
  color: #4a1c8c;
}
.pg-alert-icon.purple {
  color: #6f42c1;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pg-alert strong {
  display: block;
  margin-bottom: 2px;
}
.pg-alert span {
  font-size: 13px;
  opacity: 0.9;
}
.pg-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
}
.pg-table thead {
  background: var(--sidebar-bg);
}
.pg-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.pg-table tbody tr:last-child {
  border-bottom: none;
}
.pg-table tbody tr:hover {
  background: rgba(111, 66, 193, 0.06);
}
.pg-table tbody td {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.op-id-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.op-name {
  font-weight: 600;
  font-size: 14px;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.ind-site {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-dark);
}
.ind-site i {
  color: var(--text-muted);
}
.ind-approver {
  font-size: 14px;
  font-weight: 500;
}
.date-txt {
  font-size: 13px;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
}
.tbl-btn.signoff {
  border: 1.5px solid #6f42c1;
  background: white;
  color: #6f42c1;
}
.tbl-btn.signoff:hover {
  background: #6f42c1;
  color: white;
}
@media (max-width: 768px) {
  .pg-table thead {
    display: none;
  }
  .pg-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pg-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    border: none;
    font-size: 13px;
  }
  .pg-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

/* reports.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.rpt-header {
  margin-bottom: 24px;
}
.rpt-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.rpt-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.rpt-filters-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.rpt-filter-select {
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
  min-width: 180px;
  flex: 1;
}
.rpt-filter-select:focus {
  border-color: #0d6efd;
}
/* Report Cards */
.rpt-card {
  background: white;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s;
  border: 1px solid transparent;
  flex-wrap: wrap;
}
.rpt-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hover-shadow);
  border-color: var(--primary-color);
}
.rpt-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.rpt-card-icon.green {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.rpt-card-icon.blue {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.rpt-card-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.rpt-card-icon.orange {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}
.rpt-card-body {
  flex: 1;
  min-width: 0;
}
.rpt-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.rpt-card-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.rpt-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.rpt-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.rpt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
  border: none;
}
.rpt-btn.outline {
  background: white;
  border: 1.5px solid var(--border-color);
  color: var(--text-dark);
}
.rpt-btn.outline:hover {
  border-color: var(--text-dark);
  background: var(--sidebar-bg);
}
.rpt-btn.primary {
  background: #0d6efd;
  color: white;
  border: 1.5px solid #0d6efd;
}
.rpt-btn.primary:hover {
  background: #0b5ed7;
}
/* Recent Reports */
.rpt-recent-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
}
.rpt-recent-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.rpt-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rpt-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.rpt-recent-item:last-child {
  border-bottom: none;
}
.rpt-recent-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.rpt-recent-icon {
  font-size: 22px;
  color: #0d6efd;
  flex-shrink: 0;
}
.rpt-recent-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.rpt-recent-date {
  font-size: 12px;
  color: var(--text-muted);
}
.rpt-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s;
  font-size: 16px;
}
.rpt-icon-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
@media (max-width: 768px) {
  .rpt-filters-row {
    flex-direction: column;
  }
  .rpt-filter-select {
    width: 100%;
  }
  .rpt-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

.btn-new-project {
  background: #0d6efd;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.btn-new-project:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.35);
}

.proj-stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
  border: 1px solid transparent;
  transition: all 0.3s ease;
  height: 100%;
}
.proj-stat-card:hover {
  box-shadow: var(--hover-shadow);
  transform: translateY(-4px);
  border-color: var(--primary-color);
}
.proj-stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 10px;
}
.proj-stat-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}
.proj-stat-value.blue {
  color: #0d6efd;
}

.table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.proj-table {
  width: 100%;
  border-collapse: collapse;
}
.proj-table thead {
  background: var(--sidebar-bg);
}
.proj-table thead th {
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.proj-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.proj-table tbody tr:last-child {
  border-bottom: none;
}
.proj-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.proj-table tbody td {
  padding: 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}

.proj-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 3px;
}
.proj-id {
  font-size: 12px;
  color: var(--text-muted);
}

.badge-type {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-scaffold {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.badge-brickwork {
  background: rgba(253, 126, 20, 0.12);
  color: #e07a0e;
}
.badge-general {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}

.site-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.site-cell i {
  color: var(--text-muted);
  font-size: 14px;
}

.onsite-num {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}
.onsite-of {
  font-size: 11px;
  color: var(--text-muted);
}

.scanner-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.s-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.s-dot.on {
  background: #28a745;
  box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.18);
}
.s-dot.off {
  background: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
}
.scanner-wrap.on {
  color: #28a745;
}
.scanner-wrap.off {
  color: #dc3545;
}

.pay-time {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.btn-dash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn-dash:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateX(3px);
}

@media (max-width: 1100px) {
  .proj-table th:nth-child(7),
  .proj-table td:nth-child(7) {
    display: none;
  }
}
@media (max-width: 768px) {
  .page-title {
    font-size: 22px;
  }
  .proj-stat-value {
    font-size: 26px;
  }
  .proj-table thead {
    display: none;
  }
  .proj-table tbody tr {
    display: block;
    margin-bottom: 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
  }
  .proj-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border: none;
    font-size: 13px;
  }
  .proj-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

/* ================================================
   modal.css — DVG Workforce Management
   Reusable modal styles for all pages.
   Just add  <link rel="stylesheet" href="modal.css">
   to any page that uses a modal popup.
   ================================================ */

/* ── Modal shell ── */
.cp-modal {
  border: none;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  font-family: "Inter", sans-serif;
}

/* ── Modal Header ── */
.cp-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 26px 28px 20px;
  border-bottom: 1px solid var(--border-color);
}

.cp-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
  line-height: 1.3;
}

.cp-modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.cp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f3f5;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 12px;
  transition: all 0.2s ease;
}
.cp-close:hover {
  background: #e9ecef;
  color: var(--text-dark);
  transform: scale(1.08);
}

/* ── Modal Body ── */
.cp-modal-body {
  padding: 26px 28px;
  overflow-y: auto;
}

/* ── Field Group ── */
.cp-field-group {
  margin-bottom: 20px;
}

.cp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.cp-required {
  color: #dc3545;
  margin-left: 2px;
}

.cp-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
}

/* ── Inputs & Selects ── */
.cp-input,
.cp-select {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background: #f8f9fa;
  outline: none;
  transition: all 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
}

/* Custom dropdown arrow for selects */
.cp-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* Focus state */
.cp-input:focus,
.cp-select:focus {
  border-color: #0d6efd;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
}

/* Error state */
.cp-input.is-invalid,
.cp-select.is-invalid {
  border-color: #dc3545;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* ── Hint text ── */
.cp-hint {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ── Error message ── */
.cp-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 5px;
  font-weight: 500;
}
.cp-error.visible {
  display: block;
}

/* ── Section divider title ── */
.cp-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 24px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

/* ── Info notice box ── */
.cp-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(13, 110, 253, 0.06);
  border: 1px solid rgba(13, 110, 253, 0.18);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 24px;
  font-size: 13px;
  color: #1a5fb4;
  line-height: 1.55;
}

.cp-notice-icon {
  color: #0d6efd;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Modal Footer ── */
.cp-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 18px 28px;
  border-top: 1px solid var(--border-color);
}

/* Cancel button */
.cp-btn-cancel {
  padding: 10px 24px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: white;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: "Inter", sans-serif;
}
.cp-btn-cancel:hover {
  background: #f1f3f5;
  border-color: #adb5bd;
}

/* Submit button */
.cp-btn-submit {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  background: #0d6efd;
  font-size: 14px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: "Inter", sans-serif;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.cp-btn-submit:hover {
  background: #0b5ed7;
  box-shadow: 0 4px 14px rgba(13, 110, 253, 0.35);
  transform: translateY(-1px);
}
.cp-btn-submit:disabled {
  background: #6c757d;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Smooth open/close animation ── */
.modal.fade .modal-dialog {
  transform: translateY(-18px) scale(0.97);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.25s ease;
}
.modal.show .modal-dialog {
  transform: translateY(0) scale(1);
}

/* ── Toast notification ── */
.dvg-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.3s ease;
  max-width: 340px;
}
.dvg-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.dvg-toast.success {
  background: #00a651;
}
.dvg-toast.error {
  background: #dc3545;
}
.dvg-toast i {
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 576px) {
  .cp-modal-header {
    padding: 18px 16px 16px;
  }
  .cp-modal-body {
    padding: 18px 16px;
  }
  .cp-modal-footer {
    padding: 14px 16px;
    flex-direction: column;
    gap: 10px;
  }
  .cp-btn-cancel,
  .cp-btn-submit {
    width: 100%;
    justify-content: center;
  }
  .cp-modal-title {
    font-size: 18px;
  }
}

/* manage-invites.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pg-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pg-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}
.pg-action-btn.blue {
  background: #0d6efd;
  color: white;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.pg-action-btn.blue:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}
.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--card-shadow);
  height: 100%;
}
.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
}
.stat-value.orange {
  color: #fd7e14;
}
.stat-value.blue {
  color: #0d6efd;
}
.stat-value.purple {
  color: #6f42c1;
}
.stat-value.green {
  color: #00a651;
}
/* Pipeline */
.pipeline-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
}
.pipeline-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 20px;
}
.pipeline-track {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.pipeline-track::-webkit-scrollbar {
  display: none;
}
.pipeline-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.pipeline-step-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.pipeline-step-icon.orange {
  background: rgba(253, 126, 20, 0.12);
  color: #fd7e14;
}
.pipeline-step-icon.blue {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.pipeline-step-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.pipeline-step-icon.green {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.pipeline-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.pipeline-step-sub {
  font-size: 12px;
  color: var(--text-muted);
}
.pipeline-connector {
  flex: 1;
  min-width: 50px;
  height: 2px;
  background: var(--border-color);
  margin: 0 8px;
}
/* Table */
.pg-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
}
.pg-table thead {
  background: var(--sidebar-bg);
}
.pg-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.pg-table tbody tr:last-child {
  border-bottom: none;
}
.pg-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.pg-table tbody td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.op-id-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.op-name {
  font-weight: 600;
  font-size: 14px;
}
.op-contact-sm {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.date-txt {
  font-size: 13px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.awaiting-signup {
  background: rgba(253, 126, 20, 0.12);
  color: #c85a00;
}
.status-badge.signup-complete {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.status-badge.supervisor-approved {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.status-badge.completed {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.status-badge.rejected {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.tbl-btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}
.tbl-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.tbl-btn.copy {
  color: var(--text-muted);
}
.tbl-btn.resend {
  color: var(--text-muted);
}
@media (max-width: 992px) {
  .pg-table th:nth-child(5),
  .pg-table td:nth-child(5),
  .pg-table th:nth-child(6),
  .pg-table td:nth-child(6) {
    display: none;
  }
}
@media (max-width: 768px) {
  .pg-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .pg-action-btn {
    width: 100%;
    justify-content: center;
  }
  .pipeline-track {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pipeline-connector {
    width: 2px;
    height: 20px;
    min-width: unset;
    margin: 0 22px;
  }
  .pg-table thead {
    display: none;
  }
  .pg-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pg-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    border: none;
    font-size: 13px;
  }
  .pg-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.ts-header {
  margin-bottom: 20px;
}
.ts-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.ts-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.ts-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.ts-select {
  padding: 10px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  outline: none;
  cursor: pointer;
  min-width: 200px;
}
.ts-cal-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: white;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.ts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.ts-btn.outline {
  background: white;
  border: 1.5px solid var(--border-color);
  color: var(--text-dark);
}
.ts-btn.outline:hover {
  background: var(--sidebar-bg);
}
.ts-info-card {
  background: white;
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.ts-info-text {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.6;
}
.ts-info-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.ts-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.orange-box {
  width: 16px;
  height: 16px;
  background: rgba(253, 126, 20, 0.3);
  border-radius: 3px;
}
.ts-legend-text {
  color: var(--text-muted);
}
.ts-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: auto;
  margin-bottom: 16px;
}
.ts-grid-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}
.ts-grid-table thead {
  background: var(--sidebar-bg);
}
.ts-grid-table thead th {
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  white-space: nowrap;
}
.ts-op-col {
  text-align: left !important;
  min-width: 160px;
}
.ts-total-col,
.ts-pay-col {
  background: rgba(13, 110, 253, 0.04);
}
.ts-grid-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.ts-grid-table tbody tr:last-child {
  border-bottom: none;
}
.ts-grid-table tbody td {
  padding: 12px;
  font-size: 12px;
  color: var(--text-dark);
  vertical-align: middle;
  text-align: center;
}
.ts-op-cell {
  text-align: left !important;
}
.ts-op-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.ts-op-role {
  font-size: 12px;
  color: var(--text-muted);
}
.ts-day-cell {
  background: rgba(240, 248, 255, 0.4);
  min-width: 100px;
}
.ts-day-cell.ts-off {
  background: white;
}
.ts-day-cell.ts-override {
  background: rgba(253, 126, 20, 0.15) !important;
}
.ts-time-in,
.ts-time-out {
  font-size: 11px;
  color: var(--text-muted);
}
.ts-hours {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 3px 0;
}
.ts-shift {
  font-size: 11px;
  color: var(--text-muted);
}
.ts-total-cell {
  background: rgba(13, 110, 253, 0.08);
  color: #0d6efd;
  font-weight: 700;
  font-size: 14px;
}
.ts-pay-cell {
  background: rgba(0, 166, 81, 0.06);
  color: #00a651;
  font-weight: 700;
  font-size: 14px;
}
.ts-footer-row {
  background: var(--sidebar-bg);
  border-top: 2px solid var(--border-color);
}
.ts-footer-row td {
  padding: 14px 12px;
  font-weight: 600;
}
.ts-grand-total {
  font-size: 15px !important;
  color: #00a651 !important;
}
.ts-notes-card {
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.ts-notes-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #084298;
  line-height: 1.8;
}
.ts-approve-bar {
  display: flex;
  justify-content: flex-end;
}
.ts-approve-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #00a651;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.3s;
}
.ts-approve-btn:hover {
  background: #008a45;
  transform: translateY(-2px);
}
@media (max-width: 992px) {
  .ts-table-card {
    overflow-x: scroll;
  }
}

/* onboarding.css */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.pg-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pg-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pg-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
}
.pg-action-btn.blue {
  background: #0d6efd;
  color: white;
  box-shadow: 0 2px 8px rgba(13, 110, 253, 0.25);
}
.pg-action-btn.blue:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}
.pg-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.pg-alert.orange {
  background: rgba(253, 126, 20, 0.06);
  border: 1px solid rgba(253, 126, 20, 0.28);
  color: #854d0e;
}
.pg-alert-icon.orange {
  color: #fd7e14;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.pg-alert strong {
  display: block;
  margin-bottom: 2px;
}
.pg-alert span {
  font-size: 13px;
  opacity: 0.9;
}
.pg-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pg-table {
  width: 100%;
  border-collapse: collapse;
}
.pg-table thead {
  background: var(--sidebar-bg);
}
.pg-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pg-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.pg-table tbody tr:last-child {
  border-bottom: none;
}
.pg-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.pg-table tbody td {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.op-id-txt {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.op-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.op-avatar-sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.op-name {
  font-weight: 600;
  font-size: 14px;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.op-contact {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.8;
}
.op-contact i {
  margin-right: 4px;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.status-badge.awaiting-supervisor {
  background: rgba(253, 126, 20, 0.1);
  color: #c85a00;
}
.status-badge.awaiting-onsite {
  background: rgba(253, 126, 20, 0.1);
  color: #c85a00;
}
.tbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 16px;
  border-radius: 7px;
  border: 1px solid var(--border-color);
  background: white;
  color: var(--text-dark);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  font-family: "Inter", sans-serif;
}
.tbl-btn.review {
  border-color: #0d6efd;
  color: #0d6efd;
}
.tbl-btn.review:hover {
  background: #0d6efd;
  color: white;
}
@media (max-width: 768px) {
  .pg-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .pg-action-btn {
    width: 100%;
    justify-content: center;
  }
  .pg-table thead {
    display: none;
  }
  .pg-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pg-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 7px 0;
    border: none;
    font-size: 13px;
  }
  .pg-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    flex-shrink: 0;
    margin-right: 10px;
  }
}

/* onsite-completion.css - Exact match to design */
.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}

/* Main wrapper */
.osc-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* Header Section */
.osc-header-section {
  text-align: center;
  margin-bottom: 30px;
}
.osc-logo {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
  color: white;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
.osc-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.osc-subtitle {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
}

/* Info Card */
.osc-info-card {
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 30px;
}
.osc-info-item {
  padding: 12px 0;
}
.osc-info-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.osc-info-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.osc-info-value.blue {
  color: #0d6efd;
}

/* Progress Steps */
.osc-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  gap: 8px;
}
.osc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.osc-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #9e9e9e;
  transition: all 0.3s;
}
.osc-step.done .osc-step-circle {
  background: #0d6efd;
  color: white;
  border-color: #0d6efd;
}
.osc-step.active .osc-step-circle {
  background: white;
  color: #9e9e9e;
  border-color: #9e9e9e;
}
.osc-step-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.osc-step-line {
  width: 60px;
  height: 2px;
  background: #e0e0e0;
  margin: 0 4px 20px;
}

/* Cards */
.osc-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
.osc-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.osc-card-intro {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Photo Area */
.osc-photo-area {
  margin-bottom: 16px;
}
.osc-photo-placeholder {
  background: #f5f7fa;
  border: 2px dashed #d0d5dd;
  border-radius: 12px;
  padding: 60px 30px;
  text-align: center;
}
.osc-photo-placeholder i {
  font-size: 56px;
  color: #9e9e9e;
  display: block;
  margin-bottom: 16px;
}
.osc-btn-camera i {
  font-size: 25px;
  color: #fff;
  margin-bottom: 0;
}
.osc-photo-placeholder p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.osc-btn-camera {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #0d6efd;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.3s;
}
.osc-btn-camera:hover {
  background: #0b5ed7;
  transform: translateY(-1px);
}
.osc-photo-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.osc-photo-preview img {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
}
.osc-btn-retake {
  display: block;
  margin: 12px auto 0;
  padding: 8px 18px;
  background: white;
  border: 1.5px solid var(--border-color);
  color: var(--text-dark);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
}
.osc-btn-retake:hover {
  border-color: var(--text-dark);
  background: var(--sidebar-bg);
}
.osc-instructions {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.osc-instructions strong {
  color: var(--text-dark);
}

/* Sections */
.osc-section {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-color);
}
.osc-section:last-child {
  border: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.osc-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Inputs */
.osc-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  outline: none;
  transition: all 0.25s;
}
.osc-input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}
.osc-input::placeholder {
  color: #9e9e9e;
}

/* Checkboxes */
.osc-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.osc-checkbox-input {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 1.5px solid #d0d5dd;
  border-radius: 4px;
  flex-shrink: 0;
}
.osc-checkbox label {
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  line-height: 1.4;
}

/* PPE List */
.osc-ppe-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Alert */
.osc-alert {
  background: rgba(253, 126, 20, 0.06);
  border: 1px solid rgba(253, 126, 20, 0.25);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.osc-alert i {
  font-size: 22px;
  color: #fd7e14;
  flex-shrink: 0;
  margin-top: 2px;
}
.osc-alert strong {
  display: block;
  font-size: 14px;
  color: #854d0e;
  margin-bottom: 3px;
}
.osc-alert span {
  font-size: 13px;
  color: #854d0e;
}

/* Complete Button */
.osc-btn-complete {
  width: 100%;
  padding: 15px;
  background: #00a651;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(0, 166, 81, 0.25);
}
.osc-btn-complete:hover {
  background: #008a45;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 166, 81, 0.35);
}
.osc-btn-complete:disabled {
  background: #9e9e9e;
  cursor: not-allowed;
  transform: none;
}

/* Success State */
.osc-alert.success {
  background: rgba(0, 166, 81, 0.06);
  border-color: rgba(0, 166, 81, 0.25);
}
.osc-alert.success i {
  color: #00a651;
}
.osc-alert.success strong,
.osc-alert.success span {
  color: #155724;
}

/* Responsive */
@media (max-width: 768px) {
  .osc-wrapper {
    padding: 20px 16px;
  }
  .osc-progress {
    flex-direction: column;
    gap: 12px;
  }
  .osc-step-line {
    width: 2px;
    height: 30px;
    margin: 0;
  }
  .osc-card {
    padding: 18px 20px;
  }
  .osc-photo-placeholder {
    padding: 40px 20px;
  }
}

/* Date Picker Styling */
.osc-input[type="date"] {
  position: relative;
  cursor: pointer;
}

/* Style for empty date inputs to show placeholder-like text */
.osc-input[type="date"].date-empty::-webkit-datetime-edit {
  color: transparent;
}
.osc-input[type="date"].date-empty:before {
  content: attr(placeholder);
  color: #9e9e9e;
  position: absolute;
  pointer-events: none;
}
.osc-input[type="date"]:focus.date-empty:before {
  content: "";
}

/* Calendar icon styling */
.osc-input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.osc-input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Expired date indicator */
.osc-input.date-expired {
  border-color: #dc3545 !important;
  background: rgba(220, 53, 69, 0.05);
}
.osc-input.date-expired:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
}

.dvg-logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #00a651, #006837);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dvg-logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}
.pay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.pay-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pay-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}
.pay-week-select {
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  background: white;
  outline: none;
  cursor: pointer;
}
.pay-stat-card {
  background: white;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pay-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.pay-stat-icon.blue {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.pay-stat-icon.purple {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.pay-stat-icon.green {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
.pay-stat-icon.orange {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}
.pay-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pay-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
}
.pay-master-card {
  background: linear-gradient(
    135deg,
    rgba(13, 110, 253, 0.06),
    rgba(111, 66, 193, 0.06)
  );
  border: 1.5px solid rgba(13, 110, 253, 0.2);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.pay-master-icon {
  width: 60px;
  height: 60px;
  background: #0d6efd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}
.pay-master-body {
  flex: 1;
  min-width: 250px;
}
.pay-master-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.pay-master-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.pay-master-meta {
  font-size: 12px;
  color: var(--text-muted);
}
.pay-master-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #0d6efd;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  transition: all 0.3s;
}
.pay-master-btn:hover {
  background: #0b5ed7;
  transform: translateY(-2px);
}
.pay-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pay-section-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.pay-div-card {
  background: white;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
  border-top: 4px solid transparent;
  transition: all 0.3s;
}
.pay-div-card.scaffold {
  border-color: #0d6efd;
}
.pay-div-card.brickwork {
  border-color: #fd7e14;
}
.pay-div-card.general {
  border-color: #6f42c1;
}
.pay-div-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--hover-shadow);
}
.pay-div-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.pay-div-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.pay-div-card.scaffold .pay-div-icon {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.pay-div-card.brickwork .pay-div-icon {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}
.pay-div-card.general .pay-div-icon {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.pay-div-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
}
.pay-div-proj {
  font-size: 12px;
  color: var(--text-muted);
}
.pay-div-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.pay-div-stats > div {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.pay-div-label {
  color: var(--text-muted);
}
.pay-div-num {
  font-weight: 600;
  color: var(--text-dark);
}
.pay-div-money {
  font-weight: 700;
  color: #00a651;
}
.pay-div-btn {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s;
}
.pay-div-card.scaffold .pay-div-btn {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, 0.2);
}
.pay-div-card.scaffold .pay-div-btn:hover {
  background: #0d6efd;
  color: white;
}
.pay-div-card.brickwork .pay-div-btn {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
  border: 1px solid rgba(253, 126, 20, 0.2);
}
.pay-div-card.brickwork .pay-div-btn:hover {
  background: #fd7e14;
  color: white;
}
.pay-div-card.general .pay-div-btn {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
  border: 1px solid rgba(111, 66, 193, 0.2);
}
.pay-div-card.general .pay-div-btn:hover {
  background: #6f42c1;
  color: white;
}
.pay-table-card {
  background: white;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pay-table {
  width: 100%;
  border-collapse: collapse;
}
.pay-table thead {
  background: var(--sidebar-bg);
}
.pay-table thead th {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.pay-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.pay-table tbody tr:last-child {
  border-bottom: none;
}
.pay-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.pay-table tbody td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.pay-proj-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.pay-proj-id {
  font-size: 12px;
  color: var(--text-muted);
}
.pay-type-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.pay-type-badge.scaffold {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
}
.pay-type-badge.brickwork {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}
.pay-type-badge.general {
  background: rgba(111, 66, 193, 0.1);
  color: #6f42c1;
}
.pay-money {
  color: #00a651;
}
.pay-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.pay-status.approved {
  background: rgba(0, 166, 81, 0.1);
  color: #00a651;
}
@media (max-width: 768px) {
  .pay-table thead {
    display: none;
  }
  .pay-table tbody tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px;
  }
  .pay-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    font-size: 13px;
  }
  .pay-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
  }
}

/* ================================================
   operative-profile.css — Operative Profile Page
   (Personal / Timesheets / Medical tabs)
   ================================================ */

.logo-box {
  width: 40px;
  height: 40px;
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box span {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -1px;
}

/* Back link */
.prof-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
  transition: all 0.25s ease;
}
.prof-back-link:hover {
  color: var(--primary-color);
  transform: translateX(-4px);
}

/* ── Profile Header Card ── */
.prof-header-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.prof-header-left {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 1;
  min-width: 0;
}
.prof-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.prof-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #0d6efd;
  color: white;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prof-online-dot {
  width: 14px;
  height: 14px;
  background: #28a745;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  right: 3px;
}
.prof-info {
  flex: 1;
  min-width: 0;
}
.prof-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.prof-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.prof-status-badge {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.prof-status-badge.active {
  background: rgba(0, 166, 81, 0.12);
  color: var(--primary-color);
}
.prof-meta {
  font-size: 14px;
  color: var(--text-muted);
}
.prof-dot {
  color: var(--text-muted);
}
.prof-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.prof-contacts i {
  margin-right: 4px;
}
.prof-project-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  color: var(--text-muted);
}
.prof-project-row strong {
  color: var(--text-dark);
}
.prof-project-row i {
  margin-right: 5px;
}

.prof-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  background: white;
  color: var(--text-dark);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
}
.prof-edit-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ── Tab Navigation ── */
.prof-tabs {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--card-shadow);
  margin-bottom: 20px;
  overflow-x: auto;
  gap: 2px;
}
.prof-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
}
.prof-tab:hover {
  color: var(--text-dark);
  background: var(--sidebar-bg);
}
.prof-tab.active {
  background: white;
  color: var(--text-dark);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
}

/* ── Section Cards ── */
.prof-section-card {
  background: white;
  border-radius: 12px;
  padding: 24px 28px;
  box-shadow: var(--card-shadow);
  margin-bottom: 16px;
}
.prof-section-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 20px;
}

/* ── Personal Tab ── */
.prof-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.prof-info-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.prof-info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.prof-address p {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text-dark);
}

/* ── Timesheets Tab ── */
.prof-ts-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(253, 126, 20, 0.06);
  border: 1px solid rgba(253, 126, 20, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #854d0e;
  line-height: 1.5;
}
.prof-ts-alert-icon {
  color: #fd7e14;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}
.ts-table thead {
  background: var(--sidebar-bg);
}
.ts-table thead th {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 2px solid var(--border-color);
  text-align: center;
  white-space: nowrap;
}
.ts-table thead th:first-child {
  text-align: left;
}
.ts-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.ts-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.ts-table tbody td {
  padding: 14px;
  font-size: 13px;
  color: var(--text-dark);
  vertical-align: middle;
  text-align: center;
}
.ts-site-name {
  font-weight: 600;
  text-align: left !important;
  white-space: nowrap;
}

.ts-day-cell {
  min-width: 90px;
}
.ts-day-cell.filled {
  background: rgba(240, 248, 255, 0.6);
}
.ts-day-cell.highlighted {
  background: rgba(255, 243, 205, 0.7);
}
.ts-inout {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.ts-hours {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 2px 0;
}
.ts-range {
  font-size: 11px;
  color: var(--text-muted);
}
.ts-dash {
  color: var(--text-muted);
  font-size: 16px;
}

.ts-total-col {
  background: rgba(13, 110, 253, 0.05);
  color: #0d6efd !important;
  font-weight: 600 !important;
  text-align: center;
}
.ts-pay-col {
  color: #dc3545 !important;
  font-weight: 600 !important;
  text-align: center;
}
.ts-total-hours {
  font-size: 14px !important;
}
.ts-total-pay {
  font-size: 14px !important;
}

.ts-footer-row {
  background: var(--sidebar-bg);
  border-top: 2px solid var(--border-color);
}
.ts-footer-row td {
  padding: 14px;
  font-size: 13px;
}
.ts-grand-total {
  font-size: 15px !important;
  color: #dc3545 !important;
}

/* ── Medical Tab ── */
.prof-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.15);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.prof-doc-link:hover {
  background: rgba(13, 110, 253, 0.08);
  border-color: rgba(13, 110, 253, 0.3);
}
.prof-doc-icon {
  font-size: 22px;
  color: #0d6efd;
  flex-shrink: 0;
}
.prof-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #0d6efd;
}
.prof-doc-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.med-conditions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.med-condition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.med-condition-row:nth-child(even) {
  padding-left: 24px;
}
.med-condition-row:last-child,
.med-condition-row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
.med-condition-name {
  font-size: 14px;
  color: var(--text-dark);
}
.med-badge {
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.med-badge.no {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}
.med-badge.yes {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.med-sub-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.med-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}
.med-tag.green {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}

.med-consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14px;
}
.med-consent-given {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 13px;
}

.med-signature {
  padding-top: 16px;
}
.med-sig-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.med-sig-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
}
.med-sig-date {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Training Tab ── */
.tr-table {
  width: 100%;
  border-collapse: collapse;
}
.tr-table thead {
  background: var(--sidebar-bg);
}
.tr-table thead th {
  padding: 13px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border-color);
  white-space: nowrap;
}
.tr-table tbody tr {
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.tr-table tbody tr:last-child {
  border-bottom: none;
}
.tr-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.tr-table tbody td {
  padding: 16px 18px;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.tr-cert-name {
  font-weight: 500;
}
.tr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.tr-badge.valid {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}
.tr-badge.expiring {
  background: rgba(253, 126, 20, 0.1);
  color: #fd7e14;
}
.tr-badge.expired {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}
.tr-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  background: white;
}
.tr-download-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.tr-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 32px;
}
.tr-info-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.tr-info-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}

/* ── Induction Tab ── */
.ind-doc-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(111, 66, 193, 0.04);
  border: 1px solid rgba(111, 66, 193, 0.18);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.ind-doc-link:hover {
  background: rgba(111, 66, 193, 0.08);
  border-color: rgba(111, 66, 193, 0.3);
}
.ind-doc-icon {
  font-size: 22px;
  color: #6f42c1;
  flex-shrink: 0;
}
.ind-doc-name {
  font-size: 14px;
  font-weight: 600;
  color: #6f42c1;
}
.ind-doc-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.ind-check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.ind-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-color);
}
.ind-check-row:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--border-color);
}
.ind-check-row:last-child,
.ind-check-row:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}
/* handle odd last item spanning full width */
.ind-check-row:last-child:nth-child(odd) {
  grid-column: 1/-1;
  border-left: none;
  padding-left: 0;
}
.ind-check-label {
  font-size: 14px;
  color: var(--text-dark);
}

.ind-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.ind-badge.yes {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}
.ind-badge.covered {
  background: rgba(0, 166, 81, 0.1);
  color: var(--primary-color);
}

/* Equipment table */
.ind-equip-table {
  width: 100%;
  border-collapse: collapse;
}
.ind-equip-table thead tr {
  border-bottom: 2px solid var(--border-color);
}
.ind-equip-table thead th {
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ind-equip-table thead th:last-child {
  text-align: right;
}
.ind-equip-table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.ind-equip-table tbody tr:last-child {
  border-bottom: none;
}
.ind-equip-table tbody td {
  padding: 13px 0;
  font-size: 14px;
  color: var(--text-dark);
  vertical-align: middle;
}
.ind-equip-table tbody td:nth-child(2) {
  text-align: center;
}
.ind-equip-table tbody td:last-child {
  text-align: right;
}

.ind-return {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}
.ind-return.required {
  background: rgba(13, 110, 253, 0.1);
  color: #0d6efd;
  border: 1px solid rgba(13, 110, 253, 0.2);
}
.ind-return.not-required {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

/* Access Cards */
.ind-access-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ind-access-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
}
.ind-access-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Signatures */
.ind-sig-card {
  border-radius: 10px;
  padding: 18px 20px;
  border: 1.5px solid var(--border-color);
}
.ind-sig-card.operative {
  border-color: rgba(13, 110, 253, 0.25);
  background: rgba(13, 110, 253, 0.03);
}
.ind-sig-card.inductor {
  border-color: rgba(111, 66, 193, 0.25);
  background: rgba(111, 66, 193, 0.03);
}
.ind-sig-role {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}
.ind-sig-card.operative .ind-sig-role {
  color: #0d6efd;
}
.ind-sig-card.inductor .ind-sig-role {
  color: #6f42c1;
}
.ind-sig-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.ind-sig-date {
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Notes Tab ── */
.notes-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.notes-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Inter", sans-serif;
  border-radius: 6px;
}
.notes-add-btn:hover {
  color: var(--primary-color);
  background: rgba(0, 166, 81, 0.06);
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notes-item {
  background: rgba(13, 110, 253, 0.04);
  border: 1px solid rgba(13, 110, 253, 0.12);
  border-radius: 10px;
  padding: 14px 18px;
}
.notes-item.private {
  background: rgba(220, 53, 69, 0.04);
  border-color: rgba(220, 53, 69, 0.14);
}
.notes-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.notes-avatar-icon {
  font-size: 16px;
  color: #0d6efd;
  flex-shrink: 0;
}
.notes-item.private .notes-avatar-icon {
  color: #dc3545;
}
.notes-author {
  font-size: 13px;
  font-weight: 600;
  color: #0d6efd;
}
.notes-item.private .notes-author {
  color: #dc3545;
}
.notes-dot {
  color: var(--text-muted);
}
.notes-date {
  font-size: 13px;
  color: var(--text-muted);
}
.notes-confidential-tag {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  letter-spacing: 0.3px;
}
.notes-body {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .prof-header-card {
    flex-direction: column;
  }
  .prof-info-grid {
    grid-template-columns: 1fr;
  }
  .med-conditions-grid {
    grid-template-columns: 1fr;
  }
  .med-condition-row:nth-child(even) {
    padding-left: 0;
  }
  .ind-check-grid {
    grid-template-columns: 1fr;
  }
  .ind-check-row:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }
  .ind-check-row:last-child:nth-child(odd) {
    grid-column: unset;
  }
  .tr-info-grid {
    grid-template-columns: 1fr;
  }
  .ind-access-grid {
    grid-template-columns: 1fr;
  }
  .prof-name {
    font-size: 18px;
  }
  .prof-tabs {
    padding: 4px;
  }
  .prof-tab {
    padding: 8px 12px;
    font-size: 12px;
  }
}
@media (max-width: 576px) {
  .prof-section-card {
    padding: 18px 16px;
  }
  .prof-header-card {
    padding: 18px 16px;
  }
  .prof-contacts {
    gap: 12px;
  }
  .prof-project-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── Private Tab ── */
.prv-warning-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(220, 53, 69, 0.05);
  border: 1px solid rgba(220, 53, 69, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #842029;
  line-height: 1.5;
}
.prv-warning-icon {
  color: #dc3545;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.prv-warning-banner strong {
  display: block;
  margin-bottom: 2px;
}
.prv-warning-banner span {
  font-size: 13px;
  opacity: 0.85;
}

.prv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.prv-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.prv-title-icon {
  color: #dc3545;
  font-size: 16px;
}

.prv-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid #dc3545;
  border-radius: 8px;
  background: white;
  color: #dc3545;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: "Inter", sans-serif;
}
.prv-add-btn:hover {
  background: #dc3545;
  color: white;
}

.prv-notes-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prv-note-item {
  background: rgba(220, 53, 69, 0.04);
  border: 1px solid rgba(220, 53, 69, 0.15);
  border-radius: 10px;
  padding: 14px 18px;
}
.prv-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.prv-note-avatar {
  font-size: 16px;
  color: #dc3545;
  flex-shrink: 0;
}
.prv-note-author {
  font-size: 13px;
  font-weight: 600;
  color: #dc3545;
}
.prv-note-dot {
  color: var(--text-muted);
}
.prv-note-date {
  font-size: 13px;
  color: var(--text-muted);
}
.prv-confidential-tag {
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(220, 53, 69, 0.12);
  color: #dc3545;
  letter-spacing: 0.3px;
  border: 1px solid rgba(220, 53, 69, 0.2);
}
.prv-note-body {
  font-size: 14px;
  color: var(--text-dark);
  line-height: 1.6;
}

@media (max-width: 425px) {
  .logo-section a img {
    width: 235px;
  }
}

/* New design css added here */

/* ================================================
   login.css — Login Page 

   ================================================ */

.lg-body {
  background: #dcdcde;
  min-height: 100vh;
  font-family: "Inter", sans-serif;
}

.lg-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

/* ── Card ── */
.lg-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.lg-card-strip {
  display: flex;
  height: 4px;
}
.lg-card-strip span {
  flex: 1;
}
.lg-strip-red {
  background: #e0262f;
}
.lg-strip-green {
  background: #3aa845;
}
.lg-strip-blue {
  background: #1175bc;
}

.lg-card-body {
  padding: 130px 24px 44px;
}

/* ── Heading ── */
.lg-head {
  text-align: center;
  margin-bottom: 26px;
}
.lg-title {
  font-size: 23px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px;
}
.lg-subtitle {
  font-size: 14px;
  color: #374151;
  margin: 0;
}

/* ── Fields ── */
.lg-field {
  margin-bottom: 20px;
}

.lg-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 6px;
}
.lg-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.lg-label-row .lg-label {
  margin-bottom: 0;
}

.lg-forgot-link {
  font-size: 13px;
  color: #0b5d99;
  text-decoration: none;
}
.lg-forgot-link:hover {
  text-decoration: underline;
  color: #084a7a;
}

.lg-input-wrap {
  position: relative;
}

.lg-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #6b7280;
  pointer-events: none;
}

.lg-input {
  width: 100%;
  height: 40px;
  padding: 8px 14px 8px 40px;
  border: 1px solid #c7cbd1;
  border-radius: 2px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: #111827;
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lg-input::placeholder {
  color: #6b7280;
}
.lg-input:focus {
  border-color: #1175bc;
  box-shadow: 0 0 0 3px rgba(17, 117, 188, 0.15);
}
.lg-input-pass {
  padding-right: 44px;
}

.lg-pass-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #6b7280;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}
.lg-pass-toggle:hover {
  color: #111827;
}
.lg-pass-toggle:focus-visible {
  outline: 2px solid #1175bc;
}

/* ── Error state ── */
.lg-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 5px;
}
.lg-field.has-error .lg-input {
  border-color: #dc3545;
}
.lg-field.has-error .lg-input:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}
.lg-field.has-error .lg-error {
  display: block;
}

.lg-form-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(220, 53, 69, 0.07);
  border: 1px solid rgba(220, 53, 69, 0.3);
  color: #b02a37;
  font-size: 13px;
  padding: 10px 12px;
  margin-bottom: 18px;
}

/* ── Remember ── */
.lg-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 22px;
}
.lg-checkbox {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #1175bc;
  cursor: pointer;
}
.lg-remember label {
  font-size: 13px;
  color: #374151;
  cursor: pointer;
}

/* ── Submit ── */
.lg-submit-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1175bc;
  color: #fff;
  border: none;
  border-radius: 2px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.lg-submit-btn:hover {
  background: #0e639f;
}
.lg-submit-btn:focus-visible {
  outline: 3px solid rgba(17, 117, 188, 0.4);
  outline-offset: 2px;
}
.lg-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.lg-submit-btn i {
  font-size: 17px;
}

/* ── Divider / notice ── */
.lg-divider {
  height: 1px;
  background: #c7cbd1;
  margin: 40px 0 26px;
}
.lg-notice {
  text-align: center;
  font-size: 13px;
  color: #374151;
  margin: 0;
}

/* ── Footer ── */
.lg-footer {
  text-align: center;
  margin-top: 24px;
}
.lg-copyright {
  font-size: 13px;
  color: #374151;
  margin: 0 0 10px;
}
.lg-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 0;
}
.lg-footer-links li {
  display: flex;
  align-items: center;
}
.lg-footer-links li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b4b8be;
  margin: 0 16px;
}
.lg-footer-links a {
  font-size: 13px;
  color: #374151;
  text-decoration: none;
}
.lg-footer-links a:hover {
  color: #1175bc;
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-height: 760px) {
  .lg-card-body {
    padding-top: 60px;
  }
}

@media (max-width: 576px) {
  .lg-wrapper {
    justify-content: flex-start;
    padding: 24px 12px;
  }
  .lg-card-body {
    padding: 48px 18px 32px;
  }
  .lg-title {
    font-size: 21px;
  }
  .lg-subtitle {
    font-size: 13px;
  }
  .lg-divider {
    margin: 30px 0 20px;
  }
  .lg-footer-links li + li::before {
    margin: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-input,
  .lg-submit-btn {
    transition: none;
  }
}

/* ================================================
   operative-profile.css — Operative Profile Page
   
   ================================================ */

/* ── Back link ── */
.opf-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  margin-bottom: 18px;
}
.opf-back-link:hover {
  color: #1d5fd1;
}

/* ── Shared label / value ── */
.opf-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.opf-value {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
  word-break: break-word;
}
a.opf-value:hover {
  color: #1d5fd1;
}

/* ── Header card ── */
.opf-header-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 22px 24px;
  margin-bottom: 14px;
}
.opf-header-main {
  display: flex;
  gap: 20px;
}
.opf-avatar-lg {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #1d5fd1;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.opf-online-dot {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 12px;
  height: 12px;
  background: #16a34a;
  border: 2px solid #fff;
  border-radius: 50%;
}
.opf-header-info {
  flex: 1;
  min-width: 0;
}
.opf-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.opf-verified-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  font-size: 11px;
  font-weight: 600;
}
.opf-meta-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px 16px;
  margin-top: 16px;
}
.opf-meta-inducted {
  grid-column: 5;
}

.opf-contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Tabs ── */
.opf-tabs-wrap {
  background: #eef0f3;
  border-radius: 4px;
  padding: 4px 6px 0;
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.opf-tabs-wrap::-webkit-scrollbar {
  display: none;
}
.opf-tabs {
  flex-wrap: nowrap;
  gap: 4px;
}
.opf-tab {
  border: none;
  background: transparent;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s;
}
.opf-tab:hover {
  color: var(--text-dark);
}
.opf-tab.active {
  background: #fff;
  color: #1d5fd1;
  font-weight: 600;
  border-bottom-color: #1d5fd1;
}
.opf-tab:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: -2px;
}

/* ── Section cards ── */
.opf-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 16px 20px 22px;
  height: 100%;
}
.opf-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  padding-bottom: 10px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--border-color);
}
.opf-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 16px;
}
.opf-field-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.opf-card-image {
  background: #f3f5f8;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-size: 11px;
  font-weight: 600;
  color: #5b6b82;
  min-height: 84px;
}

/* ── Photo boxes ── */
.opf-photo-box {
  background: #f3f5f8;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
}
.opf-photo-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #eaf1fd;
  border: 1px solid #b9cdf3;
  color: #1d5fd1;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.opf-photo-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.opf-photo-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── Empty tabs ── */
.opf-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}
.opf-empty i {
  font-size: 30px;
  opacity: 0.4;
  display: block;
  margin-bottom: 10px;
}
.opf-empty p {
  margin: 0;
  font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .opf-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
  }
}

@media (max-width: 991px) {
  .opf-meta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .opf-meta-inducted {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .opf-header-card {
    padding: 18px 16px;
  }
  .opf-header-main {
    flex-direction: column;
    gap: 14px;
  }
  .opf-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .opf-tab {
    padding: 10px 16px;
  }
  .opf-card {
    padding: 14px 16px 18px;
  }
}

@media (max-width: 576px) {
  .opf-name {
    font-size: 20px;
  }
  .opf-contact-list {
    grid-template-columns: 1fr;
  }
  .opf-field-grid {
    gap: 18px 12px;
  }
}

/* ================================================
   active-onsite.css — Current Operatives (Active On-Site)
   
   ================================================ */

/* ── Page head ── */
.aos-page-head {
  margin-bottom: 14px;
}
.aos-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.aos-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.aos-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.aos-breadcrumb a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.aos-bc-current {
  color: var(--text-dark);
}

/* ── Filter card ── */
.aos-filter-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 8px;
  margin-bottom: 10px;
}
.aos-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr 1.6fr 1.05fr;
  gap: 8px;
}
.aos-filter-input {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #f8f9fb;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.aos-filter-input::placeholder {
  color: #8a94a3;
  letter-spacing: 0.3px;
}
.aos-filter-input:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12);
}
.aos-filter-select {
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a3' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.aos-filter-select:invalid,
.aos-filter-select.is-placeholder {
  color: #8a94a3;
  letter-spacing: 0.3px;
}

.aos-search-btn {
  height: 36px;
  border: none;
  border-radius: 3px;
  background: #1f9a4e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.aos-search-btn:hover {
  background: #17803f;
}
.aos-search-btn:focus-visible {
  outline: 3px solid rgba(31, 154, 78, 0.35);
  outline-offset: 2px;
}

/* ── Table ── */
.aos-table-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.aos-table-scroll {
  overflow-x: auto;
}
.aos-table {
  width: 100%;
  border-collapse: collapse;
}
.aos-table thead th {
  background: #0d2c3d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 12px 10px;
  white-space: nowrap;
}
.aos-table thead th:first-child {
  width: 44%;
}
.aos-table thead th:nth-child(2) {
  width: 34%;
}

.aos-table tbody td {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-dark);
  vertical-align: middle;
  border-bottom: 1px solid #edf0f3;
}
.aos-table tbody tr:nth-child(odd) td {
  background: #f1f3f6;
}
/* keeps zebra stripes correct after filtering (modern browsers) */
.aos-table tbody tr:nth-child(even of :not([hidden])) td {
  background: #fff;
}
.aos-table tbody tr:nth-child(odd of :not([hidden])) td {
  background: #f1f3f6;
}
.aos-table tbody tr:hover td {
  background: rgba(0, 166, 81, 0.06);
}
.aos-table tbody tr:last-child td {
  border-bottom: none;
}

.aos-emp-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.aos-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c3c9d1;
  flex-shrink: 0;
  overflow: hidden;
}
.aos-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.aos-emp-info {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.aos-emp-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.aos-emp-id {
  font-size: 10px;
  color: var(--text-muted);
}
.aos-emp-cell:hover .aos-emp-name {
  color: var(--primary-color);
  text-decoration: none;
  
}
tbody tr:hover {
  background-color: #e6f7ff; /* Change this to your preferred color */
  cursor: pointer;          /* Optional: Changes the mouse cursor to a pointer */
}

/* ── Empty state ── */
.aos-no-results {
  display: none;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.aos-no-results.show {
  display: block;
}
.aos-no-results i {
  font-size: 26px;
  opacity: 0.35;
  display: block;
  margin-bottom: 8px;
}
.aos-no-results p {
  font-size: 13px;
  margin: 0 0 12px;
}
.aos-clear-btn {
  border: 1px solid var(--border-color);
  background: #fff;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  cursor: pointer;
}
.aos-clear-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .aos-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aos-search-btn {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .aos-title {
    font-size: 20px;
  }

  .aos-table thead {
    display: none;
  }
  .aos-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--border-color);
  }
  .aos-table tbody tr:last-child {
    border-bottom: none;
  }
  .aos-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: none;
    text-align: right;
  }
  .aos-table tbody td:first-child {
    padding-top: 12px;
  }
  .aos-table tbody td:last-child {
    padding-bottom: 12px;
  }
  .aos-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: left;
  }
  .aos-table tbody td[data-label="Employee"]::before {
    display: none;
  }
  .aos-emp-cell {
    text-align: left;
  }
  .aos-avatar {
    width: 32px;
    height: 32px;
  }
  .aos-emp-name {
    font-size: 13px;
    font-weight: 600;
  }
}

@media (max-width: 576px) {
  .aos-filter-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   onboarding.css — Onboardings page
   
   ================================================ */

/* ── Page head ── */
.onb-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.onb-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.onb-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.onb-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.onb-breadcrumb a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.onb-bc-current {
  color: var(--text-dark);
}

.onb-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.onb-view-toggle {
  display: flex;
  gap: 6px;
}
.onb-view-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s;
}
.onb-view-btn:hover {
  color: var(--text-dark);
  border-color: #c5cad1;
}
.onb-view-btn.active {
  background: #eef1f5;
  color: var(--text-dark);
  border-color: #c5cad1;
}

.onb-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 22px;
  border: none;
  border-radius: 20px;
  background: #e11d48;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25);
  transition:
    background 0.2s,
    transform 0.2s;
}
.onb-email-btn:hover {
  background: #be123c;
  transform: translateY(-1px);
}
.onb-email-btn:disabled {
  opacity: 0.75;
  transform: none;
  cursor: not-allowed;
}

/* ── Filter card ── */
.onb-filter-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 8px;
  margin-bottom: 8px;
}
.onb-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.onb-filter-input {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #f8f9fb;
  font-size: 12px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background 0.2s;
}
.onb-filter-input::placeholder {
  color: #8a94a3;
  letter-spacing: 0.3px;
}
.onb-filter-input:focus {
  background: #fff;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12);
}
.onb-filter-select {
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a94a3' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.onb-filter-select.is-placeholder {
  color: #8a94a3;
  letter-spacing: 0.3px;
}

.onb-search-btn {
  height: 36px;
  border: none;
  border-radius: 3px;
  background: #1f9a4e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.onb-search-btn:hover {
  background: #17803f;
}

/* ── Status tabs ── */
.onb-tabs {
  display: flex;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin-bottom: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.onb-tabs::-webkit-scrollbar {
  display: none;
}
.onb-tab {
  flex-shrink: 0;
  min-width: 80px;
  padding: 10px 40px 10px 8px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  text-align: left;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s,
    background 0.2s;
}
.onb-tab:hover {
  color: var(--text-dark);
  background: rgba(0, 166, 81, 0.06);
}
.onb-tab.active {
  background: #fdf4cf;
  color: #dc2626;
  font-weight: 500;
  border-bottom-color: #dc2626;
}

/* ── Table (list view) ── */
.onb-table-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  padding-bottom: 14px;
}
.onb-table-scroll {
  overflow-x: auto;
}
.onb-table {
  width: 100%;
  border-collapse: collapse;
}
.onb-table thead th {
  background: #fff;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 12px 10px;
  white-space: nowrap;
}
.onb-table thead th:first-child {
  width: 40%;
}
.onb-table thead th:nth-child(2) {
  width: 32%;
}

.onb-table tbody td {
  padding: 7px 10px;
  font-size: 11px;
  color: var(--text-dark);
  vertical-align: middle;
}
.onb-table tbody tr:nth-child(odd) td {
  background: #f1f3f6;
}
.onb-table tbody tr:nth-child(even of :not([hidden])) td {
  background: #fff;
}
.onb-table tbody tr:nth-child(odd of :not([hidden])) td {
  background: #f1f3f6;
}
.onb-table tbody tr:hover td {
  background: rgba(0, 166, 81, 0.06);
}

.onb-emp-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.onb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #c3c9d1;
  flex-shrink: 0;
  overflow: hidden;
}
.onb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.onb-emp-info {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.onb-emp-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
}
.onb-emp-id {
  font-size: 9px;
  color: var(--text-muted);
}
.onb-emp-cell:hover .onb-emp-name {
  color: var(--primary-color);
  text-decoration: none;
}

/* ── Grid view ── */
.onb-table-card.onb-grid-view {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.onb-grid-view .onb-table thead {
  display: none;
}
.onb-grid-view .onb-table,
.onb-grid-view .onb-table tbody {
  display: block;
}
.onb-grid-view .onb-table tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.onb-grid-view .onb-table tbody tr {
  display: block;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 14px;
}
.onb-grid-view .onb-table tbody tr[hidden] {
  display: none;
}
.onb-grid-view .onb-table tbody td,
.onb-grid-view .onb-table tbody tr:nth-child(n) td {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  padding: 4px 0;
  font-size: 12px;
}
.onb-grid-view .onb-table tbody td::before {
  content: attr(data-label);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 11px;
}
.onb-grid-view .onb-table tbody td[data-label="Employee"] {
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}
.onb-grid-view .onb-table tbody td[data-label="Employee"]::before {
  display: none;
}
.onb-grid-view .onb-avatar {
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
.onb-grid-view .onb-emp-name {
  font-size: 13px;
  font-weight: 600;
}
.onb-grid-view .onb-emp-id {
  font-size: 11px;
}
.onb-grid-view .onb-no-results {
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

/* ── Empty state ── */
.onb-no-results {
  display: none;
  text-align: center;
  padding: 40px 20px 26px;
  color: var(--text-muted);
}
.onb-no-results.show {
  display: block;
}
.onb-no-results i {
  font-size: 26px;
  opacity: 0.35;
  display: block;
  margin-bottom: 8px;
}
.onb-no-results p {
  font-size: 13px;
  margin: 0;
}

/* ── Email Link modal ── */
.onb-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.onb-modal .modal-header {
  border-bottom: 1px solid var(--border-color);
  padding: 16px 20px;
}
.onb-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.onb-modal .modal-body {
  padding: 18px 20px 6px;
}
.onb-modal .modal-footer {
  border-top: 1px solid var(--border-color);
  padding: 12px 20px;
  gap: 8px;
}
.onb-modal-text {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.onb-modal-field {
  margin-bottom: 14px;
}
.onb-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.onb-modal-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  outline: none;
  background: #fff;
}
.onb-modal-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12);
}
.onb-modal-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 4px;
}
.onb-modal-field.has-error .onb-modal-input {
  border-color: #dc3545;
}
.onb-modal-field.has-error .onb-modal-error {
  display: block;
}
.onb-modal-cancel {
  height: 34px;
  padding: 0 18px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.onb-modal-cancel:hover {
  background: #f5f6f8;
}

.onb-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.onb-toast i {
  color: #22c55e;
}
.onb-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .onb-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .onb-search-btn {
    grid-column: 1 / -1;
  }
  .onb-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .onb-title {
    font-size: 20px;
  }
  .onb-page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .onb-head-actions {
    justify-content: space-between;
  }
  .onb-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .onb-filter-grid #onbFilterName {
    grid-column: 1 / -1;
  }
  .onb-tab {
    padding: 10px 16px;
    min-width: 0;
  }

  /* list view → stacked cards */
  .onb-table-card:not(.onb-grid-view) .onb-table thead {
    display: none;
  }
  .onb-table-card:not(.onb-grid-view) .onb-table tbody tr {
    display: block;
    border-bottom: 1px solid var(--border-color);
  }
  .onb-table-card:not(.onb-grid-view) .onb-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    font-size: 12px;
  }
  .onb-table-card:not(.onb-grid-view) .onb-table tbody td:first-child {
    padding-top: 12px;
  }
  .onb-table-card:not(.onb-grid-view) .onb-table tbody td:last-child {
    padding-bottom: 12px;
  }
  .onb-table-card:not(.onb-grid-view) .onb-table tbody td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
  }
  .onb-table-card:not(.onb-grid-view)
    .onb-table
    tbody
    td[data-label="Employee"]::before {
    display: none;
  }
  .onb-avatar {
    width: 32px;
    height: 32px;
  }
  .onb-emp-name {
    font-size: 13px;
    font-weight: 600;
  }
  .onb-emp-id {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .onb-filter-grid {
    grid-template-columns: 1fr;
  }
  .onb-email-btn {
    padding: 0 16px;
  }
  .onb-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   starter-form.css — Operative Starter Form
   
   ================================================ */

.osf-top-header {
  position: relative;
  top: auto;
  z-index: 30;
}
.osf-top-header .logo-section {
  min-height: 52px;
}
.osf-standalone main {
  padding-top: 24px;
  padding-bottom: 40px;
}
.osf-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.osf-req-star {
  color: #dc3545;
}

/* ── Page head ── */
.osf-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.osf-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.osf-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.osf-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.osf-breadcrumb a:hover {
  color: #1d5fd1;
  text-decoration: underline;
}
.osf-bc-current {
  color: var(--text-dark);
}

.osf-head-actions {
  display: flex;
  gap: 10px;
}
.osf-btn {
  height: 34px;
  padding: 0 22px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.osf-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
}
.osf-btn-light:hover {
  background: #f5f6f8;
  border-color: #c5cad1;
}
.osf-btn-primary {
  background: #1d5fd1;
  border: 1px solid #1d5fd1;
  color: #fff;
}
.osf-btn-primary:hover {
  background: #174fb0;
}
.osf-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

/* ── Section nav (sticky) ── */
.osf-section-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 8px 0;
  margin-bottom: 8px;
  background: #f5f6fa;
  overflow-x: auto;
  scrollbar-width: none;
}
.osf-section-nav::-webkit-scrollbar {
  display: none;
}
.osf-nav-pill {
  flex-shrink: 0;
  min-width: 62px;
  padding: 7px 20px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #fff;
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.osf-nav-pill:nth-child(1) {
  min-width: 64px;
}
.osf-nav-pill:hover {
  border-color: #1d5fd1;
  color: #1d5fd1;
}
.osf-nav-pill.active {
  background: #1d5fd1;
  border-color: #1d5fd1;
  color: #fff;
  font-weight: 600;
}
.osf-nav-pill.has-error:not(.active) {
  border-color: #dc3545;
  color: #dc3545;
}

/* ── Cards ── */
.osf-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 14px 18px 20px;
  height: 100%;
  scroll-margin-top: 70px;
}
.osf-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  padding-bottom: 10px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border-color);
}

.osf-grid {
  display: grid;
  gap: 12px;
}
.osf-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.osf-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.osf-span-2 {
  grid-column: span 2;
}

.osf-label {
  display: block;
  font-size: 10px;
  color: #4b5563;
  margin-bottom: 4px;
}
.osf-req::after {
  content: " *";
  color: #dc3545;
}

.osf-input {
  width: 100%;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: #fff;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.osf-input::placeholder {
  color: #9aa3af;
}
.osf-input:focus {
  border-color: #1d5fd1;
  box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.12);
}
.osf-select {
  appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3af' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.osf-select.is-placeholder {
  color: #9aa3af;
}

/* file upload */
.osf-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.osf-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}
.osf-upload i {
  color: #9aa3af;
  font-size: 12px;
}
.osf-upload-text {
  color: #9aa3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.osf-upload.has-file .osf-upload-text {
  color: var(--text-dark);
}
.osf-upload.has-file i {
  color: #16a34a;
}
.osf-file:focus-visible + .osf-upload,
.osf-upload:hover {
  border-color: #1d5fd1;
}

/* errors */
.osf-error {
  display: none;
  font-size: 10px;
  color: #dc3545;
  margin-top: 3px;
}
.osf-field.has-error .osf-input {
  border-color: #dc3545;
}
.osf-field.has-error .osf-error,
.osf-sign-field.has-error .osf-error {
  display: block;
}
.osf-check-field.has-error .osf-check span {
  color: #dc3545;
}

/* ── Medical list ── */
button.osf-medical-row {
  width: 100%;
  border: 1px solid transparent;
  font-family: "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
}
button.osf-medical-row:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: 1px;
}
.osf-med-card-error {
  margin-top: 8px;
  font-size: 11px;
}
#osf-medical.has-error .osf-med-card-error {
  display: block;
}
#osf-medical.has-error .osf-medical-row {
  border-color: #f1b8bf;
}
.osf-medical-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.osf-medical-row {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  background: #f3f5f8;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.osf-medical-row:hover {
  background: #e9edf3;
}
.osf-medical-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dark);
}
.osf-medical-desc {
  font-size: 10px;
  color: var(--text-muted);
}
.osf-status {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.osf-status-pending {
  background: #fdf3d7;
  color: #b45309;
}
.osf-status-progress {
  background: rgba(29, 95, 209, 0.1);
  color: #1d5fd1;
}
.osf-status-done {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}

/* ── Signature ── */
.osf-sign-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.osf-sign-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.osf-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dark);
  cursor: pointer;
  margin: 0;
}
.osf-check input {
  width: 13px;
  height: 13px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #1d5fd1;
  cursor: pointer;
}
.osf-req-note {
  font-size: 9px;
  color: var(--text-muted);
  margin: 10px 0 0;
}

.osf-sign-pad {
  position: relative;
  height: 72px;
  background: #f3f5f8;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  overflow: hidden;
}
.osf-sign-pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
}
.osf-sign-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
}
.osf-sign-pad.signed .osf-sign-placeholder {
  display: none;
}
.osf-sign-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #fff;
  font-size: 10px;
  font-family: "Inter", sans-serif;
  color: var(--text-muted);
  cursor: pointer;
}
.osf-sign-clear:hover {
  color: #dc3545;
  border-color: #dc3545;
}
.osf-sign-pad.signed .osf-sign-clear {
  display: inline-flex;
}
.osf-sign-field.has-error .osf-sign-pad {
  border-color: #dc3545;
}

/* ── Medical popup (accordion) ── */
.osf-med-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.osf-med-modal .modal-header {
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-color);
}
.osf-med-modal .modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}
.osf-med-intro {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.osf-med-modal .modal-body {
  padding: 16px 22px;
  background: #f7f8fa;
}
.osf-med-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}

.osf-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.osf-acc-item {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  overflow: hidden;
  background: #fff;
}
.osf-acc-btn {
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: none !important;
}
.osf-acc-btn:not(.collapsed) {
  background: #f4f7fe;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border-color);
}
.osf-acc-btn:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: -2px;
}
.osf-acc-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1d6fe8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.osf-acc-title {
  flex: 1;
}
.osf-acc-btn .osf-status {
  margin-right: 10px;
  font-size: 10px;
}
.osf-acc-body {
  padding: 4px 18px 18px;
}

/* question groups */
.osf-q-group {
  font-size: 13px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 18px 0 10px;
  margin: 0 0 6px;
  border-bottom: 1px solid var(--border-color);
}
.osf-q {
  padding: 14px 0 16px;
  border-bottom: 1px dashed #e3e6ea;
}
.osf-q:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}
.osf-q-text {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 12px;
}

/* Yes / No boxes */
.osf-yn {
  display: flex;
  gap: 10px;
}
.osf-yn-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 84px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid #d5d9df;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  color: var(--text-dark);
  cursor: pointer;
  margin: 0;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.osf-yn-opt:hover {
  border-color: #9aa3af;
}
.osf-yn-opt input {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: #1d6fe8;
  cursor: pointer;
}
.osf-yn-opt:has(input:checked) {
  border-color: #1d6fe8;
  background: #f0f5fe;
}
.osf-yn-opt:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.2);
}

/* details box shown on "Yes" */
.osf-q-details {
  display: none;
  margin-top: 12px;
  max-width: 520px;
}
.osf-q.is-yes .osf-q-details:not([hidden]) {
  display: block;
}
.osf-q-details-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.osf-q-textarea,
.osf-q-input {
  width: 100%;
  border: 1px solid #d5d9df;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  background: #fff;
  outline: none;
  resize: vertical;
}
.osf-q-input {
  max-width: 385px;
  height: 38px;
}
.osf-q-textarea:focus,
.osf-q-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.osf-q-hint {
  font-size: 13px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

.osf-q-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 6px;
}
.osf-q.has-error .osf-q-error {
  display: block;
}
.osf-q.has-error .osf-yn-opt,
.osf-q.has-error .osf-q-input,
.osf-q.has-error .osf-q-textarea {
  border-color: #dc3545;
}

/* ── Toast ── */
.osf-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.osf-toast i {
  color: #22c55e;
}
.osf-toast.error i {
  color: #f87171;
}
.osf-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1399px) {
  .osf-cols-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .osf-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .osf-title {
    font-size: 20px;
  }
  .osf-med-modal .modal-header,
  .osf-med-modal .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .osf-med-modal .modal-body {
    padding: 12px;
  }
  .osf-acc-btn {
    font-size: 14px;
    padding: 12px;
    flex-wrap: wrap;
  }
  .osf-acc-body {
    padding: 0 14px 14px;
  }
  .osf-q-text {
    font-size: 14px;
  }
  .osf-yn-opt {
    flex: 1;
    justify-content: center;
    max-width: 140px;
  }
  .osf-med-modal .modal-footer .osf-btn {
    flex: 1;
  }
  .osf-page-head {
    flex-direction: column;
    align-items: stretch;
  }
  .osf-head-actions .osf-btn {
    flex: 1;
  }
  .osf-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .osf-input {
    height: 36px;
    font-size: 13px;
  }
  .osf-label {
    font-size: 11px;
  }
  .osf-sign-wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .osf-sign-pad {
    height: 120px;
  }
  .osf-check {
    font-size: 12px;
  }
  .osf-medical-row {
    grid-template-columns: 1fr auto;
  }
  .osf-medical-desc {
    grid-column: 1;
    grid-row: 2;
  }
  .osf-medical-row .osf-status {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .osf-medical-name,
  .osf-medical-desc {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .osf-cols-2,
  .osf-cols-5 {
    grid-template-columns: 1fr;
  }
  .osf-span-2 {
    grid-column: auto;
  }
  .osf-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   onsite-completion.css — Operative Induction (On-Site Completion)
   
   ================================================ */

/* ── Page head ── */
.oin-page-head {
  margin-bottom: 12px;
}
.oin-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.oin-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.oin-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.oin-breadcrumb a:hover {
  color: #4a73d6;
  text-decoration: underline;
}
.oin-bc-current {
  color: var(--text-dark);
}

/* ── Operative info card ── */
.oin-operative-card {
  background: #eef5fd;
  border: 1px solid #d6e4f5;
  border-radius: 6px;
  padding: 14px 10px 16px;
  margin-bottom: 10px;
}
.oin-operative-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.2px;
  margin: 0 0 8px;
}
.oin-operative-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}
.oin-operative-meta span + span::before {
  content: "\2022";
  margin: 0 8px;
  color: #9aa3af;
}

/* ── Sections ── */
.oin-section {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  margin-bottom: 10px;
  overflow: hidden;
}
.oin-section-head {
  background: #6b8de0;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 11px 10px;
  margin: 0;
}
.oin-section-body {
  padding: 12px 10px 18px;
}

.oin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
.oin-field {
  min-width: 0;
}

.oin-label {
  display: block;
  font-size: 10px;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.oin-select {
  width: 100%;
  height: 30px;
  padding: 4px 26px 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background-color: #f8f9fb;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3af' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}
.oin-select:focus {
  background-color: #fff;
  border-color: #4a73d6;
  box-shadow: 0 0 0 3px rgba(74, 115, 214, 0.15);
}
.oin-select.is-placeholder {
  color: #9aa3af;
}
.oin-select.is-yes {
  border-color: #86c9a0;
  background-color: #f3fbf6;
}
.oin-select.is-no {
  border-color: #f0b46a;
  background-color: #fff9f0;
}

/* errors / warnings */
.oin-error,
.oin-warning {
  display: none;
  font-size: 10px;
  margin-top: 4px;
}
.oin-error {
  color: #dc3545;
}
.oin-warning {
  color: #b45309;
}
.oin-warning i {
  margin-right: 2px;
}
.oin-field.has-error .oin-select {
  border-color: #dc3545;
  background-color: #fff;
}
.oin-field.has-error .oin-error {
  display: block;
}
.oin-field.has-warning .oin-warning {
  display: block;
}
.oin-confirm-field.has-error .oin-error {
  display: block;
}
.oin-confirm-field.has-error .oin-confirm span {
  color: #dc3545;
}

/* ── Checkboxes ── */
.oin-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 205px));
  gap: 10px 0;
  padding: 2px 0 8px;
}
.oin-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dark);
  cursor: pointer;
  margin: 0;
}
.oin-check input {
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #4a73d6;
  cursor: pointer;
}
.oin-confirm {
  max-width: 300px;
  line-height: 1.55;
  padding-bottom: 14px;
}
.oin-confirm input {
  margin-top: 2px;
}

/* ── Submit ── */
.oin-submit-btn {
  min-width: 150px;
  height: 36px;
  padding: 0 24px;
  margin-top: 2px;
  border: none;
  border-radius: 3px;
  background: #1f9a4e;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s;
}
.oin-submit-btn:hover {
  background: #17803f;
}
.oin-submit-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.oin-submit-btn.is-complete {
  background: #6c757d;
  opacity: 1;
}

.oin-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.oin-toast i {
  color: #22c55e;
}
.oin-toast.error i {
  color: #f87171;
}
.oin-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .oin-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .oin-title {
    font-size: 20px;
  }
  .oin-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .oin-label {
    font-size: 12px;
  }
  .oin-select {
    height: 38px;
    font-size: 13px;
  }
  .oin-error,
  .oin-warning {
    font-size: 11px;
  }
  .oin-check-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .oin-check {
    font-size: 12px;
  }
  .oin-check input {
    width: 16px;
    height: 16px;
  }
  .oin-confirm {
    max-width: none;
  }
  .oin-section-body {
    padding: 14px 12px 18px;
  }
  .oin-operative-name {
    font-size: 14px;
  }
  .oin-operative-meta {
    font-size: 12px;
  }
  .oin-submit-btn {
    width: 100%;
    height: 44px;
    font-size: 13px;
  }
}

@media (max-width: 400px) {
  .oin-check-grid {
    grid-template-columns: 1fr;
  }
  .oin-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   project-timesheets.css — Project Timesheets
   
   ================================================ */

/* ── Page head ── */
.pts-page-head {
  margin-bottom: 10px;
}
.pts-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pts-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.pts-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.pts-breadcrumb a:hover {
  color: #1fa3c9;
  text-decoration: underline;
}
.pts-bc-current {
  color: var(--text-dark);
}

/* ── Week bar ── */
.pts-week-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.pts-date-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 176px;
  height: 30px;
  padding: 0 8px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: 11px;
  color: var(--text-dark);
  cursor: pointer;
}
.pts-date-field:hover {
  border-color: #1fa3c9;
}
.pts-date-field input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.pts-week-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 2px;
  background: #22a9cf;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.pts-week-btn:hover {
  background: #1a8eaf;
}
.pts-week-label {
  display: flex;
  align-items: center;
  height: 30px;
  min-width: 70px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  font-size: 11px;
  color: var(--text-dark);
  margin: 0 2px;
}
.pts-week-label strong {
  font-weight: 500;
  margin-left: 3px;
}

/* ── Sign-off card ── */
.pts-signoff-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 40px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 8px 10px;
  margin-bottom: 10px;
}
.pts-signoff-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pts-signoff-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
}
.pts-signoff-value {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}
.pts-signoff-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.pts-signoff-proof .pts-signoff-time {
  margin-top: 0;
}
.pts-signoff-signature {
  display: block;
  height: 28px;
  max-width: 130px;
  object-fit: contain;
}
.pts-signoff-btn {
  height: 30px;
  padding: 0 22px;
  border: none;
  border-radius: 2px;
  background: #1f9a4e;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.pts-signoff-btn:hover {
  background: #17803f;
}
.pts-signoff-btn.is-signed {
  background: #6c757d;
  cursor: default;
}

/* ── Table ── */
.pts-table-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.pts-table-scroll {
  overflow-x: auto;
}
.pts-table {
  width: 100%;
  min-width: 1050px;
  border-collapse: collapse;
  table-layout: fixed;
}
.pts-table th,
.pts-table td {
  border: 1px solid #d9dde3;
}
.pts-table tbody tr:hover td {
  background: rgba(0, 166, 81, 0.06);
}

.pts-table thead th {
  background: #dfe3e8;
  color: #4b5563;
  font-size: 9px;
  font-weight: 500;
  padding: 6px 4px;
  height: 22px;
  vertical-align: top;
}
.pts-th-op {
  width: 130px;
  text-align: left;
  padding-left: 4px !important;
}
.pts-th-day {
  text-align: right;
}
.pts-th-day span {
  display: block;
  font-weight: 400;
  color: var(--text-muted);
}
.pts-th-total {
  width: 90px;
  text-align: right;
}

/* operative column */
.pts-op-cell {
  background: #c5ccd5;
  padding: 0 !important;
  font-weight: 400;
}
.pts-op {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--text-dark);
}
.pts-op-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #4b5563;
  flex-shrink: 0;
  overflow: hidden;
}
.pts-op-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pts-op-name {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.6;
}
.pts-op:hover .pts-op-name {
  text-decoration: underline;
}

/* day cells */
.pts-cell {
  height: 54px;
  padding: 4px 3px;
  vertical-align: top;
  cursor: pointer;
  background: #fff;
  transition:
    box-shadow 0.15s,
    background 0.15s;
}
.pts-cell:hover,
.pts-cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #22a9cf;
}
.pts-cell-time,
.pts-cell-hours {
  display: block;
  font-size: 7px;
  line-height: 1.6;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pts-cell-override {
  background: #fb9b06;
}
.pts-cell-override .pts-cell-time,
.pts-cell-override .pts-cell-hours {
  color: #3b2a07;
}
.pts-cell-pending {
  background: #fdf4c4;
}
.pts-cell-open {
  background: #e8f1ff;
}
.pts-cell-open .pts-cell-time,
.pts-cell-open .pts-cell-hours {
  color: #14448f;
}
.pts-cell.has-note::after {
  content: "";
  float: right;
  width: 0;
  height: 0;
  margin: -4px -3px 0 0;
  border-left: 7px solid transparent;
  border-top: 7px solid #1d5fd1;
}

.pts-table.is-locked .pts-cell {
  cursor: default;
}
.pts-table.is-locked .pts-cell:hover {
  box-shadow: none;
}

/* totals */
.pts-total {
  background: #f1f3f6;
  font-size: 9px;
  color: #4b5563;
  text-align: right;
  vertical-align: middle;
  padding: 4px 6px;
}

.pts-note {
  font-size: 10px;
  color: var(--text-muted);
  margin: 18px 0 0;
}

/* ── Modal ── */
.pts-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.pts-modal .modal-header {
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.pts-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.pts-modal-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.pts-modal .modal-body {
  padding: 16px 20px 8px;
}
.pts-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
}
.pts-clock-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #f3f5f8;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.pts-clock-label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.pts-clock-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.pts-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pts-modal-field {
  margin-bottom: 12px;
}
.pts-modal-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.pts-modal-input {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  outline: none;
}
.pts-modal-input:focus {
  border-color: #22a9cf;
  box-shadow: 0 0 0 3px rgba(34, 169, 207, 0.15);
}
.pts-modal-textarea {
  height: auto;
  resize: vertical;
}
.pts-modal-hours {
  font-size: 12px;
  color: var(--text-muted);
  margin: -4px 0 12px;
}
.pts-modal-hours strong {
  color: var(--text-dark);
}
.pts-modal-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin: -6px 0 10px;
}
.pts-modal-error.show {
  display: block;
}
.pts-modal-actions {
  display: flex;
  gap: 8px;
}
.pts-modal-clear,
.pts-modal-cancel,
.pts-modal-save {
  height: 34px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.pts-modal-clear {
  border: 1px solid transparent;
  background: transparent;
  color: #dc3545;
  padding: 0 4px;
}
.pts-modal-clear:hover {
  text-decoration: underline;
}
.pts-modal-cancel {
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-dark);
}
.pts-modal-cancel:hover {
  background: #f5f6f8;
}
.pts-modal-save {
  border: none;
  background: #22a9cf;
  color: #fff;
}
.pts-modal-save:hover {
  background: #1a8eaf;
}
.pts-signature-hint {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.pts-signature-pad {
  overflow: hidden;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: #fbfdff;
}
#ptsSignatureCanvas {
  display: block;
  width: 100%;
  height: 170px;
  cursor: crosshair;
  touch-action: none;
}

.pts-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.pts-toast i {
  color: #22c55e;
}
.pts-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Sign-off status, times and overwrite history (FR-SO-01) ── */
.pts-status-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fde68a;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pts-status-pill.is-locked {
  background: #bbf7d0;
  color: #166534;
}
.pts-signoff-time {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 400;
  color: #6b7280;
  text-transform: none;
}
.pts-history {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e2e8f0;
}
.pts-history-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #374151;
}
.pts-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.pts-history-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}
.pts-history-meta {
  font-size: 10px;
  font-weight: 700;
  color: #2563eb;
}
.pts-history-change {
  font-size: 11px;
  font-weight: 600;
  color: #111827;
}
.pts-history-reason {
  font-size: 10px;
  color: #6b7280;
}

/* ── Responsive ── */
@media (min-width: 1500px) {
  .pts-cell-time,
  .pts-cell-hours {
    font-size: 8px;
  }
  .pts-op-name,
  .pts-total,
  .pts-table thead th {
    font-size: 10px;
  }
}

@media (max-width: 991px) {
  /* keep operative names visible while scrolling sideways */
  .pts-th-op,
  .pts-op-cell {
    position: sticky;
    left: 0;
    z-index: 2;
  }
  .pts-th-op {
    background: #dfe3e8 !important;
  }
  .pts-op-cell {
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
  }
  .pts-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .pts-title {
    font-size: 20px;
  }
  .pts-week-bar {
    gap: 6px;
  }
  .pts-date-field {
    flex: 1 1 100%;
    width: auto;
    height: 36px;
    font-size: 13px;
  }
  .pts-week-btn {
    width: 40px;
    height: 36px;
  }
  .pts-week-label {
    flex: 1;
    justify-content: center;
    height: 36px;
    font-size: 13px;
  }
  .pts-signoff-card {
    gap: 12px 24px;
    padding: 12px;
  }
  .pts-signoff-btn {
    flex: 1 1 100%;
    justify-content: center;
    height: 38px;
    font-size: 13px;
  }
  .pts-note {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .pts-modal-grid,
  .pts-clock-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pts-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   payroll-management.css — Payroll (Global Master Sheet)
   
   ================================================ */

/* ── Page head ── */
.pdl-page-head {
  margin-bottom: 12px;
}
.pdl-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pdl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.pdl-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.pdl-breadcrumb a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}
.pdl-bc-current {
  color: var(--text-dark);
}

/* ── Week select ── */
.pdl-week-select-wrap {
  margin-bottom: 10px;
}
.pdl-week-select {
  width: 100%;
  max-width: 250px;
  height: 36px;
  padding: 0 30px 0 8px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background-color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.pdl-week-select:hover {
  border-color: #c5cad1;
}
.pdl-week-select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 166, 81, 0.12);
}

/* ── Card ── */
.pdl-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 18px 16px 36px;
}
.pdl-week-heading {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-dark);
  margin: 0 0 22px;
}
.pdl-summary {
  margin: -14px 0 20px;
  font-size: 11px;
  color: var(--text-muted);
}

.pdl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdl-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 170px;
  height: 42px;
  padding: 0 20px;
  border-radius: 3px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    filter 0.2s,
    transform 0.2s;
}
.pdl-download-btn:hover {
  color: #fff;
  filter: brightness(0.92);
  transform: translateY(-1px);
}
.pdl-download-btn:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
}
.pdl-download-btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
}
.pdl-btn-brick {
  background: #2ba5cf;
  margin-right: 18px;
}
.pdl-btn-scaffold {
  background: #1f9a3c;
}
.pdl-btn-general {
  background: #c3141e;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .pdl-title {
    font-size: 20px;
  }
  .pdl-week-select {
    max-width: none;
    height: 40px;
  }
}

@media (max-width: 576px) {
  .pdl-actions {
    flex-direction: column;
  }
  .pdl-download-btn {
    width: 100%;
    margin-right: 0;
  }
}

/* ================================================
   user-management.css — User Management
   
   ================================================ */

/* ── Page head ── */
.usm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 14px;
}
.usm-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.usm-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.usm-summary {
  display: flex;
  gap: 6px;
}
.usm-summary-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* ── Page head actions ── */
.usm-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.usm-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 18px;
  background: #1d5fd1;
  border: 1px solid #1d5fd1;
  border-radius: 20px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.2s;
}
.usm-btn-primary:hover {
  background: #1a51b4;
  border-color: #1a51b4;
  color: #fff;
  text-decoration: none;
}
.usm-btn-primary:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: 2px;
}

/* ── Group card ── */
.usm-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usm-group {
  --usm-tint: #eef3fd;
  --usm-badge-bg: #dbe6fb;
  --usm-badge-fg: #1d5fd1;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.usm-group-admin {
  --usm-tint: #f4f0fd;
  --usm-badge-bg: #e7dffb;
  --usm-badge-fg: #6d28d9;
}
.usm-group-contract-manager {
  --usm-tint: #eef8f1;
  --usm-badge-bg: #d7efdf;
  --usm-badge-fg: #15803d;
}

/* shared column layout */
.usm-group-head,
.usm-row {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 250px;
  align-items: center;
  gap: 0 14px;
}

.usm-group-head {
  min-height: 44px;
  background: var(--usm-tint);
  border-bottom: 1px solid var(--border-color);
}
.usm-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 10px 14px;
  background: #fbfcfe;
}
.usm-role-badge {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: var(--usm-badge-bg);
  color: var(--usm-badge-fg);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.usm-role-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
  white-space: nowrap;
}
.usm-count-pill {
  margin-left: auto;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
}
.usm-col-label {
  font-size: 10px;
  font-weight: 600;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.usm-col-actions {
  text-align: right;
  padding-right: 30px;
}

/* ── Rows ── */
.usm-row {
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
}
.usm-row:last-child {
  border-bottom: none;
}
.usm-row:hover {
  background: rgba(0, 166, 81, 0.06);
}

.usm-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  min-width: 0;
}
.usm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.usm-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.5;
}
.usm-user-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.usm-user-email {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usm-access {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.usm-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  background: #ecf8f0;
  border: 1px solid #b9e2c7;
  border-radius: 20px;
  font-size: 10px;
  color: #166534;
  white-space: nowrap;
}
.usm-no-access {
  font-size: 11px;
  color: #9aa3af;
}

.usm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-right: 18px;
}
.usm-btn {
  height: 28px;
  min-width: 56px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
align-items: center;
justify-content: center;
}
.usm-btn:hover {
  border-color: #1d5fd1;
  color: #1d5fd1;
  text-decoration: none;
}
.usm-btn-impersonate {
  min-width: 104px;
  background: #eaf1fd;
  border-color: #bcd0f5;
  color: #1d5fd1;
  font-weight: 600;
}
.usm-btn-impersonate:hover {
  background: #1d5fd1;
  color: #fff;
}
.usm-btn:focus-visible {
  outline: 2px solid #1d5fd1;
  outline-offset: 1px;
}
.usm-btn-deactivate {
  min-width: 92px;
  background: #fdeded;
  border-color: #f2c2c2;
  color: #d93838;
  font-weight: 600;
}
.usm-btn-deactivate:hover {
  background: #d93838;
  border-color: #d93838;
  color: #fff;
}
.usm-btn-activate {
  min-width: 92px;
  background: #e9f8f0;
  border-color: #bfe8d2;
  color: #15803d;
  font-weight: 600;
}
.usm-btn-activate:hover {
  background: #15803d;
  border-color: #15803d;
  color: #fff;
}
.usm-status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  background: #f0f1f3;
  color: #6b7280;
  vertical-align: middle;
}
.usm-row.is-inactive {
  opacity: 0.75;
}
.usm-status-tabs {
  border-bottom: 1px solid var(--border-color);
  gap: 2px;
  margin-bottom: 16px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.usm-status-tabs .nav-link {
  padding: 8px 16px;
  font-size: 12px;
  color: #6b7280;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.usm-status-tabs .nav-link:hover {
  color: #1d5fd1;
}
.usm-status-tabs .nav-link.active {
  color: #1d5fd1;
  font-weight: 600;
  background: #fff;
  border-color: var(--border-color);
}

/* ── Edit modal ── */
.usm-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.usm-modal .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}
.usm-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}
.usm-modal .modal-body {
  padding: 18px 20px 6px;
}
.usm-modal .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}
.usm-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.usm-modal-field {
  margin-bottom: 14px;
}
.usm-modal-field > label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
}
.usm-modal-input {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  background: #fff;
  outline: none;
}
.usm-modal-input:focus {
  border-color: #1d5fd1;
  box-shadow: 0 0 0 3px rgba(29, 95, 209, 0.12);
}
.usm-modal-error {
  display: none;
  font-size: 12px;
  color: #dc3545;
  margin-top: 4px;
}
.usm-modal-field.has-error .usm-modal-input {
  border-color: #dc3545;
}
.usm-modal-field.has-error .usm-modal-error {
  display: block;
}

.usm-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}
.usm-proj-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  margin: 0;
  transition: all 0.15s;
}
.usm-proj-option input {
  accent-color: #15803d;
  margin: 0;
}
.usm-proj-option:has(input:checked) {
  background: #ecf8f0;
  border-color: #b9e2c7;
  color: #166534;
}

.usm-modal-cancel,
.usm-modal-save {
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.usm-modal-cancel {
  border: 1px solid var(--border-color);
  background: #fff;
}
.usm-modal-cancel:hover {
  background: #f5f6f8;
}
.usm-modal-save {
  border: none;
  background: #1d5fd1;
  color: #fff;
}
.usm-modal-save:hover {
  background: #174fb0;
}

.usm-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.usm-toast i {
  color: #22c55e;
}
.usm-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
  .usm-group-head,
  .usm-row {
    grid-template-columns: 230px minmax(0, 1fr);
  }
  .usm-col-actions {
    display: none;
  }
  .usm-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding: 6px 14px 4px;
  }
}

@media (max-width: 991px) {
  .usm-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .usm-title {
    font-size: 20px;
  }
  .usm-page-head {
    flex-direction: column;
  }
  .usm-group-head {
    grid-template-columns: 1fr;
  }
  .usm-col-label {
    display: none;
  }
  .usm-group-title {
    background: transparent;
  }
  .usm-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
  }
  .usm-access {
    padding: 0 14px;
  }
  .usm-actions {
    padding: 2px 14px 0;
  }
  .usm-actions .usm-btn {
    flex: 1;
    height: 34px;
  }
  .usm-modal-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 576px) {
  .usm-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   projects.css — Projects (Active Projects)
   
   ================================================ */

/* ── Outer container ── */
.prj-wrap {
  background: #f8f9fb;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 12px;
}

.prj-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.prj-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.prj-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-muted);
}
.prj-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
}
.prj-breadcrumb a:hover {
  color: #1d5fd1;
  text-decoration: underline;
}
.prj-bc-current {
  color: var(--text-dark);
}

.prj-setup-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 5px;
  background: #1d5fe8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(29, 95, 232, 0.25);
  transition:
    background 0.2s,
    transform 0.2s;
}
.prj-setup-btn:hover {
  background: #174fc4;
  color: #fff;
  transform: translateY(-1px);
}

/* ── Division card ── */
.prj-division {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 10px 8px 12px;
  margin-bottom: 12px;
}
.prj-division:last-child {
  margin-bottom: 0;
}
.prj-division-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 8px;
}

/* ── Tile grid ── */
.prj-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.prj-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 60px;
  padding: 12px 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, #22a4ec 0%, #0a5fbf 100%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(10, 95, 191, 0.18);
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    filter 0.2s;
}
.prj-tile:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(10, 95, 191, 0.3);
  filter: brightness(1.05);
}
.prj-tile:focus-visible {
  outline: 3px solid rgba(29, 95, 232, 0.45);
  outline-offset: 2px;
}

.prj-count {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.prj-tile-name {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.95;
  line-height: 1.3;
}
.prj-tile-name-sm {
  font-size: 9px;
}

/* status dot */
.prj-status {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.prj-status-live {
  background: #22e05a;
}
.prj-status-alert {
  background: #f2626b;
}
.prj-status-live::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: #22e05a;
  animation: prjPulse 2s ease-out infinite;
}
@keyframes prjPulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ── Responsive ── */
@media (min-width: 1400px) {
  .prj-tile {
    min-height: 76px;
  }
  .prj-count {
    font-size: 24px;
  }
  .prj-tile-name {
    font-size: 12px;
  }
}

@media (max-width: 1199px) {
  .prj-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .prj-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .prj-wrap {
    padding: 12px 10px;
  }
  .prj-title {
    font-size: 20px;
  }
  .prj-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .prj-tile {
    min-height: 78px;
  }
}

@media (max-width: 380px) {
  .prj-page-head {
    flex-direction: column;
  }
  .prj-setup-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prj-status-live::after {
    animation: none;
  }
  .prj-tile {
    transition: none;
  }
}

/* ================================================
   dashboard.css — Dashboard with customisable widgets

   ================================================ */

/* ── Page head ── */
.dbw-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.dbw-greeting {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.dbw-greeting-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}
.dbw-customise-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.dbw-customise-btn:hover {
  border-color: #1d6fe8;
  color: #1d6fe8;
}

/* ── Widget grid ── */
.dbw-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 16px;
}
.dbw-widget[hidden] {
  display: none;
}
.dbw-span-3 {
  grid-column: span 3;
}
.dbw-span-4 {
  grid-column: span 4;
}
.dbw-span-12 {
  grid-column: span 12;
}

/* ── Card ── */
.dbw-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--dbw-accent, var(--border-color));
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  padding: 14px 16px 16px;
}
.dbw-accent-green {
  --dbw-accent: #16a34a;
}
.dbw-accent-blue {
  --dbw-accent: #1d6fe8;
}
.dbw-accent-amber {
  --dbw-accent: #f59e0b;
}
.dbw-accent-purple {
  --dbw-accent: #7c3aed;
}
.dbw-accent-red {
  --dbw-accent: #e11d48;
}

.dbw-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.dbw-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 3px;
}
.dbw-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

/* ••• menu */
.dbw-menu-btn {
  width: 26px;
  height: 22px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dbw-menu-btn:hover,
.dbw-menu-btn[aria-expanded="true"] {
  background: #f1f3f6;
}
.dbw-menu .dropdown-menu {
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
}
.dbw-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
}

/* ── Stat cards ── */
.dbw-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.dbw-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}
.dbw-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  max-width: 110px;
}
.dbw-pill-green {
  background: #dcf3e4;
  color: #15803d;
}
.dbw-pill-blue {
  background: #dde8fb;
  color: #1d5fd1;
}
.dbw-pill-amber {
  background: #fdf0d2;
  color: #b45309;
}
.dbw-pill-purple {
  background: #ece4fc;
  color: #6d28d9;
}

/* ── Tasks ── */
.dbw-task-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.dbw-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.dbw-task:last-child {
  border-bottom: none;
}
.dbw-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 6px;
}
.dbw-dot-red {
  background: #e11d48;
}
.dbw-dot-amber {
  background: #f59e0b;
}
.dbw-dot-blue {
  background: #1d6fe8;
}
.dbw-task-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbw-task-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.dbw-task-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.dbw-task-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: filter 0.2s;
}
.dbw-task-btn:hover {
  filter: brightness(0.94);
}
.dbw-task-btn-red {
  background: #fbe0e6;
  color: #be123c;
}
.dbw-task-btn-amber {
  background: #fdf0d2;
  color: #b45309;
}
.dbw-task-btn-blue {
  background: #dde8fb;
  color: #1d5fd1;
}

.dbw-block-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: auto;
  border-radius: 4px;
  background: #1d6fe8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.dbw-block-btn:hover {
  background: #175cc4;
  color: #fff;
}

.dbw-health-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 16px;
}
.dbw-health {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dbw-health-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.dbw-health-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dbw-progress {
  height: 5px;
  background: #e5e9ef;
  border-radius: 4px;
  overflow: hidden;
}
.dbw-progress-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.dbw-bar-blue {
  background: #1d6fe8;
}
.dbw-bar-amber {
  background: #e3a019;
}

.dbw-notif-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.dbw-notif {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-color);
}
.dbw-notif:last-child {
  border-bottom: none;
}
.dbw-notif-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dbw-icon-green {
  background: #dcf3e4;
  color: #15803d;
}
.dbw-icon-amber {
  background: #fdf0d2;
  color: #b45309;
}
.dbw-icon-red {
  background: #fbe0e6;
  color: #be123c;
}
.dbw-notif-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dbw-notif-text {
  font-size: 12px;
  color: var(--text-dark);
  line-height: 1.4;
}
.dbw-notif.is-unread .dbw-notif-text {
  font-weight: 600;
}
.dbw-notif-time {
  font-size: 10px;
  color: var(--text-muted);
}

.dbw-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 10px;
}
.dbw-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.dbw-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.dbw-quick {
  --dbw-q: #1d6fe8;
  --dbw-q-bg: #e3edfd;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--text-dark);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.dbw-quick:hover {
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: var(--hover-shadow);
}
.dbw-quick-green {
  --dbw-q: #16a34a;
  --dbw-q-bg: #dcf3e4;
}
.dbw-quick-amber {
  --dbw-q: #d97706;
  --dbw-q-bg: #fdf0d2;
}
.dbw-quick-purple {
  --dbw-q: #7c3aed;
  --dbw-q-bg: #ece4fc;
}
.dbw-quick-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--dbw-q-bg);
  color: var(--dbw-q);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.dbw-quick-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dbw-quick-title {
  font-size: 13px;
  font-weight: 700;
}
.dbw-quick-sub {
  font-size: 11px;
  color: var(--text-muted);
}
.dbw-quick-link {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--dbw-q);
}

.dbw-compliance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.dbw-comp {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: filter 0.2s;
}
.dbw-comp:hover {
  filter: brightness(0.97);
}
.dbw-comp-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.dbw-comp-label {
  font-size: 12px;
  font-weight: 500;
}
.dbw-comp-red {
  background: #fdecef;
  color: #be123c;
}
.dbw-comp-amber {
  background: #fef6e2;
  color: #b45309;
}
.dbw-comp-green {
  background: #e7f6ec;
  color: #15803d;
}

.dbw-empty {
  display: none;
  text-align: center;
  padding: 50px 20px;
  background: #fff;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  color: var(--text-muted);
}
.dbw-empty.show {
  display: block;
}
.dbw-empty i {
  font-size: 28px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
.dbw-empty p {
  margin: 0 0 14px;
  font-size: 14px;
}
.dbw-footnote {
  font-size: 11px;
  color: var(--text-muted);
  margin: 22px 0 0;
}

.dbw-panel.offcanvas-end {
  width: 420px;
  max-width: 100%;
  border-left: none;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.12);
  z-index: 1060;
}
.offcanvas-backdrop {
  z-index: 1055;
}
.offcanvas-backdrop.show {
  opacity: 0.35;
  background: #0f2a4a;
}

.dbw-panel-head {
  padding: 22px 22px 6px;
  align-items: flex-start;
}
.dbw-panel-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.dbw-panel-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}
.dbw-panel-body {
  padding: 16px 22px;
}
.dbw-panel-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0 0 10px;
}

.dbw-widget-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dbw-widget-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 6px;
  background: #f7f8fa;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  user-select: none;
  transition:
    box-shadow 0.15s,
    background 0.15s;
}
.dbw-widget-item.is-off .dbw-wi-title,
.dbw-widget-item.is-off .dbw-wi-sub {
  opacity: 0.6;
}
.dbw-widget-item.is-dragging {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  transition: none;
}
.dbw-grip {
  width: 22px;
  height: 30px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9aa3af;
  font-size: 14px;
  cursor: grab;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dbw-grip:hover {
  color: var(--text-dark);
  background: #eceff3;
}
.dbw-grip:active {
  cursor: grabbing;
}
.dbw-grip:focus-visible {
  outline: 2px solid #1d6fe8;
}
.dbw-wi-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dbw-wi-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.dbw-wi-sub {
  font-size: 10px;
  color: var(--text-muted);
}

.dbw-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}
.dbw-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.dbw-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: #d5dae1;
  transition: background 0.2s;
}
.dbw-switch-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}
.dbw-switch input:checked + .dbw-switch-track {
  background: #1d6fe8;
}
.dbw-switch input:checked + .dbw-switch-track::after {
  transform: translateX(16px);
}
.dbw-switch input:focus-visible + .dbw-switch-track {
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.3);
}

.dbw-panel-foot {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--border-color);
}
.dbw-panel-cancel,
.dbw-panel-save {
  height: 40px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
}
.dbw-panel-cancel {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
}
.dbw-panel-cancel:hover {
  background: #f5f6f8;
}
.dbw-panel-save {
  background: #1d6fe8;
  border: none;
  color: #fff;
}
.dbw-panel-save:hover {
  background: #175cc4;
}

.dbw-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.dbw-toast i {
  color: #22c55e;
}
.dbw-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1399px) {
  .dbw-span-3 {
    grid-column: span 6;
  }
  .dbw-span-4 {
    grid-column: span 6;
  }
  .dbw-widget[data-widget="notifications"] {
    grid-column: span 12;
  }
  .dbw-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .dbw-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .dbw-greeting {
    font-size: 21px;
  }
  .dbw-grid {
    gap: 12px;
  }
  .dbw-span-4,
  .dbw-widget[data-widget="notifications"] {
    grid-column: span 12;
  }
  .dbw-compliance {
    grid-template-columns: 1fr;
  }
  .dbw-quick-grid {
    gap: 12px;
  }
}

@media (max-width: 576px) {
  .dbw-span-3 {
    grid-column: span 12;
  }
  .dbw-quick-grid {
    grid-template-columns: 1fr;
  }
  .dbw-page-head {
    flex-direction: column;
  }
  .dbw-customise-btn {
    width: 100%;
    justify-content: center;
  }
  .dbw-panel-head,
  .dbw-panel-body,
  .dbw-panel-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .dbw-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dbw-quick,
  .dbw-switch-track,
  .dbw-switch-track::after {
    transition: none;
  }
}

/* ================================================
   project-overview.css — Project Overview

   ================================================ */

.pov-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.pov-head-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pov-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1d5fd1;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.pov-back-btn:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.pov-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pov-meta {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}
.pov-meta span + span::before {
  content: "\2022";
  margin: 0 7px;
  color: #9aa3af;
}
.pov-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border-radius: 5px;
  background: #1d6fe8;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.25);
  transition:
    background 0.2s,
    transform 0.2s;
}
.pov-primary-btn:hover {
  background: #175cc4;
  color: #fff;
  transform: translateY(-1px);
}

.pov-setup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  margin-bottom: 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.pov-date-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0;
  background: #eef4fd;
  border: 1px solid #7fa6e0;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.pov-date-card:hover {
  background: #e3edfc;
}
.pov-date-card:focus-within {
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.18);
}
.pov-date-card.is-set {
  background: #edf8f1;
  border-color: #8fd0a8;
}
.pov-date-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d5fd1;
  font-size: 14px;
  flex-shrink: 0;
}
.pov-date-card.is-set .pov-date-icon {
  color: #15803d;
}
.pov-date-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pov-date-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.pov-date-link {
  font-size: 11px;
  font-weight: 600;
  color: #1d5fd1;
}
.pov-date-card.is-set .pov-date-link {
  color: #15803d;
}
.pov-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.pov-setup-alert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 12px;
  background: #fff7e0;
  border: 1px solid #fbe6ad;
  border-radius: 5px;
  text-decoration: none;
  transition: filter 0.2s;
}
.pov-setup-alert:hover {
  filter: brightness(0.98);
}
.pov-setup-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
}
.pov-setup-text {
  font-size: 11px;
  font-weight: 500;
  color: #d97706;
}
.pov-setup-alert.is-partial {
  background: #eef4fd;
  border-color: #c7d9f6;
}
.pov-setup-alert.is-partial .pov-setup-text {
  color: #1d5fd1;
}

.pov-section {
  margin-bottom: 14px;
}
.pov-section-ws {
  margin-top: 22px;
}
.pov-label {
  font-size: 10px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 8px;
}

.pov-areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pov-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: all 0.2s;
}
.pov-area:hover {
  border-color: #9dbcf0;
  transform: translateY(-1px);
}
.pov-area:focus-visible {
  outline: 2px solid #1d6fe8;
  outline-offset: 2px;
}
.pov-area-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-bottom: 4px;
}
.pov-dot-white {
  background: #fff;
}
.pov-dot-green {
  background: #16a34a;
}
.pov-dot-purple {
  background: #7c3aed;
}
.pov-dot-amber {
  background: #f59e0b;
}
.pov-area:not(.is-selected) .pov-dot-white {
  background: #1d6fe8;
}
.pov-area-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.pov-area-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.pov-area.is-selected {
  background: #1d6fe8;
  border-color: #1d6fe8;
  box-shadow: 0 4px 12px rgba(29, 111, 232, 0.3);
}
.pov-area.is-selected .pov-area-name,
.pov-area.is-selected .pov-area-sub {
  color: #fff;
}
.pov-area.is-selected .pov-area-dot {
  background: #fff;
}

.pov-kpi {
  height: 100%;
  padding: 14px 16px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.pov-kpi-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.pov-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  padding-top: 2px;
}
.pov-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 8px;
}
.pov-kpi-sub {
  font-size: 11px;
  font-weight: 600;
}

.pov-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.pov-icon-green {
  background: #e3f5ea;
  color: #15803d;
}
.pov-icon-blue {
  background: #e3edfd;
  color: #1d5fd1;
}
.pov-icon-amber {
  background: #fdf2d6;
  color: #b45309;
}
.pov-icon-red {
  background: #fde4e8;
  color: #be123c;
}
.pov-icon-purple {
  background: #ede6fd;
  color: #6d28d9;
}

.pov-text-green {
  color: #16a34a;
}
.pov-text-blue {
  color: #1d6fe8;
}
.pov-text-amber {
  color: #d97706;
}
.pov-text-red {
  color: #dc2626;
}

.pov-ws-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.pov-ws {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 10px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: var(--text-dark);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.pov-ws:hover {
  color: var(--text-dark);
  transform: translateY(-2px);
  box-shadow: var(--hover-shadow);
}
.pov-ws-top {
  display: flex;
  gap: 10px;
}
.pov-ws-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pov-ws-title {
  font-size: 13px;
  font-weight: 700;
}
.pov-ws-desc {
  font-size: 10px;
  color: var(--text-muted);
}
.pov-ws-link {
  font-size: 11px;
  font-weight: 600;
}
.pov-ws-blue .pov-ws-link {
  color: #1d6fe8;
}
.pov-ws-green .pov-ws-link {
  color: #16a34a;
}
.pov-ws-red .pov-ws-link {
  color: #dc2626;
}
.pov-ws-purple .pov-ws-link {
  color: #1d6fe8;
}
.pov-ws-amber .pov-ws-link {
  color: #d97706;
}

.pov-status {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.pov-status-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}
.pov-status-warn .pov-status-dot {
  background: #f59e0b;
}
.pov-status-bad .pov-status-dot {
  background: #dc2626;
}
.pov-status-title {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.pov-status-text {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}

.pov-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.pov-toast i {
  color: #22c55e;
}
.pov-toast.is-error i {
  color: #f87171;
}
.pov-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1399px) {
  .pov-ws-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .pov-setup {
    grid-template-columns: 1fr 1fr;
  }
  .pov-setup-alert {
    grid-column: 1 / -1;
  }
  .pov-areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .pov-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .pov-head {
    flex-direction: column;
  }
  .pov-head-left {
    flex-direction: column;
    gap: 10px;
  }
  .pov-title {
    font-size: 21px;
  }
  .pov-primary-btn {
    width: 100%;
    justify-content: center;
  }
  .pov-setup {
    grid-template-columns: 1fr;
  }
  .pov-ws-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pov-kpi-value {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .pov-areas,
  .pov-ws-grid {
    grid-template-columns: 1fr;
  }
  .pov-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pov-area,
  .pov-ws,
  .pov-primary-btn {
    transition: none;
  }
}

/* ================================================
   project-setup.css — New Project Setup

   ================================================ */

.pst-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.pst-head-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.pst-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  margin-top: 2px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #1d5fd1;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.pst-back-btn:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.pst-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pst-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.pst-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pst-state-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 18px;
  border-radius: 20px;
  background: #e3edfd;
  color: #1d5fd1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pst-state-pill.is-active {
  background: #dcf3e4;
  color: #15803d;
}

.pst-outline-btn,
.pst-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 22px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.pst-outline-btn {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.pst-outline-btn:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.pst-primary-btn {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
}
.pst-primary-btn:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.pst-head-actions .pst-outline-btn {
  min-width: 150px;
}

.pst-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 160px 220px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.pst-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 700;
  color: #1d6fe8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.pst-project-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.pst-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}
.pst-crumbs i {
  font-size: 8px;
}
.pst-summary-box {
  height: 100%;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: #f5f6f9;
  border-radius: 5px;
}
.pst-box-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.pst-box-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.pst-summary-progress {
  padding: 4px 8px;
}
.pst-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pst-progress-pct {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

.pst-bar {
  height: 5px;
  background: #e5e9ef;
  border-radius: 4px;
  overflow: hidden;
}
.pst-bar-fill {
  display: block;
  height: 100%;
  background: #1d6fe8;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.pst-card {
  height: 100%;
  padding: 14px 12px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.pst-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.pst-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.pst-rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pst-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 86px 150px;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  background: #f5f6f9;
  border-radius: 5px;
}
.pst-num {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.pst-row[data-state="complete"] .pst-num {
  background: #dcf3e4;
  color: #15803d;
}
.pst-row[data-state="required"] .pst-num {
  background: #fdf0d2;
  color: #b45309;
}
.pst-row[data-state="optional"] .pst-num {
  background: #ece4fc;
  color: #6d28d9;
}
.pst-row-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.pst-row-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
}
.pst-row-desc {
  font-size: 10px;
  color: var(--text-muted);
}

.pst-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.pst-pill-complete {
  background: #dcf3e4;
  color: #15803d;
}
.pst-pill-required {
  background: #fdf0d2;
  color: #b45309;
}
.pst-pill-optional {
  background: #ece4fc;
  color: #6d28d9;
}

.pst-row-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #1d5fd1;
  cursor: pointer;
  transition: all 0.2s;
}
.pst-row-btn:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.pst-row-btn i {
  font-size: 11px;
}

.pst-ready-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.pst-bar-ready {
  margin-bottom: 12px;
}
.pst-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pst-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  background: #f5f6f9;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-dark);
}
.pst-check-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fdf0d2;
  color: #b45309;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pst-check.is-done .pst-check-icon {
  background: transparent;
  color: #16a34a;
  font-size: 13px;
}
.pst-check.is-done .pst-check-text {
  font-weight: 600;
}

.pst-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  margin: 8px 0 12px;
  background: #e7effd;
  border-radius: 4px;
}
.pst-info-title {
  font-size: 11px;
  font-weight: 700;
  color: #1d5fd1;
}
.pst-info-text {
  font-size: 10px;
  color: var(--text-muted);
}

.pst-activate-btn {
  width: 100%;
  height: 36px;
  border: none;
  border-radius: 5px;
  background: #1d6fe8;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.pst-activate-btn:hover:not(:disabled) {
  background: #175cc4;
}
.pst-activate-btn:disabled {
  background: #dfe5ee;
  color: #8d98a8;
  cursor: not-allowed;
}
.pst-activate-btn.is-done {
  background: #16a34a;
  color: #fff;
  cursor: default;
}
.pst-activate-note {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin: 8px 0 0;
}

.pst-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.pst-saved {
  font-size: 11px;
  color: var(--text-muted);
}
.pst-footer-actions {
  display: flex;
  gap: 8px;
}
.pst-footer-btn {
  min-width: 150px;
  height: 38px;
}

.pst-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.pst-modal .modal-header {
  align-items: flex-start;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.pst-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.pst-modal-step {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #1d6fe8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.pst-modal .modal-body {
  padding: 18px 22px;
}
.pst-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}

.pst-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.pst-field-full {
  grid-column: 1 / -1;
}
.pst-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.pst-req {
  color: #dc3545;
}
.pst-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.pst-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.pst-textarea {
  height: auto;
  resize: vertical;
}
.pst-readout {
  padding: 9px 12px;
  background: #f5f6f9;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.pst-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.pst-field.has-error .pst-input {
  border-color: #dc3545;
}
.pst-field.has-error .pst-error {
  display: block;
}
.pst-field.has-error .pst-option {
  border-color: #f1b8bf;
}

.pst-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pst-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.pst-option input {
  margin: 0;
  accent-color: #1d6fe8;
  flex-shrink: 0;
}
.pst-option:has(input:checked) {
  background: #f0f5fe;
  border-color: #b9cff5;
}
.pst-option-inline {
  border: none;
  padding: 4px 0;
  background: transparent !important;
}

.pst-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pst-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 16px;
  margin: 0;
  border: 2px dashed #cbd3de;
  border-radius: 8px;
  background: #f8f9fb;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.pst-drop i {
  font-size: 24px;
  color: #1d6fe8;
}
.pst-drop-text {
  font-size: 12px;
  color: var(--text-muted);
}
.pst-drop:hover,
.pst-drop.is-over {
  border-color: #1d6fe8;
  background: #f0f5fe;
}
.pst-file:focus-visible + .pst-drop {
  outline: 2px solid #1d6fe8;
}
.pst-file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pst-file-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f5f6f9;
  border-radius: 5px;
  font-size: 12px;
}
.pst-file-list i {
  color: #1d6fe8;
}

.pst-guide {
  padding-left: 20px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dark);
}
.pst-guide li {
  margin-bottom: 8px;
}
.pst-guide-note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.pst-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.pst-toast i {
  color: #22c55e;
}
.pst-toast.is-error i {
  color: #f87171;
}
.pst-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1399px) {
  .pst-summary {
    grid-template-columns: minmax(0, 1fr) 150px 150px;
  }
  .pst-summary-progress {
    grid-column: 1 / -1;
    padding: 4px 0 2px;
  }
}

@media (max-width: 991px) {
  .pst-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .pst-head {
    flex-direction: column;
  }
  .pst-head-left {
    flex-direction: column;
    gap: 10px;
  }
  .pst-title {
    font-size: 21px;
  }
  .pst-head-actions {
    width: 100%;
  }
  .pst-head-actions .pst-outline-btn {
    flex: 1;
  }
  .pst-summary {
    grid-template-columns: 1fr 1fr;
  }
  .pst-summary-main {
    grid-column: 1 / -1;
  }
  .pst-row {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    row-gap: 8px;
    padding: 10px;
  }
  .pst-row-btn {
    grid-column: 2 / -1;
    justify-self: stretch;
    height: 34px;
  }
  .pst-form-grid,
  .pst-option-grid {
    grid-template-columns: 1fr;
  }
  .pst-footer {
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }
  .pst-footer-actions .pst-footer-btn {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 576px) {
  .pst-modal .modal-header,
  .pst-modal .modal-body,
  .pst-modal .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pst-modal .modal-footer > * {
    flex: 1;
  }
  .pst-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pst-bar-fill {
    transition: none;
  }
}

/* ================================================
   clients-customers.css — Customers

   ================================================ */

.cus-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.cus-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.cus-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.cus-primary-btn,
.cus-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.cus-primary-btn {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.25);
}
.cus-primary-btn:hover {
  background: #175cc4;
  border-color: #175cc4;
}
.cus-head .cus-primary-btn {
  min-width: 170px;
  height: 42px;
}
.cus-outline-btn {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.cus-outline-btn:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
}

.cus-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
  max-width: 1150px;
  margin-bottom: 12px;
}
.cus-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: text;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cus-search:focus-within {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}
.cus-search i {
  font-size: 12px;
  color: var(--text-muted);
}
.cus-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
}
.cus-search input::placeholder {
  color: #6b7280;
}

.cus-filter-btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #1d5fd1;
  cursor: pointer;
  transition: all 0.2s;
}
.cus-filter-btn:hover,
.cus-filter-btn[aria-expanded="true"] {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.cus-filter-btn i {
  font-size: 10px;
}
.cus-filter-menu {
  width: 100%;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cus-filter-menu .dropdown-item.active,
.cus-filter-menu .dropdown-item:active {
  background: #e3edfd;
  color: #1d5fd1;
}

.cus-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 1150px;
  margin-bottom: 16px;
}
.cus-stat {
  display: flex;
  gap: 10px;
  padding: 12px 10px 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--card-shadow);
}
.cus-stat-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.cus-icon-blue {
  background: #1d6fe8;
}
.cus-icon-amber {
  background: #f59e0b;
}
.cus-icon-green {
  background: #16a34a;
}
.cus-stat-body {
  flex: 1;
  min-width: 0;
}
.cus-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.cus-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cus-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}
.cus-stat-note {
  font-size: 10px;
  font-weight: 600;
}
.cus-text-blue {
  color: #1d6fe8;
}
.cus-text-amber {
  color: #d97706;
}
.cus-text-green {
  color: #16a34a;
}

.cus-card {
  padding: 16px 12px 24px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.cus-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.cus-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.cus-table-head,
.cus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 95px 140px 70px;
  align-items: center;
  gap: 10px;
}
.cus-table-head {
  padding: 0 12px 8px;
}
.cus-th {
  font-size: 9px;
  font-weight: 700;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cus-th-name {
  padding-left: 82px;
}

.cus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cus-row {
  min-height: 52px;
  padding: 6px 12px 6px 8px;
  background: #f5f6f9;
  border-radius: 6px;
  transition: background 0.2s;
}
.cus-row:hover {
  background: #eef1f6;
}
.cus-row[hidden] {
  display: none;
}

.cus-cell-name {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.cus-logo {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.cus-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.cus-logo-active {
  background: #dcf3e4;
  color: #15803d;
}
.cus-logo-review {
  background: #fdf0d2;
  color: #b45309;
}
.cus-logo-lg {
  width: 56px;
  height: 56px;
  font-size: 14px;
  border-radius: 8px;
}
.cus-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cus-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cus-region {
  font-size: 9px;
  color: var(--text-muted);
}
.cus-cell-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}

.cus-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 22px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.cus-status-active {
  background: #dcf3e4;
  color: #15803d;
}
.cus-status-review {
  background: #fdf0d2;
  color: #b45309;
}

.cus-cell-action {
  text-align: right;
}
.cus-view {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1d6fe8;
  text-decoration: none;
}
.cus-view i {
  font-size: 9px;
  transition: transform 0.2s;
}
.cus-view:hover {
  color: #175cc4;
}
.cus-view:hover i {
  transform: translateX(2px);
}

.cus-empty {
  display: none;
  text-align: center;
  padding: 36px 16px 10px;
  color: var(--text-muted);
}
.cus-empty.show {
  display: block;
}
.cus-empty i {
  font-size: 24px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
.cus-empty p {
  font-size: 13px;
  margin: 0 0 12px;
}

.cus-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.cus-modal .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.cus-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.cus-modal .modal-body {
  padding: 18px 22px 6px;
}
.cus-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}
.cus-logo-picker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.cus-upload-btn {
  height: 34px;
  padding: 0 14px;
  margin: 0 0 6px;
  font-size: 12px;
}
.cus-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cus-file:focus-visible + .cus-hint {
  outline: none;
}
.cus-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
.cus-field {
  margin-bottom: 14px;
}
.cus-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cus-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.cus-req {
  color: #dc3545;
}
.cus-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cus-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.cus-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.cus-field.has-error .cus-input {
  border-color: #dc3545;
}
.cus-field.has-error .cus-error {
  display: block;
}

.cus-row.is-new {
  animation: cusFlash 1.6s ease;
}
@keyframes cusFlash {
  0%,
  30% {
    background: #e3edfd;
  }
  100% {
    background: #f5f6f9;
  }
}

.cus-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.cus-toast i {
  color: #22c55e;
}
.cus-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1400px) {
  .cus-name {
    font-size: 13px;
  }
  .cus-region {
    font-size: 10px;
  }
  .cus-cell-num {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .cus-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .cus-head {
    flex-direction: column;
  }
  .cus-head .cus-primary-btn {
    width: 100%;
  }
  .cus-title {
    font-size: 21px;
  }
  .cus-toolbar {
    grid-template-columns: 1fr;
  }
  .cus-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cus-table-head {
    display: none;
  }
  .cus-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 12px;
  }
  .cus-cell-name {
    grid-column: 1 / -1;
  }
  .cus-cell-num::before,
  .cus-cell[data-label="Status"]::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .cus-cell-action {
    grid-column: 1 / -1;
    text-align: left;
  }
  .cus-view {
    width: 100%;
    justify-content: center;
    height: 34px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
  }
  .cus-name {
    white-space: normal;
  }
  .cus-field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 576px) {
  .cus-modal .modal-footer > * {
    flex: 1;
  }
  .cus-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cus-row.is-new {
    animation: none;
  }
}

/* ================================================
   add-customer.css — Add Customer

   ================================================ */

.acu-head {
  margin-bottom: 12px;
}
.acu-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.acu-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.acu-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
  list-style: none;
}
.acu-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  transition: all 0.2s;
}
.acu-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef0f4;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acu-step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acu-step-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}
.acu-step-sub {
  font-size: 9px;
  color: var(--text-muted);
}
.acu-step.is-current {
  background: #e8f0fe;
  border-color: #7fa6e0;
}
.acu-step.is-current .acu-step-num {
  background: #1d6fe8;
}
.acu-step.is-done {
  background: #edf8f1;
  border-color: #a6dbb9;
}
.acu-step.is-done .acu-step-num {
  background: #16a34a;
}

.acu-card {
  padding: 14px 12px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.acu-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.acu-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.acu-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}

.acu-logo-drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  margin: 0;
  background: #f7f8fa;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.acu-logo-drop:hover,
.acu-logo-drop.is-over {
  border-color: #1d6fe8;
  background: #f0f5fe;
}
.acu-logo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  text-align: center;
}
.acu-logo-empty i {
  font-size: 22px;
  color: #1d6fe8;
}
.acu-logo-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.acu-logo-sub {
  font-size: 9px;
  color: var(--text-muted);
}
.acu-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  background: #fff;
}
.acu-logo-drop.has-logo .acu-logo-empty {
  display: none;
}
.acu-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.acu-file:focus-visible + .acu-logo-remove,
.acu-logo-drop:focus-within {
  outline: 2px solid #1d6fe8;
}
.acu-logo-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #dc3545;
  cursor: pointer;
}
.acu-logo-remove:hover {
  text-decoration: underline;
}

.acu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  align-content: start;
}
.acu-span-2 {
  grid-column: 1 / -1;
}
.acu-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.acu-req {
  color: #dc3545;
}
.acu-input {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #fff;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acu-input::placeholder {
  color: #6b7280;
}
.acu-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}
.acu-textarea {
  height: 58px;
  resize: vertical;
  padding-top: 10px;
}
.acu-error {
  display: none;
  font-size: 10px;
  color: #dc3545;
  margin-top: 4px;
}
.acu-field.has-error .acu-input {
  border-color: #dc3545;
}
.acu-field.has-error .acu-error {
  display: block;
}
.acu-field.has-error .acu-option {
  border-color: #f1b8bf;
}
.acu-note {
  font-size: 9px;
  color: var(--text-muted);
  margin: -6px 0 0;
}

.acu-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.acu-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.acu-option input {
  margin: 0;
  accent-color: #1d6fe8;
}
.acu-option:has(input:checked) {
  background: #f0f5fe;
  border-color: #b9cff5;
}
.acu-option-inline {
  border: none;
  padding: 4px 0;
  background: transparent !important;
  font-size: 11px;
}

.acu-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.acu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 108px;
  height: 30px;
  padding: 0 18px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.acu-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.acu-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.acu-btn-primary {
  min-width: 130px;
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
}
.acu-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.acu-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.acu-contact-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.acu-contact-row .acu-input {
  flex: 1 1 auto;
  min-width: 0;
}
.acu-btn-inline {
  min-width: 0;
  white-space: nowrap;
}
.acu-select {
  appearance: auto;
}
.acu-add-contact-btn {
  width: 100%;
  justify-content: center;
}
.acu-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.acu-contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 575px) {
  .acu-contact-row {
    flex-direction: column;
  }
}

.acu-done {
  padding: 48px 20px;
  text-align: center;
}
.acu-done-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #dcf3e4;
  color: #16a34a;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acu-done-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.acu-done-text {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.acu-done-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.acu-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.acu-toast i {
  color: #22c55e;
}
.acu-toast.is-error i {
  color: #f87171;
}
.acu-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1200px) {
  .acu-steps {
    grid-template-columns: repeat(2, minmax(0, 300px));
  }
  .acu-step {
    padding: 10px;
  }
  .acu-step-num {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .acu-step-title {
    font-size: 12px;
  }
  .acu-step-sub {
    font-size: 10px;
  }
  .acu-label {
    font-size: 11px;
  }
  .acu-input {
    height: 38px;
    font-size: 13px;
  }
  .acu-textarea {
    height: 64px;
  }
  .acu-note {
    font-size: 11px;
  }
  .acu-error {
    font-size: 11px;
  }
  .acu-logo-drop {
    height: 200px;
  }
  .acu-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 22px;
  }
  .acu-btn {
    height: 40px;
    min-width: 150px;
    font-size: 12px;
  }
  .acu-btn-primary {
    min-width: 180px;
  }
  .acu-logo-title {
    font-size: 13px;
  }
  .acu-logo-sub {
    font-size: 11px;
  }
}

@media (max-width: 991px) {
  .acu-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .acu-title {
    font-size: 21px;
  }
  .acu-steps {
    grid-template-columns: 1fr 1fr;
  }
  .acu-layout {
    grid-template-columns: 1fr;
  }
  .acu-logo-drop {
    height: 140px;
  }
  .acu-grid {
    grid-template-columns: 1fr;
  }
  .acu-label {
    font-size: 12px;
  }
  .acu-input {
    height: 40px;
    font-size: 14px;
  }
  .acu-actions {
    position: sticky;
    bottom: 0;
    padding: 10px 0;
    background: #f5f6fa;
  }
  .acu-actions .acu-btn {
    flex: 1;
    height: 42px;
    font-size: 13px;
    min-width: 0;
  }
}

@media (max-width: 576px) {
  .acu-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   customer.css — Customer Detail

   ================================================ */

.cdt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.cdt-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.cdt-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.cdt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.cdt-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.cdt-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.cdt-btn-primary {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.2);
}
.cdt-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.cdt-head-btn {
  min-width: 170px;
}

.cdt-card {
  padding: 16px 12px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.cdt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.cdt-card-head .cdt-btn-primary {
  min-width: 150px;
}
.cdt-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.cdt-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.cdt-profile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
}
.cdt-logo {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: #e3edfd;
  color: #1d6fe8;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cdt-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.cdt-profile-info {
  flex: 1;
  min-width: 0;
}
.cdt-profile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.cdt-profile-addr {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0 0 10px;
}
.cdt-profile-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
}
.cdt-profile-contact a {
  min-width: 160px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: none;
}
.cdt-profile-contact a:hover {
  color: #1d6fe8;
  text-decoration: underline;
}
.cdt-profile-status {
  min-width: 74px;
  margin-right: 12px;
}

.cdt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 20px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.cdt-pill-active {
  background: #dcf3e4;
  color: #15803d;
}
.cdt-pill-attention,
.cdt-pill-review {
  background: #fdf0d2;
  color: #b45309;
}
.cdt-pill-inactive {
  background: #eceff3;
  color: #6b7280;
}

.cdt-sites {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cdt-site {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 120px 140px 90px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 6px 12px 6px 8px;
  background: #f5f6f9;
  border-radius: 5px;
  transition: background 0.2s;
}
.cdt-site:hover {
  background: #eef1f6;
}
.cdt-site.is-new {
  animation: cdtFlash 1.6s ease;
}
@keyframes cdtFlash {
  0%,
  30% {
    background: #e3edfd;
  }
  100% {
    background: #f5f6f9;
  }
}
.cdt-site-icon {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cdt-site-icon-active {
  background: #e3edfd;
  color: #1d6fe8;
}
.cdt-site-icon-attention {
  background: #fdf0d2;
  color: #b45309;
}
.cdt-site-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cdt-site-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}
.cdt-site-addr {
  font-size: 8px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cdt-site-projects {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dark);
}
.cdt-view {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #1d6fe8;
  text-decoration: none;
  white-space: nowrap;
}
.cdt-view i {
  font-size: 8px;
  transition: transform 0.2s;
}
.cdt-view:hover {
  color: #175cc4;
}
.cdt-view:hover i {
  transform: translateX(2px);
}
.cdt-site-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 2px;
}
.cdt-inline-form {
  display: inline;
  margin: 0;
}
.cdt-inline-link,
.cdt-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
}
.cdt-inline-link {
  color: #1d6fe8;
}
.cdt-inline-link:hover {
  color: #175cc4;
}
.cdt-link-success {
  color: #198754;
}
.cdt-link-success:hover {
  color: #146c43;
}
.cdt-link-danger {
  color: #dc3545;
}
.cdt-link-danger:hover {
  color: #b02a37;
}

.cdt-contacts-card {
  min-height: 100px;
}
.cdt-contacts-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.cdt-contacts {
  .cdt-contacts {
    list-style: disc;      
    padding-left: 20px;     
    margin: 10px 0 0;
    display: block;        
    font-size: 10px;
    color: var(--text-muted);
}

/* Optional: Add spacing between the list items since gap doesn't work on block layout */
.cdt-contacts li {
    margin-bottom: 6px; 
}
}
.cdt-contacts-btn {
  min-width: 160px;
  margin-top: 10px;
}

.cdt-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.cdt-modal .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.cdt-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.cdt-modal .modal-body {
  padding: 18px 22px 6px;
}
.cdt-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}
.cdt-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.cdt-field {
  margin-bottom: 14px;
}
.cdt-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.cdt-req {
  color: #dc3545;
}
.cdt-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cdt-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.cdt-textarea {
  height: auto;
  resize: vertical;
}
.cdt-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.cdt-field.has-error .cdt-input {
  border-color: #dc3545;
}
.cdt-field.has-error .cdt-error {
  display: block;
}

.cdt-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cdt-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f5f6f9;
  border-radius: 6px;
}
.cdt-contact-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e3edfd;
  color: #1d6fe8;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdt-contact-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cdt-contact-meta strong {
  font-size: 13px;
  color: var(--text-dark);
}
.cdt-contact-meta span {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdt-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: #fff;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.cdt-icon-btn:hover {
  color: #1d6fe8;
  border-color: #1d6fe8;
}
.cdt-icon-btn.is-danger:hover {
  color: #dc3545;
  border-color: #dc3545;
}
.cdt-contact-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.cdt-contact-form {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px dashed #cbd3de;
  border-radius: 8px;
}
.cdt-form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.cdt-contact-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.cdt-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.cdt-toast i {
  color: #22c55e;
}
.cdt-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1200px) {
  .cdt-logo {
    width: 72px;
    height: 72px;
    font-size: 20px;
  }
  .cdt-profile-name {
    font-size: 16px;
  }
  .cdt-profile-addr,
  .cdt-profile-contact a {
    font-size: 12px;
  }
  .cdt-profile-contact a {
    min-width: 200px;
  }
  .cdt-site {
    min-height: 46px;
    grid-template-columns: 30px minmax(0, 1fr) 140px 150px 100px;
  }
  .cdt-site-icon {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .cdt-site-name {
    font-size: 13px;
  }
  .cdt-site-addr {
    font-size: 10px;
  }
  .cdt-site-projects,
  .cdt-view {
    font-size: 12px;
  }
  .cdt-contacts {
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .cdt-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .cdt-head {
    flex-direction: column;
  }
  .cdt-head-btn {
    width: 100%;
  }
  .cdt-title {
    font-size: 21px;
  }
  .cdt-profile {
    flex-wrap: wrap;
  }
  .cdt-profile-status {
    order: -1;
    margin: 0 0 0 auto;
  }
  .cdt-profile-info {
    flex-basis: 100%;
  }
  .cdt-card-head .cdt-btn-primary {
    width: 100%;
  }
  .cdt-site {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 10px;
  }
  .cdt-site-projects {
    grid-column: 2;
    font-size: 12px;
  }
  .cdt-site-status {
    grid-column: 3;
    grid-row: 1;
  }
  .cdt-view {
    grid-column: 1 / -1;
    justify-content: center;
    height: 34px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
  }
  .cdt-site-addr {
    white-space: normal;
    font-size: 11px;
  }
  .cdt-site-name {
    font-size: 13px;
  }
  .cdt-contacts-btn {
    width: 100%;
  }
  .cdt-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .cdt-modal .modal-footer > * {
    flex: 1;
  }
  .cdt-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cdt-site.is-new {
    animation: none;
  }
}

/* ================================================
   add-customer-site.css — Add Customer Site

   ================================================ */

.acs-head {
  margin-bottom: 12px;
}
.acs-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.acs-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.acs-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 8px;
  padding: 0;
  margin: 0 0 12px;
  list-style: none;
}
.acs-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
}
.acs-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eef0f4;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acs-step-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acs-step-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.acs-step-sub {
  font-size: 10px;
  color: var(--text-muted);
}
.acs-step.is-done .acs-step-num {
  background: #16a34a;
  font-size: 13px;
}
.acs-step.is-current {
  background: #e8f0fe;
  border-color: #7fa6e0;
}
.acs-step.is-current .acs-step-num {
  background: #1d6fe8;
}

.acs-card {
  padding: 16px 12px 28px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.acs-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.acs-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.acs-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 18px;
}
.acs-span-full {
  grid-column: span 6;
}
.acs-span-half {
  grid-column: span 3;
}
.acs-span-third {
  grid-column: span 2;
}

.acs-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.acs-req {
  color: #dc3545;
}
.acs-input {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.acs-input::placeholder {
  color: #6b7280;
}
.acs-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}
.acs-input-locked,
.acs-input-locked:focus {
  background: #e9edf3;
  border-color: #e3e7ee;
  box-shadow: none;
  font-weight: 700;
  color: #4b5563;
  cursor: default;
}
.acs-textarea {
  height: 64px;
  padding-top: 12px;
  resize: vertical;
}
.acs-select {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.acs-select.is-placeholder {
  color: #6b7280;
}
.acs-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.acs-field.has-error .acs-input {
  border-color: #dc3545;
}
.acs-field.has-error .acs-error {
  display: block;
}

.acs-info {
  padding: 14px 10px;
  margin-bottom: 14px;
  background: #e8f0fe;
  border: 1px solid #dbe6fb;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1d6fe8;
}

.acs-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.acs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 150px;
  height: 40px;
  padding: 0 20px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.acs-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.acs-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.acs-btn-primary {
  min-width: 180px;
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
}
.acs-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.acs-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.acs-done {
  padding: 48px 20px;
  text-align: center;
}
.acs-done-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #dcf3e4;
  color: #16a34a;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acs-done-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.acs-done-text {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.acs-done-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.acs-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.acs-toast i {
  color: #22c55e;
}
.acs-toast.is-error i {
  color: #f87171;
}
.acs-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.acs-contact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.acs-contact-picked {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef7f1;
  color: #1a7f45;
  font-size: 12px;
  font-weight: 600;
}
.acs-contact-picked i {
  font-size: 14px;
}

@media (max-width: 991px) {
  .acs-toast {
    bottom: 90px;
  }
  .acs-span-third {
    grid-column: span 3;
  }
  .acs-span-third:last-child {
    grid-column: span 6;
  }
}

@media (max-width: 768px) {
  .acs-title {
    font-size: 21px;
  }
  .acs-steps {
    grid-template-columns: 1fr 1fr;
  }
  .acs-grid {
    grid-template-columns: 1fr;
  }
  .acs-span-full,
  .acs-span-half,
  .acs-span-third,
  .acs-span-third:last-child {
    grid-column: auto;
  }
  .acs-input {
    height: 42px;
    font-size: 14px;
  }
  .acs-actions .acs-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .acs-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   site.css — Customer Site Detail

   ================================================ */

.sdt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.sdt-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.sdt-subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}
.sdt-subtitle a {
  color: var(--text-muted);
  text-decoration: none;
}
.sdt-subtitle a:hover {
  color: #1d6fe8;
  text-decoration: underline;
}
.sdt-subtitle span::before {
  content: "\00B7";
  margin: 0 8px;
}

.sdt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.sdt-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.sdt-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
  color: #1d5fd1;
}
.sdt-btn-primary {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.2);
}
.sdt-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.sdt-head-btn {
  min-width: 170px;
}

.sdt-card {
  padding: 16px 12px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.sdt-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.sdt-card-head .sdt-btn-primary {
  min-width: 160px;
}
.sdt-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.sdt-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.sdt-info {
  padding: 12px;
}
.sdt-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-bottom: 16px;
}
.sdt-info-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.sdt-info-value {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.sdt-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #1d6fe8;
}
.sdt-crumbs a {
  color: #1d6fe8;
  text-decoration: none;
}
.sdt-crumbs a:hover {
  text-decoration: underline;
}
.sdt-crumbs i {
  font-size: 8px;
  color: var(--text-muted);
}

.sdt-projects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sdt-project {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 190px 150px 110px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px 8px 8px;
  background: #f5f6f9;
  border-radius: 6px;
  transition: background 0.2s;
}
.sdt-project:hover {
  background: #eef1f6;
}
.sdt-code {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sdt-code-blue {
  background: #e3edfd;
  color: #1d6fe8;
}
.sdt-code-green {
  background: #dcf3e4;
  color: #15803d;
}
.sdt-code-purple {
  background: #ede6fd;
  color: #6d28d9;
}
.sdt-project-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sdt-project-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.sdt-division {
  font-size: 9px;
  font-weight: 600;
}
.sdt-text-blue {
  color: #1d6fe8;
}
.sdt-text-green {
  color: #16a34a;
}
.sdt-text-purple {
  color: #7c3aed;
}
.sdt-dates {
  font-size: 10px;
  color: var(--text-muted);
}
.sdt-dates.is-missing {
  color: #b45309;
}

.sdt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 22px;
  padding: 0 14px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.sdt-pill-active {
  background: #dcf3e4;
  color: #15803d;
}
.sdt-pill-setup {
  background: #fdf0d2;
  color: #b45309;
}

.sdt-open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #1d6fe8;
  text-decoration: none;
  white-space: nowrap;
}
.sdt-open i {
  font-size: 9px;
  transition: transform 0.2s;
}
.sdt-open:hover {
  color: #175cc4;
}
.sdt-open:hover i {
  transform: translateX(2px);
}

.sdt-contacts-card {
  padding-bottom: 28px;
}
.sdt-contacts-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.sdt-contacts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 260px;
}
.sdt-contact {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.sdt-contact-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dark);
}
.sdt-contact-detail {
  font-size: 10px;
  color: var(--text-muted);
}
.sdt-contacts-btn {
  min-width: 170px;
}

.sdt-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.sdt-modal .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.sdt-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.sdt-modal .modal-body {
  padding: 18px 22px 6px;
}
.sdt-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}
.sdt-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}
.sdt-field {
  margin-bottom: 14px;
}
.sdt-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.sdt-req {
  color: #dc3545;
}
.sdt-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sdt-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.sdt-textarea {
  height: auto;
  resize: vertical;
}
.sdt-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.sdt-field.has-error .sdt-input {
  border-color: #dc3545;
}
.sdt-field.has-error .sdt-error {
  display: block;
}
.sdt-input.is-invalid {
  border-color: #dc3545;
}
.sdt-input.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}
.sdt-field .invalid-feedback {
  font-size: 11px;
}

.sdt-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sdt-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f5f6f9;
  border-radius: 6px;
}
.sdt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e3edfd;
  color: #1d6fe8;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sdt-contact-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sdt-contact-meta strong {
  font-size: 13px;
  color: var(--text-dark);
}
.sdt-contact-meta span {
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.sdt-badge-primary {
  padding: 2px 8px;
  border-radius: 10px;
  background: #e3edfd;
  color: #1d6fe8;
  font-size: 10px;
  font-weight: 700;
}
.sdt-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  background: #fff;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sdt-icon-btn:hover {
  color: #1d6fe8;
  border-color: #1d6fe8;
}
.sdt-icon-btn.is-danger:hover {
  color: #dc3545;
  border-color: #dc3545;
}
.sdt-contact-empty {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.sdt-contact-form {
  padding: 14px;
  margin-bottom: 14px;
  border: 1px dashed #cbd3de;
  border-radius: 8px;
}
.sdt-form-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.sdt-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.sdt-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.sdt-toast i {
  color: #22c55e;
}
.sdt-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1200px) {
  .sdt-info-value {
    font-size: 13px;
  }
  .sdt-crumbs {
    font-size: 11px;
  }
  .sdt-project-name {
    font-size: 13px;
  }
  .sdt-division {
    font-size: 10px;
  }
  .sdt-dates {
    font-size: 11px;
  }
  .sdt-contact-name {
    font-size: 12px;
  }
  .sdt-contact-detail {
    font-size: 11px;
  }
}

@media (max-width: 991px) {
  .sdt-toast {
    bottom: 90px;
  }
  .sdt-project {
    grid-template-columns: 30px minmax(0, 1fr) 150px 100px;
  }
  .sdt-status-cell {
    display: none;
  }
}

@media (max-width: 768px) {
  .sdt-head {
    flex-direction: column;
  }
  .sdt-head-btn {
    width: 100%;
  }
  .sdt-title {
    font-size: 21px;
  }
  .sdt-info-grid {
    grid-template-columns: 1fr;
  }
  .sdt-card-head .sdt-btn-primary {
    width: 100%;
  }
  .sdt-project {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px 10px;
    padding: 10px;
  }
  .sdt-status-cell {
    display: block;
    grid-column: 3;
    grid-row: 1;
  }
  .sdt-dates {
    grid-column: 2 / -1;
  }
  .sdt-open {
    grid-column: 1 / -1;
    justify-content: center;
    height: 34px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
  }
  .sdt-contact {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .sdt-contacts-btn {
    width: 100%;
  }
  .sdt-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .sdt-modal .modal-footer > * {
    flex: 1;
  }
  .sdt-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   progress-reports.css — Progress Reports

   ================================================ */

.prr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.prr-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.prr-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}

.prr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}
.prr-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.prr-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.prr-btn-primary {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.2);
}
.prr-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
  color: #fff;
}
.prr-head-btn {
  min-width: 170px;
  height: 42px;
}

.prr-card {
  padding: 16px 16px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.prr-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.prr-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 18px;
}

.prr-period-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.prr-eyebrow {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.prr-period-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0;
}
.prr-filter-btn {
  min-width: 178px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #1d5fd1;
  cursor: pointer;
  transition: all 0.2s;
}
.prr-filter-btn i {
  font-size: 6px;
}
.prr-filter-btn:hover,
.prr-filter-btn[aria-expanded="true"] {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.prr-filter-menu {
  min-width: 178px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.prr-filter-menu .dropdown-item.active,
.prr-filter-menu .dropdown-item:active {
  background: #e3edfd;
  color: #1d5fd1;
}

.prr-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1135px;
}
.prr-stat {
  display: grid;
  grid-template-columns: 24px auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f5f6f9;
  border-radius: 5px;
}
.prr-stat-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prr-stat-icon span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.prr-icon-green {
  background: #e3f5ea;
  color: #16a34a;
}
.prr-icon-blue {
  background: #e3edfd;
  color: #1d6fe8;
}
.prr-icon-amber {
  background: #fdf0d2;
  color: #d97706;
}
.prr-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  align-self: start;
}
.prr-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}
.prr-stat-note {
  font-size: 8px;
  font-weight: 600;
  text-align: right;
}
.prr-text-green {
  color: #16a34a;
}
.prr-text-blue {
  color: #1d6fe8;
}
.prr-text-amber {
  color: #d97706;
}

.prr-list-card {
  padding-bottom: 40px;
}
.prr-reports {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prr-report {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 112px 140px;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px 26px 8px 12px;
  background: #f5f6f9;
  border-radius: 6px;
  transition: background 0.2s;
}
.prr-report:hover {
  background: #eef1f6;
}
.prr-report[hidden] {
  display: none;
}
.prr-report.is-new {
  animation: prrFlash 1.6s ease;
}
@keyframes prrFlash {
  0%,
  30% {
    background: #e3edfd;
  }
  100% {
    background: #f5f6f9;
  }
}
.prr-date {
  width: 44px;
  height: 40px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}
.prr-date-day {
  font-size: 12px;
  font-weight: 700;
}
.prr-date-mon {
  font-size: 8px;
  font-weight: 600;
}
.prr-date-published {
  background: #e3f5ea;
  color: #16a34a;
}
.prr-date-issue {
  background: #fdf0d2;
  color: #d97706;
}
.prr-date-draft {
  background: #e3edfd;
  color: #1d6fe8;
}
.prr-report-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.prr-report-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dark);
}
.prr-report-sub {
  font-size: 9px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prr-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 26px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.prr-pill-published {
  background: #dcf3e4;
  color: #15803d;
}
.prr-pill-issue {
  background: #fdf0d2;
  color: #b45309;
}
.prr-pill-draft {
  background: #e3edfd;
  color: #1d6fe8;
}

.prr-open {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1d6fe8;
  text-decoration: none;
  white-space: nowrap;
}
.prr-open i {
  font-size: 8px;
  transition: transform 0.2s;
}
.prr-open:hover {
  color: #175cc4;
}
.prr-open:hover i {
  transform: translateX(2px);
}

.prr-empty {
  display: none;
  text-align: center;
  padding: 30px 16px 0;
  color: var(--text-muted);
}
.prr-empty.show {
  display: block;
}
.prr-empty i {
  font-size: 24px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}
.prr-empty p {
  font-size: 13px;
  margin: 0;
}

.prr-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.prr-modal .modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.prr-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.prr-modal .modal-body {
  padding: 18px 22px 6px;
}
.prr-modal .modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
  gap: 8px;
}
.prr-field {
  margin-bottom: 16px;
}
.prr-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.prr-req {
  color: #dc3545;
}
.prr-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.prr-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.prr-hint {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}
.prr-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.prr-field.has-error .prr-input {
  border-color: #dc3545;
}
.prr-field.has-error .prr-error {
  display: block;
}
.prr-field.has-error .prr-hint {
  display: none;
}
.prr-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.prr-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.prr-option input {
  margin: 0;
  accent-color: #1d6fe8;
}
.prr-option:has(input:checked) {
  background: #f0f5fe;
  border-color: #b9cff5;
}

.prr-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.prr-toast i {
  color: #22c55e;
}
.prr-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1400px) {
  .prr-period-title {
    font-size: 15px;
  }
  .prr-stat-label {
    font-size: 11px;
  }
  .prr-stat-note {
    font-size: 9px;
  }
  .prr-report-title {
    font-size: 13px;
  }
  .prr-report-sub {
    font-size: 10px;
  }
}

@media (max-width: 1199px) {
  .prr-stats {
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: none;
  }
}

@media (max-width: 991px) {
  .prr-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .prr-head {
    flex-direction: column;
  }
  .prr-head-btn {
    width: 100%;
  }
  .prr-title {
    font-size: 20px;
  }
  .prr-period-head {
    flex-direction: column;
  }
  .prr-filter,
  .prr-filter-btn {
    width: 100%;
  }
  .prr-report {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px;
  }
  .prr-report-sub {
    white-space: normal;
    font-size: 11px;
  }
  .prr-status-cell {
    grid-column: 2;
  }
  .prr-pill {
    width: auto;
    padding: 0 14px;
  }
  .prr-open {
    grid-column: 1 / -1;
    justify-content: center;
    height: 34px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 12px;
  }
  .prr-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .prr-modal .modal-footer > * {
    flex: 1;
  }
  .prr-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prr-report.is-new {
    animation: none;
  }
}

/* ================================================
   progress-report.css — New Progress Report

   ================================================ */

.prp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.prp-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.prp-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.prp-state {
  padding: 4px 12px;
  margin-bottom: 6px;
  border-radius: 20px;
  background: #dcf3e4;
  color: #15803d;
  font-size: 11px;
  font-weight: 700;
}
.prp-subtitle {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.prp-subtitle span + span::before {
  content: "\00B7";
  margin: 0 6px;
}
.prp-head-actions {
  display: flex;
  gap: 10px;
}

.prp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 140px;
  height: 40px;
  padding: 0 20px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s;
}
.prp-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: #1d5fd1;
}
.prp-btn-light:hover {
  border-color: #1d5fd1;
  background: #f4f7fe;
}
.prp-btn-primary {
  min-width: 180px;
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 111, 232, 0.2);
}
.prp-btn-primary:hover {
  background: #175cc4;
  border-color: #175cc4;
}
.prp-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.prp-card {
  padding: 14px 14px 16px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.prp-card-fill {
  height: 100%;
  margin-bottom: 0;
}
.prp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.prp-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.prp-card-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin: -8px 0 10px;
}
.prp-total {
  font-size: 11px;
  color: var(--text-muted);
}
.prp-total strong {
  color: var(--text-dark);
}

.prp-details {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 1000px;
}

.prp-field {
  margin-bottom: 10px;
}
.prp-field:last-child {
  margin-bottom: 0;
}
.prp-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 6px;
}
.prp-req {
  color: #dc3545;
}
.prp-input {
  width: 100%;
  height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: #fff;
  font-size: 10px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.prp-input::placeholder {
  color: #6b7280;
}
.prp-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.12);
}
.prp-locked,
.prp-locked:focus {
  background: #e9edf3;
  border-color: #e3e7ee;
  box-shadow: none;
  font-weight: 700;
  color: #4b5563;
  cursor: default;
}
.prp-soft {
  background: #e9edf3;
  border-color: #e3e7ee;
  font-weight: 700;
  color: #4b5563;
}
.prp-soft:focus {
  background: #fff;
}
.prp-select {
  appearance: none;
  cursor: pointer;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.prp-select.is-placeholder {
  color: #6b7280;
  font-weight: 400;
}
.prp-textarea {
  height: 52px;
  resize: vertical;
  padding-top: 10px;
}
.prp-textarea-sm {
  height: 42px;
}
.prp-error {
  display: none;
  font-size: 10px;
  color: #dc3545;
  margin-top: 4px;
}
.prp-field.has-error .prp-input {
  border-color: #dc3545;
}
.prp-field.has-error .prp-error {
  display: block;
}

.prp-labour {
  overflow-x: auto;
}
.prp-lab-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) repeat(7, minmax(64px, 1fr)) 26px;
  gap: 8px 10px;
  align-items: center;
  min-width: 760px;
  margin-bottom: 8px;
}
.prp-lab-headrow {
  margin-bottom: 6px;
}
.prp-lab-th {
  font-size: 9px;
  font-weight: 600;
  color: #4b5563;
}
.prp-lab-num {
  text-align: left;
}
.prp-remove {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.prp-remove:hover {
  color: #dc3545;
  background: #fdecef;
}

.prp-add-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  margin-top: 4px;
  border: none;
  background: transparent;
  font-size: 11px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #1d6fe8;
  cursor: pointer;
}
.prp-add-link:hover {
  text-decoration: underline;
}
.prp-add-link i {
  font-size: 10px;
}

.prp-delay-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 0 12px;
}
.prp-span-all {
  grid-column: 1 / -1;
}
.prp-area-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.prp-area-row .prp-field {
  flex: 1;
}

.prp-draw-head,
.prp-draw-row {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) 26px;
  gap: 12px;
  align-items: center;
}
.prp-draw-row {
  margin-bottom: 8px;
}

.prp-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.prp-files-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #1d6fe8;
  cursor: pointer;
  transition: all 0.2s;
}
.prp-files-btn:hover,
.prp-files-btn.is-over {
  border-color: #1d6fe8;
  background: #f4f7fe;
}
.prp-file:focus-visible + .prp-file-list,
.prp-files-btn:focus-within {
  outline: 2px solid #1d6fe8;
}
.prp-file-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prp-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: #f5f6f9;
  border-radius: 5px;
  font-size: 11px;
}
.prp-file-thumb {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #e3edfd;
  color: #1d6fe8;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.prp-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prp-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prp-saved {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.prp-form-locked .prp-add-link,
.prp-form-locked .prp-remove,
.prp-form-locked .prp-files-btn {
  display: none;
}

.prp-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.prp-toast i {
  color: #22c55e;
}
.prp-toast.is-error i {
  color: #f87171;
}
.prp-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1200px) {
  .prp-card-title {
    font-size: 14px;
  }
  .prp-card-sub {
    font-size: 10px;
  }
  .prp-label,
  .prp-lab-th {
    font-size: 10px;
  }
  .prp-input {
    height: 34px;
    font-size: 12px;
  }
  .prp-textarea {
    height: 60px;
  }
  .prp-textarea-sm {
    height: 48px;
  }
}

@media (max-width: 1199px) {
  .prp-details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

@media (max-width: 991px) {
  .prp-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .prp-head {
    flex-direction: column;
  }
  .prp-head-actions {
    width: 100%;
  }
  .prp-head-actions .prp-btn {
    flex: 1;
    min-width: 0;
  }
  .prp-title {
    font-size: 21px;
  }
  .prp-details {
    grid-template-columns: 1fr 1fr;
  }
  .prp-label,
  .prp-lab-th {
    font-size: 11px;
  }
  .prp-input {
    height: 40px;
    font-size: 14px;
  }
  .prp-textarea {
    height: 80px;
  }
  .prp-delay-grid {
    grid-template-columns: 1fr;
  }
  .prp-draw-head {
    display: none;
  }
  .prp-draw-row {
    grid-template-columns: 1fr 26px;
  }
  .prp-draw-row .prp-draw-status {
    grid-column: 1;
  }
  .prp-draw-row .prp-lab-remove-slot,
  .prp-draw-row .prp-remove {
    grid-column: 2;
    grid-row: 1;
  }
  .prp-draw-row {
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-color);
  }
}

@media (max-width: 576px) {
  .prp-toast {
    left: 16px;
    right: 16px;
  }
}

/* ================================================
   clients.css — Clients & Customers

   ================================================ */

.cln-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.cln-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 6px;
}
.cln-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}
.cln-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: 6px;
  background: #1d6fe8;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}
.cln-new-btn:hover {
  background: #175cc4;
}
.cln-new-btn i {
  font-size: 15px;
}

.cln-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.cln-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
}
.cln-stat-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.cln-icon-blue {
  background: #dbe8fc;
  color: #1d6fe8;
}
.cln-icon-green {
  background: #dcf3e4;
  color: #16a34a;
}
.cln-icon-purple {
  background: #ece4fc;
  color: #7c3aed;
}
.cln-stat-label {
  display: block;
  font-size: 11px;
  color: #4b5563;
  margin-bottom: 2px;
}
.cln-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
}

.cln-table-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.cln-table-scroll {
  overflow-x: auto;
}
.cln-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}
.cln-table th {
  padding: 10px 6px;
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.cln-table th:first-child,
.cln-table td:first-child {
  padding-left: 6px;
}
.cln-table td {
  padding: 8px 6px;
  font-size: 11px;
  color: var(--text-dark);
  border-bottom: 1px solid #edf0f3;
  vertical-align: middle;
}
.cln-table tbody tr:last-child td {
  border-bottom: none;
}
.cln-table tbody tr {
  transition: background 0.2s;
}
.cln-table tbody tr:hover {
  background: rgba(0, 166, 81, 0.06);
}
.cln-table tbody tr.is-new {
  animation: clnFlash 1.6s ease;
}
@keyframes clnFlash {
  0%,
  30% {
    background: #e8f0fe;
  }
  100% {
    background: transparent;
  }
}
.cln-center {
  text-align: center !important;
}

.cln-client {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cln-client-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f1f3f6;
  color: #9aa3af;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cln-client-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cln-client-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dark);
}
.cln-client-id,
.cln-contact-email {
  font-size: 9px;
  color: var(--text-muted);
}
.cln-contact-name {
  display: block;
  font-size: 11px;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.cln-contact-email {
  text-decoration: none;
}
.cln-contact-email:hover {
  color: #1d6fe8;
  text-decoration: underline;
}
.cln-phone {
  color: var(--text-dark);
  text-decoration: none;
  white-space: nowrap;
}
.cln-phone:hover {
  color: #1d6fe8;
}
.cln-address {
  max-width: 380px;
}
.cln-sites {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
}
.cln-projects {
  font-weight: 700;
}
.cln-table .cln-th-actions,
.cln-table .cln-actions {
  text-align: right;
  padding-right: 12px !important;
}
.cln-manage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 11px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.2s;
}
.cln-manage:hover {
  background: #f1f5fd;
  color: #1d6fe8;
}
.cln-manage i {
  font-size: 12px;
}
.cln-actions-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cln-actions-form {
  display: inline-flex;
  margin: 0;
}
.cln-manage.cln-manage-danger {
  color: #dc3545;
}
.cln-manage.cln-manage-danger:hover {
  background: rgba(220, 53, 69, 0.08);
  color: #b02a37;
}
.cln-manage.cln-manage-success {
  color: #16a34a;
}
.cln-manage.cln-manage-success:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

.cln-modal .modal-content {
  border: none;
  border-radius: 10px;
}
.cln-modal .modal-header {
  align-items: flex-start;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-color);
}
.cln-modal .modal-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.cln-modal-id {
  font-size: 11px;
  color: var(--text-muted);
}
.cln-modal .modal-body {
  padding: 18px 22px 6px;
}
.cln-modal .modal-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 22px;
  border-top: 1px solid var(--border-color);
}
.cln-footer-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.cln-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.cln-span-2 {
  grid-column: 1 / -1;
}
.cln-field {
  margin-bottom: 14px;
}
.cln-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.cln-req {
  color: #dc3545;
}
.cln-input {
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-family: "Inter", sans-serif;
  color: var(--text-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.cln-input:focus {
  border-color: #1d6fe8;
  box-shadow: 0 0 0 3px rgba(29, 111, 232, 0.15);
}
.cln-textarea {
  height: auto;
  resize: vertical;
}
.cln-error {
  display: none;
  font-size: 11px;
  color: #dc3545;
  margin-top: 4px;
}
.cln-field.has-error .cln-input {
  border-color: #dc3545;
}
.cln-field.has-error .cln-error {
  display: block;
}

.cln-manage-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: #f5f6f9;
  border-radius: 6px;
}
.cln-extra-stats {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-muted);
}
.cln-extra-stats strong {
  color: var(--text-dark);
}
.cln-link {
  font-size: 12px;
  font-weight: 600;
  color: #1d6fe8;
  text-decoration: none;
}
.cln-link:hover {
  text-decoration: underline;
}

.cln-btn {
  height: 36px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.cln-btn-light {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
}
.cln-btn-light:hover {
  background: #f5f6f8;
}
.cln-btn-primary {
  background: #1d6fe8;
  border: 1px solid #1d6fe8;
  color: #fff;
}
.cln-btn-primary:hover {
  background: #175cc4;
}
.cln-btn-danger {
  background: transparent;
  border: none;
  color: #dc3545;
  padding: 0 4px;
}
.cln-btn-danger:hover {
  text-decoration: underline;
}

.cln-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.25s,
    transform 0.25s;
}
.cln-toast i {
  color: #22c55e;
}
.cln-toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 1400px) {
  .cln-table th,
  .cln-table td,
  .cln-client-name,
  .cln-contact-name,
  .cln-manage {
    font-size: 12px;
  }
  .cln-client-id,
  .cln-contact-email {
    font-size: 10px;
  }
  .cln-table td {
    padding: 10px 8px;
  }
}

@media (max-width: 991px) {
  .cln-toast {
    bottom: 90px;
  }
}

@media (max-width: 768px) {
  .cln-head {
    flex-direction: column;
  }
  .cln-new-btn {
    width: 100%;
    justify-content: center;
    height: 40px;
  }
  .cln-title {
    font-size: 20px;
  }
  .cln-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cln-table {
    min-width: 0;
  }
  .cln-table thead {
    display: none;
  }
  .cln-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
  }
  .cln-table td {
    display: block;
    padding: 0 !important;
    border: none;
    font-size: 12px;
    text-align: left !important;
  }
  .cln-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  .cln-table td[data-label="Client"],
  .cln-table td[data-label="Address"],
  .cln-table td.cln-actions {
    grid-column: 1 / -1;
  }
  .cln-table td[data-label="Client"]::before {
    display: none;
  }
  .cln-client-name {
    font-size: 14px;
    font-weight: 600;
  }
  .cln-manage {
    width: 100%;
    justify-content: center;
    height: 36px;
    border: 1px solid var(--border-color);
  }
  .cln-actions-group,
  .cln-actions-form {
    width: 100%;
  }
  .cln-actions-group {
    flex-direction: column;
    align-items: stretch;
  }
  .cln-grid {
    grid-template-columns: 1fr;
  }
}

.pdb-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto 1.25rem;
  padding-top: 0.25rem;
}

.pdb-back {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.5rem;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  color: #2563eb;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.pdb-back:hover {
  background: #f1f5ff;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.pdb-head-text {
  text-align: center;
}

.pdb-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1a1d29;
  line-height: 1.3;
}

.pdb-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: #6b7280;
}

.pdb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}

.pdb-card {
  --pdb-color: #2fa0d0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-top: 3px solid var(--pdb-color);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.pdb-card-muted {
  background: #dcdcdc;
  border-color: #d2d2d2;
  border-top-color: var(--pdb-color);
}

.pdb-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--pdb-color);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
}

.pdb-card-title {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111827;
}

.pdb-card-desc {
  margin: 0 0 0.9rem;
  font-size: 0.62rem;
  color: #6b7280;
}

.pdb-open {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding: 0.4rem 1.5rem;
  background: var(--pdb-color);
  border-radius: 4px;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.pdb-open:hover {
  color: #fff;
  filter: brightness(0.92);
}

.pdb-c-blue { --pdb-color: #2fa0d0; }
.pdb-c-purple { --pdb-color: #9b2fae; }
.pdb-c-green { --pdb-color: #2ed573; }
.pdb-c-orange { --pdb-color: #e8681a; }
.pdb-c-amber { --pdb-color: #f39c12; }
.pdb-c-teal { --pdb-color: #16a97f; }
.pdb-c-rust { --pdb-color: #d84a0a; }
.pdb-c-violet { --pdb-color: #8e2fbd; }
.pdb-c-lime { --pdb-color: #2ecc5f; }
.pdb-c-sky { --pdb-color: #2185b8; }
.pdb-c-red { --pdb-color: #c0192b; }
.pdb-c-slate { --pdb-color: #6b8588; }

.pdb-back-right {
  left: auto;
  right: 0;
}

.pdb-card-muted .pdb-open {
  background: #9aa3ad;
  cursor: not-allowed;
}

@media (max-width: 1199.98px) {
  .pdb-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .pdb-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdb-head {
    flex-direction: column;
    align-items: stretch;
  }

  .pdb-back {
    position: static;
    align-self: flex-start;
    margin-bottom: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  .pdb-grid {
    grid-template-columns: 1fr;
  }

  .pdb-title {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .cln-modal .modal-footer {
    flex-wrap: wrap;
  }
  .cln-footer-actions {
    width: 100%;
  }
  .cln-footer-actions .cln-btn {
    flex: 1;
  }
  .cln-toast {
    left: 16px;
    right: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cln-table tbody tr.is-new {
    animation: none;
  }
}

/* New design css added here */