/* QIENET final visual layer.
 * Loaded after module adapters so shared roles look consistent across surfaces.
 * Keep selectors scoped: legacy markup and Bootstrap remain compatible. */

:root {
  --qn-control-height: 42px;
  --qn-control-radius: var(--qn-radius-sm);
  --qn-section-gap: 24px;
}

body.qn-legacy-frontend-surface,
body.qn-groups-surface,
body.qn-recruitment-surface,
body.qn-admin-surface,
body.qn-consultant-surface,
body.qn-user-surface,
body.qn-auth-surface {
  background: var(--qn-color-canvas);
  color: var(--qn-color-text);
}

body.qn-legacy-frontend-surface h1,
body.qn-legacy-frontend-surface h2,
body.qn-legacy-frontend-surface h3,
body.qn-groups-surface h1,
body.qn-groups-surface h2,
body.qn-groups-surface h3,
body.qn-recruitment-surface h1,
body.qn-recruitment-surface h2,
body.qn-recruitment-surface h3,
body.qn-admin-surface h1,
body.qn-admin-surface h2,
body.qn-admin-surface h3,
body.qn-consultant-surface h1,
body.qn-consultant-surface h2,
body.qn-consultant-surface h3,
body.qn-user-surface h1,
body.qn-user-surface h2,
body.qn-user-surface h3,
body.qn-auth-surface h1,
body.qn-auth-surface h2,
body.qn-auth-surface h3 {
  color: var(--qn-color-text-strong);
  letter-spacing: -.018em;
}

body.qn-legacy-frontend-surface h1,
body.qn-groups-surface h1,
body.qn-recruitment-surface h1,
body.qn-admin-surface h1,
body.qn-consultant-surface h1,
body.qn-user-surface h1,
body.qn-auth-surface h1 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); line-height: 1.2; }

body.qn-legacy-frontend-surface h2,
body.qn-groups-surface h2,
body.qn-recruitment-surface h2,
body.qn-admin-surface h2,
body.qn-consultant-surface h2,
body.qn-user-surface h2,
body.qn-auth-surface h2 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.3; }

body.qn-legacy-frontend-surface .btn,
body.qn-groups-surface .btn,
body.qn-recruitment-surface .btn,
body.qn-admin-surface .btn,
body.qn-consultant-surface .btn,
body.qn-user-surface .btn,
body.qn-auth-surface .btn {
  min-height: var(--qn-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: var(--qn-control-radius);
  border-width: 1px;
  font-weight: 700;
  line-height: 1.2;
  transition: color var(--qn-motion-fast) ease, background-color var(--qn-motion-fast) ease,
    border-color var(--qn-motion-fast) ease, box-shadow var(--qn-motion-fast) ease,
    transform var(--qn-motion-fast) ease;
}

body.qn-legacy-frontend-surface .btn:hover,
body.qn-groups-surface .btn:hover,
body.qn-recruitment-surface .btn:hover,
body.qn-admin-surface .btn:hover,
body.qn-consultant-surface .btn:hover,
body.qn-user-surface .btn:hover,
body.qn-auth-surface .btn:hover { transform: translateY(-1px); }

body.qn-legacy-frontend-surface .btn-primary,
body.qn-groups-surface .btn-primary,
body.qn-recruitment-surface .btn-primary,
body.qn-admin-surface .btn-primary,
body.qn-consultant-surface .btn-primary,
body.qn-user-surface .btn-primary,
body.qn-auth-surface .btn-primary,
body.qn-recruitment-surface .btn.primary,
body.qn-recruitment-surface .primary {
  color: #fff;
  background: var(--qn-color-brand);
  border-color: var(--qn-color-brand);
}

body.qn-legacy-frontend-surface .btn-primary:hover,
body.qn-groups-surface .btn-primary:hover,
body.qn-recruitment-surface .btn-primary:hover,
body.qn-admin-surface .btn-primary:hover,
body.qn-consultant-surface .btn-primary:hover,
body.qn-user-surface .btn-primary:hover,
body.qn-auth-surface .btn-primary:hover,
body.qn-recruitment-surface .btn.primary:hover,
body.qn-recruitment-surface .primary:hover {
  color: #fff;
  background: var(--qn-color-brand-hover);
  border-color: var(--qn-color-brand-hover);
}

body.qn-legacy-frontend-surface .btn-secondary,
body.qn-groups-surface .btn-secondary,
body.qn-recruitment-surface .btn-secondary,
body.qn-admin-surface .btn-secondary,
body.qn-consultant-surface .btn-secondary,
body.qn-user-surface .btn-secondary,
body.qn-auth-surface .btn-secondary {
  color: var(--qn-color-text);
  background: var(--qn-color-surface);
  border-color: var(--qn-color-border-strong);
}

body.qn-legacy-frontend-surface .btn-secondary:hover,
body.qn-groups-surface .btn-secondary:hover,
body.qn-recruitment-surface .btn-secondary:hover,
body.qn-admin-surface .btn-secondary:hover,
body.qn-consultant-surface .btn-secondary:hover,
body.qn-user-surface .btn-secondary:hover,
body.qn-auth-surface .btn-secondary:hover {
  color: var(--qn-color-brand);
  background: var(--qn-color-brand-soft);
  border-color: var(--qn-color-brand);
}

body.qn-legacy-frontend-surface .btn-danger,
body.qn-groups-surface .btn-danger,
body.qn-recruitment-surface .btn-danger,
body.qn-admin-surface .btn-danger,
body.qn-consultant-surface .btn-danger,
body.qn-user-surface .btn-danger { color: var(--qn-color-danger); background: var(--qn-color-danger-soft); border-color: var(--qn-color-danger-soft); }

body.qn-legacy-frontend-surface input:not([type="checkbox"]):not([type="radio"]),
body.qn-legacy-frontend-surface select,
body.qn-legacy-frontend-surface textarea,
body.qn-groups-surface .form-control,
body.qn-groups-surface select,
body.qn-groups-surface textarea,
body.qn-recruitment-surface input:not([type="checkbox"]):not([type="radio"]),
body.qn-recruitment-surface select,
body.qn-recruitment-surface textarea,
body.qn-admin-surface .form-control,
body.qn-admin-surface select,
body.qn-admin-surface textarea,
body.qn-consultant-surface input:not([type="checkbox"]):not([type="radio"]),
body.qn-consultant-surface select,
body.qn-consultant-surface textarea,
body.qn-user-surface input:not([type="checkbox"]):not([type="radio"]),
body.qn-user-surface select,
body.qn-user-surface textarea,
body.qn-auth-surface input:not([type="checkbox"]):not([type="radio"]),
body.qn-auth-surface select,
body.qn-auth-surface textarea {
  min-height: var(--qn-control-height);
  color: var(--qn-color-text);
  background: var(--qn-color-surface);
  border: 1px solid var(--qn-color-border-strong);
  border-radius: var(--qn-control-radius);
  box-shadow: none;
}

body.qn-legacy-frontend-surface input:focus,
body.qn-legacy-frontend-surface select:focus,
body.qn-legacy-frontend-surface textarea:focus,
body.qn-groups-surface .form-control:focus,
body.qn-groups-surface select:focus,
body.qn-groups-surface textarea:focus,
body.qn-recruitment-surface input:focus,
body.qn-recruitment-surface select:focus,
body.qn-recruitment-surface textarea:focus,
body.qn-admin-surface .form-control:focus,
body.qn-admin-surface select:focus,
body.qn-admin-surface textarea:focus,
body.qn-consultant-surface input:focus,
body.qn-consultant-surface select:focus,
body.qn-consultant-surface textarea:focus,
body.qn-user-surface input:focus,
body.qn-user-surface select:focus,
body.qn-user-surface textarea:focus,
body.qn-auth-surface input:focus,
body.qn-auth-surface select:focus,
body.qn-auth-surface textarea:focus {
  border-color: var(--qn-color-brand);
  box-shadow: var(--qn-focus-ring);
  outline: 0;
}

body.qn-legacy-frontend-surface .card,
body.qn-legacy-frontend-surface .panel,
body.qn-groups-surface .card,
body.qn-groups-surface .group-card,
body.qn-recruitment-surface .card,
body.qn-recruitment-surface .form-section,
body.qn-recruitment-surface .side-card,
body.qn-admin-surface .card,
body.qn-admin-surface .dashboard-card,
body.qn-consultant-surface .card,
body.qn-consultant-surface .panel,
body.qn-consultant-surface .module,
body.qn-user-surface .card,
body.qn-user-surface .profile-info-card,
body.qn-user-surface .settings-card,
body.qn-user-surface .career-card,
body.qn-auth-surface .login-container {
  color: var(--qn-color-text);
  background: var(--qn-color-surface);
  border-color: var(--qn-color-border);
  border-radius: var(--qn-radius-md);
  box-shadow: var(--qn-shadow-sm);
}

body.qn-legacy-frontend-surface .table,
body.qn-groups-surface .table,
body.qn-recruitment-surface .table,
body.qn-admin-surface .table,
body.qn-consultant-surface table {
  color: var(--qn-color-text);
  background: var(--qn-color-surface);
}

body.qn-legacy-frontend-surface .table th,
body.qn-groups-surface .table th,
body.qn-recruitment-surface .table th,
body.qn-admin-surface .table th,
body.qn-consultant-surface table th {
  color: var(--qn-color-text-strong);
  background: var(--qn-color-surface-soft);
  border-color: var(--qn-color-border);
  font-weight: 700;
}

body.qn-legacy-frontend-surface .table td,
body.qn-groups-surface .table td,
body.qn-recruitment-surface .table td,
body.qn-admin-surface .table td,
body.qn-consultant-surface table td { border-color: var(--qn-color-border); }

body.qn-legacy-frontend-surface .notice,
body.qn-groups-surface .alert,
body.qn-groups-surface .message,
body.qn-recruitment-surface .notice,
body.qn-admin-surface .alert,
body.qn-admin-surface .message,
body.qn-consultant-surface .notice,
body.qn-user-surface .notice,
body.qn-user-surface .message,
body.qn-auth-surface .message {
  border-radius: var(--qn-radius-sm);
  border-color: var(--qn-color-border);
}

body.qn-legacy-frontend-surface .muted,
body.qn-recruitment-surface .muted,
body.qn-consultant-surface .muted,
body.qn-user-surface .text-muted,
body.qn-auth-surface .text-muted { color: var(--qn-color-text-muted) !important; }

body.qn-legacy-frontend-surface .pill,
body.qn-recruitment-surface .pill,
body.qn-consultant-surface .pill,
body.qn-admin-surface .badge,
body.qn-user-surface .badge,
body.qn-groups-surface .badge {
  border-radius: var(--qn-radius-pill);
  font-weight: 700;
}

body.qn-legacy-frontend-surface hr,
body.qn-groups-surface hr,
body.qn-recruitment-surface hr,
body.qn-admin-surface hr,
body.qn-consultant-surface hr,
body.qn-user-surface hr,
body.qn-auth-surface hr { border-color: var(--qn-color-border); }

@media (max-width: 768px) {
  body.qn-legacy-frontend-surface .btn,
  body.qn-groups-surface .btn,
  body.qn-recruitment-surface .btn,
  body.qn-admin-surface .btn,
  body.qn-consultant-surface .btn,
  body.qn-user-surface .btn,
  body.qn-auth-surface .btn { min-height: 44px; }
}

/* Legacy public list visual preset — restored from the original Qienet list design.
   Scoped globally to qn-legacy-list-body so all legacy post list pages stay consistent. */
body.qn-legacy-frontend-surface.qn-legacy-list-body {
  background:#fff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .container {
  max-width:1200px;
  margin:20px auto;
  padding:0 15px;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .top-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group {
  background:#f8f9fa;
  padding:10px;
  margin-bottom:20px;
  border:0;
  border-radius:5px;
  box-shadow:none;
  overflow-x:auto;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group ul {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group a {
  padding:6px 12px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:20px;
  color:#333;
  font-weight:400;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:none;
  transition:all .2s ease;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group a.active,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group a:hover {
  background:#007bff;
  color:#fff;
  border-color:#007bff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page button.filter-toggle {
  min-height:36px;
  padding:6px 14px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#fff;
  background:#007bff;
  border:1px solid #007bff;
  border-radius:20px;
  box-shadow:none;
  cursor:pointer;
  font:inherit;
  font-weight:400;
  line-height:1.4;
  transform:none;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page button.filter-toggle:hover,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page button.filter-toggle:focus-visible {
  color:#fff;
  background:#0069d9;
  border-color:#0062cc;
  outline:none;
  transform:none;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page button.filter-toggle:focus-visible {
  box-shadow:0 0 0 3px rgba(0,123,255,.2);
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page #category-options {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #e1e5e8;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table {
  width:100%;
  border-collapse:collapse;
  color:#000;
  background:#fff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td {
  padding:12px;
  border-bottom:1px solid #ddd;
  color:#000;
  background:transparent;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th {
  background:#f8f9fa;
  color:#000;
  text-align:left;
  font-weight:700;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:first-child,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:first-child .qn-post-title-link,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:first-child .qn-post-title-link:visited {
  color:#007bff !important;
  font-weight:400;
  text-decoration:none;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:first-child .qn-post-title-link:hover,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:first-child .qn-post-title-link:focus-visible {
  color:#0056b3 !important;
  text-decoration:underline;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th:nth-child(2),
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th:nth-child(3),
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th:nth-child(4),
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:nth-child(2),
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:nth-child(3),
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td:nth-child(4) {
  text-align:right;
  white-space:nowrap;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tbody .post-row:hover {
  background:#f0f7ff;
  cursor:pointer;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tbody .post-row:hover td {
  background:transparent;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-row.visited td,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-row.visited td .qn-post-title-link,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-row.visited td .qn-post-title-link:visited {
  color:#999 !important;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:20px 0 26px;
  text-align:center;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination-total {
  flex:0 0 100%;
  color:#333;
  line-height:1.4;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination a,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination span {
  min-width:38px;
  height:38px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #ddd;
  border-radius:4px;
  color:#007bff;
  background:#fff;
  line-height:1;
  font-weight:400;
  text-decoration:none;
  box-sizing:border-box;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination a:hover {
  color:#007bff;
  background:#f0f7ff;
  border-color:#007bff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination .current {
  color:#fff;
  background:#007bff;
  border-color:#007bff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination .ellipsis {
  min-width:20px;
  padding:0 2px;
  color:#666;
  background:transparent;
  border-color:transparent;
}

@media (max-width:768px) {
  body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .container {
    width:100%;
    padding:0 12px;
  }

  body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th,
  body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td {
    padding:10px 8px;
  }
}

/* Flat legacy list mode — remove floating white blocks/cards, keep content directly on page background. */
body.qn-legacy-frontend-surface.qn-legacy-list-body {
  background:var(--qn-color-page,#f7f8fc);
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .container {
  background:transparent;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin-bottom:18px;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group + .nav-group {
  margin-top:0;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .nav-group #category-options {
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #dde3ed;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table {
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table thead,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tbody,
body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tr {
  background:transparent;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table th {
  background:transparent;
  border-top:0;
  border-bottom:1px solid #dfe4ec;
  box-shadow:none;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table td {
  background:transparent;
  border-bottom:1px solid #e3e7ee;
  box-shadow:none;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tbody .post-row:hover {
  background:#eef5ff;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-table tbody .post-row:hover td {
  background:transparent;
}

body.qn-legacy-frontend-surface.qn-legacy-list-body .qn-legacy-list-page .post-pagination {
  background:transparent;
  border:0;
  box-shadow:none;
}