/* Darling's Real Conversations - Global Styles */

:root {
  /* Brand Colors */
  --primary: #25408f;
  --primary-dark: #1a2f6b;
  --primary-light: #4a90e2;

  /* Status Colors */
  --success: #27ae60;
  --warning: #f39c12;
  --danger: #e74c3c;

  /* Neutrals */
  --bg-primary: #ffffff;
  --bg-secondary: #ecf0f1;
  --text-primary: #2c3e50;
  --text-secondary: #7f8c8d;
  --border: #dfe6e9;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', sans-serif;
  --font-size-base: 16px;
  --line-height: 1.6;

  /* Spacing (based on 8px grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition: 200ms ease-in-out;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--text-primary);
  background-color: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--text-primary);
}

h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--text-primary);
}

p {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

/* Loading State */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 18px;
  color: var(--text-secondary);
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* Card Component */
.card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

/* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background-color: var(--border);
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #b02a37;
}

.btn-success {
  background-color: #28a745;
  color: white;
}

.btn-success:hover {
  background-color: #1e7e34;
}

/* Status Badge */
.badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.badge-success {
  background-color: var(--success);
  color: white;
}

.badge-warning {
  background-color: var(--warning);
  color: white;
}

.badge-danger {
  background-color: var(--danger);
  color: white;
}

/* Responsive */
@media (max-width: 768px) {
  .container {
    padding: var(--space-md);
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }
}

/* Additional badge variants */
.badge-primary {
  background-color: var(--primary);
  color: white;
}

.badge-secondary {
  background-color: var(--text-secondary);
  color: white;
}

.badge-purple {
  background-color: #8e44ad;
  color: white;
}

/* ── App Shell ──────────────────────────────────────────────────────────────── */

.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-header {
  background: white;
  border-bottom: 2px solid var(--primary);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-header-brand h1 {
  margin: 0;
  font-size: 22px;
  color: var(--primary);
}

.app-header-user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.app-header-user-name {
  font-weight: 600;
  text-align: right;
}

.app-header-user-email {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: right;
}

.app-nav {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 0 var(--space-xl);
  display: flex;
  gap: var(--space-xs);
}

.app-nav-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-md) var(--space-lg);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
}

.app-nav-btn:hover {
  color: var(--primary);
}

.app-nav-btn--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.app-main {
  flex: 1;
  padding: var(--space-xl);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.app-notice {
  background: #fff3cd;
  border: 1px solid #ffc107;
  margin-bottom: var(--space-lg);
  color: #856404;
}

/* ── Manager Dashboard ──────────────────────────────────────────────────────── */

.md-loading {
  padding: var(--space-2xl);
  text-align: center;
  color: var(--text-secondary);
}

.md-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.md-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.md-stat-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.md-stat-value {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.md-stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.md-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.md-filter-btn {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text-secondary);
}

.md-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.md-filter-btn--active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.md-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.md-table th {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  background: white;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.md-table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

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

.md-row--overdue td {
  background: #fff5f5;
}

.md-employee-id {
  font-family: monospace;
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-action-btn {
  font-size: 13px;
  padding: var(--space-xs) var(--space-md);
}

.md-empty {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--text-secondary);
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ── Schedule Modal ─────────────────────────────────────────────────────────── */

.md-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.md-modal {
  background: white;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
}

.md-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.md-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  line-height: 1;
  padding: 0 var(--space-xs);
}

.md-modal-close:hover {
  color: var(--text-primary);
}

.md-modal-body {
  padding: var(--space-xl);
}

.md-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.md-field {
  margin-bottom: var(--space-lg);
}

.md-field label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-xs);
  font-size: 14px;
}

.md-field input,
.md-field select {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  color: var(--text-primary);
  background: white;
  transition: border-color var(--transition);
}

.md-field input:focus,
.md-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.1);
}

.md-field-hint {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--space-xs);
}

.md-form-error {
  background: #fff5f5;
  border: 1px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: 14px;
  color: var(--danger);
}

/* ── Employee View ──────────────────────────────────────────────────────────── */

.ev-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.ev-section {
  margin-bottom: var(--space-xl);
}

.ev-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-md);
}

.ev-form-panel {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-lg);
  border-left: 4px solid var(--primary);
}

.ev-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
}

.ev-detail-grid {
  display: flex;
  gap: var(--space-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

.ev-detail-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.ev-answer-block {
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

.ev-answer-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* ── Admin Panel ────────────────────────────────────────────────────────────── */

.ap-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border);
}

.ap-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: var(--space-sm) var(--space-lg);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: -1px;
}

.ap-tab:hover { color: var(--primary); }
.ap-tab--active { color: var(--primary); border-bottom-color: var(--primary); }

.ap-summary-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.ap-location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.ap-location-card {
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.ap-location-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.ap-location-name {
  font-size: 16px;
  font-weight: 600;
}

.ap-location-employees {
  font-size: 13px;
  color: var(--text-secondary);
}

.ap-location-body {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-md);
}

.ap-donut-wrap {
  text-align: center;
  flex-shrink: 0;
}

.ap-donut { display: block; }

.ap-donut-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 2px;
}

.ap-location-stats {
  display: flex;
  gap: var(--space-lg);
}

.ap-loc-stat {
  text-align: center;
}

.ap-loc-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.ap-loc-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.ap-danger { color: var(--danger); }

.ap-dept-list {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}

.ap-dept-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}

.ap-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.ap-th-sort:hover { background: var(--bg-hover, #f0f0f0); }
.ap-th-sort--active { color: var(--primary); }
.ap-sort-icon { font-size: 11px; opacity: 0.6; margin-left: 2px; }
.ap-th-sort--active .ap-sort-icon { opacity: 1; }

.ap-quick-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.ap-filter-btn {
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.ap-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.ap-filter-btn--active { background: var(--primary); color: #fff; border-color: var(--primary); }

.ap-dept-name { color: var(--text-secondary); flex: 1; }
.ap-dept-pct { font-size: 12px; font-weight: 600; min-width: 44px; text-align: center; }
.ap-dept-count { font-weight: 600; min-width: 64px; text-align: right; }

.ap-users-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.ap-search {
  width: 320px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 15px;
}

.ap-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 64, 143, 0.1);
}

.ap-user-count {
  font-size: 14px;
  color: var(--text-secondary);
}

.ap-row--inactive {
  opacity: 0.55;
}

.ap-edit-row td {
  background: #f8f9ff;
  padding: var(--space-lg) !important;
}

.ap-edit-form { max-width: 900px; }

.ap-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .md-stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .app-header {
    padding: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .app-main {
    padding: var(--space-md);
  }

  .md-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .md-table {
    display: block;
    overflow-x: auto;
  }

  .md-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .md-header button {
    width: 100%;
  }
}

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

.fade-in {
  animation: fadeIn 300ms ease-out;
}

/* ── Attachments ─────────────────────────────────────────────────────────────── */

.att-section {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--border);
  padding-top: var(--space-md);
}

.att-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.att-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.att-upload-btn {
  padding: var(--space-xs) var(--space-sm) !important;
}

.att-empty {
  font-size: 13px;
  color: var(--text-secondary);
  padding: var(--space-sm) 0;
}

.att-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.att-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: opacity 0.2s;
}

.att-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.att-meta {
  flex: 1;
  min-width: 0;
}

.att-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.att-info {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.att-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.att-status {
  font-size: 13px;
  padding: var(--space-xs) 0;
  margin-bottom: var(--space-sm);
}

/* ── Manager Scorecard grid ──────────────────────────────────────────────────── */

.md-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.md-score-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.md-score-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.md-score-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

/* ── Import / Sync tab ───────────────────────────────────────────────────────── */

.ap-import-section {
  padding: var(--space-lg) 0;
  max-width: 800px;
}

.ap-import-section .card {
  margin-bottom: var(--space-lg);
}

.ap-import-section pre {
  font-size: 12px;
  line-height: 1.5;
}

/* ── Department drill-down ───────────────────────────────────────────────────── */

.ap-dept-row--link {
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
  padding: 5px var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
}
.ap-dept-row--link:hover { background: var(--bg-hover, rgba(37,64,143,0.06)); }
.ap-dept-arrow { color: var(--text-secondary); font-size: 14px; margin-left: var(--space-xs, 4px); }

/* Breadcrumb nav */
.ap-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 6px);
  margin-bottom: var(--space-lg);
  font-size: 14px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.ap-back-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s;
}
.ap-back-btn:hover { background: var(--bg-hover, rgba(37,64,143,0.06)); }
.ap-breadcrumb-sep   { color: var(--border); }
.ap-breadcrumb-loc   { color: var(--text-secondary); }
.ap-breadcrumb-dept  { color: var(--text-primary); font-weight: 600; }

/* Detail page header */
.ap-dept-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.ap-dept-detail-title { margin: 0 0 4px; font-size: 22px; }
.ap-dept-detail-sub   { color: var(--text-secondary); font-size: 14px; }
.ap-dept-detail-stats { display: flex; gap: var(--space-lg); }
.ap-dept-stat         { text-align: center; }
.ap-dept-stat-val     { display: block; font-size: 28px; font-weight: 700; line-height: 1; }
.ap-dept-stat-lbl     { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Employee table */
.ap-dept-table-wrap { overflow-x: auto; }
.ap-dept-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ap-dept-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}
.ap-dept-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
.ap-dept-table tr:last-child td { border-bottom: none; }
.ap-dept-table tr:hover td      { background: var(--bg-hover, rgba(37,64,143,0.03)); }

/* Employee name link */
.ap-emp-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ap-emp-link:hover { color: var(--primary-dark, #1a2f6b); }

/* Overdue last-conversation cell */
.ap-cell--overdue    { color: var(--danger); font-weight: 600; }
.ap-never            { color: var(--danger); font-weight: 600; }
.ap-overdue-tag {
  display: inline-block;
  margin-left: 6px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ap-danger { color: var(--danger); }

/* Conversation history cards */
.ap-conv-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.ap-conv-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-md);
  background: var(--bg-card, #fff);
}
.ap-conv-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 6px;
}
.ap-conv-card-date  { font-weight: 600; font-size: 15px; }
.ap-conv-card-body  { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.ap-conv-meta       { font-size: 13px; color: var(--text-secondary); }
.ap-conv-meta--success { color: var(--success); font-weight: 600; }

.ap-dept-manager-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
}
.ap-dept-manager-label { color: var(--text-secondary); }
.ap-dept-manager-name  { font-weight: 600; color: var(--text-primary); }
.ap-dept-manager-title { color: var(--text-secondary); }
.ap-dept-manager-title::before { content: '·'; margin-right: 4px; }

.ap-mgr-cell { display: flex; align-items: center; gap: 6px; }
.ap-mgr-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.ap-mgr-edit-btn:hover { opacity: 1; color: var(--primary); }

/* ── Template Editor ──────────────────────────────────────────────────────── */
.te-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-lg);
  min-height: 500px;
}

/* Sidebar */
.te-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.te-dept-group { margin-bottom: var(--space-sm); }
.te-dept-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  padding: var(--space-xs) var(--space-sm);
  margin-bottom: 2px;
}
.te-tpl-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px var(--space-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.te-tpl-btn:hover { background: var(--hover); }
.te-tpl-btn--active { background: var(--primary-light, #e8eef8); color: var(--primary); font-weight: 600; }
.te-tpl-name { flex: 1; }
.te-tpl-badge {
  font-size: 11px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  white-space: nowrap;
}

/* Detail pane */
.te-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.te-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.te-detail-title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.te-detail-dept  { font-size: 13px; color: var(--text-secondary); }
.te-detail-meta  { display: flex; gap: var(--space-sm); align-items: center; }
.te-meta-item    { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.te-meta-custom  { color: var(--primary); font-weight: 600; }

/* Sections */
.te-section { margin-bottom: var(--space-xl); }
.te-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.te-section-title { font-size: 15px; font-weight: 700; margin: 0; }
.te-readonly-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--border);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.te-section-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-md); }
.te-empty-fields {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--hover);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

/* Fields table */
.te-fields-table-wrap { overflow-x: auto; margin-bottom: var(--space-sm); }
.te-fields-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.te-fields-table thead tr {
  background: var(--hover);
  border-bottom: 1px solid var(--border);
}
.te-fields-table th {
  text-align: left;
  padding: 8px var(--space-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.te-fields-table td { padding: 10px var(--space-sm); border-bottom: 1px solid var(--border); vertical-align: top; }
.te-fields-table tr:last-child td { border-bottom: none; }
.te-field-name    { font-weight: 600; color: var(--text-primary); min-width: 180px; }
.te-field-measure { color: var(--text-secondary); }
.te-field-actions { text-align: right; white-space: nowrap; }

.te-remove-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.te-remove-btn:hover { background: #fef2f2; border-color: var(--danger); }

/* Add form */
.te-add-form-wrap {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.te-add-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.te-add-form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (max-width: 768px) {
  .te-layout { grid-template-columns: 1fr; }
  .te-add-form-grid { grid-template-columns: 1fr; }
  .te-detail-header { flex-direction: column; gap: var(--space-sm); }
}

/* ── Admin Templates Manager ─────────────────────────────────────────────── */
.at-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
  min-height: 560px;
}

/* Sidebar */
.at-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.at-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.at-sidebar-title { font-weight: 700; font-size: 14px; }
.at-tpl-row {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 10px var(--space-md);
  cursor: pointer;
  transition: background 0.12s;
}
.at-tpl-row:last-child { border-bottom: none; }
.at-tpl-row:hover { background: var(--hover); }
.at-tpl-row--active { background: var(--primary-light, #e8eef8); }
.at-tpl-row-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.at-tpl-row-meta { display: flex; align-items: center; gap: 6px; }
.at-tpl-dept { font-size: 11px; color: var(--text-secondary); }
.at-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.at-badge--active   { background: #d1fae5; color: #065f46; }
.at-badge--inactive { background: #fee2e2; color: #991b1b; }

/* Detail pane */
.at-detail {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  overflow-y: auto;
}
.at-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}
.at-edit-title { font-size: 20px; font-weight: 700; }
.at-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Sections */
.at-section { margin-bottom: var(--space-xl); }
.at-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.at-section-title { font-size: 15px; font-weight: 700; margin: 0; }
.at-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 7px;
  min-width: 22px;
  height: 18px;
}
.at-section-desc { font-size: 13px; color: var(--text-secondary); margin: 0 0 var(--space-md); }
.at-empty-list {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--hover);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

/* Items table */
.at-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: var(--space-sm);
}
.at-items-table thead tr { background: var(--hover); border-bottom: 2px solid var(--border); }
.at-items-table th {
  text-align: left;
  padding: 8px var(--space-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.at-items-table td { padding: 10px var(--space-sm); border-bottom: 1px solid var(--border); vertical-align: top; }
.at-items-table tr:last-child td { border-bottom: none; }
.at-item-name    { font-weight: 600; min-width: 160px; }
.at-item-measure { color: var(--text-secondary); }
.at-item-actions { text-align: right; white-space: nowrap; }
.at-icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.at-icon-btn:hover { background: #fef2f2; border-color: var(--danger); }

/* Inline add form */
.at-inline-form {
  background: var(--hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Save row */
.at-save-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  margin-top: var(--space-sm);
}
.at-deactivate-btn { margin-left: auto; }

@media (max-width: 900px) {
  .at-layout    { grid-template-columns: 1fr; }
  .at-form-grid { grid-template-columns: 1fr; }
}

/* ── Admin Employee View ─────────────────────────────────────────────────────── */
.aev-template-card { margin-bottom: var(--space-md); }
.aev-template-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.aev-template-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.aev-template-name { font-size: 15px; }
.ap-tpl-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

/* ── Template Preview Modal ──────────────────────────────────────────────────── */
.tp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 32px 16px;
}
.tp-dialog {
  background: #fff; border-radius: var(--radius-lg);
  width: 100%; max-width: 870px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  margin: auto;
}
.tp-dialog-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg); border-bottom: 1px solid var(--border);
}
.tp-dialog-title { margin: 0; font-size: 18px; font-weight: 700; }
.tp-dialog-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.tp-close-btn {
  background: none; border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px;
  cursor: pointer; font-size: 13px; color: var(--text-secondary);
  white-space: nowrap; flex-shrink: 0;
}
.tp-close-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }

/* Document body */
.tp-document { padding: var(--space-md); font-size: 13px; line-height: 1.4; }
.tp-empty { color: var(--text-secondary); font-style: italic; font-size: 13px; }
.tp-line { border-bottom: 1px solid #ccc; height: 22px; }

/* ── Header ──────────────────────────────────────────────────────── */
.tp-hdr-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; border: 1.5px solid var(--brand); }
.tp-hdr-table td { border: 1px solid var(--brand); padding: 5px 10px; vertical-align: middle; }
.tp-hdr-logo { width: 140px; text-align: center; background: #fff; border-right: 2px solid var(--brand); }
.tp-logo-img { max-width: 130px; max-height: 80px; object-fit: contain; display: block; margin: 0 auto; }
.tp-hdr-name { font-size: 14px; font-weight: 600; width: 40%; }
.tp-hdr-role { font-size: 13px; color: var(--text-secondary); }
.tp-hdr-title { text-align: center; font-size: 15px; font-weight: 700; color: var(--brand); letter-spacing: .02em; padding: 6px; }

/* Manager / Date / Location bar */
.tp-doc-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px var(--space-md); margin-bottom: 10px; }
.tp-field-row { display: flex; align-items: center; gap: 6px; }
.tp-field-row label { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.tp-blank-line { flex: 1; border-bottom: 1px solid #bbb; min-width: 60px; }
.tp-prefill-val { flex: 1; font-size: 12px; font-weight: 500; border-bottom: 1px solid #bbb; padding-bottom: 1px; }

/* ── Body sections table ──────────────────────────────────────────── */
.tp-body-table { width: 100%; border-collapse: collapse; }
.tp-body-label {
  background: #c8def0; color: #1a336a;
  font-size: 18px; font-weight: 800; text-align: center; vertical-align: middle;
  padding: 10px 8px; line-height: 1.25; width: 78px;
  border: 1.5px solid #7aaac8;
}
.tp-body-content { border: 1.5px solid #7aaac8; vertical-align: top; padding: 10px; }
.tp-no-pad { padding: 0; }

/* ── Core Values ──────────────────────────────────────────────────── */
.tp-cv-table { border-collapse: collapse; width: 100%; background: #eaf4fc; }
.tp-cv-th-diag {
  width: 58px; min-width: 58px; height: 90px;
  padding: 0; position: relative; overflow: hidden;
  background: #c8def0; border: 1px solid #7aaac8; vertical-align: bottom;
}
.tp-cv-th-text {
  position: absolute; bottom: 10px; left: 10px;
  transform-origin: left bottom; transform: rotate(-45deg);
  white-space: nowrap; font-size: 11px; font-weight: 700; color: #1a336a;
}
.tp-cv-th-yn {
  width: 64px; font-size: 11px; font-weight: 700; color: #1a336a;
  text-align: center; vertical-align: bottom; padding: 6px 4px 8px;
  background: #d6e9f8; border: 1px solid #7aaac8;
}
.tp-cv-cell { text-align: center; vertical-align: middle; padding: 8px 4px; border: 1px solid #7aaac8; background: #fff; }
.tp-cv-yn-cell { white-space: nowrap; }
.tp-cv-select {
  width: 100%; padding: 3px 2px; border: 1px solid #7aaac8;
  border-radius: 3px; background: #fff; font-size: 11px;
  font-weight: 600; color: #1a336a; cursor: pointer;
}
.tp-yn-select { text-align: center; }

/* ── Score Card ───────────────────────────────────────────────────── */
.tp-sc-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.tp-sc-table th {
  background: #c8def0; color: #1a336a; font-size: 11px; font-weight: 700;
  padding: 5px 8px; text-align: left; border: 1px solid #7aaac8;
}
.tp-sc-th-name { width: 32%; }
.tp-sc-th-meas { width: 30%; }
.tp-sc-th-result { width: 22%; }
.tp-sc-th-track { width: 16%; }
.tp-sc-table td { border: 1px solid #7aaac8; vertical-align: middle; padding: 6px 8px; }
.tp-sc-name { color: var(--brand); font-weight: 500; vertical-align: middle; }
.tp-sc-meas { color: var(--text-secondary); font-size: 12px; }
.tp-sc-result-space { background: #eaf4fc; }
.tp-sc-track { text-align: center; vertical-align: middle; }
.tp-custom-tag {
  font-size: 10px; background: #fff8e1; color: #9a6000;
  border: 1px solid #ffe082; border-radius: 3px;
  padding: 1px 4px; vertical-align: middle; margin-left: 4px;
}

/* ── Employee Feedback ────────────────────────────────────────────── */
.tp-ef-table { width: 100%; border-collapse: collapse; }
.tp-ef-table td { border: 1px solid #7aaac8; }
.tp-ef-q { padding: 8px; font-size: 12px; font-weight: 500; background: #eaf4fc; vertical-align: top; width: 25%; }
.tp-ef-yn-tag { font-size: 10px; font-weight: 700; color: var(--brand); display: block; margin-top: 2px; }
.tp-ef-a { padding: 6px 8px; text-align: center; background: #fff; vertical-align: middle; }
.tp-ef-select { width: 60px; }

/* ── Good Not Good Change ─────────────────────────────────────────── */
.tp-gnc-table { width: 100%; border-collapse: collapse; }
.tp-gnc-table tr { border: 1px solid #7aaac8; }
.tp-gnc-label { width: 22%; font-size: 11px; font-weight: 600; color: #1a336a; background: #eaf4fc; padding: 8px; vertical-align: top; border-right: 1px solid #7aaac8; }
.tp-gnc-space { height: 56px; background: #fff; }

/* ── Signatures ───────────────────────────────────────────────────── */
.tp-signatures { border-top: 1px solid var(--border); padding-top: var(--space-md); margin-top: var(--space-sm); }
.tp-sig-row { display: flex; gap: var(--space-xl); align-items: flex-end; }
.tp-sig-block { flex: 1; }
.tp-sig-short { flex: 0 0 120px; }
.tp-sig-label { font-size: 11px; color: var(--text-secondary); margin-top: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

@media (max-width: 620px) {
  .tp-doc-fields { grid-template-columns: 1fr; }
  .tp-sig-row { flex-direction: column; gap: var(--space-md); }
}

@media print {
  @page { size: letter portrait; margin: 0.5in; }

  /* Hide everything except the open preview modal */
  body > *:not(#tp-modal) { display: none !important; }

  /* Flatten the overlay */
  #tp-modal {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }

  /* Remove modal chrome */
  .tp-dialog {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .tp-dialog-header { display: none !important; }

  /* Let the document fill the page naturally */
  .tp-document { padding: 0 !important; }
  .tp-body-table { page-break-inside: auto; }
  .tp-body-table tr { page-break-inside: avoid; }

  /* Keep select values visible when printed */
  select { -webkit-appearance: none; appearance: none; border: 1px solid #7aaac8 !important; }
}

/* ── Real Conversation Full Form ─────────────────────────────────────────── */
.rc-form-wrap {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-top: var(--space-lg);
}

.rc-form-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
}

.rc-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.rc-section-title {
  margin: 0 0 var(--space-xs);
  font-size: 16px;
  color: var(--text-primary);
}

.rc-section-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

.rc-scorecard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rc-scorecard-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.rc-scorecard-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.rc-scorecard-table tr:last-child td { border-bottom: none; }

.rc-rating-select {
  width: 130px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  font-size: 13px;
}

.rc-notes-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-primary);
  font-size: 13px;
  box-sizing: border-box;
}

.rc-cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.rc-cv-item {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-md);
}

.rc-cv-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}

.rc-cv-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.rc-employee-section {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-top: var(--space-xl);
  border: 1px dashed var(--border) !important;
}

.rc-not-filled {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: normal;
  margin-left: 8px;
}

.rc-yn-list { display: flex; flex-direction: column; gap: 8px; }

.rc-yn-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-primary);
  border-radius: var(--radius);
  font-size: 14px;
}

.rc-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

/* ── Print styles for Real Conversation ──────────────────────────────────── */
.print-only { display: none; }

@media print {
  /* Hide everything except the printable form */
  body > *,
  .app-shell > *,
  #tab-content > *:not(.rc-form-wrap),
  #tab-content > *:not([id="md-detail-panel"]) { display: none !important; }

  #md-detail-panel,
  #md-detail-panel * { display: revert !important; }

  .no-print { display: none !important; }
  .print-only { display: block !important; }

  .rc-form-wrap {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .rc-print-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
  }

  .rc-print-meta {
    display: flex;
    gap: 24px;
    margin-top: 8px;
    font-size: 13px;
  }

  .rc-section { page-break-inside: avoid; }

  .rc-scorecard-table th,
  .rc-scorecard-table td { border: 1px solid #ccc !important; }

  .rc-cv-item { border: 1px solid #ccc !important; }

  .rc-rating-select,
  .rc-notes-input {
    border: 1px solid #999 !important;
    -webkit-appearance: none;
    appearance: none;
  }

  select option:not(:checked) { display: none; }
}

/* ── Real Conversation fill modal tweaks ─────────────────────────────────── */
.rc-conv-dialog {
  max-width: 860px;
}

.rc-editable-select {
  height: 26px !important;
  font-size: 13px !important;
}

.rc-result-input {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid #b0c8e0;
  border-radius: 3px;
  font-size: 13px;
  background: #fff;
  box-sizing: border-box;
}

.rc-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
  position: sticky;
  bottom: 0;
}

.rc-complete-actions {
  display: block;
  padding: 16px;
}

.rc-sig-inputs-row {
  display: flex;
  gap: 24px;
}

.rc-sig-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rc-sig-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}

.rc-sig-input {
  font-size: 18px;
  font-style: italic;
  font-family: Georgia, serif;
  padding: 6px 10px;
  border: none;
  border-bottom: 2px solid var(--text-primary);
  background: transparent;
  width: 100%;
  box-sizing: border-box;
}

.rc-sig-input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.tp-sig-value {
  font-size: 18px;
  font-style: italic;
  font-family: Georgia, serif;
  min-height: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

@media (max-width: 620px) {
  .rc-sig-inputs-row { flex-direction: column; }
}

@media print {
  /* Use rc-conv-modal for print when it exists */
  body:has(#rc-conv-modal) > *:not(#rc-conv-modal) { display: none !important; }
  body:has(#rc-conv-modal) #rc-conv-modal {
    position: static !important;
    background: none !important;
    padding: 0 !important;
    overflow: visible !important;
    display: block !important;
  }
  body:has(#rc-conv-modal) .tp-dialog {
    box-shadow: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  body:has(#rc-conv-modal) .tp-dialog-header,
  body:has(#rc-conv-modal) .rc-modal-actions { display: none !important; }
  body:has(#rc-conv-modal) .rc-editable-select { -webkit-appearance: none; appearance: none; border: 1px solid #7aaac8 !important; }
  body:has(#rc-conv-modal) .rc-result-input { border: 1px solid #7aaac8 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — comprehensive fixes
   Breakpoints: 768px (tablets/large phones), 480px (phones)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared: tables get horizontal scroll on mobile (moved into media queries below) ── */

/* ── RC form dialog: contain the paper-form document so it never bleeds
      outside the white dialog card onto the dark overlay backdrop.
      The document scrolls horizontally inside the dialog at its natural width. ── */
.tp-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;          /* clip overflow at the white card boundary */
}
.tp-document {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;              /* allow flex child to shrink */
  background: #fff;          /* ensure solid white even when inner tables overflow */
}
/* Sticky action bar stays inside the dialog, not on top of overlay */
.rc-modal-actions {
  flex-shrink: 0;
}

/* ── 768px — tablet and large phone ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* Header: tighten and stack brand + user */
  .app-header {
    padding: 10px var(--space-md);
    gap: 6px;
  }
  .app-header-brand h1 { font-size: 17px; }
  .app-header-user { gap: var(--space-sm); }
  .app-header-user-name { font-size: 13px; }
  .app-header-user-email { display: none; }

  /* Nav: horizontal scroll instead of wrapping */
  .app-nav {
    padding: 0 var(--space-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .app-nav::-webkit-scrollbar { display: none; }
  .app-nav-btn { padding: var(--space-sm) var(--space-md); font-size: 14px; white-space: nowrap; }

  /* Main padding */
  .app-main { padding: var(--space-md); }

  /* Modals: full width with margin, max-height scroll */
  .md-modal-backdrop { align-items: flex-end; }
  .md-modal {
    max-width: 100%;
    width: calc(100% - 24px);
    margin: 12px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius) var(--radius);
  }
  .md-modal-body { padding: var(--space-md); }
  .md-modal-header { padding: var(--space-md); }
  .md-modal-footer { flex-wrap: wrap; }
  .md-modal-footer .btn { flex: 1; min-width: 120px; }

  /* Schedule modal */
  .md-modal select,
  .md-modal input[type="date"],
  .md-modal input[type="text"],
  .md-modal textarea { font-size: 16px; } /* prevent iOS zoom */

  /* Manager stats: 2 cols */
  .md-stats { grid-template-columns: repeat(2, 1fr); }

  /* Tables: horizontal scroll on mobile */
  .md-table,
  .rc-scorecard-table,
  .at-items-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Team table action column: allow wrapping with gap */
  .ap-dept-table td:last-child { white-space: normal; }
  .md-action-btn { margin: 2px 0 !important; display: inline-block; }

  /* Admin overview summary row: 3 cols */
  .ap-summary-row { grid-template-columns: repeat(3, 1fr); }

  /* Admin location grid: single column */
  .ap-location-grid { grid-template-columns: 1fr; }

  /* Admin users toolbar: stack search + filters */
  .ap-users-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .ap-search { width: 100%; }

  /* Admin tab bar: scrollable */
  .ap-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .ap-tabs::-webkit-scrollbar { display: none; }
  .ap-tab { white-space: nowrap; padding: var(--space-sm) var(--space-md); }

  /* Employee view form panel */
  .ev-form-panel { padding: var(--space-md); }
  .ev-form-header { flex-wrap: wrap; gap: var(--space-sm); }

  /* RC conversation dialog overlay: tighter padding on mobile */
  .tp-overlay { padding: 8px; }

  /* RC action bar: stack buttons vertically */
  .rc-modal-actions {
    flex-wrap: wrap;
    gap: var(--space-sm);
    position: static; /* un-sticky on mobile so it doesn't eat screen space */
  }
  .rc-modal-actions .btn { flex: 1; min-width: 120px; }

  /* RC scorecard table: make the rating select fill the cell */
  .rc-rating-select { width: 100%; min-width: 0; }

  /* Core values Yes/No columns (Get It / Want It): widen on mobile */
  .tp-cv-th-yn { width: 90px; }
  .tp-cv-yn-cell { min-width: 90px; }
  .tp-yn-select { width: 80px; }

  /* Location card body: stack donut + stats vertically */
  .ap-location-body { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .ap-location-stats { flex-wrap: wrap; gap: var(--space-md); }
}

/* ── 480px — phones ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Header: even tighter */
  .app-header { padding: 8px var(--space-sm); }
  .app-header-brand h1 { font-size: 15px; }
  .app-header-user-name { font-size: 12px; }

  /* Stats: single column */
  .md-stats { grid-template-columns: 1fr; }
  .ap-summary-row { grid-template-columns: repeat(2, 1fr); }

  /* Modal: full-screen sheet */
  .md-modal-backdrop { align-items: flex-end; padding: 0; }
  .md-modal {
    width: 100%;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh;
  }

  /* RC dialog: full-screen sheet on phones */
  .tp-overlay { padding: 0; border-radius: 0; }
  .tp-dialog { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

  /* Nav buttons: smaller text */
  .app-nav-btn { font-size: 13px; padding: var(--space-sm) 10px; }

  /* Buttons: full width in footer contexts */
  .md-modal-footer .btn,
  .ev-form-panel .md-modal-footer .btn { width: 100%; }

  /* Admin tabs smaller */
  .ap-tab { font-size: 13px; padding: 6px var(--space-sm); }

  /* Table cell padding: reduce for more content space */
  .ap-dept-table td,
  .ap-dept-table th { padding: 8px; font-size: 13px; }

  /* Employee view: full-width sections */
  .ev-detail-grid { flex-direction: column; gap: var(--space-sm); }

  /* Card padding: reduce */
  .card { padding: var(--space-md); }

  /* Section headings */
  .ev-section-title,
  .ev-form-header h3 { font-size: 15px; }
}