:root {
  color-scheme: light;
  --ink: #566a7f;
  --heading: #384551;
  --muted: #8592a3;
  --line: #d9dee3;
  --surface: #ffffff;
  --canvas: #f5f5f9;
  --nav: #ffffff;
  --nav-muted: #a1acb8;
  --primary: #696cff;
  --primary-dark: #5f61e6;
  --primary-soft: #f0f0ff;
  --success: #13795b;
  --danger: #b42318;
  --shadow-soft: 0 0.125rem 0.375rem rgba(67, 89, 113, .12);
  --shadow-card: 0 0.25rem 1rem rgba(67, 89, 113, .10);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
h1, h2, h3, h4, h5, h6, strong { color: var(--heading); }
a { color: var(--primary); }
.app-layout { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); transition: grid-template-columns .18s ease; }
.app-layout.sidebar-collapsed { grid-template-columns: 84px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; width: 260px; height: 100vh; padding: 18px 14px; background: var(--nav); color: var(--ink); overflow-y: auto; z-index: 1030; box-shadow: var(--shadow-soft); scrollbar-width: none; transition: width .18s ease, box-shadow .18s ease; }
.app-layout.sidebar-collapsed .sidebar { width: 84px; }
.app-layout.sidebar-collapsed.sidebar-hovered .sidebar { width: 260px; box-shadow: 0 .5rem 1.5rem rgba(67, 89, 113, .16); }
.sidebar:hover { scrollbar-width: thin; scrollbar-color: #667085 transparent; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; }
.sidebar:hover::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { border: 2px solid var(--nav); border-radius: 8px; background: #cfd6df; }
.app-brand-row { position: sticky; top: 0; display: flex; align-items: center; min-height: 60px; margin: -18px -6px 14px; padding: 18px 14px 10px; background: var(--nav); z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--heading); text-decoration: none; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; border: 1px solid #eef1f5; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(67,89,113,.12); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.brand small { color: var(--muted); font-size: .75rem; }
.app-layout.sidebar-collapsed:not(.sidebar-hovered) .brand span:last-child { opacity: 0; pointer-events: none; }
.layout-menu-toggle { position: absolute; top: 39px; right: 0px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 5px solid var(--canvas); border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 .125rem .375rem rgba(105,108,255,.34); transform: translateY(-50%); transition: background .16s ease, transform .16s ease, opacity .16s ease; z-index: 6; }
.layout-menu-toggle:hover { background: var(--primary-dark); }
.layout-menu-toggle svg { width: 16px; height: 16px; stroke-width: 3; }
.app-layout.sidebar-collapsed:not(.sidebar-hovered) .layout-menu-toggle { display: none; }
.app-layout.sidebar-collapsed .layout-menu-toggle svg { transform: rotate(180deg); }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 9px 12px; border-radius: 8px; color: #697a8d; text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.side-nav a:hover { background: #f5f5f9; color: var(--primary); }
.side-nav a.active { background: var(--primary); color: white; box-shadow: 0 .125rem .375rem rgba(105,108,255,.34); }
.side-nav svg { width: 19px; height: 19px; flex: 0 0 auto; }
.side-nav a span, .nav-section { transition: opacity .12s ease; }
.app-layout.sidebar-collapsed:not(.sidebar-hovered) .side-nav a { justify-content: center; padding-right: 0; padding-left: 0; }
.app-layout.sidebar-collapsed:not(.sidebar-hovered) .side-nav a span,
.app-layout.sidebar-collapsed:not(.sidebar-hovered) .nav-section { width: 0; height: 0; margin: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.nav-section { margin: 18px 12px 7px; color: var(--nav-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.main-column { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 1020; min-height: 68px; display: flex; align-items: center; gap: 14px; margin: 12px 24px 0; padding: 0 18px; border: 1px solid rgba(67,89,113,.08); border-radius: 8px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); }
.topbar-context { min-width: 0; margin-right: auto; }
.topbar-search-trigger { display: inline-flex; align-items: center; gap: 10px; width: min(460px, 42vw); min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #697a8d; font-weight: 500; text-align: left; transition: background .16s ease, color .16s ease; }
.topbar-search-trigger:hover, .topbar-search-trigger:focus { outline: 0; background: #f5f5f9; color: var(--primary); }
.topbar-search-trigger svg { width: 19px; height: 19px; flex: 0 0 auto; }
.topbar-search-trigger span { flex: 0 0 auto; }
.topbar-search-trigger kbd { margin-left: 2px; padding: 3px 8px; border: 1px solid #d9dee3; border-radius: 6px; background: #fff; color: #a1acb8; font-size: .72rem; font-weight: 700; box-shadow: none; }
.user-menu { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.user-menu form { margin: 0; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e7e7ff; color: var(--primary); font-weight: 700; }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #475467; }
.icon-button:hover { background: var(--primary-soft); color: var(--primary); }
.icon-button svg { width: 19px; }
.content { width: min(1440px, 100%); margin: 0 auto; padding: 24px 28px 28px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-header h1 { margin: 0; color: var(--heading); font-size: 1.55rem; font-weight: 700; }
.page-header p { margin: 5px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.swal-actions-spaced { gap: 14px; }
.panel { border: 0; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 220px)) auto; gap: 12px; padding: 18px; border-bottom: 1px solid #edf0f3; background: white; border-radius: 10px 10px 0 0; }
.panel > .table-responsive {
  position: relative;
  max-height: calc(100vh - 280px);
  overflow: auto;
  scrollbar-width: none;
}
.table-responsive:hover {
  scrollbar-width: thin;
  scrollbar-color: #98a2b3 transparent;
}
.table-responsive::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.table-responsive:hover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
  background: transparent;
}
.table-responsive::-webkit-scrollbar-thumb {
  border: 2px solid white;
  border-radius: 8px;
  background: #98a2b3;
}
.table { margin-bottom: 0; }
.table thead th { position: sticky; top: 0; z-index: 3; padding: 12px 18px; border-bottom: 1px solid #edf0f3; background: #fcfcfd; color: #697a8d; font-size: .75rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.table td { padding: 14px 18px; border-color: #edf0f3; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: #fafafe; }
.table .actions { width: 112px; text-align: right; white-space: nowrap; }
.table .actions form { display: inline; }
.question-bank-table { min-width: 980px; }
.question-bank-table .question-col { min-width: 320px; }
.question-bank-table .options-col { min-width: 420px; }
.question-content { min-width: 300px; font-weight: 650; line-height: 1.45; }
.answer-list { display: grid; gap: 7px; min-width: 360px; }
.answer-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 8px 10px; border: 1px solid #e8edf2; border-radius: 6px; background: #fbfcfd; }
.answer-item.is-correct { border-color: #a7d7c5; background: #eefbf5; }
.answer-label { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #eef2f6; color: #344054; font-size: .78rem; font-weight: 800; }
.answer-item.is-correct .answer-label { background: #d1f5df; color: #05603a; }
.answer-text { min-width: 0; line-height: 1.35; }
.answer-correct { align-self: center; padding: 3px 8px; border-radius: 999px; background: #d1f5df; color: #05603a; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.correct-answer-form { display: grid; grid-template-columns: minmax(96px, 130px) 34px; align-items: start; gap: 8px; min-width: 178px; }
.correct-answer-form .correct-answer-error { grid-column: 1 / -1; }
.correct-answer-form [data-save-icon="saving"] { animation: spin .9s linear infinite; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; font-weight: 600; box-shadow: none; }
.btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); box-shadow: 0 .125rem .375rem rgba(105,108,255,.34); }
.btn-outline-secondary { --bs-btn-color: #697a8d; --bs-btn-border-color: #d9dee3; --bs-btn-hover-bg: #f5f5f9; --bs-btn-hover-border-color: #cfd6df; --bs-btn-hover-color: #566a7f; }
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #d9dee3; --bs-btn-hover-bg: #f5f5f9; --bs-btn-hover-border-color: #cfd6df; --bs-btn-color: #697a8d; }
.btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; }
.btn svg { width: 17px; height: 17px; }
.status { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 4px 10px; border-radius: 999px; background: #f1f2f6; color: #697a8d; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #a8b1bd; }
.status.active { background: #e8fadf; color: #2b7a0b; }
.status.active::before { background: #71dd37; }
.empty-state { padding: 64px 20px; text-align: center; color: var(--muted); }
.empty-state svg { width: 38px; height: 38px; margin-bottom: 10px; }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid #edf0f3; color: var(--muted); font-size: .87rem; }
.form-control, .form-select { border-color: #d9dee3; border-radius: 8px; color: var(--heading); box-shadow: none; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(105,108,255,.14); }
.directory-panel { overflow: visible; }
.directory-filter { position: relative; z-index: 20; align-items: center; }
.company-filter { grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) auto; }
.employee-filter { grid-template-columns: minmax(300px, 1fr) minmax(220px, 320px) minmax(180px, 240px) auto; }
.directory-table th, .directory-table td { vertical-align: middle; }
.company-table { min-width: 940px; }
.employee-table { min-width: 1080px; }
.entity-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.entity-main strong { display: block; overflow: hidden; color: var(--heading); text-overflow: ellipsis; white-space: nowrap; }
.entity-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; background: #e7e7ff; color: var(--primary); font-size: .86rem; font-weight: 800; }
.entity-avatar svg { width: 18px; height: 18px; }
.entity-code { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 9px; border-radius: 6px; background: #f5f5f9; color: #697a8d; font-size: .78rem; font-weight: 800; }
.command-search-overlay { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: start center; padding: 8vh 18px 24px; background: rgba(67,89,113,.42); backdrop-filter: blur(2px); }
.command-search-overlay[hidden] { display: none; }
.command-search-dialog { width: min(760px, 100%); max-height: min(720px, 84vh); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 1rem 3rem rgba(67,89,113,.22); }
.command-search-inputbar { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: 0 20px; border-bottom: 1px solid #edf0f3; }
.command-search-inputbar svg { width: 20px; height: 20px; color: #a1acb8; }
.command-search-inputbar input { width: 100%; border: 0; outline: 0; color: var(--heading); font-size: 1rem; }
.command-search-inputbar input::placeholder { color: #a1acb8; }
.command-search-inputbar kbd { padding: 4px 9px; border: 1px solid #d9dee3; border-radius: 6px; background: #f5f5f9; color: #697a8d; font-size: .72rem; box-shadow: none; }
.command-search-body { max-height: calc(min(720px, 84vh) - 64px); overflow: auto; padding: 14px 12px 16px; scrollbar-width: thin; scrollbar-color: #cfd6df transparent; }
.command-search-group { padding: 6px 0 10px; }
.command-search-group-title { padding: 6px 12px; color: #a1acb8; font-size: .72rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.command-search-list { display: grid; gap: 2px; }
.command-search-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 8px; color: #566a7f; text-decoration: none; transition: background .14s ease, color .14s ease; }
.command-search-item:hover, .command-search-item:focus { outline: 0; background: #f5f5ff; color: var(--primary); }
.command-search-item-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #f0f0ff; color: var(--primary); }
.command-search-item-icon svg { width: 18px; height: 18px; }
.command-search-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.command-search-item small { color: #a1acb8; font-size: .74rem; }
.command-search-item kbd { padding: 2px 7px; border: 1px solid #edf0f3; border-radius: 6px; background: #fff; color: #a1acb8; font-size: .68rem; box-shadow: none; }
.command-search-empty { display: grid; place-items: center; gap: 8px; padding: 52px 20px; color: var(--muted); text-align: center; }
.command-search-empty[hidden] { display: none; }
.command-search-empty svg { width: 34px; height: 34px; color: #c4cdd5; }
.command-search-empty strong { font-size: .98rem; }
.command-search-empty span { max-width: 360px; font-size: .84rem; }
.form-panel { width: 100%; max-width: none; padding: 24px; }
.form-section { margin-bottom: 26px; }
.form-section h2 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.required::after { content: " *"; color: var(--danger); }
.field-validation-error, .validation-summary-errors { color: var(--danger); font-size: .84rem; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 18px; border-top: 1px solid var(--line); }
.tree-list { padding: 8px 0; }
.tree-row { display: grid; grid-template-columns: minmax(260px, 1fr) 110px 110px; align-items: center; min-height: 52px; padding: 8px 16px 8px calc(16px + var(--depth, 0) * 26px); border-bottom: 1px solid #f0f2f5; }
.tree-row:last-child { border-bottom: 0; }
.tree-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tree-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-code { color: var(--muted); font-size: .8rem; }
.drop-zone { padding: 42px 24px; border: 1px dashed #98a2b3; border-radius: 8px; text-align: center; background: #fafbfc; }
.permission-grid, .scope-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px; border-bottom: 1px solid #f0f2f5; }
.role-permission-section { display: grid; gap: 14px; }
.role-permission-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.role-permission-title h2 { margin: 0; padding: 0; border: 0; }
.role-permission-title p { margin: 4px 0 0; color: var(--muted); font-size: .82rem; }
.role-permission-title > span { flex: 0 0 auto; padding: 5px 9px; border-radius: 6px; background: #f0f0ff; color: var(--primary); font-size: .78rem; font-weight: 800; }
.role-permission-accordion { display: grid; gap: 10px; }
.role-permission-group { overflow: hidden; border: 1px solid #e7ebf0; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.03); }
.role-permission-toggle { display: grid; grid-template-columns: 32px minmax(0, 1fr) max-content; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 15px; border: 0; background: #fbfcfd; color: var(--ink); text-align: left; }
.role-permission-toggle:hover { background: #f7f8ff; }
.role-permission-toggle:focus-visible { outline: 2px solid rgba(105,108,255,.35); outline-offset: -2px; }
.role-permission-toggle-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #d9dee3; border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.05rem; font-weight: 900; line-height: 1; }
.role-permission-toggle-icon::before { content: "+"; }
.role-permission-group.is-expanded .role-permission-toggle-icon::before { content: "-"; }
.role-permission-module { display: grid; gap: 2px; min-width: 0; }
.role-permission-module strong { overflow: hidden; color: #101828; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.role-permission-module small, .role-permission-count { color: var(--muted); font-size: .74rem; font-weight: 700; }
.role-permission-count { padding: 4px 8px; border-radius: 6px; background: #f2f4f7; white-space: nowrap; }
.role-permission-body { padding: 10px 15px 14px; border-top: 1px solid #edf0f3; }
.role-permission-body .check-row { border-radius: 7px; border-bottom: 0; background: #fff; }
.role-permission-body .check-row:hover { background: #f8fafc; }
.role-permission-body .check-row span { display: grid; gap: 2px; min-width: 0; }
.role-permission-body .check-row small { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.security-scope-tree { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #edf0f3; border-radius: 8px; background: #fff; }
.security-scope-node { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, max-content); gap: 14px; align-items: center; min-height: 64px; padding: 10px 14px 10px calc(14px + var(--scope-depth, 0) * 28px); border-bottom: 1px solid #edf0f3; background: linear-gradient(90deg, rgba(105,108,255,.035), transparent 44px); }
.security-scope-node:last-child { border-bottom: 0; }
.security-scope-main { display: flex; align-items: center; gap: 11px; min-width: 0; margin: 0; cursor: pointer; }
.security-scope-branch { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #e5e7ff; border-radius: 8px; background: #f7f7ff; color: var(--primary); }
.security-scope-branch svg { width: 18px; height: 18px; }
.security-scope-copy { display: grid; gap: 3px; min-width: 0; }
.security-scope-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.security-scope-copy > span { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .76rem; }
.security-scope-descendants { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin: 0; color: #697a8d; font-size: .84rem; font-weight: 600; cursor: pointer; }
.security-scope-node[data-org-depth="0"] .security-scope-copy strong { color: #1f2d3d; }
.security-scope-node[data-org-depth="1"] .security-scope-copy strong { color: var(--primary-dark); }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
.login-panel { display: flex; flex-direction: column; justify-content: center; padding: 56px; background: white; }
.login-panel h1 { margin: 32px 0 8px; font-size: 1.8rem; }
.login-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: #123047; color: white; }
.login-visual::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.15); }
.login-visual-content { position: relative; max-width: 560px; padding: 40px; }
.login-visual h2 { font-size: 2.4rem; }
.login-hero-title { color: #ffffff; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.22); }
.access-denied-shell { min-height: calc(100vh - 92px); display: grid; place-items: center; padding: 32px 20px; }
.access-denied-panel { width: min(460px, 100%); padding: 48px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-card); text-align: center; }
.access-denied-panel h1 { margin: 24px 0 10px; font-size: 1.85rem; }
.access-denied-panel p { margin: 0 auto; max-width: 340px; line-height: 1.55; }
.level-swatch { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 7px; color: white; font-size: 1.15rem; font-weight: 800; }
.requirement-block { border-bottom: 1px solid var(--line); }
.requirement-block:last-child { border-bottom: 0; }
.requirement-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #fbfcfd; }
.assessment-filter { grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto; }
.assessment-cycle-list { display: flex; flex-direction: column; }
.assessment-cycle-row { display: grid; grid-template-columns: minmax(300px, 1.5fr) 90px 90px minmax(180px, .8fr) 42px; gap: 18px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); }
.assessment-cycle-row:last-child { border-bottom: 0; }
.cycle-main { min-width: 0; }
.cycle-metric { display: flex; flex-direction: column; }
.cycle-metric strong { font-size: 1.2rem; }
.cycle-metric span, .cycle-progress span { color: var(--muted); font-size: .75rem; }
.progress { height: 7px; background: #e8edf2; }
.progress-bar { background: #1d8a78; }
.assessment-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 4px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.status-1, .employee-status-1 { background: #f2f4f7; color: #475467; }
.status-2, .employee-status-2 { background: #fff3cd; color: #7a4b00; }
.status-3, .employee-status-3 { background: #dff4ff; color: #075985; }
.status-4, .employee-status-4 { background: #e8e3ff; color: #5b21b6; }
.status-5, .employee-status-5 { background: #dff5eb; color: #067647; }
.status-6, .employee-status-6 { background: #e4e7ec; color: #344054; }
.employee-status-7 { background: #fee4e2; color: #b42318; }
.assessment-wizard { max-width: 1100px; border: 1px solid var(--line); border-radius: 8px; background: white; overflow: hidden; }
.assessment-step { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 24px; border-bottom: 1px solid var(--line); }
.step-marker { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #d9eff2; color: #155e75; font-weight: 800; }
.step-content h2 { margin: 5px 0 18px; font-size: 1rem; }
.assessment-wizard .form-actions { padding: 18px 24px; }
.assessment-callout { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; padding: 14px; border-left: 4px solid #d97706; background: #fffbeb; }
.assessment-callout svg { width: 20px; flex: 0 0 auto; }
.assessment-callout div { display: flex; flex-direction: column; }
.assessment-callout span { color: var(--muted); font-size: .86rem; }
.quick-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quick-options label { position: relative; }
.quick-options input { position: absolute; opacity: 0; pointer-events: none; }
.quick-options span { display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; min-height: 82px; padding: 16px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }
.quick-options svg { grid-row: 1 / 3; width: 22px; color: var(--primary); }
.quick-options small { color: var(--muted); }
.quick-options input:checked + span { border-color: var(--primary); background: #f0fafb; box-shadow: inset 0 0 0 1px var(--primary); }
.assessment-summary-strip { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.assessment-stat-card { --stat-color: #1570ef; --stat-soft: #eaf2ff; position: relative; display: flex; flex-direction: column; min-height: 132px; padding: 16px; overflow: hidden; border: 1px solid #e7ebf0; border-radius: 8px; background: white; box-shadow: 0 3px 12px rgba(16,24,40,.06); }
.assessment-stat-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--stat-color); }
.assessment-stat-value { display: flex; align-items: center; gap: 12px; }
.assessment-stat-value strong { color: #344054; font-size: 1.45rem; line-height: 1; }
.assessment-stat-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: var(--stat-soft); color: var(--stat-color); }
.assessment-stat-icon svg { width: 19px; height: 19px; }
.assessment-stat-label { margin-top: 11px; color: #475467; font-size: .78rem; font-weight: 700; }
.assessment-stat-card small { margin-top: 4px; color: var(--muted); font-size: .71rem; }
.assessment-stat-card.stat-draft { --stat-color: #d97706; --stat-soft: #fff3d6; }
.assessment-stat-card.stat-submitted { --stat-color: #7f56d9; --stat-soft: #f1ebff; }
.assessment-stat-card.stat-approved { --stat-color: #079455; --stat-soft: #e4f8ed; }
.assessment-stat-card.stat-progress { --stat-color: #0891b2; --stat-soft: #e0f7fb; }
.assessment-stat-progress { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 6px; background: #e8edf2; }
.assessment-stat-progress span { display: block; height: 100%; border-radius: inherit; background: var(--stat-color); }
.assessor-inline-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(28px, auto); align-items: center; gap: 7px; min-width: 300px; }
.assessor-save-state { display: inline-flex; align-items: center; gap: 5px; min-width: 28px; color: var(--muted); }
.assessor-save-state [data-assessor-icon] { display: none; width: 17px; height: 17px; flex: 0 0 auto; }
.assessor-save-state small { display: none; max-width: 150px; color: var(--danger); font-size: .69rem; line-height: 1.2; overflow-wrap: anywhere; }
.assessor-inline-form[data-save-state="saving"] [data-assessor-icon="saving"] { display: block; animation: availability-spin .75s linear infinite; }
.assessor-inline-form[data-save-state="saved"] [data-assessor-icon="saved"] { display: block; color: var(--success); }
.assessor-inline-form[data-save-state="error"] { grid-template-columns: minmax(220px, 1fr) minmax(150px, auto); }
.assessor-inline-form[data-save-state="error"] [data-assessor-icon="error"],
.assessor-inline-form[data-save-state="error"] .assessor-save-state small { display: block; }
.assessor-inline-form[data-save-state="error"] .assessor-save-state { color: var(--danger); }
.approval-list { display: flex; flex-direction: column; }
.approval-row { display: grid; grid-template-columns: minmax(240px, 1fr) repeat(3, 72px) 36px minmax(360px, 1.2fr); gap: 14px; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.approval-score { display: flex; flex-direction: column; }
.approval-score span { color: var(--muted); font-size: .72rem; }
.approval-actions { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 7px; }
.score-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.score-toolbar h1 { margin: 5px 0 0; font-size: 1.55rem; }
.score-toolbar p { margin: 4px 0 0; color: var(--muted); }
.back-link { display: inline-flex; gap: 5px; align-items: center; font-size: .82rem; text-decoration: none; }
.back-link svg { width: 15px; }
.score-kpis { display: grid; grid-template-columns: repeat(4, 92px); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--line); }
.score-kpis div { display: flex; flex-direction: column; padding: 9px 12px; background: white; }
.score-kpis span { color: var(--muted); font-size: .68rem; }
.score-kpis strong { font-size: 1.05rem; }
.score-matrix-panel { overflow: hidden; }
.score-matrix-help { display: flex; gap: 22px; align-items: center; min-height: 46px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #f8fafc; color: #475467; font-size: .78rem; }
.score-matrix-help span { display: inline-flex; align-items: center; gap: 6px; }
.score-matrix-help svg { width: 16px; }
.score-matrix-panel > .table-responsive { max-height: calc(100vh - 260px); }
.score-matrix { min-width: 1260px; }
.score-matrix th, .score-matrix td { vertical-align: middle; }
.score-matrix .skill-sticky { position: sticky; left: 0; z-index: 2; width: 260px; min-width: 260px; background: white; box-shadow: 1px 0 0 var(--line); }
.score-matrix thead .skill-sticky { z-index: 5; background: #f8fafc; }
.level-pill { display: inline-grid; place-items: center; min-width: 56px; min-height: 28px; padding: 4px 8px; border-radius: 5px; font-size: .75rem; font-weight: 800; white-space: nowrap; }
.level-0 { background: #e4e7ec; color: #475467; }
.level-1 { background: #fee4e2; color: #b42318; }
.level-2 { background: #fef0c7; color: #93370d; }
.level-3 { background: #d1fadf; color: #067647; }
.level-4 { background: #dbeafe; color: #1d4ed8; }
.component-inputs { display: flex; gap: 10px; min-width: 340px; }
.component-score { min-width: 150px; padding: 8px 10px; border: 1px solid #eef2f6; border-radius: 6px; background: #fbfcfd; }
.component-title { display: inline-flex; align-items: baseline; justify-content: flex-start; gap: 4px; margin-bottom: 6px; color: #475467; font-size: .76rem; white-space: nowrap; }
.component-title strong { font-size: .78rem; font-weight: 700; }
.component-score small { color: var(--muted); }
.score-input-wrap { display: flex; align-items: center; gap: 5px; }
.score-input { width: 82px; font-size: 1rem; font-weight: 700; text-align: right; }
.score-result { display: grid; grid-template-columns: 56px 70px; align-items: center; gap: 4px 7px; min-width: 140px; }
.score-result > strong { font-size: 1rem; }
.score-result small { grid-column: 1 / 3; }
.score-comment { min-width: 190px; resize: vertical; }
.score-action-bar { position: sticky; bottom: 0; z-index: 1010; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.98); box-shadow: 0 -6px 18px rgba(16,24,40,.08); }
.score-action-bar > div { display: flex; flex-direction: column; margin-right: auto; }
.score-action-bar span { color: var(--muted); font-size: .76rem; }
.assessment-history { padding: 18px; }
.assessment-history h2 { font-size: 1rem; }
.assessment-history > div { display: grid; grid-template-columns: 12px 120px minmax(0, 1fr) 150px; gap: 8px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: .84rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.analytics-filter { grid-template-columns: minmax(240px, 1fr) minmax(170px, 260px) minmax(170px, 260px) minmax(88px, 120px) auto; margin-bottom: 18px; }
.analytics-kpis { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 14px; margin-bottom: 18px; }
.analytics-kpi-card { --kpi-color: #1570ef; --kpi-soft: #eaf2ff; position: relative; display: flex; flex-direction: column; min-height: 132px; padding: 16px; overflow: hidden; border: 1px solid #e7ebf0; border-radius: 8px; background: white; box-shadow: 0 3px 12px rgba(16,24,40,.06); }
.analytics-kpi-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--kpi-color); }
.analytics-kpi-value { display: flex; align-items: center; gap: 11px; min-width: 0; }
.analytics-kpi-value strong { min-width: 0; color: #344054; font-size: 1.35rem; line-height: 1; overflow-wrap: anywhere; }
.analytics-kpi-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 6px; background: var(--kpi-soft); color: var(--kpi-color); }
.analytics-kpi-icon svg { width: 19px; height: 19px; }
.analytics-kpi-label { margin-top: 11px; color: #475467; font-size: .78rem; font-weight: 700; }
.analytics-kpi-card small { margin-top: 4px; color: var(--muted); font-size: .71rem; }
.analytics-kpi-card.kpi-compliance { --kpi-color: #079455; --kpi-soft: #e4f8ed; }
.analytics-kpi-card.kpi-autonomy { --kpi-color: #0891b2; --kpi-soft: #e0f7fb; }
.analytics-kpi-card.kpi-skills { --kpi-color: #7f56d9; --kpi-soft: #f1ebff; }
.analytics-kpi-card.kpi-multi { --kpi-color: #d97706; --kpi-soft: #fff3d6; }
.analytics-kpi-card.kpi-risk { --kpi-color: #d92d20; --kpi-soft: #fee4e2; }
.analytics-kpi-card.employee360-required { --kpi-color: #1570ef; --kpi-soft: #eaf2ff; }
.analytics-kpi-card.training-planned { --kpi-color: #7f56d9; --kpi-soft: #f1ebff; }
.analytics-kpi-card.training-active { --kpi-color: #0891b2; --kpi-soft: #e0f7fb; }
.analytics-kpi-card.training-enrollment { --kpi-color: #d97706; --kpi-soft: #fff3d6; }
.analytics-kpi-card.training-completion { --kpi-color: #079455; --kpi-soft: #e4f8ed; }
.analytics-kpi-card.training-effectiveness { --kpi-color: #e11d48; --kpi-soft: #ffe4ea; }
.analytics-kpi-card.planning-available, .analytics-kpi-card.plan-proposed { --kpi-color: #079455; --kpi-soft: #e4f8ed; }
.analytics-kpi-card.planning-recommended, .analytics-kpi-card.plan-type { --kpi-color: #7f56d9; --kpi-soft: #f1ebff; }
.analytics-kpi-card.planning-ready, .analytics-kpi-card.plan-status { --kpi-color: #0891b2; --kpi-soft: #e0f7fb; }
.analytics-kpi-card.planning-shortage { --kpi-color: #667085; --kpi-soft: #f2f4f7; }
.analytics-kpi-card.planning-shortage.has-shortage { --kpi-color: #d92d20; --kpi-soft: #fee4e2; }
.analytics-kpi-card.planning-average { --kpi-color: #e11d48; --kpi-soft: #ffe4ea; }
.analytics-kpi-card.plan-demand { --kpi-color: #d97706; --kpi-soft: #fff3d6; }
.employee360-kpis { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.employee360-hero div { display: flex; flex-direction: column; padding: 15px 16px; background: white; }
.employee360-hero span { color: var(--muted); font-size: .74rem; text-transform: uppercase; }
.employee360-hero strong { font-size: 1.35rem; }
.analytics-grid, .employee360-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.analytics-panel { overflow: hidden; }
.analytics-panel.wide { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.panel-heading h2 { margin: 0; font-size: .98rem; }
.panel-heading a { font-size: .82rem; text-decoration: none; }
.analytics-list { display: flex; flex-direction: column; }
.analytics-list-row { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px; border-bottom: 1px solid #f0f2f5; color: inherit; text-decoration: none; }
.analytics-list-row:last-child { border-bottom: 0; }
.analytics-list-row span, .analytics-list-row small { color: var(--muted); }
.risk-badge { display: inline-flex; min-width: 56px; justify-content: center; padding: 4px 8px; border-radius: 5px; font-size: .76rem; font-weight: 800; }
.risk-0 { background: #fee4e2; color: #b42318; }
.risk-1 { background: #fef0c7; color: #93370d; }
.heatmap-panel { overflow: hidden; }
.heatmap-scroll { max-height: calc(100vh - 260px); overflow: auto; }
.heatmap-table { min-width: 1120px; width: max-content; border-collapse: separate; border-spacing: 0; }
.heatmap-table th, .heatmap-table td { min-width: 132px; height: 64px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; font-size: .8rem; }
.heatmap-table thead th { position: sticky; top: 0; z-index: 5; background: #f8fafc; color: #475467; }
.heatmap-table .skill-heading { min-width: 170px; width: 170px; vertical-align: top; text-align: left; }
.heatmap-table .skill-heading span { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.heatmap-table .skill-heading strong { display: block; margin-top: 3px; color: var(--ink); font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.heatmap-table th svg { width: 13px; color: var(--danger); }
.heatmap-table .employee-col { position: sticky; left: 0; z-index: 4; min-width: 240px; width: 240px; text-align: left; background: white; box-shadow: 1px 0 0 var(--line); }
.heatmap-table .org-col { position: sticky; left: 240px; z-index: 4; min-width: 180px; width: 180px; text-align: left; background: white; box-shadow: 1px 0 0 var(--line); }
.heatmap-table thead .employee-col, .heatmap-table thead .org-col { z-index: 6; background: #f8fafc; }
.heatmap-table .employee-col a { font-weight: 700; text-decoration: none; }
.heatmap-table .employee-col small { display: block; color: var(--muted); }
.heatmap-table td strong { display: block; font-size: .78rem; line-height: 1.2; }
.heatmap-table td span { display: block; margin-top: 3px; color: rgba(31,41,55,.68); font-size: .7rem; line-height: 1.2; }
.cell-none { background: #f8fafc; color: #98a2b3; }
.cell-empty { background: #fee4e2; color: #912018; }
.cell-gap { background: #fef0c7; color: #7a2e0e; }
.cell-ok { background: #d1fadf; color: #05603a; }
.employee360-hero { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--line); }
.profile-list { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; margin: 0; padding: 16px; }
.profile-list dt { color: var(--muted); font-weight: 600; }
.profile-list dd { margin: 0; }
.training-table-panel { overflow: hidden; }
.training-table-scroll { max-height: calc(100vh - 260px); overflow: auto; }
.training-table { width: max-content; min-width: 1440px; table-layout: fixed; }
.training-table th, .training-table td { white-space: normal; overflow-wrap: anywhere; }
.training-table .col-employee { width: 260px; min-width: 260px; }
.training-table .col-skill { width: 360px; min-width: 360px; }
.training-table .col-course { width: 340px; min-width: 340px; }
.training-table .col-level { width: 210px; min-width: 210px; }
.training-table .col-level-short { width: 120px; min-width: 120px; }
.training-table .col-priority, .training-table .col-date, .training-table .col-status, .training-table .col-improve, .training-table .col-effect, .training-table .col-assessment { width: 140px; min-width: 140px; }
.training-table .col-update { width: 520px; min-width: 520px; }
.training-needs-table { min-width: 1920px; }
.training-results-table { min-width: 1980px; }
.training-results-table .col-employee { position: sticky; left: 0; z-index: 4; background: white; box-shadow: 1px 0 0 var(--line); }
.training-results-table thead .col-employee { z-index: 6; background: #f8fafc; }
.training-results-table .col-update { width: 620px; min-width: 620px; }
.training-inline-form { display: grid; align-items: center; gap: 8px; min-width: 0; }
.training-need-update { grid-template-columns: 130px 170px 142px 34px; }
.training-result-update { grid-template-columns: 150px 150px 250px 34px; }
.training-inline-form .form-select, .training-inline-form .form-control { min-width: 0; }
.training-ready-form { display: grid; gap: 5px; min-width: 148px; }
.training-ready-button { justify-content: center; white-space: nowrap; }
.training-ready-button[disabled] { opacity: .72; }
.training-ready-reason { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.training-ready-row { background: #f6fef9; }
.training-results-table { min-width: 1360px; }
.training-results-table .col-ready { min-width: 160px; }
.training-need-update .inline-save-error { grid-column: 1 / -1; color: var(--danger); font-size: .72rem; line-height: 1.25; }
.training-need-update [data-save-state="saving"] { color: var(--primary); cursor: wait; }
.training-need-update [data-save-state="saved"] { border-color: #86d3a3; background: #ecfdf3; color: #067647; }
.training-need-update [data-save-state="error"] { border-color: #fda29b; background: #fff1f0; color: var(--danger); }
.training-need-update [data-save-icon="saving"]:not([hidden]) { animation: availability-spin .75s linear infinite; }
.training-result-update .inline-save-error { grid-column: 1 / -1; color: var(--danger); font-size: .72rem; line-height: 1.25; }
.training-result-update [data-save-state="saving"] { color: var(--primary); cursor: wait; }
.training-result-update [data-save-state="saved"] { border-color: #86d3a3; background: #ecfdf3; color: #067647; }
.training-result-update [data-save-state="error"] { border-color: #fda29b; background: #fff1f0; color: var(--danger); }
.training-result-update [data-save-icon="saving"]:not([hidden]) { animation: availability-spin .75s linear infinite; }
.plan-item-status-form { min-width: 150px; }
.plan-item-status-message { color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.2; }
.plan-item-status-form[data-save-state="saving"] .plan-item-status-message { color: var(--primary); }
.plan-item-status-form[data-save-state="saved"] .plan-item-status-message { color: var(--success); }
.plan-item-status-form[data-save-state="error"] .plan-item-status-message { color: var(--danger); }
.actions [data-save-state="saving"] { color: var(--primary); cursor: wait; }
.actions [data-save-state="saved"] { border-color: #86d3a3; background: #ecfdf3; color: #067647; }
.actions [data-save-state="error"] { border-color: #fda29b; background: #fff1f0; color: var(--danger); }
.training-needs-filter { align-items: end; }
.searchable-select { position: relative; min-width: 0; }
.searchable-select-toggle { width: 100%; min-height: 38px; overflow: hidden; color: var(--ink); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.searchable-select-menu { position: absolute; top: calc(100% + 5px); left: 0; z-index: 1060; width: max(100%, 440px); max-width: min(520px, calc(100vw - 40px)); padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: white; box-shadow: 0 12px 30px rgba(16,24,40,.16); }
.select-search-box { position: relative; }
.select-search-box svg { position: absolute; top: 50%; left: 10px; z-index: 1; width: 15px; height: 15px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.select-search-box .form-control { padding-left: 32px; }
.searchable-select-options { max-height: 280px; margin-top: 7px; overflow-y: auto; scrollbar-width: thin; }
.searchable-select-option { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: .8rem; line-height: 1.3; text-align: left; overflow-wrap: anywhere; }
.searchable-select-option:hover, .searchable-select-option:focus { outline: 0; background: #eef7f8; }
.searchable-select-option[aria-selected="true"] { background: #e2f1f3; color: var(--primary-dark); font-weight: 700; }
.select-search-empty { display: block; margin-top: 7px; padding: 9px; border-radius: 5px; background: #fff7f6; color: var(--danger); font-size: .72rem; text-align: center; }
.select-search-empty[hidden] { display: none; }
.employee-filter .orgunit-tree-select { min-width: min(360px, 100%); }
.orgunit-tree-menu { width: max(100%, 520px); }
.orgunit-tree-option { padding-left: calc(10px + var(--org-depth, 0) * 18px); }
.orgunit-tree-option-main { display: grid; gap: 2px; }
.orgunit-tree-option-title { font-weight: 700; }
.orgunit-tree-option-meta { color: var(--muted); font-size: .72rem; font-weight: 500; }
.orgunit-tree-option[style*="--org-depth: 0"] .orgunit-tree-option-title { color: var(--ink); }
.orgunit-tree-option[style*="--org-depth: 1"] .orgunit-tree-option-title { color: var(--primary-dark); }
.level-flow { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.level-arrow { color: var(--muted); font-weight: 800; }
.readiness-selector { display: grid; grid-template-columns: minmax(420px, 760px) max-content; align-items: end; gap: 12px; margin-bottom: 18px; padding: 16px; }
.readiness-selector .btn { min-height: 38px; padding-right: 14px; padding-left: 14px; white-space: nowrap; }
.planning-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; }
.planning-dashboard-grid > *, .demand-grid > * { min-width: 0; }
.planning-wide { grid-column: 1 / -1; }
.planning-table-scroll { max-width: 100%; max-height: calc(100vh - 280px); overflow: auto; scrollbar-width: none; }
.planning-table-scroll:hover { scrollbar-width: thin; scrollbar-color: #98a2b3 transparent; }
.planning-table-scroll::-webkit-scrollbar { width: 0; height: 0; }
.planning-table-scroll:hover::-webkit-scrollbar { width: 8px; height: 8px; }
.planning-table-scroll::-webkit-scrollbar-track { background: transparent; }
.planning-table-scroll::-webkit-scrollbar-thumb { border: 2px solid white; border-radius: 8px; background: #98a2b3; }
.planning-table { width: max-content; min-width: 100%; table-layout: fixed; }
.planning-table th, .planning-table td { min-width: 112px; white-space: normal; overflow-wrap: anywhere; }
.planning-table th:first-child, .planning-table td:first-child { min-width: 190px; }
.planning-table .actions { min-width: 88px; width: 88px; }
.recommendation-table { min-width: 1240px; }
.recommendation-table th:nth-child(1), .recommendation-table td:nth-child(1) { min-width: 72px; width: 72px; text-align: center; }
.recommendation-table th:nth-child(2), .recommendation-table td:nth-child(2) { min-width: 220px; }
.recommendation-table th:nth-child(3), .recommendation-table td:nth-child(3) { min-width: 180px; }
.recommendation-table th:nth-child(4), .recommendation-table td:nth-child(4),
.recommendation-table th:nth-child(5), .recommendation-table td:nth-child(5) { min-width: 210px; }
.plans-table { min-width: 1320px; }
.plans-table th:first-child, .plans-table td:first-child { min-width: 260px; }
.plans-table th:nth-child(2), .plans-table td:nth-child(2) { min-width: 210px; }
.plans-table th:nth-child(3), .plans-table td:nth-child(3) { min-width: 230px; }
.table-primary-link { color: var(--ink); font-weight: 700; text-decoration: none; }
.table-primary-link:hover { color: var(--primary); }
.date-separator { margin: 0 7px; color: var(--muted); font-size: .78rem; }
.empty-row { padding: 38px 16px !important; color: var(--muted); text-align: center; }
.readiness-progress { display: grid; grid-template-columns: minmax(90px, 1fr) 42px; align-items: center; gap: 8px; min-width: 150px; }
.readiness-progress strong { font-size: .78rem; text-align: right; }
.rank-badge { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid #b9d9df; border-radius: 50%; background: #eef8f9; color: #155e75; font-size: .78rem; font-weight: 800; }
.readiness-score { display: inline-flex; justify-content: center; min-width: 64px; padding: 5px 8px; border-radius: 5px; font-size: .78rem; font-weight: 800; }
.score-0, .score-1 { background: #fee4e2; color: #b42318; }
.score-2 { background: #fef0c7; color: #93370d; }
.score-3 { background: #e0f2fe; color: #075985; }
.score-4, .score-5 { background: #d1fadf; color: #067647; }
.planning-filter { grid-template-columns: minmax(240px, 1fr) minmax(180px, 260px) minmax(160px, 220px) auto; }
.planning-form { max-width: 1060px; }
.planning-summary-strip { display: grid; grid-template-columns: repeat(5, minmax(160px, 1fr)); gap: 14px; margin-bottom: 16px; }
.planning-summary-strip .analytics-kpi-value strong { font-size: 1.02rem; line-height: 1.25; }
.demand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.demand-quick-form { display: grid; grid-template-columns: minmax(280px, 1fr) 110px minmax(180px, 260px) 38px; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: #fbfcfd; }
.skill-demand-form {
  grid-template-columns: minmax(260px, 1.35fr) minmax(220px, 1fr) minmax(150px, .7fr) 86px 42px 38px;
}
.critical-check { display: grid; place-items: center; width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: white; color: #d97706; cursor: pointer; }
.critical-check input { position: absolute; opacity: 0; }
.critical-check:has(input:checked) { border-color: #d97706; background: #fffbeb; }
.critical-check svg { width: 18px; }
.demand-table-scroll { max-height: 380px; }
.demand-table-scroll .planning-table { width: 100%; }
.position-demand-table { min-width: 900px; }
.position-demand-table th:nth-child(1), .position-demand-table td:nth-child(1) { width: 28%; }
.position-demand-table th:nth-child(2), .position-demand-table td:nth-child(2) { width: 24%; }
.position-demand-table th:nth-child(3), .position-demand-table td:nth-child(3) { width: 12%; }
.position-demand-table th:nth-child(4), .position-demand-table td:nth-child(4) { width: 16%; }
.position-demand-table th:nth-child(5), .position-demand-table td:nth-child(5) { width: 12%; }
.position-demand-table th:nth-child(6), .position-demand-table td:nth-child(6) { width: 8%; }
.skill-demand-table { min-width: 940px; }
.skill-demand-table th:nth-child(1), .skill-demand-table td:nth-child(1) { width: 30%; }
.skill-demand-table th:nth-child(2), .skill-demand-table td:nth-child(2) { width: 24%; }
.skill-demand-table th:nth-child(3), .skill-demand-table td:nth-child(3) { width: 18%; }
.skill-demand-table th:nth-child(4), .skill-demand-table td:nth-child(4) { width: 11%; }
.skill-demand-table th:nth-child(5), .skill-demand-table td:nth-child(5) { width: 10%; }
.skill-demand-table th:nth-child(6), .skill-demand-table td:nth-child(6) { width: 7%; }
.compact-number { width: 86px; }
.compact-shift { width: 110px; }
.compact-level { min-width: 150px; }
.skill-position-select { min-width: 190px; }
.recommendation-scroll { max-height: 560px; }
.potential-table { min-width: 1180px; }
.potential-table th:first-child, .potential-table td:first-child { min-width: 240px; }
.potential-table th:nth-child(2), .potential-table td:nth-child(2),
.potential-table th:nth-child(3), .potential-table td:nth-child(3) { min-width: 210px; }
.potential-table th:last-child, .potential-table td:last-child { min-width: 340px; }
.planning-scope-check { align-items: center; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfd; }
.planning-scope-check span { display: flex; flex-direction: column; }
.planning-scope-check small { color: var(--muted); }
.availability-create { position: relative; z-index: 1080; overflow: visible; }
.availability-quick-form { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(2, 150px) minmax(160px, .8fr) minmax(220px, 1fr) 42px; align-items: center; gap: 10px; padding: 16px; }
.availability-quick-form > .form-control,
.availability-quick-form > .form-select,
.availability-quick-form > .searchable-select > .searchable-select-toggle,
.availability-quick-form > .btn { height: 38px; min-height: 38px; }
.availability-quick-form > .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding-right: 10px; padding-left: 10px; white-space: nowrap; }
.availability-quick-form > .btn.btn-icon { padding: 0; }
.availability-filter { grid-template-columns: minmax(260px, 1fr) minmax(190px, 260px) auto; }
.availability-table { min-width: 1520px; }
.availability-table th:first-child, .availability-table td:first-child { min-width: 230px; }
.availability-table th:first-child, .availability-table td:first-child { position: sticky; left: 0; z-index: 4; background: white; box-shadow: 1px 0 0 var(--line); }
.availability-table thead th:first-child { z-index: 6; background: #f8fafc; }
.availability-table th:nth-child(2), .availability-table td:nth-child(2) { min-width: 250px; }
.availability-table th:nth-child(6), .availability-table td:nth-child(6) { min-width: 420px; }
.availability-table .availability-save-actions { min-width: 112px; width: 112px; }
.availability-save-form { display: flex; align-items: center; gap: 7px; }
.availability-save-button [data-save-icon] { display: none; }
.availability-save-button[data-save-state="idle"] [data-save-icon="idle"],
.availability-save-button[data-save-state="saving"] [data-save-icon="saving"],
.availability-save-button[data-save-state="saved"] [data-save-icon="saved"],
.availability-save-button[data-save-state="error"] [data-save-icon="error"] { display: block; }
.availability-save-button[data-save-state="saving"] { color: var(--primary); cursor: wait; }
.availability-save-button[data-save-state="saved"] { border-color: #86d3a3; background: #ecfdf3; color: #067647; }
.availability-save-button[data-save-state="error"] { border-color: #fda29b; background: #fff1f0; color: var(--danger); }
.availability-save-error { max-width: 62px; color: var(--danger); font-size: .68rem; line-height: 1.15; overflow-wrap: anywhere; }
.availability-save-button [data-save-icon="saving"]:not([hidden]) { animation: availability-spin .75s linear infinite; }
@keyframes availability-spin { to { transform: rotate(360deg); } }
.date-input { width: 145px; }
.availability-select { width: 170px; }
.note-input { width: 420px; }

.report-group { margin-bottom: 26px; }
.report-group > h2 { color: #0f172a; font-size: 1.02rem; font-weight: 800; margin: 0 0 12px; }
.report-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.report-card { align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 28px rgba(15, 23, 42, .06); color: #0f172a; display: grid; gap: 8px; min-height: 132px; padding: 18px; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.report-card:hover { border-color: #86c5da; box-shadow: 0 16px 34px rgba(15, 23, 42, .10); color: #0f172a; transform: translateY(-1px); }
.report-icon { align-items: center; background: #e0f2fe; border-radius: 8px; color: #0369a1; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.report-card strong { font-size: .98rem; }
.report-card small { color: #64748b; line-height: 1.45; }
.report-filter { align-items: center; display: flex; flex-wrap: nowrap; gap: 10px; margin-bottom: 16px; }
.report-filter > .form-control:first-child { flex: 1 1 340px; min-width: 260px; }
.report-filter > .form-select { flex: 0 1 280px; min-width: 210px; }
.report-filter > .report-date-input { flex: 0 0 160px; min-width: 150px; }
.report-filter .btn { white-space: nowrap; }
.report-filter-progress { grid-template-columns: minmax(320px, 1fr) 160px 160px auto; align-items: center; }
.report-filter-scores { grid-template-columns: minmax(320px, 1fr) minmax(240px, 360px) auto; align-items: center; }
.report-filter-pending { grid-template-columns: minmax(320px, 1fr) auto; align-items: center; }
.report-filter-internal { grid-template-columns: minmax(300px, 1fr) minmax(220px, .75fr) minmax(260px, .85fr) auto; align-items: center; }
.report-filter-training-needs { grid-template-columns: minmax(360px, 1fr) auto; align-items: center; }
.report-date-input { min-width: 150px; }
.report-table-wrap { max-height: 64vh; }
.report-table { min-width: 920px; }
.report-table th { background: #f8fafc; color: #334155; font-size: .76rem; letter-spacing: .02em; position: sticky; text-transform: uppercase; top: 0; z-index: 2; }
.org-unit-stack, .report-cell-stack { display: grid; gap: 3px; line-height: 1.25; }
.org-unit-stack strong, .report-cell-stack strong { color: #0f172a; font-size: .92rem; font-weight: 800; }
.org-unit-stack small, .report-cell-stack small { color: #64748b; font-size: .78rem; font-weight: 600; }
.trend-list { display: grid; gap: 10px; padding: 16px; }
.trend-list > div { align-items: center; border: 1px solid #edf0f3; border-radius: 8px; display: grid; gap: 6px 14px; grid-template-columns: minmax(0, 1fr) auto; padding: 13px 14px; background: #fff; }
.trend-list span { color: #334155; font-weight: 700; }
.trend-list strong { color: #0f172a; justify-self: end; white-space: nowrap; }
.trend-list small { color: #64748b; grid-column: 1 / -1; }

.chart-filter { grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) max-content; align-items: end; margin-bottom: 16px; border-radius: 10px; }
.chart-filter .btn { justify-self: end; width: max-content; min-width: 76px; padding-right: 14px; padding-left: 14px; white-space: nowrap; }
.chart-kpis { margin-bottom: 16px; }
.chart-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chart-panel { min-width: 0; overflow: hidden; }
.chart-panel.wide { grid-column: 1 / -1; }
.panel-heading span { color: #64748b; font-size: .82rem; font-weight: 700; }
.donut-layout { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px; }
.chart-donut { --chart-value: 0; position: relative; display: grid; place-items: center; width: 176px; height: 176px; border-radius: 50%; background: conic-gradient(#16a34a 0 calc(var(--chart-value) * 1%), #fee2e2 0 100%); box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.chart-donut::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #edf0f3; }
.chart-donut strong, .chart-donut span { position: relative; z-index: 1; }
.chart-donut strong { color: #0f172a; font-size: 1.8rem; line-height: 1; }
.chart-donut span { margin-top: -30px; color: #64748b; font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.chart-donut.readiness { background: conic-gradient(#7c3aed 0 calc(var(--chart-value) * 1%), #e0f2fe 0 100%); }
.chart-donut.risk { background: conic-gradient(#dc2626 0 calc(var(--chart-value) * 1%), #fef3c7 0 100%); }
.chart-donut.training { background: conic-gradient(#0891b2 0 calc(var(--chart-value) * 1%), #e0f2fe 0 100%); }
.chart-donut.resource { background: conic-gradient(#16a34a 0 calc(var(--chart-value) * 1%), #fef3c7 0 100%); }
.chart-legend { display: grid; gap: 10px; min-width: 0; }
.chart-legend-padded { padding: 18px; }
.chart-legend div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid #edf0f3; }
.chart-legend div:last-child { border-bottom: 0; }
.chart-legend strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.chart-legend em { color: #64748b; font-size: .78rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; }
.legend-dot.success { background: #16a34a; }
.legend-dot.danger, .legend-dot.ineligible { background: #ef4444; }
.legend-dot.autonomy, .legend-dot.potential { background: #0891b2; }
.legend-dot.recommended { background: #7c3aed; }
.legend-dot.risk-red { background: #dc2626; }
.legend-dot.risk-yellow { background: #f59e0b; }
.legend-dot.training-open { background: #696cff; }
.legend-dot.training-active { background: #0891b2; }
.legend-dot.planning-demand { background: #f59e0b; }
.legend-dot.planning-ready { background: #16a34a; }
.legend-dot.muted { background: #94a3b8; }
.level-bars { display: grid; gap: 13px; padding: 20px; }
.level-bar-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.level-bar-row span { color: #475467; font-size: .84rem; font-weight: 800; }
.level-bar-row strong { color: #0f172a; font-size: .84rem; text-align: right; }
.level-bar-track, .bar-track { height: 12px; overflow: hidden; border-radius: 999px; background: #eef2f6; }
.level-bar-fill, .bar-track span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: #696cff; }
.level-0 { background: #94a3b8; }
.level-1 { background: #ef4444; }
.level-2 { background: #f59e0b; }
.level-3 { background: #0891b2; }
.level-4 { background: #16a34a; }
.trend-chart { padding: 14px 18px 18px; }
.trend-chart svg { display: block; width: 100%; height: 230px; }
.trend-chart line { stroke: #d9dee3; stroke-width: 1; }
.trend-chart polyline { fill: none; stroke: #696cff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.trend-chart circle { fill: #fff; stroke: #696cff; stroke-width: 3; }
.trend-chart-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.trend-chart-labels div { min-width: 0; padding: 9px 10px; border: 1px solid #edf0f3; border-radius: 7px; background: #fbfcfd; }
.trend-chart-labels strong, .trend-chart-labels span, .trend-chart-labels small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trend-chart-labels strong { color: #0f172a; font-size: .95rem; }
.trend-chart-labels span { color: #475467; font-size: .78rem; font-weight: 700; }
.trend-chart-labels small { color: #64748b; font-size: .72rem; }
.horizontal-chart-list, .skill-gap-chart, .risk-chart-list { display: grid; gap: 11px; padding: 18px; }
.horizontal-chart-row { display: grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) minmax(60px, 84px); align-items: center; gap: 14px; }
.horizontal-chart-row strong, .skill-gap-title strong { display: block; overflow: hidden; color: #0f172a; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.horizontal-chart-row small, .skill-gap-title small { display: block; overflow: hidden; color: #64748b; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.horizontal-chart-row .bar-track span, .skill-gap-row .bar-track span { background: linear-gradient(90deg, #696cff, #0891b2); }
.horizontal-chart-row em, .skill-gap-row em { color: #0f172a; font-size: .86rem; font-style: normal; font-weight: 800; text-align: right; white-space: nowrap; }
.skill-gap-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding-bottom: 11px; border-bottom: 1px solid #edf0f3; }
.skill-gap-row:last-child { border-bottom: 0; }
.skill-gap-row em { text-align: left; }
.critical-inline { display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 999px; background: #fee2e2; color: #b42318; font-size: .68rem; font-weight: 800; }
.risk-chart-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px; border: 1px solid #edf0f3; border-left: 4px solid #94a3b8; border-radius: 8px; background: #fff; }
.risk-chart-row span { align-self: start; padding: 3px 8px; border-radius: 999px; background: #eef2f6; color: #475467; font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.risk-chart-row strong { overflow: hidden; color: #0f172a; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.risk-chart-row small { grid-column: 2; overflow: hidden; color: #64748b; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.risk-chart-row.severity-cao { border-left-color: #dc2626; }
.risk-chart-row.severity-cao span { background: #fee2e2; color: #b42318; }
.risk-chart-row.severity-vừa { border-left-color: #d97706; }
.risk-chart-row.severity-vừa span { background: #fef0c7; color: #93370d; }
.risk-chart-row.severity-thấp { border-left-color: #16a34a; }
.risk-chart-row.severity-thấp span { background: #dcfce7; color: #166534; }
.risk-skill-list { display: grid; gap: 12px; padding: 18px; }
.risk-skill-row { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(0, 1fr) minmax(150px, auto); align-items: center; gap: 12px; padding: 13px; border: 1px solid #edf0f3; border-left: 4px solid #d97706; border-radius: 8px; background: #fff; }
.risk-skill-row > span { display: inline-flex; min-width: 44px; justify-content: center; padding: 4px 8px; border-radius: 999px; background: #fef0c7; color: #93370d; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.risk-skill-row.red { border-left-color: #dc2626; }
.risk-skill-row.red > span { background: #fee2e2; color: #b42318; }
.risk-skill-row.yellow { border-left-color: #f59e0b; }
.risk-skill-row.yellow > span { background: #fef3c7; color: #93370d; }
.risk-skill-row .bar-track span, .critical-category-row .bar-track span, .critical-department-row .bar-track span, .critical-position-row .bar-track span { background: linear-gradient(90deg, #dc2626, #f59e0b); }
.risk-skill-row em { color: #0f172a; font-size: .82rem; font-style: normal; font-weight: 800; text-align: right; white-space: nowrap; }
.training-course-list, .training-session-list { display: grid; gap: 11px; padding: 18px; }
.training-course-row, .training-session-row { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) minmax(72px, auto); align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid #edf0f3; }
.training-course-row:last-child, .training-session-row:last-child { border-bottom: 0; }
.training-course-row strong, .training-course-row small, .training-session-row strong, .training-session-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.training-course-row strong, .training-session-row strong { color: #0f172a; font-size: .9rem; }
.training-course-row small, .training-session-row small { color: #64748b; font-size: .75rem; }
.training-course-row .bar-track span, .training-session-row .bar-track span, .training-need-row .bar-track span { background: linear-gradient(90deg, #0891b2, #16a34a); }
.training-course-row em, .training-session-row em { color: #0f172a; font-size: .84rem; font-style: normal; font-weight: 800; text-align: right; white-space: nowrap; }
.resource-filter { grid-template-columns: minmax(320px, 1.4fr) minmax(240px, .8fr) auto; }
.resource-list, .resource-recommendation-list { display: grid; gap: 11px; padding: 18px; }
.resource-row { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1fr) minmax(86px, auto); align-items: center; gap: 14px; padding-bottom: 11px; border-bottom: 1px solid #edf0f3; }
.resource-row:last-child { border-bottom: 0; }
.resource-row strong, .resource-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-row strong { color: #0f172a; font-size: .9rem; }
.resource-row small { color: #64748b; font-size: .75rem; }
.resource-row .bar-track span { background: linear-gradient(90deg, #16a34a, #0891b2); }
.resource-skill-row .bar-track span { background: linear-gradient(90deg, #dc2626, #f59e0b); }
.resource-recommendation-row .bar-track span { background: linear-gradient(90deg, #696cff, #16a34a); }
.resource-row em { color: #0f172a; font-size: .84rem; font-style: normal; font-weight: 800; text-align: right; white-space: nowrap; }
.chart-empty { padding: 24px; color: #64748b; font-size: .88rem; text-align: center; }
.ai-chat-shell { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: stretch; min-height: calc(100vh - 180px); overflow: visible; border: 1px solid #edf0f3; border-radius: 10px; background: #fff; box-shadow: 0 .125rem .5rem rgba(67,89,113,.06); }
.ai-chat-sidebar { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 10px; min-height: calc(100vh - 180px); max-height: calc(100vh - 116px); overflow-y: auto; padding: 18px; border-right: 1px solid #edf0f3; border-radius: 10px 0 0 10px; background: #fbfcfd; scrollbar-width: thin; scrollbar-color: #cfd6df transparent; }
.ai-chat-sidebar::-webkit-scrollbar { width: 8px; }
.ai-chat-sidebar::-webkit-scrollbar-track { background: transparent; }
.ai-chat-sidebar::-webkit-scrollbar-thumb { border: 2px solid #fbfcfd; border-radius: 8px; background: #cfd6df; }
.ai-chat-sidebar-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 6px; }
.ai-chat-sidebar-head svg { width: 22px; height: 22px; color: var(--primary); }
.ai-chat-sidebar-head strong, .ai-chat-sidebar-head span { display: block; }
.ai-chat-sidebar-head strong { color: #0f172a; font-size: .98rem; }
.ai-chat-sidebar-head span { color: #64748b; font-size: .78rem; }
.ai-prompt-groups { display: flex; flex-direction: column; gap: 10px; }
.ai-prompt-group { overflow: hidden; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; }
.ai-prompt-group-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; width: 100%; min-height: 46px; border: 0; background: #fff; color: #1f2937; padding: 10px 11px; text-align: left; }
.ai-prompt-group-toggle span { overflow: hidden; text-overflow: ellipsis; color: #0f172a; font-size: .78rem; font-weight: 800; line-height: 1.25; text-transform: uppercase; }
.ai-prompt-group-toggle small { color: #667085; font-size: .72rem; white-space: nowrap; }
.ai-prompt-group-toggle svg { width: 16px; height: 16px; color: #667085; }
.ai-prompt-group-toggle:hover { background: #f8fafc; color: var(--primary); }
.ai-prompt-group.is-expanded .ai-prompt-group-toggle { border-bottom: 1px solid #edf0f3; background: #f8fafc; }
.ai-prompt-group-body { display: none; flex-direction: column; gap: 8px; max-height: 380px; overflow-y: auto; padding: 10px; scrollbar-width: thin; scrollbar-color: #cfd6df transparent; }
.ai-prompt-group.is-expanded .ai-prompt-group-body { display: flex; }
.ai-prompt-group-subtitle { padding: 2px 2px 6px; color: #667085; font-size: .74rem; font-weight: 700; line-height: 1.35; }
.ai-prompt-item { width: 100%; border: 1px solid #d9dee3; border-radius: 8px; background: #fff; color: #334155; padding: 10px 11px; text-align: left; font-size: .82rem; font-weight: 700; line-height: 1.35; }
.ai-prompt-item:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 .125rem .375rem rgba(105,108,255,.16); }
.ai-chat-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: calc(100vh - 180px); align-self: stretch; }
.ai-chat-messages { display: grid; align-content: start; gap: 16px; overflow-y: auto; padding: 20px; background: linear-gradient(180deg, #fff, #fbfcfd); }
.ai-chat-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; max-width: 860px; }
.ai-chat-message.user { justify-self: end; grid-template-columns: minmax(0, 1fr) 34px; }
.ai-chat-message.user .ai-chat-avatar { grid-column: 2; grid-row: 1; background: #696cff; color: #fff; }
.ai-chat-message.user .ai-chat-bubble { grid-column: 1; grid-row: 1; background: #f0f0ff; }
.ai-chat-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #eef2f6; color: #475467; }
.ai-chat-avatar svg { width: 18px; height: 18px; }
.ai-chat-bubble { min-width: 0; padding: 13px 15px; border: 1px solid #edf0f3; border-radius: 8px; background: #fff; color: #334155; box-shadow: 0 .125rem .375rem rgba(67,89,113,.04); }
.ai-chat-bubble strong { display: block; margin-bottom: 6px; color: #0f172a; }
.ai-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.ai-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding: 16px; border-top: 1px solid #edf0f3; background: #fff; }
.ai-chat-composer textarea { width: 100%; min-height: 56px; max-height: 150px; resize: vertical; border: 1px solid #d9dee3; border-radius: 8px; padding: 12px 13px; color: #0f172a; outline: none; }
.ai-chat-composer textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(105,108,255,.12); }
.ai-chat-actions { display: flex; gap: 8px; }
.ai-chat-message.assistant { max-width: min(980px, 100%); }
.ai-chat-message.assistant .ai-chat-bubble { width: 100%; border-color: #e7ebf0; background: linear-gradient(180deg, #fff, #fcfcff); }
.ai-chat-bubble-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin-bottom: 9px; color: #667085; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.ai-chat-message.user .ai-chat-bubble-head { color: var(--primary); }
.ai-copy-button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px; border: 1px solid #e4e7ec; border-radius: 6px; background: #fff; color: #667085; font-size: .72rem; font-weight: 800; text-transform: none; letter-spacing: 0; }
.ai-copy-button:hover { border-color: var(--primary); color: var(--primary); background: #f5f5ff; }
.ai-copy-button svg { width: 14px; height: 14px; }
.ai-user-text { color: #344054; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.ai-response { display: grid; gap: 10px; color: #344054; font-size: .94rem; line-height: 1.62; }
.ai-response p { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.ai-response h4 { margin: 4px 0 0; padding-bottom: 6px; border-bottom: 1px solid #edf0f3; color: #101828; font-size: .98rem; font-weight: 800; }
.ai-response ul, .ai-response ol { display: grid; gap: 9px; margin: 0; padding-left: 0; list-style: none; }
.ai-response li { position: relative; padding: 10px 12px 10px 34px; border: 1px solid #eef1f5; border-radius: 8px; background: #fbfcfd; color: #344054; }
.ai-response ul li::before { content: ""; position: absolute; top: 18px; left: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px #f0f0ff; }
.ai-response ol { counter-reset: ai-response-step; }
.ai-response ol li { counter-increment: ai-response-step; }
.ai-response ol li::before { content: counter(ai-response-step); position: absolute; top: 10px; left: 11px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #eef2ff; color: var(--primary); font-size: .68rem; font-weight: 900; }
.ai-response strong { display: inline; margin: 0; color: #182230; font-weight: 800; }
.ai-response code { padding: 2px 5px; border-radius: 5px; background: #f2f4f7; color: #344054; font-size: .86em; }
.ai-response-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid #e7ebf0; border-radius: 8px; background: #fff; }
.ai-response-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .86rem; }
.ai-response-table th { padding: 9px 11px; border-bottom: 1px solid #e7ebf0; background: #f8fafc; color: #475467; font-size: .72rem; font-weight: 800; text-align: left; text-transform: uppercase; }
.ai-response-table td { padding: 10px 11px; border-bottom: 1px solid #f0f2f5; color: #344054; vertical-align: top; }
.ai-response-table tr:last-child td { border-bottom: 0; }
.ai-typing-line { display: inline-flex; align-items: center; gap: 5px; color: #667085; font-weight: 700; }
.ai-typing-line span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); opacity: .35; animation: aiTyping 1s infinite ease-in-out; }
.ai-typing-line span:nth-child(2) { animation-delay: .15s; }
.ai-typing-line span:nth-child(3) { animation-delay: .3s; }
.ai-chat-message.is-streaming .ai-chat-bubble { border-color: #d6d7ff; box-shadow: 0 .25rem .75rem rgba(105,108,255,.10); }
.ai-admin-kpis { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.ai-admin-kpis article { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ai-admin-kpis .analytics-kpi-label, .ai-admin-kpis strong, .ai-admin-kpis small { display: block; min-width: 0; }
.ai-admin-kpis strong { overflow-wrap: anywhere; line-height: 1.25; }
.ai-admin-kpis article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-audit-table { min-width: 1120px; }
.ai-audit-table th:nth-child(4), .ai-audit-table td:nth-child(4) { min-width: 360px; }
.ai-audit-prompt { max-width: 520px; color: #334155; white-space: normal; overflow-wrap: anywhere; }
@keyframes aiTyping {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-3px); opacity: 1; }
}
.chart-roadmap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 26px; padding: 28px; }
.roadmap-marker { display: grid; place-items: center; align-self: start; min-height: 150px; border-radius: 10px; background: #f0f0ff; color: #696cff; }
.roadmap-marker span { color: #384551; font-size: 1.35rem; font-weight: 900; }
.roadmap-marker svg { width: 34px; height: 34px; }
.chart-roadmap h2 { margin: 0 0 8px; font-size: 1.18rem; }
.chart-roadmap p { margin: 0 0 18px; color: #64748b; }
.roadmap-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.roadmap-feature-grid article { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #edf0f3; border-radius: 8px; background: #fbfcfd; color: #334155; font-weight: 700; }
.roadmap-feature-grid svg { width: 18px; height: 18px; flex: 0 0 auto; color: #16a34a; }
.gap-heatmap-scroll { max-width: 100%; overflow-x: auto; padding: 18px 18px 22px; scrollbar-gutter: stable; }
.gap-heatmap-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.gap-heatmap-table th, .gap-heatmap-table td { min-width: 150px; border-right: 1px solid #edf0f3; border-bottom: 1px solid #edf0f3; padding: 12px; text-align: center; }
.gap-heatmap-table thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; color: #475467; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.gap-heatmap-table thead th:first-child, .gap-heatmap-table tbody th { position: sticky; left: 0; z-index: 3; min-width: 240px; text-align: left; background: #fff; box-shadow: 1px 0 0 #edf0f3; }
.gap-heatmap-table thead th:first-child { z-index: 4; background: #f8fafc; }
.gap-heatmap-table tbody th strong, .gap-heatmap-table tbody th small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gap-heatmap-table tbody th strong { color: #0f172a; font-size: .88rem; }
.gap-heatmap-table tbody th small { margin-top: 3px; color: #64748b; font-size: .72rem; }
.gap-heatmap-table td strong, .gap-heatmap-table td span { display: block; }
.gap-heatmap-table td strong { color: #0f172a; font-size: .9rem; }
.gap-heatmap-table td span { margin-top: 3px; color: #475467; font-size: .72rem; font-weight: 700; }
.gap-heatmap-table td.heatmap-0 { background: #f8fafc; }
.gap-heatmap-table td.heatmap-1 { background: #dcfce7; }
.gap-heatmap-table td.heatmap-2 { background: #fef3c7; }
.gap-heatmap-table td.heatmap-3 { background: #fed7aa; }
.gap-heatmap-table td.heatmap-4 { background: #fee2e2; }

.exam-attempt-create { position: relative; z-index: 4; overflow: visible; }
.exam-attempt-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(250px, 1.1fr) minmax(260px, 1.15fr) 110px 90px 180px 116px;
  gap: 10px;
  align-items: end;
}
.exam-attempt-form .form-control,
.exam-attempt-form .form-select,
.exam-attempt-form .searchable-select-toggle,
.exam-attempt-form .btn { min-height: 38px; }
.exam-attempt-form .btn { white-space: nowrap; }
.training-attempt-filter { grid-template-columns: minmax(260px, 1fr) minmax(210px, .75fr) minmax(210px, .75fr) minmax(160px, .55fr) auto; }
.exam-attempt-table-scroll { max-height: 560px; }
.exam-attempt-table { min-width: 1180px; }
.exam-attempt-table th:first-child, .exam-attempt-table td:first-child { min-width: 270px; }
.exam-attempt-table th:nth-child(2), .exam-attempt-table td:nth-child(2) { min-width: 230px; }
.exam-attempt-table th:nth-child(3), .exam-attempt-table td:nth-child(3) { min-width: 250px; }
.exam-attempt-table th:nth-child(8), .exam-attempt-table td:nth-child(8) { min-width: 150px; }
.exam-timer { position: sticky; top: 82px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #fecaca; border-radius: 8px; background: #fff1f2; color: #991b1b; box-shadow: 0 6px 18px rgba(153,27,27,.12); }
.exam-timer strong { font-size: 1.25rem; letter-spacing: .04em; }
.quick-action-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 0 0 14px; }
.exam-overview { padding: 18px; }
.exam-overview dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 0; }
.exam-overview div { min-width: 0; }
.exam-overview dt { color: var(--muted); font-size: .76rem; text-transform: uppercase; }
.exam-overview dd { margin: 3px 0 0; font-weight: 700; }
.theory-question-list { display: grid; gap: 14px; }
.theory-question-card { border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.theory-question-card header { display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px 8px; }
.theory-question-card header span { color: var(--muted); white-space: nowrap; }
.theory-options { display: grid; gap: 2px; padding: 8px 22px 20px; }
.theory-option { display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer; }
.theory-option input { width: 20px; height: 20px; }
.practice-start-form { display: grid; grid-template-columns: minmax(300px, 1fr) auto; gap: 12px; align-items: end; }
.practice-complete-form { display: grid; grid-template-columns: 90px minmax(140px, 1fr) 34px; gap: 8px; align-items: center; min-width: 300px; }
.exam-mini-timer { font-weight: 700; color: var(--primary); }

@media (max-width: 991.98px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-layout.sidebar-collapsed { grid-template-columns: 1fr; }
  .sidebar, .app-layout.sidebar-collapsed .sidebar { position: fixed; left: -280px; width: 260px; transition: left .2s ease; }
  .sidebar.open { left: 0; box-shadow: 12px 0 30px rgba(67,89,113,.22); }
  .layout-menu-toggle { display: none; }
  .app-layout.sidebar-collapsed:not(.sidebar-hovered) .brand span:last-child,
  .app-layout.sidebar-collapsed:not(.sidebar-hovered) .side-nav a span,
  .app-layout.sidebar-collapsed:not(.sidebar-hovered) .nav-section { width: auto; height: auto; margin: revert; overflow: visible; opacity: 1; pointer-events: auto; }
  .app-layout.sidebar-collapsed:not(.sidebar-hovered) .side-nav a { justify-content: flex-start; padding: 9px 12px; }
  .topbar-search-trigger { width: auto; min-width: 42px; padding: 0 10px; }
  .topbar-search-trigger span, .topbar-search-trigger kbd { display: none; }
  .content { padding: 20px; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .assessment-cycle-row { grid-template-columns: minmax(260px, 1fr) 80px 80px 42px; }
  .cycle-progress { display: none; }
  .assessment-summary-strip { grid-template-columns: repeat(3, 1fr); }
  .approval-row { grid-template-columns: minmax(220px, 1fr) repeat(3, 64px) 36px; }
  .approval-actions { grid-column: 1 / -1; }
  .score-toolbar { align-items: flex-start; flex-direction: column; }
  .analytics-filter { grid-template-columns: 1fr 1fr; }
  .analytics-kpis { grid-template-columns: repeat(3, 1fr); }
  .analytics-grid, .employee360-grid { grid-template-columns: 1fr; }
  .chart-filter { grid-template-columns: 1fr 1fr auto; }
  .chart-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-panel.wide { grid-column: 1 / -1; }
  .donut-layout { grid-template-columns: 150px minmax(0, 1fr); }
  .chart-donut { width: 150px; height: 150px; }
  .chart-donut strong { font-size: 1.45rem; }
  .chart-roadmap { grid-template-columns: 1fr; }
  .planning-dashboard-grid, .demand-grid { grid-template-columns: 1fr; }
  .planning-wide { grid-column: auto; }
  .planning-summary-strip { grid-template-columns: repeat(3, 1fr); }
  .availability-quick-form { grid-template-columns: 1fr 1fr 1fr; }
  .exam-attempt-form { grid-template-columns: 1fr 1fr; }
  .exam-overview dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practice-start-form { grid-template-columns: 1fr; }
  .training-attempt-filter, .report-filter-progress, .report-filter-scores, .report-filter-pending, .report-filter-internal, .report-filter-training-needs, .company-filter, .employee-filter { grid-template-columns: 1fr 1fr; }
  .report-filter { flex-wrap: wrap; }
  .report-filter > .form-control:first-child, .report-filter > .form-select, .report-filter > .report-date-input { flex: 1 1 calc(50% - 10px); }
}
@media (max-width: 767.98px) {
  .page-header { flex-direction: column; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; }
  .filter-bar { grid-template-columns: 1fr; }
  .assessment-cycle-row { grid-template-columns: 1fr 38px; }
  .cycle-metric { display: none; }
  .assessment-step { grid-template-columns: 1fr; }
  .quick-options { grid-template-columns: 1fr; }
  .assessment-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .approval-row { grid-template-columns: 1fr 1fr 1fr; }
  .approval-row > div:first-child, .approval-actions { grid-column: 1 / -1; }
  .score-kpis { width: 100%; grid-template-columns: repeat(4, 1fr); }
  .score-action-bar { flex-wrap: wrap; }
  .score-action-bar > div { width: 100%; }
  .analytics-filter { grid-template-columns: 1fr; }
  .analytics-kpis, .employee360-hero { grid-template-columns: repeat(2, 1fr); }
  .chart-filter, .chart-dashboard-grid { grid-template-columns: 1fr; }
  .ai-chat-shell, .ai-chat-composer { grid-template-columns: 1fr; }
  .ai-chat-sidebar { border-right: 0; border-bottom: 1px solid #edf0f3; }
  .ai-chat-actions { justify-content: flex-end; }
  .chart-panel.wide { grid-column: auto; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .chart-legend { width: 100%; }
  .horizontal-chart-row { grid-template-columns: 1fr; }
  .horizontal-chart-row em { text-align: left; }
  .risk-skill-row { grid-template-columns: 1fr; }
  .risk-skill-row em { text-align: left; }
  .training-course-row, .training-session-row { grid-template-columns: 1fr; }
  .training-course-row em, .training-session-row em { text-align: left; }
  .resource-filter, .resource-row { grid-template-columns: 1fr; }
  .resource-row em { text-align: left; }
  .roadmap-feature-grid { grid-template-columns: 1fr; }
  .readiness-selector { grid-template-columns: 1fr; }
  .planning-summary-strip { grid-template-columns: 1fr 1fr; }
  .demand-quick-form, .skill-demand-form, .availability-quick-form { grid-template-columns: 1fr; }
  .exam-attempt-form, .training-attempt-filter, .report-filter-progress, .report-filter-scores, .report-filter-pending, .report-filter-internal, .report-filter-training-needs, .company-filter, .employee-filter { grid-template-columns: 1fr; }
  .exam-overview dl, .practice-complete-form { grid-template-columns: 1fr; }
  .report-filter { flex-direction: column; }
  .report-filter > .form-control:first-child, .report-filter > .form-select, .report-filter > .report-date-input, .report-filter .btn { flex: 1 1 auto; width: 100%; }
  .demand-quick-form .btn-icon, .skill-demand-form .btn-icon { width: 100%; }
  .critical-check { width: 100%; }
  .permission-grid, .scope-grid { grid-template-columns: 1fr; }
  .security-scope-node { grid-template-columns: 1fr; align-items: flex-start; padding-left: calc(14px + var(--scope-depth, 0) * 16px); }
  .security-scope-descendants { justify-content: flex-start; padding-left: 45px; }
  .tree-row { grid-template-columns: 1fr 80px; }
  .tree-row > :nth-child(2) { display: none; }
  .login-shell { grid-template-columns: 1fr; }
  .login-panel { min-height: 100vh; padding: 32px 24px; }
  .login-visual { display: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}