:root {
--ink: #1d1b1a;
--ink-soft: #564f4b;
--paper: #f8f3ee;
--canvas: #ffffff;
--accent: #d63b3b;
--accent-2: #b12a2a;
--muted: #d9d1c7;
--sidebars: #fff7f7;
--doc-header-accent: #d9d1c7;
--doc-heading-color: #2a5db0;
--doc-text-color: #1d1b1a;
--doc-font-family: Calibri, "Segoe UI", Arial, sans-serif;
--doc-table-header-bg: #5b5b5b;
--doc-table-header-text: #ffffff;
--doc-table-th-bg: #c9c9c9;
--doc-table-th-text: #1d1b1a;
--shadow: rgba(33, 29, 25, 0.15);
--left-sidebar-width: 280px;
--right-sidebar-width: 260px;
--doc-sidebar-width: 260px;
--workspace-main-min-width: 720px;
--doc-main-min-width: 620px;
--sidebar-min-width: 220px;
--doc-sidebar-min-width: 220px;
}
* {
box-sizing: border-box;
border-spacing: 0px;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Calibri, "Segoe UI", Arial, sans-serif;
color: var(--ink);
background: radial-gradient(circle at top left, #f2e7da 0%, #efe9e1 40%, #e6dcd0 100%);
}
.app-body {
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
}
.app-body:not(.app-ready) .view {
display: none !important;
}
.app-body:not(.app-ready) #homeView {
display: flex !important;
}
button,
input,
select,
textarea {
font-family: Calibri, "Segoe UI", Arial, sans-serif;
}
.has-icon {
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn-icon {
width: 14px;
height: 14px;
flex: 0 0 14px;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.btn-icon[data-icon="home"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="doc"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h8l4 4v16H6z M14 2v4h4'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h8l4 4v16H6z M14 2v4h4'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="list"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h2v2H4z M8 6h12v2H8z M4 11h2v2H4z M8 11h12v2H8z M4 16h2v2H4z M8 16h12v2H8z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h2v2H4z M8 6h12v2H8z M4 11h2v2H4z M8 11h12v2H8z M4 16h2v2H4z M8 16h12v2H8z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="trace"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h6v6H5z M13 13h6v6h-6z M10 8h4v4h-4z M11 12l-2 2h2v2l2-2v-2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 5h6v6H5z M13 13h6v6h-6z M10 8h4v4h-4z M11 12l-2 2h2v2l2-2v-2z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="vars"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3H7c-1.1 0-2 .9-2 2v4c0 .55-.45 1-1 1H3v4h1c.55 0 1 .45 1 1v4c0 1.1.9 2 2 2h2v-2H7v-4c0-1.1-.9-2-2-2 1.1 0 2-.9 2-2V5h2V3zm8 0h-2v2h2v4c0 1.1.9 2 2 2-1.1 0-2 .9-2 2v4h-2v2h2c1.1 0 2-.9 2-2v-4c0-.55.45-1 1-1h1v-4h-1c-.55 0-1-.45-1-1V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 3H7c-1.1 0-2 .9-2 2v4c0 .55-.45 1-1 1H3v4h1c.55 0 1 .45 1 1v4c0 1.1.9 2 2 2h2v-2H7v-4c0-1.1-.9-2-2-2 1.1 0 2-.9 2-2V5h2V3zm8 0h-2v2h2v4c0 1.1.9 2 2 2-1.1 0-2 .9-2 2v4h-2v2h2c1.1 0 2-.9 2-2v-4c0-.55.45-1 1-1h1v-4h-1c-.55 0-1-.45-1-1V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="search"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.8l-.3-.3A6 6 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.5 14h-.8l-.3-.3A6 6 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM10 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="users"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM17 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2 20a5 5 0 0 1 10 0H2zM13 20a4 4 0 0 1 8 0h-8z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 12a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM17 12a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM2 20a5 5 0 0 1 10 0H2zM13 20a4 4 0 0 1 8 0h-8z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="grid"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4z M13 4h7v7h-7z M4 13h7v7H4z M13 13h7v7h-7z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4z M13 4h7v7h-7z M4 13h7v7H4z M13 13h7v7h-7z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="star"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l3 6 6 .9-4.5 4.4L17 21l-5-2.7L7 21l1.5-6.7L4 9.9 10 9z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l3 6 6 .9-4.5 4.4L17 21l-5-2.7L7 21l1.5-6.7L4 9.9 10 9z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="user"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zM4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zM4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="logout"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4h9v16h-9v-3h2v1h5V6h-5v1h-2z M3 12l4-4v3h8v2H7v3z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4h9v16h-9v-3h2v1h5V6h-5v1h-2z M3 12l4-4v3h8v2H7v3z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="settings"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a7.8 7.8 0 0 0-.1-1l2.1-1.7-2-3.5-2.6 1a8.4 8.4 0 0 0-1.7-1l-.4-2.7H9.7l-.4 2.7a8.4 8.4 0 0 0-1.7 1l-2.6-1-2 3.5L5 11a7.8 7.8 0 0 0 0 2l-2.1 1.7 2 3.5 2.6-1c.5.4 1.1.7 1.7 1l.4 2.7h4.6l.4-2.7c.6-.3 1.2-.6 1.7-1l2.6 1 2-3.5L20.9 13c.1-.3.1-.7.1-1z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm9 4a7.8 7.8 0 0 0-.1-1l2.1-1.7-2-3.5-2.6 1a8.4 8.4 0 0 0-1.7-1l-.4-2.7H9.7l-.4 2.7a8.4 8.4 0 0 0-1.7 1l-2.6-1-2 3.5L5 11a7.8 7.8 0 0 0 0 2l-2.1 1.7 2 3.5 2.6-1c.5.4 1.1.7 1.7 1l.4 2.7h4.6l.4-2.7c.6-.3 1.2-.6 1.7-1l2.6 1 2-3.5L20.9 13c.1-.3.1-.7.1-1z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="help"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 17a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm-1-4h2v2h-2v-2zm1-9a3 3 0 0 0-3 3h2a1 1 0 1 1 1 1c-1.1 0-2 .9-2 2v1h2v-1a1 1 0 1 1 0-2 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 17a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm-1-4h2v2h-2v-2zm1-9a3 3 0 0 0-3 3h2a1 1 0 1 1 1 1c-1.1 0-2 .9-2 2v1h2v-1a1 1 0 1 1 0-2 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="audit"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h12l4 4v14H4z M14 3v4h4'/%3E%3Cpath fill='black' d='M7 12h10v2H7zM7 16h10v2H7zM7 8h6v2H7z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h12l4 4v14H4z M14 3v4h4'/%3E%3Cpath fill='black' d='M7 12h10v2H7zM7 16h10v2H7zM7 8h6v2H7z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="backup"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h9l5 5v13H6z M15 3v5h5'/%3E%3Cpath fill='black' d='M12 10l4 4h-3v4h-2v-4H8z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h9l5 5v13H6z M15 3v5h5'/%3E%3Cpath fill='black' d='M12 10l4 4h-3v4h-2v-4H8z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="restore"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 0 1 7 7h-2a5 5 0 1 0-1.5 3.5l-1.4-1.4A3 3 0 1 1 15 12h2a5 5 0 0 0-5-5zM4 7v5h5l-2-2a7 7 0 1 0 2-5l-2 2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a7 7 0 0 1 7 7h-2a5 5 0 1 0-1.5 3.5l-1.4-1.4A3 3 0 1 1 15 12h2a5 5 0 0 0-5-5zM4 7v5h5l-2-2a7 7 0 1 0 2-5l-2 2z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="download"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10l4-4 1.4 1.4-6.4 6.6-6.4-6.6L6 9l4 4V3zM4 19h16v2H4z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10l4-4 1.4 1.4-6.4 6.6-6.4-6.6L6 9l4 4V3zM4 19h16v2H4z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="edit"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.5V20h2.5l9.6-9.6-2.5-2.5L4 17.5zM20.7 7.3c.4-.4.4-1 0-1.4l-2.6-2.6c-.4-.4-1-.4-1.4 0l-1.6 1.6 4 4 1.6-1.6z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 17.5V20h2.5l9.6-9.6-2.5-2.5L4 17.5zM20.7 7.3c.4-.4.4-1 0-1.4l-2.6-2.6c-.4-.4-1-.4-1.4 0l-1.6 1.6 4 4 1.6-1.6z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="trash"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 7h12l-1 13H7L6 7zm3-3h6l1 2H8l1-2z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="save"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7zM12 19a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM6 8V5h9v3H6z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7zM12 19a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM6 8V5h9v3H6z'/%3E%3C/svg%3E");
}
.btn-icon[data-icon="suspect"] {
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 20h20L12 2zm0 5.5a3.5 3.5 0 0 1 2.4 6l-.7.6c-.5.4-.7.7-.7 1.4V16h-2v-.7c0-1.3.5-2.2 1.4-2.9l.8-.6a1.5 1.5 0 1 0-2.5-1.3H8.7A3.5 3.5 0 0 1 12 7.5zm-1 10.5h2v2h-2v-2z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 2 20h20L12 2zm0 5.5a3.5 3.5 0 0 1 2.4 6l-.7.6c-.5.4-.7.7-.7 1.4V16h-2v-.7c0-1.3.5-2.2 1.4-2.9l.8-.6a1.5 1.5 0 1 0-2.5-1.3H8.7A3.5 3.5 0 0 1 12 7.5zm-1 10.5h2v2h-2v-2z'/%3E%3C/svg%3E");
}
.icon-action {
width: 30px;
height: 30px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.status-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
border: 1px solid #cfc2b2;
}
.status-badge.active {
background: #e6f0ea;
color: #1f4f45;
}
.status-badge.inactive {
background: #f2e5e5;
color: #7a2f2b;
}
.login-body {
min-height: 100vh;
display: grid;
place-items: center;
}
.login-shell {
width: min(420px, 90vw);
}
.login-card {
background: var(--canvas);
border-radius: 18px;
padding: 28px;
box-shadow: 0 16px 40px var(--shadow);
border: 1px solid var(--muted);
}
.login-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
}
.login-subtitle {
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 20px;
}
.login-form {
display: grid;
gap: 16px;
}
.login-mfa-panel,
.login-reset-panel {
display: grid;
gap: 12px;
}
.field {
display: grid;
gap: 6px;
font-size: 13px;
}
.field input,
.field select,
.field textarea {
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--muted);
background: #fffaf5;
}
.field textarea {
resize: vertical;
}
.template-color-field {
position: relative;
display: grid;
gap: 8px;
}
.template-color-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
min-width: 132px;
padding: 8px 12px;
border: 1px solid var(--muted);
border-radius: 12px;
background: #fffaf5;
cursor: pointer;
color: var(--ink);
}
.template-color-trigger:hover {
border-color: #c9b9a8;
}
.template-color-swatch {
width: 22px;
height: 22px;
border-radius: 999px;
border: 1px solid rgba(47, 42, 38, 0.18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
background: var(--template-color, #ffffff);
background-image: linear-gradient(45deg, rgba(47, 42, 38, 0.08) 25%, transparent 25%, transparent 75%, rgba(47, 42, 38, 0.08) 75%), linear-gradient(45deg, rgba(47, 42, 38, 0.08) 25%, transparent 25%, transparent 75%, rgba(47, 42, 38, 0.08) 75%);
background-size: 10px 10px;
background-position: 0 0, 5px 5px;
}
.template-color-trigger-value {
font-weight: 600;
letter-spacing: 0.01em;
}
.template-color-popover {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid #decdbb;
border-radius: 14px;
background: #fffdf9;
box-shadow: 0 14px 24px rgba(33, 29, 25, 0.12);
}
.template-color-popover-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.template-color-popover-header .ghost {
white-space: nowrap;
}
.template-color-input {
width: min(220px, 100%);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
text-transform: uppercase;
}
.template-color-presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.template-color-preset {
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(47, 42, 38, 0.18);
background: var(--template-color);
cursor: pointer;
}
.template-color-preset:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(33, 29, 25, 0.18);
}
.template-color-field.is-invalid .template-color-trigger,
.template-color-field.is-invalid .template-color-input {
border-color: #d63b3b;
}
.inline-check {
display: inline-flex;
align-items: center;
gap: 8px;
}
.primary {
background: var(--accent);
color: white;
border: none;
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
}
.danger {
background: #a1322f;
color: white;
border: none;
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
}
.ghost {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 12px;
padding: 8px 14px;
cursor: pointer;
}
.form-error {
color: #a1322f;
font-size: 12px;
}
.form-success {
color: #1f6d3d;
font-size: 12px;
}
.new-user-password-mode {
display: grid;
gap: 6px;
}
.new-user-password-mode .radio-row {
display: flex;
align-items: center;
gap: 8px;
font-weight: 400;
}
.new-user-result {
margin-top: 8px;
padding: 10px 12px;
border-radius: 8px;
background: var(--surface-soft, #f3f5f7);
border: 1px solid var(--border-soft, #d9dee3);
font-size: 13px;
}
.new-user-generated-password {
font-family: "Courier New", monospace;
font-size: 15px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
background: #fff5d6;
user-select: all;
}
.setup-intro {
margin: 0 0 12px;
color: var(--ink-soft, #555);
font-size: 13px;
}
.password-policy-panel {
display: grid;
gap: 4px;
margin-top: -4px;
}
.password-policy-strength {
font-size: 12px;
font-weight: 700;
color: var(--ink-soft);
}
.password-policy-strength[data-password-strength="weak"] {
color: #9b2c2c;
}
.password-policy-strength[data-password-strength="medium"] {
color: #9a6700;
}
.password-policy-strength[data-password-strength="strong"] {
color: #1f6b45;
}
.password-policy-requirements {
font-size: 12px;
color: var(--ink-soft);
}
.password-policy-requirements[data-password-policy-state="valid"] {
color: #1f6b45;
}
.password-policy-requirements[data-password-policy-state="invalid"] {
color: #9b2c2c;
}
.login-hint {
margin-top: 16px;
font-size: 12px;
color: var(--ink-soft);
}
.login-mfa-panel .login-hint,
.login-reset-panel .login-hint {
margin-top: 0;
}
.ghost-link {
border: 0;
background: transparent;
color: var(--accent-2);
padding: 0;
font: inherit;
font-size: 13px;
cursor: pointer;
text-align: left;
}
.ghost-link:hover {
text-decoration: underline;
}
.app-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.license-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 18px;
background: linear-gradient(90deg, #f2cd4f 0%, #f7dd7a 100%);
color: #5f4300;
border-bottom: 1px solid rgba(95, 67, 0, 0.18);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}
.license-banner[data-license-banner-tone="critical"] {
background: linear-gradient(90deg, #e2a83d 0%, #f0c767 100%);
color: #5f4300;
}
.license-banner[data-license-banner-tone="warning"] {
background: linear-gradient(90deg, #f4d978 0%, #fae8ab 100%);
color: #6b520d;
}
.license-banner-text {
flex: 1 1 auto;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
text-align: center;
}
.license-banner-dismiss {
flex: 0 0 auto;
width: 28px;
height: 28px;
border: 1px solid rgba(95, 67, 0, 0.25);
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
color: inherit;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.license-banner-dismiss:hover {
background: rgba(255, 255, 255, 0.34);
}
.topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 24px;
background: var(--accent);
color: #f5efe8;
}
.topbar .ghost {
color: #fff;
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.14);
}
.topbar .ghost:hover {
background: rgba(255, 255, 255, 0.22);
}
.topbar .primary {
background: #f5efe8;
color: var(--accent);
}
.save-toast {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
padding: 8px 14px;
background: #efe7dd;
border: 1px solid var(--muted);
border-radius: 999px;
font-size: 12px;
z-index: 50;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
pointer-events: none;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
letter-spacing: 0.4px;
}
.brand-logo {
width: 28px;
height: 28px;
object-fit: contain;
display: inline-block;
}
.login-title .brand-logo {
width: 42px;
height: 42px;
}
.topbar-actions {
display: flex;
gap: 12px;
align-items: center;
}
.settings-menu {
position: relative;
display: inline-flex;
align-items: center;
}
.settings-dropdown {
position: absolute;
right: 0;
top: calc(100% + 8px);
background: var(--canvas);
border: 1px solid var(--muted);
border-radius: 12px;
box-shadow: 0 14px 30px rgba(35, 26, 16, 0.18);
padding: 8px;
display: none;
flex-direction: column;
gap: 6px;
min-width: 180px;
z-index: 50;
}
.settings-menu:hover .settings-dropdown,
.settings-menu:focus-within .settings-dropdown,
.settings-menu.settings-menu-open .settings-dropdown {
display: flex;
}
.settings-menu.settings-menu-closed .settings-dropdown {
display: none !important;
}
.settings-dropdown .ghost {
justify-content: flex-start;
width: 100%;
color: var(--accent);
border-color: #c8beb3;
background: #ffffff;
font-weight: 600;
}
.settings-dropdown .ghost:hover {
background: #f3ece4;
}
.settings-dropdown .ghost .btn-label {
white-space: nowrap;
text-align: left;
}
.settings-language {
display: grid;
gap: 6px;
padding: 6px 4px 2px;
border-top: 1px solid var(--muted);
margin-top: 4px;
}
.settings-language label {
font-size: 12px;
color: var(--ink-soft);
}
.settings-language select {
border-radius: 8px;
padding: 6px 8px;
border: 1px solid var(--muted);
background: #fffaf5;
}
.chip {
background: var(--accent-2);
color: #fff;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
}
.workspace {
flex: 1;
display: grid;
grid-template-columns:
minmax(var(--sidebar-min-width), var(--left-sidebar-width)) minmax(var(--workspace-main-min-width), 1fr) minmax(var(--sidebar-min-width), var(--right-sidebar-width));
gap: 12px;
padding: 12px;
height: calc(100vh - 56px);
overflow: hidden;
align-items: stretch;
min-height: 0;
}
.workspace.sidebar-left-collapsed {
grid-template-columns: 30px minmax(var(--workspace-main-min-width), 1fr) var(--right-sidebar-width);
}
.workspace.sidebar-right-collapsed {
grid-template-columns: var(--left-sidebar-width) minmax(var(--workspace-main-min-width), 1fr) 30px;
}
.workspace.sidebar-left-collapsed.sidebar-right-collapsed {
grid-template-columns: 30px 1fr 30px;
}
.workspace.project-home-mode {
grid-template-columns:
minmax(var(--sidebar-min-width), var(--left-sidebar-width)) minmax(var(--workspace-main-min-width), 1fr);
}
.workspace.project-home-mode.sidebar-left-collapsed {
grid-template-columns: 30px minmax(var(--workspace-main-min-width), 1fr);
}
.workspace.project-home-mode .meta-sidebar {
display: none !important;
}
.sidebar,
.meta-sidebar,
.doc-sidebar {
background: var(--sidebars);
border-radius: 14px;
padding: 12px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
overflow: hidden;
max-height: 100%;
height: 100%;
position: relative;
min-height: 0;
}
.meta-sidebar {
display: flex;
flex-direction: column;
min-height: 0;
}
.project-home-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin-bottom: 12px;
}
.project-home-shortcuts {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
gap: 12px;
}
.project-home-shortcut-grid {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 10px;
}
.project-home-shortcut-card,
.project-home-last-doc-card {
border: 1px solid #d8ded4;
border-radius: 8px;
background: #fbfffc;
color: var(--ink);
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 92px;
padding: 14px;
text-align: left;
width: 100%;
}
.project-home-shortcut-card,
.project-home-last-doc-card-active {
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.project-home-shortcut-card:hover,
.project-home-last-doc-card-active:hover {
background: #f2fbf4;
border-color: #8ab693;
transform: translateY(-1px);
}
.project-home-shortcut-icon {
flex: 0 0 auto;
height: 22px;
margin-top: 2px;
width: 22px;
}
.project-home-shortcut-body {
display: grid;
gap: 5px;
min-width: 0;
}
.project-home-shortcut-kicker,
.project-home-shortcut-text {
color: #5f6b60;
font-size: 12px;
line-height: 1.35;
}
.project-home-shortcut-title {
color: var(--ink);
font-size: 15px;
font-weight: 800;
line-height: 1.25;
overflow-wrap: anywhere;
}
.project-home-last-doc-card {
background: #f8fbff;
border-color: #d6e0eb;
}
.project-home-last-doc-card-active:hover {
background: #eef6ff;
border-color: #8ab0d5;
}
.project-home-meta-card {
border: 1px solid var(--muted);
border-radius: 8px;
background: #fffdf9;
padding: 10px 12px;
}
.project-home-meta-label {
font-size: 12px;
color: #6f6a60;
margin-bottom: 4px;
}
.project-home-meta-value {
font-weight: 700;
color: var(--ink);
word-break: break-word;
}
.project-home-meta-link {
color: var(--accent-2);
text-decoration: underline;
}
.project-home-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
gap: 8px;
}
.project-home-status-item {
border: 1px solid var(--muted);
border-radius: 8px;
background: #fff;
padding: 8px;
display: grid;
gap: 4px;
width: 100%;
text-align: left;
}
.project-home-clickable {
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.project-home-clickable:hover {
background: #fff5ef;
border-color: #d8b39a;
}
.project-home-link-btn {
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: 800;
padding: 0;
cursor: pointer;
text-align: left;
}
.project-home-link-btn:hover {
color: var(--accent-2);
text-decoration: underline;
}
.project-home-status-count {
font-size: 22px;
font-weight: 800;
line-height: 1;
}
.project-home-status-label {
font-size: 12px;
color: #5d574d;
}
@media (max-width: 1100px) {
.project-home-shortcuts {
grid-template-columns: 1fr;
}
.project-home-shortcut-grid {
grid-template-columns: repeat(2, minmax(160px, 1fr));
}
}
@media (max-width: 640px) {
.project-home-shortcut-grid {
grid-template-columns: 1fr;
}
}
.meta-sidebar .panel-header,
.meta-sidebar .sidebar-collapsed-header {
flex: 0 0 auto;
}
.sidebar-toggle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
padding: 0;
}
.sidebar-collapsed {
padding: 4px 1px;
overflow: hidden;
}
.sidebar-collapsed .panel-header,
.sidebar-collapsed .panel-tabs,
.sidebar-collapsed .tree,
.sidebar-collapsed .list,
.sidebar-collapsed .meta-panel,
.sidebar-collapsed #metaPanel,
.sidebar-collapsed #metaQuickReview {
display: none;
}
.sidebar-collapsed #metaPanel,
.sidebar-collapsed #metaPanel.meta-workitem-mode,
.sidebar-collapsed #metaPanel.meta-standard-split-mode,
.sidebar-collapsed #metaQuickReview {
display: none !important;
}
.sidebar-collapsed .sidebar-toggle {
display: inline-flex;
}
.sidebar-collapsed .sidebar-collapsed-header {
display: flex;
justify-content: center;
margin-top: 8px;
}
.sidebar-collapsed .sidebar-header {
display: none;
}
.sidebar-collapsed-header {
display: none;
}
.sidebar:not(.sidebar-collapsed) .sidebar-collapsed-header {
display: none;
}
.meta-sidebar:not(.sidebar-collapsed) .sidebar-collapsed-header {
display: none;
}
.sidebar {
display: flex;
flex-direction: column;
min-height: 0;
}
.sidebar .panel-header,
.sidebar .panel-tabs {
flex: 0 0 auto;
}
#projectTree {
overflow: auto;
min-height: 0;
flex: 1 1 auto;
max-height: 100%;
}
#metaPanel {
overflow: auto;
min-height: 0;
flex: 1 1 auto;
}
#metaPanel.meta-workitem-mode {
overflow: hidden;
display: flex;
flex-direction: column;
}
#metaPanel.meta-standard-split-mode {
overflow: hidden;
display: flex;
flex-direction: column;
}
#metaPanel.meta-workitem-mode .meta-split {
height: 100%;
min-height: 0;
}
#metaPanel.meta-standard-split-mode .meta-split {
height: 100%;
min-height: 0;
}
#metaPanel.meta-workitem-mode .meta-split.has-comments {
display: grid;
grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
gap: 12px;
}
#metaPanel.meta-standard-split-mode .meta-split.has-comments {
display: grid;
grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);
gap: 12px;
}
#metaPanel.meta-workitem-mode .meta-split.no-comments {
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
}
#metaPanel.meta-workitem-mode .meta-split.no-comments .meta-top {
height: 100%;
min-height: 0;
}
#metaPanel.meta-workitem-mode .meta-split.comments-only {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 8px;
}
#metaPanel.meta-workitem-mode .meta-split.comments-only .meta-bottom {
display: flex;
border-top: 1px dashed #d8cbbb;
padding: 12px;
background: #ffffff;
border-radius: 12px;
box-shadow: inset 0 0 0 1px #e6dbcf;
}
#metaPanel.meta-workitem-mode .meta-split.comments-only.no-comments .meta-bottom {
display: flex;
}
#metaPanel.meta-workitem-mode .meta-split.comments-only #metaCommentsSection {
height: 100%;
display: flex;
flex-direction: column;
min-height: 0;
}
#metaPanel.meta-workitem-mode .meta-top.comments-toolbar-only {
flex: 0 0 auto;
overflow: visible;
padding-bottom: 0;
}
#metaPanel.meta-workitem-mode .meta-split.comments-hidden {
display: grid;
grid-template-rows: minmax(0, 1fr);
gap: 0;
}
#metaPanel.meta-workitem-mode .meta-split.comments-hidden .meta-top {
height: 100%;
min-height: 0;
}
#metaPanel.meta-workitem-mode .meta-split.comments-hidden .meta-bottom {
display: none !important;
}
#metaPanel.meta-workitem-mode .meta-top,
#metaPanel.meta-workitem-mode .meta-bottom {
overflow: auto;
min-height: 0;
}
#metaPanel.meta-standard-split-mode .meta-top,
#metaPanel.meta-standard-split-mode .meta-bottom {
overflow: auto;
min-height: 0;
}
#metaPanel.meta-standard-split-mode .meta-standard-toggle {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
#metaPanel.meta-standard-split-mode .meta-view-toggle {
border: 1px solid #d8cbbb;
background: #fffaf5;
color: #594f44;
border-radius: 999px;
font-size: 12px;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
}
#metaPanel.meta-standard-split-mode .meta-view-toggle.active {
background: #2d5b4e;
border-color: #2d5b4e;
color: #ffffff;
}
#metaPanel.meta-workitem-mode .workitem-meta-toggle {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 2px;
}
#metaPanel.meta-workitem-mode .workitem-meta-toggle .meta-view-toggle {
border: 1px solid #d8cbbb;
background: #fffaf5;
color: #594f44;
border-radius: 999px;
font-size: 12px;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
}
#metaPanel.meta-workitem-mode .workitem-meta-toggle .meta-view-toggle.active {
background: #2d5b4e;
border-color: #2d5b4e;
color: #ffffff;
}
#metaPanel.meta-workitem-mode .workitem-meta-section {
display: grid;
gap: 10px;
border-top: 2px dotted #b55454;
padding-top: 20px;
margin-bottom: 20px;
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-review {
grid-template-rows: minmax(0, 1fr);
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-review .meta-bottom {
display: none;
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-comments {
grid-template-rows: minmax(0, 1fr);
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-comments .meta-top {
display: none;
}
.main {
background: transparent;
display: flex;
flex-direction: column;
gap: 12px;
overflow: hidden;
min-height: 0;
height: 100%;
position: relative;
}
.main-header {
background: var(--canvas);
border-radius: 14px;
padding: 12px 16px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
display: flex;
justify-content: space-between;
align-items: center;
}
.view-load-indicator {
position: fixed;
top: 56px;
left: 50%;
transform: translateX(-50%);
z-index: 49;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid var(--muted);
border-radius: 999px;
background: rgba(255, 250, 244, 0.94);
box-shadow: 0 8px 24px rgba(86, 52, 32, 0.12);
color: var(--ink-soft);
font-size: 13px;
backdrop-filter: blur(6px);
pointer-events: none;
max-width: calc(100vw - 32px);
white-space: nowrap;
}
.view-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
flex-direction: row;
align-content: stretch;
justify-content: flex-end;
align-items: stretch;
}
.project-title-row {
display: flex;
align-items: center;
gap: 10px;
margin-right: 10px;
}
.project-title {
font-size: 18px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
}
.project-title-icon {
width: 20px;
height: 20px;
flex: 0 0 20px;
}
.project-title.no-project .project-title-icon {
display: none;
}
.home-panel {
background: var(--canvas);
border-radius: 14px;
padding: 12px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
display: flex;
flex-direction: column;
gap: 12px;
overflow: auto;
height: 100%;
}
.home-content {
min-height: 300px;
border: 1px dashed var(--muted);
border-radius: 10px;
padding: 10px;
background: #fffaf5;
flex: 1;
width: 100%;
}
.home-hint {
font-size: 12px;
color: var(--ink-soft);
}
.home-toolbar {
display: flex;
gap: 6px;
align-items: center;
}
.comment-bubble {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 6px;
vertical-align: middle;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E") no-repeat center / contain;
cursor: pointer;
flex: 0 0 18px;
align-self: center;
}
.comment-bubble.pm-comment-bubble,
.comment-bubble.comment-bubble-workitem {
margin-right: 4px;
}
.comment-bubble.pm-comment-bubble {
width: 0.95em;
height: 0.95em;
margin-left: 0.32em;
margin-right: 0;
line-height: 0;
vertical-align: text-top;
flex: none;
align-self: auto;
}
.comment-bubble.comment-bubble-workitem {
margin-left: 8px;
}
.pm-comment-highlight {
border-radius: 3px;
box-shadow: inset 0 -0.45em 0 rgba(45, 91, 78, 0.18);
}
.pm-comment-highlight.pm-comment-highlight-closed {
box-shadow: inset 0 -0.45em 0 rgba(126, 118, 109, 0.16);
opacity: 0.72;
}
.comment-btn {
border: none;
background: transparent;
padding: 0;
}
.row-actions .comment-bubble {
margin-left: 0;
}
.meta-subtle {
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 6px;
margin-top: 10px;
}
.comment-list {
display: grid;
align-content: start;
align-items: start;
grid-auto-rows: max-content;
gap: 10px;
width: 100%;
padding: 0;
margin: 0;
}
.comment-row {
border: 1px solid #e2d7c9;
background: #fffaf5;
border-radius: 10px;
padding: 10px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.comment-row.comment-thread-row {
transform: translateX(0);
opacity: 1;
transition:
background-color 260ms ease,
border-color 260ms ease,
color 260ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
opacity 220ms ease,
max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
padding 320ms cubic-bezier(0.4, 0, 0.2, 1),
margin 320ms cubic-bezier(0.4, 0, 0.2, 1),
border-width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.comment-row.comment-thread-row .comment-title,
.comment-row.comment-thread-row .comment-meta,
.comment-row.comment-thread-row .comment-row-body,
.comment-row.comment-thread-row .comment-source-badge,
.comment-row.comment-thread-row .comment-inline-btn,
.comment-row.comment-thread-row .comment-status {
transition:
color 220ms ease,
background-color 220ms ease,
border-color 220ms ease;
}
.comment-row.comment-thread-row.comment-thread-row-status-changing {
box-shadow: 0 0 0 1px rgba(52, 106, 80, 0.08);
}
.comment-row.comment-thread-row.comment-thread-row-closing {
transform: translateX(18px) scale(0.992);
opacity: 0;
pointer-events: none;
}
.comment-row.comment-thread-row.comment-thread-row-collapsing {
overflow: hidden;
min-height: 0;
max-height: 0 !important;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
border-width: 0;
}
.comment-row.comment-thread-row.is-closed {
background: #f3f1ed;
border-color: #d8d1c8;
}
.comment-row.comment-thread-row.is-closed .comment-title,
.comment-row.comment-thread-row.is-closed .comment-meta,
.comment-row.comment-thread-row.is-closed .comment-row-body {
color: #7a736a;
}
.comment-row.comment-thread-row.is-closed .comment-source-badge {
border-color: #d2cac0;
background: #ebe5dd;
color: #746b60;
}
.comment-row.comment-thread-row.is-closed .ghost {
border-color: #b9b2a9;
color: #766d63;
}
.review-status-counters {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.review-status-counters-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.review-summary-section .review-status-counters {
margin-bottom: 14px;
}
.review-status-counter {
border: 1px solid #d5c8b7;
border-radius: 10px;
padding: 10px 8px;
background: #f8f3ec;
display: grid;
justify-items: center;
align-content: center;
gap: 2px;
}
.review-status-counter-link {
color: inherit;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.review-status-counter-link:hover {
box-shadow: 0 8px 18px rgba(74, 60, 46, 0.16);
transform: translateY(-1px);
}
.review-status-counter .count {
font-size: 28px;
font-weight: 800;
line-height: 1;
}
.review-status-counter .label {
font-size: 12px;
font-weight: 700;
text-align: center;
}
.review-status-counter.accepted {
border-color: #79b27f;
background: #eaf7ec;
color: #296131;
}
.review-status-counter.rejected {
border-color: #d18484;
background: #fdeeee;
color: #9f2d2d;
}
.review-status-counter.pending {
border-color: #81a8db;
background: #eaf2ff;
color: #1f4f8e;
}
.review-status-counter.unassigned {
border-color: #b9b2a9;
background: #f3f3f3;
color: #5f5b55;
}
.review-summary-header {
align-items: center;
gap: 8px;
}
.review-filter-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}
.review-filter-icon {
display: inline-flex;
width: 14px;
height: 14px;
}
.review-filter-icon svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.review-filter-popover {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fffaf5;
padding: 10px;
margin-bottom: 8px;
display: grid;
gap: 8px;
}
.review-filter-title {
font-weight: 700;
font-size: 12px;
}
.review-filter-list {
display: grid;
gap: 6px;
max-height: 160px;
overflow: auto;
}
.review-filter-option {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
}
.review-filter-actions {
display: flex;
justify-content: flex-end;
}
.review-workitem-row.review-state-none {
background: #f3f3f3;
}
.review-workitem-row.review-state-self-pending {
background: #fff8db;
}
.review-workitem-row.review-state-others-pending {
background: #edf4ff;
}
.review-workitem-row.review-state-accepted {
background: #edf9ef;
}
.review-workitem-row.review-state-rejected {
background: #fdeeee;
}
.comment-title {
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 6px;
}
.comment-source-line {
display: flex;
margin-bottom: 6px;
}
.comment-source-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
border: 1px solid #d7cbbf;
background: #f6efe7;
color: #5a5147;
}
.comment-source-badge.document {
border-color: #c3b2dd;
background: #f4eefb;
color: #5a3f82;
}
.comment-source-badge.workitem {
border-color: #d6ba87;
background: #fbf2df;
color: #7a5420;
}
.comment-row-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 6px;
}
.comment-meta {
color: var(--ink-soft);
margin-left: 6px;
}
.comment-row-body {
color: var(--ink);
font-size: 13px;
}
.comment-thread-toolbar {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
margin-top: 10px;
}
.comment-thread-actions {
display: flex;
width: 100%;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 6px;
}
.comment-inline-btn {
padding: 4px 8px;
font-size: 12px;
}
.comment-thread-toggle {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: flex-start;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
line-height: 1.2;
}
.comment-thread-toggle-label {
white-space: normal;
}
.comment-thread-toggle-spacer {
min-height: 1px;
}
.comment-thread-arrow {
display: inline-flex;
transition: transform 220ms ease;
}
.comment-thread-toggle[aria-expanded="true"] .comment-thread-arrow {
transform: rotate(90deg);
}
.comment-thread-children {
margin-top: 8px;
margin-left: 14px;
padding-left: 12px;
border-left: 2px solid #e4d6c6;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-4px);
transition:
max-height 320ms ease,
opacity 260ms ease,
transform 260ms ease;
}
.comment-thread-children.is-expanded {
opacity: 1;
transform: translateY(0);
}
.comment-thread-child+.comment-thread-child {
margin-top: 8px;
}
.comment-entry.comment-entry-reply {
margin-bottom: 0;
background: #fffdf9;
}
.comment-status {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid #d7cbbf;
background: #f6efe7;
color: #5a5147;
text-transform: capitalize;
}
.comment-status.closed {
background: #ede7df;
color: #7d746a;
}
.comment-filter {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 8px;
}
.meta-split {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
gap: 12px;
}
.meta-split.has-comments {
flex: 1 1 auto;
min-height: 0;
}
.meta-top,
.meta-bottom {
flex: 1 1 50%;
overflow: hidden;
min-height: 0;
}
.meta-top {
padding-bottom: 4px;
display: flex;
flex-direction: column;
gap: 10px;
overflow: auto;
}
.meta-split.has-comments .meta-top {
flex: 2 1 0;
}
.meta-split.has-comments .meta-bottom {
flex: 1 1 0;
border-top: 1px dashed #d8cbbb;
padding: 12px;
background: #ffffff;
border-radius: 12px;
box-shadow: inset 0 0 0 1px #e6dbcf;
display: flex;
flex-direction: column;
gap: 10px;
}
.meta-split.no-comments {
height: 100%;
min-height: 0;
}
.meta-split.no-comments .meta-bottom {
display: none;
}
.meta-bottom .comment-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
max-height: none;
padding-bottom: 6px;
box-sizing: border-box;
}
.meta-bottom .comment-row:last-child {
margin-bottom: 0;
}
.meta-bottom .comment-filter {
margin-bottom: 4px;
}
#metaCommentsSection,
.meta-comments-resizable {
display: flex;
flex-direction: column;
gap: 10px;
}
.meta-comments-resizable {
min-height: 0;
max-height: none;
}
#metaCommentsSection {
min-height: 0;
max-height: none;
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-comments .meta-bottom {
display: flex;
flex-direction: column;
min-height: 0;
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-comments .meta-comments-resizable {
flex: 1 1 auto;
height: 100%;
min-height: 0;
max-height: none;
}
#metaPanel.meta-standard-split-mode .meta-standard-split.mode-comments .comment-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
max-height: none;
}
.meta-comments-resizable .comment-list,
#metaCommentsSection .comment-list {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
max-height: none;
}
.meta-split.no-comments .meta-top {
flex: 1 1 auto;
}
.danger {
background: #b74a3a;
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
}
.danger:hover {
background: #a13f31;
}
.comment-entry {
border: 1px solid #e2d7c9;
background: #fffaf5;
border-radius: 10px;
padding: 10px;
margin-bottom: 8px;
}
.comment-entry-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 6px;
}
.comment-entry-body {
font-size: 13px;
color: var(--ink);
}
.icon-btn.small {
padding: 2px 6px;
border-radius: 8px;
}
.comment-bubble.closed {
filter: grayscale(1) brightness(0.85);
opacity: 0.3;
}
.comment-anchor {
display: inline-block;
width: 0;
height: 0;
}
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 800;
margin-bottom: 8px;
margin-top: 12px;
font-size: 16px;
}
.panel-actions {
display: flex;
gap: 6px;
}
.panel-tabs {
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.tab-btn {
background: #efe7dd;
border: 1px solid var(--muted);
padding: 6px 10px;
border-radius: 10px;
cursor: pointer;
font-size: 12px;
}
.tab-btn.active {
background: var(--accent);
color: #fff;
}
.view {
display: none;
min-height: 0;
}
.view.active {
display: flex !important;
flex-direction: column;
min-height: 0;
flex: 1;
}
#profileView.active {
overflow: auto;
padding-right: 4px;
}
.tree {
font-size: 13px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: stretch;
justify-content: flex-start;
margin-bottom: 10px;
}
.tree-item {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
justify-content: space-between;
}
.tree-item .tree-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.folder-icon {
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b5b4b' d='M10 4l2 2h8a2 2 0 0 1 2 2v8a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6z'/%3E%3C/svg%3E");
}
.tree-item.folder-open .folder-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b5b4b' d='M3 6a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v2H4a2 2 0 0 0-2 2v-4z'/%3E%3Cpath fill='%239a846f' d='M4 10h18a2 2 0 0 1 2 2v4a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}
.tree-item.active {
background: #efe7dd;
}
.tree-children {
margin-left: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.tree-children.collapsed {
display: none;
}
.group-toggle {
width: 14px;
height: 14px;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
background-size: 10px 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b5b4b' d='M6 9l6 6 6-6z'/%3E%3C/svg%3E");
}
.group-toggle:not(.has-children) {
opacity: 0.3;
}
.tree-item.group-collapsed .group-toggle {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236b5b4b' d='M9 6l6 6-6 6z'/%3E%3C/svg%3E");
}
.project-icon {
width: 20px;
height: 20px;
border-radius: 6px;
border: 1px solid #d6c8b8;
display: inline-flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
background-size: 18px 18px;
background-color: #fffaf5;
}
.project-icon[data-icon-key="icon-01"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%232d5b4e%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%277%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-02"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%23a15333%27/%3E%3Crect%20x%3D%276%27%20y%3D%276%27%20width%3D%2712%27%20height%3D%2712%27%20rx%3D%272%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-03"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%233b6ea8%27/%3E%3Cpolygon%20points%3D%2712%2C5%2019%2C19%205%2C19%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-04"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%238a3d7a%27/%3E%3Cpolygon%20points%3D%2712%2C4%2015%2C10%2022%2C10%2017%2C14%2019%2C20%2012%2C16%205%2C20%207%2C14%202%2C10%209%2C10%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-05"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%23a1322f%27/%3E%3Cpath%20d%3D%27M12%2020s-6-4-8-8c-1-2%200-5%203-6%202-1%204%200%205%202%201-2%203-3%205-2%203%201%204%204%203%206-2%204-8%208-8%208z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-06"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%235a7d9a%27/%3E%3Cpath%20d%3D%27M10%203h4l-2%207h4l-6%2011%202-8H8z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-07"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%238d6b4f%27/%3E%3Cpath%20d%3D%27M6%2012l3%203%209-9%202%202-11%2011-5-5z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-08"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%236b5b4b%27/%3E%3Cpath%20d%3D%27M7%205h10v12H7z%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M7%205h6l4%204H7z%27%20fill%3D%27%2523f5efe8%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-09"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%235d7a6a%27/%3E%3Cpolygon%20points%3D%2712%2C4%2019%2C8%2019%2C16%2012%2C20%205%2C16%205%2C8%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-10"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%238b7d5a%27/%3E%3Cpolygon%20points%3D%2712%2C4%2020%2C12%2012%2C20%204%2C12%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-11"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%234b6f85%27/%3E%3Cpath%20d%3D%27M5%2011h14v2H5z%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M11%205h2v14h-2z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-12"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%238a5a5a%27/%3E%3Cpath%20d%3D%27M5%2011h14v2H5z%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-13"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%236a7b8a%27/%3E%3Cpath%20d%3D%27M6%206l12%2012%27%20stroke%3D%27white%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M18%206l-12%2012%27%20stroke%3D%27white%27%20stroke-width%3D%272%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-14"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%237b6a8a%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%276%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20fill%3D%27none%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-15"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%237a844a%27/%3E%3Cpath%20d%3D%27M7%2012c2-3%208-3%2010%200%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20fill%3D%27none%27/%3E%3Ccircle%20cx%3D%278%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27white%27/%3E%3Ccircle%20cx%3D%2716%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27white%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-16"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%236a4a7a%27/%3E%3Cpath%20d%3D%27M8%204h8v16H8z%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M8%208h8%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%2012h8%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-17"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%235a6b4a%27/%3E%3Cpath%20d%3D%27M4%207h16v10H4z%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M4%2010h16%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M8%207v10%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-18"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%23864f3f%27/%3E%3Cpath%20d%3D%27M6%206h12v12H6z%27%20fill%3D%27white%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%20fill%3D%27%2523f5efe8%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-19"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%234a7a6b%27/%3E%3Cpath%20d%3D%27M5%206h14v12H5z%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M9%206v12%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3Cpath%20d%3D%27M15%206v12%27%20stroke%3D%27%2523f5efe8%27%20stroke-width%3D%272%27/%3E%3C/svg%3E");
}
.project-icon[data-icon-key="icon-20"] {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Crect%20width%3D%2724%27%20height%3D%2724%27%20rx%3D%276%27%20fill%3D%27%237a4a4a%27/%3E%3Cpath%20d%3D%27M6%204h12v16H6z%27%20fill%3D%27white%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%278%27%20r%3D%272%27%20fill%3D%27%2523f5efe8%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%272%27%20fill%3D%27%2523f5efe8%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2716%27%20r%3D%272%27%20fill%3D%27%2523f5efe8%27/%3E%3C/svg%3E");
}
.icon-picker {
display: grid;
grid-template-columns: repeat(5, 36px);
gap: 10px;
}
.icon-picker-item {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid #d6c8b8;
background: #fffaf5;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.icon-picker-item .project-icon {
width: 20px;
height: 20px;
}
.icon-picker-item.active {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(45, 91, 78, 0.25);
}
#documentList .list-item {
padding: 6px 8px;
border-radius: 8px;
display: flex;
align-items: flex-start;
--doc-item-bg: #f7f1e9;
}
#documentList .list-item.active {
background: #efe7dd;
--doc-item-bg: #efe7dd;
}
#documentList .doc-label {
width: 100%;
min-width: 0;
}
.versions-actions {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.version-item {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.version-item input[type="checkbox"] {
width: 16px;
height: 16px;
}
.project-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.project-fav {
width: 18px;
height: 18px;
border: none;
background: transparent;
padding: 0;
opacity: 0;
cursor: pointer;
color: #9b8d7c;
mask-repeat: no-repeat;
mask-position: center;
mask-size: 16px 16px;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: 16px 16px;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l3 6 6 .9-4.5 4.4L17 21l-5-2.7L7 21l1.5-6.7L4 9.9 10 9z'/%3E%3C/svg%3E");
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l3 6 6 .9-4.5 4.4L17 21l-5-2.7L7 21l1.5-6.7L4 9.9 10 9z'/%3E%3C/svg%3E");
background-color: currentColor;
}
.project-item:hover .project-fav,
.project-fav.active {
opacity: 1;
}
.project-fav.active {
color: #c08b2c;
}
.doc-label {
display: flex;
align-items: flex-start;
gap: 8px;
min-width: 0;
}
.doc-text {
display: flex;
flex-direction: column;
gap: 2px;
line-height: 1.2;
min-width: 0;
flex: 1;
}
.doc-title-text {
font-weight: 600;
position: relative;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.doc-title-text::after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 24px;
height: 100%;
pointer-events: none;
}
.doc-type-badge {
font-size: 11px;
color: var(--ink-soft);
background: #f1e9df;
border: 1px solid var(--muted);
padding: 1px 6px;
border-radius: 999px;
display: inline-flex;
width: fit-content;
}
.doc-icon {
width: 18px;
height: 18px;
border-radius: 4px;
background: #efe7dd;
border: 1px solid var(--muted);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
}
.doc-icon[data-doc-type="test"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M5 4h14v2H5zm0 4h14v10H5zm2 2v6h10v-6z'/%3E%3C/svg%3E");
}
.doc-icon[data-doc-type="specification"] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M6 3h8l4 4v14H6z M14 3v4h4'/%3E%3C/svg%3E");
}
.doc-layout {
display: grid;
grid-template-columns:
minmax(var(--doc-sidebar-min-width), var(--doc-sidebar-width)) minmax(var(--doc-main-min-width), 1fr);
gap: 12px;
min-height: 0;
height: 100%;
flex: 1;
}
.doc-editor {
background: var(--canvas);
border-radius: 14px;
padding: 12px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 0;
height: 100%;
overflow: hidden;
position: relative;
}
.doc-empty {
flex: 1;
display: grid;
place-items: center;
background: #f3ede4;
border-radius: 12px;
border: 1px dashed var(--muted);
}
.doc-empty-card {
background: #ffffff;
border-radius: 16px;
padding: 24px;
max-width: 420px;
text-align: center;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
border: 1px solid var(--muted);
}
.doc-empty-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.doc-empty-text {
color: var(--ink-soft);
font-size: 13px;
}
.doc-sidebar {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.doc-sidebar #documentList {
flex: 1;
min-height: 0;
overflow-y: auto;
}
.toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.doc-editor .toolbar {
gap: 4px;
}
.toolbar .icon {
filter: grayscale(1) brightness(0);
}
.tool-btn,
.icon-btn {
background: #efe7dd;
border: 1px solid var(--muted);
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
}
.doc-editor .toolbar .tool-btn,
.doc-editor .toolbar .icon-btn {
padding: 4px 7px;
font-size: 11px;
min-height: 28px;
line-height: 1.1;
}
.doc-editor .toolbar .tool-btn:disabled,
.doc-editor .toolbar .icon-btn:disabled,
.doc-editor .toolbar .tool-btn.tool-context-disabled,
.doc-editor .toolbar .icon-btn.tool-context-disabled,
.doc-editor .toolbar .tool-btn[aria-disabled="true"],
.doc-editor .toolbar .icon-btn[aria-disabled="true"] {
background: #e5ddd2;
border-color: #c8beaf;
color: #948877;
cursor: not-allowed;
opacity: 0.62;
box-shadow: none;
}
.doc-editor .toolbar .tool-btn:disabled .icon,
.doc-editor .toolbar .icon-btn:disabled .icon,
.doc-editor .toolbar .tool-btn.tool-context-disabled .icon,
.doc-editor .toolbar .icon-btn.tool-context-disabled .icon,
.doc-editor .toolbar .tool-btn[aria-disabled="true"] .icon,
.doc-editor .toolbar .icon-btn[aria-disabled="true"] .icon {
opacity: 0.38;
filter: grayscale(1) brightness(0.85);
}
.tool-btn.icon-only {
width: 36px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.doc-editor .toolbar .tool-btn.icon-only {
width: 30px;
min-width: 30px;
}
.icon {
width: 16px;
height: 16px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.icon-save {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M17 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7zM12 19a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM6 8V5h9v3H6z'/%3E%3C/svg%3E");
}
.icon-refresh {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M17.65 6.35A7.95 7.95 0 0 0 12 4V1L7 6l5 5V7a5 5 0 1 1-4.9 6H5a7 7 0 1 0 12.65-6.65z'/%3E%3C/svg%3E");
}
.icon-export {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M5 20h14v-2H5v2zM12 2l5 5h-3v6h-4V7H7l5-5z'/%3E%3C/svg%3E");
}
.icon-undo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M12 5V2L7 6l5 4V7c3.31 0 6 2.69 6 6a6 6 0 0 1-6 6h-4v2h4a8 8 0 0 0 0-16z'/%3E%3C/svg%3E");
}
.icon-redo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M12 5V2l5 4-5 4V7c-3.31 0-6 2.69-6 6a6 6 0 0 0 6 6h4v2h-4a8 8 0 0 1 0-16z'/%3E%3C/svg%3E");
}
.icon-table {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M3 3h18v18H3zM5 5v4h4V5H5zm6 0v4h8V5h-8zM5 11v8h4v-8H5zm6 0v8h8v-8h-8z'/%3E%3C/svg%3E");
}
.icon-image {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M21 19V5H3v14h18zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h18zM8.5 13.5l2.5 3 3.5-4.5L19 19H5l3.5-5.5zM8 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0z'/%3E%3C/svg%3E");
}
.icon-comment {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M4 4h16v12H7l-3 3V4z'/%3E%3C/svg%3E");
}
.icon-requirement {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M5 4h14v2H5zm0 5h14v2H5zm0 5h10v2H5z'/%3E%3C/svg%3E");
}
.icon-break {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M3 11h18v2H3zM5 4h14v3H5zM5 17h14v3H5z'/%3E%3C/svg%3E");
}
.icon-toc {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M4 5h16v2H4zm0 6h10v2H4zm0 6h16v2H4zm12-6h4v2h-4z'/%3E%3C/svg%3E");
}
.icon-draw {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M4 4h16v2H4zm2 5h12v10H6zM8 11h8v2H8zm0 3h6v2H8z'/%3E%3C/svg%3E");
}
.icon-braces {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M9 3H7c-1.1 0-2 .9-2 2v4c0 .55-.45 1-1 1H3v4h1c.55 0 1 .45 1 1v4c0 1.1.9 2 2 2h2v-2H7v-4c0-1.1-.9-2-2-2 1.1 0 2-.9 2-2V5h2V3zm8 0h-2v2h2v4c0 1.1.9 2 2 2-1.1 0-2 .9-2 2v4h-2v2h2c1.1 0 2-.9 2-2v-4c0-.55.45-1 1-1h1v-4h-1c-.55 0-1-.45-1-1V5c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}
.icon-list {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M5 6h2v2H5zM9 6h10v2H9zM5 11h2v2H5zM9 11h10v2H9zM5 16h2v2H5zM9 16h10v2H9z'/%3E%3C/svg%3E");
}
.icon-toc-panel {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M3 4h18v16H3zM5 6v12h6V6H5zm8 1h6v2h-6zm0 4h6v2h-6zm0 4h6v2h-6z'/%3E%3C/svg%3E");
}
.icon-list-ol {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M4 6h2V4H3v1h1v1zM4 11h2v-2H3v1h1v1zM3 16h3v2H3v-1h2v-1H3zM9 6h10v2H9zM9 11h10v2H9zM9 16h10v2H9z'/%3E%3C/svg%3E");
}
.icon-eraser {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M16.24 3.56 21 8.32a2 2 0 0 1 0 2.83l-7.3 7.3a2 2 0 0 1-1.42.59H6.5a2 2 0 0 1-1.41-.59L3 16.36a2 2 0 0 1 0-2.83l8.07-8.07a2 2 0 0 1 2.83 0l2.34 2.1zM7.91 18h4.08l6.3-6.3-4.08-4.08-7.3 7.3L7.9 18z'/%3E%3C/svg%3E");
}
.icon-brush {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23d63b3b' d='M7 14c-2.21 0-4 1.79-4 4 0 2.21 1.79 4 4 4 2.21 0 4-1.79 4-4 0-.56-.12-1.1-.33-1.6.63-.27 1.2-.66 1.7-1.16l7.85-7.85a2 2 0 0 0 0-2.83l-1.41-1.41a2 2 0 0 0-2.83 0L8.2 9.0C7.7 9.5 7.31 10.07 7.04 10.7 6.54 10.88 6 11 5.44 11c-.8 0-1.54-.21-2.18-.58.33 1.71 1.85 3 3.74 3z'/%3E%3C/svg%3E");
}
.icon-ai {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fffdf8' d='M12 2a2 2 0 0 1 2 2v1.1a6.5 6.5 0 0 1 4.9 4.9H20a2 2 0 1 1 0 4h-1.1a6.5 6.5 0 0 1-4.9 4.9V20a2 2 0 1 1-4 0v-1.1a6.5 6.5 0 0 1-4.9-4.9H4a2 2 0 1 1 0-4h1.1a6.5 6.5 0 0 1 4.9-4.9V4a2 2 0 0 1 2-2zm0 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E");
}
.ai-tool-btn {
position: relative;
color: #fffdf8;
background: linear-gradient(135deg, #f45d3a 0%, #e02e6c 55%, #6d1b7b 100%);
border-color: #f7c08c;
box-shadow: 0 0 0 1px rgba(255, 236, 205, 0.8), 0 0 14px rgba(231, 85, 66, 0.55);
display: inline-flex;
align-items: center;
gap: 6px;
padding-inline: 8px;
}
.toolbar .ai-tool-btn .icon {
filter: none;
}
.ai-tool-btn:hover {
filter: saturate(1.1) brightness(1.05);
}
.ai-tool-btn::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 10px;
border: 1px solid rgba(255, 228, 176, 0.95);
opacity: 0.9;
pointer-events: none;
}
.doc-editor .toolbar .ai-tool-btn:disabled,
.doc-editor .toolbar .ai-tool-btn.tool-context-disabled,
.doc-editor .toolbar .ai-tool-btn[aria-disabled="true"] {
background: #d8d0c5;
border-color: #b8ae9f;
color: #8d8273;
box-shadow: none;
}
.doc-editor .toolbar .ai-tool-btn:disabled::after,
.doc-editor .toolbar .ai-tool-btn.tool-context-disabled::after,
.doc-editor .toolbar .ai-tool-btn[aria-disabled="true"]::after {
opacity: 0.2;
}
body.format-brush-active .doc-canvas,
body.format-brush-active .mini-editor {
cursor: copy;
}
.icon-align-left {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M3 5h18v2H3zm0 4h10v2H3zm0 4h18v2H3zm0 4h10v2H3z'/%3E%3C/svg%3E");
}
.icon-align-center {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M3 5h18v2H3zm4 4h10v2H7zm-4 4h18v2H3zm4 4h10v2H7z'/%3E%3C/svg%3E");
}
.icon-align-right {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M3 5h18v2H3zm8 4h10v2H11zm-8 4h18v2H3zm8 4h10v2H11z'/%3E%3C/svg%3E");
}
.tool-select {
padding: 6px;
border-radius: 8px;
border: 1px solid var(--muted);
background: #efe7dd;
}
.doc-editor .toolbar .tool-select {
padding: 4px 6px;
font-size: 11px;
min-height: 28px;
}
.tool-color {
position: relative;
}
.tool-color-btn {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tool-color-chip {
width: 12px;
height: 12px;
border-radius: 2px;
border: 1px solid #b9aca0;
background: #1d1b1a;
display: inline-block;
}
.tool-color-chip.is-empty {
background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, #d63b3b 45%, #d63b3b 55%, #ffffff 55%, #ffffff 100%);
}
.tool-color-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 210px;
padding: 8px;
border: 1px solid #d8cbbb;
border-radius: 10px;
background: #fffaf5;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
z-index: 30;
display: grid;
gap: 8px;
}
.tool-color-title {
font-size: 11px;
color: var(--ink-soft);
font-weight: 700;
}
.tool-color-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.tool-color-swatch {
width: 26px;
height: 22px;
border: 1px solid #c4b6a5;
border-radius: 4px;
cursor: pointer;
padding: 0;
}
.tool-color-clear {
width: 100%;
justify-content: center;
}
.divider {
width: 1px;
height: 22px;
background: var(--muted);
margin: 0 4px;
}
.doc-title {
width: 100%;
font-size: 16px;
border: 1px solid var(--muted);
padding: 6px 10px;
border-radius: 8px;
min-height: 34px;
background: #fffaf5;
}
.doc-type-select {
border: 1px solid var(--muted);
padding: 6px 9px;
border-radius: 8px;
background: #fffaf5;
font-size: 13px;
min-width: 138px;
min-height: 34px;
}
.inline-select {
border: 1px solid var(--muted);
padding: 4px 8px;
border-radius: 8px;
background: #fffaf5;
font-size: 12px;
}
.template-manager-section {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid #e5d7ca;
border-radius: 12px;
background: linear-gradient(180deg, #fffdfa 0%, #fff7ef 100%);
margin: 12px 0;
}
.template-manager-section-accent {
border-color: #f0c6a8;
background: linear-gradient(180deg, #fff9f2 0%, #fff2e6 100%);
}
.template-manager-section-header {
display: grid;
gap: 4px;
}
.template-manager-section-header > div:first-child {
font-weight: 700;
color: #5d3b22;
}
.template-preview-mode-switch {
display: inline-flex;
gap: 6px;
margin: 10px 0 8px;
padding: 4px;
border: 1px solid #e5d7ca;
border-radius: 999px;
background: #fffaf5;
}
.template-preview-mode-switch .tool-btn {
min-width: 96px;
border-radius: 999px;
}
.template-split-editor {
display: grid;
}
.template-split-pane {
min-width: 0;
}
.template-split-editor[data-template-view-mode="preview"] .template-split-pane-html,
.template-split-editor[data-template-view-mode="html"] .template-split-pane-preview {
display: none;
}
.template-split-editor[data-template-view-mode="preview"] .template-split-pane-preview,
.template-split-editor[data-template-view-mode="html"] .template-split-pane-html {
display: block;
}
.template-preview-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 8px;
border: 1px solid #e5d7ca;
border-radius: 10px;
background: #fffaf5;
margin-bottom: 8px;
}
.template-preview-toolbar-compact {
gap: 6px;
padding: 6px;
position: sticky;
top: 0;
z-index: 2;
}
.template-preview-toolbar-group {
display: flex;
gap: 6px;
align-items: center;
padding-right: 6px;
border-right: 1px solid #ead9c8;
}
.template-preview-toolbar-group:last-child {
border-right: 0;
padding-right: 0;
}
.template-preview-toolbar .tool-btn {
min-width: 30px;
min-height: 28px;
padding: 4px 8px;
font-size: 11px;
}
.template-preview-toolbar .tool-btn.is-active {
background: #ffe4c7;
border-color: #e28a3b;
color: #8a4e1c;
}
.template-preview-italic {
font-style: italic;
}
.template-preview-underline {
text-decoration: underline;
}
.template-preview-color-control {
display: flex;
align-items: center;
gap: 6px;
padding: 0 4px;
font-size: 12px;
color: #5d3b22;
}
.template-preview-color-control input {
width: 36px;
height: 28px;
padding: 0;
border: 1px solid #d9c1ab;
border-radius: 8px;
background: #fff;
}
.template-preview-surface {
min-height: 360px;
background: #ffffff;
}
.template-preview-surface .template-toc-placeholder {
margin: 12px 0;
padding: 12px 14px;
border: 2px dashed #d9c1ab;
border-radius: 10px;
background: linear-gradient(180deg, #fffaf5 0%, #f8efe5 100%);
color: #7a5a41;
font-weight: 700;
letter-spacing: 0.02em;
}
#templateHtmlSource {
min-height: 420px;
width: 100%;
resize: vertical;
}
.doc-title-bar {
display: flex;
gap: 8px;
align-items: center;
min-height: 36px;
}
.doc-presence {
display: flex;
gap: 6px;
flex-wrap: nowrap;
align-items: center;
min-height: 28px;
overflow-x: auto;
overflow-y: hidden;
padding: 1px 0;
min-width: 150px;
max-width: 250px;
flex-direction: row-reverse;
}
.presence-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid #c9c9c9;
background: #efe7dd;
overflow: hidden;
position: relative;
flex: 0 0 28px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
.presence-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.presence-badge {
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.38);
border: 1px solid var(--presence-color, #c9c9c9);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
display: grid;
place-items: center;
pointer-events: none;
}
.presence-badge[data-mode="writing"]::before {
content: "";
width: 11px;
height: 11px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm2.92 2.83H5v-.92l8.06-8.06.92.92-8.06 8.06zM20.71 7.04a1.003 1.003 0 0 0 0-1.42l-2.34-2.34a1.003 1.003 0 0 0-1.42 0l-1.83 1.83 3.75 3.75 1.84-1.82z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.82;
}
.presence-badge[data-mode="viewing"]::before {
content: "";
width: 11px;
height: 11px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M12 5c-7 0-10 7-10 7s3 7 10 7 10-7 10-7-3-7-10-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.82;
}
#docCanvas.ProseMirror {
outline: none;
}
.ProseMirror-yjs-cursor {
position: relative;
margin-left: -1px;
margin-right: -1px;
border-left: 2px solid;
border-right: 0;
word-break: normal;
pointer-events: none;
}
.ProseMirror-yjs-cursor>div {
position: absolute;
top: -1.15em;
left: -1px;
font-size: 0.72em;
font-family: "Segoe UI", sans-serif;
font-weight: 600;
color: #ffffff;
border-radius: 6px;
padding: 1px 5px;
white-space: nowrap;
line-height: 1.2;
user-select: none;
}
.ProseMirror-yjs-cursor-selection {
background: rgba(161, 83, 51, 0.18);
}
.doc-page {
--doc-zoom-factor: 1;
background: #d7cdc1;
padding: 24px;
display: flex;
justify-content: center;
align-items: flex-start;
gap: 16px;
overflow: auto;
border-radius: 12px;
position: relative;
min-height: 0;
flex: 1 1 0;
overflow-y: auto;
}
.doc-sheet-stage {
width: calc(210mm * var(--doc-zoom-factor));
min-height: calc(297mm * var(--doc-zoom-factor));
position: relative;
flex: 0 0 auto;
}
/* Floating TOC panel -------------------------------------------------- */
.doc-external-toc {
position: fixed;
top: 80px;
right: 20px;
width: 280px;
max-height: 60vh;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fffaf5;
border: 1px solid var(--muted);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
z-index: 9000;
padding: 0;
}
.doc-toc-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px 7px;
border-bottom: 1px solid var(--muted);
cursor: grab;
user-select: none;
flex-shrink: 0;
background: #fff5eb;
border-radius: 9px 9px 0 0;
}
.doc-toc-panel-header:active {
cursor: grabbing;
}
.doc-toc-panel-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.doc-toc-panel-close {
background: none;
border: none;
cursor: pointer;
font-size: 14px;
line-height: 1;
color: var(--ink-soft);
padding: 2px 4px;
border-radius: 4px;
transition: background 0.15s;
}
.doc-toc-panel-close:hover {
background: #f2e9dd;
color: var(--ink);
}
.doc-external-toc .toc {
font-size: 13px;
overflow-y: auto;
overflow-x: hidden;
padding: 8px 10px;
flex: 1 1 auto;
}
.doc-external-toc .toc-item {
margin-bottom: 0;
border-radius: 8px;
padding: 3px 4px;
}
.doc-external-toc .toc-item:hover {
background: #f2e9dd;
}
.doc-external-toc .toc-link {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
align-items: start;
}
.doc-external-toc .toc-number {
min-width: 28px;
font-size: 12px;
}
.doc-external-toc .toc-title {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.25;
}
.doc-external-toc .toc-dots,
.doc-external-toc .toc-page {
display: none;
}
/* End floating TOC panel ---------------------------------------------- */
.doc-fullscreen-controls {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 20;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 7px;
border: 1px solid rgba(198, 182, 164, 0.88);
border-radius: 10px;
background: rgba(255, 250, 245, 0.72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
body:not(.doc-editor-fullscreen-mode) #docFullscreenExitBtn {
display: none;
}
.doc-zoom-control {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--ink-soft);
}
.doc-zoom-control input[type="range"] {
width: 92px;
height: 18px;
}
#docEditorZoomValue {
min-width: 36px;
text-align: right;
color: var(--ink);
font-size: 11px;
font-weight: 700;
}
body.doc-editor-fullscreen-mode .workspace {
grid-template-columns: minmax(0, 1fr) var(--right-sidebar-width);
}
body.doc-editor-fullscreen-mode .workspace.sidebar-right-collapsed {
grid-template-columns: minmax(0, 1fr) 30px;
}
body.doc-editor-fullscreen-mode .workspace>.sidebar {
display: none;
}
body.doc-editor-fullscreen-mode .main-header {
display: none;
}
body.doc-editor-fullscreen-mode #documentsView {
height: 100%;
}
body.doc-editor-fullscreen-mode #documentsView .doc-layout {
grid-template-columns: minmax(0, 1fr);
height: 100%;
}
body.doc-editor-fullscreen-mode #documentsView .doc-sidebar {
display: none;
}
body.doc-editor-fullscreen-mode #documentsView .doc-editor {
padding-bottom: 12px;
}
.doc-sheet {
width: 210mm;
min-height: 297mm;
background: var(--canvas);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
border-radius: 12px;
border: 1px solid #d7d0c1;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scale(var(--doc-zoom-factor));
transform-origin: top center;
}
.doc-canvas-wrapper {
position: relative;
width: 100%;
}
.doc-canvas {
background: transparent;
width: 100%;
min-height: 100%;
margin: 0 auto;
padding: 12mm 22mm 14mm;
outline: none;
position: relative;
font-family: var(--doc-font-family);
font-size: 12pt;
color: var(--doc-text-color);
box-sizing: border-box;
}
.doc-canvas p {
margin: 6px 0;
}
.doc-header,
.doc-footer {
position: absolute;
left: 0;
right: 0;
width: 100%;
pointer-events: none;
color: var(--ink-soft);
font-size: 11px;
display: flex;
align-items: center;
gap: 10px;
z-index: 2;
}
.doc-header {
top: 6mm;
justify-content: space-between;
padding: 0 18mm;
}
.doc-header-title {
font-weight: 700;
}
.field-img-tools {
display: flex;
gap: 6px;
margin-top: 4px;
}
.doc-header-zone {
display: flex;
align-items: center;
gap: 6px;
}
.doc-header-center {
justify-content: center;
}
.doc-header-custom img,
.doc-header-zone img {
max-height: 26px;
object-fit: contain;
vertical-align: middle;
}
.doc-header-line {
flex: 1;
height: 1px;
background: var(--doc-header-accent);
}
.doc-header-logo {
display: flex;
align-items: center;
justify-content: center;
min-width: 110px;
}
.doc-header-logo img {
height: 26px;
object-fit: contain;
}
.doc-footer {
bottom: 6mm;
padding: 0 18mm;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.doc-footer-page {
text-align: center;
font-weight: 700;
}
.doc-footer #docFooterVersion {
text-align: right;
justify-self: end;
white-space: pre-line;
}
.doc-footer-meta,
.doc-header-meta {
display: none;
}
.doc-canvas img {
max-width: 100%;
height: auto;
display: block;
margin: 10px 0;
}
.doc-canvas img.ProseMirror-separator {
display: inline;
width: 0;
height: 0;
margin: 0;
max-width: 0;
pointer-events: none;
}
.img-resizable {
position: relative;
display: inline-block;
max-width: 100%;
}
.img-resizable img {
display: block;
max-width: 100%;
height: auto;
}
.img-handle {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #efe7dd;
border: 1px solid var(--muted);
opacity: 0;
pointer-events: none;
}
.img-handle.tl {
top: -6px;
left: -6px;
cursor: nwse-resize;
}
.img-handle.tr {
top: -6px;
right: -6px;
cursor: nesw-resize;
}
.img-handle.bl {
bottom: -6px;
left: -6px;
cursor: nesw-resize;
}
.img-handle.br {
bottom: -6px;
right: -6px;
cursor: nwse-resize;
}
.img-resizable.active .img-handle {
opacity: 1;
pointer-events: auto;
}
.doc-canvas h1,
.doc-canvas h2,
.doc-canvas h3,
.doc-canvas h4 {
font-family: var(--doc-font-family);
margin-top: 18px;
}
.doc-canvas {
counter-reset: h1;
}
.doc-canvas h1 {
font-size: 16pt;
color: var(--doc-heading-color);
}
.doc-canvas h1::before {
content: attr(data-hnum) ". ";
color: var(--doc-heading-color);
margin-right: 4px;
}
.doc-canvas h2 {
font-size: 14pt;
color: var(--doc-heading-color);
}
.doc-canvas h2::before {
content: attr(data-hnum) " ";
color: var(--doc-heading-color);
margin-right: 4px;
}
.doc-canvas h3 {
font-size: 12pt;
color: var(--doc-heading-color);
}
.doc-canvas h3::before {
content: attr(data-hnum) " ";
color: var(--doc-heading-color);
margin-right: 4px;
}
.doc-canvas h4 {
font-size: 11pt;
color: var(--doc-heading-color);
}
.doc-canvas h4::before {
content: attr(data-hnum) " ";
color: var(--doc-heading-color);
margin-right: 4px;
}
.doc-canvas .section {
font-weight: 700;
margin-top: 14px;
}
.doc-canvas .code-block {
font-family: "Courier New", monospace;
background: #f2efe9;
border: 1px solid var(--muted);
padding: 10px;
border-radius: 8px;
white-space: pre-wrap;
}
.page-break {
page-break-before: always;
break-before: page;
height: 0;
margin-top: 0;
position: relative;
clear: both;
display: block;
margin-bottom: 35px;
margin-left: 0;
margin-right: 0;
}
.page-break-label {
display: block;
text-align: center;
font-size: 11px;
color: var(--ink-soft);
margin: 0;
border-top: 1px dashed var(--muted);
border-bottom: 1px dashed var(--muted);
padding: 3px 0;
user-select: none;
}
.page-break-remove {
position: absolute;
top: -6px;
right: 6px;
background: #efe7dd;
border: 1px solid var(--muted);
border-radius: 10px;
padding: 2px 6px;
font-size: 11px;
cursor: pointer;
display: none;
pointer-events: auto;
}
.page-break:hover .page-break-remove {
display: inline-flex;
}
.toc {
font-size: 12pt;
}
.doc-generated-toc {
display: block;
min-height: 24px;
}
.toc-item {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 6px;
cursor: pointer;
color: #1d1b1a;
}
.toc-item.toc-level-1 {
margin-left: 0;
}
.toc-item.toc-level-2 {
margin-left: 12px;
}
.toc-item.toc-level-3 {
margin-left: 24px;
}
.toc-item.toc-level-4,
.toc-item.toc-level-5,
.toc-item.toc-level-6 {
margin-left: 36px;
}
.toc-number {
font-weight: 700;
color: #1d1b1a;
min-width: 40px;
}
.toc-title {
white-space: nowrap;
}
.toc-dots {
flex: 1;
border-bottom: 1px dotted #333;
margin-bottom: 2px;
}
.toc-page {
min-width: 24px;
text-align: right;
font-weight: 700;
color: #1d1b1a;
}
.toc-link {
display: flex;
align-items: baseline;
gap: 10px;
color: #1d1b1a;
text-decoration: none;
width: 100%;
}
.doc-canvas table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
table-layout: auto;
}
.template-preview-surface table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
table-layout: auto;
}
.doc-canvas table.table-fixed-layout {
table-layout: fixed;
width: 100%;
max-width: 100%;
}
/* Serialized HTML (print/export): proper structure. */
.doc-canvas table.template-table thead th {
background: var(--doc-table-header-bg);
color: var(--doc-table-header-text);
text-align: left;
}
.template-preview-surface table.template-table thead th {
background: var(--doc-table-header-bg);
color: var(--doc-table-header-text);
text-align: left;
}
table.wi-inline-table {
min-width:400px;
max-width:1080px;
width:100%;
}
/* Serialized HTML (print/export): proper structure. */
table.wi-inline-table thead th {
background: var(--doc-table-header-bg);
color: var(--doc-table-header-text);
text-align: left;
}
/* All | in template-table get the secondary header color. */
.doc-canvas table.template-table th {
background: var(--doc-table-th-bg);
color: var(--doc-table-th-text);
text-align: left;
}
.template-preview-surface table.template-table th {
background: var(--doc-table-th-bg);
color: var(--doc-table-th-text);
text-align: left;
}
/* All | in template-table get the secondary header color. */
table.wi-inline-table th {
background: var(--doc-table-th-bg);
color: var(--doc-table-th-text);
text-align: left;
}
/* ProseMirror live editor: does not exist — all rows land in | .
First-row cells approximate the column-header appearance. */
#docCanvas.ProseMirror table.template-table>tbody>tr:first-child>th {
background: var(--doc-table-header-bg);
color: var(--doc-table-header-text);
}
table.wi-inline-table>tbody>tr:first-child>th {
background: var(--doc-table-header-bg);
color: var(--doc-table-header-text);
color: #ffffff;
}
.wi-inline-table .doc-canvas table caption {
caption-side: top;
font-weight: 700;
margin-bottom: 4px;
}
.wi-inline-table table,
.wi-inline-table th,
.wi-inline-table td,
.doc-canvas table,
.doc-canvas th,
.doc-canvas td {
border: 1px solid var(--muted);
}
.template-preview-surface table,
.template-preview-surface th,
.template-preview-surface td {
border: 1px solid var(--muted);
}
.wi-inline-table th,
.wi-inline-table td,
.doc-canvas th,
.doc-canvas td {
padding: 6px;
overflow-wrap: anywhere;
word-break: break-word;
}
.template-preview-surface th,
.template-preview-surface td {
padding: 6px;
overflow-wrap: anywhere;
word-break: break-word;
}
.wi-inline-table th>p,
.wi-inline-table td>p,
.doc-canvas td>p,
.doc-canvas th>p {
margin-top: 0;
margin-bottom: 0;
}
.template-preview-surface td > p,
.template-preview-surface th > p {
margin-top: 0;
margin-bottom: 0;
}
/* ProseMirror live editor: cells need position:relative for resize handles
and cursor:text so any click in the cell area is understood as editable. */
#docCanvas.ProseMirror th,
#docCanvas.ProseMirror td {
position: relative;
cursor: text;
vertical-align: top;
min-height: 1.8em;
}
/* Remove paragraph margins inside live-editor cells so the entire padding area is
part of the click target (no dead zone below the last paragraph). */
#docCanvas.ProseMirror td>p,
#docCanvas.ProseMirror th>p {
margin-top: 0;
margin-bottom: 0;
}
/* Active cell: outline on all four sides — clearly visible without overlaying
any user-set background colour (outline is drawn outside/over the border box
so it does not change layout or background). */
#docCanvas.ProseMirror td.pm-active-cell,
#docCanvas.ProseMirror th.pm-active-cell,
.wi-inline-rich-surface.ProseMirror td.pm-active-cell,
.wi-inline-rich-surface.ProseMirror th.pm-active-cell,
.wi-inline-rich-surface .ProseMirror td.pm-active-cell,
.wi-inline-rich-surface .ProseMirror th.pm-active-cell {
outline: 2px solid #2d5b4e;
outline-offset: -2px;
}
.doc-canvas.table-col-resize-candidate {
cursor: col-resize;
}
body.table-col-resizing {
user-select: none;
cursor: col-resize;
}
.work-toolbar {
display: flex;
gap: 10px;
padding: 8px 0;
}
.meta-secondary-actions {
padding-top: 4px;
}
.meta-secondary-actions .ghost.compact {
padding: 6px 10px;
font-size: 12px;
min-height: 32px;
}
.meta-secondary-actions .ghost.compact.meta-suspect-toggle-clear {
border-color: #4f9963;
color: #23683a;
background: #eaf6ee;
}
.meta-secondary-actions .ghost.compact.meta-suspect-toggle-clear:hover {
background: #ddf0e3;
}
.work-filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 8px;
transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease, margin-bottom 0.24s ease;
transform-origin: top;
overflow: hidden;
max-height: 220px;
}
.work-filters.is-closed {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
max-height: 0;
margin-bottom: 0;
}
.work-filters.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.work-query-builder {
border: 1px solid var(--muted);
border-radius: 12px;
background: #fffaf5;
padding: 10px;
margin-bottom: 10px;
display: grid;
gap: 10px;
transition: opacity 0.26s ease, transform 0.26s ease, max-height 0.26s ease, margin-bottom 0.26s ease;
transform-origin: top;
max-height: 540px;
}
.work-query-builder.is-closed {
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
max-height: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
border-width: 0;
}
.work-query-builder.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#workItemFilterApplyBtn {
transition:
opacity 0.2s ease,
transform 0.2s ease,
max-width 0.2s ease,
margin 0.2s ease,
padding 0.2s ease,
border-width 0.2s ease;
max-width: 180px;
overflow: hidden;
white-space: nowrap;
}
#workItemFilterApplyBtn.query-mode-hidden {
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
max-width: 0;
margin: 0;
padding-left: 0;
padding-right: 0;
border-width: 0;
}
.work-query-rows {
display: grid;
gap: 8px;
}
.work-query-row {
display: grid;
grid-template-columns: 56px minmax(160px, 1fr) 140px minmax(180px, 1fr) 40px;
gap: 8px;
align-items: center;
}
.work-query-and {
font-size: 11px;
font-weight: 700;
color: var(--ink-soft);
text-transform: uppercase;
}
.work-query-row input,
.work-query-row select {
width: 100%;
min-width: 0;
box-sizing: border-box;
}
#workItemsView .work-filters input,
#workItemsView .work-filters select,
.work-query-row input,
.work-query-row select {
border: 1px solid #cfc2b2;
border-radius: 10px;
background: #ffffff;
min-height: 40px;
padding: 8px 12px;
}
#workItemsView .work-filters select,
.work-query-row select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #7d6f61 50%),
linear-gradient(135deg, #7d6f61 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 34px;
}
#workItemQueryToggleBtn.active {
border-color: var(--accent);
color: var(--accent);
background: #fff1f1;
}
.work-list {
overflow: auto;
min-height: 0;
flex: 1;
}
.work-table-wrapper {
flex: 1;
min-height: 0;
overflow-x: auto;
overflow-y: auto;
max-height: 60vh;
overscroll-behavior: contain;
scrollbar-gutter: stable;
border-radius: 12px;
border: 1px solid var(--muted);
background: var(--canvas);
box-shadow: 0 10px 30px var(--shadow);
}
#workItemsView {
min-height: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
#usersView {
min-height: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
#usersView .users-table-wrapper {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
height: calc(100vh - 260px);
}
#licenseView {
min-height: 0;
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.admin-license-panel {
display: grid;
gap: 12px;
padding: 16px 18px;
margin-bottom: 14px;
border: 1px solid #d8c9b8;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(214, 59, 59, 0.06), rgba(255, 255, 255, 0) 52%),
#fffaf5;
box-shadow: 0 10px 24px rgba(33, 29, 25, 0.08);
}
.admin-license-panel-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.admin-license-panel-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7b4a34;
}
.admin-license-summary {
margin-top: 4px;
font-size: 15px;
font-weight: 600;
color: var(--ink);
}
.admin-license-notice {
padding: 10px 12px;
border: 1px solid #e3cf9f;
border-radius: 10px;
background: #fff3d8;
color: #764b05;
font-size: 13px;
}
.admin-license-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.admin-license-card {
display: grid;
gap: 8px;
padding: 14px;
border: 1px solid #dfd1c2;
border-radius: 14px;
background: #ffffff;
}
.admin-license-card-title {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #7a6d60;
}
.admin-license-card-value {
font-size: 24px;
font-weight: 700;
color: var(--ink);
line-height: 1.15;
}
.admin-license-card-meta {
font-size: 13px;
color: var(--ink-soft);
}
.admin-license-request-panel {
display: grid;
gap: 12px;
padding: 16px 18px;
border: 1px solid #d8c9b8;
border-radius: 16px;
background: #fffefb;
box-shadow: 0 10px 24px rgba(33, 29, 25, 0.06);
}
.admin-license-request-header {
display: grid;
gap: 6px;
}
.admin-license-request-copy {
font-size: 14px;
color: var(--ink-soft);
line-height: 1.45;
}
.admin-license-request-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.admin-license-request-btn {
min-height: 52px;
justify-content: center;
font-weight: 700;
}
.admin-license-request-note {
font-size: 13px;
color: #7a6d60;
}
.admin-license-progress {
height: 8px;
border-radius: 999px;
background: #efe2d2;
overflow: hidden;
}
.admin-license-progress-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #2f7d68, #59a88f);
}
.admin-license-progress-fill.is-warning {
background: linear-gradient(90deg, #c98521, #f0b34c);
}
.admin-license-progress-fill.is-critical {
background: linear-gradient(90deg, #b73434, #e06262);
}
@media (max-width: 900px) {
.admin-license-panel-header {
flex-direction: column;
align-items: stretch;
}
}
#auditView {
min-height: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
#auditView .audit-table-wrapper {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
height: calc(100vh - 260px);
}
#backupView {
min-height: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
#backupView .backup-table-wrapper {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
height: calc(100vh - 260px);
}
#workItemsView .work-table-wrapper {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
height: calc(100vh - 340px);
}
#variablesView {
min-height: 0;
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
#variablesView .work-table-wrapper {
flex: 1 1 auto;
min-height: 0;
max-height: 100%;
height: calc(100vh - 280px);
}
#variablesView .work-table {
--work-table-actions-min-width: 96px;
min-width: 680px;
width: 100%;
}
#variablesView .work-table > thead > tr > th:nth-child(1),
#variablesView .work-table > tbody > tr > td:nth-child(1) {
width: 190px;
}
#variablesView .work-table > thead > tr > th:nth-child(3),
#variablesView .work-table > tbody > tr > td:nth-child(3) {
width: 150px;
}
#variablesView .work-table > thead > tr > th:nth-child(4),
#variablesView .work-table > tbody > tr > td:nth-child(4) {
width: var(--work-table-actions-min-width);
}
#variablesView .work-table .row-actions {
min-width: 0;
}
#variablesView .work-table tbody td.variable-value-cell {
height: auto;
max-width: 0;
overflow: hidden;
text-overflow: clip;
white-space: normal;
vertical-align: top;
}
#variablesView .variable-value-preview {
--variable-value-preview-max-height: 6.75em;
line-height: 1.35;
max-height: var(--variable-value-preview-max-height);
overflow: auto;
overflow-wrap: anywhere;
white-space: normal;
}
#variablesView .variable-value-preview p,
#variablesView .variable-value-preview ul,
#variablesView .variable-value-preview ol,
#variablesView .variable-value-preview figure,
#variablesView .variable-value-preview blockquote {
margin: 0 0 4px;
}
#variablesView .variable-value-preview table {
width: 100% !important;
max-width: 100%;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
}
#variablesView .variable-value-preview th,
#variablesView .variable-value-preview td {
height: auto;
min-width: 0;
padding: 3px 5px;
border: 1px solid #d8cbbd;
overflow: visible;
overflow-wrap: anywhere;
text-overflow: clip;
vertical-align: top;
white-space: normal;
}
#variablesView .variable-value-preview img {
display: block;
max-width: 100%;
max-height: 64px;
object-fit: contain;
}
#variablesView .variable-value-preview .img-resizable {
max-width: 100% !important;
}
.var-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
border: 1px solid #cfc2b2;
background: #f5efe7;
color: #5a524a;
margin-left: 6px;
}
#variableModal {
width: min(980px, 96vw);
inset: 8vh auto auto 50%;
max-height: 84vh;
}
#variableModal .modal-body {
overflow: auto;
}
#variableEditModal.modal--user-sized #variableValue {
flex: 1 1 auto;
min-height: 120px;
overflow: auto;
}
#variableList {
display: grid;
gap: 12px;
}
.variable-pick-section {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fff;
padding: 10px;
}
.variable-pick-title {
font-size: 12px;
font-weight: 700;
color: var(--ink-soft);
margin-bottom: 8px;
}
.variable-pick-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 8px;
}
.variable-pick-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
border: 1px solid #cfc2b2;
border-radius: 8px;
background: #f8f3ec;
color: var(--ink);
padding: 8px 10px;
text-align: left;
cursor: pointer;
}
.variable-pick-item:hover {
background: #f1e7db;
}
.variable-pick-name {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.variable-pick-empty {
font-size: 12px;
color: var(--ink-soft);
padding: 6px 2px;
}
.work-table {
--work-table-actions-min-width: 172px;
width: max-content;
min-width: 100%;
border-collapse: collapse;
font-size: 12px;
table-layout: fixed;
}
.work-table thead th {
position: sticky;
top: 0;
background: #efe7dd;
z-index: 3;
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--muted);
font-weight: 700;
cursor: pointer;
white-space: nowrap;
}
.work-table thead th.column-header-draggable {
user-select: none;
}
.work-table thead th.column-header-draggable.dragging {
opacity: 0.45;
}
.work-table thead th.column-header-drop-target {
outline: 2px dashed #bda98f;
outline-offset: -3px;
}
.work-table thead {
position: sticky;
top: 0;
z-index: 2;
}
.work-table thead th.actions-col {
position: sticky;
right: 0;
z-index: 5;
min-width: var(--work-table-actions-min-width);
width: var(--work-table-actions-min-width);
background: #efe7dd;
cursor: default;
}
.work-table th.bulk-select-col,
.work-table td.bulk-select-col {
width: 36px;
text-align: center;
padding-left: 6px;
padding-right: 6px;
}
.work-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid #eee3d7;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 34px;
}
.work-table tbody tr:not(.work-item-detail)>td.actions-col {
position: sticky;
right: 0;
min-width: var(--work-table-actions-min-width);
width: var(--work-table-actions-min-width);
overflow: visible;
text-overflow: clip;
background: var(--canvas);
}
.work-table tbody tr:hover:not(.work-item-detail)>td.actions-col {
background: #f7f0e7;
}
.work-table tbody tr.active:not(.work-item-detail)>td.actions-col {
background: #efe7dd;
}
.work-table tbody tr.bulk-selected:not(.work-item-detail)>td.actions-col {
background: #f3ece2;
}
.template-history-changes-cell {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
height: auto !important;
line-height: 1.35;
}
.work-table tbody tr:hover {
background: #f7f0e7;
}
.work-table tbody tr.active {
background: #efe7dd;
}
.work-table tbody tr.bulk-selected {
background: #f3ece2;
}
#workItemsView .work-table tbody tr.work-item-detail td {
background: #fbf6ef;
border-bottom: 1px solid #eee3d7;
padding: 10px 14px;
height: auto;
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: 0;
}
#workItemsView .work-item-detail-body {
font-size: 12px;
color: var(--ink);
inline-size: 100%;
width: 100%;
min-inline-size: 0;
min-width: 0;
max-inline-size: 100%;
max-width: 100%;
box-sizing: border-box;
overflow-x: auto;
}
#workItemsView .work-item-detail-body img {
max-width: 100%;
height: auto;
}
#workItemsView .work-item-detail-body > .wi-test-table {
inline-size: 100%;
width: 100%;
max-inline-size: 100%;
max-width: 100%;
table-layout: fixed;
}
#workItemsView .work-item-detail-body > .wi-test-table th {
inline-size: clamp(140px, 18vw, 180px);
}
#workItemsView .work-item-detail-body > .wi-test-table td {
inline-size: auto;
}
#workItemsView .work-item-detail-body > .wi-test-table td table,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table {
inline-size: 70% !important;
width: 70% !important;
min-inline-size: 0 !important;
min-width: 0 !important;
max-inline-size: 70% !important;
max-width: 70% !important;
table-layout: fixed !important;
margin-right: auto;
}
#workItemsView .work-item-detail-body > .wi-test-table td table colgroup col:first-child,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table colgroup col:first-child {
width: 20% !important;
}
#workItemsView .work-item-detail-body > .wi-test-table td table colgroup col:nth-child(2),
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table colgroup col:nth-child(2) {
width: 80% !important;
}
#workItemsView .work-item-detail-body > .wi-test-table td table .test-step-id-cell,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table .test-step-id-cell {
width: 20% !important;
min-width: 20% !important;
max-width: 20% !important;
}
#workItemsView .work-item-detail-body > .wi-test-table td table .test-step-text-cell,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table .test-step-text-cell {
width: 80% !important;
min-width: 80% !important;
max-width: 80% !important;
}
#workItemsView .work-item-detail-body > .wi-test-table td table th,
#workItemsView .work-item-detail-body > .wi-test-table td table td,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table th,
#workItemsView .work-item-detail-body > .wi-test-table td .wi-test-steps-table td {
overflow-wrap: anywhere;
word-break: break-word;
}
.work-table .cell-id {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
}
.suspect-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: #fff3c7;
border: 1px solid #d6ae49;
color: #6d4b00;
font-size: 11px;
font-weight: 800;
line-height: 1;
flex: 0 0 auto;
}
.lock-badge {
font-size: 10px;
padding: 2px 6px;
border-radius: 999px;
background: #d9d1c7;
color: #4a4340;
border: 1px solid #c8beb3;
}
.collab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
background: #e5f1ff;
border: 1px solid #86aee3;
color: #1d4b85;
font-size: 10px;
font-weight: 700;
line-height: 1;
}
.work-table .sort-indicator::after {
content: attr(data-indicator);
margin-left: 6px;
font-size: 11px;
color: var(--ink-soft);
}
.work-table .row-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
min-width: calc(var(--work-table-actions-min-width) - 20px);
gap: 6px;
justify-content: flex-end;
}
.work-table .row-actions .icon-action.workitem-suspect-active {
border-color: #4f9963;
color: #23683a;
background: #eaf6ee;
}
.work-table .row-actions .icon-action.workitem-suspect-active:hover {
background: #ddf0e3;
}
.work-table.workitem-table-wrap-text tbody td {
white-space: normal;
word-break: break-word;
height: auto;
}
.profile-panel {
display: grid;
grid-template-columns: 160px 1fr;
gap: 20px;
background: var(--canvas);
border-radius: 14px;
padding: 16px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
}
.profile-avatar {
display: grid;
gap: 10px;
align-content: start;
}
.profile-avatar img {
width: 140px;
height: 140px;
border-radius: 16px;
object-fit: cover;
border: 2px solid var(--muted);
background: #efe7dd;
}
.profile-fields {
display: grid;
gap: 12px;
}
.profile-mfa-section {
display: grid;
gap: 12px;
}
.profile-mfa-status-row {
display: grid;
gap: 8px;
}
.status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--muted);
background: #f4ece3;
color: var(--accent);
font-size: 12px;
font-weight: 700;
width: fit-content;
}
.status-pill[data-mfa-enabled="1"] {
border-color: #9cc8aa;
background: #eaf6ee;
color: #23683a;
}
.profile-mfa-status-text {
font-size: 13px;
color: var(--ink-soft);
}
.profile-mfa-setup-panel {
display: grid;
grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
gap: 16px;
align-items: start;
padding: 14px;
border: 1px solid var(--muted);
border-radius: 12px;
background: #fffaf5;
}
.profile-mfa-qr-card {
display: grid;
place-items: center;
min-height: 220px;
border: 1px solid var(--muted);
border-radius: 12px;
background: #fff;
padding: 12px;
}
.profile-mfa-qr-card img {
width: 100%;
max-width: 220px;
height: auto;
}
.profile-mfa-setup-fields,
.profile-mfa-disable-panel {
display: grid;
gap: 12px;
}
.help-panel {
display: flex;
flex-direction: column;
background: var(--canvas);
border-radius: 14px;
border: 1px solid var(--muted);
box-shadow: 0 10px 30px var(--shadow);
height: 100%;
overflow: hidden;
}
.help-panel .panel-header {
padding: 16px 20px;
border-bottom: 1px solid var(--muted);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.help-content {
padding: 20px 24px 28px;
overflow: auto;
}
.help-content h2 {
margin: 18px 0 10px;
font-size: 18px;
color: var(--accent);
}
.help-content p {
margin: 0 0 12px;
color: var(--ink-soft);
line-height: 1.5;
}
.help-content ul {
margin: 0 0 14px 18px;
padding: 0;
color: var(--ink-soft);
line-height: 1.5;
}
.help-panel {
flex: 1 1 auto;
width: 100%;
}
@media (max-width: 900px) {
.profile-mfa-setup-panel {
grid-template-columns: 1fr;
}
}
.help-mode .main {
gap: 0;
}
.help-licenses-table {
border: 1px solid var(--muted);
border-radius: 12px;
overflow: auto;
max-height: 520px;
background: #fffaf5;
}
.help-licenses-table table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.help-licenses-table th,
.help-licenses-table td {
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid #e2d6c9;
}
.help-licenses-table th {
background: #efe7dd;
position: sticky;
top: 0;
z-index: 1;
}
.help-side-card {
border: 1px solid var(--muted);
border-radius: 12px;
padding: 12px;
background: #fffaf5;
display: grid;
gap: 10px;
}
.help-side-card h4 {
margin: 0;
font-size: 14px;
color: var(--ink);
}
.help-side-card p {
margin: 0;
font-size: 13px;
color: var(--ink-soft);
line-height: 1.4;
}
.help-topic-title {
margin-top: 0;
font-size: 22px;
color: var(--ink);
}
.help-shot {
margin: 14px 0 18px;
border: 1px dashed #cdbfb2;
background: #fbf6f1;
padding: 18px;
border-radius: 12px;
color: #9b8f84;
text-align: center;
font-size: 13px;
}
.help-note {
background: #f5ede2;
border: 1px solid #e2d6c9;
border-radius: 10px;
padding: 10px 12px;
color: #6b5b4f;
font-size: 13px;
}
.help-mode .panel-tabs,
.help-mode .panel-actions,
.help-mode .main-header {
display: none !important;
}
.help-mode .sidebar .panel-header>div:first-child {
font-weight: 700;
}
.help-mode .meta-sidebar {
display: flex;
}
/* Focused settings/admin views (profile, users, audit log, backups) hide the
project-specific main header and metadata sidebar and collapse the workspace
to two columns so the content fills the freed space. The project sidebar
("Projektleiste") stays visible. */
.focused-view .main-header,
.focused-view .meta-sidebar {
display: none !important;
}
.focused-view .workspace {
grid-template-columns:
minmax(var(--sidebar-min-width), var(--left-sidebar-width)) minmax(var(--workspace-main-min-width), 1fr);
}
.focused-view .workspace.sidebar-left-collapsed {
grid-template-columns: 30px minmax(var(--workspace-main-min-width), 1fr);
}
.help-topic-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
cursor: pointer;
color: var(--ink);
border: 1px solid transparent;
}
.help-topic-item:hover {
background: #f3ece4;
border-color: #e2d6c9;
}
.help-topic-item.active {
background: #efe7dd;
border-color: #d8cbbd;
font-weight: 600;
}
.diff-panel {
border: 1px solid var(--muted);
border-radius: 12px;
padding: 10px;
background: #fffaf5;
display: grid;
gap: 10px;
}
.diff-body {
display: grid;
gap: 10px;
align-content: start;
}
#workItemHistoryModal .modal-body {
display: grid;
grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
gap: 16px;
max-height: 78vh;
overflow: hidden;
}
#workItemHistoryModal {
width: min(96vw, 1320px);
inset: 4% auto auto 50%;
}
#workItemHistoryModal .diff-body img {
max-width: 100%;
height: auto;
}
#workItemHistoryList {
overflow: auto;
max-height: 78vh;
padding-right: 6px;
}
#workItemHistoryList .list-item.active {
background: #efe7dd;
}
#workItemHistoryDiff {
overflow: auto;
max-height: 78vh;
}
#requirementModal .modal-body {
max-height: 60vh;
overflow: auto;
}
#requirementList {
max-height: 46vh;
overflow: auto;
}
.workitem-select-item {
display: flex;
align-items: center;
}
.workitem-select-label {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
width: 100%;
}
.workitem-select-text {
display: inline-flex;
align-items: baseline;
gap: 6px;
min-width: 0;
}
.workitem-select-code {
white-space: nowrap;
}
.workitem-select-sep {
color: var(--ink-soft);
}
.workitem-select-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#workItemModal .modal-body {
max-height: 60vh;
overflow: auto;
}
#workItemModal.modal--user-sized #workItemDescField {
display: flex;
flex: 1 1 220px;
flex-direction: column;
min-height: 0;
}
#workItemModal.modal--user-sized #workItemDesc {
flex: 1 1 auto;
min-height: 120px;
overflow: auto;
}
#commentModal .modal-body {
display: flex;
flex-direction: column;
}
#commentModal .modal-body .field {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
#commentModal #commentInput {
flex: 1 1 auto;
min-height: 96px;
resize: none;
}
.diff-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
align-items: start;
}
.diff-cell {
background: #ffffff;
border: 1px solid var(--muted);
border-radius: 10px;
padding: 8px 10px;
font-size: 12px;
min-height: 72px;
max-height: 148px;
overflow: auto;
display: grid;
align-content: start;
gap: 4px;
}
.diff-label {
font-weight: 700;
color: var(--ink-soft);
}
.diff-value {
white-space: pre-wrap;
line-height: 1.35;
}
.workitem-history-section {
background: #ffffff;
border: 1px solid var(--muted);
border-radius: 12px;
padding: 12px;
display: grid;
gap: 10px;
}
.workitem-history-section-title {
font-weight: 700;
color: var(--ink);
}
.workitem-history-meta-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.workitem-history-meta-table th,
.workitem-history-meta-table td {
border: 1px solid #e6dbcf;
padding: 8px 10px;
text-align: left;
vertical-align: top;
white-space: pre-wrap;
line-height: 1.35;
}
.workitem-history-meta-table thead th {
background: #f2ebe3;
}
.workitem-history-meta-table th:first-child,
.workitem-history-meta-table td:first-child {
width: 33.3333%;
}
.workitem-history-meta-table th:last-child,
.workitem-history-meta-table td:last-child {
width: 66.6667%;
}
.workitem-history-meta-table tbody th {
background: #faf5ef;
}
.workitem-history-meta-table tbody td {
background: #fffdfa;
}
.workitem-history-diff-text,
.workitem-history-plain {
white-space: pre-wrap;
line-height: 1.5;
}
.workitem-history-rich-diff {
display: grid;
gap: 10px;
}
.workitem-history-visual-diff {
display: grid;
gap: 10px;
}
.workitem-history-visual-diff-group {
display: grid;
gap: 8px;
}
.workitem-history-image-delta {
border-radius: 10px;
padding: 8px;
}
.workitem-history-image-delta img {
display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0;
border: 1px solid #d9d0c4;
border-radius: 8px;
background: #ffffff;
}
.workitem-history-image-removed {
background: #ffe4e4;
border: 1px solid #e1b3b3;
}
.workitem-history-image-added {
background: #e2f6e2;
border: 1px solid #a8d2ab;
}
.workitem-history-image-removed img {
outline: 1px solid #c25353;
}
.workitem-history-image-added img {
outline: 1px solid #4b9f59;
}
.workitem-history-image-delta .workitem-history-diagram-placeholder {
margin: 0;
}
.workitem-history-visual-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.workitem-history-visual-pane {
border: 1px solid #e6dbcf;
border-radius: 10px;
background: #fffdfa;
padding: 10px;
min-width: 0;
}
.workitem-history-visual-label {
font-weight: 700;
color: var(--ink-soft);
margin-bottom: 8px;
}
.workitem-history-rich img {
display: block;
max-width: 100%;
height: auto;
margin: 8px 0;
border: 1px solid #e1d6c9;
border-radius: 8px;
}
.workitem-history-rich table {
width: 100%;
border-collapse: collapse;
}
.workitem-history-rich td,
.workitem-history-rich th {
border: 1px solid #e6dbcf;
padding: 6px 8px;
vertical-align: top;
}
.workitem-history-diagram-placeholder {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #d6ae49;
border-radius: 10px;
background: linear-gradient(180deg, #fff9e7 0%, #fff3cf 100%);
color: #6d4b00;
font-weight: 700;
text-align: center;
padding: 16px;
}
.workitem-history-meta-table .workitem-history-diff-text,
.workitem-history-meta-table .workitem-history-plain {
min-height: 20px;
}
.workitem-history-added {
background: #dff3df;
color: #185f22;
padding: 0 1px;
border-radius: 3px;
}
.workitem-history-removed {
background: #ffe0e0;
color: #8a1f1f;
text-decoration: line-through;
padding: 0 1px;
border-radius: 3px;
}
.workitem-history-empty {
color: var(--ink-soft);
font-style: italic;
}
.work-list {
display: grid;
gap: 10px;
}
.work-card {
background: var(--canvas);
border-radius: 12px;
border: 1px solid var(--muted);
padding: 12px;
display: grid;
gap: 10px;
box-shadow: 0 10px 30px var(--shadow);
position: relative;
max-height: 180px;
overflow: hidden;
}
.work-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
}
.work-meta {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 6px;
font-size: 12px;
color: var(--ink-soft);
}
.work-desc {
display: none;
}
.work-card.expanded {
max-height: 520px;
}
.work-card.expanded .work-desc {
display: block;
}
.work-card .work-toolbar {
justify-content: flex-end;
}
.work-card .work-warning {
position: absolute;
top: 8px;
right: 8px;
background: #f7d9b8;
border: 1px solid #d7a064;
border-radius: 8px;
padding: 2px 6px;
font-size: 12px;
}
.work-card.highlight {
box-shadow: 0 0 0 3px #2d5b4e;
}
.type-icon {
width: 24px;
height: 24px;
border-radius: 6px;
background: var(--type-icon-bg, #efe7dd);
border: 1px solid var(--muted);
background-repeat: no-repeat;
background-position: center;
background-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
flex: 0 0 auto;
}
.type-icon.type-icon-custom {
background-color: var(--type-icon-bg, #efe7dd) !important;
background-image: none !important;
font-size: 14px;
color: #1f4b3f;
}
.type-icon.type-icon-custom::before {
content: attr(data-icon-key);
}
.meta-inline-icon {
width: 20px;
height: 20px;
border-radius: 5px;
font-size: 12px;
}
.field-label-with-icon {
display: inline-flex;
align-items: center;
gap: 6px;
}
.custom-field-icon {
width: 18px;
height: 18px;
border-radius: 5px;
font-size: 11px;
}
.type-icon[data-type="system_requirement"] {
background-color: #e5f0e8;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M5 6h14v2H5zm0 5h14v2H5zm0 5h10v2H5z'/%3E%3C/svg%3E");
}
.type-icon[data-type="system_architecture"] {
background-color: #e3edf7;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232a4f7a' d='M4 5h16v3H4zM4 10h7v9H4zM13 10h7v9h-7z'/%3E%3C/svg%3E");
}
.type-icon[data-type="system_detailed_design"] {
background-color: #e7eff9;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232a4f7a\" d=\"M6 4h12v2H6zm0 4h12v2H6zm0 4h8v2H6zm0 4h8v2H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="software_requirement"] {
background-color: #eaf1f6;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232a4f7a\" d=\"M4 7h16v10H4zM7 10h4v2H7zm0 3h6v2H7z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="software_architecture"] {
background-color: #e1ecf8;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232a4f7a\" d=\"M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="software_detailed_design"] {
background-color: #e7eff9;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232a4f7a\" d=\"M6 4h12v2H6zm0 4h12v2H6zm0 4h8v2H6zm0 4h8v2H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="hardware_requirement"] {
background-color: #f0ece6;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23724f2b\" d=\"M6 6h12v12H6zM9 9h6v6H9z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="hardware_architecture"] {
background-color: #efe8dd;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23724f2b\" d=\"M4 7h16v4H4zM4 13h7v6H4zM13 13h7v6h-7z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="hardware_detailed_design"] {
background-color: #f5eee4;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23724f2b\" d=\"M6 4h12v2H6zm0 4h12v2H6zm0 4h8v2H6zm0 4h8v2H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="mechanical_requirement"] {
background-color: #f3e9e1;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%238d4c2f\" d=\"M12 4l4 4-4 4-4-4zM6 16h12v2H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="mechanical_architecture"] {
background-color: #f6ebe2;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%238d4c2f\" d=\"M4 8h16v2H4zm2 4h12v8H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="mechanical_detailed_design"] {
background-color: #f7ede6;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%238d4c2f\" d=\"M6 4h12v2H6zm0 4h12v2H6zm0 4h8v2H6zm0 4h8v2H6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="risk_mitigation"] {
background-color: #efe7f3;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23523b6a\" d=\"M12 3l8 3v6c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V6z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="bug"] {
background-color: #f7e7e2;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23a1322f\" d=\"M8 5h8v4H8zM6 11h12v2H6zm2 4h8v4H8z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="system_test"] {
background-color: #e6f0ef;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232d5b4e\" d=\"M7 12l3 3 7-7 2 2-9 9-5-5z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="software_test"] {
background-color: #e7eef7;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%232a4f7a\" d=\"M6 12l3 3 8-8 2 2-10 10-5-5z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="hardware_test"] {
background-color: #f0ece6;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%23724f2b\" d=\"M6 12l3 3 8-8 2 2-10 10-5-5z\"/%3E%3C/svg%3E');
}
.type-icon[data-type="mechanical_test"] {
background-color: #f3e9e1;
background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"%3E%3Cpath fill=\"%238d4c2f\" d=\"M6 12l3 3 8-8 2 2-10 10-5-5z\"/%3E%3C/svg%3E');
}
.meta-panel {
font-size: 13px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.meta-quick-review {
display: grid;
gap: 8px;
margin: 10px 0 14px;
padding: 10px;
border: 1px solid #d6c8b8;
border-radius: 10px;
background: #fffaf5;
min-height: 172px;
max-height: 360px;
overflow: auto;
}
.meta-resizable {
resize: vertical;
overflow: auto;
}
.review-quick-title {
font-size: 12px;
color: var(--ink-soft);
font-weight: 700;
}
.review-quick-hint {
font-size: 12px;
line-height: 1.4;
color: #2f5f85;
background: #edf4ff;
border: 1px solid #c8ddf6;
border-radius: 8px;
padding: 7px 8px;
}
.review-quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 2px;
}
.review-quick-actions .primary,
.review-quick-actions .ghost {
min-height: 46px;
height: auto;
white-space: normal;
}
.reviewer-line {
font-size: 12px;
color: var(--ink);
padding: 8px 10px;
border: 1px solid #e2d7c9;
border-radius: 10px;
background: #fffaf5;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.reviewer-line.review-status-accepted {
border-left: 4px solid #4f9b5f;
}
.reviewer-line.review-status-rejected {
border-left: 4px solid #c65252;
}
.reviewer-line.review-status-pending {
border-left: 4px solid #5d87c0;
}
.reviewer-main {
min-width: 0;
display: grid;
gap: 2px;
}
.reviewer-name {
font-weight: 700;
color: #2a2521;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reviewer-meta {
font-size: 11px;
color: var(--ink-soft);
line-height: 1.35;
}
.reviewer-actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.review-status-pill {
font-size: 11px;
font-weight: 700;
border-radius: 999px;
padding: 3px 8px;
border: 1px solid transparent;
white-space: nowrap;
}
.review-status-pill.accepted {
color: #296131;
background: #eaf7ec;
border-color: #79b27f;
}
.review-status-pill.rejected {
color: #9f2d2d;
background: #fdeeee;
border-color: #d18484;
}
.review-status-pill.pending {
color: #1f4f8e;
background: #eaf2ff;
border-color: #81a8db;
}
.reviewer-pick-list {
border: 1px solid #d6c8b8;
border-radius: 12px;
background: linear-gradient(180deg, #fffaf5 0%, #f9f3ea 100%);
padding: 10px;
display: grid;
gap: 8px;
max-height: 180px;
overflow: auto;
}
.reviewer-pick-row {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 10px;
font-size: 13px;
padding: 8px 10px;
border: 1px solid #e4d9cd;
border-radius: 10px;
background: #ffffff;
cursor: pointer;
transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.reviewer-pick-row:hover {
border-color: #d0b9a1;
background: #fff9f2;
}
.reviewer-pick-row:has(input:checked) {
border-color: #81a8db;
background: #eef5ff;
box-shadow: inset 0 0 0 1px #81a8db;
}
.reviewer-pick-row input[type="checkbox"] {
width: 16px;
height: 16px;
}
.meta-panel .placeholder {
color: var(--ink-soft);
}
.meta-suspect-hint {
padding: 8px 10px;
border-radius: 10px;
border: 1px solid #e5be67;
background: #fff6df;
color: #7a5300;
font-weight: 700;
}
.meta-collab-card {
margin-top: 8px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #d8ddd7;
background: #f8faf7;
color: var(--ink-soft);
font-size: 12px;
display: grid;
gap: 3px;
}
.meta-collab-card.locked {
background: #f6ece7;
border-color: #d7b8a5;
color: #7a4a2b;
}
.meta-collab-card.owned {
background: #eef5ef;
border-color: #b9d0ba;
color: #2f5d39;
}
.meta-collab-card.changed {
background: #eef4ff;
border-color: #b7caea;
color: #294f86;
}
.meta-collab-title {
font-weight: 700;
color: var(--ink);
}
.wi-block {
border: 1px solid var(--muted);
border-left: 6px solid #c8c8c8;
padding: 10px;
margin: 8px 0 10px;
background: #f7f7f7;
position: relative;
overflow: visible;
}
.wi-block-controls {
display: flex;
align-items: center;
gap: 8px;
min-height: 22px;
margin-bottom: 6px;
}
.wi-block-edge-controls {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
}
.wi-block-below-controls {
display: flex;
justify-content: flex-end;
margin-top: 6px;
min-height: 22px;
}
.wi-block.wi-review-none {
border-left-color: #c8c8c8;
background: #f3f3f3;
}
.wi-block.wi-review-self-pending {
border-left-color: #d7b44a;
background: #fff8db;
}
.wi-block.wi-review-others-pending {
border-left-color: #6d96cd;
background: #edf4ff;
}
.wi-block.wi-review-accepted {
border-left-color: #5ea36a;
background: #edf9ef;
}
.wi-block.wi-review-rejected {
border-left-color: #cf4b4b;
background: #fdeeee;
}
.wi-block.wi-review-filtered {
min-height: 42px;
padding: 8px 12px;
border-color: #d1c7bc;
border-left-color: #8d8378;
background: #f2eee9;
cursor: default;
}
.wi-block.wi-review-filtered .wi-block-controls,
.wi-block.wi-review-filtered .wi-block-content,
.wi-block.wi-review-filtered .wi-block-below-controls {
display: none;
}
.wi-block.wi-review-filtered::before {
content: attr(data-review-filter-label);
display: inline-flex;
align-items: center;
min-height: 24px;
border-radius: 999px;
background: #fffaf5;
border: 1px solid #d1c7bc;
color: #6a5f54;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
}
.wi-review-actions {
position: absolute;
left: -150px;
top: 8px;
width: 136px;
display: grid;
gap: 6px;
}
.wi-review-action-btn {
border-radius: 8px;
border: 1px solid #cdbca8;
background: #fffaf5;
color: var(--ink);
font-size: 12px;
font-weight: 700;
padding: 6px 8px;
cursor: pointer;
text-align: center;
}
.wi-review-action-btn.accept {
border-color: #6ca676;
background: #edf9ef;
color: #296131;
}
.wi-review-action-btn.reject {
border-color: #cc8888;
background: #fdeeee;
color: #9f2d2d;
}
body.sidebar-resizing,
body.sidebar-resizing * {
cursor: col-resize !important;
user-select: none !important;
}
.wi-gap {
margin: 6px 0 10px;
}
.wi-block.active {
box-shadow: 0 0 0 2px var(--accent-2);
}
.wi-block.wi-selected,
.wi-block.ProseMirror-selectednode {
box-shadow: 0 0 0 2px #5b8def;
outline: none;
}
.wi-block.wi-status-draft .wi-status {
color: #7a6d62;
}
.wi-block.wi-status-accepted .wi-status {
color: #2a7a39;
font-weight: 700;
}
.wi-block.wi-status-denied .wi-status {
color: #a33131;
font-weight: 700;
}
.wi-block.wi-inline-editing {
background: #fffdf8;
}
.wi-inline-title-input {
width: 100%;
box-sizing: border-box;
border: 1px solid #cdbca8;
border-radius: 8px;
background: #fff;
color: var(--ink);
font: inherit;
padding: 6px 8px;
margin-bottom: 8px;
font-weight: 700;
}
.wi-inline-desc-host {
border: 1px solid #d5c6b5;
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.wi-inline-rich-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
padding: 6px;
border-bottom: 1px solid #eadfd3;
background: #fffaf5;
}
.wi-inline-rich-toolbar .tool-btn {
min-width: 30px;
}
.wi-inline-rich-surface {
min-height: 120px;
max-height: 360px;
overflow: auto;
}
.wi-inline-rich-surface.ProseMirror,
.wi-inline-rich-surface .ProseMirror {
min-height: 120px;
max-height: 800px;
padding: 8px 8px 8px 14px;
outline: none;
line-height: 1.45;
}
.wi-inline-rich-surface.ProseMirror p,
.wi-inline-rich-surface .ProseMirror p {
margin: 0 0 8px;
}
.wi-inline-rich-surface.ProseMirror table.wi-inline-table,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table {
border: 1px solid #cdbca8;
border-collapse: collapse;
}
.wi-inline-rich-surface.ProseMirror table.wi-inline-table th,
.wi-inline-rich-surface.ProseMirror table.wi-inline-table td,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table th,
.wi-inline-rich-surface .ProseMirror table.wi-inline-table td {
border: 1px solid #cdbca8;
}
.wi-inline-rich-surface.ProseMirror img,
.wi-inline-rich-surface .ProseMirror img,
.wi-desc img {
max-width: 100%;
height: auto;
}
.wi-desc.wi-desc-empty {
min-height: 26px;
border: 1px dashed #d8cab9;
border-radius: 6px;
background: #fffaf5;
padding: 2px 6px;
}
.wi-inline-actions {
margin-top: 8px;
display: flex;
gap: 6px;
justify-content: flex-end;
}
.wi-inline-add-test-step {
margin-top: 6px;
border: 1px solid #cdbca8;
border-radius: 8px;
background: #fffaf5;
color: var(--ink);
font-size: 12px;
font-weight: 700;
padding: 5px 10px;
cursor: pointer;
}
.wi-inline-add-test-step:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.wi-inline-save,
.wi-inline-cancel {
border: 1px solid #cdbca8;
border-radius: 8px;
background: #fffaf5;
color: var(--ink);
font-size: 12px;
font-weight: 700;
padding: 5px 10px;
cursor: pointer;
}
.wi-inline-save {
border-color: #6ca676;
background: #edf9ef;
color: #296131;
}
.wi-inline-custom-fields-section,
.work-item-custom-fields {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 8px;
}
.wi-remove {
background: #efe7dd;
border: 1px solid var(--muted);
border-radius: 8px;
padding: 2px 6px;
font-size: 12px;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.wi-drag-handle {
border: 1px solid var(--muted);
border-radius: 8px;
background: #efe7dd;
color: #5c564f;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
min-width: 22px;
min-height: 22px;
cursor: move;
margin-left: -24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.wi-insert {
background: #efe7dd;
border: 1px solid var(--muted);
border-radius: 8px;
width: 22px;
height: 22px;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.wi-block:hover .wi-remove,
.wi-block:hover .wi-insert,
.wi-block:hover .wi-drag-handle,
.wi-block.wi-selected .wi-remove,
.wi-block.wi-selected .wi-insert,
.wi-block.wi-selected .wi-drag-handle,
.wi-block.ProseMirror-selectednode .wi-remove,
.wi-block.ProseMirror-selectednode .wi-insert,
.wi-block.ProseMirror-selectednode .wi-drag-handle {
opacity: 1;
pointer-events: auto;
}
.wi-title,
.wi-desc {
outline: none;
margin-top: 6px;
}
.wi-block .wi-title {
position: relative;
padding-left: 30px;
}
.wi-block .wi-block-content>p:first-child {
position: relative;
padding-left: 30px;
}
.wi-block .wi-title::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid var(--muted);
background-color: #e5f0e8;
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M5 6h14v2H5zm0 5h14v2H5zm0 5h10v2H5z'/%3E%3C/svg%3E");
pointer-events: none;
}
.wi-block .wi-title:has(> .type-icon)::before {
display: none;
}
.wi-block .wi-block-content>p:first-child::before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 22px;
height: 22px;
border-radius: 6px;
border: 1px solid var(--muted);
background-color: #e5f0e8;
background-repeat: no-repeat;
background-position: center;
background-size: 14px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232d5b4e' d='M5 6h14v2H5zm0 5h14v2H5zm0 5h10v2H5z'/%3E%3C/svg%3E");
pointer-events: none;
}
.wi-block .wi-title>.type-icon {
position: absolute;
left: 0;
top: 1px;
display: inline-flex;
}
.wi-meta-table-wrap {
margin-top: 8px;
}
.wi-meta-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
background: #fffdf9;
}
.wi-meta-table th,
.wi-meta-table td {
border: 1px solid #d6c8b8;
padding: 6px 8px;
vertical-align: top;
}
.wi-meta-table th {
width: 25%;
background: #efe7dd;
font-weight: 700;
color: #2f2a25;
}
.wi-meta-table td {
width: 75%;
}
.wi-meta-empty {
color: #7a6f64;
font-style: italic;
}
.doc-wi-meta-link-row {
display: block;
margin: 2px 0;
}
.doc-wi-meta-link-dir {
color: #62584f;
font-weight: 600;
}
.wi-test-table {
width: 100%;
border-collapse: collapse;
margin-top: 6px;
table-layout: fixed;
}
.wi-test-table th {
width: 25%;
background: #efe7dd;
color: #2f2a25;
text-align: left;
padding: 6px 8px;
border: 1px solid #d6c8b8;
font-weight: 600;
vertical-align: top;
user-select: none;
}
.wi-test-table td {
width: 75%;
padding: 6px 8px;
border: 1px solid #d6c8b8;
vertical-align: top;
min-height: 36px;
}
.wi-test-table th>p,
.wi-test-table td>p {
margin-top: 0;
margin-bottom: 0;
}
.wi-test-table td[contenteditable="false"] {
background: #f1ece4;
}
.wi-test-table td[contenteditable="true"]:focus {
outline: 2px solid var(--accent-2);
background: #fffdf9;
}
.wi-test-rating {
padding: 4px 6px;
border-radius: 8px;
border: 1px solid var(--muted);
background: #fffaf5;
}
.wi-test-rating-value {
font-weight: 600;
}
.wi-test-rating-meta {
margin-top: 4px;
font-size: 11px;
color: var(--ink-soft);
}
.wi-test-steps-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
table-layout: fixed;
}
.wi-test-steps-table.teststep-table {
width: 100%;
table-layout: fixed;
}
.wi-test-steps-table.teststep-table th,
.wi-test-steps-table.teststep-table td {
border: 1px solid #d6c8b8;
padding: 6px 8px;
vertical-align: top;
overflow-wrap: anywhere;
word-break: break-word;
}
.wi-test-steps-table.teststep-table .test-step-id-cell {
width: 60px;
min-width: 60px;
max-width: 60px;
text-align: center;
font-weight: 700;
background: #f1ece4;
user-select: none;
}
.wi-test-steps-table.teststep-table .test-step-text-cell {
width: auto;
min-height: 28px;
}
.wi-test-steps-table.teststep-table colgroup col:first-child {
width: 60px !important;
}
.wi-test-steps-table.teststep-table colgroup col:nth-child(2) {
width: auto !important;
}
.work-item-test-fields {
display: grid;
gap: 10px;
}
.wi-status {
color: var(--ink-soft);
font-size: 12px;
}
.wi-warning {
background: #f7d9b8;
border: 1px solid #d7a064;
border-radius: 8px;
padding: 2px 6px;
font-size: 12px;
display: none;
align-items: center;
}
.wi-block.missing-link .wi-warning {
display: inline-flex;
}
.wi-lock {
background: #d9d1c7;
border: 1px solid #c8beb3;
border-radius: 8px;
padding: 2px 6px;
font-size: 10px;
color: #4a4340;
}
.comment-highlight {
background: #f7d9b8;
}
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(20, 15, 11, 0.55);
z-index: 20;
}
.modal {
position: fixed;
inset: 10% auto auto 50%;
transform: translateX(-50%);
background: var(--canvas);
border-radius: 16px;
border: 1px solid var(--muted);
box-shadow: 0 20px 40px var(--shadow);
width: min(720px, 92vw);
max-height: 86vh;
z-index: 30;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 12px;
padding: 12px;
}
#pasteModal {
z-index: 70;
}
#promptModal {
z-index: 80;
}
#diagramModal {
width: min(100%, 96vw);
height: min(92vh, 980px);
inset: 4vh auto auto 50%;
grid-template-rows: auto 1fr;
z-index: 60;
}
#diagramModal .modal-body {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
}
#diagramModal .diagram-embed {
flex: 1 1 auto;
min-height: 0;
display: flex;
height: 100%;
width: 100%;
max-width: none;
margin: 0;
}
#diagramModal iframe {
width: 100%;
height: 100%;
border: none;
flex: 1 1 auto;
}
#imagePreviewModal {
width: min(1180px, 96vw);
height: min(92vh, 920px);
inset: 4vh auto auto 50%;
grid-template-rows: auto 1fr auto;
z-index: 65;
}
#imagePreviewModal .modal-header,
#imagePreviewModal .modal-actions {
flex: 0 0 auto;
}
#imagePreviewModal .image-preview-body {
display: flex;
flex-direction: column;
min-height: 0;
gap: 12px;
overflow: hidden;
}
.image-preview-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.image-preview-toolbar input[type="range"] {
width: min(240px, 48vw);
}
.image-preview-zoom-label {
min-width: 60px;
font-weight: 700;
color: #2f2a26;
}
.image-preview-viewport {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
border: 1px solid var(--muted);
border-radius: 12px;
background:
linear-gradient(45deg, rgba(214, 206, 196, 0.32) 25%, transparent 25%, transparent 75%, rgba(214, 206, 196, 0.32) 75%),
linear-gradient(45deg, rgba(214, 206, 196, 0.32) 25%, transparent 25%, transparent 75%, rgba(214, 206, 196, 0.32) 75%);
background-color: #faf6f0;
background-position: 0 0, 12px 12px;
background-size: 24px 24px;
padding: 18px;
cursor: default;
user-select: none;
}
.image-preview-viewport.is-pannable {
cursor: grab;
}
.image-preview-viewport.is-panning {
cursor: grabbing;
}
.image-preview-image {
display: block;
max-width: none;
height: auto;
margin: 0 auto;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
background: #ffffff;
}
.context-menu {
position: fixed;
background: #fffaf5;
border: 1px solid var(--muted);
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
padding: 6px;
display: grid;
gap: 4px;
z-index: 40;
min-width: 200px;
}
.context-item {
background: transparent;
border: none;
text-align: left;
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: #2f2a26;
}
.context-item.has-submenu {
position: relative;
justify-content: space-between;
}
.has-submenu::after {
content: "";
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 100%;
}
.context-arrow {
font-size: 14px;
color: #8a8178;
margin-left: auto;
}
.context-item:hover {
background: #efe7dd;
}
.context-item.context-item-checkbox {
justify-content: space-between;
gap: 12px;
}
.doc-wi-meta-field-list {
display: grid;
gap: 8px;
max-height: 320px;
overflow: auto;
border: 1px solid #d7cbbd;
border-radius: 10px;
padding: 10px;
background: #fffdf9;
}
.doc-wi-meta-field {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.context-item-checkbox input[type="checkbox"] {
margin: 0;
pointer-events: none;
}
.context-item-checkbox .context-check {
width: 16px;
display: inline-flex;
justify-content: center;
color: #2f2a26;
font-weight: 700;
}
.context-label {
padding: 6px 8px 2px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #786e65;
font-weight: 700;
}
.context-icon {
width: 22px;
height: 22px;
border-radius: 6px;
background: #efe7dd;
border: 1px solid #d7d1c7;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
color: #2f2a26;
flex: 0 0 auto;
}
.submenu {
position: absolute;
top: -6px;
left: 100%;
min-width: 220px;
max-height: calc(100vh - 16px);
overflow-y: auto;
display: none;
pointer-events: none;
z-index: 45;
}
.has-submenu:hover .submenu,
.has-submenu.submenu-open .submenu {
display: grid;
pointer-events: auto;
}
.submenu .context-item {
font-weight: 600;
}
.context-text {
flex: 1;
}
.context-menu-hint {
padding: 4px 8px 2px;
font-size: 11px;
line-height: 1.35;
color: #8f867d;
font-weight: 500;
cursor: default;
user-select: none;
}
.context-item[data-action="cell-color-yellow"] .context-icon {
background: #fff4cc;
}
.context-item[data-action="cell-color-green"] .context-icon {
background: #e3f2e1;
}
.context-item[data-action="cell-color-blue"] .context-icon {
background: #e3ecf7;
}
.context-item[data-action="cell-color-gray"] .context-icon {
background: #efe7dd;
}
.context-item[data-action="cell-color-custom"] .context-icon {
background: var(
--table-cell-custom-color,
linear-gradient(135deg, #f87171 0 33%, #facc15 33% 66%, #38bdf8 66% 100%)
);
}
.context-item[data-action="border-color-standard"] .context-icon {
border-color: #2f2a26;
color: #2f2a26;
}
.context-item[data-action="border-color-gray"] .context-icon {
border-color: #808080;
color: #808080;
}
.context-item[data-action="border-color-transparent"] .context-icon {
background:
linear-gradient(45deg, transparent 46%, #b85b5b 47%, #b85b5b 53%, transparent 54%),
#fffaf5;
border-color: transparent;
}
.context-item[data-action="border-color-custom"] .context-icon {
border-color: var(--table-border-custom-color, #2d5b4e);
color: var(--table-border-custom-color, #2d5b4e);
}
.context-control-row {
display: grid;
grid-template-columns: 28px minmax(48px, 1fr) 52px 28px;
align-items: center;
gap: 6px;
padding: 6px 8px;
}
.context-color-row {
grid-template-columns: 34px minmax(92px, 1fr);
}
.context-step-btn {
width: 28px;
height: 28px;
border: 1px solid #d7d1c7;
border-radius: 6px;
background: #efe7dd;
color: #2f2a26;
font-weight: 700;
cursor: pointer;
}
.context-step-btn:hover {
background: #e4d8ca;
}
.context-number-label {
font-size: 12px;
font-weight: 700;
color: #2f2a26;
}
.context-number-input {
width: 52px;
min-width: 0;
height: 28px;
border: 1px solid #d7d1c7;
border-radius: 6px;
background: #fffdf9;
color: #2f2a26;
font-size: 12px;
font-weight: 600;
text-align: center;
}
.context-color-input {
width: 100%;
min-width: 0;
height: 28px;
border: 1px solid #d7d1c7;
border-radius: 6px;
background: #fffdf9;
color: #2f2a26;
font-size: 12px;
font-weight: 600;
font-family: inherit;
text-transform: lowercase;
}
.context-separator {
height: 1px;
background: #e0d6c9;
margin: 4px 2px;
}
/* DOM-level multi-cell selection (drag-select): outline only, no gradient overlay
so user-defined background colors remain visible. */
.table-cell-selected {
outline: 2px solid #2d5b4e;
outline-offset: -2px;
box-shadow: inset 0 0 0 2px rgba(45, 91, 78, 0.45);
}
/* ProseMirror CellSelection (shift-click range): same style without gradient. */
#docCanvas.ProseMirror td.selectedCell,
#docCanvas.ProseMirror th.selectedCell,
.wi-inline-rich-surface.ProseMirror td.selectedCell,
.wi-inline-rich-surface.ProseMirror th.selectedCell,
.wi-inline-rich-surface .ProseMirror td.selectedCell,
.wi-inline-rich-surface .ProseMirror th.selectedCell {
outline: 2px solid #2d5b4e;
outline-offset: -2px;
box-shadow: inset 0 0 0 2px rgba(45, 91, 78, 0.45);
}
#docCanvas.ProseMirror .column-resize-handle {
position: absolute;
right: -6px;
top: 0;
bottom: 0;
width: 12px;
background: linear-gradient(90deg, rgba(45, 91, 78, 0), rgba(45, 91, 78, 0.45));
pointer-events: auto;
z-index: 25;
}
.wi-inline-rich-surface.ProseMirror .column-resize-handle,
.wi-inline-rich-surface .ProseMirror .column-resize-handle {
position: absolute;
right: -6px;
top: 0;
bottom: 0;
width: 12px;
background: linear-gradient(90deg, rgba(45, 91, 78, 0), rgba(45, 91, 78, 0.45));
pointer-events: auto;
z-index: 25;
}
#docCanvas.ProseMirror.resize-cursor {
cursor: col-resize;
}
.wi-inline-rich-surface.ProseMirror.resize-cursor,
.wi-inline-rich-surface .ProseMirror.resize-cursor {
cursor: col-resize;
}
#docCanvas.ProseMirror.resize-cursor * {
cursor: col-resize !important;
}
.wi-inline-rich-surface.ProseMirror.resize-cursor *,
.wi-inline-rich-surface .ProseMirror.resize-cursor * {
cursor: col-resize !important;
}
.modal,
.modal-overlay {
display: none;
}
[hidden] {
display: none !important;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
cursor: grab;
user-select: none;
}
.modal-header button,
.modal-header input,
.modal-header select {
cursor: default;
user-select: auto;
}
.modal-dragging {
user-select: none;
}
.modal--user-sized .modal-body {
max-height: none !important;
}
.modal-resize-handle {
position: absolute;
bottom: 3px;
right: 3px;
width: 14px;
height: 14px;
cursor: se-resize;
opacity: 0.45;
pointer-events: auto;
}
.modal-resize-handle::after {
content: '';
position: absolute;
inset: 1px 1px 1px 1px;
border-right: 2px solid var(--ink-soft, #8a7060);
border-bottom: 2px solid var(--ink-soft, #8a7060);
border-bottom-right-radius: 4px;
}
.modal-resize-handle:hover {
opacity: 0.85;
}
.modal-body {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
.modal-body-fill {
min-height: 60px;
}
.modal--user-sized .modal-body .modal-body-fill {
flex: 1 1 auto;
min-height: 0;
max-height: none !important;
overflow-y: auto;
}
#templateManagerModal {
width: min(1300px, 96vw);
inset: 4vh auto auto 50%;
max-height: 92vh;
}
#templateManagerModal .modal-body {
overflow: auto;
}
#templateManagerModal #templateContent {
height: min(58vh, 560px);
min-height: 360px;
overflow: auto;
box-sizing: border-box;
}
#templateManagerModal #templateHtmlSource {
width: 100%;
height: min(58vh, 560px);
min-height: 360px;
resize: none;
border: 1px solid var(--muted);
border-radius: 10px;
background: #fffaf5;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
font-size: 12px;
line-height: 1.4;
padding: 10px;
box-sizing: border-box;
}
#templateManagerModal .template-split-editor {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: start;
width: 100%;
}
#templateManagerModal .template-split-pane {
display: grid;
gap: 6px;
min-width: 0;
align-content: start;
width: 100%;
}
#templateManagerModal #templateScript {
min-height: 180px;
}
#templateManagerModal .template-logo-picker {
display: grid;
gap: 10px;
}
#templateManagerModal .template-logo-picker-actions {
display: grid;
gap: 6px;
}
#templateManagerModal #templateLogoPreview {
width: min(320px, 100%);
max-height: 110px;
object-fit: contain;
border: 1px solid var(--border, #d8cfc2);
border-radius: 10px;
background: #fff;
padding: 10px;
}
#templateManagerModal .work-table-wrapper {
max-height: 260px;
overflow: auto;
}
#templateManagerModal .template-history-wrapper {
min-height: 124px;
border: 1px solid #e1d4c6;
border-radius: 10px;
background: #fffaf5;
}
#templateManagerModal .template-history-wrapper .work-table {
width: 100%;
min-width: 100%;
}
#templateManagerModal .template-history-wrapper .placeholder {
padding: 16px 10px;
color: var(--ink-soft);
text-align: left;
white-space: normal;
}
#templateGlobalSettingsModal {
width: min(760px, 94vw);
inset: 4vh auto auto 50%;
max-height: 92vh;
}
#templateGlobalSettingsModal .modal-body {
overflow: auto;
padding-right: 4px;
}
#templateGlobalSettingsModal .template-manager-section {
align-content: start;
}
#workItemTypeManagerModal {
width: min(1400px, 98vw);
inset: 4vh auto auto 50%;
max-height: 92vh;
}
#workItemTypeManagerModal .modal-body {
overflow: auto;
}
#workItemTypeManagerModal .work-table-wrapper {
overflow: auto;
height: 320px;
min-height: 170px;
max-height: 65vh;
resize: vertical;
}
#workItemTypeManagerModal .work-table {
table-layout: auto;
min-width: 1300px;
}
#workItemTypeManagerModal .work-table th,
#workItemTypeManagerModal .work-table td {
white-space: normal;
overflow: visible;
text-overflow: clip;
min-height: 44px;
vertical-align: top;
}
#workItemTypeManagerModal .work-table input[type="text"],
#workItemTypeManagerModal .work-table input[type="number"],
#workItemTypeManagerModal .work-table select,
#workItemTypeManagerModal .work-table textarea {
width: 100%;
min-width: 140px;
box-sizing: border-box;
}
#workItemTypeManagerModal .workitem-config-section {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fff;
margin-top: 12px;
}
#workItemTypeManagerModal .workitem-config-section>summary {
cursor: pointer;
font-weight: 700;
padding: 10px 12px;
user-select: none;
}
#workItemTypeManagerModal .workitem-config-section>summary::marker {
color: var(--accent);
}
#workItemTypeManagerModal .workitem-config-section-body {
padding: 6px 12px 12px;
}
#workItemTypeManagerModal #workItemStatusSchemaInput,
#workItemTypeManagerModal #workItemResolutionSchemaInput {
resize: vertical;
min-height: 90px;
}
#workItemTypeManagerModal .workitem-enum-schema-row td {
background: #fffaf5;
}
#workItemTypeManagerModal .workitem-enum-schema-row textarea[data-field="enum_schema_lines"] {
width: 100%;
min-height: 90px;
resize: vertical;
box-sizing: border-box;
}
#userEditModal {
width: min(1200px, 96vw);
inset: 4vh auto auto 50%;
max-height: 92vh;
}
#userEditModal .modal-body {
overflow: auto;
}
#userEditModal .user-edit-section {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fff;
}
#userEditModal .user-edit-section+.user-edit-section {
margin-top: 10px;
}
#userEditModal .user-edit-section>summary {
cursor: pointer;
font-weight: 700;
padding: 10px 12px;
user-select: none;
}
#userEditModal .user-edit-section>summary::marker {
color: var(--accent);
}
#userEditModal .user-edit-section-body {
padding: 6px 12px 12px;
}
@media (max-width: 1100px) {
#templateManagerModal .template-split-editor {
grid-template-columns: 1fr;
}
}
.paste-input {
width: 100%;
min-height: 180px;
border: 1px solid var(--muted);
border-radius: 10px;
padding: 10px;
background: #fffaf5;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
}
.modal-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
.project-search-input-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
align-items: center;
}
#projectSearchModal .modal-body {
gap: 10px;
}
.project-search-loading {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink-soft);
font-size: 13px;
}
.hourglass-spinner {
width: 14px;
height: 14px;
display: inline-block;
border: 2px solid #bba889;
border-top-color: #7d6a51;
border-radius: 50%;
animation: project-search-spin 0.9s linear infinite;
}
@keyframes project-search-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.project-search-results {
mark {
color: inherit;
}
display: grid;
gap: 10px;
max-height: min(60vh, 560px);
overflow: auto;
padding-right: 4px;
}
.doc-ai-panel {
position: fixed;
right: 28px;
bottom: 28px;
z-index: 1400;
width: min(520px, calc(100vw - 24px));
max-height: min(760px, calc(100vh - 24px));
background: #fffdf9;
border: 1px solid #d8c8b7;
border-radius: 8px;
box-shadow: 0 18px 48px rgba(48, 37, 26, 0.24);
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
overflow: hidden;
}
.doc-ai-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
cursor: grab;
font-weight: 700;
background: #f3eadf;
border-bottom: 1px solid #ddcdbc;
}
.doc-ai-panel-body {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
padding: 10px;
overflow: hidden;
}
.doc-ai-chat-log {
flex: 1 1 auto;
min-height: 180px;
overflow: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 2px;
}
.doc-ai-message {
max-width: 92%;
border: 1px solid #e1d4c7;
border-radius: 8px;
padding: 8px 10px;
font-size: 13px;
line-height: 1.4;
background: #ffffff;
color: #2f2a24;
}
.doc-ai-message-user {
align-self: flex-end;
background: #eaf4f1;
border-color: #bdd8d0;
}
.doc-ai-message-assistant {
align-self: flex-start;
}
.doc-ai-message-proposals {
max-width: 100%;
width: 100%;
padding: 0;
border: 0;
background: transparent;
}
.doc-ai-context-strip {
min-height: 28px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
max-height: 64px;
overflow: hidden;
}
.doc-ai-context-empty {
color: var(--ink-soft);
font-size: 12px;
}
.doc-ai-context-chip {
border: 1px solid #cbded8;
border-radius: 999px;
background: #f0f8f5;
color: #24443b;
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 4px 8px;
font-size: 12px;
}
.doc-ai-context-chip strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 220px;
}
.doc-ai-context-count-badge {
border: 1px solid #c8d7d3;
border-radius: 999px;
background: #ffffff;
color: #31564d;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 3px 9px;
font-size: 12px;
font-weight: 700;
}
.doc-ai-composer {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 8px;
align-items: end;
}
.doc-ai-plus-btn {
width: 34px;
height: 34px;
font-size: 20px;
line-height: 1;
}
#docAiPromptInput,
#docAiRedactionInput {
width: 100%;
border: 1px solid var(--muted);
border-radius: 8px;
padding: 8px;
background: #fffaf5;
resize: vertical;
font: inherit;
}
#docAiPromptInput {
min-height: 42px;
max-height: 140px;
}
.doc-ai-risk-hint {
color: #76695e;
font-size: 12px;
}
.doc-ai-context-picker {
position: absolute;
left: 10px;
right: 10px;
bottom: 112px;
z-index: 8;
border: 1px solid #dbc9b5;
border-radius: 8px;
background: #fffaf5;
padding: 8px;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
gap: 8px;
box-sizing: border-box;
min-height: 0;
max-height: min(340px, calc(100% - 132px), calc(100vh - 190px));
overflow: hidden;
box-shadow: 0 14px 36px rgba(48, 37, 26, 0.22);
}
.doc-ai-context-picker[hidden],
.doc-ai-review-panel[hidden],
.doc-ai-loading-dock[hidden] {
display: none;
}
.doc-ai-context-picker-head {
display: grid;
grid-template-columns: auto minmax(120px, 1fr) auto;
gap: 8px;
align-items: center;
}
.doc-ai-context-picker-head input {
width: 100%;
}
.doc-ai-context-close-btn {
width: 30px;
height: 30px;
border: 1px solid #d9c9b7;
border-radius: 999px;
background: #ffffff;
color: #5c4f43;
line-height: 1;
cursor: pointer;
}
.doc-ai-context-close-btn:hover {
border-color: #d83a3f;
color: #d83a3f;
}
.doc-ai-context-picker-filters {
display: grid;
grid-template-columns: minmax(140px, 1fr) auto auto;
gap: 6px;
align-items: center;
}
.doc-ai-context-picker-filters select {
min-width: 0;
width: 100%;
}
.doc-ai-context-list {
min-height: 0;
max-height: none;
overflow: auto;
display: grid;
gap: 6px;
padding-right: 4px;
}
.doc-ai-context-item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 8px;
align-items: start;
padding: 6px;
border: 1px solid #eaded0;
border-radius: 7px;
background: #ffffff;
font-size: 12px;
cursor: pointer;
}
.doc-ai-context-item:hover {
border-color: #b9d7cf;
background: #f5fbf8;
}
.doc-ai-context-item input {
margin-top: 2px;
}
.doc-ai-context-item span {
display: grid;
gap: 2px;
min-width: 0;
}
.doc-ai-context-item small {
color: var(--ink-soft);
}
.doc-ai-panel-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 10px;
border-top: 1px solid #ddcdbc;
background: #f8f3ec;
}
.doc-ai-chapter-list {
border: 1px solid #dbc9b5;
border-radius: 10px;
background: #fffdf9;
max-height: 220px;
overflow: auto;
padding: 8px;
display: grid;
gap: 6px;
}
.doc-ai-chapter-item {
display: grid;
grid-template-columns: 18px 1fr;
align-items: start;
gap: 8px;
font-size: 13px;
padding: 4px 2px;
}
.doc-ai-chapter-empty {
color: var(--ink-soft);
font-size: 13px;
padding: 4px;
}
.doc-ai-reviewed-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: 11px;
line-height: 1.4;
color: #8a5a11;
background: #fff2cf;
border: 1px solid #e5c986;
}
.doc-ai-loading-dock {
z-index: 4;
padding: 2px 0;
}
.doc-ai-loading-slot {
min-height: 38px;
display: flex;
align-items: center;
}
#docAiLoading {
width: fit-content;
max-width: 100%;
padding: 9px 12px;
border: 1px solid #ead8c5;
border-radius: 999px;
background: linear-gradient(135deg, #fffaf5 0%, #ffffff 100%);
box-shadow: 0 8px 24px rgba(72, 54, 35, 0.08);
color: #5f544b;
font-weight: 600;
}
.doc-ai-generating-animation {
display: inline-flex;
align-items: center;
gap: 3px;
}
.doc-ai-generating-animation span {
width: 6px;
height: 6px;
border-radius: 50%;
background: #d83a3f;
animation: doc-ai-generating-pulse 1s ease-in-out infinite;
}
.doc-ai-generating-animation span:nth-child(2) {
animation-delay: 0.15s;
}
.doc-ai-generating-animation span:nth-child(3) {
animation-delay: 0.3s;
}
.doc-ai-loading-meta {
display: grid;
gap: 6px;
font-size: 12px;
color: #6d6359;
margin-top: -4px;
}
.doc-ai-loading-bar {
height: 6px;
border-radius: 6px;
background: #efe3d4;
overflow: hidden;
position: relative;
}
.doc-ai-loading-bar-fill {
width: 34%;
height: 100%;
border-radius: 6px;
background: linear-gradient(90deg, #d84f3f 0%, #f08a62 100%);
animation: doc-ai-loading-slide 1.2s ease-in-out infinite;
}
@keyframes doc-ai-generating-pulse {
0%,
80%,
100% {
opacity: 0.35;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-4px);
}
}
@keyframes doc-ai-loading-slide {
0% {
transform: translateX(-120%);
}
50% {
transform: translateX(90%);
}
100% {
transform: translateX(240%);
}
}
.doc-ai-review-panel {
border: 1px solid #dbc9b5;
border-radius: 8px;
background: #fffdf9;
padding: 10px;
display: grid;
gap: 10px;
max-height: none;
}
.doc-ai-review-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.doc-ai-review-summary {
font-size: 12px;
color: var(--ink-soft);
}
.doc-ai-review-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.doc-ai-proposal-list {
display: grid;
gap: 8px;
max-height: min(420px, 48vh);
overflow: auto;
padding-right: 4px;
}
.doc-ai-proposal-item {
border: 1px solid #decfbe;
border-radius: 9px;
background: #ffffff;
padding: 8px;
display: grid;
gap: 6px;
}
.doc-ai-proposal-item.is-unchecked {
opacity: 0.62;
}
.doc-ai-proposal-head {
display: grid;
grid-template-columns: 20px 1fr;
gap: 8px;
align-items: start;
}
.doc-ai-proposal-title {
font-weight: 700;
}
.doc-ai-proposal-meta {
font-size: 12px;
color: #6d6359;
}
.doc-ai-proposal-text {
font-size: 12px;
color: #5f554a;
line-height: 1.35;
}
.project-search-summary {
font-size: 13px;
color: var(--ink-soft);
}
.project-search-group {
border: 1px solid #e1d6c8;
border-radius: 10px;
background: #fffaf6;
padding: 8px;
display: grid;
gap: 6px;
}
.project-search-group-title {
font-weight: 700;
}
.project-search-group-list {
display: grid;
gap: 6px;
}
.project-search-item {
border: 1px solid #decfbe;
border-radius: 9px;
background: #ffffff;
padding: 8px;
cursor: pointer;
text-align: left;
display: grid;
gap: 2px;
}
.project-search-item:hover {
border-color: #c5b19c;
background: #fff8f1;
}
.project-search-item-title {
font-weight: 700;
}
.project-search-item-subtitle {
font-size: 12px;
color: #5f554a;
}
.project-search-item-snippet {
font-size: 12px;
color: #6d6359;
}
.project-search-empty {
font-size: 13px;
color: var(--ink-soft);
}
.project-search-item mark {
background: #ffe8a8;
color: inherit;
border-radius: 3px;
padding: 0 1px;
}
tr.search-hit {
animation: search-hit-fade 1.2s ease;
}
@keyframes search-hit-fade {
from {
background: #fff1bf;
}
to {
background: transparent;
}
}
.mini-editor {
min-height: 120px;
border: 1px solid var(--muted);
border-radius: 10px;
padding: 8px;
background: #fffaf5;
}
.mini-actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.wi-insert-marker {
display: inline-block;
width: 0;
height: 0;
overflow: hidden;
}
.admin-only {
display: none;
}
.doc-canvas a.trace-link {
color: var(--accent-2);
text-decoration: underline;
}
.doc-var {
padding: 1px 4px;
border-radius: 6px;
background-color: #f0f0f0;
background-image: repeating-linear-gradient(-45deg,
rgba(0, 0, 0, 0.04) 0,
rgba(0, 0, 0, 0.04) 4px,
rgba(255, 255, 255, 0.14) 4px,
rgba(255, 255, 255, 0.14) 8px);
border: 1px dashed #b9b9b9;
font-size: 0.95em;
display: inline;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
max-width: 100%;
}
.doc-var.doc-var-source {
display: none;
}
.doc-var-widget {
padding: 1px 4px;
border-radius: 6px;
background-color: #f0f0f0;
background-image: repeating-linear-gradient(-45deg,
rgba(0, 0, 0, 0.04) 0,
rgba(0, 0, 0, 0.04) 4px,
rgba(255, 255, 255, 0.14) 4px,
rgba(255, 255, 255, 0.14) 8px);
border: 1px dashed #b9b9b9;
font-size: 0.95em;
display: inline-block;
max-width: 100%;
vertical-align: baseline;
}
.doc-var-widget .doc-var-rich {
display: inline-block;
max-width: 100%;
}
.doc-var-widget .doc-var-rich-content {
display: block;
max-width: 100%;
overflow-x: auto;
}
.doc-var-widget .doc-var-rich-content img {
max-width: 100%;
height: auto;
}
.doc-var-widget .doc-var-rich-content table {
border-collapse: collapse;
width: auto;
max-width: 100%;
}
.doc-traceability-table {
display: block;
max-width: 100%;
margin: 12px 0;
padding: 10px;
border: 1px dashed #b9b9b9;
border-radius: 8px;
background-color: #f0f0f0;
background-image: repeating-linear-gradient(-45deg,
rgba(0, 0, 0, 0.035) 0,
rgba(0, 0, 0, 0.035) 5px,
rgba(255, 255, 255, 0.16) 5px,
rgba(255, 255, 255, 0.16) 10px);
overflow-x: auto;
}
.doc-traceability-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
margin-bottom: 8px;
font-size: 12px;
color: var(--ink-soft);
}
.doc-traceability-toolbar label {
display: inline-flex;
gap: 6px;
align-items: center;
}
.doc-traceability-toolbar select {
min-height: 28px;
border: 1px solid #cfc2b2;
border-radius: 6px;
background: #fff;
padding: 3px 8px;
font-size: 12px;
}
.doc-traceability-content {
background: #fff;
border: 1px solid var(--muted);
border-radius: 6px;
padding: 8px;
min-width: min(720px, 100%);
}
.doc-traceability-matrix {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.doc-traceability-matrix th,
.doc-traceability-matrix td {
border: 1px solid #d8cec2;
padding: 6px;
vertical-align: top;
}
.doc-traceability-matrix th {
background: #efe7dd;
color: var(--ink);
text-align: left;
}
.doc-traceability-item {
display: block;
margin: 2px 0;
color: var(--ink);
line-height: 1.35;
}
.doc-ai-proposal-title-input,
.doc-ai-proposal-field select,
.doc-ai-proposal-field textarea {
width: 100%;
border: 1px solid #d8cbbb;
border-radius: 7px;
background: #fffaf5;
padding: 7px;
font: inherit;
}
.doc-ai-rich-editor {
width: 100%;
min-height: 96px;
max-height: 260px;
overflow: auto;
border: 1px solid #d8cbbb;
border-radius: 7px;
background: #fffaf5;
padding: 7px;
font: inherit;
line-height: 1.4;
}
.doc-ai-rich-editor:focus {
outline: 2px solid rgba(28, 120, 98, 0.22);
border-color: #86b9aa;
}
.doc-ai-rich-editor p {
margin: 0 0 6px;
}
.doc-ai-rich-editor ul,
.doc-ai-rich-editor ol {
margin: 4px 0 6px 20px;
padding: 0;
}
.doc-ai-rich-editor table {
border-collapse: collapse;
width: 100%;
margin: 6px 0;
}
.doc-ai-rich-editor td,
.doc-ai-rich-editor th {
border: 1px solid #d8cbbb;
padding: 4px 6px;
}
.doc-ai-rich-editor img,
.doc-ai-rich-editor svg {
max-width: 100%;
height: auto;
}
.doc-ai-drawio-preview {
border: 1px solid #d8cbbb;
border-radius: 7px;
background: #fffaf5;
padding: 7px;
}
.doc-ai-drawio-preview img,
.doc-ai-message img[data-diagram] {
display: block;
max-width: 100%;
height: auto;
border: 1px solid #d8cbbb;
border-radius: 7px;
background: #ffffff;
}
.doc-ai-proposal-title-input {
font-weight: 700;
}
.doc-ai-proposal-field {
display: grid;
gap: 4px;
font-size: 12px;
}
@media (max-width: 680px) {
.doc-ai-panel {
left: 8px;
right: 8px;
bottom: 8px;
width: auto;
max-height: calc(100vh - 16px);
}
.doc-ai-composer {
grid-template-columns: 34px minmax(0, 1fr);
}
.doc-ai-composer .primary {
grid-column: 2;
}
}
.doc-traceability-code {
font-weight: 500;
}
.trace-controls {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-bottom: 12px;
}
.trace-levels-info {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.trace-level-chip {
appearance: none;
border: 1px solid var(--muted);
border-radius: 999px;
padding: 4px 10px;
background: #fffaf5;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.trace-level-chip.active {
border-color: #2d5b4e;
background: #eaf4f0;
}
.trace-level-chip.inactive {
opacity: 0.58;
background: #f5f5f5;
}
#traceabilityView {
min-height: 0;
flex: 1;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.trace-controls label {
margin-right: 12px;
}
.trace-table {
--trace-cols: 3;
--trace-rest: 2;
background: var(--canvas);
border-radius: 12px;
border: 1px solid var(--muted);
padding: 12px;
display: grid;
align-content: start;
gap: 10px;
box-shadow: 0 10px 30px var(--shadow);
flex: 1 1 0;
min-height: 0;
height: auto;
overflow: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
.trace-row {
display: grid;
grid-template-columns: 1.2fr repeat(var(--trace-rest), minmax(0, 1fr));
gap: 10px;
border-bottom: 1px solid var(--muted);
padding-bottom: 8px;
align-items: start;
}
.trace-header-row {
position: sticky;
top: 0;
z-index: 4;
background: var(--canvas);
padding-top: 6px;
}
.trace-header-row .trace-header {
position: sticky;
top: 6px;
}
.trace-header {
font-weight: 700;
background: #efe7dd;
border-radius: 8px;
padding: 6px 8px;
border: none;
text-align: left;
cursor: pointer;
}
.trace-header:hover {
filter: brightness(0.97);
}
.trace-cell {
font-size: 13px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.trace-item {
padding: 4px 6px;
border-radius: 6px;
background: #fffaf5;
border: 1px solid var(--muted);
display: inline-flex;
align-items: center;
gap: 6px;
}
.trace-item:hover {
border-color: #8a7b6b;
box-shadow: 0 0 0 1px #8a7b6b inset;
}
.trace-item.test-result.passed {
background: #e6f4ea;
border-color: #c6e8cf;
}
.trace-item.test-result.accepted {
background: #fff5d6;
border-color: #f2ddb0;
}
.trace-item.test-result.failed {
background: #fde8e7;
border-color: #f4c2bf;
}
.trace-row.has-conflict .trace-cell:first-child .trace-item:first-child::before {
content: "⚠";
color: #b85c00;
font-size: 12px;
flex-shrink: 0;
margin-right: 2px;
line-height: 1;
}
.trace-row.has-conflict > .trace-cell:first-child {
background: #fff8ee;
border-radius: 6px;
}
.trace-cell-missing {
color: var(--ink-soft);
font-size: 12px;
padding: 4px 6px;
}
.trace-conflict-icon-btn {
font-size: 14px;
line-height: 1;
}
#traceConflictsOnlyBtn.active {
border-color: #b85c00;
color: #b85c00;
background: #fff3e0;
}
#traceQueryToggleBtn.active {
border-color: var(--accent);
color: var(--accent);
background: #fff1f1;
}
#traceFilterApplyBtn {
transition:
opacity 0.2s ease,
transform 0.2s ease,
max-width 0.2s ease,
margin 0.2s ease,
padding 0.2s ease,
border-width 0.2s ease;
max-width: 180px;
overflow: hidden;
white-space: nowrap;
}
#traceFilterApplyBtn.query-mode-hidden {
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
max-width: 0;
margin: 0;
padding-left: 0;
padding-right: 0;
border-width: 0;
}
#traceabilityView .work-filters input,
#traceabilityView .work-filters select {
border: 1px solid #cfc2b2;
border-radius: 10px;
background: #ffffff;
min-height: 40px;
padding: 8px 12px;
}
#traceabilityView .work-filters select {
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #7d6f61 50%),
linear-gradient(135deg, #7d6f61 50%, transparent 50%);
background-position:
calc(100% - 18px) calc(50% - 3px),
calc(100% - 12px) calc(50% - 3px);
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 34px;
}
.trace-config-layout {
display: grid;
grid-template-columns: minmax(300px, 0.9fr) minmax(520px, 1.4fr);
gap: 12px;
}
.trace-config-column {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fff;
padding: 8px;
min-height: 220px;
}
.trace-level-list {
display: grid;
gap: 8px;
max-height: 240px;
overflow: auto;
padding-right: 4px;
}
.trace-level-row {
border: 1px solid var(--muted);
border-radius: 8px;
background: #fffaf5;
padding: 8px;
display: grid;
gap: 6px;
cursor: pointer;
}
.trace-level-row:hover {
border-color: #b7a797;
}
.trace-level-row.active {
border-color: #8a7b6b;
box-shadow: 0 0 0 1px #8a7b6b inset;
}
.trace-level-row-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.trace-level-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.trace-level-name {
font-weight: 600;
}
.trace-level-actions .ghost {
min-width: 30px;
padding: 4px 8px;
cursor: pointer;
}
.trace-level-editor {
display: grid;
gap: 8px;
align-content: start;
}
.trace-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 6px 10px;
}
.trace-rule-list {
display: grid;
gap: 8px;
max-height: 220px;
overflow: auto;
padding-right: 4px;
}
.trace-rule-row {
display: grid;
grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
gap: 8px;
align-items: center;
}
.trace-rule-row.warning {
border: 1px solid #f3c0bc;
border-radius: 8px;
padding: 6px;
background: #fff2f1;
}
#traceabilityConfigModal {
width: min(1460px, 98vw);
inset: 4vh auto auto 50%;
max-height: 92vh;
}
#traceabilityConfigModal .modal-body {
overflow-y: auto;
}
#traceabilityConfigModal details summary {
cursor: pointer;
user-select: none;
}
#traceabilityConfigModal .trace-rule-list {
max-height: clamp(180px, 28vh, 520px);
}
@media (max-width: 1100px) {
.trace-config-layout {
grid-template-columns: 1fr;
}
}
.trace-links-groups {
display: grid;
gap: 10px;
}
.trace-issues {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid #e8bf66;
border-radius: 10px;
background: #fff3da;
}
.trace-issues-title {
font-size: 12px;
font-weight: 700;
color: #8a4f05;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.trace-issue-item {
font-size: 12px;
line-height: 1.35;
color: #6b450d;
}
.trace-group {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid var(--muted);
border-radius: 10px;
background: #fdf8f1;
}
.trace-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.trace-group-label {
font-size: 12px;
font-weight: 600;
color: #2d5b4e;
}
.trace-group-count {
min-width: 20px;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid #cbb9a5;
background: #efe7dd;
font-size: 11px;
text-align: center;
}
.trace-group-list {
display: grid;
gap: 6px;
}
.link-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 8px;
border: 1px solid var(--muted);
border-radius: 8px;
background: #fffaf5;
}
.link-item.link-item-warning {
border-color: #e3bf59;
background: #fff4d8;
}
.trace-link-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.trace-link-alert {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid #d7a11a;
background: #f6c949;
color: #6b450d;
font-size: 12px;
font-weight: 700;
flex: 0 0 auto;
}
.trace-link-broken-label {
color: #6b450d;
font-weight: 600;
}
.trace-relation {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
border: 1px solid #d6c8b8;
background: #f3ebe1;
color: #6b5948;
font-size: 11px;
white-space: nowrap;
}
.trace-type-icon {
width: 18px;
height: 18px;
border-radius: 5px;
background-size: 12px;
flex: 0 0 auto;
}
.link-arrow {
margin: 0 2px;
color: #2d5b4e;
font-weight: 600;
}
#workItemUsage {
display: grid;
gap: 10px;
}
#workItemUsage .workitem-usage-item {
padding: 0;
border: 1px solid var(--muted);
border-radius: 8px;
background: #f7f0e7;
overflow: hidden;
}
#workItemUsage .workitem-usage-link {
display: flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 8px 10px;
color: #264f43;
font-weight: 600;
text-decoration: none;
transition: background-color 120ms ease;
}
#workItemUsage .workitem-usage-link:hover {
background: #efe7dd;
text-decoration: underline;
}
#workItemUsage .workitem-usage-link:focus-visible {
outline: 2px solid #2d5b4e;
outline-offset: -2px;
}
#workItemUsage .workitem-usage-icon {
width: 16px;
height: 16px;
border-radius: 4px;
border: 1px solid #c7b8a8;
background-color: #e9ded0;
background-repeat: no-repeat;
background-position: center;
background-size: 11px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2334544a' d='M6 3h9l5 5v13H6zm8 1v5h5'/%3E%3C/svg%3E");
flex: 0 0 auto;
}
#workItemUsage .workitem-usage-title {
min-width: 0;
overflow-wrap: anywhere;
}
.link-remove {
display: none;
cursor: pointer;
font-size: 12px;
padding: 2px 6px;
border: 1px solid var(--muted);
border-radius: 6px;
background: #efe7dd;
}
.link-item:hover .link-remove {
display: inline-flex;
}
#diagramCanvas {
border: 1px solid var(--muted);
border-radius: 10px;
background: #fffaf5;
}
.diagram-embed {
width: min(100%, 980px);
height: min(70vh, 640px);
border: 1px solid var(--muted);
border-radius: 12px;
overflow: hidden;
background: #fffaf5;
margin: 0 auto;
}
.diagram-embed iframe {
width: 100%;
height: 100%;
border: 0;
}
.img-resizable {
position: relative;
}
.diagram-edit-btn {
position: absolute;
right: 6px;
bottom: -12px;
transform: none;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid var(--muted);
background: #fffaf5;
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px var(--shadow);
cursor: pointer;
pointer-events: none;
padding: 0;
margin: 0;
line-height: 0;
font-size: 0;
}
.diagram-edit-btn .btn-icon {
width: 14px;
height: 14px;
display: block;
}
.img-resizable.show-diagram-btn .diagram-edit-btn {
display: inline-flex;
pointer-events: auto;
}
@media (max-width: 1200px) {
.workspace {
grid-template-columns: 220px 1fr;
}
.meta-sidebar {
display: none;
}
}
@media (max-width: 900px) {
.workspace {
grid-template-columns: 1fr;
}
.sidebar {
order: 2;
}
.main {
order: 1;
}
.doc-layout {
grid-template-columns: 1fr;
}
.doc-sidebar {
order: 2;
}
.doc-external-toc {
width: 100%;
max-height: none;
}
.work-query-row {
grid-template-columns: 44px 1fr;
}
}
@media print {
@page {
size: A4 portrait;
margin: 22mm 22mm 22mm 22mm;
}
body {
background: white;
}
.topbar,
.sidebar,
.meta-sidebar,
.toolbar,
.doc-title-bar,
.doc-fullscreen-controls,
.doc-external-toc,
.panel-header,
.panel-tabs {
display: none !important;
}
.wi-review-actions {
display: none !important;
}
.comment-bubble {
display: inline-block !important;
}
.doc-page {
padding: 0;
box-shadow: none;
background: white;
}
.doc-canvas {
box-shadow: none;
padding-top: 35mm;
padding-bottom: 25mm;
}
.doc-header,
.doc-footer {
position: fixed;
left: 15mm;
right: 15mm;
transform: none;
width: auto;
padding: 0;
}
.doc-header {
top: 10mm;
}
.doc-footer {
bottom: 10mm;
}
.doc-footer-page::before {
content: counter(page);
}
.page-break {
page-break-before: always;
break-before: page;
}
.wi-test-table th,
.template-table th {
color: #000;
border-color: #ccc;
text-align: left;
}
.wi-test-rating {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
padding: 0;
color: #000;
}
}
|