/* DocTrack component styles — built on top of theme.css tokens */

* { box-sizing: border-box; margin: 0; padding: 0; }

.dt-body {
  background: var(--pm-navy-darkest);
  color: var(--pm-grey-100);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  min-height: 100vh;
}

.dt-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--pm-space-6);
}

.dt-topbar {
  border-bottom: 1px solid var(--pm-navy-border);
  padding: var(--pm-space-5) 0;
}

.dt-brand {
  font-family: var(--pm-font-heading);
  font-weight: 700;
  font-size: var(--pm-text-xl);
  color: var(--pm-white);
}

.dt-brand span {
  color: var(--pm-teal-accent);
  font-weight: 400;
  font-size: var(--pm-text-sm);
}

.dt-card {
  background: var(--pm-navy-dark);
  border: 1px solid var(--pm-navy-border);
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-card);
  padding: var(--pm-space-8);
  margin: var(--pm-space-8) 0;
}

.dt-card h1 {
  font-family: var(--pm-font-heading);
  font-size: var(--pm-text-3xl);
  font-weight: 700;
  color: var(--pm-white);
  margin-bottom: var(--pm-space-4);
}

.dt-muted {
  color: var(--pm-grey-200);
  font-size: var(--pm-text-sm);
}

.dt-status-row {
  display: flex;
  align-items: center;
  gap: var(--pm-space-3);
  padding: var(--pm-space-4) 0;
  border-top: 1px solid var(--pm-navy-border);
}

.dt-status-row:first-of-type {
  border-top: none;
}

.dt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-2);
  padding: var(--pm-space-1) var(--pm-space-3);
  border-radius: var(--pm-radius-pill);
  font-size: var(--pm-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dt-badge--ok {
  background: rgba(34, 197, 94, 0.15);
  color: var(--pm-success);
}

.dt-badge--fail {
  background: rgba(239, 68, 68, 0.15);
  color: var(--pm-error);
}

.dt-footer {
  color: var(--pm-grey-300);
  font-size: var(--pm-text-xs);
  padding: var(--pm-space-8) 0;
  text-align: center;
}

.dt-link {
  color: var(--pm-blue-light);
  text-decoration: none;
}

.dt-link:hover {
  text-decoration: underline;
}

/* ---- Forms ---- */

.dt-field {
  margin-bottom: var(--pm-space-5);
}

.dt-field label {
  display: block;
  font-size: var(--pm-text-sm);
  color: var(--pm-grey-200);
  margin-bottom: var(--pm-space-2);
}

.dt-field input {
  width: 100%;
  padding: var(--pm-space-3) var(--pm-space-4);
  background: var(--pm-navy-mid);
  border: 1px solid var(--pm-navy-border);
  border-radius: var(--pm-radius-md);
  color: var(--pm-white);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  transition: var(--pm-transition);
}

.dt-field input:focus {
  outline: none;
  border-color: var(--pm-blue-primary);
  box-shadow: var(--pm-shadow-glow);
}

.dt-btn {
  display: inline-block;
  width: 100%;
  padding: var(--pm-space-3) var(--pm-space-5);
  background: var(--pm-blue-primary);
  color: var(--pm-white);
  border: none;
  border-radius: var(--pm-radius-md);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: var(--pm-transition);
}

.dt-btn:hover {
  background: var(--pm-blue-light);
}

.dt-errors {
  list-style: none;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--pm-radius-md);
  padding: var(--pm-space-4);
  margin-bottom: var(--pm-space-5);
}

.dt-errors li {
  color: var(--pm-error);
  font-size: var(--pm-text-sm);
}

.dt-notice {
  background: rgba(0, 201, 167, 0.1);
  border: 1px solid rgba(0, 201, 167, 0.3);
  border-radius: var(--pm-radius-md);
  padding: var(--pm-space-4);
  margin-bottom: var(--pm-space-5);
  color: var(--pm-teal-accent);
  font-size: var(--pm-text-sm);
}

.dt-dev-link {
  word-break: break-all;
  background: var(--pm-navy-mid);
  border: 1px dashed var(--pm-navy-border);
  border-radius: var(--pm-radius-md);
  padding: var(--pm-space-4);
  font-family: monospace;
  font-size: var(--pm-text-sm);
  color: var(--pm-teal-accent);
  margin-bottom: var(--pm-space-5);
}

/* ---- Nav ---- */

.dt-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dt-nav-links {
  display: flex;
  gap: var(--pm-space-6);
}

.dt-nav-links a {
  color: var(--pm-grey-200);
  text-decoration: none;
  font-size: var(--pm-text-sm);
  font-weight: 600;
}

.dt-nav-links a:hover,
.dt-nav-links a.dt-nav-active {
  color: var(--pm-white);
}

/* ---- Tables ---- */

.dt-toolbar {
  display: flex;
  gap: var(--pm-space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pm-space-6);
  flex-wrap: wrap;
}

.dt-toolbar form {
  display: flex;
  gap: var(--pm-space-2);
}

.dt-toolbar input[type="text"],
.dt-toolbar select {
  padding: var(--pm-space-2) var(--pm-space-3);
  background: var(--pm-navy-mid);
  border: 1px solid var(--pm-navy-border);
  border-radius: var(--pm-radius-md);
  color: var(--pm-white);
  font-size: var(--pm-text-sm);
}

.dt-btn-sm {
  display: inline-block;
  padding: var(--pm-space-2) var(--pm-space-4);
  background: var(--pm-blue-primary);
  color: var(--pm-white);
  border: none;
  border-radius: var(--pm-radius-md);
  font-size: var(--pm-text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.dt-btn-sm:hover {
  background: var(--pm-blue-light);
}

.dt-table {
  width: 100%;
  border-collapse: collapse;
}

.dt-table th {
  text-align: left;
  font-size: var(--pm-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pm-grey-300);
  padding: var(--pm-space-3) var(--pm-space-4);
  border-bottom: 1px solid var(--pm-navy-border);
}

.dt-table td {
  padding: var(--pm-space-3) var(--pm-space-4);
  border-bottom: 1px solid var(--pm-navy-border);
  font-size: var(--pm-text-sm);
}

.dt-table tr:hover td {
  background: var(--pm-navy-hover);
}

.dt-row--inactive td {
  opacity: 0.55;
}

.dt-badge--active {
  background: rgba(34, 197, 94, 0.15);
  color: var(--pm-success);
}

.dt-badge--inactive {
  background: rgba(107, 122, 150, 0.2);
  color: var(--pm-grey-300);
}

.dt-badge--expiring_soon {
  background: rgba(245, 158, 11, 0.15);
  color: var(--pm-warning);
}

.dt-badge--expired {
  background: rgba(239, 68, 68, 0.15);
  color: var(--pm-error);
}

.dt-badge--trial {
  background: rgba(0, 201, 167, 0.15);
  color: var(--pm-teal-accent);
}

.dt-badge--suspended {
  background: rgba(239, 68, 68, 0.15);
  color: var(--pm-error);
}

.dt-badge--pending {
  background: rgba(245, 158, 11, 0.15);
  color: var(--pm-warning);
}

.dt-badge--paid {
  background: rgba(34, 197, 94, 0.15);
  color: var(--pm-success);
}

.dt-badge--failed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--pm-error);
}

.dt-pagination {
  display: flex;
  gap: var(--pm-space-2);
  margin-top: var(--pm-space-6);
  justify-content: center;
}

.dt-pagination a, .dt-pagination span {
  padding: var(--pm-space-2) var(--pm-space-4);
  border-radius: var(--pm-radius-md);
  border: 1px solid var(--pm-navy-border);
  color: var(--pm-grey-200);
  text-decoration: none;
  font-size: var(--pm-text-sm);
}

.dt-pagination .dt-page-current {
  background: var(--pm-blue-primary);
  color: var(--pm-white);
  border-color: var(--pm-blue-primary);
}

.dt-field select {
  width: 100%;
  padding: var(--pm-space-3) var(--pm-space-4);
  background: var(--pm-navy-mid);
  border: 1px solid var(--pm-navy-border);
  border-radius: var(--pm-radius-md);
  color: var(--pm-white);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-base);
}

.dt-checkbox-field {
  display: flex;
  align-items: center;
  gap: var(--pm-space-2);
}

.dt-checkbox-field input {
  width: auto;
}

.dt-role-row__employee,
.dt-role-row__role {
  width: 100%;
  min-width: 180px;
  padding: var(--pm-space-2) var(--pm-space-3);
  background: var(--pm-navy-mid);
  border: 1px solid var(--pm-navy-border);
  border-radius: var(--pm-radius-md);
  color: var(--pm-white);
  font-family: var(--pm-font-body);
  font-size: var(--pm-text-sm);
}

.dt-role-row__permissions {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2);
  min-width: 260px;
}

.dt-role-row__permissions .dt-checkbox-field {
  opacity: 0.85;
}