below it (rendered in libraries/html/grids.php) holds a
* single | into which a service lazily loads its HTML
* (e.g. the .hist_block history panel). Toggling is driven by the centralized
* design/js/src/dresrow.js. The legacy templates/css/src/tables.css is NOT
* loaded in the new design, so these styles live here. See [[new-design-css-pipeline]].
* ======================================================================== */
.dresrow
{
display: none;
}
/* Toggle affordance: a soft rounded button with a CSS chevron that flips when
* the row is open. The grid elements render an empty inner as the target. */
.open_detales
{
cursor: pointer;
}
.open_detales > div
{
width: 26px;
height: 26px;
margin: 0 auto;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color .15s ease;
}
.open_detales > div::before
{
content: "";
width: 7px;
height: 7px;
margin-top: -3px;
border-right: 2px solid var(--color-text-subtle, #758199);
border-bottom: 2px solid var(--color-text-subtle, #758199);
transform: rotate(45deg);
transition: transform .2s ease, border-color .15s ease;
}
.open_detales:hover > div
{
background-color: var(--color-bg-soft, #F0F3FD);
}
.opened_detales > div::before
{
margin-top: 3px;
transform: rotate(-135deg);
border-color: var(--color-primary, #6F61EA);
}
/* The detail cell carries no table chrome — the .hist_block inside provides its
* own card framing. */
.tablegrid td.dres_cell,
td.dres_cell
{
padding: 0;
border: none;
background: transparent;
}
.cell_loader
{
padding: 28px;
text-align: center;
}
/* Lightweight CSS spinner that replaces the old loading-div.gif in the new
* design (markup branched in libraries/html/grids.php). */
.dres_spinner
{
display: inline-block;
width: 26px;
height: 26px;
border: 3px solid var(--color-border-soft, #D3DEEF);
border-top-color: var(--color-primary, #6F61EA);
border-radius: 50%;
animation: dres-spin .7s linear infinite;
}
@keyframes dres-spin
{
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce)
{
.dres_spinner {
animation-duration: 1.6s;
}
}
/* Highlight the parent row (and its toggle cell) while its detail row is open.
* Bootstrap's .table paints row hover/state through --bs-table-bg-state (an
* inset shadow ABOVE each cell background), so set that variable rather than a
* plain background — see the row-hover gotcha in [[new-design-css-pipeline]]. */
tr.hoverRowFix > *,
.table > tbody > tr.hoverRowFix > *
{
--bs-table-bg-state: var(--color-bg-soft, #F0F3FD);
}
td.tab_open
{
border-bottom: none;
}
/* ---- History panel (.hist_block) rendered inside the detail cell ---------- */
.hist_block
{
--hist-key-width: 260px;
margin: 6px 8px 10px;
padding: 16px 20px 18px;
background: #fff;
border: 1px solid var(--color-border-soft, #D3DEEF);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(34, 42, 57, .06);
}
.hist_block .page_title
{
margin-bottom: 14px;
padding-bottom: 10px;
font-size: 15px;
font-weight: 600;
color: var(--color-text, #222A39);
border-bottom: 1px solid var(--color-border-soft, #D3DEEF);
}
/* Each change entry is a collapsible card. */
.hist_pane
{
margin-bottom: 10px;
border: 1px solid var(--color-border-soft, #D3DEEF);
border-radius: 10px;
overflow: hidden;
transition: border-color .15s ease, box-shadow .15s ease;
}
.hist_pane:last-child
{
margin-bottom: 0;
}
.hist_pane:hover
{
border-color: var(--color-border, #BCC9DF);
box-shadow: 0 2px 8px rgba(34, 42, 57, .05);
}
/* Collapsed header: clickable row of "who changed it" + "when". A leading
* chevron (drawn on the title) signals it expands; it rotates when the entry's
* detail table is shown via ToggleItem(). */
.hist_pane_title
{
position: relative;
align-items: center;
gap: 16px;
margin: 0;
padding: 12px 16px 12px 38px;
background: var(--table-head-bg, var(--GRAY-Gray-10, #F4F7FF));
cursor: pointer;
transition: background-color .15s ease;
}
/* The title is a bootstrap .row with col-sm-5 / col-sm-4 children; collapse the
* columns to their content so the date sits right after the name. */
.hist_pane_title > .text-left
{
flex: 0 0 auto;
width: auto;
max-width: none;
padding: 0;
text-align: left;
}
.hist_pane_title > .text-left:first-child
{
flex: 0 0 calc(var(--hist-key-width) - 28px);
}
.hist_pane:hover > .hist_pane_title
{
background: var(--color-bg-soft, #F0F3FD);
}
.hist_pane_title::before
{
content: "";
position: absolute;
left: 16px;
top: 50%;
width: 6px;
height: 6px;
margin-top: -4px;
border-right: 2px solid var(--color-text-subtle, #758199);
border-bottom: 2px solid var(--color-text-subtle, #758199);
transform: rotate(-45deg);
transition: transform .2s ease, border-color .15s ease;
}
/* Open state: the expanded detail div directly follows the title in the DOM. */
.hist_pane_title:has(+ div[id^="idx_"]:not([style*="display: none"]))::before
{
margin-top: -5px;
transform: rotate(45deg);
border-color: var(--color-primary, #6F61EA);
}
.hist_pane_title a
{
display: inline-block;
color: var(--color-text, #222A39);
font-weight: 500;
text-decoration: none;
transition: color .15s ease;
}
.hist_pane_title .text-left:first-child a
{
font-weight: 600;
}
.hist_pane_title .text-left:not(:first-child) a
{
color: var(--color-text-subtle, #758199);
font-weight: 500;
font-size: 13px;
}
/* Recolour the entry links whenever the title row is hovered, not only when the
* pointer is directly over the anchor. */
.hist_pane_title a:hover,
.hist_pane_title:hover a,
.hist_pane:hover > .hist_pane_title a
{
color: var(--color-primary, #6F61EA);
}
/* Expanded change detail (the renderHistPage table of page_key / page_value
* rows) sits below the title. */
.hist_pane > div[id^="idx_"]
{
padding: 6px 16px 12px;
border-top: 1px solid var(--color-border-soft, #D3DEEF);
background: #fff;
}
.hist_pane > div[id^="idx_"] > table
{
width: 100%;
border-collapse: collapse;
}
.hist_pane > div[id^="idx_"] > table td
{
padding: 8px 10px;
vertical-align: top;
border-bottom: 1px solid var(--color-border-soft, #D3DEEF);
}
.hist_pane > div[id^="idx_"] > table tr:last-child td
{
border-bottom: none;
}
.hist_pane > div[id^="idx_"] > table td:first-child
{
width: var(--hist-key-width);
max-width: var(--hist-key-width);
}
.hist_pane .page_key
{
color: var(--color-text-subtle, #758199);
font-size: 13px;
font-weight: 500;
}
.hist_pane .page_value
{
color: var(--color-text, #222A39);
font-weight: 500;
word-break: break-word;
}
/* Keep field images (e.g. the PHOTO field) small inside the history detail so a
* full-size photo doesn't blow out the row. */
.hist_pane .page_value img
{
max-width: 64px;
height: auto;
}
.hist_pane .page_value .worker_photo
{
width: 50px;
border-radius: 50%;
}
/* A value (or its label) that changed in this revision is highlighted so the
* "what changed" reads at a glance. */
.hist_pane .changed_key
{
color: var(--color-primary, #6F61EA);
font-weight: 600;
}
.hist_pane .changed_hist
{
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
background: var(--color-bg-soft, #F0F3FD);
color: var(--color-primary, #6F61EA);
font-weight: 600;
}
.hist_block .no_data_found
{
padding: 28px;
text-align: center;
color: var(--color-text-subtle, #758199);
font-style: italic;
}
/* Printed official form keeps solid black grid lines, scoped to the export
* block so it never leaks into other print views. */
@media print {
#exportable .table {
border: solid #000 !important;
border-width: 1px 0 0 1px !important;
}
#exportable .table > tbody > tr > td,
#exportable .table > thead > tr > th {
border: solid #000 !important;
border-width: 0 1px 1px 0 !important;
}
}
/* person_orgs history modal (default_history.php): the date header cells and the
left-side row titles hard-code color:white for the old dark header. The new
design header is light, so recolour the text and tint the header cells to
match the standard grid head. !important is needed to beat the inline style. */
#exportable .hist-scroll-header .changedata p,
#exportable .td-history.left-titles p {
color: var(--color-text, #222A39) !important;
}
#exportable .hist-scroll-header th,
#exportable .td-history.left-titles {
background: var(--table-head-bg, #F4F7FF);
}
/* person_orgs history modal sticky header. The table lives in .scroll-table
(overflow-x:scroll), so native CSS sticky can't pin it — the old design floats
it with JS (SetFloatingScroll in 2 - app.js), offsetting the row's `top` by the
scroll amount. That stays steady only on a position:relative element; the
shared markup's inline position:sticky makes the browser re-pin the row on top
of the JS offset, so it drifts down by a large, growing amount. Force relative
(beats the inline style) so the float is steady, like the old design. */
#exportable tr.hist-scroll-header {
position: relative !important;
z-index: 6;
}
/* In the old design the modal title was not sticky, so the floated header had
clear space above it. The new design makes .page_title sticky globally, which
then sits over the floated header — un-stick it inside modals to restore the
old-design behaviour. */
/* .content_wrapper_modal .page_title {
position: static;
} */
/* The page_title that renders inside the lity iframe lives in modal.php's
.content_wrapper_modal (a separate document from the parent lity-container),
so the parent page's lity.css cannot reach it. Style it here — table.css is in
the same bundle modal.php loads — giving the modal header taller top/bottom
padding than the default 24px. */
.content_wrapper_modal .page_title {
padding-top: 10px;
padding-bottom: 35px;
}
/* The manual panel header (.manual-panel-header) and the manual side panel
(#manual-side-panel) render their own compact page_title, so they must not
pick up the modal's tall padding — keep it at 8px there. */
.content_wrapper_modal .manual-panel-header .page_title,
.content_wrapper_modal #manual-side-panel .page_title,
#manual-side-panel .page_title {
padding-top: 8px;
padding-bottom: 8px;
}
@media (max-width: 780px) {
.bulletin_report_item{
overflow-x: scroll;
}
}
/* end file: table.css */
/* start file: tm-boards.css */
/* Task management: analytics bar, kanban boards and inline status select. */
.tm_view_modes {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid #D3DEEF;
border-radius: 10px;
background: #FFFFFF;
vertical-align: middle;
flex: 0 0 auto;
margin-left: 8px;
}
.tm_view_mode {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 28px;
border-radius: 8px;
color: #6B7280;
text-decoration: none;
}
.tm_view_mode:hover {
color: #222A39;
background: #F0F3FD;
}
.tm_view_mode.is-active {
color: #FFFFFF;
background: #6F61EA;
}
.tm_analytics {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
margin: 0 0 16px;
}
.tm_analytics_chart {
flex: 1 1 340px;
min-width: 300px;
padding: 12px 16px 16px;
border: 1px solid #D3DEEF;
border-radius: 12px;
background: #FFFFFF;
}
.tm_analytics_title {
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #4B5563;
}
.tm_analytics_canvas {
position: relative;
height: 190px;
}
.tm_analytics_chart canvas {
display: block;
}
.tm_analytics_counters {
display: flex;
flex: 1 1 340px;
flex-wrap: wrap;
align-content: flex-start;
gap: 12px;
}
.tm_analytics_counter {
display: flex;
flex: 1 1 130px;
flex-direction: column;
justify-content: center;
gap: 4px;
min-height: 74px;
padding: 12px 16px;
border: 1px solid #D3DEEF;
border-radius: 12px;
background: #FFFFFF;
}
.tm_analytics_counter_value {
font-size: 22px;
font-weight: 600;
line-height: 26px;
color: #111827;
}
.tm_analytics_counter_label {
font-size: 12px;
line-height: 16px;
color: #6B7280;
}
.tm_board .board-head {
border-bottom-width: 3px;
border-bottom-style: solid;
}
.tm_board_name {
flex: 1 1 auto;
color: #222A39;
}
.tm_board_count {
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
color: #4B5563;
background: #EEF2F9;
}
.tm_board_items {
padding: 8px;
min-height: 60px;
}
.tm_board_card {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
padding: 10px 12px;
border: 1px solid #D3DEEF;
border-left: 3px solid #D3DEEF;
border-radius: 8px;
background: #FFFFFF;
color: #111827;
text-decoration: none;
cursor: grab;
}
.tm_board_card:hover {
border-color: #A9BCDD;
box-shadow: 0 2px 6px rgba(17, 24, 39, 0.08);
text-decoration: none;
}
.tm_board_card.is-late {
border-left-color: #E63950;
}
.tm_board_card.is-dragging {
opacity: 0.5;
}
.tm_board_card.is-saving {
pointer-events: none;
opacity: 0.6;
}
.tm_board_card_title {
font-size: 13px;
font-weight: 600;
line-height: 18px;
}
.tm_board_card_process {
font-size: 12px;
line-height: 16px;
color: #6B7280;
}
.tm_board_card_meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 2px;
font-size: 11px;
}
.tm_board_card_priority {
font-weight: 600;
}
.tm_board_card_due {
color: #6B7280;
}
.tm_board_card.is-late .tm_board_card_due {
color: #E63950;
font-weight: 600;
}
.tm_board_column.is-dropzone {
background: #F0F3FD;
}
.tm_analytics_pie {
flex: 0 1 260px;
min-width: 220px;
}
.tm_board_card[draggable="false"] {
cursor: pointer;
}
.tm_board_card_line {
display: flex;
justify-content: space-between;
gap: 8px;
font-size: 11px;
color: #6B7280;
}
.tm_board_card_details {
align-self: flex-start;
margin-top: 4px;
padding: 2px 10px;
border: 1px solid #D3DEEF;
border-radius: 6px;
font-size: 11px;
color: #2563EB;
background: #FFFFFF;
}
.tm_board_card_details:hover {
border-color: #2563EB;
text-decoration: none;
}
.tm_status_chip {
display: inline-block;
margin: 0 4px 2px 0;
padding: 1px 8px;
border-radius: 10px;
font-size: 11px;
background: #F4F6FB;
white-space: nowrap;
}
.task_status_select {
min-width: 140px;
padding: 2px 6px;
font-weight: 600;
}
.task_confirm_content {
max-width: 900px;
margin: 0 auto;
}
/* end file: tm-boards.css */
/* start file: tmpl.css */
.tmpl_container
{
margin:0 0 10px;
}
.tmpl_key
{
padding: 5px;
border: 1px dashed #1e1e1e;
cursor: pointer;
margin:0 5px 0;
display: block;
/* float: left; */
}
.tmpl_key_c{
padding: 5px;
border: 1px dashed #1e1e1e;
cursor: pointer;
margin:0 5px 0;
display: block;
/* float: left; */
}
.tmpl_key:hover
{
background-color: #00cc66;
color: #FFFFFF;
}
/* end file: tmpl.css */
/* start file: tour.min.css */
[data-tg-tour]{
scroll-margin:30px 0
}
.tg-backdrop{
position:absolute;
align-items:center;
justify-content:center;
display:none;
z-index:99;
border-radius:7px;
box-shadow:rgba(33,33,33,.8) 0 0 1px 2px,rgba(33,33,33,.8) 0 0 0 1000vh;
border:1px solid rgba(193,192,232,.5);
top:50vh;
left:50vw;
width:0;
height:0
}
.tg-backdrop.tg-backdrop-animate{
transition:all 300ms
}
.tg-backdrop.allow-interaction{
pointer-events:none
}
.tg-dialog{
border-radius:12px;
animation-delay:100ms;
min-height:120px;
background:#fff;
color:#252525;
max-width:340px;
width:max-content;
z-index:9999;
display:none;
position:absolute;
top:0;
left:0;
padding:0;
font-size:.9rem
}
.tg-dialog .tg-dialog-header{
display:flex;
align-items:center;
padding:25px 25px 0 25px
}
.tg-dialog .tg-dialog-header .tg-dialog-title{
font-size:1rem;
font-weight:700;
margin-right:auto
}
.tg-dialog .tg-dialog-header .tg-dialog-title+.tg-dialog-body{
padding:18.75px 25px 18.75px 25px
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn{
width:12px;
height:12px;
margin-left:10px;
opacity:.4;
cursor:pointer;
white-space:nowrap
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn:hover{
opacity:8
}
.tg-dialog .tg-dialog-header .tg-dialog-close-btn:focus{
opacity:1
}
.tg-dialog .tg-dialog-header .tg-dialog-spinner{
display:none;
opacity:.4;
margin-top:-1px;
-webkit-animation:tg-spin 1s linear infinite;
-moz-animation:tg-spin 1s linear infinite;
-o-animation:tg-spin 1s linear infinite;
animation:tg-spin 1s linear infinite
}
@keyframes tg-spin{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(359deg)
}
}
.tg-dialog .tg-dialog-progress-bar{
background:#f1f1f1;
height:5px;
display:block;
margin-top:18.75px;
position:relative
}
.tg-dialog .tg-dialog-progress-bar>.tg-bar{
position:absolute;
top:0;
left:0;
min-width:4px;
background:#414144;
height:100%;
display:block;
transition:all 300ms
}
.tg-dialog .tg-dialog-body{
padding:25px;
font-weight:400
}
.tg-dialog .tg-dialog-dots{
display:flex;
align-items:center;
justify-content:center;
padding:15px 0;
margin-bottom:10px;
border-top:1px solid #dedee7;
border-bottom:1px solid #dedee7
}
.tg-dialog .tg-dialog-dots>span.tg-dot{
display:inline-block;
width:9px;
height:9px;
background:#c2c7ce;
border-radius:12px;
margin:0 4px
}
.tg-dialog .tg-dialog-dots>span.tg-dot.tg-dot-active{
background:#5362d9
}
.tg-dialog .tg-dialog-footer{
padding:12.5px 25px 25px 25px;
display:flex;
align-items:center
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn{
padding:5px 10px;
border:1px solid #cbcfd5;
color:#6f727e;
border-radius:4px;
font-weight:500;
font-size:.82rem;
white-space:nowrap
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn+button{
margin-left:auto
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn.disabled{
pointer-events:none;
opacity:.6
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:hover{
color:#464852;
border:1px solid #b5b7c2;
outline:none;
box-shadow:none
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:focus{
outline:none;
box-shadow:none
}
.tg-dialog .tg-dialog-footer button.tg-dialog-btn:active{
color:#4655cb;
background:#f1f2ff;
border:1px solid #5362d9;
outline:none;
box-shadow:none
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup{
margin:0 auto;
padding:0 10px;
text-align:center;
line-height:1
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-step-progress{
font-size:.78rem;
font-weight:700;
margin:0 auto;
opacity:.4;
letter-spacing:1px;
display:inline-block
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots{
padding:0;
margin:0;
border:none
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots>span.tg-dot{
width:8px;
height:8px;
margin:0 3px
}
.tg-dialog .tg-dialog-footer .tg-dialog-footer-sup .tg-dialog-dots+.tg-step-progress{
margin-top:10px;
font-size:.68rem
}
.tg-dialog .tg-arrow{
position:absolute;
background:#fff;
width:9px;
height:9px;
border-radius:1px;
transform:rotate(45deg)
}
.tg-dialog.tg-dialog-fixed{
transition:none;
animation-delay:0ms
}
.tg-dialog.animate-position{
transition:all 300ms
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-title{
opacity:.4
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-close-btn{
display:none
}
.tg-dialog.tg-dialog-loading .tg-dialog-header .tg-dialog-spinner{
display:inline-block
}
.tg-dialog.tg-dialog-loading .tg-dialog-body{
opacity:.4;
pointer-events:none
}
.tg-dialog.tg-dialog-loading .tg-dialog-footer{
pointer-events:none;
opacity:.4
}
.tg-no-interaction *{
pointer-events:none !important;
user-select:none !important
}
.tg-no-interaction .tg-dialog,.tg-no-interaction .tg-active-element,.tg-dialog *,.tg-active-element *{
pointer-events:auto !important;
user-select:text !important
}
/* end file: tour.min.css */
/* start file: unitsCharts.css */
#chart-container > svg{
border: none !important;
min-height: 600px;
outline: none !important;
}
#chart-container .toolbar-item::after {
bottom: -43px;
}
#chart-container .toolbar-item::before {
bottom: -14px;
}
.chart-section{
border: 1px solid #F2F2F2;
padding: 10px;
border-radius: 12px;
height: 100%;
}
.extra-chief-btn .bi-people-fill {
font-size: 14px;
}
.extra-chief-btn:hover{
background: #913131 !important;
}
#chart-container .info-container:hover {
box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
transition: box-shadow 0.3s ease;
}
#apextree-tooltip-container{
z-index: 1000000000 !important;
padding:0px !important;
}
#apextree-tooltip-container .info-container{
border: none !important;
}
#apextree-tooltip-container .info-container .extra-chief-btn{
top: -25px !important;
right: -10px !important;
}
#apextree-tooltip-container div{
padding: 0px !important;
}
#apextree-tooltip-container .tooltip-content > .group-node-container{
padding: 10px !important;
}
#apextree-tooltip-container .tooltip-content{
background-color: transparent !important;
}
#apextree-tooltip-container .info-container {
padding: 10px !important;
padding-top: 20px !important;
}
#apextree-tooltip-container .info-container[data-type="schedule"], #apextree-tooltip-container .info-container[data-type="unit"]{
padding-top: 0px !important;
}
#apextree-tooltip-container .info-container div{
max-width: 100% !important;
}
#apextree-tooltip-container .info-container .tree-name{
margin-top: 10px !important;
}
#apextree-tooltip-container .node-img{
top: -30px !important;
}
#apextree-tooltip-container .group-node-container .default-node-container{
height: unset !important;
flex: 1 !important;
}
#apextree-tooltip-container .group-node-container .node-img{
top: -14px !important;
}
.chart-toolbar{
display: flex;
align-items: center;
justify-content: space-between;
}
#chart-container g[aria-label="Collapse node"] > circle , #chart-container g[aria-label="Expand node"] > circle{
r: 17px !important;
}
g[aria-label="Collapse node"] svg,
g[aria-label="Expand node"] svg {
overflow: visible !important;
}
g[aria-label="Collapse node"] svg path,
g[aria-label="Expand node"] svg path {
transform: translate(-5px, -5px);
}
.apextree-node > div:first-child {
overflow: visible !important;
}
#chart-wrapper {
position: relative;
}
#chart-container {
height: calc(100vh - 100px);
max-height: 1000px;
margin-bottom: 8px;
overflow: hidden;
}
#chart-loader {
position: absolute;
inset: 0;
background: rgba(255,255,255,0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.chart-spinner {
width: 42px;
height: 42px;
border: 4px solid #e2e8f0;
border-top-color: #6366f1;
border-radius: 50%;
animation: chart-spin 0.8s linear infinite;
}
#chart-container .apextree-search, #chart-container #toolbar{
z-index: 1;
}
@keyframes chart-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 752px) {
.chart-toolbar {
flex-direction: column;
}
.chart-legend {
margin-top: 10px;
}
.apextree-search-input{
width: 125px !important;
}
}
/* end file: unitsCharts.css */
/* start file: user-profile.css */
/* =====================================================================
USER PROFILE — new design port (Figma 2519:39428 / 2515:29791)
Page layout uses utility classes (grid / col-span / flex / gap).
This file styles the component internals only.
===================================================================== */
/* Profile details panel — filled background (Figma 2515:29791, #F4F7FF). */
.up_sidebar {
position: sticky;
top: 100px;
align-self: start;
height: fit-content;
background: var(--color-gray-10);
border-radius: 24px;
padding: 32px;
}
@media (max-width: 991.98px) {
.up_sidebar {
position: relative;
top: auto;
align-self: auto;
height: auto;
padding: 24px;
}
}
@media (max-width: 480px) {
.up_sidebar {
padding: 16px;
border-radius: 16px;
}
}
/* ---------------------------------------------------------------------
Tabs — underline style (layout via .flex .items-end .gap-24)
--------------------------------------------------------------------- */
.up_tabs {
border-bottom: 1px solid var(--color-gray-200);
margin-bottom: 32px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: #6f61ea transparent;
}
.up_tabs::-webkit-scrollbar {
height: 4px;
}
.up_tabs::-webkit-scrollbar-track {
background: transparent;
}
.up_tabs::-webkit-scrollbar-thumb {
background: #6f61ea;
border-radius: 3px;
}
.up_tabs::-webkit-scrollbar-thumb:hover {
background: #5a4db8;
}
.up_tab_btn {
appearance: none;
background: none;
border: 0;
padding: 0 0 12px;
margin-bottom: -1px;
font-size: 14px;
line-height: 22px;
color: var(--color-gray-600);
cursor: pointer;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .15s ease, border-color .15s ease;
}
@media (max-width: 600px) {
.up_tab_btn {
font-size: 13px;
padding-bottom: 10px;
}
}
@media (max-width: 400px) {
.up_tab_btn {
font-size: 12px;
}
}
.up_tab_btn:hover {
color: var(--color-purple-800);
}
.up_tab_btn.tab_button_active {
color: var(--color-purple-800);
border-bottom-color: var(--color-purple-800);
}
.up_pane {
display: none;
}
.up_pane.active {
display: flex;
flex-direction: column;
gap: 40px;
}
@media (max-width: 991.98px) {
.up_pane.active {
gap: 28px;
}
}
@media (max-width: 600px) {
.up_pane.active {
gap: 20px;
}
}
/* ---------------------------------------------------------------------
Generic card
--------------------------------------------------------------------- */
.up_card {
background: var(--color-bg);
border: 1px solid var(--color-gray-200);
border-radius: 24px;
padding: 32px;
}
@media (max-width: 991.98px) {
.up_card {
border-radius: 20px;
padding: 24px;
}
}
@media (max-width: 600px) {
.up_card {
border-radius: 16px;
padding: 16px;
}
}
.up_card_head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 16px;
margin-bottom: 32px;
}
@media (max-width: 991.98px) {
.up_card_head {
margin-bottom: 24px;
}
}
@media (max-width: 600px) {
.up_card_head {
margin-bottom: 16px;
}
}
.up_card_title {
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
}
/* ---------------------------------------------------------------------
Work position details card + carousel
--------------------------------------------------------------------- */
.up_position_card {
background: var(--color-gray-10);
border: 0;
}
.up_carousel_nav {
display: flex;
align-items: center;
gap: 8px;
}
.up_carousel_arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
padding: 4px;
font-size: 12px;
border-radius: 9999px;
border: 1px solid var(--color-purple-800);
color: var(--color-gray-300);
background: var(--color-purple-800);
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
/* Disabled State */
.up_carousel_arrow.is-disabled {
border-color: var(--color-gray-300);
color: var(--color-gray-300);
background: transparent;
cursor: default;
pointer-events: none;
}
.up_carousel_viewport {
overflow: hidden;
position: relative;
}
.up_carousel_track {
position: relative;
}
.up_carousel_slide {
display: none;
min-width: 0;
}
.up_carousel_slide.is-active {
display: block;
animation: up_carousel_fade_up .35s ease;
}
@keyframes up_carousel_fade_up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.up_carousel_slide.is-active {
animation: none;
}
}
.up_field_grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 58px;
}
.up_field {
display: flex;
align-items: flex-start;
gap: 12px;
min-width: 0;
}
.up_field_icon {
flex: 0 0 32px;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 18px;
color: var(--color-gray-700);
}
.up_field_icon--c1 {
background: #e4e5ff;
}
.up_field_icon--c2 {
background: #dce5ff;
}
.up_field_icon--c3 {
background: #d2eef4;
}
.up_field_icon--c4 {
background: #e8e3fb;
}
.up_field_icon--c5 {
background: #f2e7fb;
}
.up_field_icon--c6 {
background: #dbe7ff;
}
.up_field_text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.up_field_label {
font-size: 12px;
line-height: 18px;
color: var(--color-gray-500);
}
.up_field_value {
font-size: 14px;
line-height: 22px;
color: var(--color-gray-700);
}
@media (max-width: 680px) {
.up_field_grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 400px) {
.up_field_grid {
gap: 12px;
}
.up_field_icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
font-size: 16px;
}
}
/* ---------------------------------------------------------------------
Org structure preview
--------------------------------------------------------------------- */
.up_orgstructure_card {
padding: 0;
overflow: hidden;
}
.up_orgstructure_preview {
display: flex;
align-items: center;
justify-content: center;
height: 157px;
background: var(--color-gray-100);
color: var(--color-gray-300);
font-size: 72px;
}
@media (max-width: 480px) {
.up_orgstructure_preview {
height: 110px;
font-size: 52px;
}
}
.up_orgstructure_footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 24px 32px;
}
@media (max-width: 600px) {
.up_orgstructure_footer {
padding: 16px 20px;
}
}
@media (max-width: 480px) {
.up_orgstructure_footer {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.up_orgstructure_footer .up_btn {
justify-content: center;
}
}
.up_orgstructure_text {
display: flex;
flex-direction: column;
gap: 4px;
}
.up_orgstructure_title {
font-size: 14px;
line-height: 22px;
color: var(--color-gray-800);
}
.up_orgstructure_sub {
font-size: 14px;
line-height: 22px;
color: var(--color-gray-500);
}
.up_btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 22px;
border: 0;
cursor: pointer;
text-decoration: none;
}
.up_btn_primary {
background: var(--color-purple-800);
color: #fff;
border-radius: 24px;
padding: 9px 32px;
}
.up_btn_primary:hover {
background: var(--color-purple-900);
color: #fff;
}
.user_profile_tab_pane .card {
background-color: var(--color-gray-10);
box-shadow: none;
}
/* ---------------------------------------------------------------------
Resume card
--------------------------------------------------------------------- */
.up_resume_card {
display: flex;
align-items: center;
gap: 24px;
}
.up_resume_avatar {
flex: 0 0 72px;
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
background: var(--color-gray-100);
}
.up_resume_avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.up_resume_info {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.up_resume_label {
font-size: 12px;
line-height: 18px;
color: var(--color-gray-500);
}
.up_resume_title {
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: var(--color-gray-800);
}
.up_resume_meta {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
line-height: 20px;
color: var(--color-gray-600);
}
.up_resume_meta i {
color: var(--color-purple-800);
font-size: 14px;
}
.up_resume_btn {
flex: 0 0 auto;
}
@media (max-width: 600px) {
.up_resume_card {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.up_resume_btn {
align-self: stretch;
justify-content: center;
}
.up_resume_avatar {
flex: 0 0 64px;
width: 64px;
height: 64px;
}
}
/* ---------------------------------------------------------------------
Subordinates table
--------------------------------------------------------------------- */
.up_block {
display: flex;
flex-direction: column;
gap: 16px;
}
.up_block_head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
}
.up_block_title {
font-size: 14px;
line-height: 22px;
color: var(--color-gray-800);
}
.up_block_count {
color: var(--GRAY-Gray-400, #A5B3C9);
font-size: 12px;
font-style: normal;
font-weight: 400;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
}
.up_block_count_num {
font-size: 28px;
font-weight: 700;
line-height: 1;
color: var(--color-purple-800);
}
.up_block_count_label {
font-size: 11px;
line-height: 16px;
color: var(--color-gray-500);
text-align: right;
}
.up_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-gray-200);
}
/* Horizontal scroll on narrow screens without requiring markup changes:
the table itself becomes the scroll container, its sections keep
table layout so columns/rows still align. */
@media (max-width: 768px) {
.up_table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.up_table thead,
.up_table tbody {
display: table;
width: 100%;
min-width: 560px;
table-layout: auto;
}
}
.up_table th,
.up_table td {
border-right: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
padding: 7px 12px;
text-align: left;
vertical-align: middle;
}
.up_table th:last-child,
.up_table td:last-child {
border-right: 0;
}
.up_table tbody tr:last-child td {
border-bottom: 0;
}
.up_table th {
background: var(--color-gray-10);
font-size: 12px;
line-height: 18px;
font-weight: 500;
color: var(--color-gray-500);
}
.up_table td {
color: var(--color-gray-700);
line-height: 22px;
}
.up_table tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.up_table tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.up_table tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.up_table tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.up_table + .up_table {
margin-top: 16px;
}
.up_table_org {
caption-side: top;
text-align: left;
padding: 0 0 8px;
font-size: 13px;
font-weight: 500;
line-height: 20px;
color: var(--color-gray-700);
}
.up_table_person {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--color-gray-700);
text-decoration: none;
}
.up_table_person img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.up_table_person:hover span {
color: var(--color-purple-800);
}
/* Collapsible block */
.up_block.up_collapsed .up_row_extra {
display: none;
}
.up_show_more {
align-self: center;
display: inline-flex;
align-items: center;
gap: 6px;
appearance: none;
background: none;
border: 0;
padding: 4px 8px;
font-size: 13px;
line-height: 22px;
color: var(--color-purple-800);
cursor: pointer;
}
.up_show_more:hover {
text-decoration: underline;
}
.up_show_more i {
font-size: 12px;
transition: transform .2s ease;
display: inline-block;
}
.up_show_more i.is-rotated {
transform: rotate(180deg);
}
.up_block:not(.up_collapsed) .up_show_more i {
transform: rotate(180deg);
}
/* ---------------------------------------------------------------------
Work history timeline
--------------------------------------------------------------------- */
.up_history_dated {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.up_history_dated .up_history_canvas {
position: relative;
display: flex;
flex-direction: column;
gap: 26px;
}
.up_history_dated .up_history_track {
position: relative;
height: 68px;
}
.up_history_dated .up_history_track::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 23px;
height: 1px;
background: var(--color-gray-200);
}
.up_history_dated .up_history_bar {
position: absolute;
bottom: 21px;
height: 3px;
border-radius: 2px;
background: var(--color-gray-300);
}
.up_history_dated .up_history_bar.is-active {
background: var(--color-purple-800);
}
.up_history_dated .up_history_node {
position: absolute;
bottom: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
padding-right: 0;
}
.up_history_dated .up_history_axis {
position: relative;
height: 22px;
margin-top: -8px;
}
.up_history_dated .up_history_tick {
position: absolute;
top: 0;
transform: translateX(-50%);
font-size: 11px;
color: var(--color-gray-400);
}
.up_history_dated .up_history_tick span {
white-space: nowrap;
}
.up_history_scroll {
overflow-x: auto;
display: flex;
flex-direction: column;
gap: 16px;
padding-bottom: 12px;
padding-left: 5px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--color-gray-400) var(--color-gray-200);
}
.up_history_scroll::-webkit-scrollbar {
height: 6px;
}
.up_history_scroll::-webkit-scrollbar-track {
background: var(--color-gray-200);
border-radius: 40px;
}
.up_history_scroll::-webkit-scrollbar-thumb {
background: var(--color-gray-400);
border-radius: 40px;
}
.up_history_scroll::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-500);
}
.up_history_track {
display: flex;
align-items: flex-end;
gap: 0;
width: max-content;
/* At least the full container width so the connector line spans the whole
row even when the line has a single node; grows past 100% (and scrolls)
when there are enough nodes. */
min-width: 100%;
position: relative;
/* Parallel lines are pushed right so their first node lines up under the
reference line's node at approximately the same date. --up-node-w is the
fixed node slot width (block min-width 150px + node padding-right 24px). */
--up-node-w: 190px;
margin-left: calc(var(--up-offset, 0) * var(--up-node-w));
}
.up_history_track::before {
content: '';
position: absolute;
bottom: 23px;
left: 2px;
right: 0;
height: 1px;
background: var(--color-gray-300);
z-index: 0;
}
.up_history_node {
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
position: relative;
padding-right: 24px;
}
.up_history_block {
display: inline-flex;
flex-direction: column;
gap: 2px;
padding: 7px 12px;
align-items: flex-start;
background: var(--color-gray-10);
border-left: 1px solid var(--color-gray-300);
border-radius: 0 8px 8px 0;
min-width: 150px;
}
.up_history_dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--color-gray-400);
margin-left: -2px;
margin-top: 22px;
margin-bottom: 6px;
position: relative;
z-index: 1;
flex-shrink: 0;
}
.up_history_dot::before {
content: '';
position: absolute;
bottom: calc(100% + 5px);
left: 49%;
transform: translateX(-50%);
width: 1px;
height: 13px;
border-left: 1px dashed var(--color-gray-400);
}
.up_history_role {
font-size: 12px;
line-height: 18px;
color: var(--color-gray-500);
}
.up_history_change_type {
font-size: 11px;
line-height: 1.3;
color: var(--color-purple-800);
font-weight: 500;
}
.up_history_unit {
font-size: 11px;
line-height: 1.3;
color: var(--color-gray-400);
}
.up_history_date {
font-size: 11px;
line-height: 1.3;
color: var(--color-gray-400);
margin-left: 0;
white-space: nowrap;
}
.up_history_node.is-current .up_history_dot {
background: var(--color-purple-800);
}
.up_history_node.is-current .up_history_dot::before {
border-left-color: var(--color-purple-800);
}
.up_history_node.is-current .up_history_block {
background: #eaecff;
border-left-color: var(--color-purple-800);
}
.up_history_node.is-current .up_history_role {
color: var(--color-gray-700);
}
.up_history_node.is-current .up_history_date {
color: var(--color-gray-500);
}
.up_history_block.is-start,
.up_history_node.is-current .up_history_block.is-start {
background: var(--color-green-100);
border-left-color: var(--color-green-700);
}
.up_history_block.is-new-staff,
.up_history_node.is-current .up_history_block.is-new-staff {
background: var(--color-purple-100);
border-left-color: var(--color-purple-800);
}
.up_history_block.is-new-staff .up_history_role {
color: var(--color-purple-800);
}
.up_history_block.is-end,
.up_history_node.is-current .up_history_block.is-end {
background: #fde8e8;
border-left-color: var(--color-red-800);
}
.up_history_block.is-end .up_history_role {
color: var(--color-red-800);
}
/* ---------------------------------------------------------------------
Sidebar — profile / clock / info blocks / social
--------------------------------------------------------------------- */
.up_profile {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.up_profile_avatar {
width: 125px;
height: 125px;
border-radius: 50%;
overflow: hidden;
}
@media (max-width: 480px) {
.up_profile_avatar {
width: 88px;
height: 88px;
}
}
.up_profile_avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.up_profile_identity {
text-align: center;
display: flex;
flex-direction: column;
gap: 7px;
}
.up_profile_name {
font-size: 16px;
font-weight: 500;
color: var(--color-gray-800);
}
.up_profile_title {
font-size: 12px;
line-height: 18px;
color: var(--color-gray-600);
}
.up_side_block {
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px 0;
border-top: 1px solid var(--color-gray-200);
}
.up_side_block:first-of-type {
border-top: 0;
padding-top: 0;
}
.up_side_head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
line-height: 18px;
color: var(--color-gray-500);
cursor: pointer;
}
.up_side_head i {
transition: transform .2s ease;
font-size: 14px;
color: var(--color-purple-800);
}
.up_side_body {
display: flex;
flex-direction: column;
gap: 12px;
}
.up_side_block.up_collapsed .up_side_body {
display: none;
}
.up_side_block.up_collapsed .up_side_head i {
transform: rotate(-90deg);
}
.up_side_item {
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
line-height: 22px;
color: var(--color-gray-700);
}
.up_side_item i {
flex: 0 0 18px;
font-size: 16px;
color: var(--color-purple-800);
text-align: center;
}
.up_side_item strong {
font-weight: 500;
}
.up_side_item_top {
align-items: flex-start;
}
.up_side_item_top i {
margin-top: 2px;
}
.up_education {
font-size: 14px;
line-height: 22px;
color: var(--color-gray-700);
gap: 6px;
}
.up_education p {
margin: 0;
}
.up_education strong {
font-weight: 500;
}
.up_social {
display: flex;
gap: 8px;
padding-top: 24px;
border-top: 1px solid var(--color-gray-200);
}
.up_social_btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: var(--color-purple-100);
color: var(--color-purple-800);
font-size: 16px;
text-decoration: none;
}
.up_social_btn:hover {
background: var(--color-purple-200);
}
/* ---------------------------------------------------------------------
Fallback styling for not-yet-redesigned tab panes
--------------------------------------------------------------------- */
.up_pane .user_profile_section,
.up_pane .user_profile_grid {
display: flex;
flex-direction: column;
gap: 16px;
}
@media (max-width: 480px) {
.up_pane .user_profile_section,
.up_pane .user_profile_grid {
gap: 12px;
}
}
.up_pane .user_profile_section_title {
font-size: 16px;
font-weight: 500;
color: var(--color-gray-800);
}
@media (max-width: 480px) {
.up_pane .user_profile_section_title {
font-size: 15px;
}
}
.up_pane .user_profile_container {
display: flex;
flex-direction: column;
gap: 16px;
}
.up_pane .user_profile_card {
background: var(--color-bg);
border: 1px solid var(--color-gray-200);
border-radius: 16px;
padding: 16px 20px;
}
@media (max-width: 480px) {
.up_pane .user_profile_card {
border-radius: 12px;
padding: 12px 14px;
}
}
.up_pane .user_profile_card_title {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
padding: 8px 12px 12px;
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
}
.up_pane .user_profile_card_title_collapsible {
cursor: pointer;
}
/* Chevron indicator, rendered right after the badge */
.up_pane .user_profile_card_title_collapsible .user_profile_badge {
margin-left: auto;
}
.up_pane .user_profile_card_title_collapsible::after {
content: "\f282";
font-family: bootstrap-icons;
font-size: 12px;
line-height: 1;
color: var(--color-gray-500);
transition: transform 0.15s ease;
}
.up_pane .user_profile_card_title_collapsible[data-collapsed="false"]::after {
transform: rotate(180deg);
}
.up_pane .user_profile_card_collapsed .user_profile_card_body,
.up_pane .user_profile_card_collapsed .user_profile_table_card_body,
.up_pane .user_profile_card_collapsed .user_profile_timeline_wrapper {
display: none;
}
.up_pane .user_profile_badge {
font-size: 12px;
color: var(--color-gray-500);
background: var(--color-gray-10);
border-radius: 40px;
padding: 2px 10px;
}
.up_pane .user_profile_table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 14px;
margin-top: 12px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-gray-200);
}
@media (max-width: 768px) {
.up_pane .user_profile_table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.up_pane .user_profile_table thead,
.up_pane .user_profile_table tbody {
display: table;
width: 100%;
min-width: 560px;
}
}
.up_pane .user_profile_table th,
.up_pane .user_profile_table td {
border-right: 1px solid var(--color-gray-200);
border-bottom: 1px solid var(--color-gray-200);
padding: 8px 12px;
text-align: left;
}
.up_pane .user_profile_table th:last-child,
.up_pane .user_profile_table td:last-child {
border-right: 0;
}
.up_pane .user_profile_table tbody tr:last-child td {
border-bottom: 0;
}
.up_pane .user_profile_table th {
background: var(--color-gray-10);
color: var(--color-gray-500);
font-weight: 500;
}
.up_pane .user_profile_table tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.up_pane .user_profile_table tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.up_pane .user_profile_table tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.up_pane .user_profile_table tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.up_pane .user_profile_hidden_row {
display: none;
}
.up_pane .user_profile_action_btn {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-purple-800);
font-size: 12px;
text-decoration: none;
}
.up_pane .user_profile_action_btn:hover {
text-decoration: underline;
}
.up_pane .user_profile_show_more_wrapper {
margin-top: 12px;
}
.up_pane .user_profile_show_more_btn {
appearance: none;
background: none;
border: 0;
color: var(--color-purple-800);
font-size: 12px;
cursor: pointer;
}
/* --- Circular charts --- */
.up_pane .user_profile_charts_grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 480px) {
.up_pane .user_profile_charts_grid {
grid-template-columns: 1fr;
gap: 12px;
}
}
.up_pane .user_profile_charts_grid .user_profile_card {
padding: 0;
overflow: hidden;
}
.up_pane .user_profile_circular_card_body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.up_pane .pa-payroll-chart-link {
display: flex;
justify-content: center;
align-items: center;
padding: 8px;
min-width: 0;
position: relative;
height: 200px;
}
@media (max-width: 480px) {
.up_pane .pa-payroll-chart-link {
height: 160px;
}
}
.up_pane .pa-payroll-chart-link canvas {
width: 100% !important;
max-width: 100%;
}
.up_pane .pa-payroll-stats--list {
display: flex;
flex-direction: column;
gap: 8px;
}
.up_pane .pa-payroll-stats--full-width {
width: 100%;
}
.up_pane .pa-payroll-stats--list .pa-payroll-stat {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 6px 0;
border-bottom: 1px dashed var(--color-gray-200);
}
.up_pane .pa-payroll-stats--list .pa-payroll-stat:last-child {
border-bottom: none;
}
.up_pane .pa-stat-label {
color: var(--color-gray-500);
font-size: 12px;
text-align: left;
}
.up_pane .pa-stat-value {
color: var(--color-gray-700);
font-size: 12px;
font-weight: 500;
text-align: right;
}
/* --- Past-months bar-chart cards --- */
.up_pane .user_profile_past_months_grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
.up_pane .user_profile_chart_card {
padding: 0;
overflow: hidden;
}
.up_pane .user_profile_chart_card_body {
display: grid;
grid-template-columns: 1fr 280px;
gap: 24px;
padding: 16px;
align-items: start;
}
@media (max-width: 480px) {
.up_pane .user_profile_chart_card_body {
gap: 16px;
padding: 12px;
}
}
.up_pane .user_profile_chart_card_charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
min-width: 0;
}
@media (max-width: 480px) {
.up_pane .user_profile_chart_card_charts {
grid-template-columns: 1fr;
gap: 12px;
}
}
.up_pane .user_profile_chart_card_box {
background: var(--color-bg);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
padding: 12px;
min-width: 0;
overflow: hidden;
position: relative;
}
.up_pane .user_profile_chart_card_box canvas.analytics_block_canvas {
display: block;
width: 100% !important;
height: 220px !important;
max-width: 100%;
cursor: pointer;
}
.up_pane .user_profile_chart_card_legend {
background: var(--color-gray-10);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.up_pane .user_profile_chart_card_legend_title {
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
padding-bottom: 8px;
border-bottom: 1px dashed var(--color-gray-200);
}
@media (max-width: 900px) {
.up_pane .user_profile_chart_card_body {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.up_pane .user_profile_chart_card_box canvas.analytics_block_canvas {
height: 180px !important;
}
}
/* --- Stat tiles (recent tasks) --- */
.up_pane .user_profile_stats_grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
width: 100%;
}
/* 5-column variant used by the Recent Tasks carousel (adds the To-Do tile) */
.up_pane .user_profile_stats_grid--5 {
grid-template-columns: repeat(5, 1fr);
}
.up_pane .user_profile_stat_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 12px;
background: var(--color-gray-10);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
text-align: center;
}
.up_pane .user_profile_stat_value {
font-size: 24px;
font-weight: 600;
color: var(--color-gray-800);
line-height: 1.2;
margin-bottom: 6px;
word-break: break-word;
}
.up_pane .user_profile_stat_label {
font-size: 12px;
font-weight: 500;
color: var(--color-gray-500);
}
.up_pane .user_profile_stat_completed .user_profile_stat_value {
color: var(--color-green-700);
}
.up_pane .user_profile_stat_todo .user_profile_stat_value {
color: var(--color-purple-800);
}
.up_pane .user_profile_stat_total .user_profile_stat_value {
color: var(--color-gray-700);
}
.up_pane .user_profile_stat_overdue .user_profile_stat_value {
color: var(--color-red-800);
}
.up_pane .user_profile_stat_avg .user_profile_stat_value {
font-size: 18px;
color: var(--color-gray-700);
}
@media (max-width: 768px) {
.up_pane .user_profile_stats_grid {
grid-template-columns: repeat(2, 1fr);
}
.up_pane .user_profile_stats_grid--5 {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.up_pane .user_profile_stats_grid {
grid-template-columns: 1fr;
}
.up_pane .user_profile_stats_grid--5 {
grid-template-columns: repeat(2, 1fr);
}
.up_pane .user_profile_stat_item {
padding: 14px 10px;
}
.up_pane .user_profile_stat_value {
font-size: 20px;
}
}
@media (max-width: 360px) {
.up_pane .user_profile_stats_grid--5 {
grid-template-columns: 1fr;
}
}
.up_pane .user_profile_error {
padding: 24px;
text-align: center;
color: var(--color-gray-500);
}
/* Tab-switch loader */
.up_pane .user_profile_loader {
display: flex;
align-items: center;
justify-content: center;
min-height: 260px;
padding: 24px;
}
.up_pane .user_profile_loader::after {
content: "";
width: 38px;
height: 38px;
border-radius: 50%;
border: 3px solid var(--color-gray-200);
border-top-color: var(--color-purple-800);
animation: up_spin 0.7s linear infinite;
}
@keyframes up_spin {
to {
transform: rotate(360deg);
}
}
/* ---------------------------------------------------------------------
Attendance tab — redesigned cards
--------------------------------------------------------------------- */
.up_pane .up_attend_subhead {
display: flex;
flex-direction: column;
gap: 2px;
margin: -16px 0 24px;
}
.up_pane .up_attend_pos {
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
}
.up_pane .up_attend_org {
font-size: 12px;
line-height: 18px;
color: var(--color-gray-500);
}
/* Current month: chart first, statistics cards underneath. */
.up_pane .up_attend_split {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.up_pane .up_attend_split--text {
display: block;
}
.up_pane .up_attend_chart {
position: relative;
width: 100%;
max-width: 420px;
height: 240px;
margin: 0 auto;
min-width: 0;
}
@media (max-width: 480px) {
.up_pane .up_attend_chart {
height: 200px;
}
}
.up_pane .up_attend_chart--sm {
height: 190px;
}
.up_pane .up_attend_chart canvas {
width: 100% !important;
max-width: 100%;
}
/* Current month statistic cards. */
.up_pane .up_attend_stats_grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
.up_pane .up_attend_stat_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 82px;
padding: 12px 8px;
background: var(--color-gray-10);
border: 1px solid var(--color-gray-200);
border-radius: 8px;
text-align: center;
}
.up_pane .up_attend_stat_value {
margin-bottom: 4px;
color: var(--color-gray-800);
font-size: 18px;
font-weight: 600;
line-height: 1.2;
word-break: break-word;
}
.up_pane .up_attend_stat_label {
color: var(--color-gray-500);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
@media (max-width: 480px) {
.up_pane .up_attend_stats_grid {
grid-template-columns: 1fr;
}
.up_pane .up_attend_stat_item {
min-height: 64px;
padding: 10px 8px;
}
}
/* Past 6 months */
.up_pane .up_attend_months {
display: grid;
grid-template-columns: minmax(0, 1fr) 0px;
column-gap: 0;
align-items: start;
transition: grid-template-columns 0.25s ease, column-gap 0.25s ease;
}
.up_pane .up_attend_months.is-detail-open {
grid-template-columns: minmax(0, 1fr) min(280px, 40%);
column-gap: 16px;
}
@media (max-width: 768px) {
.up_pane .up_attend_months,
.up_pane .up_attend_months.is-detail-open {
grid-template-columns: 1fr;
column-gap: 0;
row-gap: 16px;
}
}
.up_pane .up_attend_months_chart {
position: relative;
height: 300px;
min-width: 0;
}
@media (max-width: 480px) {
.up_pane .up_attend_months_chart {
height: 220px;
}
}
.up_pane .up_attend_months_chart canvas {
width: 100% !important;
max-width: 100%;
cursor: pointer;
}
.up_pane .up_attend_detail {
position: relative;
width: 100%;
min-width: 0;
height: 250px;
margin-top: 27px;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
background: var(--color-bg);
border: 1px solid var(--color-gray-200);
border-radius: 12px;
padding: 16px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s;
scrollbar-width: thin;
scrollbar-color: var(--color-gray-300) transparent;
}
.up_pane .up_attend_detail::-webkit-scrollbar {
width: 6px;
}
.up_pane .up_attend_detail::-webkit-scrollbar-track {
background: transparent;
}
.up_pane .up_attend_detail::-webkit-scrollbar-thumb {
background: var(--color-gray-300);
border-radius: 8px;
}
.up_pane .up_attend_detail::-webkit-scrollbar-thumb:hover {
background: var(--color-gray-400);
}
.up_pane .up_attend_detail.is-open {
opacity: 1;
visibility: visible;
}
@media (max-width: 768px) {
.up_pane .up_attend_detail {
height: 0;
margin-top: 0;
padding: 0;
border-width: 0;
box-shadow: none;
}
.up_pane .up_attend_detail.is-open {
height: 220px;
margin-top: 16px;
padding: 16px;
border-width: 1px;
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
}
.up_pane .up_attend_detail_close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: var(--color-gray-100);
color: var(--color-gray-700);
font-size: 16px;
cursor: pointer;
}
.up_pane .up_attend_detail_close:hover {
background: var(--color-gray-200);
}
.up_pane .up_attend_detail_title {
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
padding: 0 24px 8px 0;
margin-bottom: 8px;
border-bottom: 1px dashed var(--color-gray-200);
}
/* Quota / application boxes */
.up_pane .up_attend_quota_charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
@media (max-width: 400px) {
.up_pane .up_attend_quota_charts {
grid-template-columns: 1fr;
}
}
.up_pane .up_attend_quota_chart {
display: flex;
flex-direction: column;
border: 1px solid var(--color-gray-200);
border-radius: 12px;
padding: 12px;
min-width: 0;
}
.up_pane .up_attend_quota_org {
font-size: 12px;
color: var(--color-gray-500);
text-align: center;
margin-top: 8px;
}
.up_pane .up_attend_quota_text {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Recent applications table */
.up_pane .up_attend_apps {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--color-gray-200);
}
@media (max-width: 768px) {
.up_pane .up_attend_apps {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.up_pane .up_attend_apps thead,
.up_pane .up_attend_apps tbody {
display: table;
width: 100%;
min-width: 520px;
}
}
.up_pane .up_attend_apps th {
padding: 10px 12px;
font-size: 12px;
font-weight: 500;
color: var(--color-gray-500);
background: var(--color-gray-10);
text-align: left;
border-bottom: 1px solid var(--color-gray-200);
}
.up_pane .up_attend_apps td {
padding: 12px;
border-bottom: 1px solid var(--color-gray-200);
vertical-align: middle;
}
.up_pane .up_attend_apps tbody tr {
transition: background 0.15s ease;
}
.up_pane .up_attend_apps tbody tr:hover {
background: var(--color-bg-soft, #F0F3FD);
}
.up_pane .up_attend_apps tbody tr:last-child td {
border-bottom: 0;
}
.up_pane .up_attend_apps_num {
width: 1%;
white-space: nowrap;
font-size: 13px;
color: var(--color-gray-500);
}
.up_pane .up_attend_app_title {
font-size: 14px;
font-weight: 500;
color: var(--color-gray-800);
}
.up_pane .up_attend_app_dates {
font-size: 13px;
color: var(--color-gray-600);
white-space: nowrap;
}
.up_pane .up_attend_app_org {
font-size: 13px;
color: var(--color-gray-600);
}
.up_pane .up_attend_apps tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.up_pane .up_attend_apps tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.up_pane .up_attend_apps tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.up_pane .up_attend_apps tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.up_pane .up_attend_quota_actions {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
@media (max-width: 480px) {
.up_pane .up_attend_quota_actions {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
}
.up_pane .up_attend_quota_actions .up_btn {
justify-content: center;
}
}
.up_pane .up_attend_empty {
font-size: 12px;
color: var(--color-gray-500);
padding: 8px 0;
}
.up_pane .up_btn_sm {
padding: 7px 18px;
font-size: 13px;
line-height: 18px;
border-radius: 24px;
}
.up_pane .up_btn_ghost {
background: transparent;
border: 1px solid var(--color-purple-800);
color: var(--color-purple-800);
}
.up_pane .up_btn_ghost:hover {
background: var(--color-purple-50, #f3f1ff);
}
.up_pane .up_attend_all_count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
margin-left: 6px;
border-radius: 9px;
background: var(--color-purple-100);
color: var(--color-purple-800);
font-size: 11px;
font-weight: 600;
line-height: 1;
}
/* New button */
.up_pane .up_attend_new_btn {
gap: 0;
padding-left: 9px;
padding-right: 9px;
transition: padding .25s ease, gap .25s ease, background .15s ease;
}
.up_pane .up_attend_new_btn:hover,
.up_pane .up_attend_new_btn:focus-visible {
gap: 4px;
padding-left: 16px;
padding-right: 16px;
}
.up_pane .up_attend_new_btn .up_attend_new_label {
display: inline-block;
max-width: 0;
overflow: hidden;
white-space: nowrap;
opacity: 0;
transition: max-width 0.25s ease, opacity 0.2s ease;
}
.up_pane .up_attend_new_btn:hover .up_attend_new_label,
.up_pane .up_attend_new_btn:focus-visible .up_attend_new_label {
max-width: 140px;
opacity: 1;
}
@media (hover: none) {
.up_pane .up_attend_new_btn {
gap: 4px;
padding-left: 16px;
padding-right: 16px;
}
.up_pane .up_attend_new_btn .up_attend_new_label {
max-width: 140px;
opacity: 1;
}
}
/* ---------------------------------------------------------------------
Recent Tasks carousel — per-slide sub-header (group label + completion %)
--------------------------------------------------------------------- */
.up_pane .up_recent_tasks_slide_head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 4px 12px;
}
@media (max-width: 360px) {
.up_pane .up_recent_tasks_slide_head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}
.up_pane .up_recent_tasks_group_label {
font-size: 13px;
font-weight: 500;
color: var(--color-gray-700);
}
.up_pane .up_recent_tasks_completion_badge {
flex-shrink: 0;
font-size: 12px;
font-weight: 500;
color: var(--color-gray-500);
white-space: nowrap;
}
.up_page_modal {
width: 100%;
max-width: 1600px;
}
.up_page_flex_center {
display: flex;
width: 100%;
justify-content: center;
}
.up_avatar {
position: relative;
display: inline-block;
border-radius: 50%;
overflow: hidden;
}
.up_avatar img {
display: block;
}
.up_avatar_editable {
cursor: pointer;
}
.up_avatar_zoomable {
cursor: zoom-in;
}
.up_avatar_overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 22px;
opacity: 0;
transition: opacity 0.15s ease;
}
.up_avatar_editable:hover .up_avatar_overlay {
opacity: 1;
}
.up_photo_lightbox {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
cursor: zoom-out;
}
.up_photo_lightbox img {
max-width: 90vw;
max-height: 90vh;
border-radius: 4px;
}
.up_photo_modal {
position: fixed;
inset: 0;
z-index: 100001;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
}
.up_photo_modal_box {
position: relative;
background: #fff;
width: min(1100px, 95vw);
height: 90vh;
border-radius: 6px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.up_photo_modal_box iframe {
width: 100%;
height: 100%;
border: 0;
}
.up_photo_modal_close {
position: absolute;
top: 6px;
right: 14px;
font-size: 26px;
line-height: 1;
cursor: pointer;
color: #333;
z-index: 1;
}
.up_nav_count {
font-size: 13px;
line-height: 20px;
color: var(--color-gray-600);
white-space: nowrap;
}
.up_nav_btns {
display: flex;
align-items: center;
gap: 8px;
}
.up_nav_btn {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
padding: 6px;
font-size: 16px;
border-radius: 9999px;
border: 1px solid var(--color-gray-300);
color: var(--color-gray-300);
background: transparent;
text-decoration: none;
appearance: none;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.up_nav_btn.is-active {
border-color: var(--color-purple-800);
background: var(--color-purple-800);
color: #fff;
}
.up_nav_btn.is-active:hover {
background: var(--color-purple-900);
border-color: var(--color-purple-900);
color: #fff;
}
.up_nav_btn[disabled] {
cursor: default;
pointer-events: none;
}
.up_nav_wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.up_subordinates_switch > .up_sub_mode_slide {
display: none;
}
.up_subordinates_switch > .up_sub_mode_slide.is-active {
display: block;
animation: upSubModeFade .25s ease;
}
@keyframes upSubModeFade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
/* User profile tables: fixed column layout so tables of the same kind line up */
.up_pane .user_profile_table {
table-layout: fixed;
}
.up_pane .user_profile_table .user_profile_col_num {
width: 56px;
text-align: center;
}
.up_pane .user_profile_table .user_profile_col_action {
width: 120px;
white-space: nowrap;
}
.up_pane .user_profile_table .user_profile_col_data {
overflow-wrap: anywhere;
word-break: break-word;
}
@media (max-width: 768px) {
.up_pane .user_profile_table thead,
.up_pane .user_profile_table tbody {
table-layout: fixed;
}
}
.up_tasks_to_approve {
border-left: 4px solid var(--color-primary);
}
/* end file: user-profile.css */ |