/* BUL AI Hub — modern indigo/light theme */
:root {
  /* Core palette */
  --bg:           #f0f4f8;  /* Light Blue Slate */
  --surface:      #ffffff;
  --border:       #e2e8f0;  /* Slate-200 */
  --text:         #1e293b;  /* Slate-800 */
  --muted:        #64748b;  /* Slate-500 */
  --primary:      #3e52d5;  /* Indigo */
  --primary-dk:   #2f3fb8;
  --primary-hover:#3346c9;
  --primary-soft: #eef2ff;  /* Indigo-50 */
  --danger:       #c62828;
  --danger-soft:  #ffebee;
  --info:         #2563eb;
  --info-soft:    #eff6ff;
  --success:      #2e7d32;
  --success-soft: #e8f5e9;
  --warn:         #e65100;
  --warn-soft:    #fff3e0;
  /* Radii (match rounded-lg / rounded-2xl intent) */
  --radius:       8px;   /* buttons/inputs */
  --radius-lg:    16px;  /* main cards */

  /* Shell */
  --sidebar-bg:   #ffffff;
  --sidebar-text: #334155; /* Slate-700 */
  --sidebar-muted:#64748b; /* Slate-500 */
  --sidebar-hover:#f8fafc; /* Slate-50 */
  --sidebar-active:#eff6ff; /* Blue-50 */
  --sidebar-accent: var(--primary);

  --code-bg:      #f1f5f9; /* Slate-100 */
  --topbar-bg:    #ffffff;
  --topbar-text:  var(--text);
  --topbar-border: var(--border);

  /* Tables */
  --table-head-bg: rgba(248, 250, 252, 0.7); /* slate-50/70 */
  --table-head-text: var(--muted);

  /* Buttons */
  --btn-neutral-bg: #f8fafc;   /* slate-50 */
  --btn-neutral-text: #475569; /* slate-600 */
  --btn-border:     var(--border);
  --btn-border-strong: rgba(62, 82, 213, 0.35);

  /* Cards */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06); /* shadow-sm feel */
  --bul-topbar-height: 52px;
  --bul-sync-banner-height: 0px;
  --bul-toast-top: 64px;
  --sidebar-width: 240px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; font-size: 0.92em; }
.muted { color: var(--muted); }

/* topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 24px; background: var(--topbar-bg); color: var(--topbar-text);
  border-bottom: 1px solid var(--topbar-border);
  box-shadow: none;
  position: sticky;
  top: 0;
  z-index: 10035;
}
.topbar a { color: var(--primary); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand a {
  font-size: 20px; font-weight: 700; color: var(--primary);
  letter-spacing: -0.02em;
}
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 8px;
  transition: opacity 0.15s;
}
.brand-logo:hover {
  opacity: 0.85;
  text-decoration: none;
}
.brand-logo img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.env-tag {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius);
  background: var(--primary-soft); color: var(--primary);
  font-weight: 600;
}

/* Tab bar — sub-nav trong từng module (List task, Estimate, Knowhow, QDC, Training, Dashboard) */
.tab-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: var(--bul-topbar-height);
  z-index: 5;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.tab-bar::-webkit-scrollbar {
  height: 5px;
}
.tab-bar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}
.tab-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  line-height: 1.35;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.16s ease;
  white-space: nowrap;
}
a.tab-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.tab-btn:hover {
  color: var(--primary-dk);
  background: var(--sidebar-hover);
  border-color: rgba(226, 232, 240, 0.9);
  text-decoration: none;
  transform: translateY(-1px);
}
.tab-btn:active {
  transform: translateY(0) scale(0.99);
}
.tab-btn.active {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: rgba(62, 82, 213, 0.22);
  box-shadow: 0 1px 3px rgba(62, 82, 213, 0.12);
  font-weight: 700;
}
.tab-btn.active:hover {
  color: var(--primary-dk);
  background: var(--primary-soft);
  border-color: rgba(62, 82, 213, 0.3);
  transform: none;
}
.estimate-hub-tabs,
.task-list-hub-tabs,
.knowhow-hub-tabs,
.daily-report-hub-tabs,
.qdc-hub-tabs,
.training-hub-tabs {
  margin-bottom: 16px;
}
/* Hub tabs Estimate — cùng cỡ chữ / padding với List task (trang 15px) */
.estimate-hub-tabs .tab-btn,
.task-list-hub-tabs .tab-btn {
  font-size: 14px;
  padding: 10px 18px;
}
.nav-right { display: flex; align-items: center; gap: 12px; }

.user-chip { display: inline-flex; gap: 8px; align-items: center; color: var(--text); }
.user-chip strong { font-weight: 600; }
.role-badge, .team-badge {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius); font-weight: 600;
}
.role-badge.role-pm     { background: var(--primary-soft); color: var(--primary); }
.role-badge.role-member { background: var(--btn-neutral-bg); color: var(--btn-neutral-text); }
.team-badge {
  background: var(--primary-soft);
  color: var(--primary-dk);
  border: 1px solid transparent;
}
.team-badge.team-be {
  background: #dbeafe;
  color: #1e40af;
  border-color: #93c5fd;
}
.team-badge.team-fe {
  background: #d1fae5;
  color: #065f46;
  border-color: #6ee7b7;
}
.team-badge.team-sqa {
  background: #fef3c7;
  color: #92400e;
  border-color: #fcd34d;
}

.page-back {
  margin: 0 0 14px;
}
.page-back__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.page-back__link:hover {
  color: var(--primary-hover);
  text-decoration: none;
}

/* container */
.container { max-width: 1280px; margin: 0 auto; padding: 20px 24px 32px; }
.has-sidebar .container { max-width: none; }
.footer {
  text-align: center; color: var(--muted); padding: 24px 0;
  font-size: 12px;
}
.footer--minimal {
  padding: 16px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* cards */
.placeholder-card, .login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px; margin-bottom: 16px;
}
.login-card { max-width: 460px; margin: 48px auto; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }

.page-section h1 { margin: 0 0 8px; font-size: 22px; }
.page-section h2 { margin: 0 0 8px; font-size: 16px; color: var(--primary-dk); }

.error-screen {
  min-height: calc(100vh - 220px);
  display: grid;
  place-items: center;
  padding: 28px 0;
}
.error-screen__card {
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 30px 28px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  text-align: center;
}
.error-screen__illustration {
  margin: -2px auto 12px;
  width: min(320px, 100%);
}
.error-screen__illustration svg { width: 100%; height: auto; display: block; }
.error-screen__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.error-screen__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  height: 38px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #3730a3;
  background: #e0e7ff;
  border: 1px solid #c7d2fe;
}
.error-screen__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid #e2e8f0;
}
.error-screen__badge .bul-icon { color: currentColor; }
.error-screen__badge--info { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.error-screen__badge--warn { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.error-screen__badge--danger { color: #b91c1c; background: #fee2e2; border-color: #fecaca; }
.error-screen__title {
  margin: 14px 0 8px;
  font-size: 28px;
  line-height: 1.25;
  color: #0f172a;
}
.error-screen__message {
  margin: 0;
  color: #64748b;
  font-size: 15px;
}
.error-screen__actions {
  margin-top: 18px;
  display: inline-flex;
  gap: 10px;
}

.todo-list { padding-left: 18px; }
.todo-list li { margin: 4px 0; }

/* form */
.form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.form label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted);
}
.form input,
.form select,
.form textarea,
.bul-select,
select.form-control,
select.users-select,
select.assign-picker,
select.estimate-team-filter,
select.inline-input {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  max-width: 100%;
}
.form select,
.bul-select {
  min-height: 38px;
  padding-right: 32px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form input:focus,
.form select:focus,
.form textarea:focus,
.bul-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.form label select { width: 100%; }

/* ── Buttons: chỉ dùng .btn + 1 variant (.btn-primary | .btn-secondary | .btn-ghost | .btn-submit) ── */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
}
.btn-xs {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}
.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
}
.btn-primary,
.btn-submit {
  background: var(--primary);
  color: #fff;
  border-color: var(--btn-border-strong);
}
.btn-primary:hover:not(:disabled),
.btn-submit:hover:not(:disabled) {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--sidebar-active);
  border-color: var(--primary);
  color: var(--primary);
}
.btn-ghost {
  background: transparent;
  color: var(--btn-neutral-text);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--btn-neutral-bg);
  border-color: transparent;
  color: var(--text);
}
/* Legacy .dark on ghost — same as secondary (indigo outline), not neutral/black */
.btn-ghost.dark {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-ghost.dark:hover:not(:disabled) {
  background: var(--sidebar-active);
  border-color: var(--primary);
  color: var(--primary);
}

/* Checkbox/radio nhóm chọn — giao diện giống .btn, vẫn là input ẩn */
.bul-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.bul-toggle-btn {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.bul-toggle-btn input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
}
.bul-toggle-btn__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 8px 20px;
  border: 1px solid var(--btn-border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.bul-toggle-btn:hover .bul-toggle-btn__face {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: #fff;
}
.bul-toggle-btn:has(input:checked) .bul-toggle-btn__face {
  background: var(--primary);
  border-color: var(--btn-border-strong);
  color: #fff;
}
.bul-toggle-btn:has(input:focus-visible) .bul-toggle-btn__face {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.bul-toggle-btn:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.import-teams-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 8px 6px 0;
  vertical-align: middle;
}
.import-teams-group .bul-toggle-btn__face {
  min-width: 3.25rem;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--muted);
  background: var(--btn-neutral-bg);
  border-color: var(--border);
}
.import-teams-group .bul-toggle-btn:hover .bul-toggle-btn__face {
  background: var(--primary-soft);
  border-color: var(--btn-border-strong);
  color: var(--primary);
}
.import-teams-group .bul-toggle-btn:has(input:checked) .bul-toggle-btn__face {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1);
}
.import-teams-group .bul-toggle-btn:has(input:focus-visible) .bul-toggle-btn__face {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
@media (max-width: 768px) {
  .import-teams-group {
    display: flex;
    margin: 0 0 8px;
  }
}
#task-new-teams.has-error .bul-toggle-btn__face {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger-soft, #fecaca);
}

.topbar .btn,
.sidebar-toggle.btn {
  border-color: var(--btn-border-strong);
}
.btn-approve.btn-ghost,
.btn-approve.btn-ghost.dark {
  color: var(--success);
  border-color: #a5d6a7;
}
.btn-approve.btn-ghost:hover:not(:disabled),
.btn-approve.btn-ghost.dark:hover:not(:disabled) {
  background: var(--success-soft);
  border-color: #a5d6a7;
  color: var(--success);
}
.btn-reject.btn-ghost,
.btn-reject.btn-ghost.dark {
  color: var(--danger);
  border-color: #ef9a9a;
}
.btn-reject.btn-ghost:hover:not(:disabled),
.btn-reject.btn-ghost.dark:hover:not(:disabled) {
  background: var(--danger-soft);
  border-color: #ef9a9a;
  color: var(--danger);
}
.btn-remove {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger);
}
.btn-remove:hover:not(:disabled) {
  background: #ffcdd2;
}

/* flashes */
.flashes { margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 8px 12px; border-radius: var(--radius); font-size: 13px; }
.flash-error   { background: var(--danger-soft);  color: var(--danger);  }
.flash-info    { background: var(--info-soft);    color: var(--info);    }
.flash-success { background: var(--success-soft); color: var(--success); }
.flash-warn, .flash-warning { background: var(--warn-soft); color: var(--warn); }
.flash--inline,
.flash-banner {
  margin-bottom: 16px;
}
.flash-banner {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--info) 35%, var(--border));
}
.flash-banner__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.flash-banner__text {
  margin: 0;
  flex: 1 1 240px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--info);
}
.flash-banner .btn {
  flex-shrink: 0;
}

/* hint table on login page */
.hint { margin-top: 20px; font-size: 13px; }
.hint summary { cursor: pointer; color: var(--muted); }
.hint-table {
  width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;
}
.hint-table th, .hint-table td {
  border: 1px solid var(--border); padding: 4px 8px; text-align: left;
}
.hint-table th { background: var(--primary-soft); color: var(--primary-dk); }

/* ---------------- 1b additions ---------------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px; gap: 16px;
}
.team-badge.dark {
  background: var(--primary-soft); color: var(--primary-dk);
  font-weight: 600;
}

/* generic data table */
.data-table, .info-table, .summary-table, .estimate-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
.data-table th, .data-table td,
.info-table th, .info-table td,
.summary-table th, .summary-table td,
.estimate-table th, .estimate-table td {
  border: 1px solid var(--border); padding: 6px 10px; vertical-align: top;
}
.data-table th, .summary-table th, .estimate-table th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  border-color: var(--border);
}
.info-table th { background: var(--primary-soft); color: var(--primary-dk); width: 130px; }
.data-table tbody tr:nth-child(even) { background: #fafbfd; }

/* status badges */
.status-badge {
  display: inline-block; padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
.status-draft     { background: #e5e7eb; color: #374151; }
.status-submitted { background: var(--info-soft);    color: var(--info);    }
.status-approved  { background: var(--success-soft); color: var(--success); }
.status-rejected  { background: var(--danger-soft);  color: var(--danger);  }
.status-feedback  { background: var(--warn-soft);    color: #b45309;        }
.status-exported  { background: var(--warn-soft);    color: var(--warn);    }
.status-todo      { background: #e5e7eb; color: #374151; }
.status-progress  { background: var(--info-soft); color: var(--info); }
.status-done      { background: var(--success-soft); color: var(--success); }
.status-info      { background: var(--primary-soft); color: var(--primary-dk); font-weight: 500; }
.status-chip {
  display: inline-block; padding: 2px 8px; border-radius: 8px;
  font-size: 11px; margin: 1px 3px 1px 0;
  background: #eef1f5; color: #374151;
  border: 1px solid #e2e8f0;
}
.status-chip.status-draft     { background: #e5e7eb; color: #374151; }
.status-chip.status-submitted { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.status-chip.status-approved  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.status-chip.status-feedback  { background: #fef3c7; color: #b45309; border-color: #fde68a; font-weight: 600; }
.status-chip.status-rejected  { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.status-chip.status-exported  { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.status-chip.status-warning {
  background: #ffc107;
  color: #212529;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Team class on status chip is kept for layout hooks only (no color). */
.status-chip.team-be,
.status-chip.team-fe,
.status-chip.team-sqa { }

/* ── Daily Report (3 cột: Epic → Task → Sub-task) ─────────────────────────── */
.daily-report-page,
.daily-report-page .page-hero,
.daily-report-page .daily-report,
.daily-report-page .dr-board,
.daily-report-page .dr-board button,
.daily-report-page .dr-board input,
.daily-report-page .dr-board textarea,
.daily-report-page .dr-board select,
.daily-report-page .daily-report__toolbar input,
.daily-report-page .daily-report-pill--date {
  font-family: inherit;
}
.daily-report-page input::placeholder,
.daily-report-page textarea::placeholder {
  font-family: inherit;
  color: #94a3b8;
  opacity: 1;
}

/* Fill viewport — tránh vùng xám thừa dưới nội dung */
body.has-sidebar .page-layout > .container:has(.daily-report-page) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 16px;
}
.daily-report-page.page-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.daily-report-page .daily-report {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  min-height: 0;
  margin-bottom: 0;
}
/* Toolbar 1 dòng — ngày + tìm kiếm sát bảng */
.daily-report-page .daily-report__toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.daily-report-page .daily-report__date-field,
.daily-report-page .daily-report__search-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.daily-report-page .daily-report__date-field {
  flex-shrink: 0;
}
.daily-report-page .daily-report__search-field {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}
.daily-report-page .daily-report__field-label {
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.daily-report-page .daily-report__date,
.daily-report-page .daily-report__search {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.35;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
}
.daily-report-page .daily-report__date {
  width: 148px;
  flex-shrink: 0;
}
.daily-report-page .daily-report__search {
  flex: 1 1 auto;
  min-width: 120px;
  width: auto;
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px center;
}
.daily-report-page .daily-report__date:focus,
.daily-report-page .daily-report__search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.daily-report-page .daily-report__pending-toggle {
  flex-shrink: 0;
  margin: 0;
}
.daily-report-page .daily-report__pending-toggle .bul-toggle-btn__face {
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.daily-report-page .daily-report__stats {
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 10px;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}
.daily-report-page .daily-report__stat strong {
  color: var(--text);
  font-weight: 700;
}
.daily-report-page .daily-report__stat--warn {
  color: #b45309;
  font-weight: 600;
}

.daily-report-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary-dk);
  border: 1px solid rgba(62, 82, 213, 0.2);
}
.daily-report-pill--date {
  border: 1px solid #c7d2fe;
  background: #fff;
}

/* ── Milestone board — card 4 cột (giống wireframe member daily) ───────────── */
.daily-report-page--milestone .daily-report {
  flex: 1;
  min-height: 0;
  background: #f1f5f9;
  border: none;
}
.daily-report-page--milestone .dr-ms-board {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dr-ms-milestone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px 12px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
}
.dr-ms-milestone[hidden],
.dr-ms-epic-group[hidden],
.dr-ms-card[hidden] { display: none !important; }
.dr-ms-milestone__label {
  font-size: 12px;
  font-weight: 800;
  color: #3730a3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dr-ms-milestone__deadline {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.dr-ms-epic-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.dr-ms-epic-hdr {
  margin: 0;
  padding: 0 2px;
}
.dr-ms-epic-hdr__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.dr-ms-epic-hdr__ref {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
}
.dr-ms-epic-hdr__members {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  line-height: 1.4;
}
.dr-ms-epic-hdr__members-sep {
  font-weight: 500;
  color: #94a3b8;
}
.dr-ms-board--dash .dr-ms-epic-group {
  margin-bottom: 4px;
}
.dr-ms-card {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(240px, 1.25fr);
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dr-ms-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}
/* General (off-Jira) card: only task + issues columns. */
.dr-ms-card--general {
  grid-template-columns: minmax(180px, 0.9fr) minmax(260px, 2fr);
}
.dr-ms-card__key--general {
  color: #7c3aed;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
@media (max-width: 1100px) {
  .dr-ms-card--general { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .dr-ms-card {
    grid-template-columns: 1fr 1fr;
  }
  .dr-ms-card__col--task { grid-column: 1 / -1; border-right: none !important; border-bottom: 1px solid #e2e8f0; }
  .dr-ms-card__col--issues { grid-column: 1 / -1; border-left: none !important; }
}
@media (max-width: 640px) {
  .dr-ms-card { grid-template-columns: 1fr; }
  .dr-ms-card__col { border-right: none !important; border-bottom: 1px solid #e2e8f0; }
  .dr-ms-card__col:last-child { border-bottom: none; }
}
.dr-ms-card__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  min-width: 0;
  border-right: 1px solid #e2e8f0;
}
.dr-ms-card__col:last-child { border-right: none; }
.dr-ms-card__col-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #334155;
}
.dr-ms-card__col--task {
  justify-content: flex-start;
}
.dr-ms-card__key {
  font-size: 14px;
  font-weight: 700;
  color: #2563eb;
  text-decoration: none;
  line-height: 1.3;
}
.dr-ms-card__key:hover { text-decoration: underline; }
.dr-ms-card__meta {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}
.dr-ms-card__type-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 4px;
  background: #ffedd5;
  color: #c2410c;
}
.dr-ms-status {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid transparent;
}
.dr-ms-status--todo { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.dr-ms-status--progress { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.dr-ms-status--done { background: #dcfce7; color: #15803d; border-color: #86efac; }
.dr-ms-status--blocked { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.dr-ms-status--unknown { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.dr-ms-card__col--report .dr-ms-ta {
  flex: 1;
  min-height: 88px;
}
.dr-ms-card__col--has-value .dr-ms-ta {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.dr-ms-card__col--issues {
  gap: 10px;
}
.dr-ms-ta {
  display: block;
  width: 100%;
  min-height: 72px;
  max-height: 400px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: inherit;
  box-sizing: border-box;
}
.dr-ms-ta:focus {
  outline: none;
  border-color: #60a5fa;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}
.dr-ms-ta.is-saving { border-color: #f59e0b; background: #fffbeb; }
.dr-ms-ta.is-saved { border-color: #10b981; background: #f0fdf4; }
.dr-ms-ta.is-error { border-color: #ef4444; background: #fef2f2; }
.dr-ms-issues__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  max-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 2px;
}
.dr-ms-issues__list::-webkit-scrollbar,
.dr-ms-ta::-webkit-scrollbar,
.dr-ms-issue-item__txt::-webkit-scrollbar,
.dr-ms-issue-item__edit::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.dr-ms-issues__list::-webkit-scrollbar-thumb,
.dr-ms-ta::-webkit-scrollbar-thumb,
.dr-ms-issue-item__txt::-webkit-scrollbar-thumb,
.dr-ms-issue-item__edit::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}
.dr-ms-issue-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.dr-ms-issue-item--new {
  animation: dr-issue-in 0.4s ease;
}
.dr-ms-issue-item__txt {
  margin: 4px 0 0;
  max-height: 72px;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 13px;
  color: #334155;
  line-height: 1.4;
  word-break: break-word;
}
.dr-ms-issue-item__edit {
  width: 100%;
  min-height: 64px;
  max-height: 300px;
  margin-top: 4px;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: inherit;
  box-sizing: border-box;
}
.dr-ms-issue-item__edit.is-saved { border-color: #10b981; background: #f0fdf4; }
.dr-ms-issue-item__edit.is-error { border-color: #ef4444; background: #fef2f2; }
.dr-ms-issue-item__edit-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.dr-ms-issue-save {
  align-self: flex-end;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #4338ca;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.dr-ms-issue-save:hover:not(:disabled) { background: #3730a3; }
.dr-ms-issue-save:disabled { opacity: 0.6; cursor: not-allowed; }
.dr-ms-issue-tag {
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
}
.dr-ms-issue-tag--blocker { background: #fee2e2; color: #b91c1c; }
.dr-ms-issue-tag--risk { background: #ffedd5; color: #c2410c; }
.dr-ms-issue-tag--question { background: #ede9fe; color: #6d28d9; }
.dr-ms-issue-tag--other { background: #f1f5f9; color: #475569; }
/* Legacy pills (JS buildIssueItemEl) */
.dr-issue-pill {
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
}
.dr-issue-pill--critical { background: #fee2e2; color: #b91c1c; }
.dr-issue-pill--warning { background: #ffedd5; color: #c2410c; }
.dr-issue-pill--question { background: #ede9fe; color: #6d28d9; }
.dr-issue-pill--other { background: #f1f5f9; color: #475569; }
.dr-ms-issue-item--auto {
  border-color: #e2e8f0;
  background: #f8fafc;
}
.dr-ms-card--bug .dr-ms-card__meta { color: #7c2d12; }
.dr-ms-card--readonly .dr-ms-card__meta--strong {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  line-height: 1.45;
}
.dr-ms-card--readonly .dr-ms-card__member--strong {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin: 4px 0 0;
  line-height: 1.35;
}
.dr-ms-card--readonly .dr-ms-card__block {
  flex: 1;
  width: 100%;
  min-height: 88px;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.dr-ms-card--readonly .dr-ms-card__block--filled {
  background: #f0f9ff;
  border-color: #bae6fd;
}
.dr-ms-card--readonly .dr-ms-card__block--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background: #fff;
}
.dr-ms-card__member {
  font-size: 12px;
  margin: 4px 0 0;
  line-height: 1.35;
}
.dr-ms-card__detail-link {
  margin-top: 8px;
  align-self: flex-start;
}
/* Head row: Jira key (left) + status chip & detail button (right), aligned same size. */
.dr-ms-card__task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.dr-ms-card__task-head .dr-ms-card__key {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 2px;
}
.dr-ms-card__task-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dr-ms-card__task-head-actions .dr-ms-status {
  margin-top: 0;
  align-self: center;
  height: 26px;
  box-sizing: border-box;
  align-items: center;
}
.dr-ms-card__task-head .dr-ms-card__detail-link {
  margin-top: 0;
  align-self: center;
  display: inline-flex;
  align-items: center;
  height: 26px;
  box-sizing: border-box;
}
.dr-ms-board--readonly {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dr-ms-board--dash {
  max-height: none;
  background: transparent;
}
/* Vùng danh sách issue PM: nền xám như milestone member — card trắng nổi bật */
.dr-dash-panel--issues .dr-ms-board--dash {
  background: #f1f5f9;
  padding: 12px 14px 16px;
}
.dr-dash-panel--issues .dr-dash-pagination--issues {
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
}
.dr-dash-page--member .dr-ms-board--dash {
  background: #f1f5f9;
  padding: 12px 14px 16px;
  border: none;
  border-radius: 0;
}
.dr-dash-panel--issues .dr-dash-panel__empty {
  padding: 24px 16px;
  text-align: center;
}
.dr-dash-kpi--member {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 720px) {
  .dr-dash-kpi--member { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dr-ms-detect {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.dr-ms-detect__item {
  font-size: 11px;
  line-height: 1.35;
  padding: 4px 8px;
  margin-top: 4px;
  border-radius: 6px;
  border-left: 3px solid #94a3b8;
  background: #f8fafc;
  color: #475569;
}
.dr-ms-detect__item--error { border-left-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.dr-ms-detect__item--warning { border-left-color: #f59e0b; background: #fffbeb; color: #b45309; }
.dr-ms-detect__item--info { border-left-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }

/* Daily Report — PM/TL dashboard (một font Inter kế thừa từ body) */
.dr-dash-page {
  font-size: 14px;
  font-family: inherit;
  background: none;
}
.dr-dash-page .dr-dash-table,
.dr-dash-page .dr-dash-toolbar,
.dr-dash-page .dr-dash-kpi,
.dr-dash-page .dr-dash-panel,
.dr-dash-page .tab-btn {
  font-family: inherit;
}
.dr-dash-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-bottom: 16px;
}
.dr-dash-kpi {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .dr-dash-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .dr-dash-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dr-dash-kpi__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-align: center;
  min-height: 64px;
}
.dr-dash-kpi__item--blocker { border-color: #fecaca; background: #fef2f2; }
.dr-dash-kpi__item--risk { border-color: #fed7aa; background: #fff7ed; }
.dr-dash-kpi__item--open { border-color: #bfdbfe; background: #eff6ff; }
.dr-dash-kpi__item--total { border-color: #c7d2fe; background: #eef2ff; }
.dr-dash-kpi__item--pending { border-color: #fde68a; background: #fffbeb; }
.dr-dash-kpi__item--ok { border-color: #bbf7d0; background: #f0fdf4; }
.dr-dash-kpi__val { font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.dr-dash-kpi__lbl { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }
a.dr-dash-kpi__item {
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.dr-dash-kpi__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}
a.dr-dash-kpi__item:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
.dr-dash-kpi__item--active {
  box-shadow: 0 0 0 2px #6366f1 inset;
  border-color: #6366f1;
}
.dr-dash-stack .dr-dash-view-tabs.tab-bar {
  width: 100%;
  margin: 0;
  padding: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: none;
  position: static;
  top: auto;
}
.dr-dash-view-tabs .tab-btn {
  flex: 1;
  justify-content: center;
  text-align: center;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
}
.dr-dash-body {
  margin-top: 0;
  width: 100%;
}
.dr-dash-body > .dr-dash-panel--solo {
  margin-top: 0;
}
.dr-dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dr-dash-stats--compact { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.dr-dash-stat {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dr-dash-stat--total { border-left: 4px solid #6366f1; }
.dr-dash-stat--blocker { border-left: 4px solid #ef4444; }
.dr-dash-stat--risk { border-left: 4px solid #f59e0b; }
.dr-dash-stat--open { border-left: 4px solid #3b82f6; }
.dr-dash-stat--pending { border-left: 4px solid #8b5cf6; }
.dr-dash-stat__label { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; }
.dr-dash-stat__value { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1.1; }
.dr-dash-stat__value--ok { font-size: 16px; color: #059669; }
.dr-dash-stat__value--warn { font-size: 16px; color: #b45309; }
.dr-dash-stat__tag { font-size: 10px; font-weight: 700; color: #94a3b8; }
.dr-dash-panel--solo {
  width: 100%;
}
.dr-dash-panel--solo.dr-dash-panel--issues .dr-dash-table-wrap {
  max-height: min(72vh, 720px);
  overflow: auto;
}
.dr-dash-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.dr-dash-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 10px 14px;
  margin-bottom: 4px;
  background: transparent;
  border-bottom: none;
}
.dr-dash-panel__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}
.dr-dash-panel__meta { font-size: 12px; }
.dr-dash-panel--issues .dr-dash-table-wrap {
  border: none;
  border-radius: 0;
  border-bottom: none;
}
.dr-dash-panel--issues .dr-dash-table--issues .dr-dash-table__type {
  vertical-align: top;
  min-width: 140px;
}
.dr-dash-panel--issues .dr-dash-table--issues .dr-dash-table__type .dr-dash-pill {
  display: inline-block;
  margin-bottom: 6px;
}
.dr-dash-panel--issues .dr-dash-table--issues .dr-dash-table__task--merged {
  vertical-align: top;
  background: #fafbfc;
  border-right: 1px solid #e2e8f0;
}
.dr-dash-panel--issues .dr-dash-table--issues .dr-dash-table__row--task-cont td {
  border-bottom-style: dashed;
  border-bottom-color: #e2e8f0;
}
.dr-dash-panel--issues .dr-dash-table--issues .dr-dash-table__task-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
}
.dr-dash-panel--members.dr-dash-panel--solo .dr-dash-table-wrap {
  border: none;
  border-radius: 0;
}
.dr-dash-table--members-full .dr-dash-table__member-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: lowercase;
}
.dr-dash-panel--members .dr-dash-table-wrap {
  max-height: min(68vh, 780px);
  overflow: auto;
}
.dr-dash-panel--members .dr-dash-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
  box-shadow: 0 1px 0 #e2e8f0;
}
.dr-dash-panel--members .dr-dash-table-wrap--scroll {
  max-height: min(70vh, 640px);
  border: none;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.dr-dash-panel--members .dr-dash-table--compact {
  table-layout: fixed;
  width: 100%;
}
.dr-dash-panel--members .dr-dash-table--compact col.col-team { width: 52px; }
.dr-dash-panel--members .dr-dash-table--compact col.col-daily { width: 72px; }
.dr-dash-panel--members .dr-dash-table--compact col.col-rec { width: 64px; }
.dr-dash-panel--members .dr-dash-table--compact col.col-open { width: 56px; }
.dr-dash-panel--members .dr-dash-table--compact col.col-act { width: 52px; }
.dr-dash-detail-card__summary {
  flex: 1 1 200px;
  font-size: 13px;
  color: #334155;
  font-weight: 500;
}
.dr-dash-toolbar {
  display: grid;
  width: 100%;
  align-items: end;
  gap: 8px 10px;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-sizing: border-box;
  box-shadow: none;
}
/* Issue tab: date | team | loại | TT | member | tìm (co giãn) | Lọc */
.dr-dash-toolbar--issues {
  grid-template-columns:
    minmax(118px, 0.75fr)
    minmax(72px, 0.45fr)
    minmax(92px, 0.5fr)
    minmax(92px, 0.5fr)
    minmax(128px, 0.7fr)
    minmax(0, 1.6fr)
    auto;
}
/* Daily member tab: date | team | member | tìm (co giãn) | Lọc */
.dr-dash-toolbar--members {
  grid-template-columns:
    minmax(118px, 0.85fr)
    minmax(72px, 0.5fr)
    minmax(140px, 0.9fr)
    minmax(0, 2fr)
    auto;
}
@media (max-width: 960px) {
  .dr-dash-toolbar--issues,
  .dr-dash-toolbar--members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dr-dash-toolbar__search { grid-column: 1 / -2; }
  .dr-dash-toolbar__submit { grid-column: -1; justify-self: end; }
}
.dr-dash-toolbar__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}
.dr-dash-toolbar > label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}
.dr-dash-toolbar__lbl {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.dr-dash-toolbar__inp,
.dr-dash-toolbar__sel {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dr-dash-toolbar__sel.bul-select {
  min-height: 32px;
  padding-right: 28px;
  cursor: pointer;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.dr-dash-toolbar__inp[type="date"] {
  padding-right: 6px;
  color-scheme: light;
}
.dr-dash-toolbar__inp[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  margin-left: 2px;
}
.dr-dash-toolbar__inp[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.dr-dash-toolbar__search {
  min-width: 0;
}
.dr-dash-toolbar__search .dr-dash-toolbar__inp {
  width: 100%;
  min-width: 0;
  padding-left: 28px;
  font-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
}
.dr-dash-toolbar__inp::placeholder {
  color: #94a3b8;
}
.dr-dash-toolbar__inp:hover,
.dr-dash-toolbar__sel:hover {
  border-color: #94a3b8;
}
.dr-dash-toolbar__inp:focus,
.dr-dash-toolbar__sel:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dr-dash-toolbar__submit {
  align-self: end;
  height: 32px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.dr-dash-toolbar .btn-primary {
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  align-self: flex-end;
}
.dr-dash-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: auto;
  background: #fff;
}
.dr-dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dr-dash-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.dr-dash-table tbody td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: top;
}
.dr-dash-table--compact thead th,
.dr-dash-table--compact tbody td {
  padding: 7px 10px;
  font-size: 12px;
  vertical-align: middle;
}
.dr-dash-table--compact .dr-dash-table__act {
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 8px;
}
.dr-dash-table--compact .dr-dash-table__act .btn-xs {
  padding: 4px 8px;
  font-size: 11px;
}
.dr-dash-table__row--pending { background: #fff; }
.dr-dash-table__row--blocker { background: #fef2f2; }
.dr-dash-table__row--risk { background: #fffbeb; }
.dr-dash-table__row--blocker.dr-dash-table__row--resolved,
.dr-dash-table__row--risk.dr-dash-table__row--resolved { background: #f8fafc; }
.dr-dash-table__member-name {
  font-weight: 600;
  font-family: inherit;
  font-size: 13px;
  text-transform: lowercase;
}
.dr-dash-table--compact .dr-dash-table__member-name {
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
  font-size: 12px;
}
.dr-dash-table__team { white-space: nowrap; }
.dr-dash-table--compact .dr-dash-table__team {
  white-space: normal;
}
.dr-dash-table__num { text-align: center; font-variant-numeric: tabular-nums; }
.dr-dash-table__num--warn { color: #b45309; font-weight: 700; }
.dr-dash-table__empty { text-align: center; padding: 18px 12px; font-size: 13px; }
.dr-dash-team-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #3730a3;
  letter-spacing: 0.03em;
}
.dr-dash-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.dr-dash-badge--ok { background: #d1fae5; color: #065f46; }
.dr-dash-badge--pending { background: #fde68a; color: #92400e; }
.dr-dash-table__empty { text-align: center; color: #64748b; padding: 24px !important; }
.dr-dash-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.dr-dash-pill--critical { background: #fee2e2; color: #b91c1c; }
.dr-dash-pill--warning { background: #ffedd5; color: #c2410c; }
.dr-dash-pill--question { background: #dbeafe; color: #1d4ed8; }
.dr-dash-pill--other { background: #f1f5f9; color: #475569; }
.dr-dash-table__key { font-weight: 700; color: #4338ca; text-decoration: none; font-size: 12px; }
.dr-dash-table__key:hover { text-decoration: underline; }
.dr-dash-table__body { margin-top: 4px; color: #334155; line-height: 1.4; }
.dr-dash-table__daily { margin-top: 6px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; }
.dr-dash-priority { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.dr-dash-priority__dot { width: 8px; height: 8px; border-radius: 50%; }
.dr-dash-priority--critical .dr-dash-priority__dot { background: #ef4444; }
.dr-dash-priority--high .dr-dash-priority__dot { background: #f59e0b; }
.dr-dash-priority--medium .dr-dash-priority__dot { background: #3b82f6; }
.dr-dash-priority--low .dr-dash-priority__dot { background: #94a3b8; }
.dr-dash-table__member { display: flex; gap: 10px; align-items: flex-start; min-width: 160px; }
.dr-dash-table__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e2e8f0; color: #475569;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.dr-dash-table__member-name { font-weight: 600; }
.dr-dash-table__member-meta { font-size: 11px; }
.dr-dash-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.dr-dash-status--open { background: #dbeafe; color: #1d4ed8; }
.dr-dash-status--resolved { background: #d1fae5; color: #065f46; }
.dr-dash-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  font-size: 13px;
  color: #64748b;
}
.dr-dash-pagination--issues {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 9px 9px;
}
.dr-dash-pagination__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dr-dash-member-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 14px;
  gap: 12px;
}
.dr-dash-member-toolbar__date {
  margin: 0;
}
.dr-dash-member-toolbar__date .dr-dash-toolbar__field--date {
  min-width: 160px;
}
/* General issues (off-Jira) section on member page. */
.dr-general {
  margin-top: 16px;
}
.dr-general__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dr-general__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.dr-general__sub {
  margin: 2px 0 0;
  font-size: 12px;
}
.dr-general__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.dr-general__empty {
  margin: 0;
  padding: 12px;
  font-size: 13px;
  text-align: center;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}
.dr-general__add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dr-general__sel {
  height: 34px;
  min-width: 120px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
}
.dr-general__inp {
  flex: 1;
  min-width: 200px;
  height: 34px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dr-general__inp::placeholder { color: #94a3b8; }
.dr-general__inp:hover,
.dr-general__sel:hover { border-color: #94a3b8; }
.dr-general__inp:focus,
.dr-general__sel:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.dr-dash-detail-list { display: flex; flex-direction: column; gap: 14px; }
.dr-dash-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  padding: 14px 16px;
}
.dr-dash-detail-card--pending { border-color: #e2e8f0; background: #fff; }
.dr-dash-detail-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.dr-dash-detail-card__key { font-weight: 700; color: #4338ca; text-decoration: none; }
.dr-dash-detail-card__badge {
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 4px;
  background: #fef3c7; color: #b45309;
}
.dr-dash-detail-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 12px;
}
@media (max-width: 900px) {
  .dr-dash-detail-card__grid { grid-template-columns: 1fr; }
}
.dr-dash-detail-card__col h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}
.dr-dash-detail-card__text {
  max-height: 120px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 8px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}
.dr-dash-detail-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dr-dash-detail-issue {
  padding: 8px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.dr-dash-detail-issue--resolved { opacity: 0.75; }
.dr-dash-detail-issue__body { margin: 4px 0 0; font-size: 13px; }
.dr-ms-issue-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.dr-ms-issue-item__id {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.dr-ms-issue-item__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}
.dr-ms-issue-act {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: #64748b;
}
.dr-ms-issue-act:hover { background: #f1f5f9; color: #0f172a; }
.dr-ms-issue-act--resolve:hover { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.dr-ms-issue-act--delete:hover { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }
.dr-ms-issue-item--resolved {
  opacity: 0.85;
  background: #f1f5f9;
  border-style: dashed;
}
.dr-ms-issue-item__resolved-note {
  font-size: 10px;
  color: #64748b;
  font-style: italic;
}
.dr-ms-issue-add {
  position: relative;
  margin-top: auto;
  padding-top: 4px;
}
.dr-ms-issue-add__btn,
.dr-ms-issue-add__toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2563eb;
  cursor: pointer;
}
.dr-ms-issue-add__btn:hover,
.dr-ms-issue-add__toggle:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.dr-ms-issue-add__form {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.dr-ms-issue-add__form[hidden] { display: none; }
.dr-ms-issue-add__sel {
  width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.dr-ms-issue-add__inp {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}
.dr-ms-issue-add__sel,
.dr-ms-issue-add__inp {
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dr-ms-issue-add__sel:hover,
.dr-ms-issue-add__inp:hover { border-color: #94a3b8; }
.dr-ms-issue-add__sel:focus,
.dr-ms-issue-add__inp:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Board 3 cột (legacy) — cùng chiều cao, vùng scroll bằng nhau */
.daily-report-page .dr-board {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(200px, 0.88fr) minmax(300px, 1.55fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 0;
  flex: 1 1 0;
  min-height: min(420px, calc(100dvh - 300px));
  max-height: calc(100dvh - 200px);
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
@media (max-width: 900px) {
  .daily-report-page .dr-board {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 28vh) minmax(200px, 28vh) minmax(240px, 1fr);
    flex: none;
    min-height: 0;
    max-height: none;
    height: auto;
  }
}
.dr-board__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid #e2e8f0;
}
.dr-board__col:last-child { border-right: none; }
/* Cột Task — vừa đủ rộng, summary xuống dòng */
.dr-board__col--task .dr-pick {
  padding: 8px 10px;
  margin-bottom: 5px;
  font-size: 13px;
  gap: 4px 8px;
  align-items: flex-start;
}
.dr-board__col--task .dr-pick__key { font-size: 12px; }
.dr-board__col--task .dr-pick__sum {
  flex: 1 1 100%;
  font-size: 13px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.4;
}
.dr-board__col--task .dr-pick__meta { font-size: 11px; }
/* Cột báo cáo — Today/Tomorrow xếp dọc, nhiều chỗ gõ */
.dr-board__col--work .dr-work__fields {
  grid-template-columns: 1fr;
  gap: 10px;
}
.dr-board__col--work .dr-work__ta {
  min-height: 64px;
  resize: vertical;
}
.dr-board__col-head {
  flex-shrink: 0;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.dr-board__col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
}
/* Cột Task: placeholder cố định, list task scroll bên dưới */
.dr-board__col-body--stacked {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.dr-board__col-body--stacked .dr-board__placeholder {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}
.dr-task-list,
.dr-work-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  -webkit-overflow-scrolling: touch;
}
.dr-board__placeholder {
  margin: 12px 10px;
  font-size: 14px;
  color: #94a3b8;
}

.dr-fv-group { margin-bottom: 8px; }
.dr-fv-group[hidden] { display: none; }
.dr-fv-label {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 8px;
  margin-bottom: 6px;
}

.dr-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dr-pick:hover { background: #f1f5f9; }
.dr-pick.is-active {
  background: #eef2ff;
  border-color: #a5b4fc;
}
.dr-pick[hidden] { display: none; }
.dr-pick__key {
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
}
.dr-pick__sum {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-pick__meta {
  font-size: 12px;
  color: #94a3b8;
}
.dr-pick__badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
}

.dr-task-panel[hidden],
.dr-work-panel[hidden] { display: none; }

/* Cột báo cáo: panel hiển thị chiếm hết vùng scroll (cân cột Task) */
.dr-work-list .dr-work-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}
.dr-work-list .dr-work-panel:not([hidden]) > .dr-work:only-of-type {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dr-work-list .dr-work-panel:not([hidden]) > .dr-work:only-of-type .dr-work__fields {
  flex: 1 1 auto;
  align-items: stretch;
}
.dr-work-list .dr-work-panel:not([hidden]) > .dr-work:only-of-type .dr-work__field {
  flex: 1 1 0;
  min-height: 0;
}
.dr-work-list .dr-work-panel:not([hidden]) > .dr-work:only-of-type .dr-work__ta {
  flex: 1 1 auto;
  min-height: 72px;
  resize: none;
}

.dr-work-panel__note {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 14px;
  background: #f8fafc;
  border-radius: var(--radius);
}

.dr-work {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #fff;
  font-size: 14px;
}
.dr-work[hidden] { display: none; }
.dr-work--pending,
.dr-work--filled { border-left: 1px solid #e2e8f0; }
.dr-work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.dr-work__type {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-right: 8px;
}
.dr-work__key {
  font-size: 13px;
  font-weight: 600;
  color: #4338ca;
  text-decoration: none;
}
.dr-work__key:hover { text-decoration: underline; }
.dr-work__ua {
  font-size: 11px;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #64748b;
}
/* Trạng thái Sub-task / Task — chip góc phải, dễ theo dõi */
.dr-status {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  max-width: 48%;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: right;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dr-status--done {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.dr-status--progress {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #93c5fd;
}
.dr-status--blocked {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}
.dr-status--todo {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
}
.dr-status--unknown {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}
.dr-work__sum {
  flex: 1 1 100%;
  margin: 2px 0 0;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.45;
}
.dr-work__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 600px) {
  .dr-work__fields { grid-template-columns: 1fr; }
}
.dr-work__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}
.dr-work__ta {
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #fff;
  resize: vertical;
}
.dr-work__ta:focus {
  outline: none;
  border-color: #818cf8;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}
.dr-work__ta.is-saving { border-color: #f59e0b; background: #fffbeb; }
.dr-work__ta.is-saved { border-color: #10b981; background: #f0fdf4; }
.dr-work__ta.is-error { border-color: #ef4444; background: #fef2f2; }
/* Issue — block + bảng theo dõi */
.dr-issues-block {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
  background: #f8fafc;
}
.dr-issues-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dr-issues-block__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}
.dr-issues-block__count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e0e7ff;
  color: #4338ca;
}
.dr-issues-table-wrap {
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  max-height: min(240px, 40vh);
}
.dr-issues-table-wrap[hidden] { display: none; }
.dr-issues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dr-issues-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f5f9;
}
.dr-issues-table th,
.dr-issues-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: top;
}
.dr-issues-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
}
.dr-issues-table__th-cat { width: 96px; }
.dr-issues-table__cat { white-space: nowrap; }
.dr-issues-table__body {
  color: #334155;
  word-break: break-word;
  line-height: 1.45;
}
.dr-issues-table tbody tr:last-child td { border-bottom: none; }
.dr-issues-table tbody tr[data-dr-issue-new] {
  animation: dr-issue-in 0.35s ease;
}
@keyframes dr-issue-in {
  from { background: #ecfdf5; }
  to { background: transparent; }
}
.dr-issues-empty {
  margin: 0 0 8px;
  font-size: 13px;
}
.dr-issues-empty[hidden] { display: none; }
.dr-work__issue-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dr-work__sel {
  width: 110px;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
}
.dr-work__inp {
  flex: 1;
  min-width: 140px;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius);
}

.dr-icat {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}
.dr-icat--blocker { background: #fee2e2; color: #b91c1c; }
.dr-icat--risk { background: #fef3c7; color: #b45309; }
.dr-icat--question { background: #dbeafe; color: #1d4ed8; }
.dr-icat--other { background: #f1f5f9; color: #475569; }

/* form-grid for pm_task_new */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
}
.form-grid label.full-row, .form-grid fieldset.full-row,
.form-grid .full-row { grid-column: 1 / -1; }
.form-grid select, .form-grid input {
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 14px; background: #fff; width: 100%;
}
.form-grid fieldset {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px;
}
.form-grid fieldset legend { font-weight: 600; padding: 0 6px; color: var(--primary-dk); }
.req {
  color: var(--danger);
  font-weight: 700;
  margin-left: 2px;
}
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
  line-height: 1.35;
}
.validation-summary-valid {
  display: none;
}
.task-new-form .flash-error ul {
  margin: 0;
  padding-left: 18px;
}
.bul-field input.input-error,
.bul-field select.input-error,
.bul-field textarea.input-error {
  border-color: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}
.bul-check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  width: auto;
  max-width: 100%;
}
.bul-check-inline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.bul-jira-epic-block .bul-form-grid input[type="text"],
.bul-jira-epic-block input[name="JiraEpicKey"] {
  min-height: 40px;
}
.task-new-teams-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.task-new-teams-fieldset legend {
  padding: 0;
  margin: 0 0 8px;
  font-size: inherit;
  font-weight: inherit;
}

.checkbox-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.checkbox-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 20px;
  cursor: pointer; user-select: none; background: #fff;
}
.checkbox-pill input { margin: 0; }
.checkbox-pill:has(input:checked) {
  background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dk);
}

.form-actions { display: flex; gap: 10px; align-items: center; }
.info-collapsible {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; margin: 12px 0 16px;
}
.info-collapsible summary { cursor: pointer; font-weight: 600; color: var(--primary-dk); }

/* estimate table */
.table-scroll { overflow-x: auto; margin-top: 8px; }
.estimate-table { font-size: 12px; min-width: 1100px; }
.estimate-table thead th {
  position: sticky; top: 0; z-index: 1;
  font-size: 11px; padding: 5px 6px;
}
.estimate-table tbody td { padding: 4px 6px; }
.estimate-table input, .estimate-table select {
  padding: 3px 5px; border: 1px solid var(--border);
  border-radius: 4px; font-size: 12px; width: 100%; background: #fff;
}
.estimate-table input.input-qty,
.estimate-table input.input-md,
.estimate-table input.input-rework,
.estimate-table input.input-risk { width: 64px; }
.estimate-table input.input-item { min-width: 140px; }
.estimate-table input.input-note { min-width: 120px; }
.estimate-table .cell-total {
  background: #f3f6fa; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.estimate-table tr.phase-divider td {
  background: var(--primary-soft); color: var(--primary-dk);
  font-size: 12px; padding: 5px 10px;
}
.estimate-table tr.row-marked-delete td { opacity: 0.4; text-decoration: line-through; }
.estimate-table tr.custom-row td { background: var(--primary-soft); }

.del-checkbox {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; background: #fff; color: var(--danger);
}
.del-checkbox input { display: none; }
.del-checkbox:has(input:checked) { background: var(--danger-soft); border-color: var(--danger); }
.del-checkbox span { font-size: 14px; font-weight: 600; }
.estimate-table tfoot td {
  background: var(--primary-soft); color: var(--primary-dk); font-size: 13px;
}
#grand-md, #grand-mh { font-size: 14px; }

.summary-table tbody td { font-variant-numeric: tabular-nums; }
.summary-table .phase-md, .summary-table .phase-mh { text-align: right; font-weight: 600; }

/* ---------------- 1b' function/group additions ---------------- */
.function-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 16px 0;
  padding: 12px 14px;
}
.function-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.function-title-line { display: flex; align-items: center; gap: 10px; flex: 1; }
.function-no {
  font-weight: 600; color: var(--primary-dk);
  background: var(--primary-soft);
  padding: 4px 10px; border-radius: var(--radius);
  font-size: 13px; white-space: nowrap;
}
.function-name {
  flex: 1; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 14px; font-weight: 500;
}
.function-name:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.estimate-table.func-table { min-width: auto; font-size: 13px; }
.estimate-table.func-table th { font-size: 12px; padding: 6px 8px; }
.estimate-table.func-table td { padding: 4px 8px; }
.estimate-table.func-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.estimate-table.func-table th.num { text-align: right; }
.estimate-table.func-table .cell-group {
  background: var(--primary-soft); color: var(--primary-dk);
  font-weight: 600; font-size: 12px; vertical-align: middle;
  text-align: center;
}
/* ── Assign matrix (PM / BrSE / TL) ─────────────────────────────────────── */
.estimate-assign-panel { border-color: #c5d4e8; }
.estimate-assign-panel-title { color: var(--primary-dk); }
.estimate-assign-hint {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}
.assign-matrix-wrap { margin-bottom: 12px; }
.assign-matrix-wrap--fit {
  overflow-x: visible;
  margin-bottom: 0;
}
.assign-matrix {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  border-spacing: 0;
}
.assign-matrix--compact {
  table-layout: fixed;
  font-size: 13px;
}
.assign-matrix th,
.assign-matrix td {
  padding: 8px 10px;
  vertical-align: middle;
  border: 1px solid var(--border);
}
.assign-matrix--compact th,
.assign-matrix--compact td {
  padding: 6px 8px;
}
.assign-matrix thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  border-color: var(--border);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.assign-matrix thead th .team-badge,
.assign-matrix thead th .team-badge.dark {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.assign-matrix--compact .assign-matrix-fn {
  width: 24%;
  min-width: 0;
  text-align: left;
}
.assign-matrix-fn-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  background: #f8f9fb !important;
  border-color: var(--border) !important;
  line-height: 1.35;
  word-break: break-word;
}
.assign-matrix--compact .assign-matrix-team {
  min-width: 0;
  width: auto;
  text-align: center;
}
.assign-matrix--compact .assign-matrix-team .team-badge {
  font-size: 11px;
  padding: 2px 8px;
}
.assign-matrix-cell {
  min-width: 0;
  background: #fff;
}
.assign-matrix-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.assign-picker-label {
  display: block;
  margin: 0;
  min-width: 0;
}
.assign-rate-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.assign-rate-caption {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.assign-rate-select {
  width: 100%;
  min-width: 0;
  max-width: 5.5rem;
  font-size: 12px;
}
.assign-matrix-cell .assign-rate-select + .select2-container {
  max-width: 5.5rem !important;
}
.assign-rate-select.is-saving,
.assign-matrix-cell .select2-container.assign-rate-select--saving .select2-selection--single {
  opacity: 0.65;
}
.assign-picker-caption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.assign-matrix-fill-row th {
  background: #eef4fc !important;
  border-color: var(--border) !important;
  vertical-align: middle;
  font-weight: 500;
}
.assign-matrix-fn--fill {
  text-align: left !important;
  vertical-align: middle !important;
}
.assign-fill-hint {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dk);
  line-height: 1.3;
}
.assign-matrix-team--fill {
  padding: 4px 6px !important;
}
.assign-fill-label {
  display: block;
  margin: 0;
  min-width: 0;
}
.assign-fill-caption {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 3px;
}
.assign-fill-team {
  width: 100%;
  font-size: 12px;
}
.assign-matrix-cell .assign-fill-team + .select2-container,
.assign-matrix-team--fill .select2-container {
  width: 100% !important;
  max-width: 100%;
}
.assign-fill-team.is-saving + .select2-container .select2-selection--single {
  opacity: 0.65;
}

.assign-picker {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 6px 28px 6px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.assign-picker:hover {
  border-color: #9cb3cc;
}
.assign-picker:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.assign-picker--dirty,
.select2-container.assign-picker--dirty .select2-selection--single {
  border-color: #d97706 !important;
  background-color: #fffbeb !important;
}
.estimate-assign-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-top: 4px;
}
.estimate-assign-actions-hint { font-size: 13px; max-width: 420px; }
.assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-dk);
  background: var(--primary-soft);
  border-radius: 999px;
  max-width: 100%;
}
.assignee-chip--empty {
  color: var(--muted);
  background: #f3f4f6;
  font-style: italic;
}
.assignee-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estimate-actions-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.estimate-actions-group-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-right: 4px;
}
.estimate-mh-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.estimate-table.func-table .cell-task {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: 1.4;
  color: var(--text);
}
.estimate-table.func-table .cell-mh-customer {
  background: #f3f6fa; color: var(--primary-dk); font-weight: 600;
}
.estimate-table.func-table input { padding: 3px 6px; font-size: 12px; }
.estimate-table.func-table .input-mh   { width: 70px; text-align: right; }
.estimate-table.func-table .input-item { min-width: 120px; }
.estimate-table.func-table .input-note { min-width: 110px; }
.estimate-table.func-table .input-risk { min-width: 110px; }

.summary-table .num { text-align: right; font-weight: 600; }
.summary-table th.num { text-align: right; }
.summary-table .grand-row td {
  background: var(--table-head-bg); color: var(--table-head-text);
  font-size: 14px;
}
.summary-table .summary-fn-name { display: block; font-style: italic; }

/* Phase heading + readonly row (form chung Phase × Function × Team) */
h2.phase-heading {
  margin-top: 28px; padding: 6px 12px;
  background: var(--primary-dk); color: #fff; border-radius: 4px;
  font-size: 16px;
}
tr.row-readonly { background: #fafafa; }
tr.row-readonly input { background: transparent; color: #666; border-color: #e0e0e0; }

/* =========================================================
   Sidebar layout (logged-in pages)
   ========================================================= */
.page-layout {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--bul-topbar-height));
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  top: var(--bul-topbar-height);
  right: 0;
  bottom: 0;
  left: var(--sidebar-width);
  z-index: 90;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
}
.sidebar-backdrop.active { display: block; }

.sidebar {
  position: fixed;
  top: var(--bul-topbar-height);
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 12px 0 0;
  border-right: 1px solid var(--border);
  z-index: 10020;
  overflow: hidden;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
}
.sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 56px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
}
.sidebar-toggle--dock {
  position: fixed;
  z-index: 10025;
  left: 10px;
  bottom: 12px;
  width: calc(var(--sidebar-width) - 20px);
  justify-content: center;
  min-height: 40px;
  font-size: 18px;
  line-height: 1;
  background: var(--sidebar-bg);
  border-color: var(--border);
  box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.04);
  border-radius: 10px;
  transition:
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.sidebar-toggle--dock:hover {
  background: var(--sidebar-hover);
  border-color: var(--btn-border-strong);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.sidebar-toggle--dock:active {
  transform: scale(0.97);
}

.side-menu, .side-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-menu > li { margin: 0 0 3px; }

.side-menu > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  border-left: none;
  border-right: 4px solid transparent;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.18s ease;
}
.side-menu > li > a:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
  text-decoration: none;
  transform: translateX(2px);
}
.side-menu > li > a:active {
  transform: translateX(1px) scale(0.99);
}
.side-menu > li.active > a {
  background: var(--sidebar-active);
  color: var(--primary);
  font-weight: 600;
  box-shadow: none;
  border-right-color: var(--sidebar-accent);
}

/* Nhóm có submenu */
.side-menu > li.has-children {
  margin-bottom: 6px;
}

button.side-section,
.side-section-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.18s ease;
}
button.side-section:hover,
.side-section-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
  transform: translateX(2px);
}
button.side-section:active,
.side-section-btn:active {
  transform: translateX(1px) scale(0.99);
}
.has-children.open > button.side-section,
.has-children.open > .side-section-btn {
  color: var(--sidebar-text);
  background: var(--sidebar-hover);
}

.section-arrow {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.75;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.has-children.open > button.side-section .section-arrow,
.has-children.open > .side-section-btn .section-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.side-submenu {
  display: block;
  position: relative;
  z-index: 2;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0 0 0 10px;
  padding: 0 0 0 10px;
  border-left: 2px solid transparent;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease,
    margin 0.28s ease,
    padding 0.28s ease,
    border-color 0.28s ease;
}
.has-children.open > .side-submenu {
  max-height: 420px;
  opacity: 1;
  margin: 6px 0 10px 10px;
  padding: 6px 0 6px 10px;
  border-left-color: rgba(226, 232, 240, 0.9);
}
.side-submenu--nested {
  margin-left: 12px;
  padding-left: 8px;
  border-left-color: rgba(226, 232, 240, 0.7);
}

.side-submenu li { margin: 2px 0; }
.side-submenu li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 12px;
  margin: 0 2px;
  color: var(--sidebar-muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  border-left: none;
  border-right: 4px solid transparent;
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.18s ease;
}
.side-submenu li a:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
  text-decoration: none;
  transform: translateX(2px);
}
.side-submenu li a:active {
  transform: translateX(1px) scale(0.99);
}
.side-submenu li.active > a {
  background: var(--sidebar-active);
  color: var(--primary);
  font-weight: 600;
  box-shadow: none;
  border-right-color: var(--sidebar-accent);
}

button.side-section--nested,
.side-section-btn.side-section--nested {
  padding: 10px 12px 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sidebar-muted);
}

.sidebar .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: currentColor;
  line-height: 1;
  opacity: 0.92;
}
.sidebar .ico svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Khi có sidebar: container không auto-center, fill phần còn lại */
body.has-sidebar .page-layout > .container {
  max-width: none;
  margin: 14px 16px 32px calc(var(--sidebar-width) + 16px);
  flex: 1;
  min-width: 0;
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
body.has-sidebar .footer {
  margin-left: var(--sidebar-width);
  transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Thu gọn sidebar (desktop) — giữ thanh footer + nút ☰ */
body.has-sidebar.sidebar-collapsed .sidebar {
  width: 52px;
  min-width: 52px;
  padding: 0;
  overflow: hidden;
  opacity: 1;
  pointer-events: auto;
}
body.has-sidebar.sidebar-collapsed .sidebar nav {
  display: none;
}
body.has-sidebar.sidebar-collapsed .sidebar-toggle--dock {
  width: 40px;
  left: 6px;
}
body.has-sidebar.sidebar-collapsed .page-layout > .container {
  margin-left: calc(52px + 16px);
}
body.has-sidebar.sidebar-collapsed .footer {
  margin-left: 52px;
}
body.has-sidebar.sidebar-collapsed .sidebar-backdrop.active {
  left: 52px;
}

/* Khi không có sidebar (login page): giữ logic cũ */
body:not(.has-sidebar) .page-layout {
  display: block;
}

@media (max-width: 960px) {
  .sidebar-backdrop {
    top: var(--bul-topbar-height);
    left: min(300px, 88vw);
    right: 0;
    bottom: 0;
  }
  .sidebar-toggle--dock {
    width: 44px;
    left: 12px;
    bottom: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }
  .sidebar.active ~ .sidebar-toggle--dock {
    width: calc(min(300px, 88vw) - 24px);
    left: 12px;
  }
  .sidebar {
    position: fixed;
    top: var(--bul-topbar-height);
    left: 0;
    bottom: 0;
    width: min(300px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
  }
  .sidebar.active {
    transform: translateX(0);
  }
  body.has-sidebar .page-layout > .container {
    margin: 16px !important;
  }
  body.has-sidebar .footer {
    margin-left: 0;
  }
}

@media (max-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   PMO Report — QDC styles
   ========================================================= */

/* Status dot */
.qdc-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qdc-good { background: var(--success); }
.qdc-warn { background: #d97706; }
.qdc-bad  { background: var(--danger); }
.qdc-none { background: #d1d5db; }

/* Legend row */
.qdc-legend {
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 14px;
}
.qdc-legend .qdc-dot { margin-right: 4px; }

/* QDC list page (/pmo/qdc) */
.qdc-page {
  font-size: 13px;
}
.qdc-page h1 {
  font-size: 20px;
  margin-bottom: 4px;
}
.qdc-page .page-header .muted {
  font-size: 12px;
  line-height: 1.45;
  max-width: 52rem;
}
.qdc-page .task-list-toolbar {
  margin-bottom: 10px;
  font-size: 12px;
}
.qdc-page .task-list-toolbar label {
  font-size: 12px;
}
.qdc-list-meta,
.filter-result-meta {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text);
}
.qdc-list-meta__fv {
  color: var(--primary-dk);
}
/* Bảng tổng hợp dự án (1 hàng KPI) */
.qdc-project-kpi {
  margin-bottom: 16px;
}
.qdc-project-kpi__title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary-dk);
}
.qdc-project-kpi-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1100px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.qdc-project-kpi-table th,
.qdc-project-kpi-table td {
  text-align: center;
  padding: 10px 8px;
  vertical-align: middle;
}
.qdc-project-kpi-th {
  font-size: 11px;
  font-weight: 700;
  background: var(--table-head-bg);
  color: var(--table-head-text);
  white-space: nowrap;
}
.qdc-project-kpi-th__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
}
.qdc-project-kpi-th .bul-info {
  flex-shrink: 0;
}
.qdc-project-kpi-val {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.qdc-project-kpi-strip-wrap {
  margin-bottom: 4px;
}
.qdc-project-kpi-val strong { margin-left: 6px; }
.qdc-project-kpi-val--good,
.qdc-project-kpi-th--good { background: #f0fdf4; }
.qdc-project-kpi-val--bad,
.qdc-project-kpi-th--bad  { background: #fff1f2; }
.qdc-project-kpi-val--warn,
.qdc-project-kpi-th--warn { background: #fffbeb; }

.qdc-list-scroll {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: #fff;
  overflow-x: auto;
}
.qdc-list-scroll .qdc-summary-table {
  table-layout: fixed;
  width: 100%;
  min-width: 980px;
  font-size: 12px;
  border: none;
  border-radius: 0;
}
.qdc-summary-table col.qdc-col-id { width: 72px; }
.qdc-summary-table col.qdc-col-title { width: 32%; }
.qdc-summary-table col.qdc-col-metric { width: 82px; }
.qdc-summary-table col.qdc-col-actions { width: 128px; }
.qdc-cell.qdc-cell--good { background: #f8fffb; }
.qdc-cell.qdc-cell--bad  { background: #fff8f8; }
.qdc-cell.qdc-cell--warn { background: #fffdf5; }
.qdc-summary-table tr.qdc-row-at-risk td { background: color-mix(in srgb, #ef5350 5%, #fff); }
.qdc-summary-table tr.qdc-row-warn-only td { background: color-mix(in srgb, #ffa726 4%, #fff); }
.qdc-summary-table thead th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 11px;
  padding: 7px 6px;
  vertical-align: middle;
}
.qdc-summary-table th.cat-quality { background: #1e3a5f; color: #fff; }
.qdc-summary-table th.cat-delivery { background: #14532d; color: #fff; }
.qdc-summary-table th.cat-cost    { background: #78350f; color: #fff; }
.qdc-summary-table th.qdc-col-hd  {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 4px;
  text-align: center;
  white-space: nowrap;
}
.qdc-summary-table th.qdc-col-id,
.qdc-summary-table td.qdc-col-id {
  text-align: left;
  overflow: hidden;
}
.qdc-summary-table th.qdc-col-title,
.qdc-summary-table td.qdc-col-title {
  overflow: hidden;
}
.qdc-summary-table th.qdc-col-actions,
.qdc-summary-table td.qdc-col-actions {
  text-align: right;
}
.qdc-summary-table tbody td {
  padding: 7px 6px;
  vertical-align: middle;
  border-color: var(--border);
  overflow: hidden;
}
.qdc-summary-table tbody tr:hover td {
  background: var(--primary-soft);
}
.qdc-summary-table tbody tr.qdc-row-jira-only td.qdc-col-title {
  background: #fffbeb;
}
.qdc-summary-table tbody tr.qdc-row-jira-only:hover td.qdc-col-title {
  background: #fef3c7;
}
.qdc-task-link {
  display: block;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--primary-dk);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qdc-task-link:hover { text-decoration: underline; }
.qdc-task-code {
  display: block;
  font-size: 10px;
  line-height: 1.25;
  color: var(--muted);
  background: #f3f4f6;
  padding: 2px 4px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qdc-task-title {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qdc-jira-hint {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  color: #92400e;
  background: #fef3c7;
  padding: 1px 6px;
  border-radius: 4px;
}
.qdc-summary-table .qdc-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.qdc-summary-table .qdc-cell {
  text-align: center;
  padding: 6px 4px !important;
}
.qdc-cell-inner {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
}
.qdc-cell--empty { opacity: 0.5; }
.qdc-summary-table .qdc-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 58px;
}
.qdc-actions-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
  align-items: center;
}
.qdc-page .qdc-col-actions .btn {
  font-size: 11px;
  padding: 5px 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.qdc-page .qdc-col-actions form {
  display: inline-flex;
  margin: 0;
}
.qdc-actions-hint {
  font-size: 10px;
  line-height: 1.25;
}

/* QDC detail table (task page) */
.qdc-section { margin-bottom: 28px; }
.qdc-section-title {
  font-size: 15px; font-weight: 600;
  margin: 0 0 8px; color: var(--primary-dk);
  border-left: 4px solid var(--primary); padding-left: 10px;
}
.qdc-detail-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.qdc-detail-table .qdc-val-cell {
  font-weight: 700; font-size: 14px; text-align: right;
}
.qdc-detail-table tr.row-good td { background: #f0fdf4; }
.qdc-detail-table tr.row-bad  td { background: #fff1f2; }
.qdc-detail-table tr.row-warn td { background: #fffbeb; }

.qdc-task-summary { margin-bottom: 24px; }
.qdc-kpi-table .qdc-kpi-val { font-weight: 700; font-size: 15px; }
.qdc-kpi-table .qdc-formula { font-size: 11px; margin-top: 2px; }
.qdc-kpi-table tr.row-good td { background: #f0fdf4; }
.qdc-kpi-table tr.row-bad  td { background: #fff1f2; }
.qdc-kpi-table tr.row-warn td { background: #fffbeb; }
.qdc-links-cell .qdc-issue-link {
  display: inline-block;
  font-size: 11px;
  margin: 0 4px 4px 0;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-dk);
  text-decoration: none;
}
.qdc-links-cell .qdc-issue-link:hover { text-decoration: underline; }
.qdc-links-cell .qdc-issue-more { margin-left: 4px; }
.qdc-raw-block { margin-top: 20px; font-size: 13px; }
.qdc-raw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
@media (max-width: 720px) { .qdc-raw-grid { grid-template-columns: 1fr; } }

/* QDC edit form */
.qdc-edit-form { max-width: 820px; }
.qdc-fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin-bottom: 18px;
}
.qdc-fieldset legend {
  font-weight: 700; font-size: 14px;
  padding: 0 8px; color: var(--primary-dk);
}

/* Coming-soon chips (People / Training pages) */
.coming-soon-chip {
  background: var(--primary-soft); color: var(--primary-dk);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 16px; font-size: 13px; font-weight: 500;
}

/* =========================================================
   Task List
   ========================================================= */
.task-list-page {
  font-size: 15px;
}
.task-list-page .muted { font-size: 14px; }
.task-list-page .status-badge { font-size: 12px; }
.task-list-page .page-header-sub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 6px;
}
.conn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 3px 10px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface);
}
.conn-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--danger); flex-shrink: 0;
}
.conn-pill.is-ok::before { background: var(--success); }
.conn-pill.is-ok { border-color: #bbf7d0; background: var(--success-soft); color: var(--success); }
.conn-pill.is-off { color: var(--muted); }

.task-list-toolbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.task-list-toolbar label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  min-width: 240px; flex: 0 1 280px;
  margin: 0;
}
.task-list-toolbar .toolbar-control,
.task-list-toolbar select,
.task-list-toolbar input[type="text"],
.task-list-toolbar input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  background: var(--surface);
  color: var(--text);
}
.task-list-toolbar .toolbar-control:focus,
.task-list-toolbar select:focus,
.task-list-toolbar input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
/* Select2 trong toolbar — cùng chiều cao/viền, không nút X (chọn «Tất cả» trong list) */
.task-list-toolbar .select2-container {
  width: 100% !important;
  display: block;
}
.task-list-toolbar .select2-container--default .select2-selection--single {
  min-height: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.task-list-toolbar .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 8px 32px 8px 12px;
  line-height: 20px;
}
.task-list-toolbar .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 6px;
}
.task-list-toolbar .select2-container--default .select2-selection--single .select2-selection__clear {
  display: none !important;
}

.task-list-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.task-stat {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 13px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
}
a.task-stat-btn {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
a.task-stat-btn:hover {
  text-decoration: none;
  border-color: var(--primary);
  background: var(--primary-soft);
}
a.task-stat-btn.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary);
  font-weight: 600;
}
.task-stat strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.task-stat--ok strong { color: var(--success); }
.task-stat--warn strong { color: #c06000; }

.table-card {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.table-card .data-table {
  border: none;
  border-radius: 0;
  font-size: 14px;
}
.table-card .data-table th,
.table-card .data-table td {
  border-left: none;
  border-right: none;
}
.table-card .data-table th,
.table-card .data-table td {
  padding: 8px 12px;
}
.table-card .data-table tbody tr:hover { background: var(--primary-soft); }
.table-card .data-table tr.row-missing-db td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}
.table-card .epic-key code {
  font-size: 13px; font-weight: 600;
  background: var(--primary-soft); color: var(--primary-dk);
}
.table-card .col-excel { text-align: center; }
.excel-ok { color: var(--primary); font-weight: 600; }
.db-missing { font-size: 13px; color: #c06000; font-weight: 500; }
.db-imported { font-size: 13px; color: var(--muted); }

.page-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.page-actions form { margin: 0; }

/* Table row actions — compact, aligned */
.data-table td .page-actions,
.data-table .col-action,
.data-table td:has(> .btn),
.data-table td:has(> form .btn) {
  white-space: nowrap;
}
.data-table td .page-actions {
  gap: 6px;
}
.data-table td .btn + .btn,
.data-table td form + form,
.data-table td form + .btn,
.data-table td .btn + form {
  margin-left: 0;
}
/* Nút trong bảng — nhỏ hơn toolbar/hero (tránh .btn mặc định 14px/8px padding) */
.table-card .data-table .btn.btn-sm,
.table-card .data-table .btn.btn-xs {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  min-height: 0;
}

.task-list-panel {
  margin-top: 28px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.task-list-panel > summary {
  cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 12px 16px; list-style: none;
  display: flex; align-items: center; gap: 8px;
  background: var(--primary-soft); color: var(--primary-dk);
  user-select: none;
}
.task-list-panel > summary::-webkit-details-marker { display: none; }
.task-list-panel > summary::after {
  content: "▾"; margin-left: auto; font-size: 12px; opacity: 0.6;
  transition: transform 0.15s ease;
}
.task-list-panel[open] > summary::after { transform: rotate(180deg); }
.task-list-panel .panel-count {
  background: var(--warn-soft); color: var(--warn);
  border-radius: 999px; padding: 2px 9px; font-size: 12px; font-weight: 700;
}
.task-list-panel .table-card { border: none; border-radius: 0; box-shadow: none; }
.task-list-panel .inline-input {
  width: 100%; min-width: 140px; font-size: 14px;
  padding: 6px 9px; border: 1px solid var(--border);
  border-radius: 6px; background: #fff;
}
.task-list-panel .inline-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

/* =========================================================
   New Task (TaskList)
   ========================================================= */
/* Form labels + (i) tooltip */
.bul-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.bul-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #8a8f9a;
  border-radius: 50%;
  background: transparent;
  color: #5c6370;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: help;
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.85;
}
.bul-info--lg {
  width: 17px;
  height: 17px;
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
}
.bul-info:hover,
.bul-info:focus {
  opacity: 1;
  color: #3d4450;
  border-color: #6b7280;
  background: rgba(0, 0, 0, 0.03);
  outline: none;
}
.mp-page-title--with-tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.bul-tip-floating {
  position: fixed;
  z-index: 10050;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  background: #2d2d2d;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  font-family: inherit;
  line-height: 1.5;
  text-align: left;
  white-space: pre-line;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.bul-info--inline {
  margin-left: 6px;
  vertical-align: middle;
}
.bul-field {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.bul-field--wide {
  grid-column: 1 / -1;
}
.bul-field--stacked .bul-checkbox-row {
  margin: 8px 0;
}
.bul-field--stacked .bul-check-inline {
  margin: 2px 0 8px;
}
.bul-field__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.bul-field__hint--block {
  margin: 0 0 12px;
}
.bul-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
}

/* Per-page override: 2-column form grid (Task new) */
.task-new-page .bul-form-grid.bul-form-grid--2 {
  grid-template-columns: 1fr 1fr;
}
.task-new-page .bul-form-grid.bul-form-grid--2 .bul-field--wide {
  grid-column: 1 / -1;
}
.bul-form-grid input,
.bul-form-grid select,
.bul-form-grid textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--surface);
  min-height: 40px;
}
.bul-form-grid textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}
.bul-form-grid input:focus,
.bul-form-grid select:focus,
.bul-form-grid textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.task-new-page {
  max-width: none;
  font-size: 15px;
}
.task-new-layout {
  grid-template-columns: 1fr minmax(260px, 300px);
}
.task-new-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}
.task-new-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 8px;
}
.task-new-teams-grid {
  margin-top: 4px;
}
.task-new-tl-pics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.task-new-tl-row[hidden] { display: none !important; }
.tl-pic-cell .inline-select { min-width: 140px; max-width: 200px; }
.task-new-aside .task-new-steps {
  margin: 0;
  padding: 16px 16px 16px 28px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.task-new-aside .task-new-steps li {
  margin-bottom: 8px;
}
.task-new-glossary p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}
.task-new-glossary p:last-child {
  margin-bottom: 0;
}
@media (max-width: 1024px) {
  .task-new-layout {
    grid-template-columns: 1fr;
  }
  .task-new-aside {
    order: -1;
  }
  .bul-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .bul-form-grid {
    grid-template-columns: 1fr;
  }
}

.task-new-page .bul-toggle-btn__face {
  min-width: 5.5rem;
}
.task-new-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
@media (max-width: 600px) {
  .task-new-card { padding: 20px 16px; border-radius: 12px; }
  .task-new-form .form-section-grid { grid-template-columns: 1fr; }
  .task-new-teams .checkbox-group { grid-template-columns: 1fr; }
}

/* =========================================================
   PM Home (Estimate dashboard) — /pm
   Typography đồng bộ với .task-list-page (List task)
   ========================================================= */
.pm-home-page,
.sync-estimate-page {
  font-size: 15px;
}
.pm-home-page .muted,
.sync-estimate-page .muted {
  font-size: 14px;
  line-height: 1.5;
}
.pm-home-page .btn,
.sync-estimate-page .btn {
  font-size: 14px;
  padding: 7px 14px;
}
.pm-home-page .btn.btn-sm,
.sync-estimate-page .btn.btn-sm {
  font-size: 13px;
  padding: 5px 11px;
}
.sync-estimate-hint {
  font-size: 14px;
}

/* =========================================================
   Shared Step1 estimate pages
   ========================================================= */
.estimate-page {
  font-size: 16px;
}
.estimate-page h1 { font-size: 24px; margin-bottom: 6px; }
.estimate-page .muted { font-size: 15px; }
.estimate-page .flash { font-size: 15px; margin-bottom: 16px; }

.estimate-stats,
.pm-home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.pm-home-stats {
  gap: 8px;
  margin-bottom: 14px;
}
.pm-home-stats .task-stat {
  font-size: 14px;
  padding: 8px 14px;
}
.estimate-stats .task-stat {
  font-size: 14px;
  padding: 8px 14px;
}
.estimate-stats .task-stat strong { font-size: 17px; }
.pm-home-stats .task-stat strong { font-size: 14px; }

.estimate-section-head,
.pm-home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.estimate-section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dk);
}
.pm-home-section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dk);
}
.pm-home-section-head .muted { font-size: 14px; }
.estimate-section-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dk);
}

.estimate-empty,
.pm-home-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px;
}
.estimate-empty p { margin: 0; font-size: 15px; }
.pm-home-empty {
  padding: 20px 18px;
  gap: 10px;
}
.pm-home-empty p { margin: 0; font-size: 14px; }

.estimate-table.table-card .data-table { font-size: 15px; }
.pm-home-table.table-card {
  overflow-x: auto;
}
.pm-home-table.table-card .data-table {
  font-size: 14px;
  table-layout: auto;
  width: 100%;
}
.pm-home-table.table-card .data-table th {
  font-size: 12px;
  padding: 8px 12px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pm-home-table.table-card .data-table th.num {
  text-align: right;
}
.estimate-table .data-table th,
.estimate-table .data-table td {
  padding: 10px 14px;
  vertical-align: middle;
}
.pm-home-table .data-table th,
.pm-home-table .data-table td {
  padding: 8px 12px;
  vertical-align: middle;
  width: auto;
}
/* Cột gọn: rộng vừa nội dung */
.pm-home-table .task-id-cell,
.pm-home-table .pm-col-ms,
.pm-home-table .col-num,
.pm-home-table .pm-col-mh,
.pm-home-table .pm-col-mh-nb,
.pm-home-table .pm-col-mh-kh,
.pm-home-table .pm-col-created,
.pm-home-table .col-action {
  width: 1%;
  white-space: nowrap;
}
/* Title + team: giãn theo nội dung, title ellipsis khi thiếu chỗ */
.pm-home-table .task-title-cell {
  width: auto;
  min-width: 8rem;
  max-width: 36rem;
}
.pm-home-table .pm-col-team {
  width: auto;
  min-width: 12rem;
}
.estimate-table .data-table tbody tr:hover {
  background: var(--primary-soft);
}
.pm-home-table .data-table tbody tr:hover {
  background: #f4f7fb;
}
.pm-home-table .data-table tbody tr:focus-within {
  outline: none;
  box-shadow: none;
}
.pm-home-table .data-table tbody tr td:first-child {
  box-shadow: none !important;
}
.estimate-table .task-id-cell code {
  font-size: 14px;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--primary-dk);
  padding: 3px 8px;
  border-radius: 6px;
}
.pm-home-table .task-id-cell .task-ref {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.pm-home-table .task-id-cell .task-ref--link {
  color: var(--primary-dk);
  text-decoration: none;
}
.pm-home-table .task-id-cell .task-ref--link:hover {
  text-decoration: underline;
}
.pm-home-table .task-id-cell .task-ref--link:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-radius: 3px;
}
.pm-home-table .task-title-cell {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-home-table .pm-ms-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary-dk);
  white-space: nowrap;
}
.pm-home-table .pm-col-mh,
.pm-home-table .pm-col-mh-nb,
.pm-home-table .pm-col-mh-kh {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-home-table .pm-col-mh {
  font-weight: 600;
  color: var(--text, #1e293b);
}
.pm-home-table .pm-mh-kh-val {
  font-weight: 700;
  color: var(--primary-dk);
}
.pm-home-table .pm-col-created {
  text-align: right;
  font-size: 10px;
  white-space: nowrap;
  color: var(--muted);
}
.pm-home-table .pm-team-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.pm-home-table .pm-team-chip {
  flex: 0 1 auto;
  max-width: 100%;
  font-weight: 600 !important;
  white-space: nowrap;
  line-height: 1.3;
}
.estimate-table .task-title-cell {
  max-width: 280px;
  font-weight: 500;
}
.estimate-table .col-num,
.pm-home-table .col-num { text-align: center; white-space: nowrap; }
.pm-home-table .col-action .btn {
  padding: 5px 10px;
  font-size: 13px;
}
.estimate-table .screen-count {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dk);
}
.pm-home-table .screen-count {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--primary-dk);
}
.estimate-table .col-action,
.pm-home-table .col-action { text-align: right; white-space: nowrap; }
.estimate-table .submitted-cell { font-size: 14px; white-space: nowrap; }
.pm-home-table .created-at {
  font-size: 13px;
  white-space: nowrap;
}
.estimate-table .team-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.estimate-page .status-chip {
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 600;
}
.pm-home-page .status-chip,
.pm-home-page .pm-team-chip {
  font-size: 12px !important;
  padding: 3px 8px !important;
  border-radius: 6px;
  font-weight: 600;
}
.estimate-page .status-badge { font-size: 12px; padding: 3px 10px; }
.pm-home-page .status-badge { font-size: 12px; padding: 3px 8px; }

/* Member home (/member) — đồng bộ typography với PM home */
.member-home-page.pm-home-page .submitted-cell {
  font-size: 11px;
  white-space: nowrap;
}
.member-home-page.pm-home-page .submitted-cell small {
  font-size: 10px;
}

.estimate-table tr.row-no-setup td:first-child {
  box-shadow: inset 3px 0 0 #d97706;
}
.member-home-page .estimate-table tr.row-draft td:first-child {
  box-shadow: inset 3px 0 0 var(--primary);
}

.task-new-form .full-row-flash { margin-bottom: 16px; }

/* ── Market Place page layout (mp-*) ───────────────────────────────────── */
.mp-page { max-width: 1280px; margin: 0 auto; }
.mp-page-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.mp-section-title {
  margin: 20px 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.mp-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.mp-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mp-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.mp-chip--muted { background: var(--btn-neutral-bg); color: var(--muted); }
.mp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
  overflow: visible;
}
.mp-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.mp-card__body { padding: 16px 20px; }
.mp-card__body--flush { padding: 0; }
.mp-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px 20px;
}
.mp-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.mp-field__value { font-size: 14px; }
.mp-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
.mp-layout__main { min-width: 0; }
.mp-layout__aside { display: flex; flex-direction: column; gap: 16px; }

/* Sticky helper cards on task-new page */
.task-new-aside {
  position: sticky;
  top: calc(var(--bul-topbar-height) + 16px);
}
@media (max-width: 960px) {
  .task-new-aside {
    position: static;
    top: auto;
  }
}
.mp-side-card .mp-card__head {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  background: #fafafa;
  border-bottom: 1px solid var(--border);
}
.mp-side-stack { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.mp-side-desc { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }

.task-view-id {
  font-size: 13px;
  font-weight: 700;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: var(--radius);
  font-family: inherit;
}
.inline-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.inline-edit-form .inline-input,
.mp-field__input {
  width: 100%;
  max-width: 220px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.inline-edit-form .inline-input--wide {
  max-width: 100%;
  min-width: 240px;
}
.inline-edit-form textarea.inline-input.inline-textarea {
  max-width: 100%;
  min-width: 100%;
  min-height: 7rem;
  resize: vertical;
  line-height: 1.45;
  font-family: inherit;
}
.pm-task-view-page .mp-field__multiline {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 14px;
}
.inline-edit-form .inline-select--wide {
  max-width: 320px;
}
.pm-task-view-page .inline-edit-form .select2-container {
  width: 100% !important;
  max-width: 100%;
}
.pm-task-view-page .inline-edit-form .inline-select--wide {
  max-width: 100%;
}
.pm-task-view-page .mp-field--wide {
  grid-column: 1 / -1;
}
.pm-task-view-page .status-badge {
  font-size: 12.1px;
  padding: 2.2px 11px;
  border-radius: 11px;
}
.pm-task-view-page .status-chip {
  font-size: 12.1px;
  padding: 2.2px 8.8px;
  border-radius: 8.8px;
}
.pm-task-view-page .mp-side-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.pm-task-view-page .mp-side-check input { margin-top: 3px; flex-shrink: 0; }
.inline-edit-form .inline-input:focus,
.mp-field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.inline-hint { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }
.inline-action-form { display: inline; margin: 0 4px 0 0; }
.console-row-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* Actions dropdown */
.bul-action-menu { position: relative; }
.bul-action-menu__trigger { display: inline-flex; align-items: center; gap: 6px; }
.bul-action-menu__caret { font-size: 10px; opacity: 0.7; }
.bul-action-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  min-width: 220px;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.bul-action-menu__item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.bul-action-menu__item:hover,
.bul-action-menu__item:focus {
  background: var(--primary-soft);
  color: var(--primary);
  outline: none;
}
.bul-action-menu__item--btn { font: inherit; }
.bul-action-menu__divider {
  display: block;
  height: 1px;
  margin: 6px 0;
  background: var(--border);
}
.bul-action-menu__label {
  display: block;
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

@media (max-width: 960px) {
  .mp-layout { grid-template-columns: 1fr; }
  .mp-layout__aside { order: -1; }
}

/* Inline autosave */
.inline-edit-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.inline-edit-hint {
  display: block;
  font-size: 11px;
  margin-top: 4px;
}
.inline-input.is-saving,
.assign-picker.is-saving + .select2-container,
form.users-row-form.is-saving {
  opacity: 0.65;
  pointer-events: none;
}

/* Setup Functions */
.setup-functions-page .mp-page-header { margin-bottom: 12px; }
.setup-functions-layout {
  grid-template-columns: 1fr minmax(260px, 300px);
}
.setup-functions-form { display: flex; flex-direction: column; gap: 16px; }
.setup-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
}
.setup-row-preview {
  margin-left: auto;
  font-size: 13px;
}
.setup-row-preview strong { color: var(--primary); }
.setup-toolbar-hint { font-size: 12px; font-weight: 500; }
.setup-count-grid {
  grid-template-columns: minmax(140px, 200px) 1fr;
  align-items: start;
}
.setup-count-input {
  max-width: 120px;
  font-size: 16px;
  font-weight: 600;
}
.setup-stats-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}
.setup-stats-list li { margin-bottom: 4px; }
.setup-fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px 18px;
}
.setup-fn-item { margin: 0; }
.setup-task-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
}
.setup-meta-k {
  display: inline-block;
  min-width: 4.5rem;
  font-weight: 600;
  color: var(--text);
}
.task-new-steps .is-done { color: var(--muted); text-decoration: line-through; }
.task-new-steps .is-current { color: var(--primary); font-weight: 600; }
.setup-functions-page .inline-input,
.task-new-form .inline-input {
  padding: 11px 13px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  width: 100%;
}
.setup-functions-page .inline-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
@media (max-width: 960px) {
  .setup-count-grid { grid-template-columns: 1fr; }
  .setup-row-preview { margin-left: 0; display: block; margin-top: 8px; }
}

/* =========================================================
   Estimate Form (worksheet)
   ========================================================= */
.estimate-form-page {
  font-size: 16px;
}
.estimate-form-page .estimate-table thead th,
.estimate-form-page .summary-table thead th,
.estimate-form-page .assign-matrix thead th {
  position: static;
  top: auto;
  z-index: auto;
  background: var(--table-head-bg);
  color: var(--table-head-text);
  border-color: var(--border);
}
.estimate-zone {
  margin-bottom: 20px;
}
.estimate-zone:last-child { margin-bottom: 0; }
.estimate-zone-header { margin-bottom: 16px; }
.estimate-form-page h1 { font-size: 24px; }
.estimate-form-meta { margin: 6px 0 10px; font-size: 15px; }
.estimate-team-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.estimate-form-page .status-chip {
  font-size: 13px;
  padding: 4px 10px;
  font-weight: 600;
}

/* Estimate wizard stepper */
.estimate-stepper {
  margin: 0 0 20px;
  padding: 20px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.estimate-stepper__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap;
  max-width: 960px;
}
.estimate-stepper__item {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  position: relative;
}
.estimate-stepper__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 88px;
  max-width: 140px;
  padding: 0 8px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font: inherit;
  text-align: center;
}
.estimate-stepper__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #9ca3af;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  transition: background 0.15s ease, transform 0.15s ease;
}
.estimate-stepper__item.is-active .estimate-stepper__dot {
  background: var(--primary);
  transform: scale(1.05);
}
.estimate-stepper__item.is-done .estimate-stepper__dot {
  background: var(--primary-dk);
  opacity: 0.85;
}
.estimate-stepper__label {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text);
}
.estimate-stepper__item:not(.is-active):not(.is-done) .estimate-stepper__label {
  color: var(--muted);
  font-weight: 500;
}
.estimate-stepper__line {
  flex: 0 0 48px;
  width: 48px;
  height: 2px;
  margin: 20px 6px 0;
  background: var(--border);
  align-self: flex-start;
}
.estimate-stepper__item.is-done .estimate-stepper__line {
  background: var(--primary);
  opacity: 0.35;
}
.estimate-stepper__hint {
  text-align: center;
  margin: 12px 0 0;
  font-size: 14px;
  min-height: 1.4em;
}

/* Stepper gọn — tiết kiệm chiều cao trên màn estimate */
.estimate-stepper--compact {
  margin: 0 0 12px;
  padding: 10px 10px 6px;
}
.estimate-stepper--compact .estimate-stepper__list {
  justify-content: flex-start;
  gap: 2px 0;
}
.estimate-stepper--compact .estimate-stepper__btn {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: none;
  padding: 4px 8px 4px 4px;
}
.estimate-stepper--compact .estimate-stepper__dot {
  width: 24px;
  height: 24px;
  font-size: 11px;
  flex-shrink: 0;
}
.estimate-stepper--compact .estimate-stepper__label {
  font-size: 11px;
  white-space: nowrap;
}
.estimate-stepper--compact .estimate-stepper__line {
  flex: 0 0 16px;
  width: 16px;
  margin: 11px 2px 0;
}
.estimate-stepper--compact .estimate-stepper__hint {
  margin: 6px 0 0;
  font-size: 12px;
  text-align: left;
}
.estimate-form-page .estimate-form-header {
  margin-bottom: 10px;
}
.estimate-form-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.estimate-form-header__left { min-width: 0; }
.estimate-form-header__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.estimate-form-header__right .btn {
  white-space: nowrap;
}
.estimate-form-page .estimate-form-meta {
  font-size: 13px;
}

/* ─── BE API bar (Design — mở popup) ───────────────────────────────────── */
.be-api-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.be-api-bar__hint {
  font-size: 12px;
}
/* Inline icons — một màu xám (currentColor), không emoji / không icon màu */
.bul-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
  vertical-align: -0.15em;
}
.bul-icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
.btn > .bul-icon,
.btn > .bul-icon:first-child {
  margin-right: 6px;
}
.btn-icon-only {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-icon-only .bul-icon {
  margin-right: 0;
}
.excel-ok .bul-icon {
  color: #64748b;
}
.search-icon.bul-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.notice .bul-icon,
.qdc-section-title .bul-icon,
legend .bul-icon {
  margin-right: 6px;
  vertical-align: middle;
}
.qdc-section-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.coming-soon-chip .bul-icon {
  margin-right: 6px;
}

/* Merged Module/API cell */
.cell-item--merged {
  vertical-align: middle;
  text-align: center;
  background: #f8f9ff;
  font-weight: 500;
  min-width: 100px;
}
.be-item-label {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

/* ─── BE API inline controls ─────────────────────────────────────────────── */
.be-api-add-input {
  flex: 1;
  min-width: 160px;
  max-width: 300px;
  height: 32px;
  padding: 4px 10px;
  font-size: 13px;
}
.be-api-bar__msg {
  font-size: 12px;
  min-height: 1.2em;
}

/* Add API row inside Module/API column */
.be-api-add-row .be-api-add-cell {
  text-align: center;
}
.be-api-add-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.be-api-bar--inline {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  justify-content: center;
}
.be-api-bar--inline .be-api-add-input {
  max-width: 260px;
  height: 30px;
  border-radius: 10px;
}
/* Cell edit controls inside Module/API column */
.be-item-edit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
}
.be-item-edit__input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 3px 8px;
  font-size: 13px;
}
.be-item-edit__btns {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.be-item-edit__btns .btn {
  font-size: 11px;
  padding: 2px 8px;
}

.estimate-wizard-panes {
  min-height: 120px;
}
.estimate-wizard-pane[hidden] {
  display: none !important;
}
.estimate-wizard-pane-head {
  margin-bottom: 16px;
}
.estimate-wizard-pane-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}
.estimate-wizard-pane-head--row .estimate-wizard-pane-title {
  margin-bottom: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.estimate-wizard-pane-title {
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--primary-dk);
}
.estimate-wizard-pane-title--with-tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.estimate-wizard-pane-head:has(.estimate-wizard-pane-title--with-tip) {
  margin-bottom: 12px;
}
.estimate-wizard-toolbar {
  margin-bottom: 16px;
}
.estimate-fn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.estimate-fn-tab {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.estimate-fn-tab.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-dk);
}
.estimate-fn-tab-pane[hidden] {
  display: none !important;
}
.estimate-wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.estimate-wizard-nav__pos {
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.estimate-final-review {
  margin: 18px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.estimate-final-review__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dk);
}
.estimate-final-review__hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.45;
}
.estimate-final-review__team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.estimate-final-review__team:first-of-type {
  border-top: none;
  padding-top: 0;
}
.estimate-final-review__btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.estimate-wizard-pane-actions {
  margin-top: 20px;
}

/* Member team lens — nhập team mình, tham khảo team khác */
.estimate-form--member-lens .estimate-toolbar-member {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.estimate-toolbar-member-hint {
  flex: 1 1 280px;
  font-size: 14px;
  line-height: 1.45;
}
.estimate-step-body--lens {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.estimate-team-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.estimate-team-block--mine {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary-soft);
}
.estimate-team-block__head {
  padding: 14px 16px 10px;
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border);
}
.estimate-team-block__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.estimate-team-block__meta {
  margin: 0;
  font-size: 13px;
}
.estimate-team-block__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 6px;
}
.estimate-team-block__badge--edit {
  background: var(--primary);
  color: #fff;
}
.estimate-team-block__badge--ref {
  background: #e5e7eb;
  color: #4b5563;
}
.estimate-team-block--ref {
  border-style: dashed;
  background: #fafbfc;
}
.estimate-team-block--ref[open] {
  border-style: solid;
  background: var(--surface);
}
.estimate-team-block__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  user-select: none;
}
.estimate-team-block__summary::-webkit-details-marker { display: none; }
.estimate-team-block__summary::after {
  content: "▾";
  margin-left: auto;
  opacity: 0.5;
  font-size: 12px;
}
.estimate-team-block--ref[open] .estimate-team-block__summary::after {
  transform: rotate(180deg);
}
.estimate-team-block__body {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}
.estimate-team-block--mine .estimate-team-block__body,
.estimate-team-block--mine .table-scroll {
  padding: 12px;
}
.estimate-table--ref {
  font-size: 14px;
}
.estimate-form-page .estimate-table--ref thead th {
  font-size: 12px;
  padding: 8px 10px;
}
.estimate-table--ref td {
  padding: 8px 10px;
  vertical-align: top;
}
.estimate-form-page tr.row-estimate-ref td {
  background: #f8fafc;
  color: var(--text);
}
.estimate-form-page tr.row-estimate-ref .cell-mh-customer {
  background: #f1f5f9;
  color: var(--text);
  font-weight: 600;
}
.estimate-form-page tr.row-estimate-ref .mh-readonly {
  color: var(--primary-dk);
}
.estimate-form-page .cell-note--compact {
  max-width: 280px;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.estimate-zone-summary { margin-bottom: 20px; }
.estimate-zone-toolbar { margin-bottom: 16px; }
.estimate-zone-body { margin-bottom: 20px; }
.estimate-zone-actions { margin-top: 24px; margin-bottom: 0; }

/* Panel zone (summary + function blocks) — scrolls with page, not sticky */
.estimate-zone-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: 12px;
}
.estimate-zone-panel > summary,
.estimate-zone-panel-title {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--primary-soft);
  color: var(--primary-dk);
  font-weight: 600;
  font-size: 16px;
  user-select: none;
}
.estimate-zone-panel > summary::-webkit-details-marker { display: none; }
.estimate-zone-panel > summary::after {
  content: "▾";
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.15s ease;
}
.estimate-zone-panel[open] > summary::after { transform: rotate(180deg); }
.estimate-zone-panel-body { padding: 12px 14px 16px; }
.estimate-form-page .estimate-summary-table thead th {
  position: static;
  top: auto;
}
.estimate-summary-table {
  width: 100%;
  min-width: 520px;
  font-size: 15px;
  border: none;
  border-radius: 0;
}
.estimate-summary-table th,
.estimate-summary-table td {
  padding: 10px 14px;
}
.estimate-summary-table .summary-buffer-cell {
  padding: 4px 6px;
  vertical-align: middle;
}
.estimate-summary-table .summary-buffer-input {
  width: 4.5rem;
  max-width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.estimate-summary-table .summary-mh-report {
  color: var(--primary-dk);
  font-weight: 700;
}
.estimate-summary-table .summary-mh-report--grand {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 18%, #fff);
  color: var(--primary-dk);
  font-size: 1.05em;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.estimate-summary-table tr.grand-row td:has(.summary-mh-report--grand) {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface, #fff));
}

.pm-task-mh-summary { margin-bottom: 16px; }
.pm-mh-summary-note {
  margin: 0;
  padding: 10px 14px 0;
  font-size: 13px;
  line-height: 1.45;
}
.pm-mh-report-label,
.pm-mh-report-value {
  color: var(--primary-dk);
}
.pm-mh-summary-table .pm-mh-report-col,
.pm-mh-summary-table .pm-mh-report-value {
  font-weight: 700;
}
.pm-mh-summary-grand td {
  border-top: 2px solid var(--border, #e2e8f0);
}
.pm-mh-report-value--grand {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--primary) 18%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
  font-size: 1.08em;
}
.pm-mh-summary-grand td:has(.pm-mh-report-value--grand) {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface, #fff));
}

.estimate-summary-table .grand-row td {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 15px;
}

.estimate-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
}
.estimate-toolbar-member {
  background: var(--primary-soft);
  border-color: #93c5fd;
}
.estimate-toolbar-label {
  font-weight: 700;
  color: var(--primary-dk);
}
.estimate-filter-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.estimate-filter-label--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-shrink: 0;
}
.estimate-toolbar--compact {
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.estimate-toolbar--reviewer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.estimate-team-filter {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 140px;
  background: #fff;
}

.estimate-functions { display: flex; flex-direction: column; gap: 12px; }
.estimate-fn-panel.estimate-zone-panel { margin-bottom: 12px; }
.estimate-fn-panel > summary.estimate-fn-summary {
  flex-wrap: wrap;
}
.estimate-fn-meta { font-size: 13px; font-weight: 500; }
.estimate-fn-body { padding: 16px 18px 20px; }
.estimate-fn-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Step panels (Design / Implement / Test) — collapsible inside màn hình */
.estimate-step-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.estimate-step-panel > summary.estimate-step-heading {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary-dk);
  border-left: 4px solid transparent;
}
.estimate-step-panel > summary.estimate-step-heading::-webkit-details-marker {
  display: none;
}
.estimate-step-panel > summary.estimate-step-heading::after {
  content: "▾";
  font-size: 16px;
  font-weight: 600;
  opacity: 0.9;
  transition: transform 0.15s ease;
}
.estimate-step-panel[open] > summary.estimate-step-heading::after {
  transform: rotate(180deg);
}
.estimate-step-title { flex: 1; }
.estimate-step-meta {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
}
.estimate-step-body {
  padding: 0;
  background: #fff;
  border-top: 1px solid var(--border);
}
/* Phase headers — soft tints aligned with app navy / info / success / warn tokens */
.estimate-step--design > summary.estimate-step-heading {
  background: linear-gradient(135deg, #f0f5fb 0%, var(--primary-soft) 100%);
  border-left-color: var(--primary);
  color: var(--primary-dk);
}
.estimate-step--implement > summary.estimate-step-heading {
  background: linear-gradient(135deg, #f2f8f5 0%, #e4f0ea 100%);
  border-left-color: #3d7a6b;
  color: #1e4d42;
}
.estimate-step--test > summary.estimate-step-heading {
  background: linear-gradient(135deg, #faf6f0 0%, var(--warn-soft) 100%);
  border-left-color: #a67c52;
  color: #5c4a32;
}
.estimate-step--estimate > summary.estimate-step-heading {
  background: linear-gradient(135deg, var(--primary-soft) 0%, #d4e2ef 100%);
  border-left-color: var(--primary-dk);
  color: var(--primary-dk);
}
.estimate-step--design > summary.estimate-step-heading::after,
.estimate-step--implement > summary.estimate-step-heading::after,
.estimate-step--test > summary.estimate-step-heading::after,
.estimate-step--estimate > summary.estimate-step-heading::after {
  color: inherit;
  opacity: 0.55;
}

.estimate-fn-panel > summary .estimate-fn-title {
  font-size: 17px;
}
.estimate-fn-panel:not([open]) > summary .estimate-fn-meta {
  opacity: 0.85;
}

.estimate-form-page .estimate-table.func-table {
  min-width: 880px;
  font-size: 15px;
}
.estimate-form-page .estimate-table.func-table th {
  font-size: 13px;
  padding: 6px 8px;
}
.estimate-form-page .estimate-table.func-table td {
  padding: 5px 8px;
  vertical-align: middle;
  line-height: 1.3;
}
.estimate-form-page .cell-team-merged {
  vertical-align: middle;
  text-align: center;
  background: #f8fafc;
  border-right: 1px solid var(--border);
  padding: 10px 8px !important;
  min-width: 88px;
}
.team-meta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  max-width: 120px;
}
.team-meta-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
}
.team-meta-card__head .team-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  line-height: 1.2;
}
.team-meta-card__head .status-chip {
  font-size: 10px;
  padding: 1px 7px;
  line-height: 1.3;
}
.team-meta-card__pic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  padding: 5px 6px 4px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--border);
}
.team-meta-card__pic--empty {
  background: #f9fafb;
  border-style: dashed;
}
.team-meta-card__pic-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.team-meta-card__pic-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-dk);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}
.team-meta-card__pic-name--muted {
  font-weight: 500;
  font-style: normal;
  color: var(--muted);
}
.estimate-team-block__meta-sep {
  margin: 0 2px;
  opacity: 0.55;
}
.estimate-form-page .cell-team-merged .team-badge {
  font-size: 12px;
  padding: 2px 8px;
}
/* Cột Task — text + ? căn giữa dọc, không box kiểu input */
.estimate-form-page .estimate-table.func-table td.cell-task {
  vertical-align: middle;
  padding: 8px 10px;
  min-width: 140px;
  width: 16%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  background: transparent;
}
.estimate-form-page .estimate-table.func-table th.cell-task-head {
  min-width: 140px;
}
.estimate-form-page .cell-task__content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.estimate-form-page .cell-task__label {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: inherit;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}
.estimate-form-page .cell-task .estimate-task-help.bul-info {
  flex-shrink: 0;
  margin: 0;
  vertical-align: middle;
}
.estimate-form-page tr.row-estimate-readonly .cell-task__label {
  color: var(--muted);
  font-weight: 500;
}
.estimate-form-page .cell-item {
  font-size: 14px;
  color: var(--muted);
  max-width: 140px;
}
.estimate-form-page .estimate-table input.input-mh {
  padding: 4px 6px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  width: 80px;
  min-height: 0;
  text-align: right;
}
.estimate-form-page .estimate-table textarea.input-note,
.estimate-form-page .estimate-table textarea.input-risk {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.4;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  resize: vertical;
  field-sizing: content;
}
.estimate-form-page .estimate-table textarea.input-note {
  min-width: 220px;
  min-height: 56px;
}
.estimate-form-page .estimate-table textarea.input-risk {
  min-width: 180px;
  min-height: 44px;
}
.estimate-form-page .cell-note {
  min-width: 240px;
  width: 28%;
  vertical-align: top;
}
.estimate-form-page .cell-risk {
  min-width: 200px;
  width: 24%;
  vertical-align: top;
}
.estimate-form-page .estimate-table input:focus,
.estimate-form-page .estimate-table textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.estimate-form-page .mh-readonly {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.estimate-form-page tr.row-estimate-readonly td {
  background: #f3f4f6;
  color: var(--muted);
}
.estimate-form-page tr.row-estimate-readonly .cell-mh-customer {
  background: #e5e7eb;
  color: var(--muted);
}
.estimate-form-page tr.row-team-status-feedback td {
  background: #fffbf5;
}
.estimate-form-page tr.row-team-status-submitted td {
  background: #fffbeb;
}
.estimate-form-page tr.row-team-status-submitted.row-estimate-review td,
.estimate-form-page tr.row-team-status-submitted.row-estimate-editable td {
  background: #fef9e7;
  border-top-color: #fde68a;
}
.estimate-form-page tr.row-team-status-submitted .cell-mh-customer {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}
.estimate-form-page tr.row-team-status-approved td,
.estimate-form-page tr.row-team-status-exported td {
  background: #f0fdf4;
  color: #166534;
}
.estimate-form-page tr.row-team-status-approved .cell-mh-customer,
.estimate-form-page tr.row-team-status-exported .cell-mh-customer {
  background: #dcfce7;
}
.estimate-form-page tr.row-estimate-review {
  box-shadow: inset 3px 0 0 #d97706;
}
.estimate-form-page tr.row-estimate-editable td {
  background: #fff;
}
.estimate-form-page tr.row-estimate-mine {
  box-shadow: inset 3px 0 0 var(--primary);
}
.estimate-form-page tr.row-estimate-editable:hover td,
.estimate-form-page tr.row-estimate-review:hover td {
  background: #f8fbff;
}
.estimate-actions-group--review {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 4px;
  width: 100%;
}
.estimate-actions-hint-inline {
  font-size: 13px;
  flex: 1 1 200px;
}
.estimate-actions-group--review .btn-approve-team {
  margin: 2px 4px 2px 0;
}
.btn-approve-team.team-be {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}
.btn-approve-team.team-fe {
  background: #059669;
  border-color: #047857;
  color: #fff;
}
.btn-approve-team.team-sqa {
  background: #d97706;
  border-color: #b45309;
  color: #fff;
}
.btn-approve-team.team-be:hover:not(:disabled) { background: #1d4ed8; }
.btn-approve-team.team-fe:hover:not(:disabled) { background: #047857; }
.btn-approve-team.team-sqa:hover:not(:disabled) { background: #b45309; }
.team-meta-card__actions .btn-approve-team {
  font-size: 11px;
  padding: 2px 8px;
  line-height: 1.4;
}

.estimate-zone-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.estimate-actions-hint {
  margin-left: auto;
  font-size: 14px;
}

@media (max-width: 720px) {
  .estimate-actions-hint { margin-left: 0; width: 100%; }
  .estimate-fn-panel > summary { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Users admin (ManageUsers)
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.users-admin-page .card-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
}

.users-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.users-page-header h1 { margin: 0 0 6px; font-size: 24px; }
.users-page-lead { margin: 0; max-width: 52rem; }

.users-filter-grid {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) repeat(4, minmax(130px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.users-filter-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.users-input,
.users-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.users-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}
.users-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.users-result-count { margin-left: auto; font-size: 13px; }

.users-table-card { padding: 0; overflow: hidden; }
.users-table-card .table-scroll { overflow-x: auto; }
.users-table .col-user { min-width: 220px; }
.users-table .col-role { min-width: 320px; }
.users-table .col-jira { min-width: 140px; }
.users-table .col-status { width: 120px; }
.users-table .col-actions { min-width: 220px; width: 220px; }
.users-row--disabled { opacity: 0.72; background: #f8fafc; }
.users-row--disabled .user-cell-name strong { text-decoration: line-through; text-decoration-color: #cbd5e1; }
.users-pm-only-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 4px;
  background: #e0e7ff;
  color: #3730a3;
  vertical-align: middle;
}
.users-act-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.users-act-form { margin: 0; display: inline; }
.users-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.users-act-btn--reset {
  background: #fff;
  border-color: #cbd5e1;
  color: #475569;
}
.users-act-btn--reset:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}
.users-act-btn--disable {
  background: #fffbeb;
  border-color: #fcd34d;
  color: #92400e;
}
.users-act-btn--disable:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}
.users-act-btn--enable {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}
.users-act-btn--enable:hover {
  background: #d1fae5;
  border-color: #10b981;
  color: #065f46;
}
.users-act-btn--remove {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}
.users-act-btn--remove:hover {
  background: #fef2f2;
  border-color: #f87171;
  color: #991b1b;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}
.users-act-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.user-cell-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.user-cell-email { font-size: 13px; word-break: break-all; }

.users-inline-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
}
.users-inline-role.role-pm { background: var(--primary-soft); color: var(--primary-dk); }
.users-inline-role.role-member { background: #e2e8f0; color: #334155; }
.users-inline-role.role-brse,
.users-inline-role.role-tl { background: var(--info-soft); color: var(--info); }
.users-inline-role.role-comtor { background: var(--warn-soft); color: var(--warn); }
.users-inline-team { background: #f1f5f9; color: #475569; }

.users-row-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.users-row-select-wrap { margin: 0; flex: 0 0 auto; }
.users-save-btn { flex-shrink: 0; white-space: nowrap; }
.users-reset-btn { color: var(--danger) !important; border-color: var(--danger-soft) !important; }
.users-reset-btn:hover { background: var(--danger-soft) !important; }

.jira-cell { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.jira-cell-id { font-size: 11px; word-break: break-all; }

.users-empty-cell {
  text-align: center;
  padding: 40px 16px !important;
}
.users-empty-cell p { margin: 0 0 12px; }

.users-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.users-pagination-summary { margin: 0; font-size: 13px; }

.backlog-pager {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
  font-size: 0.82rem;
}

.pagination-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.pagination-btn:hover:not(.is-disabled):not(.is-active) {
  background: var(--primary-soft);
  border-color: var(--primary);
  text-decoration: none;
}
.pagination-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  cursor: default;
}
.pagination-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination-ellipsis {
  padding: 0 6px;
  color: var(--muted);
}

.users-register-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.users-register-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.users-register-url {
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  padding: 8px 12px;
  background: var(--code-bg);
  border-radius: 8px;
  word-break: break-all;
}

/* =========================================================
   Select2 — global (all dropdowns)
   ========================================================= */
.select2-container {
  font-size: 14px;
  max-width: 100%;
  z-index: 1;
}
.select2-container--open { z-index: 9999; }

.select2-container--default .select2-selection--single {
  min-height: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  line-height: 22px;
  padding: 8px 36px 8px 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bul-select2-selection-text {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.select2-dropdown {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  z-index: 10000;
  min-width: 12rem;
  max-width: min(520px, 92vw);
}
.select2-search--dropdown .select2-search__field {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
}
.select2-results__options {
  max-height: min(360px, 55vh);
}
.select2-results__option {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 10px 14px !important;
  line-height: 1.45 !important;
}
.bul-select2-option-text {
  display: block;
  white-space: normal;
  word-break: break-word;
}
.select2-results__group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--primary);
  color: #fff;
}
.select2-container--default .select2-results__option--selected {
  background: var(--primary-soft);
  color: var(--primary-dk);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  margin-right: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.assign-matrix-cell .select2-container { width: 100% !important; max-width: 100%; }
.assign-matrix--compact .select2-container--default .select2-selection--single {
  min-height: 34px;
  height: 34px;
}
.assign-matrix--compact .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 6px 28px 6px 8px;
  line-height: 20px;
  font-size: 13px;
}
.assign-matrix--compact .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 32px;
}
@media (max-width: 720px) {
  .assign-matrix-wrap--fit {
    overflow-x: auto;
  }
  .assign-matrix--compact {
    min-width: 480px;
  }
}
.users-row-select-wrap .select2-container { min-width: 110px; }

@media (max-width: 960px) {
  .users-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .users-filter-search { grid-column: 1 / -1; }
  .users-result-count { margin-left: 0; width: 100%; }
}

@media (max-width: 600px) {
  .users-filter-grid { grid-template-columns: 1fr; }
  .users-row-selects { flex-direction: column; align-items: stretch; }
  .users-row-select-wrap .select2-container { width: 100% !important; }
}
/* Banner tiến trình đồng bộ / job nền (bul-jobs.js) */
.bul-sync-jobs-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--bul-topbar-height, 0px);
  z-index: 10038;
  padding: 12px 20px 14px;
  background: linear-gradient(180deg, var(--primary-soft) 0%, #fff 72%);
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 8px 28px rgba(93, 58, 142, 0.12);
  transition: opacity 0.15s ease;
}
.bul-sync-jobs-banner[hidden] {
  display: none !important;
}
.bul-sync-jobs-banner__inner {
  max-width: 960px;
  margin: 0 auto;
}
.bul-sync-jobs-banner__title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dk);
  letter-spacing: 0.02em;
}
.bul-sync-jobs-banner__list {
  margin: 0;
  padding: 0 0 0 4px;
  list-style: none;
}
.bul-sync-jobs-banner__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  margin-top: 6px;
}
.bul-sync-jobs-banner__item:first-child { margin-top: 0; }
.bul-sync-jobs-banner__text { flex: 1; min-width: 0; }
.bul-sync-jobs-banner__spinner {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: bul-sync-spin 0.7s linear infinite;
}
@keyframes bul-sync-spin {
  to { transform: rotate(360deg); }
}
.bul-sync-jobs-banner__foot {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

/* Full-screen loading (New task, …) */
.page-loading {
  position: fixed;
  inset: 0;
  z-index: 10055;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(33, 33, 33, 0.42);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.page-loading[hidden] {
  display: none !important;
}
body.bul-page-loading-active {
  overflow: hidden;
}
.page-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 360px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
  text-align: center;
}
.page-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: bul-sync-spin 0.75s linear infinite;
}
.page-loading-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-loading-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-dk);
}
.page-loading-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.page-loading-dots {
  display: inline-flex;
  gap: 6px;
}
.page-loading-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.35;
  animation: page-loading-dot 1.1s ease-in-out infinite;
}
.page-loading-dots i:nth-child(2) { animation-delay: 0.15s; }
.page-loading-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes page-loading-dot {
  0%, 80%, 100% { opacity: 0.35; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.15); }
}

/* Toast chung — cố định viewport, dưới topbar + banner đồng bộ */
.bul-toast-stack {
  position: fixed;
  top: var(--bul-toast-top, calc(var(--bul-topbar-height, 0px) + 12px));
  right: 16px;
  z-index: 10040;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.bul-toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  animation: bul-toast-in 0.22s ease-out;
}
.bul-toast--out {
  animation: bul-toast-out 0.2s ease-in forwards;
}
@keyframes bul-toast-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bul-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(12px); }
}
.bul-toast__row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: start;
  gap: 10px;
  padding: 12px 12px 8px;
}
.bul-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  line-height: 1;
  flex-shrink: 0;
}
.bul-toast--success .bul-toast__icon,
.bul-toast--error .bul-toast__icon,
.bul-toast--warning .bul-toast__icon,
.bul-toast--info .bul-toast__icon {
  background: #f1f5f9;
  color: #64748b;
}
.bul-toast__icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.bul-toast__text {
  flex: 1;
  min-width: 0;
}
.bul-toast__title {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0.92;
}
.bul-toast__message {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
  white-space: pre-line;
}
.bul-toast__message a {
  color: var(--primary-dk);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.bul-toast__message a:hover {
  color: var(--primary);
}
.bul-toast--paused .bul-toast__countdown {
  opacity: 0.55;
}
.bul-toast--paused .bul-toast__countdown::after {
  content: ' ⏸';
  font-size: 10px;
}
.bul-toast__countdown {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 2.2em;
  text-align: right;
  padding-top: 1px;
}
.bul-toast__close {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  border-radius: 4px;
}
.bul-toast__close:hover {
  color: var(--text);
  background: var(--bg);
}
.bul-toast__progress {
  height: 3px;
  background: var(--border);
}
.bul-toast__progress-bar {
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation: bul-toast-progress linear forwards;
}
.bul-toast--success .bul-toast__progress-bar { background: #22c55e; }
.bul-toast--error .bul-toast__progress-bar { background: #ef4444; }
.bul-toast--warning .bul-toast__progress-bar { background: #f59e0b; }
.bul-toast--info .bul-toast__progress-bar { background: var(--primary); }
@keyframes bul-toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
/* Notice inbox (per user) */
.bul-notice-wrap {
  position: relative;
}
.bul-notice-btn.btn-ghost {
  border: none;
  background: transparent;
}
.bul-notice-btn.btn-ghost:hover:not(:disabled),
.bul-notice-btn.btn-ghost:focus:not(:disabled) {
  border: none;
  background: var(--btn-neutral-bg);
  color: var(--text);
}
.bul-notice-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
}
.bul-notice-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--text);
}
.bul-notice-btn:hover .bul-notice-icon,
.bul-notice-btn:focus .bul-notice-icon {
  color: var(--primary);
}
.bul-notice-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.bul-notice-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10045;
  width: min(380px, calc(100vw - 24px));
  max-height: min(420px, 70vh);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
.bul-notice-panel[hidden] { display: none !important; }
.bul-notice-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.bul-notice-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  flex: 1;
}
.bul-notice-empty {
  padding: 16px 14px;
  font-size: 13px;
}
.bul-notice-item {
  position: relative;
  padding: 10px 36px 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.bul-notice-item:last-child { border-bottom: none; }
.bul-notice-item:hover { background: var(--bg); }
.bul-notice-item:focus {
  outline: none;
  background: var(--primary-soft);
}
.bul-notice-item.is-unread {
  background: var(--primary-soft);
}
.bul-notice-item__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dk);
  margin-bottom: 4px;
  line-height: 1.35;
  word-break: break-word;
}
.bul-notice-item[data-link] {
  cursor: pointer;
}
.bul-notice-item__go {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--primary);
  font-weight: 700;
}
.bul-notice-item__body {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  word-break: break-word;
  white-space: pre-line;
}
.bul-notice-item__body a {
  color: var(--primary-dk);
  font-weight: 500;
  text-decoration: underline;
  pointer-events: auto;
}
.bul-notice-item__time {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.bul-notice-item--success .bul-notice-item__body { border-left: 3px solid #22c55e; padding-left: 8px; }
.bul-notice-item--error .bul-notice-item__body { border-left: 3px solid #ef4444; padding-left: 8px; }
.bul-notice-item--warning .bul-notice-item__body { border-left: 3px solid #f59e0b; padding-left: 8px; }

/* Confirm dialog (thay browser confirm) */
.bul-dialog {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.bul-dialog[hidden] { display: none !important; }
.bul-dialog__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(6px);
}
.bul-dialog__panel {
  position: relative; z-index: 1;
  width: min(420px, 100%);
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.25),
    0 10px 30px rgba(15, 23, 42, 0.12);
}
.bul-dialog__title {
  margin: 0 0 10px; font-size: 1.05rem; font-weight: 600;
  color: var(--text);
}
.bul-dialog__message {
  margin: 0 0 18px; font-size: 14px; line-height: 1.5;
  color: var(--text); white-space: pre-wrap;
}
.bul-dialog__actions {
  display: flex; justify-content: flex-end; gap: 10px;
}

/* Universal Modal System */
.bul-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #f1f5f9;
}
.bul-modal__header-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.bul-modal__header-title-wrap {
  min-width: 0;
}
.bul-modal__subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.bul-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.bul-modal__close:hover {
  background: #f8fafc;
  color: #475569;
}
.bul-modal__backlink {
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--primary, #3e52d5);
  font-weight: 600;
  cursor: pointer;
}
.bul-modal__backlink:hover { text-decoration: underline; }
.bul-modal__body {
  padding: 18px 22px;
}
.bul-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  background: rgba(248, 250, 252, 0.6);
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 24px 24px;
}

/* Feedback thread — panel lớn (Estimate + Review Dashboard) */
.bul-dialog__panel--feedback {
  width: min(960px, 94vw);
  max-width: 960px;
  max-height: 92vh;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.feedback-panel {
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.feedback-thread-hint {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.feedback-thread-list {
  flex: 1;
  min-height: 360px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  padding: 12px 10px;
  margin: 0 0 14px;
  background: #f4f5f8;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.feedback-bubble {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 6px;
  max-width: 92%;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.feedback-bubble--mine {
  background: #e7f3ff;
  margin-left: auto;
  border-color: #b8d4f0;
}
.feedback-bubble__meta {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 6px;
}
.feedback-bubble__author {
  font-weight: 600;
  color: #0f172a;
}
.feedback-bubble__body {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 14px;
  line-height: 1.55;
}
.feedback-thread-compose {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.feedback-thread-form__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #64748b);
  margin-bottom: 6px;
}
.feedback-thread-form textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid #cfd3da;
  border-radius: 8px;
  box-sizing: border-box;
}
.feedback-thread-readonly {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  font-size: 13px;
}
.feedback-thread-form__actions {
  margin-top: 12px;
}
.team-feedback-count[data-count]::before {
  content: " (" attr(data-count) ")";
  font-weight: 600;
}

/* Cell-level feedback (MH / Note / Risk) */
.cell-feedback-cell {
  position: relative;
  vertical-align: top;
}
.cell-feedback-cell__body {
  display: block;
  padding-right: 28px;
  min-width: 0;
}
.cell-feedback-cell.cell-has-feedback {
  background: #fef9c3 !important;
  box-shadow: inset 0 0 0 1px #facc15;
}
.cell-feedback-trigger {
  position: absolute;
  top: 6px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  z-index: 2;
}
.cell-feedback-trigger:hover {
  background: #e2e8f0;
  color: var(--primary, #3e52d5);
}
.cell-feedback-trigger--active,
.cell-feedback-trigger:has(.cell-feedback-count:not([hidden])) {
  color: var(--primary, #3e52d5);
}
.cell-feedback-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
  background: #f59e0b;
  border-radius: 8px;
}
.feedback-thread-subtitle {
  margin: -4px 0 8px;
  font-size: 13px;
}
.feedback-cell-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.feedback-cell-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
  max-height: min(62vh, 560px);
}
.feedback-new-issue-btn {
  width: 100%;
  flex-shrink: 0;
}
.feedback-issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
}
.feedback-issue-item {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
}
.feedback-issue-item:last-child {
  border-bottom: none;
}
.feedback-issue-item:hover,
.feedback-issue-item.is-active {
  background: #e7f3ff;
}
.feedback-issue-item__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  margin-bottom: 4px;
}
.feedback-issue-item__meta {
  font-size: 11px;
}
.feedback-issue-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.feedback-issue-status--open {
  background: #fef3c7;
  color: #b45309;
}
.feedback-issue-status--resolved {
  background: #dcfce7;
  color: #15803d;
}
.feedback-issue-empty {
  padding: 16px 12px;
  font-size: 13px;
}
.feedback-cell-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.feedback-new-issue-panel {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.feedback-new-issue-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 720px) {
  .feedback-cell-layout {
    grid-template-columns: 1fr;
  }
  .feedback-cell-sidebar {
    max-height: 200px;
  }
}

/* =========================================================
   Review Dashboard
   ========================================================= */
.review-page {
  font-size: 1.1em;
}
.review-page .page-hero__title,
.review-page .page-header h1 {
  font-size: calc(1.5em * 1.1);
}
.review-page .muted {
  font-size: 1em;
}
.review-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.review-stat {
  padding: 5px 13px;
  background: #e8eef6;
  border-radius: 8px;
  font-size: 1em;
}
.review-bulk-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 9px 13px;
  background: #f3f4f6;
  border-radius: 8px;
}
.review-bulk-actions label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.review-bulk-actions__buttons {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.review-page .btn-warning {
  background: #ffc107;
  color: #212529;
  border: 1px solid #e6a800;
}
.review-page .btn-warning:hover {
  background: #e6a800;
}
.review-page .btn-warning:disabled {
  background: #fce8a3;
  color: #8a6d3b;
  cursor: not-allowed;
}
.review-page .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.review-page .review-table th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  border-color: var(--border);
  font-weight: 600;
}
.review-page .review-table td {
  vertical-align: middle;
}
.review-page .status-chip {
  font-size: 12.1px;
  padding: 4px 11px;
  border-radius: 8.8px;
  font-weight: 600;
}
.review-page .team-badge {
  font-size: 12.1px;
  padding: 4px 11px;
  border-radius: 8.8px;
  font-weight: 700;
}
.review-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.review-page .row-has-outlier {
  background: #fff8e1;
}
.review-page .row-has-outlier:hover {
  background: #fff3cd;
}
.review-page .text-warning {
  color: #856404;
  font-weight: 600;
}
.review-page .btn-xs {
  padding: 3px 9px;
  font-size: 12.1px;
  line-height: 1.5;
}
.review-page .badge-warning {
  background: #fff3cd;
  color: #856404;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 700;
}
.review-page .status-chip.status-warning {
  background: #ffc107;
  color: #212529;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
}

.review-task-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.review-team-section {
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--border, #e2e5eb);
  border-radius: 10px;
  background: #fff;
}
.review-team-section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.review-team-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.review-team-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.review-team-members-panel {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #f8f9fb;
  border-radius: 8px;
  font-size: 13px;
}
.review-member-row {
  padding: 4px 0;
  border-bottom: 1px dashed #e8eaef;
}
.review-member-row:last-child {
  border-bottom: none;
}
.review-task-outliers-summary .review-outlier-chip {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 8px;
  background: #fff3cd;
  border-radius: 6px;
  font-size: 12px;
}
.review-cell-note {
  max-width: 200px;
  font-size: 12px;
}
.review-page .inline-action-form {
  display: inline;
}

/* Submit history dialog */
.bul-dialog__panel--submit-history {
  width: min(920px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.submit-history-dialog__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.submit-history-dialog__subtitle {
  margin: 0;
  font-size: 13px;
}
.submit-history-dialog__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.submit-history-list__meta {
  margin: 0 0 10px;
}
.submit-history-detail__scroll {
  max-height: min(58vh, 520px);
}
.submit-history-detail__meta {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
}
.submit-history-detail__changed {
  color: #d97706;
  font-weight: 600;
}
.submit-history-detail__fn-row {
  background: #f5f5f5;
}
.submit-history-detail__row-changed {
  background: #fff8e1;
}
.submit-history-detail__delta {
  font-weight: 600;
}
body.bul-dialog-open {
  overflow: hidden;
}

/* ── Onboarding overlay (guided tour) ───────────────────────────────────── */
.bul-onboard {
  position: fixed;
  inset: 0;
  z-index: 10080;
  pointer-events: none;
}
.bul-onboard[hidden] { display: none !important; }
.bul-onboard__shade {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  pointer-events: auto;
}
.bul-onboard__highlight {
  position: absolute;
  border-radius: 16px;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 9999px rgba(15, 23, 42, 0);
  pointer-events: none;
}
.bul-onboard__card {
  position: absolute;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(15, 23, 42, 0.25),
    0 10px 30px rgba(15, 23, 42, 0.12);
  pointer-events: auto;
}
.bul-onboard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid #f1f5f9;
}
.bul-onboard__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.bul-onboard__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.bul-onboard__close:hover { background: #f8fafc; color: #475569; }
.bul-onboard__body {
  padding: 14px 18px 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.bul-onboard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(248, 250, 252, 0.6);
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 24px 24px;
}
.bul-onboard__step {
  font-size: 12px;
  color: #64748b;
}
.bul-onboard__actions {
  display: flex;
  gap: 8px;
}
.bul-onboard__skip {
  background: transparent;
  border: none;
  color: #3e52d5;
  font-weight: 600;
  cursor: pointer;
}
.bul-onboard__skip:hover { text-decoration: underline; }

/* ── Review Dashboard (table + filters) ─────────────────────────────────── */
.review-filters-toolbar__status,
.review-filters-toolbar__team {
  flex: 0 1 200px;
  min-width: 160px;
}
.review-filters-toolbar__member {
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 400px;
}
.review-filters-toolbar__page-size {
  flex: 0 1 120px;
  min-width: 100px;
}
.review-filters-toolbar__reset {
  align-self: flex-end;
  margin-bottom: 2px;
}
.knowhow-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

/* Training skill master */
.training-admin-card,
.training-skill-group,
.training-skill-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.training-admin-card {
  padding: 14px 16px;
  margin-bottom: 16px;
}
.training-admin-card summary,
.training-skill-edit summary {
  cursor: pointer;
  color: var(--primary-dk);
  font-weight: 700;
}
.training-skill-matrix {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.training-skill-group {
  padding: 16px;
}
.training-skill-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.training-skill-group__header h2,
.training-skill-category h3,
.training-skill-section h4 {
  margin: 0;
}
.training-skill-group__header span,
.training-skill-section h4 {
  color: var(--muted);
  font-size: 13px;
}
.training-skill-category {
  margin-top: 16px;
}
.training-skill-category h3 {
  color: var(--primary-dk);
  font-size: 15px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.training-skill-section {
  margin-top: 12px;
}
.training-skill-section h4 {
  margin-bottom: 8px;
}
.training-skill-card {
  padding: 14px;
  margin: 10px 0;
}
.training-skill-card__top,
.training-skill-title,
.training-rating-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.training-skill-card__top {
  justify-content: space-between;
  margin-bottom: 10px;
}
.training-skill-code,
.training-priority,
.training-rating-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.training-skill-code {
  padding: 2px 8px;
  color: #fff;
  background: var(--primary);
}
.training-priority {
  padding: 2px 7px;
  color: var(--warn);
  background: var(--warn-soft);
}
.training-level-grid,
.training-level-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.training-level-grid > div {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
}
.training-level-grid strong {
  color: var(--primary-dk);
  font-size: 12px;
}
.training-level-grid p {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 13px;
}
.training-rating-list {
  margin-top: 10px;
}
.review-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f5f7fa;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 10px;
}
.training-rating-chip {
  padding: 3px 9px;
  color: var(--primary-dk);
  background: var(--primary-soft);
}
.training-skill-edit {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.review-bulk-bar__select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
}
.training-skill-form {
  margin-top: 12px;
}
.review-bulk-bar__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.training-skill-form__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.training-skill-form label,
.training-level-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.review-table-members {
  max-width: 200px;
}
.review-table-members .review-member-chip {
  display: inline-block;
  font-size: 0.78em;
  padding: 2px 7px;
  margin: 1px 2px 1px 0;
  border-radius: 10px;
  background: #eceff1;
  color: #37474f;
  text-decoration: none;
  white-space: nowrap;
}
.review-table-members .review-member-chip:hover {
  background: #e3f2fd;
  color: #1565c0;
}
.review-pagination {
  margin-top: 16px;
}
.data-table--inner thead th {
  background: #f0f0f0;
  font-weight: 600;
}

/* ── EST-H03: edit audit log tabs in submit-history dialog ────────────── */
.submit-history-detail__tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e0e0e0;
  margin: 0.5em 0 0.75em;
}
.submit-history-detail__tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 6px 14px;
  cursor: pointer;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #455a64;
  font-weight: 500;
}
.submit-history-detail__tab:hover { background: #f5f5f5; }
.submit-history-detail__tab.is-active {
  background: #fff;
  border-color: #e0e0e0;
  margin-bottom: -1px;
  color: var(--primary, #1976d2);
}
.submit-history-detail__tab-pane[hidden] { display: none; }
.submit-history-edit-log__table th,
.submit-history-edit-log__table td {
  padding: 4px 8px;
  font-size: 0.88em;
}
.submit-history-edit-log__table code {
  background: #eef5ff;
  color: #1565c0;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}
.edit-log__old {
  background: #ffebee;
  color: #b71c1c;
  padding: 1px 4px;
  border-radius: 2px;
}
.edit-log__new {
  background: #e8f5e9;
  color: #1b5e20;
  padding: 1px 4px;
  border-radius: 2px;
}

/* ── QDC-H01: dashboard + warning badges ────────────────────────────────── */
.qdc-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 1em;
}
.qdc-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 1em 0 1.5em;
}
.qdc-summary-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-left: 4px solid #90caf9;
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.qdc-summary-card--bad {
  border-left-color: #c62828;
  background: #fff5f5;
}
.qdc-summary-card__label {
  color: #455a64;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qdc-summary-card__value {
  font-size: 1.4em;
  font-weight: 600;
  color: #102a43;
  margin: 4px 0;
}
.qdc-summary-card__sub { font-size: 0.85em; }

.qdc-section-title {
  margin: 1.5em 0 0.5em;
  font-size: 1.05em;
  color: #b71c1c;
}
.qdc-warning-table .qdc-row-bad td { background: #fff5f5; }
.qdc-warning-table .qdc-row-warn td { background: #fffdf4; }
.qdc-chip {
  display: inline-block;
  font-size: 0.78em;
  border-radius: 10px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  font-weight: 500;
  border: 1px solid transparent;
}
.qdc-chip--bad  { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.qdc-chip--warn { background: #fff3e0; color: #e65100; border-color: #ffcc80; }
.qdc-chip--good { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.qdc-chip--none { background: #eceff1; color: #546e7a; }
.badge-bad {
  background: #c62828;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 0.8em;
  font-weight: 600;
}
.training-skill-form input,
.training-skill-form select,
.training-skill-form textarea {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
}
.training-delete-form {
  margin-top: 8px;
}
@media (max-width: 1100px) {
  .training-level-grid,
  .training-level-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .training-skill-form__grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}
@media (max-width: 700px) {
  .training-level-grid,
  .training-level-edit-grid,
  .training-skill-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Schedule sync (file máy → web) ─────────────────────────────────────────── */
.schedule-page .schedule-sync-actions {
  padding: 18px 20px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
}
.schedule-section-title { margin: 0 0 10px; font-size: 1.05rem; }
.schedule-path-code {
  display: block;
  word-break: break-all;
  font-size: 12px;
  max-width: 640px;
}
/* ── TRK-H01: tracking dashboard (theme đồng bộ layout vàng đen) ─────────────── */

.tracking-coverage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 1000px) {
  .tracking-coverage { grid-template-columns: repeat(2, 1fr); }
}
.tracking-coverage__item {
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
}
.tracking-coverage__item.is-on  { border-color: #a5d6a7; background: #f8fff9; }
.tracking-coverage__item.is-partial { border-color: #ffe082; background: #fffdf5; }
.tracking-coverage__item.is-off { border-color: #e0e0e0; background: #fafafa; opacity: 0.92; }
.tracking-coverage__name {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-dk);
}
.tracking-coverage__stat {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
}
.tracking-coverage__badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--primary-soft);
  color: var(--primary);
  text-decoration: none;
}

.tracking-release-board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6be8 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(62, 82, 213, 0.22);
}
.tracking-release-board__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}
.tracking-release-board__fv {
  margin: 4px 0 0;
  font-size: 1.5rem;
  font-weight: 800;
}
.tracking-release-board__date { margin: 6px 0 0; font-size: 13px; opacity: 0.95; }
.tracking-release-board__countdown {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 700;
}
.tracking-release-board__countdown.is-soon { background: #ffeb3b; color: #333; }
.tracking-release-board__kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.tracking-release-board__kpis > div { text-align: center; min-width: 56px; }
.tracking-release-board__kpis .n {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.tracking-release-board__kpis .l {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.8;
}
.tracking-release-board__kpis .is-warn .n { color: #ffcdd2; }

.tracking-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: sticky;
  top: 8px;
  z-index: 5;
  box-shadow: var(--shadow-card);
}
.tracking-subnav a {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dk);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
}
.tracking-subnav a:hover {
  background: var(--primary-soft);
  border-color: var(--btn-border-strong);
}

.tracking-status-bars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 800px) {
  .tracking-status-bars { grid-template-columns: 1fr 1fr; }
}
.tracking-status-bar {
  display: grid;
  grid-template-columns: 72px 1fr 32px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.tracking-status-bar__track {
  height: 10px;
  background: #eceff1;
  border-radius: 5px;
  overflow: hidden;
}
.tracking-status-bar__track .fill { height: 100%; border-radius: inherit; }
.tracking-status-bar__track .fill--todo  { background: #9e9e9e; }
.tracking-status-bar__track .fill--prog  { background: #42a5f5; }
.tracking-status-bar__track .fill--block { background: #ef5350; }
.tracking-status-bar__track .fill--done  { background: #66bb6a; }
.tracking-status-bar__n { font-weight: 800; text-align: right; }

.tracking-risk-heading {
  margin: 16px 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dk);
}
.tracking-risk-heading--overdue { color: var(--danger); }
.tracking-risk-heading--blocking { color: #e65100; }
.tracking-risk-heading--dependency { color: #1565c0; }
.tracking-risk-note { margin: 12px 0 0; font-size: 12px; }
.tracking-risks-empty { padding: 12px 0; }
.tracking-table-wrap--risk { margin-bottom: 8px; }
.tracking-row-dependency td { background: #f3f8ff; }
.tracking-row-overdue td { background: #fff5f5; }
.tracking-row-blocking td { background: #fffdf4; }

/* Page hero — header chuẩn (List task, Tracking, Estimate, Review, QDC, …) */
.page-hero,
.tracking-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #fff 0%, rgba(240, 244, 248, 0.9) 55%, var(--primary-soft) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.page-hero__main,
.tracking-hero__main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  flex: 1 1 280px;
}
.page-hero__mark,
.tracking-hero__mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #5b6be8);
  border-radius: 12px;
}
.page-hero__mark svg,
.tracking-hero__mark svg {
  display: block;
}
.page-hero__body {
  min-width: 0;
}
.page-hero__title,
.tracking-hero__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.25;
}
.page-hero__title--with-tip {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.page-hero__sub,
.tracking-hero__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.page-hero__sub a {
  color: var(--primary);
}
.page-hero__extra {
  margin-top: 8px;
}
.page-hero__extra .page-header-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-hero__kicker {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dk);
}
.sync-estimate-hint {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sync-estimate-hint ul {
  margin: 6px 0 0 18px;
  line-height: 1.8;
}
.sync-estimate-section-title {
  margin: 28px 0 12px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dk);
}
.page-hero__meta,
.tracking-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex: 0 1 auto;
}
.page-hero__meta .page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.page-hero__refresh,
.tracking-hero__refresh { margin-left: 4px; }

.tracking-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dk);
  background: #fff;
  border: 1px solid var(--btn-border-strong);
  border-radius: 999px;
}
.tracking-pill--fv {
  background: var(--primary-soft);
  border-color: var(--btn-border-strong);
}
.tracking-pill--muted {
  color: var(--muted);
  font-weight: 600;
  border-color: var(--border);
}
.tracking-pill--sm {
  padding: 2px 8px;
  font-size: 11px;
}

.tracking-flash { margin-bottom: 14px; }
.tracking-jql-debug { margin-top: 10px; }
.tracking-jql-debug summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
.tracking-jql-debug code {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 11px;
  word-break: break-all;
  background: var(--code-bg);
  border-radius: var(--radius);
}

.tracking-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.tracking-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.tracking-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}
.tracking-filters__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary-dk);
}
.tracking-filters__stats {
  margin: 12px 0 0;
  font-size: 13px;
}
.tracking-stat-warn { color: var(--danger); font-weight: 700; }

.tracking-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--btn-border-strong);
  border-radius: var(--radius-lg);
}
.tracking-empty__title {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-dk);
}
.tracking-hint {
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--primary-dk);
  background: var(--primary-soft);
  border: 1px solid var(--btn-border-strong);
  border-radius: var(--radius-lg);
}

/* ── Overview KPI strip ─────────────────────────────────────────────────── */
.tracking-overview {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 16px;
  margin-bottom: 22px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.tracking-overview__hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
}
.tracking-overview__hero-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-dk);
}
.tracking-overview__hero-sub {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.tracking-overview__hero-sub strong {
  font-size: 18px;
  color: var(--success);
}

.tracking-ring {
  --p: 0;
  --ring-color: var(--primary);
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-color) 0 calc(var(--p) * 1%),
    #eceff1 calc(var(--p) * 1%) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
}
.tracking-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.tracking-ring__value {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.tracking-ring--sm {
  width: 52px;
  height: 52px;
}
.tracking-ring--sm::before { inset: 6px; }
.tracking-ring--sm .tracking-ring__value { font-size: 11px; }
.tracking-ring--empty {
  background: #f5f5f5;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}
.tracking-ring--empty::before { display: none; }

.tracking-stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  align-content: center;
}
.tracking-stat-pill {
  flex: 1 1 100px;
  min-width: 88px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fafafa;
  text-align: center;
}
.tracking-stat-pill__label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.tracking-stat-pill__value {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.tracking-stat-pill--done {
  background: linear-gradient(180deg, #fff 0%, #f1f8f2 100%);
  border-color: #c8e6c9;
}
.tracking-stat-pill--done .tracking-stat-pill__value { color: #2e7d32; }
.tracking-stat-pill--open {
  background: linear-gradient(180deg, #fff 0%, #e8f0fe 100%);
  border-color: #90caf9;
}
.tracking-stat-pill--open .tracking-stat-pill__value { color: #1565c0; }
.tracking-stat-pill--alert {
  background: linear-gradient(180deg, #fff 0%, var(--danger-soft) 100%);
  border-color: #ef9a9a;
}
.tracking-stat-pill--alert .tracking-stat-pill__value { color: var(--danger); }
.tracking-stat-pill--warn .tracking-stat-pill__value { color: #e65100; }
.tracking-stat-pill--epic {
  background: linear-gradient(180deg, #fff 0%, var(--primary-soft) 100%);
  border-color: var(--btn-border-strong);
}
.tracking-stat-pill--epic .tracking-stat-pill__value { color: var(--primary); }

.tracking-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tracking-section-title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-dk);
  white-space: nowrap;
}
.tracking-section-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.tracking-section-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--btn-border-strong);
}

.tracking-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.tracking-panel--warn {
  border-color: #ef9a9a;
  background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
}
.tracking-panel--epics,
.tracking-panel--issues { padding-bottom: 12px; }

.tracking-table-wrap--tall {
  max-height: min(72vh, 720px);
  overflow: auto;
}
.tracking-page .tracking-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--primary-dk);
}

.tracking-epic-tr {
  background: linear-gradient(90deg, rgba(240, 244, 248, 0.75) 0%, #fff 40%);
}
.tracking-epic-tr--p-ok   { box-shadow: inset 4px 0 0 #66bb6a; }
.tracking-epic-tr--p-warn { box-shadow: inset 4px 0 0 #ffa726; }
.tracking-epic-tr--p-bad  { box-shadow: inset 4px 0 0 #ef5350; }
.tracking-epic-tr--risk td {
  background: color-mix(in srgb, #ef5350 6%, transparent);
}
.tracking-epic-tr--risk .tracking-num-late {
  font-weight: 700;
}
.tracking-epic-tr:hover td { background: rgba(62, 82, 213, 0.08); }

.tracking-issue-tr--sub .tracking-cell-title {
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}
.tracking-issue-tr--sub td:first-child {
  color: var(--muted);
  font-size: 12px;
}
.tracking-issue-tr__indent {
  margin-left: 4px;
  color: var(--primary);
  font-weight: 700;
}
.tracking-cell-assignee {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.tracking-cell-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  white-space: nowrap;
}
.tracking-cell-flags { white-space: nowrap; }
.tracking-warn-table .tracking-row-overdue td { background: #fff5f5; }
.tracking-warn-table .tracking-row-blocking td { background: #fffdf8; }
.tracking-issues-table tbody tr:hover td { background: rgba(93, 58, 142, 0.04); }

.tracking-panels-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) {
  .tracking-panels-row { grid-template-columns: 1fr; }
}

.tracking-table-wrap {
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.tracking-table-wrap--inner {
  margin: 0 14px 14px;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.tracking-page .tracking-table th {
  background: var(--table-head-bg);
  color: var(--table-head-text);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  border-color: var(--border);
}
.tracking-page .tracking-table td {
  padding: 10px 14px;
  vertical-align: middle;
  font-size: 13px;
}
.tracking-page .tracking-table tbody tr:hover td {
  background: rgba(93, 58, 142, 0.04);
}
.tracking-cell-title {
  max-width: 280px;
  line-height: 1.4;
}
.tracking-cell-group {
  font-weight: 700;
  color: var(--text);
}
.tracking-cell-progress {
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.tracking-num-done { color: var(--success); font-weight: 700; }
.tracking-raw-status { display: block; margin-top: 2px; font-size: 11px; }
.tracking-flags { white-space: nowrap; }

.tracking-issue-key {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--code-bg);
  color: var(--primary-dk);
  border: 1px solid var(--btn-border-strong);
}
.tracking-issue-key--sm { font-size: 11px; padding: 2px 6px; }
.tracking-type {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: #f3f4f6;
  color: var(--muted);
}

.tracking-progress {
  position: relative;
  background: #eceff1;
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
  min-width: 120px;
}
.tracking-progress--epic {
  margin-top: 10px;
  height: 10px;
  border-radius: 5px;
}
.tracking-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #66bb6a, #43a047);
  transition: width 0.35s ease;
  border-radius: inherit;
}
.tracking-progress__bar--ok   { background: linear-gradient(90deg, #81c784, var(--success)); }
.tracking-progress__bar--warn { background: linear-gradient(90deg, #ffb74d, var(--warn)); }
.tracking-progress__bar--bad  { background: linear-gradient(90deg, #ef5350, var(--danger)); }
.tracking-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
}

.track-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  border-radius: 6px;
  padding: 3px 9px;
  font-weight: 700;
  border: 1px solid transparent;
  margin-right: 4px;
}
.track-chip--done       { background: var(--success-soft); color: #1b5e20; border-color: #a5d6a7; }
.track-chip--inprogress { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; }
.track-chip--blocked    { background: var(--danger-soft); color: var(--danger); border-color: #ef9a9a; }
.track-chip--todo       { background: #f3f4f6; color: #616161; border-color: #e0e0e0; }
.track-chip--cat-done     { background: #e8f5e9; color: #1b5e20; border-color: #a5d6a7; }
.track-chip--cat-progress { background: #e3f2fd; color: #0d47a1; border-color: #90caf9; }
.track-chip--cat-todo     { background: #fafafa; color: #424242; border-color: #e0e0e0; }
.track-chip--sm { font-size: 10px; padding: 2px 7px; }

.track-type {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.track-type--epic { background: var(--primary-soft); color: var(--primary); border-color: var(--btn-border-strong); }
.track-type--task { background: var(--code-bg); color: var(--text); border-color: var(--border); }
.track-type--bug  { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.track-type--sub  { background: var(--code-bg); color: var(--muted); border-color: var(--border); }

.track-priority {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}
.track-priority--sm { font-size: 10px; padding: 1px 6px; }
.track-priority--high { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.track-priority--low  { background: #f1f8e9; color: #558b2f; border-color: #c5e1a5; }

.tracking-meta-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 4px;
  background: #f5f5f5;
  color: var(--muted);
  border: 1px solid #e0e0e0;
}
.tracking-meta-chip--fv {
  color: var(--primary-dk);
  background: var(--primary-soft);
  border-color: var(--btn-border-strong);
}
.tracking-meta-chip--date {
  color: #1565c0;
  background: #e3f2fd;
  border-color: #90caf9;
}

.tracking-count {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
}
.tracking-count--done .tracking-count__n { color: var(--success); font-size: 16px; }
.tracking-count__sep,
.tracking-count__d { color: var(--muted); font-weight: 600; }
.tracking-count__lbl {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}

.tracking-progress-bar {
  height: 8px;
  background: #eceff1;
  border-radius: 4px;
  overflow: hidden;
  min-width: 100px;
}
.tracking-progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.3s ease;
}
.tracking-progress-bar__fill--ok   { background: linear-gradient(90deg, #81c784, var(--success)); }
.tracking-progress-bar__fill--warn { background: linear-gradient(90deg, #ffb74d, var(--warn)); }
.tracking-progress-bar__fill--bad  { background: linear-gradient(90deg, #ef5350, var(--danger)); }
.tracking-progress-bar__fill--todo  { background: #9e9e9e; }
.tracking-progress-bar__fill--prog  { background: linear-gradient(90deg, #64b5f6, #1565c0); }
.tracking-progress-bar__fill--block { background: linear-gradient(90deg, #ef5350, #c62828); }
.tracking-progress-bar__fill--done  { background: linear-gradient(90deg, #81c784, var(--success)); }

.tracking-panel--overview { padding-bottom: 20px; }
.tracking-table-caption {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary-dk);
}
.tracking-table-caption:first-of-type { margin-top: 4px; }
.tracking-summary-table { margin-bottom: 4px; }
.tracking-src-row.is-on td  { background: #f8fff9; }
.tracking-src-row.is-partial td { background: #fffdf5; }
.tracking-src-row.is-off td { background: #fafafa; }
.tracking-release-row td { background: linear-gradient(90deg, #faf8ff 0%, #fff 50%); font-weight: 500; }
.tracking-release-row td:first-child { font-weight: 700; }
.tracking-progress-pct {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  min-width: 36px;
}
.tracking-progress-pct--ok   { color: #2e7d32; }
.tracking-progress-pct--warn { color: #e65100; }
.tracking-progress-pct--bad  { color: var(--danger); }

.tracking-num-late { color: var(--danger); font-weight: 800; }

.tracking-group-row--ok td:first-child   { box-shadow: inset 4px 0 0 #66bb6a; }
.tracking-group-row--warn td:first-child { box-shadow: inset 4px 0 0 #ffa726; }
.tracking-group-row--bad td:first-child  { box-shadow: inset 4px 0 0 #ef5350; }
.tracking-group-label {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tracking-group-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}
.tracking-group-mini__done { color: var(--success); }
.tracking-group-mini__open { color: #1565c0; }
.tracking-group-mini__late { color: var(--danger); }

.tracking-warn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tracking-warn-item {
  display: grid;
  grid-template-columns: 130px 1fr minmax(160px, 220px);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 4px solid transparent;
}
.tracking-warn-item.is-overdue {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, #fff5f5 0%, #fff 24%);
}
.tracking-warn-item.is-blocking {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, #fffdf4 0%, #fff 24%);
}
.tracking-warn-item__key-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.tracking-warn-item__title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.tracking-warn-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tracking-warn-item__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-size: 12px;
  text-align: right;
}
.tracking-warn-item__person {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}
.tracking-warn-item__due {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.tracking-warn-item__due.is-late { color: var(--danger); }

a.tracking-issue-key { text-decoration: none; }
a.tracking-issue-key:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.tracking-task-tree {
  padding: 8px 12px 14px 44px;
  border-top: 1px solid var(--border);
  background: #faf9fc;
}
.tracking-task-group + .tracking-task-group { margin-top: 10px; }
.tracking-subtasks {
  margin-left: 20px;
  padding-left: 12px;
  border-left: 2px solid var(--btn-border-strong);
}
.tracking-issue-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.tracking-issue-row + .tracking-issue-row { margin-top: 6px; }
.tracking-issue-row--sub {
  margin-top: 4px;
  background: #fcfcfc;
  border-style: dashed;
}
.tracking-issue-row.is-overdue { border-color: #ef9a9a; }
.tracking-issue-row.is-blocking { border-color: #ffcc80; }
.tracking-issue-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tracking-issue-row__summary {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
}
.tracking-issue-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  min-width: 120px;
  text-align: right;
}
.tracking-issue-row__assignee { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tracking-issue-row__time { font-family: ui-monospace, monospace; font-weight: 600; color: var(--primary-dk); }

.track-flag {
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
}
.track-flag--bad  { background: var(--danger-soft); color: var(--danger); }
.track-flag--warn { background: var(--warn-soft); color: #e65100; }

.tracking-warning-table .tracking-row-overdue td  { background: #fff5f5; }
.tracking-warning-table .tracking-row-blocking td { background: #fffdf4; }

.tracking-pill--date {
  color: #1565c0;
  border-color: #90caf9;
  background: #e3f2fd;
}
.tracking-release-date { display: block; margin-top: 2px; }

.tracking-epic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tracking-epic-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  border-left: 4px solid #e0e0e0;
}
.tracking-epic-card--p-ok   { border-left-color: #66bb6a; }
.tracking-epic-card--p-warn { border-left-color: #ffa726; }
.tracking-epic-card--p-bad  { border-left-color: #ef5350; }
.tracking-epic-card:hover { border-color: var(--btn-border-strong); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); }
.tracking-epic-card[open] {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.12);
}
.tracking-epic-card--empty { opacity: 0.88; border-left-color: #bdbdbd; }
.tracking-epic-card__summary {
  display: grid;
  grid-template-columns: 24px 52px 1fr auto;
  gap: 12px 16px;
  align-items: start;
  cursor: pointer;
  padding: 14px 16px;
  list-style: none;
  user-select: none;
}
.tracking-epic-card__summary::-webkit-details-marker { display: none; }
.tracking-epic-card[open] .tracking-epic-card__chev { transform: rotate(90deg); }
.tracking-epic-card__chev {
  grid-row: 1 / span 2;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--primary-soft);
  position: relative;
  transition: transform 0.2s;
}
.tracking-epic-card__chev::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translate(-50%, -55%) rotate(-45deg);
}
.tracking-epic-card__main {
  min-width: 0;
  grid-column: 3;
}
.tracking-epic-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tracking-epic-card__title {
  margin: 8px 0 0;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tracking-epic-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.tracking-epic-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tracking-epic-card__counts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tracking-epic-card__assignee {
  grid-column: 4;
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 200px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: #faf9fc;
  border: 1px solid #ece6f2;
  text-align: right;
}
.tracking-epic-card__assignee-icon {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: 4px;
}
.tracking-epic-card__assignee-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.tracking-epic-card__empty {
  margin: 0;
  padding: 12px 16px 16px 52px;
  font-size: 13px;
}

.tracking-page .text-warning { color: var(--danger); font-weight: 700; }

@media (max-width: 900px) {
  .tracking-overview {
    grid-template-columns: 1fr;
  }
  .tracking-overview__hero {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .tracking-epic-card__summary {
    grid-template-columns: 24px 48px 1fr;
  }
  .tracking-epic-card__assignee {
    grid-column: 1 / -1;
    grid-row: auto;
    max-width: none;
    text-align: left;
  }
  .tracking-warn-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tracking-warn-item__aside {
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 640px) {
  .page-hero,
  .tracking-hero { flex-direction: column; }
  .page-hero__meta,
  .tracking-hero__meta { justify-content: flex-start; }
  .tracking-stat-pill { flex: 1 1 calc(50% - 8px); }
  .tracking-filters__field { min-width: 100%; }
  .tracking-issue-row {
    grid-template-columns: 1fr;
  }
  .tracking-issue-row__meta {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .tracking-task-tree { padding-left: 16px; }
  .tracking-group-label { max-width: 180px; }
}
.text-warning { color: #c62828; font-weight: 500; }
.knowhow-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
}

/* Inputs outside .form (filters, meta, map panel, MapNew) */
.knowhow-filters input.input,
.knowhow-filters select.input,
.knowhow-meta input.input,
.knowhow-meta select.input,
.knowhow-map-panel input.input,
.knowhow-map-page .form-group input.input,
.page-section form .form-group input.input,
.page-section form .form-group textarea.input,
.page-section form .form-group select.input {
  padding: 9px 12px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 14px;
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.page-section form .form-group textarea.input {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}
.knowhow-filters select.input,
.knowhow-meta select.input,
.page-section form .form-group select.input {
  min-height: 38px;
  padding-right: 32px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.knowhow-filters input.input:focus,
.knowhow-filters select.input:focus,
.knowhow-meta input.input:focus,
.knowhow-meta select.input:focus,
.knowhow-map-panel input.input:focus,
.knowhow-map-page .form-group input.input:focus,
.page-section form .form-group input.input:focus,
.page-section form .form-group textarea.input:focus,
.page-section form .form-group select.input:focus {
  outline: none;
  border-color: var(--primary, #3b82f6);
  box-shadow: 0 0 0 2px var(--primary-soft, rgba(59, 130, 246, 0.2));
}
.knowhow-map-page .form-group label,
.knowhow-meta .form-group label,
.page-section form .form-group label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted, #64748b);
}
.page-section form .form-group label:has(> input[type="checkbox"]),
.knowhow-map-form .form-group label:has(> input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text, #1e293b);
}

/* Required field labels */
.knowhow-meta .form-group label:has(+ input[required]),
.knowhow-meta .form-group label:has(+ select[required]),
.knowhow-map-form .form-group label:has(+ input[required]),
.knowhow-map-form .form-group label:has(+ select[required]),
.knowhow-map-panel .form-group label:has(+ input[required]) {
  color: #dc2626;
}
.knowhow-meta input:required:invalid,
.knowhow-meta select:required:invalid,
.knowhow-map-form input:required:invalid,
.knowhow-map-form select:required:invalid {
  border-color: #fca5a5;
}

/* Table action column alignment */
.knowhow-table .data-table td {
  vertical-align: middle;
}
.knowhow-table .knowhow-tag-badges {
  align-items: center;
}
.knowhow-table .knowhow-row-actions {
  align-items: center;
}
.knowhow-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.knowhow-row-actions form {
  margin: 0;
  display: inline-flex;
}

/* Map create form spacing */
.knowhow-map-form {
  padding: 24px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.knowhow-map-form .form-group {
  margin: 0;
}
.knowhow-map-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.knowhow-page__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.knowhow-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.knowhow-module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.knowhow-module-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text2, #525a7a);
  background: var(--bg3, #161b2e);
  border: 1px solid var(--border2, #252d4a);
}
.knowhow-module-chip:hover {
  border-color: var(--chip-color, var(--accent, #3b82f6));
  color: var(--chip-color, var(--accent2, #60a5fa));
}
.knowhow-module-chip.is-active {
  background: color-mix(in srgb, var(--chip-color, var(--accent)) 18%, transparent);
  border-color: var(--chip-color, var(--accent));
  color: var(--chip-color, var(--accent2));
}
.knowhow-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,.15);
}
.knowhow-color-picker {
  display: flex;
  align-items: center;
  gap: 12px;
}
.knowhow-color-picker__input {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: var(--surface, #fff);
  cursor: pointer;
}
.knowhow-color-picker__hex {
  font-family: ui-monospace, monospace;
  font-size: 13px;
}
.knowhow-filters-toolbar__tag {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 420px;
}
.knowhow-filters-toolbar__tag .knowhow-mui-autocomplete {
  width: 100%;
}
.task-list-toolbar .knowhow-mui-autocomplete--filter {
  width: 100%;
  position: relative;
}
.task-list-toolbar .knowhow-mui-autocomplete__listbox {
  z-index: 10050;
}
.task-list-toolbar .knowhow-mui-autocomplete__input {
  border: none !important;
  outline: none;
  background: transparent;
  min-height: 28px !important;
  padding: 2px 0;
  box-shadow: none;
}
.task-list-toolbar .knowhow-mui-autocomplete__input:focus {
  border: none;
  box-shadow: none;
}
.knowhow-filters-toolbar__keyword {
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 400px;
}
.knowhow-filters-toolbar__count {
  flex: 0 1 120px;
  min-width: 100px;
}
.knowhow-filters-toolbar__reset {
  align-self: flex-end;
  margin-bottom: 2px;
}
.knowhow-filters-toolbar__submit {
  align-self: flex-end;
  margin-bottom: 2px;
}
.knowhow-tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.knowhow-tag-badge {
  background: #f3f4f6;
  color: #374151;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.25;
}
.knowhow-tag-badge--more {
  background: #e5e7eb;
  color: #6b7280;
  font-weight: 600;
}
a.knowhow-tag-badge--link {
  text-decoration: none;
}
a.knowhow-tag-badge--link:hover {
  background: #e5e7eb;
}
/* MUI Autocomplete — multiple tags (https://mui.com/material-ui/react-autocomplete/#multiple-values) */
.knowhow-mui-autocomplete {
  position: relative;
  width: 100%;
}
.knowhow-mui-autocomplete__input-root {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 4px 14px;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 8px;
  background: var(--surface, #fff);
  cursor: text;
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
}
.knowhow-mui-autocomplete__input-root:focus-within {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.knowhow-mui-autocomplete__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.knowhow-mui-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 24px;
  margin: 2px;
  padding: 0 4px 0 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.87);
  font-size: 13px;
  line-height: 24px;
  box-sizing: border-box;
}
.knowhow-mui-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowhow-mui-chip__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0 -2px 0 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(0, 0, 0, 0.26);
  cursor: pointer;
}
.knowhow-mui-chip__delete:hover {
  color: rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.04);
}
.knowhow-mui-chip__delete-icon {
  display: block;
}
.knowhow-mui-chip--more {
  padding: 0 10px;
  background: #e5e7eb;
  color: #6b7280;
  font-weight: 600;
  cursor: default;
}
.knowhow-mui-chip--readonly {
  padding: 0 12px;
  cursor: default;
}
.knowhow-mui-autocomplete--focused .knowhow-mui-autocomplete__input-root {
  align-items: flex-start;
}
.knowhow-mui-autocomplete--focused .knowhow-mui-autocomplete__chips {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  max-height: 72px;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: flex-start;
}
.knowhow-mui-autocomplete__input {
  flex: 1 1 30px;
  min-width: 30px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  padding: 2px 0 !important;
  color: var(--text, rgba(0, 0, 0, 0.87));
}
.knowhow-mui-autocomplete__input::placeholder {
  color: rgba(0, 0, 0, 0.42);
}
.knowhow-mui-autocomplete__listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 4px 0 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-radius: 4px;
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
  max-height: min(40vh, 240px);
  overflow-y: auto;
  z-index: 10040;
}
.knowhow-mui-autocomplete__option {
  padding: 6px 16px;
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.87);
}
.knowhow-mui-autocomplete__option.is-active,
.knowhow-mui-autocomplete__option:hover {
  background: rgba(0, 0, 0, 0.04);
}
.knowhow-mui-autocomplete__option--empty {
  color: rgba(0, 0, 0, 0.38);
  cursor: default;
  pointer-events: none;
}
.knowhow-mui-autocomplete__mark {
  background: transparent;
  color: inherit;
  font-weight: 600;
  padding: 0;
}
.knowhow-mui-autocomplete--single {
  display: block;
  width: 100%;
}
.knowhow-mui-autocomplete--single .knowhow-mui-autocomplete__input {
  width: 100%;
  box-sizing: border-box;
}
.knowhow-mui-autocomplete--open .knowhow-mui-autocomplete__input-root {
  border-color: var(--primary);
}
.knowhow-meta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.badge-module {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
}

.knowhow-map-hint {
  margin: 4px 0 0;
  font-size: 13px;
}
.knowhow-map-hint__sep {
  opacity: 0.5;
}

.knowhow-map-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.knowhow-map-toolbar__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.knowhow-map-toolbar__title {
  margin: 0 !important;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(480px, 50vw);
}
.knowhow-map-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.knowhow-map-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.knowhow-map-workspace {
  position: relative;
}
.knowhow-map-canvas {
  position: relative;
  width: 100%;
}
.knowhow-map-page .knowhow-mindmap-wrap {
  height: calc(100vh - 168px);
  min-height: 400px;
  width: 100%;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  overflow: auto;
}
.knowhow-map-page--readonly .knowhow-mindmap-wrap {
  height: calc(100vh - 124px);
}
.knowhow-map-page .knowhow-mindmap-wrap .map-container {
  width: 100%;
  height: 100%;
}
/* Mind Elixir: lines above canvas background (z:1), nodes above lines (z:2/3) */
.knowhow-mindmap-wrap .map-container .lines,
.knowhow-mindmap-wrap .map-container .subLines {
  z-index: 1 !important;
}
.knowhow-mindmap-wrap .map-container me-parent {
  position: relative;
  z-index: 2;
}
.knowhow-mindmap-wrap .map-container me-root {
  position: relative;
  z-index: 3;
}
.knowhow-mindmap-wrap .expandbtn,
.knowhow-mindmap-wrap me-epd,
.knowhow-mindmap-wrap ME-EPD {
  cursor: pointer;
  z-index: 2;
  min-width: 22px;
  min-height: 22px;
}
.knowhow-mindmap-wrap me-tpc,
.knowhow-mindmap-wrap ME-TPC {
  cursor: pointer;
}
.knowhow-node-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 32vw);
  min-width: 280px;
  z-index: 10;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px 0 0 8px;
  background: var(--surface, #fff);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: -4px 0 20px rgba(15, 23, 42, 0.12);
}
.knowhow-node-sidebar[hidden] {
  display: none !important;
}
.knowhow-node-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-shrink: 0;
}
.knowhow-node-sidebar__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.knowhow-node-sidebar__body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.knowhow-node-sidebar__body .form-group {
  margin-bottom: 14px;
}
.knowhow-node-sidebar__body .form-group:last-of-type {
  margin-bottom: 0;
}
.knowhow-node-sidebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.knowhow-sidebar-field {
  margin: 0 0 14px;
  font-size: 14px;
}
.knowhow-node-sidebar .form-group input.input,
.knowhow-node-sidebar .form-group select.input {
  width: 100%;
}
@media (max-width: 900px) {
  .knowhow-node-sidebar {
    width: min(100%, 360px);
    max-height: 55vh;
    bottom: auto;
    height: auto;
    border-radius: 8px 0 0 0;
  }
}

/* Map metadata panel (vertical, not tab bar) */
.knowhow-map-meta-panel {
  margin-bottom: 8px;
  padding: 0;
  overflow: hidden;
}
.knowhow-map-meta-panel__summary {
  padding: 8px 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.knowhow-map-meta-panel__summary::-webkit-details-marker {
  display: none;
}
.knowhow-map-meta-panel__summary::before {
  content: "▾ ";
  display: inline-block;
  transition: transform 0.15s ease;
  margin-right: 8px;
}
.knowhow-map-meta-panel:not([open]) .knowhow-map-meta-panel__summary::before {
  transform: rotate(-90deg);
}
.knowhow-map-meta-form {
  padding: 0 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  max-width: 480px;
}
.knowhow-map-meta-form .form-group {
  margin: 0;
  width: 100%;
}
.knowhow-map-meta-form__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* Button loading state */
.btn.is-loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: wait;
}

.knowhow-editor-layout,
.knowhow-detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  height: calc(100vh - 220px);
  min-height: 400px;
  max-height: calc(100vh - 220px);
}
@media (max-width: 900px) {
  .knowhow-editor-layout,
  .knowhow-detail-layout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
}
.knowhow-editor-pane,
.knowhow-preview-pane,
.knowhow-md-source-pane {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.knowhow-editor-toolbar {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border, #e2e8f0);
  flex-wrap: wrap;
}
.knowhow-textarea {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  padding: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  min-height: 120px;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.knowhow-md-source {
  flex: 1;
  margin: 0;
  padding: 16px;
  overflow: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8fafc;
  color: var(--text, #1e293b);
}
.knowhow-preview-title {
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.knowhow-preview-pane .markdown-body {
  flex: 1;
  overflow: auto;
  margin: 12px;
}
.knowhow-preview-pane #knowhow-preview.card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.knowhow-preview-pane #knowhow-preview.knowhow-article-body {
  overflow: auto;
}
.knowhow-meta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.knowhow-preview-hint {
  font-size: 13px;
  margin-top: -4px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.knowhow-article-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: stretch;
}
.knowhow-article-toc {
  align-self: stretch;
  min-height: 0;
}
@media (max-width: 900px) {
  .knowhow-article-detail {
    grid-template-columns: 1fr;
  }
  .knowhow-article-detail .knowhow-article-toc {
    order: -1;
  }
  .knowhow-article-toc__inner {
    position: static;
    max-height: none;
  }
}

.knowhow-article-toc__inner {
  position: sticky;
  top: calc(var(--bul-topbar-height) + 16px);
  max-height: calc(100vh - var(--bul-topbar-height) - 32px);
  overflow-y: auto;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.knowhow-article-toc__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0 8px 10px;
}
.knowhow-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.knowhow-toc-list a {
  display: block;
  text-decoration: none;
  color: var(--text);
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1.4;
  border-left: 2px solid transparent;
}
.knowhow-toc-list a:hover {
  background: var(--primary-soft);
  color: var(--primary-dk);
}
.knowhow-toc-list a.active {
  background: var(--primary-soft);
  color: var(--primary-dk);
  border-left-color: var(--primary);
  font-weight: 600;
}
.knowhow-toc-l1 > a {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dk);
  padding: 8px 10px;
  margin-top: 8px;
}
.knowhow-toc-l1:first-child > a {
  margin-top: 0;
}
.knowhow-toc-l2 > a {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px 6px 14px;
}
.knowhow-toc-l3 > a {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  padding: 4px 10px 4px 24px;
}
.knowhow-toc-l3 > a:hover,
.knowhow-toc-l3 > a.active {
  color: var(--primary-dk);
}

.knowhow-article-body {
  padding: 24px;
}
.knowhow-editor-pane.knowhow-drop-active {
  outline: 2px dashed var(--primary, #3b82f6);
  outline-offset: -2px;
}
.knowhow-editor-drop-hint {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  margin: 0;
  padding: 0 8px 6px;
}

/* Markdown body */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  margin-top: 1em;
  scroll-margin-top: 64px;
}
.markdown-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
.markdown-body th, .markdown-body td {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
}
.markdown-body pre {
  background: #f1f5f9;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
}
.markdown-body img {
  max-width: 100%;
  height: auto;
}
.markdown-body ul.contains-task-list {
  list-style: none;
  padding-left: 0;
}
.markdown-body input[type="checkbox"] {
  margin-right: 6px;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}

/* Training + Growing polish */
.training-page {
  --training-card-shadow: 0 14px 34px rgba(33, 22, 54, 0.08);
}
.training-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  margin-bottom: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 0%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(135deg, var(--primary-dk), var(--primary));
  border-radius: 18px;
  box-shadow: var(--training-card-shadow);
}
.training-hero h1 {
  margin: 4px 0 6px;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.training-hero p {
  margin: 0;
  max-width: 620px;
  color: rgba(255, 255, 255, 0.82);
}
.training-eyebrow,
.training-group-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.training-eyebrow {
  color: rgba(255, 255, 255, 0.74);
}
.training-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 10px;
  min-width: 310px;
}
.training-hero__stats > div {
  padding: 14px 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}
.training-hero__stats strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}
.training-hero__stats span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.74);
}
.training-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.training-team-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.training-team-tab {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  color: var(--muted);
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.training-team-tab:hover {
  color: var(--primary-dk);
  background: var(--primary-soft);
  text-decoration: none;
}
.training-team-tab.is-active {
  color: #fff;
  background: var(--primary);
  box-shadow: 0 8px 18px rgba(93, 58, 142, 0.22);
}
.training-admin-card,
.training-skill-group,
.training-skill-card {
  border-color: rgba(93, 58, 142, 0.12);
  border-radius: 16px;
  box-shadow: var(--training-card-shadow);
}
.training-admin-card {
  background: linear-gradient(180deg, #fff, rgba(240, 244, 248, 0.9));
}
.training-skill-group {
  padding: 0;
  overflow: hidden;
}
.training-skill-group__header {
  align-items: center;
  padding: 18px 20px;
  margin: 0;
  background: linear-gradient(135deg, #fff, rgba(240, 244, 248, 0.9));
  border-bottom: 1px solid var(--border);
}
.training-skill-group__header h2 {
  margin: 2px 0 0;
  color: var(--primary-dk);
  font-size: 20px;
}
.training-group-kicker {
  color: var(--primary);
}
.training-skill-group__header > span,
.training-skill-category__head span,
.training-order {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.training-skill-group__header > span {
  padding: 6px 11px;
  color: var(--primary-dk);
  background: var(--primary-soft);
}
.training-skill-category {
  margin: 0;
  padding: 18px 20px 4px;
}
.training-skill-category + .training-skill-category {
  border-top: 1px solid #f0edf5;
}
.training-skill-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.training-skill-category__head h3 {
  padding: 0;
  border: 0;
  color: var(--primary-dk);
  font-size: 17px;
}
.training-skill-category__head span {
  padding: 4px 9px;
  color: var(--muted);
  background: #f8f7fb;
}
.training-skill-section {
  margin-top: 14px;
}
.training-skill-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #4b5563;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.training-skill-section h4 span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--primary);
}
.training-skill-card {
  padding: 16px;
  margin: 10px 0 14px;
  background: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.training-skill-card:hover {
  transform: translateY(-1px);
  border-color: rgba(93, 58, 142, 0.24);
  box-shadow: 0 18px 42px rgba(33, 22, 54, 0.12);
}
.training-skill-title strong {
  font-size: 16px;
}
.training-skill-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.training-order {
  padding: 5px 9px;
  color: var(--muted);
  background: #f8f7fb;
}
.training-skill-code {
  padding: 4px 9px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dk));
}
.training-priority {
  padding: 4px 8px;
}
.training-level-grid {
  gap: 12px;
}
.training-level-grid > div {
  min-height: 132px;
  border-color: #f1e4b8;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fbfafc);
}
.training-level-grid strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.training-level-grid strong span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  font-size: 12px;
}
.training-level-grid p {
  margin-top: 8px;
  line-height: 1.55;
}
.training-rating-chip {
  padding: 5px 10px;
  border: 1px solid var(--btn-border-strong);
  background: var(--primary-soft);
}
.training-skill-edit {
  padding: 12px;
  background: #fbfafc;
  border: 1px dashed #d9cce8;
  border-radius: 12px;
}
@media (max-width: 960px) {
  .training-hero {
    flex-direction: column;
  }
  .training-hero__stats {
    min-width: 0;
  }
}
@media (max-width: 640px) {
  .training-hero__stats {
    grid-template-columns: 1fr;
  }
  .training-team-tabs {
    width: 100%;
    border-radius: 16px;
  }
  .training-team-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Training matrix table layout */
.training-hero {
  display: block;
}
.training-hero p {
  max-width: 760px;
}
.training-overview-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(93, 58, 142, 0.08);
}
.training-overview-bar {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, rgba(240, 244, 248, 0.9));
}
.training-overview-bar > span {
  color: var(--primary-dk);
  font-size: 13px;
  font-weight: 800;
}
.training-overview-bar > div {
  height: 9px;
  overflow: hidden;
  background: #f1e4b8;
  border-radius: 999px;
}
.training-overview-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #c99700);
  border-radius: inherit;
}
.training-overview-bar strong {
  color: var(--primary);
  font-size: 13px;
}
.training-skill-table-wrap {
  overflow-x: auto;
  border: 1px solid #f1e4b8;
  border-radius: 14px;
  background: #fff;
}
.training-skill-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.training-skill-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 12px;
  color: var(--table-head-text);
  background: var(--table-head-bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.training-skill-table td {
  padding: 12px;
  border-bottom: 1px solid #f0edf5;
  vertical-align: top;
}
.training-skill-table tbody tr:hover td {
  background: var(--primary-soft);
}
.training-skill-table tbody tr:last-child td {
  border-bottom: 0;
}
.training-skill-table__skill {
  width: 240px;
  min-width: 240px;
}
.training-level-cell {
  width: 18%;
  min-width: 180px;
  line-height: 1.55;
  color: #374151;
}
.training-level-cell > span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.training-rating-cell {
  min-width: 180px;
}
.training-rating-cell .training-rating-chip {
  margin: 0 4px 4px 0;
}
.training-edit-row td {
  padding: 0 12px 10px;
  background: #fff;
}
.training-edit-row + tr td {
  border-top: 1px solid #f0edf5;
}
.training-skill-edit--row {
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fbfafc;
  box-shadow: none;
}
.training-skill-edit--row summary {
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--primary-dk);
  background: var(--primary-soft);
  font-size: 12px;
}
.training-skill-edit--row[open] summary {
  margin-bottom: 10px;
}
.training-skill-edit--row .training-skill-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.training-skill-edit--row .training-level-edit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .training-overview-bars {
    grid-template-columns: 1fr;
  }
  .training-skill-group__header,
  .training-skill-category {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.bul-btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bul-sync-spin 0.6s linear infinite;
  vertical-align: middle;
}

.role-guideline-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.role-guideline-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.role-guideline-panel__head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}
.role-guideline-list {
  margin: 10px 0 0;
  padding-left: 18px;
}
.role-guideline-list li {
  margin-bottom: 6px;
}
.role-guideline-list p {
  margin: 4px 0 0;
}
.role-guideline-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.help-page .help-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.help-page .help-nav .btn.is-active {
  background: var(--primary-soft, rgba(37, 99, 235, 0.12));
  color: var(--primary);
  font-weight: 600;
}
.help-nav--footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.roadmap-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roadmap-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.roadmap-block-title {
  margin: 0 0 10px;
  font-size: 15px;
}
.roadmap-role-summary {
  margin: 0;
  line-height: 1.55;
}
.roadmap-phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.roadmap-phase-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface-2, rgba(148, 163, 184, 0.06));
}
.roadmap-phase-range {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--primary);
}
.roadmap-phase-focus {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.roadmap-kpi-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.roadmap-kpi-list,
.roadmap-checklist {
  margin: 0;
  padding-left: 18px;
  line-height: 1.55;
}
.roadmap-kpi-list li,
.roadmap-checklist li {
  margin-bottom: 6px;
}
.roadmap-reviewer-cadence {
  margin: 0;
  line-height: 1.55;
}
.roadmap-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roadmap-faq-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.roadmap-faq-item h4 {
  margin: 0 0 4px;
  font-size: 13px;
}
.roadmap-faq-item p {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, var(--muted));
}
.roadmap-steps-intro {
  margin: 0;
}
.roadmap-step-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.roadmap-step-card__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.roadmap-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap-step-title {
  margin: 0 0 4px;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.roadmap-step-desc {
  margin: 0;
  font-size: 14px;
}
.roadmap-step-section {
  margin: 12px 0 0;
}
.roadmap-step-section__label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, var(--muted));
}
.roadmap-step-howto {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
}
.roadmap-step-howto li {
  margin-bottom: 6px;
}
.roadmap-step-tips {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--text-muted, var(--muted));
}
.roadmap-step-tips li {
  margin-bottom: 4px;
}
.roadmap-step-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.roadmap-detail-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.role-guideline-preview-howto {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--text-muted, var(--muted));
  line-height: 1.45;
}
.role-guideline-preview-howto li {
  margin-bottom: 3px;
}
.role-guideline-list__item {
  margin-bottom: 12px;
}
.role-guideline-list__desc {
  margin: 2px 0 0;
  font-size: 13px;
}
.role-guideline-panel.is-collapsed {
  padding-bottom: 10px;
}
.role-guideline-panel__collapsed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.role-guideline-panel__collapsed-bar[hidden] {
  display: none !important;
}

/* Knowhow article engagement (rating + comments) */
.sortable-th__link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sortable-th__link:hover {
  color: var(--accent, #3b82f6);
}
.sortable-th--active .sortable-th__link {
  font-weight: 600;
}
.knowhow-row-needs-action {
  background: color-mix(in srgb, #f59e0b 12%, transparent) !important;
}
.knowhow-engagement.card {
  margin-top: 24px;
  padding: 18px 20px 20px;
}
.knowhow-engagement__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.knowhow-rating-summary {
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: var(--text2, #525a7a);
}
.knowhow-stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 8px;
}
.knowhow-stars__btn {
  background: none;
  border: none;
  padding: 2px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--border2, #cbd5e1);
}
.knowhow-stars__btn.is-on,
.knowhow-stars__btn:hover {
  color: #f59e0b;
}
.knowhow-rating-hint {
  font-size: 0.85rem;
  color: #b45309;
  margin: 8px 0 16px;
}
.knowhow-rating-hint[hidden] {
  display: none !important;
}
.knowhow-comments {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #e2e8f0);
  scroll-margin-top: 80px;
}
.knowhow-comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.knowhow-comments-header .knowhow-comments__heading {
  margin: 0;
  flex: 0 0 auto;
}
.knowhow-comments-header .select2-container {
  flex: 0 0 auto;
  margin-left: auto;
  width: 220px !important;
  max-width: 100%;
}
.knowhow-comments__heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.knowhow-comments.is-highlight {
  outline: 2px solid #f59e0b;
  outline-offset: 4px;
  border-radius: 8px;
}
.knowhow-comment-composer {
  position: relative;
  z-index: 5;
  background: var(--bg3, #f4f5f8);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}
.knowhow-comment-composer.is-busy {
  opacity: 0.7;
}
.knowhow-comment-load-more-wrap {
  text-align: center;
  margin: 12px 0 4px;
}
.knowhow-comment-composer__input {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  background: var(--surface, #fff);
}
.knowhow-comment-composer__input:focus {
  outline: 2px solid color-mix(in srgb, var(--accent, #3b82f6) 35%, transparent);
  border-color: var(--accent, #3b82f6);
}
.knowhow-comment-composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.knowhow-comment-composer__hint {
  font-size: 0.8rem;
  color: #b45309;
}
.knowhow-comment-composer__hint[hidden] {
  display: none !important;
}
.knowhow-comment-empty {
  text-align: center;
  padding: 20px 12px;
  font-size: 0.9rem;
}
.knowhow-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.knowhow-comment-thread {
  list-style: none;
}
.knowhow-comment-item {
  display: flex;
  gap: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.knowhow-comment-item--reply {
  margin-top: 8px;
  background: var(--bg3, #f8fafc);
}
.knowhow-comment-item--resolved {
  border-color: #86efac;
  background: color-mix(in srgb, #d1fae5 25%, var(--surface, #fff));
}
.knowhow-comment-item__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent, #3b82f6) 18%, var(--bg3, #e2e8f0));
  color: var(--accent, #2563eb);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.knowhow-comment-item__main {
  flex: 1;
  min-width: 0;
}
.knowhow-comment-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 6px;
}
.knowhow-comment-item__author {
  font-weight: 600;
  font-size: 0.9rem;
}
.knowhow-comment-item__time {
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}
.knowhow-comment-resolved-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: #d1fae5;
  color: #065f46;
}
.knowhow-comment-item__body {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 10px;
}
.knowhow-comment-item__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.knowhow-comment-item__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.knowhow-comment-item__actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.knowhow-react-wrap {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.knowhow-reaction-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.knowhow-reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 999px;
  background: var(--surface, #fff);
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: default;
}
.knowhow-reaction-chip__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.knowhow-react-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 50%;
  background: var(--surface, #fff);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.knowhow-react-btn:hover {
  border-color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 8%, var(--surface, #fff));
}
.knowhow-reaction-popup {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 30;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
}
.knowhow-reaction-popup[hidden] {
  display: none !important;
}
.knowhow-reaction-popup__opt {
  border: 1px solid transparent;
  background: var(--bg3, #f8fafc);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.knowhow-reaction-popup__opt:hover {
  border-color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 10%, var(--surface, #fff));
}
.knowhow-reaction-popup__opt.is-active {
  border-color: var(--accent, #3b82f6);
  background: color-mix(in srgb, var(--accent, #3b82f6) 16%, var(--surface, #fff));
}
.knowhow-comment-menu-wrap {
  position: relative;
}
.knowhow-comment-menu-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #64748b);
  border-radius: 6px;
}
.knowhow-comment-menu-btn:hover {
  background: var(--bg3, #f1f5f9);
  color: var(--text, #0f172a);
}
.knowhow-comment-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  min-width: 180px;
  margin-top: 4px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  padding: 4px 0;
}
.knowhow-comment-menu[hidden] {
  display: none !important;
}
.knowhow-comment-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text, #0f172a);
}
.knowhow-comment-menu__item:hover {
  background: var(--bg3, #f1f5f9);
}
.knowhow-comment-replies {
  margin: 0 0 0 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.knowhow-reply-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #e2e8f0);
}
.knowhow-review-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}
.knowhow-review-badge--needs {
  background: #fef3c7;
  color: #92400e;
}
.knowhow-review-badge--resolved {
  background: #d1fae5;
  color: #065f46;
}
.knowhow-rating-cell {
  font-size: 0.9rem;
  white-space: nowrap;
}