@CHARSET "UTF-8";

/*
 * IFND visual theme adapted from the 3-in-1 simulation.
 * This file intentionally contains presentation rules only. Existing IDs,
 * controls, event handlers, data flows, and page visibility logic are preserved.
 */

:root {
    --ifnd-ink: #1f2d3d;
    --ifnd-ink-soft: #29486b;
    --ifnd-muted: #5f7185;
    --ifnd-line: rgba(37, 66, 96, 0.18);
    --ifnd-panel-line: rgba(90, 90, 90, 0.75);
    --ifnd-panel: rgba(255, 255, 255, 0.92);
    --ifnd-panel-soft: rgba(255, 255, 255, 0.76);
    --ifnd-page: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(182, 207, 242, 0.92));
    --ifnd-primary: #0070c0;
    --ifnd-primary-dark: #005996;
    --ifnd-success: #087836;
    --ifnd-danger: #c82333;
    --ifnd-radius: 10px;
    --ifnd-btn-radius: 6px;
    --ifnd-btn-font: "lucida sans unicode", verdana, helvetica, arial, sans-serif;
    --ifnd-btn-shadow: 0 3px 7px rgba(33, 45, 57, 0.22);
    --ifnd-btn-shadow-hover: 0 6px 14px rgba(28, 39, 50, 0.24);
    --ifnd-focus: 0 0 0 3px rgba(0, 112, 192, 0.24);
    --ifnd-dark-bg: linear-gradient(180deg, #3f4751 0%, #2e353e 100%);
    --ifnd-dark-hover: linear-gradient(180deg, #4c5663 0%, #353e49 100%);
    --ifnd-primary-bg: linear-gradient(180deg, #1682ca 0%, #0065aa 100%);
    --ifnd-primary-hover: linear-gradient(180deg, #1c91dc 0%, #00558f 100%);
    --ifnd-secondary-bg: linear-gradient(180deg, #ffffff 0%, #e7edf4 100%);
    --ifnd-secondary-hover: linear-gradient(180deg, #ffffff 0%, #d9e3ed 100%);
    --ifnd-danger-bg: linear-gradient(180deg, #e14d5b 0%, #c82333 100%);
    --ifnd-danger-hover: linear-gradient(180deg, #dc3545 0%, #a91e2c 100%);
    --ifnd-active-bg: linear-gradient(180deg, #17964f 0%, #087836 100%);
    --ifnd-active-hover: linear-gradient(180deg, #1aa85a 0%, #06662e 100%);
}

html,
body {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

body {
    color: var(--ifnd-ink);
    font-family: "lucida sans unicode", georgia, helvetica, sans-serif;
    font-size: 14px;
    background-color: #dcecf9;
    background-image: url("../images/ifnd-3in1-background.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

* {
    scrollbar-color: #0070c0 rgba(168, 195, 219, 0.95);
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(178, 204, 226, 0.98), rgba(144, 177, 207, 0.98));
    box-shadow: inset 0 0 0 1px rgba(41, 72, 107, 0.12);
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, #4fb3ec 0%, #0070c0 58%, #005996 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 74, 125, 0.35), 0 1px 3px rgba(0, 48, 82, 0.28);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #62c0f4 0%, #0081d6 54%, #005996 100%);
}

/* Login */

#ifuLogin {
    display: flex;
    min-height: 100vh;
    align-items: center;
    padding: 32px 16px !important;
}

#ifuLogin > .container {
    width: 100%;
    max-width: 560px !important;
    margin: 0 auto;
    padding: 22px 24px 24px !important;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    background: rgba(248, 251, 253, 0.94);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.38);
    backdrop-filter: blur(8px);
}

#ifuLogin h4 {
    margin: 0 0 4px;
    color: var(--ifnd-ink-soft);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#ifuLogin h2 {
    margin: 0 0 22px;
    color: var(--ifnd-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

#ifuLogin h2 font {
    color: var(--ifnd-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

#ifuloginform {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#ifuloginform .form-group:last-child {
    margin-bottom: 0;
}

#ifuloginform .col-sm-12 {
    padding-right: 15px;
    padding-left: 15px;
}

/* Title and primary navigation */

#ifuTitle {
    max-width: calc(100% - 16px);
    margin: 8px auto 6px !important;
    padding: 0 !important;
}

#ifuTitle > .row {
    min-height: 46px;
    margin: 0;
    padding: 8px 10px;
    align-items: center;
    border: 1px solid var(--ifnd-line);
    border-radius: 8px;
    background: rgba(248, 251, 253, 0.94);
    box-shadow: 0 6px 18px rgba(21, 39, 59, 0.14);
    backdrop-filter: blur(8px);
}

#ifuSimName,
#ifuTeam {
    min-width: 0;
    color: var(--ifnd-ink-soft);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
}

#ifuSimName {
    display: flex;
    align-items: center;
    overflow: hidden;
}

#ifuSimName::before {
    width: 6px;
    height: 28px;
    margin-right: 10px;
    flex: 0 0 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #008fc7 0%, #70ad47 100%);
    content: "";
}

#ifuTitle h6 {
    max-width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #17202a;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#ifuTeam {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

#ifuTeam h6 {
    display: inline-block;
    max-width: 100%;
    padding: 5px 9px;
    overflow: hidden;
    border: 1px solid rgba(0, 112, 192, 0.14);
    border-radius: 999px;
    color: var(--ifnd-ink-soft);
    background: rgba(0, 112, 192, 0.08);
    text-overflow: ellipsis;
}

#ifuMenu {
    max-width: calc(100% - 16px);
    margin: 0 auto 8px !important;
    padding: 0 !important;
    color: var(--ifnd-ink);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
}

#ifuMenu > .row {
    min-height: 46px;
    margin: 0;
    padding: 7px 9px 10px !important;
    align-items: center;
    overflow: visible;
    border: 1px solid var(--ifnd-line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(248, 251, 253, 0.95), rgba(232, 241, 249, 0.95));
    box-shadow: 0 5px 14px rgba(21, 39, 59, 0.13);
}

#ifuMenu table,
#ifuPersMenu table,
#ifuPersMenu-sm table {
    margin-bottom: 0;
}

#ifuMenu table.table-sm td,
#ifuPersMenu table.table-sm td,
#ifuPersMenu-sm table.table-sm td {
    padding: 0;
    white-space: nowrap;
}

/* Buttons */

.btn {
    display: inline-flex;
    min-height: 32px;
    padding: 0.34rem 0.72rem;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1px;
    border-radius: var(--ifnd-btn-radius);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    box-shadow: var(--ifnd-btn-shadow);
    transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease, opacity 0.16s ease;
}

.btn.btn-sm {
    min-height: 30px;
    padding: 0.28rem 0.62rem;
    font-size: 12px;
}

.btn.btn-block {
    display: flex;
    width: 100%;
}

.btn i {
    color: inherit;
    line-height: 1;
    pointer-events: none;
}

.btn:hover:not(.disabled):not(:disabled),
.btn:focus:not(.disabled):not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--ifnd-btn-shadow-hover);
}

.btn:focus,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--ifnd-btn-shadow-hover), var(--ifnd-focus);
}

.btn.disabled,
.btn:disabled,
.btn[aria-disabled="true"],
button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none !important;
    box-shadow: none !important;
}

.btn.btn-dark {
    border-color: rgba(20, 31, 42, 0.85);
    color: #f8fbfd;
    background: var(--ifnd-dark-bg);
}

.btn.btn-dark:hover:not(.disabled):not(:disabled),
.btn.btn-dark:focus:not(.disabled):not(:disabled) {
    border-color: rgba(0, 112, 192, 0.42);
    color: #ffffff;
    background: var(--ifnd-dark-hover);
}

.btn.btn-primary {
    border-color: rgba(0, 83, 142, 0.9);
    color: #ffffff;
    background: var(--ifnd-primary-bg);
    box-shadow: 0 3px 8px rgba(0, 96, 164, 0.26);
}

.btn.btn-primary:hover:not(.disabled):not(:disabled),
.btn.btn-primary:focus:not(.disabled):not(:disabled) {
    border-color: rgba(0, 74, 125, 0.95);
    color: #ffffff;
    background: var(--ifnd-primary-hover);
    box-shadow: 0 6px 15px rgba(0, 96, 164, 0.28);
}

.btn.btn-secondary,
.btn.btn-outline-secondary {
    border-color: rgba(89, 106, 123, 0.42);
    color: #293746;
    background: var(--ifnd-secondary-bg);
    box-shadow: 0 2px 6px rgba(35, 56, 77, 0.12);
}

.btn.btn-secondary:hover:not(.disabled):not(:disabled),
.btn.btn-secondary:focus:not(.disabled):not(:disabled),
.btn.btn-outline-secondary:hover:not(.disabled):not(:disabled),
.btn.btn-outline-secondary:focus:not(.disabled):not(:disabled) {
    border-color: rgba(65, 83, 101, 0.5);
    color: #172331;
    background: var(--ifnd-secondary-hover);
}

#bDelAssign,
#bDelFdbk,
#bDelMeeting,
#bTerminate,
#bTerminate-sm,
#termOK {
    border-color: rgba(145, 30, 42, 0.92);
    color: #ffffff !important;
    background: var(--ifnd-danger-bg) !important;
    box-shadow: 0 3px 8px rgba(190, 35, 52, 0.24);
}

#bDelAssign:hover,
#bDelFdbk:hover,
#bDelMeeting:hover,
#bTerminate:hover,
#bTerminate-sm:hover,
#termOK:hover {
    border-color: rgba(128, 24, 35, 0.95);
    background: var(--ifnd-danger-hover) !important;
    box-shadow: 0 6px 15px rgba(190, 35, 52, 0.28);
}

#ifuSimMenu button.active,
#ifuSimMenu-sm button.active,
#ifuPersMenu button.active,
#ifuPersMenu-sm button.active,
.btn.btn-dark.active,
button.active {
    border-color: rgba(0, 88, 0, 0.74) !important;
    color: #ffffff !important;
    background: var(--ifnd-active-bg) !important;
    box-shadow: 0 4px 10px rgba(0, 74, 0, 0.26), 0 0 0 3px rgba(0, 128, 0, 0.22) !important;
}

#ifuSimMenu button.active:hover,
#ifuSimMenu-sm button.active:hover,
#ifuPersMenu button.active:hover,
#ifuPersMenu-sm button.active:hover,
.btn.btn-dark.active:hover {
    background: var(--ifnd-active-hover) !important;
}

#ifuSimMenu-sm .btn,
#ifuMgrMenu .btn,
#ifuPersMenu-sm .btn {
    width: 32px;
    min-width: 32px;
    padding-right: 0;
    padding-left: 0;
    aspect-ratio: 1 / 1;
}

#ifuSimMenu .btn i,
#ifuPersMenu .btn i {
    width: 14px;
    text-align: center;
}

#btnLogin {
    font-size: 14px;
}

/* Shared workspaces */

#ifuDashboard,
#ifuPersonnel,
#ifuReports {
    box-sizing: border-box;
    width: calc(100% - 28px) !important;
    max-width: none !important;
    margin-right: 14px !important;
    margin-left: 14px !important;
    overflow-x: hidden;
    border: 1px solid var(--ifnd-panel-line);
    background: var(--ifnd-page);
    box-shadow: 7px 10px 5px rgba(90, 90, 90, 0.62);
}

#ifuPersonnel,
#ifuReports {
    color: var(--ifnd-ink);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
}

#ifuPersonnel {
    overflow-y: auto;
}

/* Dashboard */

#ifuDashboard {
    display: flex;
    min-height: 0;
    padding: 0 !important;
    flex-direction: column;
}

#dashboard-kpi-bar {
    margin: 0;
    padding: 14px 14px 0;
    flex: 0 0 auto;
}

.kpi-bar-card {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 4px 12px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(90, 90, 90, 0.75);
    border-radius: 10px;
    background: linear-gradient(90deg, #e7f0fb, #ffffff);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.45);
}

.kpi-bar-title {
    min-width: 110px;
    color: var(--ifnd-ink-soft);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kpi-bar-body {
    display: flex;
    min-width: 0;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px 10px;
}

#ifuKPI.kpi-bar-body {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
}

.kpi-chip {
    display: inline-flex;
    min-height: 36px;
    padding: 1px 8px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(110, 130, 150, 0.28);
    border-radius: 999px;
    color: #22384d;
    background: rgba(255, 255, 255, 0.72);
    font-family: var(--ifnd-btn-font);
    font-size: 13px;
    white-space: nowrap;
}

.kpi-chip-label {
    line-height: 1.15;
}

.kpi-chip-icon {
    display: block;
    width: 72px;
    height: 35px;
    object-fit: contain;
}

#dashboard-charts {
    display: flex;
    min-height: 0;
    margin: 0 !important;
    padding: 14px !important;
    align-items: stretch;
    flex: 1 1 0;
    flex-wrap: nowrap;
    gap: 12px;
}

.dashboard-chart-col {
    display: flex;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    flex: 1 1 0;
}

#ifuSchedule,
#ifuNetwork {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 280px;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(53, 83, 112, 0.18);
    border-radius: 14px;
    color: var(--ifnd-ink);
    background: rgba(253, 254, 255, 0.97);
    box-shadow: 0 14px 34px rgba(31, 52, 73, 0.14);
    flex-direction: column;
}

.chart-card-header {
    position: relative;
    z-index: 4;
    display: flex;
    min-height: 58px;
    padding: 12px 14px 11px;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px 14px;
    border-bottom: 1px solid rgba(53, 83, 112, 0.12);
    background: rgba(248, 251, 254, 0.96);
}

#schedtitle,
#ntwktitle {
    position: static;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #17324d;
    background: transparent;
    box-shadow: none;
    font-family: var(--ifnd-btn-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
    transform: none;
}

.chart-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
}

.chart-legend-item {
    display: inline-flex;
    min-height: 24px;
    padding: 3px 7px;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(63, 88, 113, 0.12);
    border-radius: 999px;
    color: #52677d;
    background: #ffffff;
    font-family: var(--ifnd-btn-font);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.chart-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 3px;
}

.chart-legend-swatch.is-remaining {
    border: 1px solid rgba(38, 95, 156, 0.24);
    background: #8bb5df;
}

.chart-legend-swatch.is-complete {
    border: 1px solid rgba(24, 125, 69, 0.22);
    background: #72cf93;
}

.chart-legend-line {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #6f88a2;
}

#sched {
    width: 100%;
    -webkit-user-select: none;
    user-select: none;
}

#ifuSchedule > #sched,
#schedule-wrapper {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
}

#schedule-wrapper {
    width: 100%;
    padding: 8px 8px 10px;
    overflow: auto;
    background: #ffffff;
}

#schedule-wrapper #sched {
    height: 100%;
    min-height: 0;
}

.network-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: auto;
    flex: 0 1 auto;
}

#ntwkcanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.network-hit-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
}

.network-node-hit {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    cursor: help;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.network-node-hit:hover {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 2px rgba(0, 112, 192, 0.22);
}

.network-node-hit:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 0 0 3px rgba(0, 112, 192, 0.42);
}

.ifnd-chart-tooltip {
    box-sizing: border-box;
    width: 278px;
    max-width: calc(100% - 16px);
    padding: 13px 14px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    color: #eef7ff;
    background: #102a43;
    box-shadow: 0 16px 36px rgba(12, 31, 49, 0.28);
    font-family: var(--ifnd-btn-font);
    font-size: 11px;
    line-height: 1.4;
}

.network-tooltip,
.timeline-tooltip {
    position: absolute;
    z-index: 8;
    width: 278px;
    max-width: calc(100% - 16px);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.network-tooltip.is-visible,
.timeline-tooltip.is-visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.network-tooltip > .ifnd-chart-tooltip,
.timeline-tooltip > .ifnd-chart-tooltip {
    width: 100%;
    max-width: none;
}

.chart-tooltip-kicker {
    display: block;
    margin-bottom: 3px;
    color: #9bc4e2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.chart-tooltip-title {
    display: block;
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.chart-tooltip-summary {
    display: flex;
    margin-bottom: 6px;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #c9dceb;
}

.chart-tooltip-summary strong {
    color: #ffffff;
    font-size: 12px;
}

.chart-tooltip-progress {
    width: 100%;
    height: 5px;
    margin-bottom: 11px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(219, 234, 254, 0.2);
}

.chart-tooltip-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #72cf93;
}

.chart-tooltip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.chart-tooltip-detail {
    min-width: 0;
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.chart-tooltip-detail.is-wide {
    grid-column: 1 / -1;
}

.chart-tooltip-label {
    display: block;
    margin-bottom: 2px;
    color: #9bc4e2;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.chart-tooltip-value {
    display: block;
    overflow-wrap: anywhere;
    color: #eef7ff;
}

#ifuSchedule .google-visualization-tooltip {
    display: none !important;
}

#ifuSchedule svg text {
    fill: #52677d;
    font-family: var(--ifnd-btn-font) !important;
}

/* Personnel header */

#persstaff {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
}

#divstaff {
    display: grid !important;
    width: 100%;
    height: auto !important;
    min-height: 200px;
    margin: 0 !important;
    padding: 14px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

#stafflist,
#stafflist-sm,
#staffpic,
#staffspecs,
#staffspecs-sm,
#staffskills,
#staffskills-sm {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    height: 200px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 34px 10px 10px !important;
    overflow: auto;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.45);
}

#stafflist::before,
#stafflist-sm::before,
#staffpic::before,
#staffspecs::before,
#staffspecs-sm::before,
#staffskills::before,
#staffskills-sm::before {
    position: absolute;
    top: 10px;
    left: 10px;
    color: var(--ifnd-ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

#stafflist::before,
#stafflist-sm::before {
    content: "Staff Selector";
}

#staffpic::before {
    content: "Staff Status";
}

#staffspecs::before,
#staffspecs-sm::before {
    content: "Staff Details";
}

#staffskills::before,
#staffskills-sm::before {
    content: "Staff Skills";
}

#tblstaff,
#tblstaff-sm,
#tblstaffspecs,
#tblstaffspecs-sm,
#tblstaffskills,
#tblstaffskills-sm {
    width: 100%;
    height: 100%;
    overflow: auto;
}

#staffpic img,
#candidatepic img {
    width: 84px;
    height: 84px;
    object-fit: cover;
}

#staffpic p,
#candidatepic p {
    margin: 6px 0 0;
    color: #23384d;
    font-size: 12px !important;
    line-height: 1.2;
    text-align: center !important;
}

.personnel-status-card {
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.personnel-status-main {
    width: 96px;
    flex: 0 0 96px;
}

.personnel-status-avatar {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 0 6px;
    object-fit: cover;
}

.personnel-status-name {
    margin-bottom: 4px;
    color: #23384d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.personnel-status-ticks {
    display: flex;
    min-width: 0;
    padding-top: 2px;
    align-items: flex-start;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
}

.personnel-status-tick {
    display: inline-flex;
    height: 26px;
    min-height: 26px;
    padding: 0 8px;
    align-items: center;
    border-radius: 999px;
    color: #000000;
    background: #e7edf5;
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
}

/* Personnel action navigation */

#ifuPersMenu,
#ifuPersMenu-sm {
    margin: 0 !important;
    padding: 0 14px 14px !important;
}

#ifuPersMenu table,
#ifuPersMenu-sm table {
    width: 100%;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
    border-collapse: separate;
    border-spacing: 0;
}

#ifuPersMenu td,
#ifuPersMenu-sm td {
    padding: 9px 14px !important;
}

#ifuPersMenu .btn,
#ifuPersMenu-sm .btn {
    margin-left: 4px !important;
}

#ifuPersMenu .btn:first-child,
#ifuPersMenu-sm .btn:first-child {
    margin-left: 0 !important;
}

/* Personnel subpages */

#persassign,
#persfdbk,
#persmeetings,
#perscandidates {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
}

#persassign > .row,
#persfdbk > .row,
#persmeetings > .row {
    display: flex;
    margin: 0;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
}

#assignments,
#assign-activities,
#assign-ot,
#planned,
#select-feedback,
#scheduled,
#select-meeting {
    display: flex;
    min-width: 0;
    min-height: 280px;
    height: auto;
    margin: 0 !important;
    padding: 14px !important;
    flex-direction: column;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    color: var(--ifnd-ink);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

#assignments {
    flex: 0 0 34%;
    max-width: 34%;
}

#assign-activities {
    flex: 0 0 40%;
    max-width: 40%;
}

#assign-ot {
    flex: 1 1 0;
    max-width: none;
}

#planned,
#scheduled {
    flex: 0 0 calc((100% - 12px) * 0.4166667);
    max-width: calc((100% - 12px) * 0.4166667);
}

#select-feedback,
#select-meeting {
    flex: 0 0 calc((100% - 12px) * 0.5833333);
    max-width: calc((100% - 12px) * 0.5833333);
}

#assign-title,
#activities-title,
#ot-title,
#priority-title,
#deliverer-title,
#meet-title {
    margin: 4px 0 10px;
    color: var(--ifnd-ink-soft);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
}

#tbl-assignments,
#tbl-activities,
#tbl-plannedfdbk,
#tbl-topics,
#tbl-delivery,
#tbl-meettopic,
#tbl-meetday,
#tbl-meethour,
#tbl-meetlength,
#tbl-scheduledmeet {
    min-height: 90px;
    overflow: auto;
    border: 1px solid rgba(49, 73, 101, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
}

#choosefdbk,
#schedmeetings {
    min-height: 0;
    flex: 1 1 auto;
}

#select-feedback .text-right,
#select-meeting .text-right,
#assignments .text-right,
#assign-activities .text-right,
#scheduled .text-right {
    margin-top: auto !important;
    padding-top: 10px;
}

#div-priority {
    color: var(--ifnd-ink-soft);
}

#bIncPrioNbr,
#bDecPrioNbr {
    width: 24px;
    height: 24px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ifnd-ink-soft);
    background: transparent;
    box-shadow: none;
}

#priority {
    width: 38px;
    border-color: #c7d3df;
    border-radius: 6px;
    text-align: center;
}

#ddOT {
    width: 64px;
}

/* Candidate workspace */

#perscandidates {
    overflow: hidden;
}

#divcandidates {
    display: grid;
    min-height: 260px;
    margin: 0 !important;
    padding: 14px !important;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.8fr) minmax(260px, 1.4fr) minmax(220px, 1fr);
    gap: 12px;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

#candidateslist,
#candidatepic,
#candidatespecs,
#candidateskills {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    height: 220px;
    min-width: 0;
    margin: 0 !important;
    padding: 34px 10px 10px !important;
    overflow: auto;
    border: 1px solid rgba(49, 73, 101, 0.22);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

#candidateslist::before,
#candidatepic::before,
#candidatespecs::before,
#candidateskills::before {
    position: absolute;
    top: 10px;
    left: 10px;
    color: var(--ifnd-ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

#candidateslist::before {
    content: "Candidate Selector";
}

#candidatepic::before {
    content: "Candidate";
}

#candidatespecs::before {
    content: "Candidate Details";
}

#candidateskills::before {
    content: "Candidate Skills";
}

#perscandidates > .text-right {
    margin: 10px 14px 0 auto !important;
}

/* Reports */

#ifuReports {
    --reports-active-blue: #0070c0;
    --reports-active-green: #2e7d32;
    display: flex;
    box-sizing: border-box;
    width: calc(100% - 30px);
    max-width: none;
    min-height: 0;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0 !important;
    overflow: hidden;
    flex-direction: column;
    font-weight: 400;
}

.reports-edge-shell {
    box-sizing: border-box;
    width: 100%;
    padding-right: 14px;
    padding-left: 14px;
}

#reportsSummary {
    padding-top: 14px;
    padding-bottom: 14px;
}

#reportsSummary .reports-summary-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

.reports-summary-grid {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 12px;
}

.reports-summary-cell {
    min-width: 0;
}

.reports-summary-motto {
    display: flex;
    justify-content: center;
    text-align: center;
}

.reports-summary-secondary {
    text-align: right;
}

.reports-summary-text {
    color: #23384d;
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.reports-summary-team-name {
    font-size: 15px;
    font-weight: 800;
}

.reports-summary-text-secondary {
    color: #1c2f44;
}

.reports-tabs-shell {
    position: relative;
    z-index: 20;
    margin-top: -14px;
    padding-top: 0;
    padding-bottom: 4px;
    overflow: visible;
}

.reports-tabs-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

#chooseReport,
#ddRptWeek,
#ddRptWeek-D {
    display: none !important;
}

.reports-tabs {
    position: relative;
    z-index: 4;
    display: flex;
    min-width: 0;
    padding: 0 0 4px;
    align-items: flex-start;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.reports-tab-btn {
    position: relative;
    top: 0;
    min-width: 108px;
    margin: 0 0 0 -10px !important;
    padding: 7px 20px 6px;
    border: 1px solid rgba(152, 160, 170, 0.75) !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
    color: #4a5563 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 250, 0.98) 48%, rgba(230, 236, 242, 0.98)) !important;
    box-shadow: none !important;
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.reports-tab-btn:first-child {
    margin-left: 0 !important;
}

.reports-tab-btn:hover,
.reports-tab-btn:focus {
    z-index: 3;
    color: #25384a !important;
    background: linear-gradient(180deg, #ffffff, #f4f7fa 48%, #eaf0f5) !important;
    box-shadow: none !important;
}

.reports-tab-btn:focus-visible {
    outline: 2px solid rgba(0, 112, 192, 0.48) !important;
    outline-offset: 2px;
}

.reports-tab-btn.active,
.reports-tab-btn.active:hover,
.reports-tab-btn.active:focus {
    z-index: 20;
    min-width: 132px;
    padding: 11px 28px 10px;
    border-color: rgba(41, 72, 107, 0.92) !important;
    color: #ffffff !important;
    background: var(--reports-active-blue) !important;
    box-shadow: none !important;
    font-size: 13px;
}

.reports-nav-actions {
    position: relative;
    z-index: 24;
    display: flex;
    padding-bottom: 4px;
    align-items: flex-start;
    flex: 0 0 auto;
    gap: 8px;
}

.reports-week-tab {
    position: relative;
    z-index: 25;
    display: flex;
    width: 150px;
    margin: 0 !important;
    padding: 0;
    align-items: stretch;
    overflow: visible;
    border: 1px solid #1f5a24 !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
    color: #ffffff;
    background: var(--reports-active-green) !important;
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.26), 0 2px 6px rgba(15, 23, 42, 0.16) !important;
}

.reports-week-tab::before {
    position: absolute;
    top: 8px;
    right: 34px;
    bottom: 8px;
    width: 1px;
    background: rgba(255, 255, 255, 0.24);
    content: "";
    pointer-events: none;
}

.reports-week-tab::after {
    position: absolute;
    top: 50%;
    right: 13px;
    border-top: 7px solid rgba(255, 255, 255, 0.92);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: "";
    transform: translateY(-30%);
    pointer-events: none;
}

.reports-week-display {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: 100%;
    padding: 11px 40px 14px 14px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: transparent;
    box-shadow: none !important;
    font-family: var(--ifnd-btn-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.reports-week-display:hover,
.reports-week-display:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
}

.reports-week-display:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.82);
    outline-offset: -4px;
}

.reports-week-menu {
    position: absolute;
    z-index: 1;
    top: calc(100% + 1px);
    left: 50%;
    display: flex;
    width: calc(100% - 24px);
    padding: 10px 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(31, 90, 36, 0.92);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    opacity: 0;
    background: linear-gradient(180deg, rgba(224, 244, 226, 0.98), rgba(189, 225, 193, 0.98) 42%, rgba(139, 196, 146, 0.98));
    box-shadow: 0 10px 18px rgba(31, 90, 36, 0.2);
    transform: translate(-50%, -8px);
    transition: opacity 190ms ease, transform 190ms ease;
    pointer-events: none;
}

#chooseWeek.is-open .reports-week-menu {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.reports-week-option {
    width: calc(100% - 12px);
    margin: 0 6px;
    padding: 9px 14px;
    border: 0;
    border-radius: 6px;
    color: #1d5124;
    background: transparent;
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
}

.reports-week-option:hover,
.reports-week-option:focus,
.reports-week-option.is-active {
    color: #173f1d;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: inset 0 0 0 1px rgba(31, 90, 36, 0.18);
}

.reports-week-option:focus-visible {
    outline: 2px solid rgba(31, 90, 36, 0.34);
    outline-offset: -2px;
}

.reports-print-button {
    display: inline-flex !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 9px 13px !important;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(41, 72, 107, 0.92) !important;
    border-top: 0 !important;
    border-radius: 0 0 10px 10px !important;
    color: #ffffff !important;
    background: var(--reports-active-blue) !important;
    box-shadow: none !important;
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
}

.reports-print-button:hover,
.reports-print-button:focus {
    color: #ffffff !important;
    background: #005f9f !important;
}

.reports-workspace-shell {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 14px 14px !important;
    flex: 1 1 auto;
    flex-direction: column;
}

.reports-workspace-row,
.reports-workspace-col,
.reports-content-surface,
#reportsContentCard {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.reports-workspace-col {
    padding: 0;
}

.reports-panel-body {
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    color: var(--ifnd-ink);
    font-size: 12px;
}

.report-page-stack,
.report-page-grid {
    display: grid;
    gap: 12px;
}

.report-page-grid-progress {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.38fr);
    align-items: start;
}

.report-page-grid-activities {
    grid-template-columns: minmax(0, 1fr) minmax(600px, 0.68fr);
    align-items: stretch;
}

.report-page-grid-decisions {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

.reports-subpanel.personnel-workspace-panel {
    box-sizing: border-box;
    min-height: 0;
    padding: 14px !important;
    overflow: hidden;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

.reports-subpanel-header {
    margin: 0 0 10px;
    color: #29486b;
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.reports-subpanel-body {
    min-width: 0;
    min-height: 0;
}

.reports-empty-state {
    padding: 14px 16px;
    border: 1px dashed rgba(131, 149, 167, 0.6);
    border-radius: 10px;
    color: #45576a;
    background: rgba(250, 252, 254, 0.92);
    font-weight: 600;
}

.reports-table-scroll {
    max-width: 100%;
    max-height: clamp(210px, 43vh, 460px);
    overflow: auto;
    border: 1px solid #c7d3df;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

#ifuReports .table {
    width: 100%;
    max-width: 100%;
    margin: 0;
    table-layout: auto;
}

#ifuReports .table th,
#ifuReports .table td {
    padding: 0.42rem 0.5rem;
    vertical-align: middle;
    border-color: #d3dde7;
}

#ifuReports .table thead th {
    position: sticky;
    z-index: 2;
    top: 0;
    border-color: #c7d3df;
    color: #21364b;
    background: linear-gradient(180deg, #f6f8fb, #e9eef5);
    white-space: nowrap;
}

#ifuReports .table tbody td {
    color: #24313b;
    background-color: rgba(255, 255, 255, 0.94);
}

#ifuReports .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(244, 248, 252, 0.96);
}

#ifuReports .table-hover tbody tr:hover td {
    background-color: rgba(225, 239, 251, 0.96);
}

#ifuReports .table tfoot th,
#ifuReports .table tbody tr:last-child > th {
    color: #203b58;
    background: #e8f1f9;
}

.report-progress-status-cell {
    min-width: 118px;
}

.report-progress-status {
    position: relative;
    width: 100%;
    min-width: 96px;
    height: 22px;
    overflow: hidden;
    border: 1px solid rgba(41, 72, 107, 0.28);
    border-radius: 999px;
    background: #e8eef4;
}

.report-progress-status-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #65b7e8, #0070c0);
}

.report-progress-status-text {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #17324d;
    font-size: 10px;
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.82);
}

.report-metric-dashboard {
    display: grid;
    margin-top: 12px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.report-metric-tile {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(156, 173, 190, 0.48);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 245, 250, 0.95));
    box-shadow: 0 5px 12px rgba(24, 39, 75, 0.07);
}

.report-metric-label {
    margin-bottom: 7px;
    color: #52677d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-metric-value {
    color: #203b58;
    font-size: 13px;
    font-weight: 700;
}

.report-metric-tile-strong .report-metric-value {
    color: #0068ad;
    font-size: 17px;
}

.report-hire-skill-value {
    min-width: 52px;
    color: #183653 !important;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.report-cost-bottom {
    display: flex;
    min-height: 0;
    margin-top: 14px;
    align-items: stretch;
    flex: 1 1 0;
    flex-wrap: wrap;
    gap: 14px;
}

.report-cost-info {
    display: flex;
    min-width: 260px;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    flex: 1 1 300px;
    flex-direction: column;
}

.report-cost-dashboard {
    display: flex;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    padding: 10px;
    overflow: auto;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #c7d3df;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
}

.report-cost-dashboard-title,
.report-cost-title {
    color: #29486b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.report-cost-dashboard-grid {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-cost-dashboard .report-metric-tile {
    display: flex;
    box-sizing: border-box;
    min-height: 72px;
    padding: 10px;
    justify-content: space-between;
    flex-direction: column;
    gap: 8px;
}

.report-cost-dashboard .report-metric-tile-wide {
    min-height: 60px;
    grid-column: 1 / -1;
}

.report-cost-dashboard .report-metric-value {
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    color: #183653;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.1;
}

.report-cost-dashboard .report-metric-value .report-progress-status {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.report-cost-chart {
    display: flex;
    box-sizing: border-box;
    min-width: 280px;
    min-height: 280px;
    height: 100%;
    padding: 14px;
    flex: 1 1 320px;
    flex-direction: column;
    border: 1px solid rgba(156, 173, 190, 0.45);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 252, 0.94));
    box-shadow: 0 6px 16px rgba(24, 39, 75, 0.08);
}

.report-cost-chart-trend,
.report-cost-chart-bars {
    flex-basis: 420px;
}

.report-cost-title {
    margin-bottom: 10px;
}

#costTrendChart,
#costCategoryChart {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
}

.report-chart-card {
    min-width: 0;
    padding: 10px 12px 12px;
    border: 1px solid rgba(156, 173, 190, 0.48);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(247, 250, 253, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 6px 16px rgba(24, 39, 75, 0.08);
}

.report-chart-title {
    margin-bottom: 7px;
    color: #29486b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.report-chart-visual {
    position: relative;
    width: 100%;
    min-height: 230px;
    overflow: auto;
    user-select: none;
    -webkit-user-select: none;
}

.report-inline-chart {
    display: block;
    width: 100%;
    min-width: 420px;
    height: auto;
    user-select: none;
    -webkit-user-select: none;
}

.report-chart-grid {
    stroke: #dde5ed;
    stroke-width: 1;
}

.report-chart-axis-label,
.report-chart-legend-label {
    fill: #52677d;
    font-family: var(--ifnd-btn-font);
    font-size: 10px;
}

.report-chart-line {
    fill: none;
    stroke: var(--report-chart-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.report-chart-point,
.report-chart-legend-dot,
.report-chart-bar,
.report-chart-legend-box {
    fill: var(--report-chart-color);
}

.report-chart-point {
    stroke: #ffffff;
    stroke-width: 2;
}

.report-chart-tooltip-target {
    outline: none;
    cursor: default;
}

.report-chart-tooltip-target:focus {
    stroke: #17324d;
    stroke-width: 3;
}

.report-chart-tooltip {
    position: absolute;
    z-index: 12;
    max-width: min(280px, calc(100% - 16px));
    padding: 8px 10px;
    border: 1px solid rgba(41, 72, 107, 0.24);
    border-radius: 8px;
    opacity: 0;
    color: #ffffff;
    background: rgba(26, 43, 60, 0.96);
    box-shadow: 0 10px 22px rgba(20, 35, 50, 0.22);
    font-family: var(--ifnd-btn-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 120ms ease;
    pointer-events: none;
}

.report-chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#report-1,
#report-4 {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

#report-1 > .reports-subpanel,
#report-4 .reports-subpanel {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

#report-1 > .reports-subpanel {
    overflow-x: hidden;
    overflow-y: auto;
}

#report-1 > .reports-subpanel,
#report-4 > .report-page-grid-activities {
    min-height: 0;
    flex: 1 1 auto;
}

#report-1 .reports-subpanel-body,
#report-4 .reports-subpanel-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#report-1 .reports-subpanel-body > .reports-table-scroll:first-child {
    min-height: 0;
    flex: 0 1 auto;
}

#report-4 .report-page-grid-activities > .reports-subpanel {
    height: 100%;
}

#report-4 .reports-subpanel-body > .reports-table-scroll {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
}

.report-activity-insights-dashboard {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(240px, 1fr);
    flex: 1 1 auto;
    gap: 10px;
}

.report-activity-chart-block {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.report-activity-effort-chart-block {
    min-height: 310px;
}

.report-activity-insight-subsection {
    box-sizing: border-box;
    min-height: 240px;
    margin: 0;
    padding: 10px 12px;
    overflow: hidden;
    border: 1px solid rgba(156, 173, 190, 0.45);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 252, 0.94));
    box-shadow: 0 6px 16px rgba(24, 39, 75, 0.08);
}

.report-activity-insight-subsection-title {
    margin-bottom: 10px;
    color: #52677d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.report-activity-chart {
    display: flex;
    min-height: 200px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

#activityWorkloadChart.report-activity-chart-two-column {
    display: grid;
    align-content: center;
    align-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#activityWorkloadChart.report-activity-chart-two-column > .report-inline-chart {
    width: 100%;
    min-width: 0;
    max-width: 360px;
    max-height: 100%;
    justify-self: center;
}

#activityWorkloadChart.report-activity-chart-two-column > .report-inline-chart:only-of-type {
    grid-column: 1 / -1;
}

#activitySkillDemandChart > .report-inline-chart {
    max-width: 560px;
}

.report-activity-chart .report-inline-chart {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: 100%;
    flex: 0 1 auto;
}

.report-activity-chart .report-chart-axis-label,
.report-activity-chart .report-chart-legend-label {
    font-size: 12px;
}

.report-activity-insights-panel .reports-subpanel-body {
    overflow-x: hidden;
    overflow-y: auto;
}

.report-staff-roster-dashboard,
.report-skill-assessment-dashboard {
    --report-staff-card-max-width: 480px;
    display: grid;
    width: 100%;
    min-height: 0;
    overflow: auto;
    justify-content: center;
    justify-items: center;
    gap: 8px;
}

.report-staff-roster-dashboard {
    grid-template-columns: repeat(var(--staff-roster-columns, 3), minmax(0, var(--report-staff-card-max-width)));
}

.report-skill-assessment-dashboard {
    grid-template-columns: repeat(var(--skill-assessment-columns, 3), minmax(0, var(--report-staff-card-max-width)));
}

.report-staff-card,
.report-skill-assessment-card {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--report-staff-card-max-width, 480px);
    justify-self: center;
    border: 1px solid rgba(156, 173, 190, 0.42);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 244, 250, 0.92));
    box-shadow: 0 5px 14px rgba(24, 39, 75, 0.08);
}

.report-staff-card {
    display: flex;
    min-height: 112px;
    padding: 11px;
    flex-direction: column;
    gap: 9px;
}

.report-staff-card-head,
.report-skill-person {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.report-staff-card-identity {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.report-staff-avatar {
    position: relative;
    display: flex;
    width: 42px;
    height: 42px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 2px solid rgba(41, 72, 107, 0.38);
    border-radius: 50%;
    color: #29486b;
    background: linear-gradient(180deg, #f6f8fb, #dfe8f2);
    box-shadow: 0 3px 8px rgba(24, 39, 75, 0.14);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.report-staff-avatar img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.report-staff-avatar span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.report-staff-avatar .report-staff-avatar-fallback {
    position: absolute;
    z-index: 0;
    inset: 0;
}

.report-staff-card-name {
    color: #183653;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}

.report-staff-card-source {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 999px;
    color: #ffffff;
    background: #29486b;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-staff-card-stats {
    display: grid;
    margin-top: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.report-staff-card-stats div {
    padding: 7px 6px;
    border: 1px solid rgba(199, 211, 223, 0.7);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    text-align: center;
}

.report-staff-card-stats span {
    display: block;
    color: #52677d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.report-staff-card-stats strong {
    display: block;
    margin-top: 3px;
    color: #183653;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
}

.report-skill-assessment-card {
    display: flex;
    min-height: 132px;
    padding: 11px;
    flex-direction: column;
    gap: 10px;
}

.report-skill-team-card {
    border-color: rgba(41, 72, 107, 0.72);
    background: linear-gradient(180deg, rgba(231, 241, 252, 0.99), rgba(205, 223, 242, 0.96));
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.16);
}

.report-skill-assessment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.report-skill-assessment-name {
    min-width: 0;
    color: #183653;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.15;
}

.report-skill-average {
    padding: 4px 8px;
    border-radius: 999px;
    color: #ffffff;
    background: #29486b;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.report-skill-team-card .report-skill-assessment-name {
    color: #102a43;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.report-skill-team-card .report-skill-average {
    background: #2e7d32;
}

.report-skill-chip-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.report-skill-chip {
    display: flex;
    padding: 6px 7px;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--report-skill-heat-color, #c7d3df) 68%, #52677d);
    border-radius: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--report-skill-heat-color, #ffffff) 30%, #ffffff), color-mix(in srgb, var(--report-skill-heat-color, #ffffff) 48%, #ffffff));
}

.report-skill-chip span {
    color: #000000;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.report-skill-chip strong {
    color: #000000;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.report-skill-chip.report-skill-heat-empty {
    border-color: rgba(156, 173, 190, 0.42);
    background: rgba(255, 255, 255, 0.72);
}

.report-performance-dashboard {
    display: grid;
    margin-bottom: 8px;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 6px;
}

.report-performance-dashboard .report-metric-tile {
    display: flex;
    min-height: 48px;
    padding: 7px 8px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 8px;
}

.report-performance-dashboard .report-metric-value {
    min-height: 16px;
    justify-content: flex-end;
    font-size: 14px;
    text-align: right;
}

.report-performance-dashboard .report-metric-label {
    margin: 0;
    color: #000000;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
}

.report-performance-dashboard .report-performance-total {
    border-color: rgba(41, 72, 107, 0.72);
    background: linear-gradient(180deg, rgba(231, 241, 252, 0.99), rgba(205, 223, 242, 0.96));
    box-shadow: 0 8px 18px rgba(24, 39, 75, 0.14);
}

.report-news-day {
    margin: 0 0 8px;
    padding: 9px 10px;
    border: 1px solid rgba(156, 173, 190, 0.45);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 252, 0.94));
    box-shadow: 0 6px 16px rgba(24, 39, 75, 0.08);
}

.report-news-day:last-child {
    margin-bottom: 0;
}

.report-news-day-title {
    margin-bottom: 6px;
    color: #29486b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.report-news-day-title span {
    color: #66798c;
    font-weight: 600;
}

.report-news-day-content {
    color: #24313b;
    line-height: 1.45;
}

.report-news-item + .report-news-item {
    margin-top: 4px;
}

@media (max-width: 1199.98px) {
    .reports-tabs-row {
        flex-direction: column;
        gap: 0;
    }

    .reports-nav-actions {
        margin-top: -4px;
        padding-left: 14px;
    }

    .report-page-grid-progress,
    .report-page-grid-activities {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .report-staff-roster-dashboard,
    .report-skill-assessment-dashboard {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 767.98px) {
    #ifuReports {
        width: calc(100% - 16px);
        height: auto !important;
        min-height: 0;
        overflow: visible;
    }

    .reports-summary-grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }

    .reports-summary-motto,
    .reports-summary-secondary {
        justify-content: flex-start;
        text-align: left;
    }

    .reports-tabs {
        padding-right: 0;
    }

    .reports-tab-btn,
    .reports-tab-btn.active,
    .reports-tab-btn.active:hover,
    .reports-tab-btn.active:focus {
        min-width: 0;
        padding-right: 14px;
        padding-left: 14px;
        font-size: 11px;
    }

    .reports-workspace-shell {
        flex: 0 0 auto;
    }

    .reports-panel-body {
        overflow: visible;
    }

    .reports-table-scroll {
        max-height: none;
    }

    .report-page-grid-decisions {
        grid-template-columns: minmax(0, 1fr);
    }

    .report-cost-bottom {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .report-cost-info,
    .report-cost-chart {
        width: 100%;
        min-width: 0;
        height: auto;
        flex: 0 0 auto;
    }

    #costTrendChart,
    #costCategoryChart {
        height: 300px;
        min-height: 300px;
        flex: 0 0 auto;
    }

    #activityWorkloadChart.report-activity-chart-two-column {
        grid-template-columns: minmax(0, 1fr);
        overflow: visible;
    }

    .report-activity-effort-chart-block {
        height: auto;
        min-height: 0;
    }
}

@media (max-width: 479.98px) {
    .reports-edge-shell,
    #reportsSummary,
    .reports-workspace-shell {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .reports-workspace-shell {
        padding-bottom: 52px !important;
    }

    .reports-nav-actions {
        width: 100%;
        padding-left: 0;
    }

    .reports-week-tab {
        width: auto;
        min-width: 132px;
        flex: 1 1 auto;
    }

    .reports-print-button span {
        display: none;
    }

    .reports-subpanel.personnel-workspace-panel {
        padding: 10px !important;
    }

    .report-metric-dashboard {
        grid-template-columns: minmax(0, 1fr);
    }

}

/* Forms and tables */

.form-control {
    border-color: #c7d3df;
    border-radius: 6px;
    color: var(--ifnd-ink);
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.form-control:focus {
    border-color: rgba(0, 112, 192, 0.72);
    box-shadow: var(--ifnd-focus);
}

.table {
    color: var(--ifnd-ink);
}

.table th {
    color: #263d57;
    font-weight: 700;
}

.table-sm th,
.table-sm td {
    padding: 0.35rem 0.42rem;
}

.table thead th,
#tbl-assignments th,
#tbl-activities th,
#tbl-plannedfdbk th,
#tbl-topics th,
#tbl-delivery th,
#tbl-meettopic th,
#tbl-meetday th,
#tbl-meethour th,
#tbl-meetlength th,
#tbl-scheduledmeet th,
#tblcandidates th {
    top: 0;
    border-color: #c7d3df;
    color: #263d57;
    background: #edf3f9;
    position: sticky;
    z-index: 1;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: #c7d3df;
}

table.table-hover tbody tr:hover {
    background-color: #fff2ad;
}

/* Week indicator */

#ifuWeek {
    padding-top: 0 !important;
    padding-bottom: 8px !important;
    pointer-events: none;
}

#ifuSimWeek {
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 7px 16px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #34495e 0%, #263747 100%);
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.18);
}

#weekno {
    margin: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

/* Modals and popovers */

.modal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(48, 73, 107, 0.18);
    border-radius: 12px;
    background-color: #f6faff;
    background-image: url("../images/ifnd-3in1-modal.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 14px 30px rgba(24, 39, 75, 0.2);
}

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer {
    padding-right: 20px;
    padding-left: 20px;
}

.modal .modal-header {
    padding-top: 14px;
    padding-bottom: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(48, 73, 107, 0.12);
}

.modal .modal-title {
    color: #0c1f3a;
    font-size: 15px;
    font-weight: 700;
}

.modal .modal-body {
    padding-top: 16px;
    padding-bottom: 16px;
    color: #24313b;
    line-height: 1.45;
}

.modal .modal-footer {
    padding-top: 12px;
    padding-bottom: 14px;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid rgba(48, 73, 107, 0.12);
}

.modal .modal-footer > * {
    margin: 0;
}

.modal .close {
    display: inline-flex;
    width: 32px;
    height: 32px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #314965;
    opacity: 0.8;
    text-shadow: none;
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.modal .close:hover,
.modal .close:focus {
    color: #172331;
    background: rgba(0, 112, 192, 0.1);
    opacity: 1;
    outline: none;
    transform: translateY(-1px);
}

.modal .nav-tabs {
    border-color: rgba(48, 73, 107, 0.18);
}

.modal .nav-tabs .nav-link {
    border-radius: 8px 8px 0 0;
    color: var(--ifnd-ink-soft);
    font-weight: 700;
}

.modal .nav-tabs .nav-link.active {
    color: var(--ifnd-ink);
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(48, 73, 107, 0.18) rgba(48, 73, 107, 0.18) #ffffff;
}

#instructor .modal-dialog {
    max-width: 960px;
}

#aboutbody {
    height: 325px;
    padding-top: 18px;
    padding-bottom: 18px;
    background-image: url("../images/ifnd-3in1-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.popover {
    overflow: hidden;
    border: 1px solid rgba(48, 73, 107, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 24px rgba(24, 39, 75, 0.18);
}

.popover-header {
    color: var(--ifnd-ink-soft);
    background: #edf3f9;
    font-family: var(--ifnd-btn-font);
    font-weight: 700;
}

.popover-body {
    color: var(--ifnd-ink);
    background: rgba(255, 255, 255, 0.96);
    font-family: var(--ifnd-btn-font);
}

/* Responsive behavior mirrors the existing 3-in-1 visual system. */

@media (max-width: 991.98px) {
    #persassign > .row,
    #persfdbk > .row,
    #persmeetings > .row {
        flex-wrap: wrap;
    }

    #assignments,
    #assign-activities,
    #assign-ot,
    #planned,
    #select-feedback,
    #scheduled,
    #select-meeting {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #divcandidates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #ifuTitle,
    #ifuMenu {
        max-width: calc(100% - 10px);
    }

    #ifuTitle {
        margin-top: 5px !important;
        margin-bottom: 5px !important;
    }

    #ifuTitle > .row,
    #ifuMenu > .row {
        min-height: 42px;
    }

    #ifuTitle h6 {
        font-size: 12px !important;
    }

    #ifuSimName {
        flex: 0 0 64%;
        max-width: 64%;
    }

    #ifuSimName::before {
        width: 5px;
        height: 24px;
        flex-basis: 5px;
    }

    #ifuTeam {
        flex: 0 0 36%;
        max-width: 36%;
        justify-content: flex-start;
    }

    #ifuTeam h6 {
        padding: 4px 7px;
    }

    #ifuMenu > .row {
        padding: 6px 5px 9px !important;
        flex-wrap: wrap-reverse;
        row-gap: 6px;
    }

    #ifuSimMenu-sm,
    #ifuMgrMenu {
        width: auto;
        max-width: none;
        flex: 0 0 auto;
    }

    #ifuMgrMenu {
        margin-left: auto !important;
    }

    #ifuDashboard,
    #ifuPersonnel,
    #ifuReports {
        width: calc(100% - 10px) !important;
        margin-right: 5px !important;
        margin-left: 5px !important;
    }

    #ifuDashboard {
        display: flex;
        overflow-y: auto;
    }

    #dashboard-kpi-bar {
        padding: 10px 10px 0;
    }

    .kpi-bar-card {
        padding: 7px 9px;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .kpi-bar-title {
        min-width: 0;
    }

    .kpi-bar-body {
        width: 100%;
        padding-bottom: 2px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    #ifuKPI.kpi-bar-body {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .kpi-chip {
        flex: 0 0 auto;
    }

    #dashboard-charts {
        height: auto !important;
        padding: 10px !important;
        flex: 0 0 auto;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .dashboard-chart-col {
        width: 100%;
        height: 300px;
        min-height: 0;
        flex: 0 0 300px;
        max-width: 100%;
    }

    #ifuSchedule,
    #ifuNetwork {
        height: 300px !important;
        min-height: 300px;
    }

    .chart-card-header {
        padding: 10px 11px;
        gap: 7px 10px;
    }

    .chart-legend-item {
        padding-right: 6px;
        padding-left: 6px;
    }

    #report-1 .report-cost-chart {
        min-height: 280px;
        padding: 8px;
    }

    #report-1 #ifuCost {
        height: 260px;
        min-height: 260px;
    }

    #divstaff {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #staffpic .personnel-status-ticks {
        display: none;
    }

    #staffpic .personnel-status-card {
        justify-content: center;
    }

    #ifuPersMenu,
    #ifuPersMenu-sm,
    #persassign,
    #persfdbk,
    #persmeetings,
    #perscandidates {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #ifuReports {
        padding: 10px !important;
    }

    #ifuReports > .col-12:first-child > .row {
        row-gap: 8px;
    }

    #ifuReports > .col-12:first-child .col-9,
    #ifuReports > .col-12:first-child .col-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    #ifuReports > .col-12:first-child .text-right {
        text-align: left !important;
    }

    #ifuReports > .col-12:first-child .d-flex {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 575.98px) {
    #ifuLogin {
        padding: 16px 10px !important;
    }

    #ifuLogin > .container {
        padding: 18px 14px 20px !important;
    }

    #ifuLogin h2 {
        font-size: 20px;
    }

    .dashboard-chart-col {
        height: 320px;
        flex-basis: 320px;
    }

    #ifuSchedule,
    #ifuNetwork {
        height: 320px !important;
        min-height: 320px;
    }

    .chart-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .chart-legend {
        width: 100%;
        justify-content: flex-start;
    }

    #schedule-wrapper #sched {
        min-width: 520px;
    }

    #stafflist,
    #stafflist-sm,
    #staffpic,
    #staffspecs,
    #staffspecs-sm,
    #staffskills,
    #staffskills-sm,
    #candidateslist,
    #candidatepic,
    #candidatespecs,
    #candidateskills {
        height: auto !important;
        min-height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .modal .close,
    .network-tooltip,
    .timeline-tooltip {
        transition: none;
    }
}

/* Personnel workspace refresh — follows the current 3in1 personnel system. */

#ifuPersonnel.personnel-main-shell {
    box-sizing: border-box;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
}

.personnel-edge-shell {
    box-sizing: border-box;
    padding: 14px;
}

.personnel-edge-shell-horizontal {
    box-sizing: border-box;
    margin: 0 0 14px;
    padding: 0 14px;
}

#divstaff.personnel-top-panels {
    display: grid !important;
    width: 100%;
    min-height: 200px;
    margin: 0 !important;
    padding: 14px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.personnel-top-panel {
    box-sizing: border-box;
    height: 200px;
    min-width: 0;
    padding: 8px 10px 10px;
    overflow: hidden;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.45);
}

.personnel-top-panel-title {
    margin: 0 0 8px;
    color: var(--ifnd-ink-soft);
    font-family: var(--ifnd-btn-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.personnel-top-panel > #stafflist,
.personnel-top-panel > #stafflist-sm,
.personnel-top-panel > #staffpic,
.personnel-top-panel > #staffspecs,
.personnel-top-panel > #staffspecs-sm,
.personnel-top-panel > #staffskills,
.personnel-top-panel > #staffskills-sm {
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    height: calc(100% - 24px) !important;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.personnel-top-panel > #stafflist::before,
.personnel-top-panel > #stafflist-sm::before,
.personnel-top-panel > #staffpic::before,
.personnel-top-panel > #staffspecs::before,
.personnel-top-panel > #staffspecs-sm::before,
.personnel-top-panel > #staffskills::before,
.personnel-top-panel > #staffskills-sm::before {
    content: none;
}

#tblstaff,
#tblstaff-sm,
#tblstaffspecs,
#tblstaffspecs-sm,
#tblstaffskills,
#tblstaffskills-sm {
    height: auto;
    min-height: 100%;
}

#tblstaff .table,
#tblstaff-sm .table,
#tblstaffspecs .table,
#tblstaffspecs-sm .table,
#tblstaffskills .table,
#tblstaffskills-sm .table {
    margin-bottom: 0;
    font-size: 11px;
}

.skill-bar-container {
    position: relative;
    box-sizing: border-box;
    width: 133px;
    height: 12px;
    overflow: hidden;
    border: 1px solid #999999;
    border-radius: 2px;
    background: #e0e0e0;
}

.skill-bar-gradient {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(to right, #ff4444 0%, #ffa500 25%, #ffff00 50%, #90ee90 75%, #44ff44 100%);
    background-size: 133px 100%;
}

.skill-bar-indicator {
    position: absolute;
    top: -4px;
    width: 8px;
    height: 20px;
    border: 1px solid #333333;
    border-radius: 3px;
    background: #555555;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

#tblstaff tr,
#tblstaff-sm tr {
    cursor: pointer;
}

#tblstaff tr.bg-warning,
#tblstaff-sm tr.bg-warning {
    background: #fff2ad !important;
}

.personnel-status-card {
    display: flex;
    height: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.personnel-status-main {
    width: 96px;
    flex: 0 0 96px;
}

.personnel-status-avatar,
#staffpic .personnel-status-avatar {
    display: block;
    width: 84px;
    height: 84px;
    margin: 0 auto 6px;
    object-fit: cover;
}

.personnel-status-name {
    margin-bottom: 4px;
    overflow: hidden;
    color: #23384d;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.personnel-status-action {
    display: block;
    min-width: 104px;
    margin: 6px auto 0;
    border-color: #b21f2d !important;
    color: #ffffff !important;
    background: var(--ifnd-danger-bg) !important;
    white-space: nowrap;
}

.personnel-status-action:hover,
.personnel-status-action:focus {
    border-color: #961a26 !important;
    color: #ffffff !important;
    background: var(--ifnd-danger-hover) !important;
}

.personnel-status-ticks {
    display: flex;
    min-width: 0;
    padding-top: 2px;
    align-items: flex-start;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
}

.personnel-status-tick {
    display: inline-flex;
    max-width: 100%;
    min-height: 26px;
    padding: 4px 8px;
    align-items: center;
    border-radius: 999px;
    color: #000000;
    background: #e7edf5;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}

.personnel-status-tick-wide {
    border-radius: 10px;
}

#ifuPersMenu,
#ifuPersMenu-sm {
    margin: 0 !important;
    padding: 0 !important;
}

.personnel-workspace-toolbar {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

.personnel-workspace-toolbar-mobile {
    padding: 8px 10px;
}

.personnel-workspace-toolbar-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

.personnel-workspace-toolbar .btn {
    margin: 0 !important;
}

#ifuPersMenu .personnel-workspace-toolbar .btn.active,
#ifuPersMenu-sm .personnel-workspace-toolbar .btn.active {
    border-color: #29486b !important;
    color: #ffffff !important;
    background: var(--ifnd-primary-bg) !important;
    box-shadow: var(--ifnd-btn-shadow), 0 0 0 4px rgba(0, 112, 192, 0.22) !important;
}

#persassign.personnel-workspace-shell,
#persfdbk.personnel-workspace-shell,
#persmeetings.personnel-workspace-shell,
#perscandidates.personnel-workspace-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px 14px !important;
    overflow: visible;
}

.personnel-workspace-row {
    display: flex;
    min-height: 0;
    margin: 0 !important;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 12px;
}

.personnel-workspace-panel {
    display: flex;
    min-width: 0;
    min-height: 280px;
    margin: 0 !important;
    padding: 14px !important;
    flex-direction: column;
    border: 1px solid var(--ifnd-panel-line);
    border-radius: var(--ifnd-radius);
    color: var(--ifnd-ink);
    background: var(--ifnd-panel-soft);
    box-shadow: 5px 7px 4px rgba(90, 90, 90, 0.28);
}

.personnel-workspace-panel > h6,
.personnel-workspace-panel #deliverer-title {
    margin: 4px 0 10px;
    color: var(--ifnd-ink-soft);
    font-family: var(--ifnd-btn-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.personnel-workspace-panel-body {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
}

.personnel-workspace-panel-footer {
    margin-top: auto !important;
    padding-top: 10px;
    flex: 0 0 auto;
}

#assign-edit-row > #assignments {
    flex: 0 0 34%;
    max-width: 34%;
}

#assign-edit-row > #assign-activities {
    flex: 0 0 40%;
    max-width: 40%;
}

#assign-edit-row > #assign-ot {
    max-width: none;
    flex: 1 1 0;
}

#persfdbk .personnel-workspace-row > #planned,
#persmeetings .personnel-workspace-row > #scheduled {
    flex: 0 0 calc((100% - 12px) * 0.4166667);
    max-width: calc((100% - 12px) * 0.4166667);
}

#persfdbk .personnel-workspace-row > #select-feedback,
#persmeetings .personnel-workspace-row > #select-meeting {
    flex: 0 0 calc((100% - 12px) * 0.5833333);
    max-width: calc((100% - 12px) * 0.5833333);
}

.assign-activity-body {
    min-height: 0;
    margin: 0;
    flex-wrap: nowrap;
}

.assign-activity-body > #tbl-activities {
    min-width: 0;
    flex: 1 1 auto;
}

#div-priority {
    flex: 0 0 72px;
}

.personnel-control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--ifnd-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#ddOT {
    width: 80px;
}

#choosefdbk {
    display: grid;
    margin: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

#choosefdbk > #tbl-topics,
#choosefdbk > #tbl-delivery {
    width: auto;
    max-width: none;
    padding: 0 !important;
}

#schedmeetings.meetings-selector-grid {
    display: grid;
    margin: 0 !important;
    grid-template-columns: 1.25fr 0.8fr 0.9fr 0.8fr;
    gap: 8px;
}

#schedmeetings.meetings-selector-grid > div {
    width: auto;
    max-width: none;
    padding: 0 !important;
}

#tbl-assignments,
#tbl-activities,
#tbl-plannedfdbk,
#tbl-topics,
#tbl-delivery,
#tbl-meettopic,
#tbl-meetday,
#tbl-meethour,
#tbl-meetlength,
#tbl-scheduledmeet {
    min-height: 90px;
    overflow: auto;
    border: 1px solid rgba(49, 73, 101, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
}

#perscandidates .personnel-workspace-panel {
    width: 100%;
    max-width: none;
    min-height: 320px;
    flex: 1 1 100%;
}

#divcandidates.personnel-workspace-panel {
    display: flex !important;
    height: auto;
    min-height: 320px;
    grid-template-columns: none;
}

.candidate-workspace-body {
    padding: 2px;
}

#tblcandidates {
    display: grid;
    width: 100%;
    min-height: 0;
    padding: 2px;
    grid-template-columns: repeat(auto-fill, 280px);
    grid-auto-rows: minmax(248px, auto);
    align-content: start;
    justify-content: start;
    gap: 15px;
}

.candidate-card {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    min-height: 248px;
    padding: 42px 14px 14px;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #c7d3df;
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.96);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.candidate-card:hover {
    border-color: #0070c0;
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.14);
    transform: translateY(-1px);
}

.candidate-card.is-unavailable {
    border-color: #d6b96a;
    background: rgba(255, 251, 235, 0.96);
}

.candidate-card-header {
    min-height: 64px;
    padding-right: 0;
}

.candidate-info {
    display: flex;
    min-width: 0;
    margin-bottom: 12px;
    align-items: center;
}

.candidate-avatar {
    display: flex;
    width: 60px;
    height: 60px;
    margin-right: 12px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f8f9fa;
    flex: 0 0 60px;
}

.candidate-image {
    width: 100%;
    height: 100%;
    border: 2px solid #0070c0;
    border-radius: 50%;
    object-fit: cover;
}

.candidate-details {
    min-width: 0;
}

.candidate-details h5 {
    margin: 0 0 3px;
    overflow: hidden;
    color: #23384d;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-details p {
    margin: 0;
    color: #607286;
    font-size: 11px;
    line-height: 1.35;
}

.candidate-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.candidate-actions .btn {
    height: 28px;
    margin: 0 !important;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.candidate-details-toggle {
    width: 30px;
    padding: 4px !important;
}

.candidate-specs {
    margin: 4px 0 10px;
    padding: 8px 10px;
    border: 1px solid #dce5ee;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
}

.spec-row {
    display: flex;
    margin-bottom: 4px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    line-height: 1.2;
}

.spec-row:last-child {
    margin-bottom: 0;
}

.spec-label {
    color: #6c7d90;
    font-weight: 600;
}

.spec-value {
    color: #34495e;
    font-weight: 700;
    text-align: right;
}

.candidate-warning {
    margin: 0 0 10px;
    padding: 7px 9px;
    border: 1px solid #e6cf88;
    border-radius: 6px;
    color: #6d5610;
    background: #fff7d6;
    font-size: 10px;
    line-height: 1.35;
}

.candidate-skill-list {
    display: flex;
    margin-top: auto;
    padding: 6px 8px;
    flex-direction: column;
    gap: 4px;
    border: 1px solid rgba(49, 73, 101, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
}

.candidate-skill-row {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: 48px 24px 133px;
    gap: 5px;
    color: #34495e;
    font-size: 10px;
    line-height: 1;
}

.candidate-skill-name {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-skill-value {
    color: #607286;
    font-weight: 700;
    text-align: center;
}

.candidate-skill-meter {
    display: block;
    width: 133px;
    height: 12px;
}

.candidate-empty {
    display: flex;
    min-height: 220px;
    padding: 28px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    border: 1px dashed #b7c5d3;
    border-radius: 8px;
    color: #617488;
    background: rgba(255, 255, 255, 0.58);
    text-align: center;
}

.candidate-empty i {
    color: #0070c0;
    font-size: 24px;
}

.candidate-empty strong {
    color: #29486b;
    font-size: 13px;
}

.candidate-empty span {
    font-size: 11px;
}

@media (max-width: 991.98px) {
    #divstaff.personnel-top-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .personnel-workspace-row {
        flex-wrap: wrap;
    }

    #assign-edit-row > #assignments,
    #assign-edit-row > #assign-activities,
    #assign-edit-row > #assign-ot,
    #persfdbk .personnel-workspace-row > #planned,
    #persfdbk .personnel-workspace-row > #select-feedback,
    #persmeetings .personnel-workspace-row > #scheduled,
    #persmeetings .personnel-workspace-row > #select-meeting {
        max-width: 100%;
        flex: 1 1 100%;
    }

    #persassign.personnel-workspace-shell,
    #persfdbk.personnel-workspace-shell,
    #persmeetings.personnel-workspace-shell,
    #perscandidates.personnel-workspace-shell {
        height: auto !important;
    }

    .personnel-workspace-panel {
        min-height: 260px;
    }

    #tblcandidates {
        grid-template-columns: repeat(auto-fill, 280px);
    }
}

@media (max-width: 767.98px) {
    #staffpic .personnel-status-ticks {
        display: none;
    }

    #staffpic .personnel-status-card {
        justify-content: center;
    }

    .personnel-edge-shell-horizontal,
    #persassign.personnel-workspace-shell,
    #persfdbk.personnel-workspace-shell,
    #persmeetings.personnel-workspace-shell,
    #perscandidates.personnel-workspace-shell {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    #schedmeetings.meetings-selector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    #divstaff.personnel-top-panels {
        padding-right: 10px !important;
        padding-left: 10px !important;
        grid-template-columns: minmax(0, 1fr);
    }

    .personnel-top-panel {
        height: 190px;
    }

    .personnel-top-panel > #stafflist,
    .personnel-top-panel > #stafflist-sm,
    .personnel-top-panel > #staffpic,
    .personnel-top-panel > #staffspecs,
    .personnel-top-panel > #staffspecs-sm,
    .personnel-top-panel > #staffskills,
    .personnel-top-panel > #staffskills-sm {
        height: calc(100% - 24px) !important;
        min-height: 0;
    }

    #choosefdbk,
    #schedmeetings.meetings-selector-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #tblcandidates {
        grid-template-columns: minmax(0, 1fr);
    }

    .candidate-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .candidate-card-header {
        padding-top: 0;
        padding-right: 0;
    }

    .candidate-actions {
        top: 10px;
        right: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .candidate-card {
        transition: none;
    }
}