body { background: var(--theme-page); color: var(--theme-ink); font-size: var(--portal-body-size); }
h1, .display-6 { font-size: var(--portal-heading-size); color: var(--theme-ink); }
.portal-navbar { background: linear-gradient(135deg, var(--theme-primary), color-mix(in srgb, var(--theme-primary) 58%, var(--theme-accent) 42%)); }
.portal-navbar .dropdown-menu { border-radius: 10px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 36px rgba(20, 42, 80, .14); }
.portal-navbar .dropdown-item:active, .portal-navbar .dropdown-item:hover { background: var(--theme-soft); color: var(--theme-ink); }
.stat-card { border: 0; border-radius: 10px; box-shadow: 0 10px 24px rgba(20, 42, 80, .08); background: linear-gradient(180deg, #fff, var(--theme-soft)); }
.table-card { background: #fff; border-radius: 10px; box-shadow: 0 10px 24px rgba(20, 42, 80, .08); border: 1px solid rgba(31, 79, 120, .06); }
.status-pill { text-transform: capitalize; }
.metadata-label { color: #637083; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; }
.login-panel { max-width: 420px; margin: 8vh auto; }
.brand-logo { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 4px; }
.dashboard-shell { display: flex; flex-direction: column; gap: 0; }
.dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 1.5rem; }
.dashboard-title { margin: 0 0 .35rem; font-size: clamp(1.8rem, 2vw, 2.4rem); }
.dashboard-subtitle { margin: 0; color: #627384; max-width: 720px; }
.dashboard-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; }
.dashboard-search-form { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.dashboard-search-form .form-control { min-width: 132px; width: 132px; height: 34px; border-radius: 10px; font-size: .84rem; }
.dashboard-search-form .btn,
.dashboard-actions > .btn { height: 34px; padding-top: .28rem; padding-bottom: .28rem; white-space: nowrap; font-size: .88rem; }
.dashboard-card { border-radius: 22px; box-shadow: 0 16px 34px rgba(20, 42, 80, .09); border: 0; overflow: hidden; }
.dashboard-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 1rem; }
.dashboard-note { color: rgba(255,255,255,.88); font-size: .92rem; }
.dashboard-text-link { font-weight: 700; text-decoration: none; white-space: nowrap; color: #fff; }
.dashboard-text-link:hover { color: #fff; text-decoration: underline; }
.dash-hero-card { position: relative; display: block; color: #fff; text-decoration: none; border-radius: 22px; padding: 1.25rem 1.25rem 1.1rem; min-height: 178px; overflow: hidden; box-shadow: 0 18px 34px rgba(20, 42, 80, .16); transition: transform .18s ease, box-shadow .18s ease; }
.dash-hero-card:hover { transform: translateY(-2px); box-shadow: 0 22px 38px rgba(20, 42, 80, .22); color: #fff; }
.dash-card-blue { background: linear-gradient(135deg, #0b7dff 0%, #2668ff 52%, #1f4fd6 100%); }
.dash-card-green { background: linear-gradient(135deg, #11b96b 0%, #1fc97a 52%, #109c7d 100%); }
.dash-card-purple { background: linear-gradient(135deg, #8f54ff 0%, #9c5bff 50%, #6d37e6 100%); }
.dash-card-orange { background: linear-gradient(135deg, #f7a31a 0%, #ffb024 50%, #f18419 100%); }
.dash-hero-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: .2rem; min-height: 8px; }
.dash-hero-value { font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 800; line-height: 1; margin-bottom: .45rem; }
.dash-hero-label { font-size: 1.02rem; font-weight: 700; }
.dash-hero-sub { font-size: .9rem; opacity: .9; margin-top: .2rem; }
.dash-hero-card::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 58px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.22)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .9; }
.document-state-widget { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1.15rem 1.25rem; border-radius: 22px; color: #fff; text-decoration: none; box-shadow: 0 16px 30px rgba(20,42,80,.12); min-height: 160px; position: relative; overflow: hidden; }
.document-state-widget:hover { color: #fff; transform: translateY(-1px); }
.document-state-label { font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; opacity: .92; }
.document-state-value { font-size: 2rem; font-weight: 800; line-height: 1.1; margin-top: .15rem; }
.doc-state-published { background: linear-gradient(135deg, #ea4aaa 0%, #d93f90 46%, #b92f7f 100%); }
.doc-state-draft { background: linear-gradient(135deg, #1788ff 0%, #2598ff 46%, #1f69eb 100%); }
.doc-state-archived { background: linear-gradient(135deg, #18c9c1 0%, #14b8a6 46%, #0f8f97 100%); }
.document-state-widget::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 0; height: 54px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.16)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.document-state-widget > div:first-child { position: relative; z-index: 1; }
.dashboard-panel-cyan { background: linear-gradient(135deg, #1eaad8, #0f7bb6); color: #fff; }
.dashboard-panel-violet { background: linear-gradient(135deg, #7c4dff, #5d2de1); color: #fff; }
.dashboard-panel-amber { background: linear-gradient(135deg, #f7a31a, #e07c15); color: #fff; }
.dashboard-panel-rose { background: linear-gradient(135deg, #ef5da8, #cd3d86); color: #fff; }
.dashboard-panel-teal { background: linear-gradient(135deg, #15b7a8, #0d8d96); color: #fff; }
.dashboard-panel-sky { background: linear-gradient(135deg, #2b8cff, #1a63df); color: #fff; }
.dashboard-panel-cyan .table,
.dashboard-panel-violet .table,
.dashboard-panel-amber .table,
.dashboard-panel-rose .table,
.dashboard-panel-teal .table,
.dashboard-panel-sky .table { --bs-table-bg: transparent; --bs-table-color: #fff; --bs-table-border-color: rgba(255,255,255,.18); }
.dashboard-panel-cyan .dashboard-table thead th,
.dashboard-panel-violet .dashboard-table thead th,
.dashboard-panel-amber .dashboard-table thead th,
.dashboard-panel-rose .dashboard-table thead th,
.dashboard-panel-teal .dashboard-table thead th,
.dashboard-panel-sky .dashboard-table thead th { color: rgba(255,255,255,.78); border-bottom-color: rgba(255,255,255,.16); }
.dashboard-panel-cyan .dashboard-table tbody tr:hover,
.dashboard-panel-violet .dashboard-table tbody tr:hover,
.dashboard-panel-amber .dashboard-table tbody tr:hover,
.dashboard-panel-rose .dashboard-table tbody tr:hover,
.dashboard-panel-teal .dashboard-table tbody tr:hover,
.dashboard-panel-sky .dashboard-table tbody tr:hover { background: rgba(255,255,255,.08); }
.dashboard-panel-cyan a,
.dashboard-panel-violet a,
.dashboard-panel-amber a,
.dashboard-panel-rose a,
.dashboard-panel-teal a,
.dashboard-panel-sky a { color: #fff; }
.dashboard-panel-cyan .dashboard-status-chip,
.dashboard-panel-violet .dashboard-status-chip,
.dashboard-panel-amber .dashboard-status-chip,
.dashboard-panel-rose .dashboard-status-chip,
.dashboard-panel-teal .dashboard-status-chip,
.dashboard-panel-sky .dashboard-status-chip { background: rgba(255,255,255,.18); color: #fff; }
.dashboard-panel-cyan .assignment-mini-item,
.dashboard-panel-violet .assignment-mini-item,
.dashboard-panel-amber .assignment-mini-item,
.dashboard-panel-rose .assignment-mini-item,
.dashboard-panel-teal .assignment-mini-item { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); color: #fff; }
.dashboard-panel-cyan .assignment-mini-meta,
.dashboard-panel-violet .assignment-mini-meta,
.dashboard-panel-amber .assignment-mini-meta,
.dashboard-panel-rose .assignment-mini-meta,
.dashboard-panel-teal .assignment-mini-meta,
.dashboard-panel-cyan .trend-label span,
.dashboard-panel-violet .trend-label span,
.dashboard-panel-amber .trend-label span,
.dashboard-panel-cyan .category-donut-center span,
.dashboard-panel-cyan .category-name,
.dashboard-panel-violet .category-name,
.dashboard-panel-amber .workflow-foot,
.dashboard-panel-cyan .workflow-foot,
.dashboard-panel-violet .workflow-foot { color: rgba(255,255,255,.84); }
.dashboard-panel-cyan .workflow-item,
.dashboard-panel-violet .workflow-item,
.dashboard-panel-amber .workflow-item { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); color: #fff; }
.dashboard-panel-cyan .workflow-bar,
.dashboard-panel-violet .workflow-bar,
.dashboard-panel-amber .workflow-bar { background: rgba(255,255,255,.18); }
.dashboard-panel-cyan .category-donut::after,
.dashboard-panel-violet .category-donut::after,
.dashboard-panel-amber .category-donut::after { background: rgba(255,255,255,.94); }
.dashboard-panel-cyan .category-donut-center strong,
.dashboard-panel-violet .category-donut-center strong,
.dashboard-panel-amber .category-donut-center strong { color: #17324d; }
.dashboard-panel-violet .trend-svg,
.dashboard-panel-cyan .trend-svg,
.dashboard-panel-amber .trend-svg { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0)); }
.category-chart-wrap { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 1rem; align-items: center; }
.category-donut { width: 190px; height: 190px; border-radius: 50%; position: relative; margin-inline: auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.category-donut::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(31,79,120,.06); }
.category-donut-center { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.category-donut-center strong { font-size: 1.7rem; line-height: 1; }
.category-donut-center span { color: #64748b; font-size: .92rem; margin-top: .2rem; }
.category-legend { display: flex; flex-direction: column; gap: .7rem; }
.category-legend-item { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: .65rem; font-size: .95rem; }
.category-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.category-name { color: #24384d; }
.trend-chart { display: flex; flex-direction: column; gap: .75rem; }
.trend-svg { width: 100%; height: auto; background: linear-gradient(180deg, rgba(236,244,252,.8), rgba(255,255,255,0)); border-radius: 14px; }
.trend-label-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: .35rem; }
.trend-label { text-align: center; padding-top: .25rem; }
.trend-label strong { display: block; font-size: .95rem; color: #1f3f66; }
.trend-label span { color: #64748b; font-size: .83rem; }
.workflow-list { display: flex; flex-direction: column; gap: .85rem; }
.workflow-item { display: block; text-decoration: none; padding: .85rem .95rem; border-radius: 12px; background: #f9fbfe; border: 1px solid #edf2f8; color: inherit; transition: transform .16s ease, box-shadow .16s ease; }
.workflow-item:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(20,42,80,.08); color: inherit; }
.workflow-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: .45rem; }
.workflow-bar { height: 10px; background: #e9eff6; border-radius: 999px; overflow: hidden; }
.workflow-bar span { display: block; height: 100%; border-radius: inherit; }
.workflow-foot { margin-top: .4rem; color: #64748b; font-size: .84rem; }
.dashboard-table thead th { color: #64748b; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; border-bottom-color: #e7edf5; }
.dashboard-table tbody tr:hover { background: #f9fbfe; }
.dashboard-status-chip { display: inline-flex; align-items: center; padding: .28rem .62rem; border-radius: 999px; background: #eef4ff; color: #244872; font-size: .82rem; text-transform: capitalize; }
.assignment-mini-list { display: flex; flex-direction: column; gap: .8rem; }
.assignment-mini-item { display: block; padding: .9rem 1rem; border: 1px solid #ebf1f7; border-radius: 12px; text-decoration: none; color: inherit; background: linear-gradient(180deg, #ffffff, #fbfdff); }
.assignment-mini-item:hover { box-shadow: 0 12px 24px rgba(20,42,80,.08); color: inherit; }
.assignment-mini-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: .35rem; }
.assignment-mini-status { color: #915c00; background: #fff5da; border-radius: 999px; padding: .18rem .55rem; font-size: .8rem; font-weight: 700; }
.assignment-mini-meta { display: flex; justify-content: space-between; gap: 8px; color: #64748b; font-size: .86rem; }
.dashboard-chat-references { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid rgba(23,50,77,.1); display: flex; flex-direction: column; gap: .4rem; }
.dashboard-chat-ref-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; font-weight: 700; }
.dashboard-chat-ref-link { text-decoration: none; color: var(--theme-primary); font-weight: 600; }
.dashboard-chat-ref-link:hover { text-decoration: underline; }
.pdf-viewer { width: 100%; min-height: 680px; border: 1px solid #d8dee8; border-radius: 6px; background: #fff; }
.comment-row, .assignment-row, .history-row { border-top: 1px solid #e8edf4; padding: .75rem 0; }
.comment-row:first-of-type, .assignment-row:first-of-type, .history-row:first-of-type { border-top: 0; }
.chat-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 1050; border: 0; border-radius: 999px; background: #0d6efd; color: #fff; width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 14px 28px rgba(13, 110, 253, .28); }
.chat-launcher-icon { width: 26px; height: 26px; }
.chat-panel { position: fixed; right: 24px; bottom: 84px; width: min(400px, calc(100vw - 32px)); max-height: 70vh; background: #fff; border: 1px solid #d8dee8; border-radius: 12px; box-shadow: 0 22px 40px rgba(20, 42, 80, .18); display: flex; flex-direction: column; z-index: 1050; overflow: hidden; }
.chat-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e8edf4; background: linear-gradient(135deg, #eef5ff, #fff7ed); }
.chat-title { font-weight: 700; color: #17324d; }
.chat-subtitle { font-size: .82rem; color: #5f6f82; }
.chat-messages { padding: 14px 16px; overflow-y: auto; background: #fbfcfe; display: flex; flex-direction: column; gap: 10px; min-height: 180px; }
.chat-panel-footer { padding: 12px 16px 16px; border-top: 1px solid #e8edf4; background: #fff; }
.chat-bubble { max-width: 92%; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; line-height: 1.45; }
.chat-bubble.bot { background: #eef4ff; color: #17324d; align-self: flex-start; }
.chat-bubble.user { background: #123b5d; color: #fff; align-self: flex-end; }
.btn-primary, .page-item.active .page-link, .progress-bar, .chat-launcher { background-color: var(--theme-accent); border-color: var(--theme-accent); }
.btn-outline-primary, .page-link, a { color: var(--theme-primary); }
.btn-outline-primary { border-color: color-mix(in srgb, var(--theme-primary) 50%, #ffffff 50%); }
.btn-outline-primary:hover { background: var(--theme-primary); border-color: var(--theme-primary); }
.page-link:hover { background: var(--theme-soft); }
.alert-info { background: color-mix(in srgb, var(--theme-soft) 70%, #ffffff 30%); border-color: rgba(31, 79, 120, .15); color: var(--theme-ink); }
@media (max-width: 1199.98px) {
  .category-chart-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
  .dashboard-topbar, .dashboard-section-head, .assignment-mini-top, .assignment-mini-meta { flex-direction: column; align-items: flex-start; }
  .dashboard-actions { width: 100%; flex-wrap: wrap; }
  .dashboard-actions .btn { flex: 1 1 auto; }
  .dashboard-search-form { width: 100%; min-width: 0; }
  .dashboard-search-form .form-control { min-width: 0; width: 100%; }
  .category-donut { width: 160px; height: 160px; }
}