:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8f9fd;
    --surface-muted: #eef1f7;
    --text: #182033;
    --text-soft: #667085;
    --text-faint: #98a2b3;
    --line: #e7eaf1;
    --primary: #4967ff;
    --primary-dark: #3651d8;
    --primary-soft: #edf0ff;
    --success: #16a36a;
    --success-soft: #e9f8f1;
    --warning: #e99a16;
    --warning-soft: #fff6df;
    --danger: #e34b54;
    --danger-soft: #fff0f1;
    --shadow-sm: 0 8px 24px rgba(26, 39, 75, 0.05);
    --shadow-md: 0 18px 50px rgba(26, 39, 75, 0.10);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --sidebar-width: 268px;
    --sidebar-mini: 82px;
    --transition: 220ms ease;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

body,
button,
input {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

.icon {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
    flex: 0 0 auto;
}

.app-shell {
    min-height: 100vh;
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: #11182a;
    color: #e9edff;
    transition: width var(--transition), transform var(--transition);
    overflow: visible;
}

.sidebar__brand {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar__toggle {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 28px;
    right: -15px;
    z-index: 60;
    padding: 0;
    border: 1px solid rgba(17, 24, 42, .16);
    border-radius: 50%;
    color: #53607d;
    background: #fff;
    box-shadow: 0 8px 20px rgba(17, 24, 42, .18);
    transition: transform var(--transition), color var(--transition), background var(--transition);
}

.sidebar__toggle:hover {
    color: var(--primary);
    background: #f7f8ff;
}

.sidebar__toggle .icon {
    width: 17px;
    height: 17px;
    transition: transform var(--transition);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .05em;
    background: linear-gradient(145deg, #6b7cff, #3856e6);
    box-shadow: 0 10px 24px rgba(73, 103, 255, 0.3);
}

.brand-mark--large {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 16px;
}

.brand-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    white-space: nowrap;
    transition: opacity 150ms ease;
}

.brand-copy strong {
    font-size: 14px;
}

.brand-copy span {
    margin-top: 3px;
    color: #98a3c7;
    font-size: 12px;
}

.sidebar__collapse {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    color: #aeb8d8;
    background: rgba(255, 255, 255, 0.06);
}

.sidebar__collapse:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}

.sidebar__nav {
    padding: 18px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .12) transparent;
}

.nav-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    color: #aeb8d8;
    background: transparent;
    text-align: left;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}

.nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.nav-item.is-active,
.nav-item.is-active-parent {
    color: #fff;
    background: linear-gradient(135deg, rgba(91, 113, 255, .35), rgba(73, 103, 255, .14));
}

.nav-item.is-active {
    box-shadow: inset 3px 0 0 #778aff;
}

.nav-item__icon {
    width: 22px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.nav-item__label {
    overflow: hidden;
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 150ms ease;
}

.nav-badge {
    min-width: 23px;
    height: 23px;
    display: inline-grid;
    place-items: center;
    padding: 0 7px;
    border-radius: 999px;
    color: #fff;
    background: #e7505a;
    font-size: 11px;
    font-weight: 800;
}

.nav-badge--small {
    min-width: 20px;
    height: 20px;
}

.nav-drawer + .nav-drawer,
.nav-drawer + .nav-item,
.nav-item + .nav-drawer {
    margin-top: 5px;
}

.nav-drawer__chevron {
    color: #7f8aae;
    transition: transform var(--transition);
}

.nav-drawer.is-open .nav-drawer__chevron {
    transform: rotate(180deg);
}

.nav-drawer__content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--transition);
}

.nav-drawer.is-open .nav-drawer__content {
    grid-template-rows: 1fr;
}

.nav-drawer__inner {
    min-height: 0;
    overflow: hidden;
    padding-left: 47px;
}

.nav-subitem {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px 0 13px;
    margin: 3px 0;
    border-left: 1px solid rgba(255, 255, 255, .12);
    color: #8f9aba;
    font-size: 13px;
    transition: color var(--transition), border-color var(--transition);
}

.nav-subitem:hover,
.nav-subitem.is-active {
    color: #fff;
    border-color: #778aff;
}

.nav-subitem.is-active {
    font-weight: 700;
}

.sidebar__profile {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .025);
}

.profile-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ef7c5c, #bd4b7a);
    font-size: 13px;
    font-weight: 800;
}

.profile-avatar--small {
    width: 38px;
    height: 38px;
}

.profile-avatar--large {
    width: 62px;
    height: 62px;
    font-size: 18px;
}

.profile-copy {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    white-space: nowrap;
    transition: opacity 150ms ease;
}

.profile-copy strong {
    overflow: hidden;
    color: #f7f8ff;
    font-size: 13px;
    text-overflow: ellipsis;
}

.profile-copy span {
    margin-top: 3px;
    color: #8994b5;
    font-size: 11px;
}

.profile-logout {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 10px;
    color: #98a3c7;
}

.profile-logout:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.main-area {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left var(--transition);
}

.topbar {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 30px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 25;
}

.topbar__left,
.topbar__actions,
.topbar-user {
    display: flex;
    align-items: center;
}

.topbar__left {
    gap: 15px;
}

.topbar__eyebrow {
    margin: 0 0 3px;
    color: var(--text-soft);
    font-size: 12px;
}

.topbar h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -.03em;
}

.topbar__actions {
    gap: 10px;
}

.icon-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-soft);
    background: var(--surface);
}

.icon-button:hover,
.filter-button:hover {
    border-color: #ccd3e2;
    box-shadow: var(--shadow-sm);
}

.mobile-menu-button {
    display: none;
}

.notification-dot {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 8px;
    right: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--danger);
}

.filter-button {
    min-width: 132px;
    height: 45px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 8px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    text-align: left;
}

.filter-button span {
    color: var(--text-faint);
    font-size: 10px;
    grid-column: 1;
}

.filter-button strong {
    font-size: 12px;
    grid-column: 1;
}

.filter-button .icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 16px;
    color: var(--text-faint);
}

.topbar-user {
    gap: 10px;
    margin-left: 6px;
}

.topbar-user__copy {
    display: flex;
    flex-direction: column;
}

.topbar-user__copy strong {
    font-size: 12px;
}

.topbar-user__copy span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 10px;
}

.page-content {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 28px 30px 50px;
}

.alert {
    padding: 13px 15px;
    margin-bottom: 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
}

.alert--success {
    color: #087549;
    border-color: #bcebd5;
    background: var(--success-soft);
}

.alert--danger {
    color: #a42b36;
    border-color: #ffc8cd;
    background: var(--danger-soft);
}

.alert--warning {
    color: #9a6508;
    border-color: #f7dfa7;
    background: var(--warning-soft);
}

.welcome-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 28px;
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 84% 20%, rgba(255, 255, 255, .18), transparent 26%),
        linear-gradient(120deg, #1c2852, #334aad 66%, #5068e6);
    box-shadow: var(--shadow-md);
}

.welcome-panel::after {
    content: "";
    width: 180px;
    height: 180px;
    position: absolute;
    right: 20%;
    bottom: -130px;
    border: 35px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
}

.welcome-panel h2 {
    margin: 5px 0 7px;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.04em;
}

.welcome-panel p {
    max-width: 680px;
    margin: 0;
    color: #d4dcff;
    line-height: 1.6;
}

.welcome-panel__time,
.countdown-card {
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 17px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
}

.welcome-panel__time .icon,
.countdown-card .icon {
    width: 26px;
    height: 26px;
    color: #d9e0ff;
}

.welcome-panel__time div,
.countdown-card div {
    display: flex;
    flex-direction: column;
}

.welcome-panel__time span,
.countdown-card span {
    color: #c5cffc;
    font-size: 11px;
}

.welcome-panel__time strong,
.countdown-card strong {
    margin-top: 3px;
    font-size: 17px;
}

.section-kicker {
    color: #75809a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.welcome-panel .section-kicker {
    color: #bec8f7;
}

.section-kicker--danger {
    color: var(--danger);
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.section-heading h2 {
    margin: 5px 0 0;
    font-size: 19px;
    letter-spacing: -.025em;
}

.text-link {
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}

.alert-panel,
.panel,
.team-section,
.progress-ring-card,
.profile-status-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.alert-panel,
.panel,
.team-section {
    padding: 22px;
}

.alert-panel {
    margin-bottom: 22px;
}

.attention-list {
    display: grid;
    gap: 9px;
}

.attention-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fcfcfe;
}

.attention-item__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--danger);
    background: var(--danger-soft);
}

.attention-item__icon--warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.attention-item__icon--muted {
    color: var(--text-soft);
    background: var(--surface-muted);
}

.attention-item__main {
    min-width: 0;
}

.attention-item__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attention-item__main strong {
    font-size: 13px;
}

.attention-item__main p {
    margin: 4px 0;
    color: #475467;
    font-size: 12px;
}

.attention-item__main > span {
    color: var(--text-faint);
    font-size: 10px;
}

.button {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 0;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 750;
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    color: #fff;
    background: var(--primary);
    box-shadow: 0 10px 22px rgba(73, 103, 255, .24);
}

.button--primary:hover {
    background: var(--primary-dark);
}

.button--soft {
    color: var(--primary);
    background: var(--primary-soft);
}

.button--large {
    min-height: 50px;
}

.button--full {
    width: 100%;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.status-badge--danger {
    color: #b3313c;
    background: var(--danger-soft);
}

.status-badge--warning {
    color: #a56c0a;
    background: var(--warning-soft);
}

.status-badge--success {
    color: #087549;
    background: var(--success-soft);
}

.status-badge--muted {
    color: #667085;
    background: var(--surface-muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.metric-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.metric-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-soft);
    font-size: 12px;
}

.metric-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: var(--primary-soft);
}

.metric-icon--danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.metric-card__number {
    display: block;
    margin: 14px 0 9px;
    font-size: 30px;
    letter-spacing: -.05em;
}

.metric-card__foot {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--text-faint);
    font-size: 10px;
}

.metric-card__foot .icon {
    width: 12px;
    height: 12px;
}

.metric-card__foot--positive {
    color: var(--success);
}

.metric-card__foot--danger {
    color: var(--danger);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .8fr);
    gap: 16px;
    margin-bottom: 22px;
}

.panel--chart {
    min-height: 370px;
}

.line-chart {
    height: 260px;
    display: grid;
    grid-template-columns: 44px 1fr;
    margin-top: 10px;
}

.chart-y-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1px 9px 29px 0;
    color: var(--text-faint);
    font-size: 10px;
    text-align: right;
}

.chart-area {
    min-width: 0;
    position: relative;
}

.chart-area svg {
    width: 100%;
    height: calc(100% - 26px);
    overflow: visible;
}

.chart-line {
    fill: none;
    stroke: var(--primary);
    stroke-width: 4;
    stroke-linecap: round;
}

.chart-fill {
    fill: url(#chartFill);
}

.chart-area circle {
    fill: #fff;
    stroke: var(--primary);
    stroke-width: 4;
}

.chart-grid-line {
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    background: var(--line);
}

.chart-grid-line--1 { top: 0; }
.chart-grid-line--2 { top: 25%; }
.chart-grid-line--3 { top: 50%; }
.chart-grid-line--4 { top: 75%; }

.chart-x-labels {
    display: flex;
    justify-content: space-between;
    color: var(--text-faint);
    font-size: 10px;
}

.priority-list {
    display: grid;
    gap: 11px;
}

.priority-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.priority-item:hover {
    transform: translateY(-2px);
    border-color: #cbd3e8;
    box-shadow: var(--shadow-sm);
}

.priority-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 12px;
    font-weight: 850;
}

.priority-item strong {
    font-size: 12px;
}

.priority-item p {
    margin: 3px 0 0;
    color: var(--text-soft);
    font-size: 10px;
}

.team-section {
    margin-bottom: 20px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.team-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fcfcfe;
}

.team-card__header,
.team-card__header > div {
    display: flex;
    align-items: center;
}

.team-card__header {
    justify-content: space-between;
    gap: 12px;
}

.team-card__header > div {
    min-width: 0;
    gap: 10px;
}

.team-card__avatar {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 11px;
    font-weight: 850;
}

.team-card__header div div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.team-card__header strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-card__header span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 10px;
}

.trend {
    color: var(--success) !important;
    font-size: 10px !important;
    font-weight: 800;
}

.trend--down {
    color: var(--danger) !important;
}

.team-score {
    margin: 20px 0;
}

.team-score > div:first-child,
.kpi-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.team-score span,
.kpi-item span {
    color: var(--text-soft);
    font-size: 11px;
}

.team-score strong,
.kpi-item strong {
    font-size: 12px;
}

.progress-track {
    height: 7px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e9ecf5;
}

.progress-track span {
    width: var(--progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #657aff, #3e5df3);
    animation: progressGrow 800ms ease both;
}

@keyframes progressGrow {
    from { width: 0; }
}

.team-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.team-card__stats div {
    display: flex;
    flex-direction: column;
}

.team-card__stats span {
    color: var(--text-faint);
    font-size: 9px;
}

.team-card__stats strong {
    margin-top: 4px;
    font-size: 11px;
}

.team-card__link {
    display: inline-block;
    margin-top: 13px;
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
}

.staff-summary-grid {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 16px;
    margin-bottom: 22px;
}

.progress-ring-card,
.profile-status-card {
    padding: 22px;
}

.progress-ring-card {
    display: flex;
    align-items: center;
    gap: 24px;
}

.progress-ring {
    width: 138px;
    height: 138px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--primary) calc(var(--value) * 1%), #e8ebf4 0);
}

.progress-ring::before {
    content: "";
    width: 106px;
    height: 106px;
    position: absolute;
    border-radius: 50%;
    background: #fff;
}

.progress-ring > div {
    z-index: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.progress-ring strong {
    font-size: 27px;
    letter-spacing: -.05em;
}

.progress-ring span {
    color: var(--text-soft);
    font-size: 10px;
}

.progress-ring-card h2 {
    margin: 6px 0;
    font-size: 21px;
}

.progress-ring-card p,
.profile-status-card blockquote {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
}

.profile-status-card__header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.profile-status-card__header div:last-child {
    display: flex;
    flex-direction: column;
}

.profile-status-card__header strong {
    font-size: 13px;
}

.profile-status-card__header span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10px;
}

.profile-status-card blockquote {
    padding: 13px;
    margin: 18px 0 13px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.profile-status-card a {
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
}

.task-table {
    overflow-x: auto;
}

.task-row {
    min-width: 760px;
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(100px, .7fr));
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    border-top: 1px solid var(--line);
    color: #475467;
    font-size: 11px;
}

.task-row--head {
    border: 0;
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 10px;
    font-weight: 800;
}

.task-row div {
    display: flex;
    flex-direction: column;
}

.task-row strong {
    color: var(--text);
    font-size: 12px;
}

.task-row small {
    margin-top: 4px;
    color: var(--text-faint);
}

.kpi-list {
    display: grid;
    gap: 19px;
    margin-top: 25px;
}

.communication-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.communication-card__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
}

.communication-card strong {
    font-size: 11px;
}

.communication-card p {
    margin: 4px 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.communication-card span {
    color: var(--text-faint);
    font-size: 9px;
}

.placeholder-page {
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.placeholder-page__icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    border-radius: 22px;
    color: var(--primary);
    background: var(--primary-soft);
}

.placeholder-page__icon .icon {
    width: 36px;
    height: 36px;
}

.placeholder-page h2 {
    margin: 8px 0;
    font-size: 28px;
}

.placeholder-page > p {
    max-width: 590px;
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.placeholder-page__notes {
    width: 100%;
    max-width: 520px;
    padding: 18px;
    margin: 24px 0;
    border-radius: 16px;
    background: var(--surface-soft);
    text-align: left;
}

.placeholder-page__notes strong {
    font-size: 12px;
}

.placeholder-page__notes ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.8;
}

.auth-page {
    background: #f5f6fb;
}

.auth-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1.08fr) minmax(420px, .92fr);
}

.auth-visual {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    padding: 42px 56px;
    color: #fff;
    background:
        radial-gradient(circle at 25% 15%, rgba(119, 138, 255, .32), transparent 27%),
        linear-gradient(145deg, #11182a, #1d2d65 65%, #314cbb);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    z-index: 2;
}

.auth-brand div:last-child {
    display: flex;
    flex-direction: column;
}

.auth-brand strong {
    font-size: 14px;
}

.auth-brand span {
    margin-top: 3px;
    color: #aeb9df;
    font-size: 11px;
}

.auth-visual__content {
    max-width: 600px;
    margin: auto 0;
    z-index: 2;
}

.auth-label {
    display: inline-flex;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: #cdd5fb;
    background: rgba(255, 255, 255, .07);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.auth-visual h1 {
    margin: 22px 0 18px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: 1.04;
    letter-spacing: -.055em;
}

.auth-visual p {
    max-width: 550px;
    margin: 0;
    color: #c2cbea;
    line-height: 1.8;
}

.auth-feature-list {
    display: grid;
    gap: 11px;
    margin-top: 30px;
}

.auth-feature-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e4e8fb;
    font-size: 12px;
}

.auth-feature-list .icon {
    width: 18px;
    height: 18px;
    color: #88e5bd;
}

.auth-decoration {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 50%;
}

.auth-decoration--one {
    width: 480px;
    height: 480px;
    right: -230px;
    bottom: -170px;
}

.auth-decoration--two {
    width: 260px;
    height: 260px;
    right: -100px;
    bottom: -55px;
}

.auth-form-area {
    display: grid;
    place-items: center;
    padding: 45px;
}

.auth-card {
    width: min(100%, 430px);
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-md);
}

.auth-card__header {
    margin-bottom: 25px;
}

.auth-card h2 {
    margin: 7px 0;
    font-size: 29px;
    letter-spacing: -.045em;
}

.auth-card__header p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}

.form-field {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
}

.form-field > span {
    color: #344054;
    font-size: 11px;
    font-weight: 750;
}

.form-field input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #dce1eb;
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-field input:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}

.password-field {
    display: flex;
    position: relative;
}

.password-field input {
    padding-right: 100px;
}

.password-field button {
    position: absolute;
    inset: 0 10px 0 auto;
    border: 0;
    color: var(--primary);
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.demo-account {
    padding: 13px;
    margin-top: 18px;
    border-radius: 12px;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 10px;
    line-height: 1.6;
}

.demo-account strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
}

.demo-account p {
    margin: 2px 0;
}

.install-page,
.error-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 15%, rgba(73, 103, 255, .12), transparent 28%),
        var(--bg);
}

.install-card,
.error-card {
    width: min(100%, 540px);
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.install-card .brand-mark {
    margin: 0 auto 18px;
}

.install-card h1,
.error-card h1 {
    margin: 8px 0;
    letter-spacing: -.045em;
}

.install-card > p,
.error-card p {
    margin: 0 0 22px;
    color: var(--text-soft);
    line-height: 1.6;
}

.install-card small {
    display: block;
    margin-top: 18px;
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.5;
}

.install-credentials {
    display: grid;
    gap: 3px;
    padding: 13px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--surface-soft);
    font-size: 11px;
}

.error-card > span {
    color: var(--primary);
    font-size: 64px;
    font-weight: 900;
}

.sidebar-overlay {
    display: none;
}

.sidebar-collapsed .sidebar {
    width: var(--sidebar-mini);
}

.sidebar-collapsed .main-area {
    margin-left: var(--sidebar-mini);
}

.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-item__label,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .nav-drawer__chevron,
.sidebar-collapsed .profile-copy {
    width: 0;
    opacity: 0;
    pointer-events: none;
}

.sidebar-collapsed .sidebar__brand {
    justify-content: center;
    padding-inline: 12px;
}

.sidebar-collapsed .sidebar__toggle .icon {
    transform: rotate(180deg);
}

.sidebar-collapsed .nav-item {
    justify-content: center;
    padding-inline: 0;
}

.sidebar-collapsed .nav-drawer__content {
    display: none;
}

.sidebar-collapsed .sidebar__profile {
    justify-content: center;
    padding-inline: 10px;
}

.sidebar-collapsed .profile-logout {
    display: none;
}

.sidebar-collapsed .nav-item[data-tooltip] {
    position: relative;
}

.sidebar-collapsed .nav-item[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: fixed;
    left: 92px;
    z-index: 100;
    padding: 8px 10px;
    border-radius: 8px;
    color: #fff;
    background: #11182a;
    box-shadow: var(--shadow-md);
    font-size: 11px;
}

.sidebar-mini-flyout[hidden] {
    display: none !important;
}

.sidebar-mini-flyout {
    position: fixed;
    z-index: 110;
    width: min(280px, calc(100vw - var(--sidebar-mini) - 34px));
    max-height: min(70vh, 520px);
    padding: 9px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 15px;
    color: #e9edff;
    background: #11182a;
    box-shadow: 0 18px 44px rgba(10, 15, 29, .28);
}

.sidebar-mini-flyout::before {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 12px;
    height: 100%;
}

.sidebar-mini-flyout__heading {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 5px 9px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-mini-flyout__heading strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-mini-flyout__links {
    max-height: min(calc(70vh - 58px), 462px);
    display: grid;
    gap: 3px;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-mini-flyout__link {
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #aeb8d8;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.35;
    transition: color var(--transition), background var(--transition);
}

.sidebar-mini-flyout__link:hover,
.sidebar-mini-flyout__link:focus-visible,
.sidebar-mini-flyout__link.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.sidebar-mini-flyout__link:focus-visible {
    outline: 2px solid #91a0ff;
    outline-offset: -2px;
}

.sidebar-mini-flyout__link--single {
    min-height: 44px;
    font-size: 13px;
    font-weight: 750;
}

.sidebar-mini-flyout .nav-badge {
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .topbar-user__copy {
        display: none;
    }
}

@media (max-width: 900px) {
    .sidebar,
    .sidebar-collapsed .sidebar {
        width: min(86vw, 300px);
        transform: translateX(-102%);
    }

    .mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .main-area,
    .sidebar-collapsed .main-area {
        margin-left: 0;
    }

    .sidebar-collapsed .brand-copy,
    .sidebar-collapsed .nav-item__label,
    .sidebar-collapsed .nav-badge,
    .sidebar-collapsed .nav-drawer__chevron,
    .sidebar-collapsed .profile-copy {
        width: auto;
        opacity: 1;
        pointer-events: auto;
    }

    .sidebar-collapsed .profile-logout {
        display: grid;
    }

    .sidebar-collapsed .nav-item {
        justify-content: flex-start;
        padding-inline: 13px;
    }

    .sidebar-collapsed .nav-drawer__content {
        display: grid;
    }

    .sidebar-mini-flyout {
        display: none !important;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        visibility: hidden;
        opacity: 0;
        background: rgba(10, 15, 29, .54);
        transition: opacity var(--transition), visibility var(--transition);
    }

    .mobile-sidebar-open .sidebar-overlay {
        visibility: visible;
        opacity: 1;
    }

    .mobile-menu-button {
        display: grid;
    }

    .sidebar__toggle {
        display: none;
    }

    .topbar {
        min-height: 74px;
        padding: 12px 18px;
    }

    .topbar__eyebrow {
        display: none;
    }

    .topbar h1 {
        font-size: 18px;
    }

    .filter-button,
    .desktop-only,
    .topbar-user {
        display: none;
    }

    .page-content {
        padding: 20px 18px 40px;
    }

    .dashboard-grid,
    .staff-summary-grid {
        grid-template-columns: 1fr;
    }

    .auth-layout {
        display: block;
    }

    .auth-visual {
        min-height: auto;
        padding: 32px 24px 48px;
    }

    .auth-visual__content {
        margin: 70px 0 10px;
    }

    .auth-visual h1 {
        font-size: 42px;
    }

    .auth-form-area {
        padding: 28px 18px 50px;
    }
}

@media (max-width: 680px) {
    .welcome-panel {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .welcome-panel__time,
    .countdown-card {
        width: 100%;
    }

    .metric-grid,
    .team-grid {
        grid-template-columns: 1fr;
    }

    .attention-item {
        grid-template-columns: auto 1fr;
    }

    .attention-item .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .progress-ring-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .auth-card {
        padding: 26px 22px;
    }

    .auth-visual h1 {
        font-size: 35px;
    }
}

/* Tahap 2: management pages */
.management-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 26px;
    margin-bottom: 18px;
    border: 1px solid #dfe4f2;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #ffffff, #f7f8ff);
    box-shadow: var(--shadow-sm);
}

.management-hero h2 {
    margin: 5px 0 7px;
    font-size: 24px;
    letter-spacing: -.035em;
}

.management-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.7;
}

.management-hero .button,
.management-form .button,
.management-team-card__actions .button {
    gap: 7px;
}

.management-hero .button .icon,
.management-form .button .icon,
.management-team-card__actions .button .icon {
    width: 16px;
    height: 16px;
}

.compact-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 18px;
}

.compact-metric-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.compact-metric > span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 700;
}

.compact-metric strong {
    margin: 7px 0 4px;
    font-size: 25px;
    letter-spacing: -.04em;
}

.compact-metric small {
    color: var(--text-faint);
    font-size: 9px;
}

.page-tabs {
    display: inline-flex;
    gap: 5px;
    padding: 5px;
    margin-bottom: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.page-tab {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 10px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 750;
}

.page-tab .icon {
    width: 17px;
    height: 17px;
}

.page-tab.is-active {
    color: var(--primary);
    background: var(--primary-soft);
}

.management-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(310px, .65fr);
    align-items: start;
    gap: 16px;
}

.management-list-panel,
.management-form-panel {
    min-width: 0;
}

.management-form-panel {
    position: sticky;
    top: 108px;
}

.section-heading--wrap {
    align-items: center;
    flex-wrap: wrap;
}

.management-filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.management-filter--compact {
    flex-wrap: nowrap;
}

.management-filter select,
.management-form select,
.management-form textarea {
    min-height: 42px;
    padding: 0 11px;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    outline: none;
    color: var(--text);
    background: #fff;
    font-size: 11px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.management-filter select {
    min-width: 120px;
}

.management-form textarea {
    width: 100%;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.6;
}

.management-filter select:focus,
.management-form select:focus,
.management-form textarea:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}

.search-field {
    min-width: 220px;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    background: #fff;
}

.search-field .icon {
    width: 17px;
    height: 17px;
    color: var(--text-faint);
}

.search-field input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font-size: 11px;
}

.data-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.data-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 14px 15px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:hover {
    background: #fbfcff;
}

.table-actions-heading {
    width: 100px;
    text-align: right !important;
}

.table-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-avatar--table {
    width: 38px;
    height: 38px;
    font-size: 11px;
}

.table-user > div:last-child,
.table-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.table-user strong,
.table-stack strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-user span,
.table-stack span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 9px;
}

.role-chip {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
}

.role-chip--manager {
    color: #5b3fc2;
    background: #f1edff;
}

.role-chip--staff {
    color: #2267a8;
    background: #eaf4ff;
}

.status-dot-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.status-dot-label i {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 50%;
}

.status-dot-label.is-active i {
    background: var(--success);
    box-shadow: 0 0 0 4px var(--success-soft);
}

.status-dot-label.is-inactive i {
    background: var(--text-faint);
    box-shadow: 0 0 0 4px var(--surface-muted);
}

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.table-actions form,
.management-team-card__actions form,
.position-row__actions form {
    margin: 0;
}

.table-action {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--primary);
    background: #fff;
}

.table-action .icon {
    width: 15px;
    height: 15px;
}

.table-action:hover {
    border-color: #c7cfea;
    background: var(--primary-soft);
}

.table-action--danger {
    color: var(--danger);
}

.table-action--success {
    color: var(--success);
}

.table-action:disabled {
    cursor: not-allowed;
    opacity: .35;
}

.form-close {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--text-soft);
    background: var(--surface-muted);
    font-size: 20px;
    line-height: 1;
}

.management-form .form-field {
    margin-bottom: 14px;
}

.management-form .form-field small {
    margin-top: -2px;
    color: var(--text-faint);
    font-size: 9px;
    line-height: 1.5;
}

.management-form .form-field.is-optional > span::after {
    content: " — opsional";
    color: var(--text-faint);
    font-weight: 500;
}

.form-grid {
    display: grid;
    gap: 12px;
}

.form-grid--2 {
    grid-template-columns: 1fr 1fr;
}

.switch-field {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 11px;
    position: relative;
    padding: 13px;
    margin: 4px 0 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    cursor: pointer;
}

.switch-field input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control {
    width: 40px;
    height: 23px;
    position: relative;
    border-radius: 999px;
    background: #cbd2e0;
    transition: background var(--transition);
}

.switch-control::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(17, 24, 42, .2);
    transition: transform var(--transition);
}

.switch-field input:checked + .switch-control {
    background: var(--primary);
}

.switch-field input:checked + .switch-control::after {
    transform: translateX(17px);
}

.switch-field > span:last-of-type {
    display: flex;
    flex-direction: column;
}

.switch-field strong {
    font-size: 10px;
}

.switch-field small {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 9px;
}

.form-notice {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 12px;
    margin-bottom: 16px;
    border-radius: 12px;
    color: #855806;
    background: var(--warning-soft);
}

.form-notice .icon {
    width: 17px;
    height: 17px;
}

.form-notice p {
    margin: 0;
    font-size: 9px;
    line-height: 1.55;
}

.empty-state {
    padding: 35px 20px;
    color: var(--text-faint);
    font-size: 11px;
    text-align: center;
}

.team-management-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.management-team-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fcfcfe;
}

.management-team-card.is-disabled,
.position-row.is-disabled {
    opacity: .65;
}

.management-team-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.management-team-card h3 {
    margin: 14px 0 6px;
    font-size: 14px;
}

.management-team-card > p {
    min-height: 38px;
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.management-team-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 13px 0;
    margin-top: 14px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.management-team-card__stats div {
    display: flex;
    flex-direction: column;
}

.management-team-card__stats strong {
    font-size: 15px;
}

.management-team-card__stats span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 9px;
}

.management-team-card__actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 13px;
}

.button--ghost {
    color: var(--text-soft);
    background: transparent;
}

.button--danger-text {
    color: var(--danger);
}

.button--success-text {
    color: var(--success);
}

.position-list {
    display: grid;
    gap: 9px;
}

.position-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fcfcfe;
}

.position-row__icon {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--primary);
    background: var(--primary-soft);
}

.position-row__main {
    min-width: 0;
}

.position-row__title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.position-row__title > strong {
    font-size: 12px;
}

.position-row__main p {
    margin: 5px 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.position-row__meta {
    display: flex;
    gap: 14px;
    color: var(--text-faint);
    font-size: 9px;
}

.position-row__actions {
    display: flex;
    gap: 6px;
}

@media (max-width: 1180px) {
    .management-layout {
        grid-template-columns: 1fr;
    }

    .management-form-panel {
        position: static;
    }
}

@media (max-width: 900px) {
    .compact-metric-grid,
    .compact-metric-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .management-filter {
        width: 100%;
        justify-content: flex-start;
    }

    .search-field {
        flex: 1;
    }
}

@media (max-width: 680px) {
    .management-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .management-hero .button {
        width: 100%;
    }

    .compact-metric-grid,
    .compact-metric-grid--3,
    .team-management-grid,
    .form-grid--2 {
        grid-template-columns: 1fr;
    }

    .page-tabs {
        width: 100%;
    }

    .page-tab {
        flex: 1;
        justify-content: center;
    }

    .management-filter,
    .management-filter--compact {
        display: grid;
        grid-template-columns: 1fr;
    }

    .search-field,
    .management-filter select,
    .management-filter .button {
        width: 100%;
    }

    .position-row {
        grid-template-columns: auto 1fr;
    }

    .position-row__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

/* Tahap 3: Target Setup */
.target-management-layout {
    grid-template-columns: minmax(0, 1.45fr) minmax(360px, .7fr);
}

.target-filter {
    max-width: 100%;
    flex-wrap: wrap;
}

.target-filter .search-field {
    min-width: 220px;
    flex: 1 1 220px;
}

.target-filter select {
    min-width: 128px;
}

.target-template-list {
    display: grid;
    gap: 12px;
}

.target-template-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fcfcfe;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.target-template-card:hover {
    transform: translateY(-2px);
    border-color: #cbd3e8;
    box-shadow: var(--shadow-sm);
}

.target-template-card.is-disabled {
    opacity: .62;
}

.target-template-card__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    padding: 16px 16px 13px;
}

.target-template-card__icon {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

.target-template-card__icon--percentage,
.target-template-card__icon--ratio {
    color: #7a4be6;
    background: #f1ebff;
}

.target-template-card__icon--currency {
    color: var(--success);
    background: var(--success-soft);
}

.target-template-card__icon--duration {
    color: var(--warning);
    background: var(--warning-soft);
}

.target-template-card__icon--status {
    color: #2486a8;
    background: #e8f7fb;
}

.target-template-card__copy {
    min-width: 0;
}

.target-template-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.target-template-card__title > strong {
    font-size: 13px;
}

.target-template-card__copy > p {
    margin: 6px 0 10px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.target-template-card__scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.target-template-card__scope strong {
    font-size: 10px;
}

.target-template-card__scope small {
    color: var(--text-faint);
    font-size: 9px;
}

.mini-chip {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #5d6a85;
    background: var(--surface-muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.mini-chip--required {
    color: #9d6809;
    background: var(--warning-soft);
}

.target-template-card__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--line);
}

.target-template-card__metrics > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: #fff;
}

.target-template-card__metrics span {
    color: var(--text-faint);
    font-size: 8px;
}

.target-template-card__metrics strong {
    overflow: hidden;
    margin-top: 4px;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.target-template-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

.target-template-card__rules {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--text-faint);
    font-size: 8px;
}

.target-template-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.target-template-card__actions form {
    margin: 0;
}

.target-template-card__actions .button .icon {
    width: 14px;
    height: 14px;
    margin-right: 5px;
}

.target-form-panel {
    max-height: calc(100vh - 118px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cfd5e4 transparent;
}

.form-section-title {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 13px 0 9px;
    margin-top: 3px;
    border-top: 1px solid var(--line);
}

.form-section-title > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 850;
}

.form-section-title > div {
    display: flex;
    flex-direction: column;
}

.form-section-title strong {
    font-size: 10px;
}

.form-section-title small {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.45;
}

.form-helper {
    padding: 9px 11px;
    margin: -4px 0 13px;
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 8px;
    line-height: 1.55;
}

.input-suffix {
    display: flex;
    position: relative;
}

.input-suffix input {
    padding-right: 46px;
}

.input-suffix > span {
    width: 38px;
    display: grid;
    place-items: center;
    position: absolute;
    inset: 1px 1px 1px auto;
    border-left: 1px solid var(--line);
    border-radius: 0 11px 11px 0;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 10px;
    font-weight: 800;
}

.day-picker {
    padding: 13px;
    margin: 0 0 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.day-picker legend {
    padding: 0 5px;
    color: #344054;
    font-size: 9px;
    font-weight: 800;
}

.day-picker__options {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.day-picker__options label {
    cursor: pointer;
}

.day-picker__options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.day-picker__options span {
    min-height: 33px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-soft);
    background: #fff;
    font-size: 8px;
    font-weight: 800;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.day-picker__options input:checked + span {
    color: #fff;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 6px 14px rgba(73, 103, 255, .20);
}

.day-picker__options label:hover span {
    transform: translateY(-1px);
}

.day-picker__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.day-picker__presets button {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--primary);
    background: #fff;
    font-size: 8px;
    font-weight: 750;
}

.day-picker__presets button:hover {
    border-color: #bfc9f3;
    background: var(--primary-soft);
}

.form-notice--info {
    color: #315bb3;
    background: #edf3ff;
}

.empty-state--target {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 55px 20px;
}

.empty-state--target strong {
    margin-top: 10px;
    color: var(--text);
    font-size: 12px;
}

.empty-state--target p {
    margin: 5px 0 0;
}

.empty-state__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

[hidden] {
    display: none !important;
}

@media (max-width: 1320px) {
    .target-management-layout {
        grid-template-columns: 1fr;
    }

    .target-form-panel {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 900px) {
    .target-template-card__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .target-template-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .target-template-card__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .target-filter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .target-filter .search-field,
    .target-filter select,
    .target-filter .button {
        width: 100%;
        min-width: 0;
    }

    .target-template-card__metrics {
        grid-template-columns: 1fr 1fr;
    }

    .target-template-card__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .target-template-card__actions .button {
        width: 100%;
    }

    .day-picker__options {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.management-form select {
    width: 100%;
}

/* ==============================
   Tahap 4: Daily Check
   ============================== */

.status-badge--info {
    color: #315bb3;
    background: #edf3ff;
}

.attention-item__icon--success,
.status-icon--success {
    color: var(--success);
    background: var(--success-soft);
}

.attention-item__icon--info,
.status-icon--info {
    color: #4967d9;
    background: #edf3ff;
}

.attention-item__icon--danger,
.status-icon--danger {
    color: var(--danger);
    background: var(--danger-soft);
}

.attention-item__icon--warning,
.status-icon--warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.attention-item__icon--muted,
.status-icon--muted {
    color: var(--text-soft);
    background: var(--surface-muted);
}

.chart-note {
    margin: 8px 0 0;
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.55;
}

.daily-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 27px;
    margin-bottom: 18px;
    border: 1px solid #d9e1ff;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 86% 25%, rgba(73, 103, 255, .10), transparent 26%),
        linear-gradient(135deg, #ffffff, #f4f6ff);
    box-shadow: var(--shadow-sm);
}

.daily-hero--locked {
    border-color: #e0e4ec;
    background: linear-gradient(135deg, #fff, #f7f8fb);
}

.daily-hero h2 {
    margin: 6px 0 7px;
    font-size: 27px;
    letter-spacing: -.04em;
}

.daily-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.65;
}

.daily-hero__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.date-nav-button {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--primary);
    background: #fff;
    font-weight: 850;
    box-shadow: 0 6px 14px rgba(26, 39, 75, .04);
}

.date-nav-button:hover {
    border-color: #bac5ee;
    background: var(--primary-soft);
}

.date-nav-button.is-disabled {
    color: var(--text-faint);
    background: var(--surface-muted);
    cursor: not-allowed;
}

.date-filter-form input,
.daily-manager-filter input,
.daily-manager-filter select,
.daily-target-card select,
.daily-target-card textarea {
    border: 1px solid #dce1eb;
    outline: none;
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.date-filter-form input {
    min-height: 39px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
}

.date-filter-form input:focus,
.daily-manager-filter input:focus,
.daily-manager-filter select:focus,
.daily-target-card select:focus,
.daily-target-card textarea:focus,
.daily-value-input input:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}

.lock-notice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    margin-bottom: 18px;
    border: 1px solid #e0e4ec;
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.lock-notice__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #667085;
    background: var(--surface-muted);
}

.lock-notice strong {
    font-size: 12px;
}

.lock-notice p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.daily-summary-grid {
    margin-bottom: 18px;
}

.compact-metric--danger strong {
    color: var(--danger);
}

.empty-daily-state {
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.empty-daily-state h2 {
    margin: 14px 0 6px;
    font-size: 21px;
}

.empty-daily-state p {
    max-width: 590px;
    margin: 0 0 18px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.65;
}

.daily-check-form {
    padding-bottom: 92px;
}

.daily-target-list {
    display: grid;
    gap: 15px;
}

.daily-target-card {
    overflow: hidden;
    position: relative;
    padding: 19px;
    border: 1px solid var(--line);
    border-left: 4px solid #c7cedd;
    border-radius: 17px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.status-border--success { border-left-color: var(--success); }
.status-border--info { border-left-color: #5d79e8; }
.status-border--warning { border-left-color: var(--warning); }
.status-border--danger { border-left-color: var(--danger); }
.status-border--muted { border-left-color: #c7cedd; }

.daily-target-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
}

.daily-target-card__number {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 11px;
    font-weight: 850;
}

.daily-target-card__title > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.daily-target-card__title strong {
    font-size: 14px;
}

.daily-target-card__title p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.daily-target-card__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
    margin: 16px 0;
    border-radius: 13px;
    background: var(--surface-soft);
}

.daily-target-card__meta > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.daily-target-card__meta span {
    color: var(--text-faint);
    font-size: 8px;
}

.daily-target-card__meta strong {
    overflow: hidden;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.daily-target-card__input-grid {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(220px, 1fr) minmax(220px, 1fr);
    gap: 12px;
}

.daily-target-card .form-field {
    margin: 0;
}

.daily-target-card .form-field > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.daily-target-card .form-field em {
    color: var(--text-faint);
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
}

.daily-target-card select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    border-radius: 11px;
    color: var(--text);
    font-size: 11px;
}

.daily-target-card textarea {
    width: 100%;
    min-height: 82px;
    resize: vertical;
    padding: 11px 12px;
    border-radius: 11px;
    color: var(--text);
    font-size: 10px;
    line-height: 1.5;
}

.daily-target-card input:disabled,
.daily-target-card select:disabled,
.daily-target-card textarea:disabled {
    color: #667085;
    background: #f3f5f8;
    cursor: not-allowed;
}

.daily-value-input {
    display: flex;
    position: relative;
}

.daily-value-input input {
    width: 100%;
    min-height: 48px;
    padding: 0 88px 0 13px;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    outline: none;
    color: var(--text);
    background: #fff;
}

.daily-value-input > span {
    max-width: 80px;
    display: grid;
    place-items: center;
    position: absolute;
    inset: 1px 1px 1px auto;
    padding: 0 10px;
    border-left: 1px solid var(--line);
    border-radius: 0 10px 10px 0;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 9px;
    font-weight: 800;
}

.daily-actual-field small {
    color: var(--text-faint);
    font-size: 8px;
}

.daily-result-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 13px;
    margin-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 9px;
}

.daily-result-strip strong {
    color: var(--text);
}

.daily-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    position: fixed;
    right: 30px;
    bottom: 18px;
    left: calc(var(--sidebar-width) + 30px);
    z-index: 24;
    padding: 13px 15px;
    border: 1px solid #d8def3;
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 50px rgba(26, 39, 75, .16);
    backdrop-filter: blur(14px);
    transition: left var(--transition);
}

.sidebar-collapsed .daily-submit-bar {
    left: calc(var(--sidebar-mini) + 30px);
}

.daily-submit-bar > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-soft);
    font-size: 10px;
}

.daily-submit-bar > div .icon {
    color: var(--primary);
}

.daily-submit-bar .button .icon {
    width: 16px;
    height: 16px;
    margin-right: 7px;
}

.daily-manager-hero {
    align-items: center;
}

.daily-lock-chip {
    min-width: 175px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid #cdd7ff;
    border-radius: 14px;
    color: #3651d8;
    background: #edf1ff;
}

.daily-lock-chip.is-locked {
    color: #667085;
    border-color: #e0e4ec;
    background: #f1f3f7;
}

.daily-lock-chip > div {
    display: flex;
    flex-direction: column;
}

.daily-lock-chip span {
    font-size: 8px;
}

.daily-lock-chip strong {
    margin-top: 3px;
    font-size: 12px;
}

.daily-filter-panel {
    padding: 15px 18px;
    margin-bottom: 18px;
}

.daily-manager-filter {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
}

.daily-manager-filter label {
    min-width: 170px;
    display: grid;
    gap: 6px;
}

.daily-manager-filter label > span {
    color: var(--text-soft);
    font-size: 8px;
    font-weight: 800;
}

.daily-manager-filter input,
.daily-manager-filter select {
    width: 100%;
    min-height: 41px;
    padding: 0 11px;
    border-radius: 10px;
    color: var(--text);
    font-size: 10px;
}

.manager-attention-panel {
    margin-bottom: 20px;
}

.attention-clear-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px dashed #bddfce;
    border-radius: 14px;
    color: var(--success);
    background: #f4fbf7;
}

.attention-clear-state .icon {
    width: 25px;
    height: 25px;
}

.attention-clear-state div {
    display: flex;
    flex-direction: column;
}

.attention-clear-state strong {
    color: #0d714a;
    font-size: 11px;
}

.attention-clear-state p {
    margin: 4px 0 0;
    color: #54816c;
    font-size: 9px;
}

.manager-daily-attention-list {
    display: grid;
    gap: 9px;
}

.manager-daily-attention {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fcfcfe;
}

.manager-daily-attention__icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.manager-daily-attention__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.manager-daily-attention__title strong {
    font-size: 11px;
}

.manager-daily-attention p {
    margin: 4px 0;
    color: var(--text-soft);
    font-size: 9px;
}

.manager-daily-attention small {
    color: var(--text-faint);
    font-size: 8px;
}

.manager-daily-attention blockquote {
    padding: 7px 9px;
    margin: 8px 0 0;
    border-left: 3px solid var(--warning);
    border-radius: 0 8px 8px 0;
    color: #765418;
    background: var(--warning-soft);
    font-size: 8px;
}

.text-muted-small {
    color: var(--text-faint);
    font-size: 9px;
}

.manager-team-list {
    display: grid;
    gap: 16px;
}

.manager-team-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.manager-team-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px 14px;
}

.manager-team-identity {
    display: flex;
    align-items: center;
    gap: 11px;
}

.manager-team-identity > div {
    display: flex;
    flex-direction: column;
}

.manager-team-identity strong {
    font-size: 13px;
}

.manager-team-identity span:not(.team-card__avatar) {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 9px;
}

.manager-team-card__summary {
    display: flex;
    align-items: center;
    gap: 24px;
}

.manager-team-card__summary > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.manager-team-card__summary span {
    color: var(--text-faint);
    font-size: 8px;
}

.manager-team-card__summary strong {
    margin-top: 3px;
    font-size: 12px;
}

.team-progress-line {
    height: 5px;
    overflow: hidden;
    background: #edf0f5;
}

.team-progress-line span {
    width: var(--progress);
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #657aff, #405ff1);
    animation: progressGrow 800ms ease both;
}

.manager-member-list {
    padding: 0 13px 13px;
    background: #fafbfe;
}

.manager-member-card {
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.manager-member-card + .manager-member-card {
    margin-top: 8px;
}

.manager-member-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 14px;
    cursor: pointer;
    list-style: none;
}

.manager-member-card summary::-webkit-details-marker {
    display: none;
}

.member-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.member-identity > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.member-identity strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-identity span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 8px;
}

.member-daily-stats {
    display: flex;
    align-items: center;
    gap: 21px;
}

.member-daily-stats > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.member-daily-stats span {
    color: var(--text-faint);
    font-size: 7px;
}

.member-daily-stats strong {
    margin-top: 2px;
    font-size: 10px;
}

.member-expand-icon {
    color: var(--text-faint);
    transition: transform var(--transition);
}

.manager-member-card[open] .member-expand-icon {
    transform: rotate(180deg);
}

.member-no-target {
    padding: 13px 15px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
}

.member-no-target strong {
    color: var(--text);
    font-size: 9px;
}

.member-no-target p {
    margin: 4px 0 0;
    font-size: 8px;
}

.manager-item-table {
    overflow-x: auto;
    border-top: 1px solid var(--line);
}

.manager-item-row {
    min-width: 760px;
    display: grid;
    grid-template-columns: minmax(230px, 1.55fr) repeat(4, minmax(100px, .7fr));
    align-items: center;
    gap: 11px;
    padding: 11px 14px;
    border-top: 1px solid #edf0f5;
    color: var(--text-soft);
    font-size: 9px;
}

.manager-item-row:first-child {
    border-top: 0;
}

.manager-item-row--head {
    color: var(--text-faint);
    background: var(--surface-soft);
    font-size: 8px;
    font-weight: 800;
}

.manager-item-row > div {
    display: flex;
    flex-direction: column;
}

.manager-item-row strong {
    color: var(--text);
    font-size: 10px;
}

.manager-item-row small {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 7px;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .daily-target-card__input-grid {
        grid-template-columns: 1fr 1fr;
    }

    .daily-actual-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .daily-submit-bar,
    .sidebar-collapsed .daily-submit-bar {
        right: 18px;
        left: 18px;
    }

    .daily-hero,
    .manager-team-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .manager-team-card__summary {
        width: 100%;
        justify-content: space-between;
    }

    .manager-team-card__summary > div {
        text-align: left;
    }
}

@media (max-width: 680px) {
    .daily-hero__actions,
    .daily-manager-filter,
    .daily-manager-filter label,
    .daily-manager-filter .button {
        width: 100%;
    }

    .daily-hero__actions {
        justify-content: space-between;
    }

    .date-filter-form {
        flex: 1;
    }

    .date-filter-form input {
        width: 100%;
    }

    .lock-notice,
    .manager-daily-attention {
        grid-template-columns: auto 1fr;
    }

    .lock-notice .button,
    .manager-daily-attention .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .daily-target-card__head {
        grid-template-columns: auto 1fr;
    }

    .daily-target-card__head > .status-badge {
        grid-column: 1 / -1;
        width: fit-content;
        margin-left: 52px;
    }

    .daily-target-card__meta,
    .daily-target-card__input-grid {
        grid-template-columns: 1fr;
    }

    .daily-actual-field {
        grid-column: auto;
    }

    .daily-submit-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-submit-bar .button {
        width: 100%;
    }

    .member-daily-stats {
        gap: 10px;
    }

    .member-daily-stats > div:nth-child(3) {
        display: none;
    }
}

/* =========================================================
   TAHAP 5 - REQUEST UNLOCK & APPROVAL
   ========================================================= */

.button--danger-soft {
    color: var(--danger);
    background: var(--danger-soft);
}

.button--danger-soft:hover {
    background: #ffe1e4;
}

.compact-metric--success strong {
    color: var(--success);
}

.compact-metric--warning strong {
    color: var(--warning);
}

.unlock-hero,
.unlock-manager-hero {
    align-items: center;
}

.unlock-policy-card {
    min-width: 230px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .74);
    box-shadow: var(--shadow-sm);
}

.unlock-policy-card .icon {
    width: 26px;
    height: 26px;
    color: var(--primary);
}

.unlock-policy-card > div {
    display: flex;
    flex-direction: column;
}

.unlock-policy-card span {
    color: var(--text-soft);
    font-size: 10px;
}

.unlock-policy-card strong {
    margin-top: 3px;
    font-size: 12px;
}

.unlock-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr);
    gap: 18px;
    margin-bottom: 22px;
}

.unlock-form-panel,
.unlock-date-summary,
.unlock-history-panel,
.unlock-filter-panel,
.manager-unlock-card {
    min-width: 0;
}

.unlock-date-picker {
    max-width: 320px;
    padding: 15px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.unlock-date-picker .form-field {
    margin: 0;
}

.form-grid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.unlock-request-form textarea,
.manager-unlock-decision textarea {
    min-height: 112px;
}

.unlock-request-form .form-field small {
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.5;
}

.unlock-form-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    margin: 4px 0 16px;
    border: 1px solid #f4dba3;
    border-radius: 12px;
    color: #8d620d;
    background: var(--warning-soft);
}

.unlock-form-note .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.unlock-form-note p {
    margin: 0;
    font-size: 10px;
    line-height: 1.55;
}

.empty-inline-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px dashed #cfd6e4;
    border-radius: 14px;
    color: var(--text-soft);
    background: var(--surface-soft);
}

.empty-inline-state .icon {
    width: 22px;
    height: 22px;
    color: var(--warning);
}

.empty-inline-state div {
    min-width: 0;
}

.empty-inline-state strong {
    color: var(--text);
    font-size: 12px;
}

.empty-inline-state p {
    margin: 4px 0 0;
    font-size: 10px;
    line-height: 1.5;
}

.unlock-date-summary h2 {
    margin: 7px 0 18px;
    font-size: 20px;
}

.unlock-date-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 13px;
    background: var(--primary-soft);
}

.unlock-date-stat span {
    color: var(--text-soft);
    font-size: 10px;
}

.unlock-date-stat strong {
    color: var(--primary);
    font-size: 22px;
}

.unlock-target-mini-list {
    display: grid;
    gap: 0;
    margin: 15px 0;
    border-top: 1px solid var(--line);
}

.unlock-target-mini-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line);
}

.unlock-target-mini-list span {
    overflow: hidden;
    color: var(--text);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.unlock-target-mini-list small {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: 9px;
}

.unlock-request-list,
.unlock-manager-list {
    display: grid;
    gap: 14px;
}

.unlock-request-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fcfcfe;
}

.unlock-request-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.unlock-request-card__top > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.unlock-request-card__top strong {
    font-size: 12px;
}

.unlock-request-card__top > div > span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10px;
}

.unlock-request-card > p {
    margin: 14px 0 10px;
    color: #475467;
    font-size: 11px;
    line-height: 1.65;
}

.unlock-request-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
    color: var(--text-faint);
    font-size: 9px;
}

.unlock-request-card blockquote {
    padding: 12px 13px;
    margin: 13px 0 0;
    border-left: 3px solid var(--primary);
    border-radius: 0 10px 10px 0;
    color: var(--text-soft);
    background: var(--primary-soft);
    font-size: 10px;
    line-height: 1.55;
}

.unlock-request-card__actions,
.manager-unlock-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.unlock-active-notice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 15px 17px;
    margin-bottom: 18px;
    border: 1px solid #afe4cb;
    border-radius: 16px;
    color: #075d3c;
    background: var(--success-soft);
}

.unlock-active-notice__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--success);
    background: #d8f4e7;
}

.unlock-active-notice strong {
    display: block;
    font-size: 12px;
}

.unlock-active-notice p {
    margin: 4px 0 0;
    color: #35765d;
    font-size: 10px;
    line-height: 1.5;
}

.daily-target-card--locked {
    background: #fafbfc;
}

.daily-target-card--locked .daily-target-card__input-grid {
    opacity: .68;
}

.daily-target-status-stack {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
}

.daily-target-status-stack .mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.daily-target-status-stack .mini-chip .icon {
    width: 11px;
    height: 11px;
}

.unlock-filter-panel {
    margin-bottom: 18px;
}

.unlock-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, .7fr) minmax(180px, 1fr) minmax(170px, .8fr) auto auto;
    align-items: end;
    gap: 12px;
}

.unlock-filter-toolbar label {
    display: grid;
    gap: 7px;
}

.unlock-filter-toolbar label > span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 750;
}

.unlock-filter-toolbar select,
.unlock-filter-toolbar input {
    width: 100%;
    height: 43px;
    padding: 0 12px;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    outline: none;
    color: var(--text);
    background: #fff;
}

.manager-unlock-card {
    padding: 21px;
}

.manager-unlock-card__header,
.manager-unlock-person {
    display: flex;
    align-items: center;
}

.manager-unlock-card__header {
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.manager-unlock-person {
    min-width: 0;
    gap: 11px;
}

.manager-unlock-person > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.manager-unlock-person strong {
    font-size: 13px;
}

.manager-unlock-person span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 10px;
}

.manager-unlock-card__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 17px 0;
}

.manager-unlock-card__grid > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.manager-unlock-card__grid span,
.manager-unlock-result span {
    color: var(--text-faint);
    font-size: 9px;
}

.manager-unlock-card__grid strong,
.manager-unlock-result strong {
    margin-top: 5px;
    color: var(--text);
    font-size: 10px;
    line-height: 1.45;
}

.manager-unlock-card__grid small,
.manager-unlock-result small {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 9px;
}

.manager-unlock-reason {
    padding: 14px 16px;
    margin: 0 0 16px;
    border-left: 3px solid var(--primary);
    border-radius: 0 12px 12px 0;
    background: var(--primary-soft);
}

.manager-unlock-reason span {
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.manager-unlock-reason p {
    margin: 7px 0 0;
    color: #36416a;
    font-size: 11px;
    line-height: 1.65;
}

.manager-unlock-decision {
    padding-top: 3px;
}

.manager-unlock-result {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 15px;
}

.manager-unlock-result > div {
    display: flex;
    flex-direction: column;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.manager-unlock-result__note {
    grid-column: 1 / -1;
}

.manager-unlock-result__note p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 1180px) {
    .unlock-filter-toolbar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .unlock-filter-toolbar .button {
        width: 100%;
    }

    .manager-unlock-card__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .unlock-layout {
        grid-template-columns: 1fr;
    }

    .unlock-policy-card {
        width: 100%;
    }

    .unlock-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .form-grid--two,
    .unlock-filter-toolbar,
    .manager-unlock-card__grid,
    .manager-unlock-result {
        grid-template-columns: 1fr;
    }

    .unlock-request-card__top,
    .manager-unlock-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .unlock-active-notice {
        grid-template-columns: auto 1fr;
    }

    .unlock-active-notice .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .daily-target-status-stack {
        grid-column: 1 / -1;
        align-items: flex-start;
        margin-left: 52px;
    }

    .unlock-request-card__actions .button,
    .unlock-request-card__actions form,
    .manager-unlock-actions .button,
    .manager-unlock-actions form {
        width: 100%;
    }

    .unlock-request-card__actions form .button,
    .manager-unlock-actions form .button {
        width: 100%;
    }
}

.unlock-request-form select,
.unlock-request-form textarea,
.manager-unlock-decision select,
.manager-unlock-decision textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #dce1eb;
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.unlock-request-form select,
.manager-unlock-decision select {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
}

.unlock-request-form textarea,
.manager-unlock-decision textarea {
    resize: vertical;
    line-height: 1.55;
}

.unlock-request-form select:focus,
.unlock-request-form textarea:focus,
.manager-unlock-decision select:focus,
.manager-unlock-decision textarea:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}

/* Tahap 6 — Chat dan Kendala */
.communication-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 26px;
    margin-bottom: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fff, #f6f8ff);
    box-shadow: var(--shadow-sm);
}

.communication-hero h2 {
    margin: 5px 0 7px;
    font-size: 25px;
    letter-spacing: -.04em;
}

.communication-hero p,
.form-intro {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.65;
}

.start-chat-form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.start-chat-form select,
.inline-filter select,
.chat-link-selects select,
.obstacle-filter select {
    min-height: 42px;
    padding: 0 36px 0 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: #fff;
    outline: none;
}

.chat-layout {
    min-height: 670px;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.chat-layout--staff {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1120px;
    margin: 0 auto;
}

.chat-sidebar {
    min-width: 0;
    border-right: 1px solid var(--line);
    background: #fbfcff;
}

.chat-sidebar__head {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.chat-sidebar__head h3 {
    margin: 4px 0 0;
    font-size: 17px;
}

.chat-contact-list {
    max-height: 584px;
    overflow-y: auto;
    padding: 8px;
}

.chat-contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border-radius: 13px;
    transition: background var(--transition), transform var(--transition);
}

.chat-contact:hover,
.chat-contact.is-active {
    background: var(--primary-soft);
}

.chat-contact:hover {
    transform: translateX(2px);
}

.chat-contact__copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-contact__copy strong,
.chat-contact__copy small,
.chat-contact__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact__copy strong {
    font-size: 12px;
}

.chat-contact__copy small {
    margin-top: 2px;
    color: var(--primary);
    font-size: 9px;
}

.chat-contact__copy span {
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 10px;
}

.chat-empty-small,
.empty-inline-state {
    padding: 30px 18px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.chat-panel {
    min-width: 0;
    min-height: 670px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #fff;
}

.chat-panel__header {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}

.chat-panel__header > div:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.chat-panel__header strong {
    font-size: 13px;
}

.chat-panel__header span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 10px;
}

.chat-messages {
    min-height: 420px;
    max-height: 570px;
    overflow-y: auto;
    padding: 24px;
    background:
        radial-gradient(circle at 10% 20%, rgba(73, 103, 255, .035), transparent 23%),
        #f8f9fc;
}

.chat-message {
    display: flex;
    margin-bottom: 12px;
}

.chat-message.is-mine {
    justify-content: flex-end;
}

.chat-bubble {
    width: fit-content;
    max-width: min(76%, 680px);
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 5px 15px 15px 15px;
    color: var(--text);
    background: #fff;
    box-shadow: 0 5px 16px rgba(26, 39, 75, .04);
}

.chat-message.is-mine .chat-bubble {
    border-color: transparent;
    border-radius: 15px 5px 15px 15px;
    color: #fff;
    background: linear-gradient(135deg, #526eff, #3c59df);
}

.chat-bubble p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-bubble > span {
    display: block;
    margin-top: 7px;
    color: var(--text-faint);
    font-size: 8px;
    text-align: right;
}

.chat-message.is-mine .chat-bubble > span {
    color: rgba(255, 255, 255, .72);
}

.chat-reference {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    margin-bottom: 8px;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 800;
}

.chat-reference .icon {
    width: 14px;
    height: 14px;
}

.chat-reference--obstacle {
    color: #a56c0a;
    background: var(--warning-soft);
}

.chat-message.is-mine .chat-reference {
    color: #fff;
    background: rgba(255, 255, 255, .14);
}

.chat-day-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-faint);
    font-size: 10px;
}

.chat-welcome-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 520px;
    padding: 16px;
    margin: 20px auto;
    border: 1px solid #dce2ff;
    border-radius: 15px;
    color: var(--primary);
    background: var(--primary-soft);
}

.chat-welcome-card div {
    color: var(--text);
}

.chat-welcome-card strong {
    font-size: 12px;
}

.chat-welcome-card p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.chat-composer {
    padding: 14px 18px 18px;
    border-top: 1px solid var(--line);
    background: #fff;
}

.chat-link-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-link-selects select {
    min-width: 0;
    min-height: 36px;
    font-size: 10px;
}

.chat-composer__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 9px;
}

.chat-composer textarea {
    min-height: 54px;
    max-height: 150px;
    resize: vertical;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    font-size: 12px;
}

.chat-composer textarea:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .09);
}

.chat-empty-state {
    grid-row: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--text-soft);
    text-align: center;
}

.chat-empty-state h2 {
    margin: 8px 0;
    color: var(--text);
}

.obstacle-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr);
    gap: 16px;
}

.obstacle-create-panel {
    align-self: start;
    position: sticky;
    top: 108px;
}

.obstacle-create-panel h2 {
    margin: 6px 0;
}

.stacked-form {
    display: grid;
    gap: 4px;
    margin-top: 18px;
}

.obstacle-list,
.manager-obstacle-list {
    display: grid;
    gap: 12px;
}

.obstacle-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fcfcfe;
}

.obstacle-card.is-highlighted,
.manager-obstacle-card.is-highlighted {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .08), var(--shadow-sm);
}

.obstacle-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.obstacle-card__head > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.obstacle-card h3,
.manager-obstacle-card h3 {
    margin: 12px 0 7px;
    font-size: 15px;
}

.obstacle-card > p,
.manager-obstacle-card__main > p {
    margin: 0 0 12px;
    color: #475467;
    font-size: 11px;
    line-height: 1.7;
}

.obstacle-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-size: 9px;
}

.obstacle-card footer a {
    color: var(--primary);
    font-weight: 800;
}

.manager-response {
    padding: 11px 12px;
    margin-top: 12px;
    border-left: 3px solid var(--success);
    border-radius: 0 10px 10px 0;
    background: var(--success-soft);
}

.manager-response strong {
    color: #087549;
    font-size: 10px;
}

.manager-response p {
    margin: 4px 0 0;
    color: #315f4d;
    font-size: 10px;
    line-height: 1.6;
}

.inline-filter,
.obstacle-filter,
.management-filter {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.obstacle-filter label {
    min-width: 170px;
    display: grid;
    gap: 6px;
}

.obstacle-filter label span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 750;
}

.manager-obstacle-card {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .65fr);
    gap: 20px;
}

.manager-obstacle-card__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 13px;
}

.manager-obstacle-card__main {
    min-width: 0;
}

.obstacle-owner {
    display: block;
    margin: -2px 0 10px;
    color: var(--text-faint);
    font-size: 9px;
}

.obstacle-action-form {
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

@media (max-width: 1050px) {
    .chat-layout {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .obstacle-layout,
    .manager-obstacle-card {
        grid-template-columns: 1fr;
    }

    .obstacle-create-panel {
        position: static;
    }

    .obstacle-action-form {
        padding: 18px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }
}

@media (max-width: 760px) {
    .communication-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .start-chat-form {
        align-items: stretch;
        flex-direction: column;
    }

    .chat-layout {
        display: block;
    }

    .chat-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .chat-contact-list {
        max-height: 240px;
    }

    .chat-panel {
        min-height: 620px;
    }

    .chat-messages {
        max-height: 470px;
        padding: 16px 12px;
    }

    .chat-bubble {
        max-width: 88%;
    }

    .chat-link-selects,
    .chat-composer__row {
        grid-template-columns: 1fr;
    }

    .chat-panel__header .button {
        display: none;
    }

    .obstacle-card footer {
        align-items: flex-start;
        flex-direction: column;
    }
}

.dashboard-action-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}


/* Tahap 7: sidebar mini interaction and KPI */
.sidebar-collapsed .nav-drawer__trigger {
    position: relative;
    pointer-events: auto;
}

.sidebar-collapsed .nav-drawer__trigger::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.kpi-hero {
    background: linear-gradient(135deg, #ffffff, #f4f6ff);
}

.kpi-period-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 16px;
}

.kpi-period-filter .form-field {
    margin-bottom: 0;
}

.kpi-period-filter--staff {
    grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
}

.period-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid #dce2ff;
    border-radius: 14px;
    background: var(--primary-soft);
}

.period-banner div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.period-banner span,
.period-banner small {
    color: var(--text-soft);
    font-size: 11px;
}

.period-banner strong {
    font-size: 13px;
}

.compact-metric--danger strong {
    color: var(--danger);
}

.kpi-team-stack {
    display: grid;
    gap: 18px;
}

.kpi-team-panel {
    padding: 0;
    overflow: hidden;
}

.kpi-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 4px solid var(--primary);
}

.kpi-team-header > div:first-child,
.kpi-member-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.kpi-team-header > div:first-child > div,
.kpi-member-heading > div:nth-child(2) {
    display: flex;
    flex-direction: column;
}

.kpi-team-header strong,
.kpi-member-heading strong {
    font-size: 13px;
}

.kpi-team-header span,
.kpi-member-heading span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 10px;
}

.kpi-team-summary {
    display: flex;
    gap: 22px;
}

.kpi-team-summary span {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.kpi-team-summary strong {
    margin-top: 3px;
    color: var(--text);
    font-size: 14px;
}

.kpi-member-list {
    display: grid;
    gap: 14px;
    padding: 14px;
    background: var(--surface-soft);
}

.kpi-member-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

.kpi-member-heading {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.kpi-member-score {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    text-align: right;
}

.kpi-result-list {
    display: grid;
}

.kpi-result-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(360px, 1.4fr) 110px;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    border-top: 1px solid var(--line);
}

.kpi-result-row:first-child {
    border-top: 0;
}

.kpi-result-copy > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.kpi-result-copy strong {
    font-size: 12px;
}

.kpi-result-copy p {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.kpi-result-input {
    display: grid;
    grid-template-columns: minmax(120px, .55fr) minmax(200px, 1fr);
    gap: 10px;
}

.kpi-result-input label {
    display: grid;
    gap: 5px;
}

.kpi-result-input label > span,
.kpi-result-score > span {
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 700;
}

.kpi-result-input input,
.kpi-result-input select {
    width: 100%;
    height: 39px;
    padding: 0 10px;
    border: 1px solid #dce1eb;
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: #fff;
}

.kpi-result-input input:focus,
.kpi-result-input select:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 3px rgba(73, 103, 255, .1);
}

.kpi-result-score {
    display: grid;
    gap: 6px;
    justify-items: stretch;
    text-align: center;
}

.kpi-result-score strong {
    font-size: 17px;
}

.kpi-result-score .button {
    min-height: 32px;
    padding-inline: 10px;
    font-size: 10px;
}

.staff-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.staff-kpi-card {
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.staff-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.staff-kpi-card h3 {
    margin: 14px 0 6px;
    font-size: 15px;
}

.staff-kpi-card > p {
    min-height: 45px;
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.staff-kpi-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.staff-kpi-values div {
    display: flex;
    flex-direction: column;
    padding: 9px;
    border-radius: 10px;
    background: #fff;
}

.staff-kpi-values span {
    color: var(--text-faint);
    font-size: 8px;
}

.staff-kpi-values strong {
    margin-top: 4px;
    font-size: 11px;
}

.staff-kpi-note {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

.staff-kpi-note strong {
    font-size: 9px;
}

.staff-kpi-note p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.dashboard-grid--kpi {
    grid-template-columns: 1fr 1fr;
    margin-bottom: 0;
}

.staff-dashboard-kpi {
    margin-top: 22px;
}

.kpi-item small {
    display: block;
    margin-top: 6px;
    color: var(--text-faint);
    font-size: 9px;
}

@media (max-width: 1250px) {
    .kpi-period-filter {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .kpi-result-row {
        grid-template-columns: 1fr;
    }

    .kpi-result-score {
        grid-template-columns: auto auto auto;
        align-items: center;
        justify-content: end;
        text-align: right;
    }

    .staff-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .kpi-period-filter,
    .kpi-period-filter--staff,
    .kpi-result-input,
    .staff-kpi-grid,
    .dashboard-grid--kpi {
        grid-template-columns: 1fr;
    }

    .kpi-team-header,
    .period-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpi-team-summary {
        width: 100%;
        justify-content: space-between;
    }

    .kpi-team-summary span {
        text-align: left;
    }
}

/* Tahap 8: perbaikan presisi ikon sidebar mini */
.nav-item__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
}

.nav-item__icon .icon {
    width: 20px;
    height: 20px;
}

.sidebar-collapsed .sidebar__nav {
    padding-inline: 10px;
}

.sidebar-collapsed .nav-drawer {
    width: 60px;
    margin-inline: auto;
}

.sidebar-collapsed .nav-item,
.sidebar-collapsed .nav-drawer__trigger {
    width: 60px;
    min-height: 54px;
    margin-inline: auto;
    padding: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
}

.sidebar-collapsed .nav-item__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    margin: 0;
}

.sidebar-collapsed .nav-drawer__trigger::before {
    display: none !important;
    content: none !important;
}

.sidebar-collapsed .nav-item:focus-visible,
.sidebar-collapsed .nav-drawer__trigger:focus-visible {
    outline: 2px solid #91a0ff;
    outline-offset: 2px;
}

/* Tahap 8: brand management */
.brand-management-hero {
    background: linear-gradient(135deg, #ffffff, #f3f6ff);
}

.brand-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr);
    gap: 18px;
    margin-bottom: 22px;
}

.brand-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.brand-card {
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fcfcfe;
}

.brand-card.is-disabled {
    opacity: .62;
}

.brand-card__head,
.brand-card__meta,
.brand-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.brand-card__code {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 11px;
    font-weight: 850;
}

.brand-card h3 {
    margin: 15px 0 7px;
    font-size: 16px;
}

.brand-card p {
    min-height: 38px;
    margin: 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.brand-card__meta {
    padding: 13px 0;
    margin-top: 14px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 10px;
}

.brand-card__actions {
    margin-top: 13px;
    justify-content: flex-start;
}

.brand-card__actions form {
    margin: 0;
}

.brand-assignment-panel {
    margin-bottom: 22px;
}

.section-description {
    margin: -5px 0 18px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.brand-assignment-list {
    display: grid;
    gap: 10px;
}

.brand-assignment-row {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(360px, 2fr) auto;
    align-items: center;
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fcfcfe;
}

.brand-assignment-person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.brand-assignment-person div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.brand-assignment-person strong {
    font-size: 12px;
}

.brand-assignment-person span:last-child {
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.brand-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.brand-checkbox span {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-soft);
    background: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.brand-checkbox input:checked + span {
    color: var(--primary);
    border-color: #aeb9ff;
    background: var(--primary-soft);
}

.mini-chip--brand {
    color: #6d4ec8;
    background: #f0eaff;
}

.brand-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

/* Tahap 8: KPI automatic linkage */
.kpi-link-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    margin: 10px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.kpi-link-flow > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
}

.kpi-link-flow small {
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-link-flow b {
    color: var(--primary);
}

.auto-kpi-list {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.auto-kpi-card {
    padding: 16px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 14px;
    background: #fff;
}

.auto-kpi-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.auto-kpi-card__head div {
    display: flex;
    flex-direction: column;
}

.auto-kpi-card__head strong {
    font-size: 13px;
}

.auto-kpi-card__head div span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 10px;
}

.auto-kpi-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 14px 0;
}

.auto-kpi-values > div {
    padding: 10px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.auto-kpi-values span,
.kpi-source-box > span {
    display: block;
    color: var(--text-faint);
    font-size: 9px;
}

.auto-kpi-values strong {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.kpi-source-box {
    padding: 13px;
    border: 1px dashed #cdd4e8;
    border-radius: 12px;
    background: #fafbff;
}

.kpi-source-box > strong {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.kpi-source-box > small {
    display: block;
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.kpi-source-box > p {
    margin: 9px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.kpi-note-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 10px;
    margin-top: 12px;
}

.kpi-note-form .form-field {
    margin: 0;
}

.kpi-note-form em {
    color: var(--text-faint);
    font-style: normal;
    font-weight: 500;
}

.field-helper {
    margin: -3px 0 14px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .brand-management-grid {
        grid-template-columns: 1fr;
    }

    .brand-assignment-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .brand-assignment-row .button {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .brand-card-grid,
    .auto-kpi-values {
        grid-template-columns: 1fr 1fr;
    }

    .kpi-link-flow {
        grid-template-columns: 1fr;
    }

    .kpi-link-flow b {
        transform: rotate(90deg);
        justify-self: center;
    }

    .kpi-note-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .brand-card-grid,
    .auto-kpi-values {
        grid-template-columns: 1fr;
    }
}

/* Tahap 8 final: elemen tersembunyi tidak boleh tetap mengambil ruang saat sidebar mini. */
@media (min-width: 901px) {
    .sidebar-collapsed .nav-item__label,
    .sidebar-collapsed .nav-badge,
    .sidebar-collapsed .nav-drawer__chevron {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 0 !important;
        overflow: hidden !important;
    }

    .sidebar-collapsed .nav-item__icon,
    .sidebar-collapsed .nav-item__icon .icon {
        position: static;
        transform: none;
    }
}

/* ==============================
   Tahap 9: workspace layout consistency
   ============================== */
.workspace-hero {
    min-height: 142px;
    align-items: center;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f8ff 100%);
}

.workspace-hero--attention {
    background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
}

.workspace-hero__copy {
    min-width: 0;
    max-width: 850px;
}

.workspace-hero__copy h2 {
    margin-top: 7px;
}

.workspace-metrics {
    margin-bottom: 18px;
}

.workspace-filter,
.performance-filter {
    display: grid;
    grid-template-columns: minmax(280px, 1.7fr) repeat(2, minmax(160px, .72fr)) auto;
    align-items: end;
    gap: 12px;
    padding: 17px 18px;
    margin-bottom: 18px;
}

.workspace-filter--simple {
    grid-template-columns: minmax(320px, 1fr) auto;
}

.workspace-filter label,
.performance-filter label {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.workspace-filter label > span,
.performance-filter label > span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 750;
}

.workspace-filter input[type="search"],
.workspace-filter select,
.performance-filter input,
.performance-filter select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid #dce1eb;
    border-radius: 11px;
    outline: 0;
    color: var(--text);
    background: #fff;
    font-size: 11px;
}

.workspace-filter .search-field {
    width: 100%;
    min-width: 0;
    height: 44px;
}

.workspace-filter .search-field input {
    height: auto;
    padding: 0;
    border: 0;
}

.workspace-filter input:focus,
.workspace-filter select:focus,
.performance-filter input:focus,
.performance-filter select:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .09);
}

.workspace-filter__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.workspace-filter__actions .button,
.performance-filter > .button {
    min-height: 44px;
}

.workspace-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 430px);
    align-items: start;
    gap: 18px;
}

.workspace-list-panel,
.workspace-form-panel {
    min-width: 0;
}

.workspace-form-panel {
    position: sticky;
    top: 104px;
    padding: 22px;
}

.workspace-form-heading {
    padding-bottom: 15px;
    margin-bottom: 17px;
    border-bottom: 1px solid var(--line);
}

.result-count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--surface-muted);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.config-card-list {
    display: grid;
    gap: 13px;
}

.config-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fcfcfe;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.config-card:hover {
    transform: translateY(-1px);
    border-color: #cfd6eb;
    box-shadow: var(--shadow-sm);
}

.config-card.is-disabled {
    opacity: .62;
}

.config-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}

.config-card__identity {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
}

.config-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

.config-card__icon--currency {
    color: #087549;
    background: var(--success-soft);
}

.config-card__icon--duration {
    color: #a56c0a;
    background: var(--warning-soft);
}

.config-card__icon--status {
    color: #7a49b7;
    background: #f2eaff;
}

.config-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.config-card__title-row h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.config-card__identity p {
    max-width: 760px;
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.6;
}

.config-card__primary-value {
    min-width: 120px;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    text-align: right;
}

.config-card__primary-value span,
.config-card__facts span,
.relation-flow__node span {
    color: var(--text-faint);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.config-card__primary-value strong {
    margin-top: 5px;
    font-size: 17px;
    letter-spacing: -.035em;
}

.config-card__primary-value small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.config-card__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.config-card__facts > div {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid #edf0f5;
    border-radius: 11px;
    background: #fff;
}

.config-card__facts strong,
.config-card__facts small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.config-card__facts strong {
    margin-top: 4px;
    font-size: 10px;
}

.config-card__facts small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.config-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 13px;
    margin-top: 13px;
    border-top: 1px solid var(--line);
}

.chip-row,
.config-card__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.config-card__actions form {
    margin: 0;
}

.relation-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    margin-top: 15px;
}

.relation-flow__node {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.relation-flow__node--recipient {
    border-color: #ccd5ff;
    background: #f7f8ff;
}

.relation-flow__node strong,
.relation-flow__node small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-flow__node strong {
    margin-top: 5px;
    font-size: 10px;
}

.relation-flow__node small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.relation-flow__arrow {
    align-self: center;
    color: var(--primary);
    font-size: 18px;
    font-weight: 800;
}

.workspace-form {
    display: grid;
    gap: 16px;
}

.workspace-form-section {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.workspace-form-section .form-field:last-child,
.workspace-form-section .switch-field:last-child {
    margin-bottom: 0;
}

.workspace-form-section__title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding-bottom: 12px;
    margin-bottom: 13px;
    border-bottom: 1px solid var(--line);
}

.workspace-form-section__title > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 850;
}

.workspace-form-section__title div {
    display: flex;
    flex-direction: column;
}

.workspace-form-section__title strong {
    font-size: 11px;
}

.workspace-form-section__title small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.45;
}

.workspace-form input,
.workspace-form select,
.workspace-form textarea {
    width: 100%;
}

/* Performance filter and tracking */
.performance-filter {
    grid-template-columns: repeat(4, minmax(145px, 1fr)) auto;
}

.performance-filter--range {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
}

.performance-filter--wide {
    grid-template-columns: repeat(6, minmax(125px, 1fr)) auto;
}

.performance-period-banner {
    margin-bottom: 18px;
}

.performance-section {
    margin-top: 22px;
}

.performance-team-stack,
.issue-team-stack,
.history-stack {
    display: grid;
    gap: 16px;
}

.performance-team-card,
.issue-team-card,
.history-period-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.performance-team-card__header,
.issue-team-card > header,
.history-period-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 17px 19px;
}

.performance-team-card__identity,
.member-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.performance-team-card__identity > div,
.member-identity > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.performance-team-card__identity strong,
.member-identity strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-team-card__identity span,
.member-identity span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.performance-team-card__metrics,
.member-daily-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.performance-team-card__metrics > div,
.member-daily-stats > div {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.performance-team-card__metrics span,
.member-daily-stats span {
    color: var(--text-faint);
    font-size: 8px;
}

.performance-team-card__metrics strong,
.member-daily-stats strong {
    margin-top: 3px;
    font-size: 12px;
}

.performance-member-list {
    display: grid;
    gap: 9px;
    padding: 13px;
    background: var(--surface-soft);
}

.performance-member-card,
.performance-member-row {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
}

.performance-member-card summary,
.performance-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 14px;
}

.performance-member-card summary {
    cursor: pointer;
    list-style: none;
}

.performance-member-card summary::-webkit-details-marker {
    display: none;
}

.performance-member-card[open] .member-expand-icon {
    transform: rotate(180deg);
}

.member-expand-icon {
    color: var(--text-faint);
    transition: transform var(--transition);
}

.kpi-result-grid {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: #fafbff;
}

.kpi-result-card {
    padding: 15px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 13px;
    background: #fff;
}

.kpi-result-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.kpi-result-card__header > div {
    display: flex;
    flex-direction: column;
}

.kpi-result-card__header strong {
    font-size: 12px;
}

.kpi-result-card__header div span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 9px;
}

.kpi-result-card__values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 13px 0;
}

.kpi-result-card__values > div {
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--surface-soft);
}

.kpi-result-card__values span,
.kpi-result-card__source span {
    color: var(--text-faint);
    font-size: 8px;
}

.kpi-result-card__values strong {
    display: block;
    margin-top: 4px;
    font-size: 11px;
}

.kpi-result-card__source {
    padding: 11px 12px;
    border: 1px dashed #cfd6e8;
    border-radius: 11px;
    background: #fbfcff;
}

.kpi-result-card__source strong,
.kpi-result-card__source small {
    display: block;
}

.kpi-result-card__source strong {
    margin-top: 4px;
    font-size: 10px;
}

.kpi-result-card__source small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.kpi-result-card__source p {
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.55;
}

.kpi-note-form--clean {
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--line);
}

/* Team performance */
.performance-trend-panel {
    margin-bottom: 18px;
}

.performance-trend-grid {
    min-height: 190px;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 2px 4px;
}

.performance-trend-day {
    min-width: 42px;
    flex: 1 0 42px;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.performance-trend-day > span,
.performance-trend-day > small {
    color: var(--text-soft);
    font-size: 8px;
}

.performance-trend-bars {
    width: 26px;
    height: 130px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding: 3px;
    border-radius: 8px;
    background: var(--surface-soft);
}

.performance-trend-bars i,
.performance-trend-bars b {
    width: 8px;
    height: var(--bar);
    min-height: 2px;
    display: block;
    border-radius: 999px 999px 3px 3px;
}

.performance-trend-bars i {
    background: var(--primary);
}

.performance-trend-bars b {
    background: #3fc58d;
}

.trend-legend {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
    color: var(--text-soft);
    font-size: 9px;
}

.trend-legend span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.trend-legend i,
.trend-legend b {
    width: 9px;
    height: 9px;
    display: block;
    border-radius: 3px;
}

.trend-legend i { background: var(--primary); }
.trend-legend b { background: #3fc58d; }

.team-diagnosis-row {
    display: grid;
    grid-template-columns: 150px minmax(220px, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px 19px;
    border-bottom: 1px solid var(--line);
    background: #fbfcff;
}

.team-diagnosis-row > div {
    display: flex;
    flex-direction: column;
}

.team-diagnosis-row span {
    color: var(--text-faint);
    font-size: 8px;
}

.team-diagnosis-row strong {
    margin-top: 3px;
    font-size: 10px;
}

/* Target issues */
.issue-team-card > header {
    border-bottom: 1px solid var(--line);
}

.issue-team-card__counts {
    display: flex;
    gap: 7px;
}

.issue-team-card__counts span {
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--surface-muted);
    font-size: 8px;
    font-weight: 800;
}

.issue-list {
    display: grid;
    gap: 9px;
    padding: 13px;
    background: var(--surface-soft);
}

.issue-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 13px;
    background: #fff;
}

.issue-card--danger { border-left-color: var(--danger); }
.issue-card--warning { border-left-color: var(--warning); }
.issue-card--muted { border-left-color: #98a2b3; }

.issue-card__status {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--danger);
    background: var(--danger-soft);
}

.issue-card--warning .issue-card__status {
    color: var(--warning);
    background: var(--warning-soft);
}

.issue-card--muted .issue-card__status {
    color: var(--text-soft);
    background: var(--surface-muted);
}

.issue-card__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.issue-card__title strong {
    font-size: 11px;
}

.issue-card__content > p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 9px;
}

.issue-card__values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 9px;
    color: var(--text-soft);
    font-size: 9px;
}

.issue-card__values strong {
    color: var(--text);
}

.issue-card__obstacle {
    padding: 8px 10px;
    margin-top: 9px;
    border-radius: 9px;
    background: var(--warning-soft);
}

.issue-card__obstacle span {
    color: #a56c0a;
    font-size: 8px;
    font-weight: 800;
}

.issue-card__obstacle p {
    margin: 3px 0 0;
    color: #775006;
    font-size: 9px;
    line-height: 1.5;
}

.issue-card__actions {
    display: grid;
    gap: 6px;
}

/* History */
.performance-history-tabs {
    margin-bottom: 14px;
}

.history-period-card > header {
    border-bottom: 1px solid var(--line);
}

.history-period-card h3 {
    margin: 4px 0 0;
    font-size: 14px;
}

.history-table-wrap {
    overflow-x: auto;
}

.history-row {
    min-width: 820px;
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) minmax(150px, 1fr) 90px 90px 90px 80px;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 9px;
}

.history-row:first-child {
    border-top: 0;
}

.history-row--head {
    color: var(--text-faint);
    background: var(--surface-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.history-row > strong {
    color: var(--text);
    font-size: 10px;
}

.dashboard-grid--balanced {
    grid-template-columns: 1fr 1fr;
}

.personal-history-list,
.compliance-list {
    display: grid;
    gap: 8px;
}

.personal-history-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 90px 90px auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.personal-history-row > div {
    display: flex;
    flex-direction: column;
}

.personal-history-row strong {
    font-size: 10px;
}

.personal-history-row span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.compliance-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.compliance-row > div:first-child {
    display: flex;
    flex-direction: column;
}

.compliance-row > div:first-child strong {
    font-size: 10px;
}

.compliance-row > div:first-child span {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
}

.compliance-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 9px;
}

.compliance-progress .progress-track {
    margin: 0;
}

.compliance-progress strong {
    font-size: 9px;
}

@media (max-width: 1380px) {
    .workspace-layout {
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    .performance-filter--wide {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .performance-filter--wide > .button {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .workspace-layout {
        grid-template-columns: 1fr;
    }

    .workspace-form-panel {
        position: static;
    }

    .workspace-filter,
    .performance-filter,
    .performance-filter--range {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .workspace-filter__actions,
    .performance-filter > .button {
        width: 100%;
    }

    .workspace-filter__actions .button {
        flex: 1;
    }

    .performance-filter > .button {
        grid-column: auto;
    }

    .config-card__facts,
    .kpi-result-card__values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid--balanced {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .workspace-filter,
    .workspace-filter--simple,
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide {
        grid-template-columns: 1fr;
    }

    .config-card__header,
    .relation-flow,
    .issue-card,
    .personal-history-row,
    .compliance-row {
        grid-template-columns: 1fr;
    }

    .config-card__primary-value {
        align-items: flex-start;
        text-align: left;
    }

    .config-card__facts,
    .kpi-result-card__values {
        grid-template-columns: 1fr;
    }

    .config-card__footer,
    .performance-team-card__header,
    .issue-team-card > header,
    .performance-member-card summary,
    .performance-member-row,
    .team-diagnosis-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .relation-flow__arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .performance-team-card__metrics,
    .member-daily-stats {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
    }

    .performance-team-card__metrics > div,
    .member-daily-stats > div {
        text-align: left;
    }

    .team-diagnosis-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .issue-card__actions {
        grid-template-columns: 1fr 1fr;
    }
}

/* Tahap 10 - Reports and exports */
.report-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 27px 30px;
    margin-bottom: 18px;
    border: 1px solid #dce3f5;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 82% 25%, rgba(73, 103, 255, .12), transparent 28%),
        linear-gradient(135deg, #ffffff, #f7f9ff);
    box-shadow: var(--shadow-sm);
}

.report-hero h2 {
    margin: 7px 0 8px;
    font-size: 27px;
    letter-spacing: -.04em;
}

.report-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.7;
}

.report-hero__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.report-hero__actions .button {
    gap: 8px;
}

.report-hero__actions .icon {
    width: 16px;
    height: 16px;
}

.report-filter {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(210px, 1fr) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 14px;
}

.report-filter label,
.report-note-form label {
    display: grid;
    gap: 7px;
}

.report-filter label > span,
.report-note-form label > span {
    color: #344054;
    font-size: 10px;
    font-weight: 800;
}

.report-filter input,
.report-filter select,
.report-note-form textarea {
    width: 100%;
    min-height: 45px;
    padding: 0 13px;
    border: 1px solid #dce1eb;
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: #fff;
}

.report-note-form textarea {
    min-height: 120px;
    padding: 13px;
    resize: vertical;
    line-height: 1.6;
}

.report-filter input:focus,
.report-filter select:focus,
.report-note-form textarea:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}

.report-period-banner {
    margin-bottom: 18px;
}

.report-metrics {
    margin-bottom: 18px;
}

.report-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    gap: 16px;
    margin-bottom: 24px;
}

.report-trend-panel,
.report-insight-panel {
    min-height: 330px;
}

.report-trend-chart {
    height: 220px;
    display: flex;
    align-items: flex-end;
    gap: 9px;
    padding: 16px 8px 0;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 53px, rgba(231, 234, 241, .8) 54px);
    overflow-x: auto;
}

.report-trend-column {
    min-width: 38px;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto auto;
    align-items: end;
    justify-items: center;
    gap: 5px;
}

.report-trend-bars {
    width: 28px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.report-trend-bars i,
.report-trend-bars b {
    width: 11px;
    height: var(--height);
    min-height: 2px;
    display: block;
    border-radius: 6px 6px 2px 2px;
    transition: height 500ms ease;
}

.report-trend-bars i {
    background: linear-gradient(180deg, #6d80ff, #4967ff);
}

.report-trend-bars b {
    background: linear-gradient(180deg, #46d39a, #16a36a);
}

.report-trend-column strong {
    font-size: 8px;
}

.report-trend-column span {
    color: var(--text-faint);
    font-size: 8px;
}

.report-insight-list {
    display: grid;
    gap: 10px;
}

.report-insight-list > div {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.report-insight-list > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 850;
}

.report-insight-list p {
    margin: 1px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.report-mini-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.report-mini-stats > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface-soft);
}

.report-mini-stats span {
    color: var(--text-soft);
    font-size: 9px;
}

.report-mini-stats strong {
    font-size: 16px;
}

.report-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 8px 0 14px;
}

.report-section-heading h2 {
    margin: 5px 0 0;
    font-size: 20px;
}

.report-section-heading > span {
    color: var(--text-faint);
    font-size: 9px;
}

.report-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.report-team-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.report-team-card > header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.report-team-card > header > div:nth-child(2) {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.report-team-card > header strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-team-card > header span:not(.status-badge) {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 8px;
}

.report-team-scores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 16px;
}

.report-team-scores > div {
    min-width: 0;
}

.report-team-scores span {
    display: block;
    color: var(--text-soft);
    font-size: 8px;
}

.report-team-scores strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
}

.report-team-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 16px 15px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.report-team-facts > div {
    padding: 10px;
    border-left: 1px solid var(--line);
    text-align: center;
}

.report-team-facts > div:first-child {
    border-left: 0;
}

.report-team-facts span {
    display: block;
    color: var(--text-faint);
    font-size: 7px;
}

.report-team-facts strong {
    display: block;
    margin-top: 3px;
    font-size: 11px;
}

.report-member-details {
    border-top: 1px solid var(--line);
}

.report-member-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--primary);
    font-size: 9px;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.report-member-details summary::-webkit-details-marker {
    display: none;
}

.report-member-details > div {
    padding: 0 12px 12px;
}

.report-member-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.5fr) repeat(3, 68px) auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-top: 1px solid var(--line);
}

.report-member-row:first-child {
    border-top: 0;
}

.report-member-row > div {
    display: flex;
    flex-direction: column;
}

.report-member-row > div:first-child strong {
    font-size: 9px;
}

.report-member-row span:not(.status-badge) {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 7px;
}

.report-member-row > div:not(:first-child) strong {
    font-size: 9px;
}

.report-issues-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}

.report-issue-list {
    display: grid;
    gap: 7px;
}

.report-issue-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
}

.status-dot--danger { background: var(--danger); }
.status-dot--warning { background: var(--warning); }
.status-dot--success { background: var(--success); }
.status-dot--info { background: var(--primary); }
.status-dot--muted { background: var(--text-faint); }

.report-issue-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.report-issue-row > div:last-child {
    align-items: flex-end;
    text-align: right;
}

.report-issue-row strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-issue-row span:not(.status-dot) {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 7px;
}

.report-note-panel {
    margin-bottom: 24px;
}

.report-note-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.report-note-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.report-note-actions small {
    color: var(--text-faint);
    font-size: 8px;
}

.report-filter--export {
    grid-template-columns: repeat(3, minmax(180px, 1fr)) auto;
}

.export-format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.export-format-card {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.export-format-card__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #16a36a, #0a7d4f);
    box-shadow: 0 12px 28px rgba(22, 163, 106, .20);
    font-size: 13px;
    font-weight: 900;
}

.export-format-card--pdf .export-format-card__icon {
    background: linear-gradient(145deg, #ef6269, #c53e4b);
    box-shadow: 0 12px 28px rgba(227, 75, 84, .20);
}

.export-format-card h2 {
    margin: 5px 0 7px;
    font-size: 21px;
}

.export-format-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.65;
}

.export-format-card ul {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.export-format-card li {
    position: relative;
    padding-left: 18px;
    color: #475467;
    font-size: 9px;
}

.export-format-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 900;
}

.export-content-guide,
.export-history-panel {
    margin-bottom: 20px;
}

.export-sheet-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.export-sheet-grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.export-sheet-grid strong {
    font-size: 9px;
}

.export-sheet-grid span {
    color: var(--text-soft);
    font-size: 8px;
    line-height: 1.5;
}

.export-history-list {
    display: grid;
    gap: 7px;
}

.export-history-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(160px, auto);
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fcfcfe;
}

.export-history-type {
    min-width: 46px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #087549;
    background: var(--success-soft);
    font-size: 8px;
    font-weight: 900;
}

.export-history-type--pdf {
    color: #a42b36;
    background: var(--danger-soft);
}

.export-history-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.export-history-row > div:last-child {
    text-align: right;
}

.export-history-row strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.export-history-row span {
    margin-top: 3px;
    color: var(--text-faint);
    font-size: 7px;
}

@media (max-width: 1180px) {
    .report-overview-grid,
    .report-team-grid,
    .report-issues-grid,
    .export-format-grid {
        grid-template-columns: 1fr;
    }

    .report-filter,
    .report-filter--export {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .report-filter > .button {
        width: 100%;
    }

    .export-sheet-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .report-hero,
    .report-section-heading,
    .report-note-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-hero__actions,
    .report-hero__actions .button {
        width: 100%;
    }

    .report-filter,
    .report-filter--export,
    .report-note-form,
    .export-sheet-grid {
        grid-template-columns: 1fr;
    }

    .report-note-actions {
        grid-column: auto;
    }

    .report-team-scores,
    .report-team-facts {
        grid-template-columns: repeat(2, 1fr);
    }

    .report-team-facts > div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .report-team-facts > div:nth-child(4) {
        border-top: 1px solid var(--line);
    }

    .report-member-row,
    .export-history-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .export-history-row > div:last-child {
        text-align: left;
    }
}

/* Tahap 11: form consistency, staff pages, logout confirmation, and AI Recommendation */
.form-field select,
.form-field textarea,
.staff-obstacle-filter select,
.ai-analysis-form select,
.ai-analysis-form textarea {
    width: 100%;
    border: 1px solid #dce1eb;
    border-radius: 12px;
    outline: none;
    color: var(--text);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field select,
.staff-obstacle-filter select,
.ai-analysis-form select {
    height: 48px;
    padding: 0 42px 0 14px;
}
.form-field textarea,
.ai-analysis-form textarea {
    min-height: 112px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.6;
}
.form-field select:focus,
.form-field textarea:focus,
.staff-obstacle-filter select:focus,
.ai-analysis-form select:focus,
.ai-analysis-form textarea:focus {
    border-color: #8799ff;
    box-shadow: 0 0 0 4px rgba(73, 103, 255, .10);
}
.form-field small {
    color: var(--text-faint);
    font-size: 10px;
    line-height: 1.5;
}
.form-field em {
    color: var(--text-faint);
    font-style: normal;
    font-weight: 500;
}
.button--with-icon { gap: 8px; }
.button--danger { color: #fff; background: var(--danger); box-shadow: 0 10px 22px rgba(227, 75, 84, .22); }
.button--danger:hover { background: #c73d47; }
.button:disabled { cursor: not-allowed; opacity: .52; transform: none; box-shadow: none; }

.password-field input { padding-right: 54px; }
.password-field button {
    width: 40px;
    height: 40px;
    inset: 4px 5px auto auto;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 10px;
    color: var(--text-soft);
}
.password-field button:hover { color: var(--primary); background: var(--primary-soft); }
.password-eye { display: grid; place-items: center; }
.password-eye[hidden] { display: none; }
.password-eye .icon { width: 20px; height: 20px; }

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--transition), visibility var(--transition);
}
.confirm-modal.is-open { visibility: visible; opacity: 1; }
.confirm-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 15, 29, .62); backdrop-filter: blur(5px); }
.confirm-modal__dialog {
    width: min(100%, 460px);
    position: relative;
    z-index: 1;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .24);
    transform: translateY(12px) scale(.98);
    transition: transform var(--transition);
}
.confirm-modal.is-open .confirm-modal__dialog { transform: translateY(0) scale(1); }
.confirm-modal__icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 17px; color: var(--danger); background: var(--danger-soft); }
.confirm-modal__icon .icon { width: 27px; height: 27px; }
.confirm-modal__copy h2 { margin: 7px 0 8px; font-size: 23px; letter-spacing: -.035em; }
.confirm-modal__copy p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.7; }
.confirm-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-open { overflow: hidden; }

.staff-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    padding: 28px 32px;
    margin-bottom: 20px;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg);
    color: #fff;
    background: linear-gradient(125deg, #1b2857, #334cb2 67%, #5d73eb);
    box-shadow: var(--shadow-md);
}
.staff-page-hero::after { content:""; width:240px; height:240px; position:absolute; right:13%; bottom:-175px; border:32px solid rgba(255,255,255,.08); border-radius:50%; }
.staff-page-hero > * { position: relative; z-index: 1; }
.staff-page-hero h2 { margin: 6px 0 8px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.045em; }
.staff-page-hero p { max-width: 760px; margin: 0; color: #d9e0ff; font-size: 13px; line-height: 1.7; }
.staff-page-hero .section-kicker { color: #bdc8ff; }
.staff-page-hero__period { min-width: 210px; padding: 17px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 16px; background: rgba(255,255,255,.11); }
.staff-page-hero__period span { display:block; color:#cbd3ff; font-size:11px; }
.staff-page-hero__period strong { display:block; margin-top:5px; font-size:18px; }
.staff-page-hero--obstacles { background: linear-gradient(125deg, #202b58, #384ea5 62%, #5367ca); }
.staff-page-hero--obstacles .button { flex: 0 0 auto; background: rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.2); }

.staff-filter-panel { display:flex; align-items:end; gap:16px; margin-bottom:16px; }
.staff-filter-panel__fields { display:grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap:14px; flex:1; }
.staff-filter-panel .form-field { margin:0; }
.staff-metric-grid { margin-bottom:20px; }
.staff-detail-panel { padding:24px; }
.score-pill { min-width:64px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border-radius:999px; font-size:12px; font-weight:850; }
.score-pill--success { color:#087549; background:var(--success-soft); }
.score-pill--warning { color:#9a6508; background:var(--warning-soft); }
.score-pill--danger { color:#b3313c; background:var(--danger-soft); }
.staff-kpi-list { display:grid; grid-template-columns: repeat(auto-fit,minmax(390px,1fr)); gap:16px; }
.staff-kpi-detail-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(26,39,75,.035); }
.staff-kpi-detail-card__header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,#fff,#f8f9ff); }
.staff-kpi-detail-card__identity { min-width:0; display:flex; align-items:flex-start; gap:13px; }
.staff-kpi-detail-card__identity strong { display:block; font-size:14px; }
.staff-kpi-detail-card__identity p { margin:5px 0 0; color:var(--text-soft); font-size:10px; line-height:1.55; }
.staff-kpi-detail-card__body { display:grid; grid-template-columns: 180px minmax(0,1fr); gap:16px; padding:18px 20px; }
.staff-kpi-score-block { display:flex; align-items:center; flex-direction:column; padding:15px; border-radius:14px; background:var(--surface-soft); }
.staff-kpi-score-ring { --score:0; width:112px; height:112px; display:grid; place-items:center; position:relative; border-radius:50%; background:conic-gradient(var(--primary) calc(var(--score)*1%),#e6eaf4 0); }
.staff-kpi-score-ring::before { content:""; width:84px; height:84px; position:absolute; border-radius:50%; background:#fff; }
.staff-kpi-score-ring div { z-index:1; display:flex; align-items:center; flex-direction:column; }
.staff-kpi-score-ring strong { font-size:22px; letter-spacing:-.04em; }
.staff-kpi-score-ring span { color:var(--text-soft); font-size:9px; }
.staff-kpi-score-meta { width:100%; display:grid; grid-template-columns:1fr auto; gap:5px 10px; padding-top:13px; margin-top:13px; border-top:1px solid var(--line); font-size:10px; }
.staff-kpi-score-meta span { color:var(--text-soft); }
.staff-kpi-score-meta strong { text-align:right; }
.staff-kpi-value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-self:start; }
.staff-kpi-value-grid div { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.staff-kpi-value-grid span { display:block; color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.staff-kpi-value-grid strong { display:block; margin-top:5px; font-size:12px; }
.staff-kpi-source-panel { grid-column:2; padding:13px 14px; border:1px solid #dfe4ff; border-radius:13px; background:var(--primary-soft); }
.staff-kpi-source-panel__label { display:block; color:#65709b; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.staff-kpi-source-panel > strong { display:block; margin-top:5px; font-size:11px; }
.staff-kpi-source-panel > small { display:block; margin-top:3px; color:var(--text-soft); font-size:9px; }
.staff-kpi-source-panel p { margin:9px 0 0; color:#4f5c82; font-size:9px; line-height:1.55; }
.staff-kpi-manager-note { padding:14px 20px; border-top:1px solid var(--line); background:#fcfcfe; }
.staff-kpi-manager-note span { color:var(--text-faint); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.staff-kpi-manager-note p { margin:5px 0 0; color:var(--text-soft); font-size:10px; line-height:1.6; }

.staff-obstacle-workspace { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(350px,.72fr); gap:18px; }
.staff-obstacle-history { min-width:0; }
.staff-obstacle-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; padding-bottom:18px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.staff-obstacle-toolbar h2 { margin:5px 0 3px; }
.staff-obstacle-toolbar p { margin:0; color:var(--text-faint); font-size:10px; }
.staff-obstacle-filter label { min-width:190px; display:grid; gap:7px; }
.staff-obstacle-filter label span { color:var(--text-soft); font-size:10px; font-weight:750; }
.staff-obstacle-list { display:grid; gap:13px; }
.staff-obstacle-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; transition:border-color var(--transition),box-shadow var(--transition); }
.staff-obstacle-card.is-highlighted { border-color:#8799ff; box-shadow:0 0 0 4px rgba(73,103,255,.08); }
.staff-obstacle-card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.staff-obstacle-card__badges { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.staff-obstacle-card__content { padding:17px 18px; }
.staff-obstacle-card__content h3 { margin:0 0 7px; font-size:15px; }
.staff-obstacle-card__content > p { margin:0; color:#475467; font-size:11px; line-height:1.7; }
.staff-obstacle-target { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:13px; border-radius:11px; color:var(--primary); background:var(--primary-soft); }
.staff-obstacle-target .icon { width:18px; height:18px; }
.staff-obstacle-target span { display:flex; flex-direction:column; }
.staff-obstacle-target strong { font-size:10px; }
.staff-obstacle-target small { margin-top:2px; color:#7580a9; font-size:8px; }
.staff-manager-response { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:13px; margin-top:13px; border-left:3px solid var(--success); border-radius:0 12px 12px 0; background:var(--success-soft); }
.staff-manager-response > span { color:var(--success); }
.staff-manager-response strong { color:#087549; font-size:10px; }
.staff-manager-response p { margin:4px 0 0; color:#315f4d; font-size:10px; line-height:1.6; }
.staff-obstacle-card > footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--line); color:var(--text-faint); background:#fcfcfe; font-size:9px; }
.staff-obstacle-card > footer a { color:var(--primary); font-weight:800; }
.staff-obstacle-form-panel { align-self:start; position:sticky; top:108px; padding:23px; }
.staff-obstacle-form-panel__header { display:flex; align-items:center; gap:12px; }
.staff-obstacle-form-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--warning); background:var(--warning-soft); }
.staff-obstacle-form-panel h2 { margin:4px 0 0; font-size:20px; }
.staff-obstacle-form { display:grid; gap:2px; margin-top:18px; }
.staff-obstacle-form .form-field { margin-bottom:14px; }

.ai-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 30px; margin-bottom:18px; border:1px solid #dfe4ff; border-radius:var(--radius-lg); background:linear-gradient(135deg,#fff,#f2f5ff); box-shadow:var(--shadow-sm); }
.ai-hero h2 { margin:6px 0 8px; font-size:30px; letter-spacing:-.045em; }
.ai-hero p { max-width:780px; margin:0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.ai-status-card { min-width:230px; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:15px; }
.ai-status-card.is-ready { color:#087549; background:var(--success-soft); }
.ai-status-card.is-warning { color:#9a6508; background:var(--warning-soft); }
.ai-status-card__icon { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.65); }
.ai-status-card div { display:flex; flex-direction:column; }
.ai-status-card span { font-size:9px; }
.ai-status-card strong { margin-top:3px; font-size:12px; }
.ai-status-card small { margin-top:2px; opacity:.75; font-size:9px; }
.ai-control-panel { margin-bottom:18px; }
.privacy-badge { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; color:#4d5a80; background:var(--primary-soft); font-size:9px; font-weight:700; }
.privacy-badge .icon { width:14px; height:14px; }
.ai-filter-grid { display:grid; grid-template-columns:1.3fr .8fr 1fr 1fr; gap:13px; }
.ai-filter-grid .form-field { margin:0; }
.ai-focus-field { margin:14px 0 0; }
.ai-form-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.toggle-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.toggle-check input { width:17px; height:17px; margin-top:1px; accent-color:var(--primary); }
.toggle-check span { display:flex; flex-direction:column; }
.toggle-check strong { font-size:10px; }
.toggle-check small { margin-top:3px; color:var(--text-faint); font-size:9px; }
.ai-form-actions { display:flex; gap:9px; }
.ai-setup-notice { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:12px 14px; margin-top:15px; border:1px solid #f2d58e; border-radius:12px; color:#805713; background:var(--warning-soft); }
.ai-setup-notice .icon { width:19px; height:19px; }
.ai-setup-notice p { margin:0; font-size:10px; line-height:1.6; }
.ai-setup-notice code { padding:2px 5px; border-radius:5px; background:rgba(255,255,255,.65); }
.ai-workspace { display:grid; grid-template-columns:minmax(0,1fr) 320px; align-items:start; gap:18px; }
.ai-result-column { min-width:0; display:grid; gap:16px; }
.ai-empty-state { min-height:420px; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.ai-empty-state__icon { width:72px; height:72px; display:grid; place-items:center; margin-bottom:18px; border-radius:22px; color:var(--primary); background:var(--primary-soft); }
.ai-empty-state__icon .icon { width:35px; height:35px; }
.ai-empty-state h2 { margin:7px 0; }
.ai-empty-state p { max-width:520px; margin:0; color:var(--text-soft); font-size:11px; line-height:1.7; }
.ai-result-header { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.ai-result-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--text-soft); font-size:9px; }
.ai-result-header h2 { margin:8px 0 4px; font-size:22px; }
.ai-result-header p { margin:0; color:var(--text-faint); font-size:9px; }
.ai-section-card { padding:22px; }
.ai-section-title { display:flex; align-items:center; gap:11px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid var(--line); }
.ai-section-number { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; color:var(--primary); background:var(--primary-soft); font-size:10px; font-weight:850; }
.ai-section-title > div { display:flex; flex-direction:column; }
.ai-section-title > div span { color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.ai-section-title h3 { margin:3px 0 0; font-size:15px; }
.ai-section-title .ai-copy-button { margin-left:auto; }
.ai-copy-button.is-copied { color:var(--success); background:var(--success-soft); }
.ai-rich-text { color:#344054; font-size:11px; line-height:1.8; white-space:normal; }
.ai-two-column { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ai-numbered-list { display:grid; gap:9px; }
.ai-numbered-list > div { display:grid; grid-template-columns:auto 1fr; gap:10px; padding:10px 11px; border-radius:11px; background:var(--surface-soft); }
.ai-numbered-list > div > span { color:var(--primary); font-size:9px; font-weight:850; }
.ai-numbered-list p { margin:0; color:#475467; font-size:10px; line-height:1.6; }
.ai-bullet-list,.ai-question-list { display:grid; gap:9px; }
.ai-bullet-list p,.ai-question-list p { display:grid; grid-template-columns:auto 1fr; gap:9px; margin:0; padding:10px 11px; border-radius:11px; background:var(--surface-soft); color:#475467; font-size:10px; line-height:1.6; }
.ai-bullet-list .icon,.ai-question-list .icon { width:16px; height:16px; color:var(--warning); }
.ai-question-list .icon { color:var(--primary); }
.ai-root-cause-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:11px; }
.ai-root-cause-card { padding:14px; border:1px solid var(--line); border-radius:13px; background:#fcfcfe; }
.ai-root-cause-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ai-root-cause-card header strong { font-size:11px; }
.ai-root-cause-card p { display:grid; gap:3px; margin:11px 0 0; color:#475467; font-size:9px; line-height:1.55; }
.ai-root-cause-card p span { color:var(--text-faint); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.ai-recommendation-table { display:grid; gap:11px; }
.ai-recommendation-row { display:grid; grid-template-columns:auto minmax(220px,1.5fr) minmax(100px,.55fr) minmax(90px,.45fr) minmax(140px,.75fr); gap:12px; align-items:start; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fcfcfe; }
.priority-pill { min-width:34px; height:28px; display:grid; place-items:center; border-radius:9px; font-size:9px; font-weight:900; }
.priority-pill--p0 { color:#b3313c; background:var(--danger-soft); }
.priority-pill--p1 { color:#9a6508; background:var(--warning-soft); }
.priority-pill--p2 { color:#4c5fb5; background:var(--primary-soft); }
.ai-recommendation-main strong { font-size:11px; line-height:1.5; }
.ai-recommendation-main p,.ai-recommendation-risk p { margin:4px 0 0; color:var(--text-soft); font-size:9px; line-height:1.55; }
.ai-recommendation-row > div:not(.ai-recommendation-main):not(.ai-recommendation-risk) { display:flex; flex-direction:column; }
.ai-recommendation-row > div > span { color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.07em; }
.ai-recommendation-row > div > strong { margin-top:4px; font-size:9px; line-height:1.45; }
.ai-recommendation-risk { grid-column:2/-1; padding-top:9px; border-top:1px solid var(--line); }
.empty-copy { margin:0; color:var(--text-faint); font-size:10px; }
.ai-history-panel { position:sticky; top:108px; padding:18px; }
.ai-history-list { display:grid; gap:8px; max-height:600px; overflow:auto; }
.ai-history-item { display:grid; gap:5px; padding:12px; border:1px solid var(--line); border-radius:12px; transition:border-color var(--transition),background var(--transition); }
.ai-history-item:hover,.ai-history-item.is-active { border-color:#aeb9ff; background:var(--primary-soft); }
.ai-history-item__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-history-item time { color:var(--text-faint); font-size:8px; }
.ai-history-item > strong { font-size:10px; }
.ai-history-item > span { color:var(--text-soft); font-size:8px; line-height:1.5; }
.ai-history-note { padding:12px; margin-top:14px; border-radius:11px; background:var(--warning-soft); }
.ai-history-note strong { color:#805713; font-size:9px; }
.ai-history-note p { margin:4px 0 0; color:#805713; font-size:8px; line-height:1.55; }

@media (max-width:1200px) {
    .staff-obstacle-workspace,.ai-workspace { grid-template-columns:1fr; }
    .staff-obstacle-form-panel,.ai-history-panel { position:static; }
    .ai-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ai-recommendation-row { grid-template-columns:auto 1fr 1fr; }
    .ai-recommendation-main { grid-column:2/-1; }
    .ai-recommendation-risk { grid-column:2/-1; }
}
@media (max-width:760px) {
    .staff-page-hero,.ai-hero,.ai-result-header,.ai-form-footer,.staff-obstacle-toolbar { align-items:stretch; flex-direction:column; }
    .staff-page-hero__period,.ai-status-card { width:100%; min-width:0; }
    .staff-filter-panel { align-items:stretch; flex-direction:column; }
    .staff-filter-panel__fields,.ai-filter-grid,.ai-two-column,.staff-kpi-detail-card__body,.staff-kpi-value-grid { grid-template-columns:1fr; }
    .staff-kpi-source-panel { grid-column:auto; }
    .staff-kpi-list { grid-template-columns:1fr; }
    .ai-form-actions { width:100%; flex-direction:column; }
    .ai-form-actions .button { width:100%; }
    .ai-recommendation-row { grid-template-columns:auto 1fr; }
    .confirm-modal__actions { flex-direction:column-reverse; }
    .confirm-modal__actions .button { width:100%; }
}

/* Tahap 12: profile, notification center, role permission, and system settings. */
.profile-avatar--photo { overflow:hidden; padding:0; background:#e8ecf8; }
.profile-avatar--photo img { width:100%; height:100%; display:block; object-fit:cover; }
.profile-avatar--xl { width:82px; height:82px; font-size:23px; }
.profile-avatar--xxl { width:116px; height:116px; font-size:31px; border:5px solid #fff; box-shadow:0 14px 34px rgba(26,39,75,.16); }
.table-user-status { max-width:340px; display:block; margin-top:5px; overflow:hidden; color:#667085; font-size:9px; line-height:1.45; text-overflow:ellipsis; white-space:nowrap; }
.topbar-user { border-radius:12px; padding:4px 6px; transition:background var(--transition); }
.topbar-user:hover { background:var(--surface-soft); }

.notification-menu { position:relative; }
.notification-count { min-width:18px; height:18px; display:grid; place-items:center; position:absolute; top:-5px; right:-5px; padding:0 5px; border:2px solid #fff; border-radius:999px; color:#fff; background:var(--danger); font-size:8px; font-weight:900; }
.notification-popover { width:370px; position:absolute; z-index:80; top:53px; right:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 24px 65px rgba(24,32,51,.18); }
.notification-popover__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 16px; border-bottom:1px solid var(--line); }
.notification-popover__header > div { display:flex; flex-direction:column; }
.notification-popover__header strong { font-size:12px; }
.notification-popover__header span { margin-top:3px; color:var(--text-faint); font-size:9px; }
.notification-popover__header a { color:var(--primary); font-size:9px; font-weight:800; }
.notification-popover__list { max-height:420px; overflow:auto; }
.notification-preview-item { display:grid; grid-template-columns:auto 1fr; gap:11px; padding:13px 15px; border-bottom:1px solid var(--line); transition:background var(--transition); }
.notification-preview-item:hover { background:var(--surface-soft); }
.notification-preview-item.is-unread { background:#f4f6ff; }
.notification-preview-item__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.notification-preview-item__icon .icon { width:17px; height:17px; }
.notification-preview-item > span:last-child { min-width:0; display:flex; flex-direction:column; }
.notification-preview-item strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.notification-preview-item small { display:-webkit-box; margin-top:4px; overflow:hidden; color:var(--text-soft); font-size:8px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.notification-popover__empty { min-height:120px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--text-faint); font-size:9px; }
.notification-popover__empty .icon { color:var(--success); }

.profile-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:25px 27px; margin-bottom:18px; background:linear-gradient(135deg,#fff,#f5f7ff); }
.profile-hero__identity { display:flex; align-items:center; gap:18px; }
.profile-hero h2 { margin:5px 0 4px; font-size:27px; letter-spacing:-.045em; }
.profile-hero p { margin:0; color:var(--text-soft); font-size:11px; }
.profile-hero__status { min-width:300px; max-width:430px; display:flex; flex-direction:column; padding:15px 17px; border:1px solid #dfe4ff; border-radius:14px; background:rgba(255,255,255,.8); }
.profile-hero__status span { color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.09em; }
.profile-hero__status strong { margin-top:6px; font-size:11px; line-height:1.55; }
.profile-hero__status a { margin-top:8px; color:var(--primary); font-size:9px; font-weight:800; }
.profile-workspace { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:18px; }
.profile-editor-card,.profile-side-card { padding:23px; }
.profile-form { display:grid; gap:16px; }
.profile-photo-editor { display:flex; align-items:center; gap:20px; padding:18px; border:1px dashed #cfd6e8; border-radius:16px; background:var(--surface-soft); }
.profile-photo-editor__preview { flex:0 0 auto; }
.profile-photo-editor > div:last-child { display:flex; align-items:flex-start; flex-direction:column; }
.profile-upload-button { position:relative; overflow:hidden; gap:7px; }
.profile-upload-button input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.profile-photo-editor p { max-width:480px; margin:9px 0 4px; color:var(--text-soft); font-size:9px; line-height:1.5; }
.profile-photo-editor [data-profile-photo-name] { color:var(--primary); font-size:8px; }
.profile-readonly-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.profile-readonly-grid > div { display:flex; flex-direction:column; padding:13px; border:1px solid var(--line); border-radius:12px; background:#fcfcfe; }
.profile-readonly-grid span { color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.profile-readonly-grid strong { margin-top:5px; font-size:10px; }
.form-actions-row { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:15px; border-top:1px solid var(--line); }
.form-actions-row .button { gap:7px; }
.profile-side-card { position:sticky; top:108px; }
.profile-side-card__icon { width:50px; height:50px; display:grid; place-items:center; border-radius:15px; color:var(--primary); background:var(--primary-soft); }
.profile-side-card h3 { margin:15px 0 7px; font-size:16px; }
.profile-side-card p { margin:0 0 18px; color:var(--text-soft); font-size:10px; line-height:1.65; }
.profile-side-card form,.profile-side-card > a { margin-top:9px; }

.status-page-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); align-items:start; gap:18px; }
.status-editor-card,.status-suggestion-card { padding:25px; }
.status-profile-preview { display:flex; align-items:center; gap:17px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.status-profile-preview h2 { margin:5px 0 5px; font-size:23px; }
.status-profile-preview p { max-width:620px; margin:0; color:var(--text-soft); font-size:10px; line-height:1.55; }
.status-form textarea { min-height:130px; resize:vertical; }
.status-form .form-field small { text-align:right; }
.status-clear-form { margin-top:-40px; }
.status-suggestion-card h2 { margin:6px 0 16px; font-size:20px; }
.status-suggestion-list { display:grid; gap:9px; }
.status-suggestion-list button { padding:12px 13px; border:1px solid var(--line); border-radius:12px; color:#475467; background:#fcfcfe; text-align:left; font-size:9px; line-height:1.5; transition:border-color var(--transition),background var(--transition); }
.status-suggestion-list button:hover { border-color:#aeb9ff; background:var(--primary-soft); }
.status-rule-note { display:grid; grid-template-columns:auto 1fr; gap:9px; padding:12px; margin-top:17px; border-radius:12px; color:#805713; background:var(--warning-soft); }
.status-rule-note .icon { width:17px; height:17px; }
.status-rule-note p { margin:0; font-size:8px; line-height:1.55; }

.account-settings-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:18px; }
.account-settings-main { display:grid; gap:18px; }
.account-section-card,.personal-notification-card { padding:23px; }
.account-section-header { display:flex; align-items:center; gap:13px; padding-bottom:17px; margin-bottom:17px; border-bottom:1px solid var(--line); }
.account-section-icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; color:var(--primary); background:var(--primary-soft); }
.account-section-header h2 { margin:4px 0 3px; font-size:18px; }
.account-section-header p { margin:0; color:var(--text-soft); font-size:9px; }
.account-form-grid { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:13px; }
.account-form-grid .form-field { margin:0; }
.account-form-grid--password { grid-template-columns:repeat(3,minmax(0,1fr)); }
.account-form-grid--password .form-help { grid-column:1/-1; margin:0; }
.account-form-grid--password > .button { grid-column:1/-1; justify-self:end; }
.password-toggle-inline { width:42px; position:absolute; inset:3px 3px 3px auto; display:grid; place-items:center; border:0; border-radius:9px; color:var(--text-soft); background:#fff; }
.password-toggle-inline:hover { color:var(--primary); background:var(--primary-soft); }
.personal-notification-card { position:sticky; top:108px; }
.preference-form { display:grid; gap:8px; }
.setting-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.setting-toggle-row > span { display:flex; flex-direction:column; }
.setting-toggle-row strong { font-size:9px; }
.setting-toggle-row small { max-width:230px; margin-top:3px; color:var(--text-faint); font-size:8px; line-height:1.45; }
.setting-toggle-row input,.permission-row input,.notification-type-row input { width:38px; height:21px; position:relative; flex:0 0 auto; appearance:none; border-radius:999px; background:#d9deea; cursor:pointer; transition:background var(--transition); }
.setting-toggle-row input::after,.permission-row input::after,.notification-type-row input::after { content:""; width:15px; height:15px; position:absolute; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.18); transition:transform var(--transition); }
.setting-toggle-row input:checked,.permission-row input:checked,.notification-type-row input:checked { background:var(--primary); }
.setting-toggle-row input:checked::after,.permission-row input:checked::after,.notification-type-row input:checked::after { transform:translateX(17px); }

.settings-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 28px; margin-bottom:18px; background:linear-gradient(135deg,#fff,#f4f6ff); }
.settings-hero h2 { margin:5px 0 6px; font-size:27px; letter-spacing:-.04em; }
.settings-hero p { max-width:760px; margin:0; color:var(--text-soft); font-size:10px; line-height:1.65; }
.settings-hero__badge { display:flex; align-items:center; gap:8px; padding:10px 13px; border-radius:999px; color:var(--primary); background:var(--primary-soft); font-size:9px; font-weight:800; }
.settings-hero__badge .icon { width:17px; height:17px; }
.role-settings-layout { display:grid; grid-template-columns:300px minmax(0,1fr); align-items:start; gap:18px; }
.role-selector-card,.permission-matrix-card { padding:22px; }
.role-selector-card { position:sticky; top:108px; }
.role-selector-item { display:grid; grid-template-columns:auto 1fr; gap:11px; padding:12px; margin-top:10px; border:1px solid var(--line); border-radius:13px; }
.role-selector-item.is-active { border-color:#aeb9ff; background:var(--primary-soft); }
.role-selector-item > span { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--primary); background:#fff; }
.role-selector-item div { display:flex; flex-direction:column; }
.role-selector-item strong { font-size:10px; }
.role-selector-item small { margin-top:3px; color:var(--text-faint); font-size:8px; }
.role-safety-note { display:grid; grid-template-columns:auto 1fr; gap:9px; padding:12px; margin-top:16px; border-radius:12px; color:#805713; background:var(--warning-soft); }
.role-safety-note .icon { width:16px; height:16px; }
.role-safety-note p { margin:0; font-size:8px; line-height:1.55; }
.permission-group-list { display:grid; gap:14px; }
.permission-group { overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.permission-group__title { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:var(--surface-soft); }
.permission-group__title strong { font-size:10px; }
.permission-group__title span { color:var(--text-faint); font-size:8px; }
.permission-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border-top:1px solid var(--line); cursor:pointer; }
.permission-row > span { display:flex; flex-direction:column; }
.permission-row strong { font-size:9px; }
.permission-row small { margin-top:3px; color:var(--text-faint); font-size:8px; }
.permission-row.is-locked { background:#fcfcfe; cursor:not-allowed; }
.permission-row.is-locked input { opacity:.55; cursor:not-allowed; }

.system-settings-form { display:grid; gap:16px; }
.system-setting-section { padding:23px; }
.system-setting-section__header { display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.system-setting-section__header > span { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; color:var(--primary); background:var(--primary-soft); }
.system-setting-section__header h2 { margin:0; font-size:17px; }
.system-setting-section__header p { margin:4px 0 0; color:var(--text-faint); font-size:8px; }
.system-setting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.system-setting-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.system-setting-grid .form-field { margin:0; }
.system-settings-submit { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border:1px solid #dfe4ff; border-radius:14px; background:#f5f7ff; }
.system-settings-submit > div { display:flex; align-items:center; gap:9px; color:#4c5a7d; font-size:9px; }
.system-settings-submit .icon { color:var(--primary); }

.notification-settings-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; }
.notification-global-card,.notification-type-card { padding:23px; }
.notification-master-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.notification-master-toggle h2 { margin:5px 0 5px; font-size:20px; }
.notification-master-toggle p { max-width:520px; margin:0; color:var(--text-soft); font-size:9px; line-height:1.55; }
.toggle-switch-control { display:inline-flex; }
.toggle-switch-control input { display:none; }
.toggle-switch-control > span { width:50px; height:28px; position:relative; display:block; border-radius:999px; background:#d9deea; transition:background var(--transition); }
.toggle-switch-control > span::after { content:""; width:22px; height:22px; position:absolute; top:3px; left:3px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform var(--transition); }
.toggle-switch-control input:checked + span { background:var(--primary); }
.toggle-switch-control input:checked + span::after { transform:translateX(22px); }
.notification-time-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.notification-time-grid .form-field { margin:0; }
.notification-type-list { display:grid; gap:8px; }
.notification-type-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.notification-type-row__icon { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--primary); background:var(--primary-soft); }
.notification-type-row > span:nth-child(2) { display:flex; flex-direction:column; }
.notification-type-row strong { font-size:9px; }
.notification-type-row small { margin-top:3px; color:var(--text-faint); font-size:8px; }
.notification-settings-submit { grid-column:1/-1; display:flex; justify-content:flex-end; }

.notification-center-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:25px 27px; margin-bottom:16px; background:linear-gradient(135deg,#fff,#f4f6ff); }
.notification-center-hero h2 { margin:6px 0; font-size:25px; }
.notification-center-hero p { margin:0; color:var(--text-soft); font-size:10px; }
.notification-center-count { width:110px; height:76px; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:16px; color:#fff; background:linear-gradient(135deg,#5e74ff,#405fe8); }
.notification-center-count strong { font-size:25px; }
.notification-center-count span { font-size:8px; }
.notification-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:17px; margin-bottom:16px; }
.notification-filter-form { display:flex; align-items:end; gap:10px; }
.notification-filter-form .form-field { min-width:180px; margin:0; }
.notification-toolbar__actions { display:flex; gap:8px; }
.notification-toolbar__actions form { margin:0; }
.notification-center-list { display:grid; gap:10px; }
.notification-center-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:16px 18px; transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.notification-center-item:hover { transform:translateY(-1px); border-color:#c7d0e8; box-shadow:var(--shadow-md); }
.notification-center-item.is-unread { border-left:4px solid var(--primary); background:#fbfcff; }
.notification-center-item.priority-high { border-right:3px solid #f2a1a6; }
.notification-center-item__icon { width:43px; height:43px; display:grid; place-items:center; border-radius:13px; color:var(--primary); background:var(--primary-soft); }
.notification-center-item__body { min-width:0; display:flex; flex-direction:column; }
.notification-center-item__meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
.notification-center-item__meta strong { color:var(--primary); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.notification-center-item__meta time { color:var(--text-faint); font-size:8px; }
.notification-center-item__body > strong { font-size:11px; }
.notification-center-item p { margin:4px 0 0; color:var(--text-soft); font-size:9px; line-height:1.55; }
.notification-center-item__arrow { color:var(--primary); font-size:18px; }
.notification-empty-state { min-height:320px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--text-faint); }
.notification-empty-state .icon { width:38px; height:38px; color:#aab3c8; }
.notification-empty-state h2 { margin:15px 0 5px; color:var(--text); }
.notification-empty-state p { margin:0; font-size:9px; }

@media (max-width:1180px) {
    .profile-workspace,.account-settings-grid,.role-settings-layout { grid-template-columns:1fr; }
    .profile-side-card,.personal-notification-card,.role-selector-card { position:static; }
    .notification-settings-layout { grid-template-columns:1fr; }
    .account-form-grid { grid-template-columns:1fr 1fr; }
    .account-form-grid > .button { grid-column:1/-1; justify-self:end; }
}

@media (max-width:760px) {
    .notification-popover { width:min(92vw,370px); right:-45px; }
    .profile-hero,.profile-photo-editor,.status-profile-preview,.settings-hero,.notification-center-hero,.notification-master-toggle,.system-settings-submit,.notification-toolbar { align-items:stretch; flex-direction:column; }
    .profile-hero__identity { align-items:flex-start; }
    .profile-hero__status { width:100%; min-width:0; max-width:none; }
    .profile-photo-editor__preview { align-self:center; }
    .profile-readonly-grid,.status-page-grid,.account-form-grid,.account-form-grid--password,.system-setting-grid,.system-setting-grid--three,.notification-time-grid { grid-template-columns:1fr; }
    .status-clear-form { margin-top:10px; }
    .notification-filter-form,.notification-toolbar__actions { width:100%; flex-direction:column; align-items:stretch; }
    .notification-filter-form .form-field { min-width:0; }
    .notification-toolbar__actions .button,.notification-filter-form .button { width:100%; }
    .notification-center-item { grid-template-columns:auto 1fr; }
    .notification-center-item__arrow { display:none; }
}

/* Tahap 13: stabilisasi performance, My KPI, maintenance, dan delete action */
.runtime-error-panel {
    min-height: 360px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 32px;
}
.runtime-error-panel__icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--danger);
    background: var(--danger-soft);
}
.runtime-error-panel__icon .icon { width: 30px; height: 30px; }
.runtime-error-panel h2 { margin: 7px 0; font-size: 24px; }
.runtime-error-panel p { margin: 0; max-width: 720px; color: var(--text-soft); line-height: 1.7; }
.runtime-error-panel small { display: block; margin-top: 10px; color: var(--text-faint); }

.team-performance-hero { margin-bottom: 18px; }
.performance-filter,
.performance-filter--range,
.performance-filter--wide {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
}
.performance-filter label { display: grid; gap: 7px; min-width: 0; }
.performance-filter label > span { color: #344054; font-size: 10px; font-weight: 800; }
.performance-filter input,
.performance-filter select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid #dce1eb;
    border-radius: 12px;
    color: var(--text);
    background: #fff;
}
.performance-filter > .button { min-height: 46px; }
.performance-period-banner { margin-bottom: 18px; }
.performance-trend-panel { margin-bottom: 22px; overflow: hidden; }
.performance-trend-grid {
    min-height: 230px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
    align-items: end;
    gap: 10px;
    padding: 18px 8px 4px;
    overflow-x: auto;
}
.performance-trend-day { min-width: 42px; display: grid; grid-template-rows: auto 170px auto; gap: 7px; text-align: center; }
.performance-trend-day > span,
.performance-trend-day > small { color: var(--text-soft); font-size: 9px; }
.performance-trend-bars { height: 170px; display: flex; align-items: end; justify-content: center; gap: 4px; padding: 8px 4px 0; border-bottom: 1px solid var(--line); background: linear-gradient(to top, rgba(231,234,241,.55) 1px, transparent 1px); background-size: 100% 25%; }
.performance-trend-bars i,
.performance-trend-bars b { width: 9px; min-height: 2px; height: var(--bar); display: block; border-radius: 7px 7px 2px 2px; transition: height .35s ease; }
.performance-trend-bars i { background: var(--primary); }
.performance-trend-bars b { background: #19a974; }
.trend-legend { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 10px; color: var(--text-soft); font-size: 10px; }
.trend-legend span { display: flex; align-items: center; gap: 6px; }
.trend-legend i,
.trend-legend b { width: 10px; height: 10px; display: inline-block; border-radius: 3px; }
.trend-legend i { background: var(--primary); }
.trend-legend b { background: #19a974; }

.performance-team-stack { display: grid; gap: 16px; }
.performance-team-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.performance-team-card__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; }
.performance-team-card__identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.performance-team-card__identity > div { min-width: 0; display: flex; flex-direction: column; }
.performance-team-card__identity strong { font-size: 14px; }
.performance-team-card__identity span { margin-top: 3px; color: var(--text-soft); font-size: 10px; }
.performance-team-card__metrics { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 10px; }
.performance-team-card__metrics > div { min-width: 74px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-soft); text-align: center; }
.performance-team-card__metrics span { display: block; color: var(--text-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.performance-team-card__metrics strong { display: block; margin-top: 4px; font-size: 13px; }
.team-progress-line { height: 5px; background: #edf0f6; }
.team-progress-line span { width: var(--progress); height: 100%; display: block; background: linear-gradient(90deg, var(--primary), #7185ff); }
.team-diagnosis-row { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 13px 20px; border-bottom: 1px solid var(--line); background: #fbfcff; }
.team-diagnosis-row div { display: flex; flex-direction: column; }
.team-diagnosis-row span { color: var(--text-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.team-diagnosis-row strong { margin-top: 3px; font-size: 11px; }
.performance-member-list { display: grid; }
.performance-member-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(360px,.9fr); align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.performance-member-row:last-child { border-bottom: 0; }
.member-daily-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.member-daily-stats > div { display: flex; flex-direction: column; align-items: flex-end; }
.member-daily-stats span { color: var(--text-faint); font-size: 8px; text-transform: uppercase; }
.member-daily-stats strong { margin-top: 3px; font-size: 11px; }

.my-kpi-filter { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) auto; align-items: end; gap: 14px; margin-bottom: 18px; }
.my-kpi-filter .form-field { margin: 0; }
.my-kpi-filter .button { min-height: 48px; }
.my-kpi-section { margin-top: 18px; }
.my-kpi-stack { display: grid; gap: 16px; }
.my-kpi-card { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(26,39,75,.04); }
.my-kpi-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg,#fff,#f8f9ff); }
.my-kpi-card__title { min-width: 0; display: flex; align-items: flex-start; gap: 13px; }
.my-kpi-card__title h3 { margin: 0; font-size: 15px; }
.my-kpi-card__title p { margin: 5px 0 0; max-width: 850px; color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.my-kpi-card__content { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 18px; padding: 18px 20px; }
.my-kpi-card__score { display: flex; align-items: center; flex-direction: column; padding: 14px; border-radius: 14px; background: var(--surface-soft); }
.my-kpi-card__contribution { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); font-size: 10px; }
.my-kpi-card__contribution span { color: var(--text-soft); }
.my-kpi-card__details { min-width: 0; display: grid; align-content: start; gap: 12px; }
.my-kpi-value-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.my-kpi-value-grid > div { min-width: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.my-kpi-value-grid span { display: block; color: var(--text-faint); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.my-kpi-value-grid strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.my-kpi-source-card { padding: 14px 15px; border: 1px solid #dfe4ff; border-radius: 13px; background: var(--primary-soft); }
.my-kpi-source-card > span { color: #65709b; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.my-kpi-source-card > strong { display: block; margin-top: 5px; font-size: 11px; }
.my-kpi-source-card > small { display: block; margin-top: 3px; color: var(--text-soft); font-size: 9px; }
.my-kpi-source-card p { margin: 9px 0 0; color: #4f5c82; font-size: 9px; line-height: 1.55; }
.my-kpi-card__note { padding: 13px 20px; border-top: 1px solid var(--line); background: #fcfcfe; }
.my-kpi-card__note span { color: var(--text-faint); font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.my-kpi-card__note p { margin: 5px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.6; }

.delete-action-form { display: inline-flex; }
.button--delete { color: #b3313c; background: var(--danger-soft); }
.button--delete:hover { color: #fff; background: var(--danger); }

.maintenance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.maintenance-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.maintenance-card__icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); }
.maintenance-card h3 { margin: 0 0 7px; font-size: 15px; }
.maintenance-card p { margin: 0 0 16px; color: var(--text-soft); font-size: 10px; line-height: 1.6; }
.maintenance-card form { display: grid; gap: 11px; }
.maintenance-card input[type=file] { width: 100%; padding: 11px; border: 1px dashed #cfd6e5; border-radius: 11px; background: var(--surface-soft); font-size: 10px; }
.maintenance-warning { padding: 12px 13px; border-radius: 11px; color: #8b5a05; background: var(--warning-soft); font-size: 9px; line-height: 1.55; }
.audit-table { overflow-x: auto; }
.audit-row { min-width: 850px; display: grid; grid-template-columns: 140px 120px 150px minmax(260px,1fr) 120px; align-items: center; gap: 12px; padding: 12px 13px; border-top: 1px solid var(--line); font-size: 10px; }
.audit-row--head { border: 0; border-radius: 10px; color: var(--text-soft); background: var(--surface-soft); font-size: 9px; font-weight: 800; }
.audit-row strong { font-size: 10px; }
.audit-row span { color: var(--text-soft); }

@media (max-width: 1120px) {
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .performance-filter > .button { grid-column: 1 / -1; }
    .performance-team-card__header { align-items: flex-start; flex-direction: column; }
    .performance-team-card__metrics { width: 100%; }
    .performance-member-row { grid-template-columns: 1fr; }
    .member-daily-stats > div { align-items: flex-start; }
    .my-kpi-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .maintenance-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .runtime-error-panel { grid-template-columns: 1fr; }
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .my-kpi-filter { grid-template-columns: 1fr; }
    .performance-team-card__metrics,
    .member-daily-stats { grid-template-columns: repeat(2,1fr); }
    .team-diagnosis-row { grid-template-columns: 1fr; }
    .my-kpi-card__header { flex-direction: column; }
    .my-kpi-card__content { grid-template-columns: 1fr; }
    .my-kpi-value-grid { grid-template-columns: 1fr 1fr; }
    .maintenance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .my-kpi-value-grid { grid-template-columns: 1fr; }
}
.security-check-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.security-check-item { display:flex; align-items:center; gap:11px; padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.security-check-item__icon { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:11px; }
.security-check-item__icon--ok { color:var(--success); background:var(--success-soft); }
.security-check-item__icon--warning { color:var(--warning); background:var(--warning-soft); }
.security-check-item strong { display:block; font-size:10px; }
.security-check-item small { display:block; margin-top:3px; color:var(--text-soft); font-size:8px; }
.audit-filter { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto; align-items:end; gap:12px; padding:0; margin-bottom:16px; border:0; box-shadow:none; }
.audit-filter .form-field { margin:0; }
.audit-retention-form { display:flex; align-items:end; justify-content:flex-end; gap:10px; padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }
.audit-retention-form .form-field { min-width:180px; margin:0; }
@media (max-width:1120px) { .security-check-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px) { .security-check-grid,.audit-filter { grid-template-columns:1fr; } .audit-retention-form { align-items:stretch; flex-direction:column; } }

/* =========================================================
   TAHAP 14 - STABILISASI PERFORMANCE & DAILY CHECK
   ========================================================= */

.workspace-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 9px;
}

.workspace-hero__actions .button .icon {
    width: 15px;
    height: 15px;
    margin-right: 6px;
}

.data-warning-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border: 1px solid #f3d397;
    border-radius: 16px;
    color: #7d550a;
    background: #fff9ea;
    box-shadow: var(--shadow-sm);
}

.data-warning-panel__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--warning);
    background: #ffefc7;
}

.data-warning-panel strong {
    display: block;
    color: #6d4806;
    font-size: 12px;
}

.data-warning-panel p {
    margin: 4px 0 7px;
    color: #8a651c;
    font-size: 10px;
    line-height: 1.55;
}

.data-warning-panel ul {
    margin: 0;
    padding-left: 17px;
    color: #8a651c;
    font-size: 9px;
    line-height: 1.65;
}

.performance-trend-scroll {
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
    scrollbar-color: #cbd3e3 transparent;
}

.performance-trend-grid {
    min-width: max(680px, calc(var(--days, 7) * 58px));
    grid-template-columns: repeat(var(--days, 7), minmax(44px, 1fr));
}

.performance-team-card--success {
    border-top: 3px solid var(--success);
}

.performance-team-card--info {
    border-top: 3px solid #5d79e8;
}

.performance-team-card--warning {
    border-top: 3px solid var(--warning);
}

/* Daily Check Staff - refined workspace */
.daily-workspace-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
    border: 1px solid #dce3f5;
    border-radius: 20px;
    background:
        radial-gradient(circle at 88% 28%, rgba(73, 103, 255, .13), transparent 27%),
        linear-gradient(135deg, #ffffff, #f3f6ff);
    box-shadow: var(--shadow-sm);
}

.daily-workspace-hero--locked {
    border-color: #e1e5ed;
    background: linear-gradient(135deg, #fff, #f7f8fb);
}

.daily-workspace-hero__copy {
    min-width: 0;
}

.daily-workspace-hero__copy h2 {
    margin: 6px 0 7px;
    font-size: 25px;
    letter-spacing: -.04em;
}

.daily-workspace-hero__copy p {
    max-width: 720px;
    margin: 0;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.65;
}

.daily-workspace-hero__tools {
    min-width: 270px;
    display: grid;
    justify-items: end;
    gap: 10px;
}

.daily-date-navigation {
    display: flex;
    align-items: center;
    gap: 7px;
}

.daily-lock-card {
    min-width: 205px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid #dce2f3;
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
}

.daily-lock-card > .icon {
    width: 22px;
    height: 22px;
    color: var(--primary);
}

.daily-lock-card div {
    display: flex;
    flex-direction: column;
}

.daily-lock-card span {
    color: var(--text-faint);
    font-size: 8px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.daily-lock-card strong {
    margin-top: 3px;
    font-size: 12px;
}

.daily-check-form--refined {
    padding-bottom: 20px;
}

.daily-work-list {
    display: grid;
    gap: 16px;
}

.daily-work-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: 4px solid #c7cedd;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.daily-work-card--success { border-left-color: var(--success); }
.daily-work-card--info { border-left-color: #5d79e8; }
.daily-work-card--warning { border-left-color: var(--warning); }
.daily-work-card--danger { border-left-color: var(--danger); }
.daily-work-card--muted { border-left-color: #c7cedd; }
.daily-work-card--locked { background: #fbfcfd; }

.daily-work-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    padding: 18px 19px 15px;
}

.daily-work-card__identity {
    min-width: 0;
}

.daily-work-card__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.daily-work-card__title-row h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: -.02em;
}

.daily-work-card__identity > p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.daily-work-card__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--line);
}

.daily-work-card__facts > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--surface-soft);
}

.daily-work-card__facts span {
    color: var(--text-faint);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.daily-work-card__facts strong {
    overflow: hidden;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.daily-work-card__body {
    display: grid;
    grid-template-columns: minmax(270px, .68fr) minmax(0, 1.55fr);
    gap: 14px;
    padding: 16px 18px 18px;
}

.daily-entry-panel,
.daily-notes-panel {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.daily-entry-panel {
    background: linear-gradient(145deg, #fbfcff, #f5f7ff);
}

.daily-entry-panel__heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

.daily-entry-panel__heading > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 850;
}

.daily-entry-panel__heading > div {
    display: flex;
    flex-direction: column;
}

.daily-entry-panel__heading strong {
    font-size: 10px;
}

.daily-entry-panel__heading small {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.4;
}

.daily-note-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.daily-note-grid .form-field {
    margin: 0;
}

.daily-note-grid textarea {
    min-height: 116px;
}

.daily-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.daily-result-grid > div {
    display: flex;
    flex-direction: column;
    padding: 10px 11px;
    border: 1px solid #dde3f3;
    border-radius: 11px;
    background: #fff;
}

.daily-result-grid span {
    color: var(--text-faint);
    font-size: 8px;
}

.daily-result-grid strong {
    margin-top: 4px;
    font-size: 12px;
}

.daily-submit-bar--sticky,
.sidebar-collapsed .daily-submit-bar--sticky {
    position: sticky;
    right: auto;
    bottom: 14px;
    left: auto;
    margin-top: 18px;
    z-index: 20;
}

/* System Health */
.system-health-panel {
    margin-bottom: 20px;
    scroll-margin-top: 105px;
}

.section-description {
    max-width: 760px;
    margin: 7px 0 0;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.55;
}

.health-overall-badge {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.health-overall-badge .icon {
    width: 15px;
    height: 15px;
}

.health-overall-badge--ok {
    color: #087549;
    background: var(--success-soft);
}

.health-overall-badge--warning {
    color: #9a6508;
    background: var(--warning-soft);
}

.health-overall-badge--error {
    color: #b3313c;
    background: var(--danger-soft);
}

.health-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, .7fr)) minmax(190px, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.health-summary-grid > div,
.health-summary-grid > form {
    min-height: 68px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.health-summary-grid span {
    color: var(--text-faint);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.health-summary-grid strong {
    margin-top: 4px;
    font-size: 18px;
}

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

.health-check-row {
    display: grid;
    grid-template-columns: auto minmax(130px, .75fr) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
}

.health-check-row__status {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.health-check-row__status .icon {
    width: 15px;
    height: 15px;
}

.health-check-row__status--ok {
    color: var(--success);
    background: var(--success-soft);
}

.health-check-row__status--warning {
    color: var(--warning);
    background: var(--warning-soft);
}

.health-check-row__status--error {
    color: var(--danger);
    background: var(--danger-soft);
}

.health-check-row > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.health-check-row small {
    color: var(--text-faint);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.health-check-row strong {
    margin-top: 2px;
    font-size: 10px;
}

.health-check-row > span:last-child {
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.45;
    text-align: right;
}

@media (max-width: 1180px) {
    .daily-workspace-hero {
        align-items: flex-start;
    }

    .daily-work-card__body {
        grid-template-columns: 1fr;
    }

    .health-check-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .daily-workspace-hero {
        flex-direction: column;
    }

    .daily-workspace-hero__tools {
        width: 100%;
        justify-items: stretch;
    }

    .daily-date-navigation,
    .daily-lock-card {
        width: 100%;
    }

    .daily-date-navigation .date-filter-form {
        flex: 1;
    }

    .daily-date-navigation input {
        width: 100%;
    }

    .health-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .workspace-hero__actions,
    .workspace-hero__actions .button {
        width: 100%;
    }

    .daily-work-card__header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .daily-work-card__header .daily-target-status-stack {
        grid-column: 1 / -1;
        align-items: flex-start;
        margin-left: 52px;
    }

    .daily-work-card__facts,
    .daily-note-grid,
    .daily-result-grid,
    .health-summary-grid {
        grid-template-columns: 1fr;
    }

    .health-check-row {
        grid-template-columns: auto 1fr;
    }

    .health-check-row > span:last-child {
        grid-column: 1 / -1;
        text-align: left;
    }
}

/* =========================================================
   TAHAP 15 - MULTI ROLE, THEME, DAN DASHBOARD STAFF
   ========================================================= */

[data-theme="dark"] {
    --bg: #0c1220;
    --surface: #151d2e;
    --surface-soft: #1a2437;
    --surface-muted: #232e43;
    --text: #f2f5ff;
    --text-soft: #aeb8ce;
    --text-faint: #7f8aa3;
    --line: #29354a;
    --primary: #7084ff;
    --primary-dark: #5b70ef;
    --primary-soft: #202c55;
    --success: #42c990;
    --success-soft: #183d32;
    --warning: #f0b84f;
    --warning-soft: #45371c;
    --danger: #ff717a;
    --danger-soft: #4a252b;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-md: 0 18px 50px rgba(0, 0, 0, .28);
    color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] html { background: var(--bg); color: var(--text); }
[data-theme="dark"] .topbar { background: rgba(15, 22, 36, .9); border-color: var(--line); }
[data-theme="dark"] .sidebar { background: #080e1a; }
[data-theme="dark"] .panel,
[data-theme="dark"] .metric-card,
[data-theme="dark"] .alert-panel,
[data-theme="dark"] .team-section,
[data-theme="dark"] .progress-ring-card,
[data-theme="dark"] .profile-status-card,
[data-theme="dark"] .management-team-card,
[data-theme="dark"] .daily-work-card,
[data-theme="dark"] .daily-entry-panel,
[data-theme="dark"] .daily-notes-panel,
[data-theme="dark"] .observer-team-card,
[data-theme="dark"] .staff-home-metric,
[data-theme="dark"] .staff-home-target,
[data-theme="dark"] .staff-home-comm-row,
[data-theme="dark"] .staff-home-kpi-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .install-card,
[data-theme="dark"] .error-card { background: var(--surface); border-color: var(--line); color: var(--text); }
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .filter-button,
[data-theme="dark"] .icon-button { color: var(--text); background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] .task-row,
[data-theme="dark"] .daily-work-card__facts > div,
[data-theme="dark"] .staff-kpi-values div,
[data-theme="dark"] .health-check-row { background: var(--surface); color: var(--text-soft); }
[data-theme="dark"] .task-row--head,
[data-theme="dark"] .communication-card,
[data-theme="dark"] .profile-status-card blockquote,
[data-theme="dark"] .placeholder-page__notes,
[data-theme="dark"] .form-notice { background: var(--surface-soft); }
[data-theme="dark"] .progress-ring::before { background: var(--surface); }
[data-theme="dark"] .progress-ring { background: conic-gradient(var(--primary) calc(var(--value) * 1%), var(--surface-muted) 0); }
[data-theme="dark"] .daily-workspace-hero,
[data-theme="dark"] .staff-home-hero,
[data-theme="dark"] .observer-hero { border-color: #34415c; }
[data-theme="dark"] .notification-popover { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .notification-preview-item:hover { background: var(--surface-soft); }
[data-theme="dark"] .auth-page { background: var(--bg); }
[data-theme="dark"] .auth-form-area { background: var(--bg); }
[data-theme="dark"] .auth-card__header p,
[data-theme="dark"] .demo-account,
[data-theme="dark"] .login-role-guide { color: var(--text-soft); }

.theme-toggle { flex: 0 0 auto; }
.theme-toggle > span { display: grid; place-items: center; }
.theme-toggle > span[hidden] { display: none; }
.auth-theme-toggle {
    width: 44px; height: 44px; display: grid; place-items: center; position: fixed; top: 22px; right: 22px;
    z-index: 20; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #fff;
    background: rgba(17,24,42,.3); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm);
}
.auth-theme-toggle > span { display: grid; place-items: center; }
.auth-theme-toggle > span[hidden] { display: none; }
[data-theme="light"] .auth-theme-toggle { color: #fff; }

.login-role-guide { padding: 14px; margin-top: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.login-role-guide > strong { display: block; margin-bottom: 10px; font-size: 11px; }
.login-role-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.login-role-grid span { display: flex; flex-direction: column; padding: 9px; border-radius: 10px; background: var(--surface); }
.login-role-grid b { font-size: 9px; }
.login-role-grid small { margin-top: 3px; color: var(--text-soft); font-size: 8px; line-height: 1.4; }

/* Dashboard staff dengan ruang yang lebih lega */
.staff-home-hero {
    display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.65fr); align-items: center; gap: 30px;
    padding: 30px 32px; margin-bottom: 22px; overflow: hidden; position: relative; border: 1px solid #324b9e;
    border-radius: 24px; color: #fff; background: radial-gradient(circle at 82% 18%,rgba(255,255,255,.16),transparent 27%),linear-gradient(125deg,#182957,#334aa7 62%,#5d73e8);
    box-shadow: var(--shadow-md);
}
.staff-home-hero::after { content:""; width:260px; height:260px; position:absolute; right:13%; bottom:-205px; border:45px solid rgba(255,255,255,.07); border-radius:50%; }
.staff-home-hero__copy,.staff-home-hero__aside { position:relative; z-index:1; }
.staff-home-hero .section-kicker { color:#c8d1ff; }
.staff-home-hero h2 { margin:7px 0 10px; font-size:clamp(28px,3vw,40px); letter-spacing:-.05em; }
.staff-home-hero p { max-width:720px; margin:0; color:#d7defc; font-size:13px; line-height:1.7; }
.staff-home-hero__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.button--glass { color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.1); }
.button--glass:hover { background:rgba(255,255,255,.17); }
.staff-home-hero__aside { display:grid; gap:12px; }
.staff-home-lock { display:flex; align-items:center; gap:14px; padding:17px; border:1px solid rgba(255,255,255,.2); border-radius:17px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.staff-home-lock__icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; background:rgba(255,255,255,.14); }
.staff-home-lock__icon .icon { width:22px; height:22px; }
.staff-home-lock div { display:flex; flex-direction:column; }
.staff-home-lock small,.staff-home-lock span,.staff-home-date small { color:#c8d1f5; font-size:9px; }
.staff-home-lock strong { margin:3px 0; font-size:22px; letter-spacing:.05em; }
.staff-home-date { display:flex; flex-direction:column; padding:0 3px; }
.staff-home-date > span { font-size:11px; font-weight:750; }
.staff-home-date small { margin-top:4px; }

.staff-home-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.staff-home-metric { min-height:125px; display:flex; align-items:flex-start; gap:14px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:var(--shadow-sm); }
.staff-home-metric__icon { width:42px; height:42px; display:grid; place-items:center; flex:0 0 auto; border-radius:13px; color:var(--primary); background:var(--primary-soft); }
.staff-home-metric__icon--success { color:var(--success); background:var(--success-soft); }
.staff-home-metric__icon--warning { color:var(--warning); background:var(--warning-soft); }
.staff-home-metric > div { display:flex; min-width:0; flex-direction:column; }
.staff-home-metric small { color:var(--text-soft); font-size:10px; }
.staff-home-metric strong { margin:7px 0 4px; font-size:25px; letter-spacing:-.04em; }
.staff-home-metric p { margin:0; color:var(--text-faint); font-size:9px; }

.staff-home-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.7fr); align-items:start; gap:18px; margin-bottom:22px; }
.staff-home-daily { min-height:430px; }
.staff-home-side { display:grid; gap:18px; }
.staff-home-target-list { display:grid; gap:10px; }
.staff-home-target { display:grid; grid-template-columns:auto minmax(0,1fr) minmax(105px,.4fr) auto; align-items:center; gap:13px; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition); }
.staff-home-target:hover { transform:translateY(-2px); border-color:#bac5ef; box-shadow:var(--shadow-sm); }
.staff-home-target__number { width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:var(--primary); background:var(--primary-soft); font-size:10px; font-weight:850; }
.staff-home-target__body,.staff-home-target__value { min-width:0; display:flex; flex-direction:column; }
.staff-home-target__body strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.staff-home-target__body small,.staff-home-target__value small { margin-top:4px; color:var(--text-faint); font-size:8px; }
.staff-home-target__value { text-align:right; }
.staff-home-target__value b { font-size:10px; }
.staff-home-profile-card__head { display:flex; align-items:center; gap:13px; }
.staff-home-profile-card__head > div { display:flex; min-width:0; flex-direction:column; }
.staff-home-profile-card__head strong { font-size:12px; }
.staff-home-profile-card__head span,.staff-home-profile-card__head small { margin-top:3px; color:var(--text-soft); font-size:9px; }
.staff-home-profile-card blockquote { padding:14px; margin:18px 0 12px; border-radius:13px; color:var(--text-soft); background:var(--surface-soft); font-size:10px; line-height:1.6; }
.staff-home-communication { padding-bottom:16px; }
.staff-home-comm-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.staff-home-comm-row > span { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.staff-home-comm-row div { display:flex; min-width:0; flex-direction:column; }
.staff-home-comm-row strong { font-size:9px; }
.staff-home-comm-row small { margin-top:3px; color:var(--text-soft); font-size:8px; }
.staff-home-comm-row b { color:var(--primary); }
.staff-home-progress { margin-bottom:22px; }
.staff-home-progress-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.staff-home-progress-grid > div { padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.staff-home-progress-grid span { color:var(--text-soft); font-size:9px; }
.staff-home-progress-grid strong { float:right; font-size:10px; }
.staff-home-kpi { margin-bottom:28px; }
.staff-home-kpi__headline { display:flex; align-items:flex-end; flex-direction:column; gap:5px; }
.staff-home-kpi__headline strong { font-size:26px; letter-spacing:-.05em; }
.staff-home-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.staff-home-kpi-card { padding:15px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.staff-home-kpi-card > div:first-child { display:flex; flex-direction:column; min-height:42px; }
.staff-home-kpi-card > div:first-child span { color:var(--success); font-size:8px; font-weight:800; }
.staff-home-kpi-card > div:first-child strong { margin-top:5px; font-size:10px; line-height:1.45; }
.staff-home-kpi-card > b { display:block; margin:12px 0 4px; font-size:20px; }
.staff-home-kpi-card > small { display:block; margin-top:8px; color:var(--text-faint); font-size:8px; }

/* Dashboard read-only HRD dan Direktur */
.observer-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 28px; margin-bottom:22px; border:1px solid #dce3f5; border-radius:22px; background:linear-gradient(135deg,var(--surface),var(--primary-soft)); box-shadow:var(--shadow-sm); }
.observer-hero h2 { margin:6px 0 8px; font-size:28px; letter-spacing:-.04em; }
.observer-hero p { max-width:780px; margin:0; color:var(--text-soft); font-size:11px; line-height:1.65; }
.observer-hero__period { min-width:220px; display:flex; flex-direction:column; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.observer-hero__period span { color:var(--text-faint); font-size:8px; text-transform:uppercase; letter-spacing:.08em; }
.observer-hero__period strong { margin-top:5px; font-size:11px; }
.observer-team-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.observer-team-card { padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--surface-soft); }
.observer-team-card__head { display:flex; align-items:center; gap:10px; }
.observer-team-card__head > div { display:flex; flex-direction:column; }
.observer-team-card__head strong { font-size:11px; }
.observer-team-card__head small { margin-top:3px; color:var(--text-faint); font-size:8px; }
.observer-team-card__scores { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:15px; }
.observer-team-card__scores div { display:flex; flex-direction:column; padding:9px; border-radius:10px; background:var(--surface); }
.observer-team-card__scores span { color:var(--text-faint); font-size:7px; }
.observer-team-card__scores strong { margin-top:3px; font-size:12px; }
.observer-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:18px; }
.observer-action-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:17px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow-sm); }
.observer-action-card > .icon { color:var(--primary); }
.observer-action-card div { display:flex; flex-direction:column; }
.observer-action-card strong { font-size:11px; }
.observer-action-card span { margin-top:3px; color:var(--text-soft); font-size:8px; }
.observer-action-card b { color:var(--primary); }
.report-readonly-note { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.report-readonly-note .icon { color:var(--primary); }
.report-readonly-note strong { font-size:10px; }
.report-readonly-note p { margin:4px 0 0; color:var(--text-soft); font-size:9px; }

@media (max-width: 1250px) {
    .staff-home-metrics,.staff-home-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .observer-team-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
    .staff-home-hero,.staff-home-layout { grid-template-columns:1fr; }
    .staff-home-hero__aside { grid-template-columns:1fr 1fr; }
    .staff-home-side { grid-template-columns:1fr 1fr; }
    .observer-hero { align-items:flex-start; flex-direction:column; }
    .observer-hero__period { width:100%; }
}
@media (max-width: 720px) {
    .staff-home-hero { padding:24px 20px; }
    .staff-home-hero__aside,.staff-home-side,.staff-home-metrics,.staff-home-kpi-grid,.staff-home-progress-grid,.observer-team-grid,.observer-actions { grid-template-columns:1fr; }
    .staff-home-target { grid-template-columns:auto minmax(0,1fr); }
    .staff-home-target__value,.staff-home-target > .status-badge { grid-column:2; text-align:left; justify-self:start; }
    .login-role-grid { grid-template-columns:1fr; }
    .auth-theme-toggle { top:14px; right:14px; }
}


/* Tahap 15: identitas role baru dan mode audit Super Admin. */
.role-chip--super_admin { color:#5b3fc5; background:#efeaff; }
.role-chip--hrd { color:#087c63; background:#e8f8f3; }
.role-chip--director { color:#9a5900; background:#fff1d9; }
[data-theme="dark"] .role-chip--super_admin { color:#c7b9ff; background:#302657; }
[data-theme="dark"] .role-chip--hrd { color:#8ce0c7; background:#173d36; }
[data-theme="dark"] .role-chip--director { color:#ffd18a; background:#4a351c; }
.chat-audit-note { margin: 0 18px 18px; }

/* =========================================================
   TAHAP 16 - VISUAL POLISH, DARK MODE, CHART, COMPACT FILTER
   ========================================================= */

/* Transisi tema yang halus tanpa mengganggu layout dan input. */
html.theme-transitioning,
html.theme-transitioning body,
html.theme-transitioning body *:not(svg):not(path):not(circle):not(line):not(polyline) {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: 380ms;
    transition-timing-function: ease;
}

html.theme-transitioning body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: radial-gradient(circle at 84% 8%, rgba(112,132,255,.12), transparent 32%);
    animation: themeWash 480ms ease both;
}

@keyframes themeWash {
    0% { opacity: 0; }
    38% { opacity: 1; }
    100% { opacity: 0; }
}

/* Animasi ikon sederhana dan konsisten. */
.icon,
.nav-item__icon,
.metric-icon,
.staff-home-metric__icon,
.attention-item__icon,
.team-card__avatar,
.priority-number {
    transition: transform 220ms ease, color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.nav-item:hover .nav-item__icon,
.nav-item:focus-visible .nav-item__icon {
    transform: translateY(-1px) scale(1.1);
}

.nav-item.is-active .nav-item__icon,
.nav-item.is-active-parent .nav-item__icon {
    animation: iconSettle 420ms ease both;
}

.icon-button:hover .icon,
.table-action:hover .icon,
.profile-logout:hover .icon,
.sidebar__toggle:hover .icon {
    transform: rotate(-7deg) scale(1.1);
}

.button:hover .icon,
.text-link:hover .icon,
.team-card__link:hover .icon {
    transform: translateX(2px) scale(1.06);
}

.metric-card:hover .metric-icon,
.staff-home-metric:hover .staff-home-metric__icon,
.attention-item:hover .attention-item__icon {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 22px rgba(73,103,255,.15);
}

.theme-toggle.is-switching .icon,
.auth-theme-toggle.is-switching .icon {
    animation: themeIconSpin 480ms cubic-bezier(.2,.8,.2,1) both;
}

.notification-button .icon {
    transform-origin: 50% 12%;
}
.notification-button:hover .icon {
    animation: bellRing 560ms ease both;
}

@keyframes themeIconSpin {
    0% { transform: rotate(0) scale(1); opacity: 1; }
    48% { transform: rotate(145deg) scale(.72); opacity: .35; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

@keyframes bellRing {
    0%,100% { transform: rotate(0); }
    20% { transform: rotate(11deg); }
    42% { transform: rotate(-9deg); }
    64% { transform: rotate(6deg); }
    82% { transform: rotate(-3deg); }
}

@keyframes iconSettle {
    0% { transform: scale(.82); opacity: .55; }
    65% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); }
}

/* Grafik garis interaktif dashboard. */
.interactive-line-chart {
    min-height: 300px;
    position: relative;
    padding: 8px 4px 0;
}

.interactive-line-chart__canvas {
    height: 258px;
    position: relative;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(73,103,255,.035), transparent 66%);
}

.interactive-line-chart__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.interactive-chart-grid {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 4 7;
    vector-effect: non-scaling-stroke;
}

.interactive-chart-axis-label {
    fill: var(--text-faint);
    font-size: 10px;
    font-weight: 650;
}

.interactive-chart-axis-label--x {
    font-size: 9px;
}

.interactive-chart-series {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke-dashoffset 1100ms cubic-bezier(.25,.75,.2,1), opacity 250ms ease;
}

.interactive-chart-series--score { stroke: var(--primary); }
.interactive-chart-series--compliance { stroke: var(--success); }

.interactive-chart-area {
    opacity: 0;
    animation: chartAreaReveal 900ms 250ms ease forwards;
}

.interactive-chart-gradient-start { stop-color: var(--primary); stop-opacity: .26; }
.interactive-chart-gradient-end { stop-color: var(--primary); stop-opacity: 0; }

.interactive-chart-point {
    fill: var(--surface);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: chartPointReveal 380ms 650ms ease forwards;
    transition: r 160ms ease, filter 160ms ease, transform 160ms ease;
}

.interactive-chart-point--score { stroke: var(--primary); }
.interactive-chart-point--compliance { stroke: var(--success); }
.interactive-chart-point:hover,
.interactive-chart-point:focus { r: 7; filter: drop-shadow(0 5px 8px rgba(30,45,95,.22)); outline: none; }

.interactive-chart-crosshair {
    stroke: var(--text-faint);
    stroke-width: 1;
    stroke-dasharray: 4 5;
    opacity: .65;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.interactive-chart-overlay { cursor: crosshair; }

.interactive-chart-tooltip {
    min-width: 180px;
    display: grid;
    gap: 7px;
    position: absolute;
    z-index: 8;
    transform: translate(12px, calc(-100% - 12px));
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(14px);
    pointer-events: none;
}

.interactive-chart-tooltip.is-left {
    transform: translate(calc(-100% - 12px), calc(-100% - 12px));
}

.interactive-chart-tooltip[hidden] { display: none; }
.interactive-chart-tooltip strong { font-size: 11px; }
.interactive-chart-tooltip span { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: 10px; }
.interactive-chart-tooltip em { font-style: normal; }

.interactive-line-chart__legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 9px;
}

.interactive-line-chart__legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-dot { width: 8px; height: 8px; display: inline-block; flex: 0 0 auto; border-radius: 50%; }
.chart-legend-dot--score { background: var(--primary); }
.chart-legend-dot--compliance { background: var(--success); }

@keyframes chartAreaReveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes chartPointReveal { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Filter operasional dibuat lebih ringkas dan tidak mendominasi halaman. */
:is(.workspace-filter, .performance-filter, .daily-manager-filter, .unlock-filter-toolbar,
    .report-filter, .management-filter, .obstacle-filter, .kpi-period-filter,
    .staff-filter-panel, .my-kpi-filter, .audit-filter, .notification-filter-form) {
    gap: 10px;
}

.panel:is(.workspace-filter, .performance-filter, .report-filter),
.daily-filter-panel,
.unlock-filter-panel {
    padding: 15px 17px;
}

:is(.workspace-filter, .performance-filter, .daily-manager-filter, .unlock-filter-toolbar,
    .report-filter, .management-filter, .obstacle-filter, .kpi-period-filter,
    .staff-filter-panel, .my-kpi-filter, .audit-filter, .notification-filter-form)
:is(input, select, .search-field) {
    min-height: 40px;
}

:is(.workspace-filter, .performance-filter, .daily-manager-filter, .unlock-filter-toolbar,
    .report-filter, .management-filter, .obstacle-filter, .kpi-period-filter,
    .staff-filter-panel, .my-kpi-filter, .audit-filter, .notification-filter-form)
label > span {
    font-size: 9px;
}

.workspace-filter {
    grid-template-columns: minmax(240px, 1.35fr) minmax(145px, .55fr) minmax(145px, .55fr) auto;
    align-items: end;
}
.workspace-filter--simple { grid-template-columns: minmax(260px, 1fr) auto; }
.workspace-filter__actions { justify-content: flex-end; }

.performance-filter,
.performance-filter--range,
.performance-filter--wide {
    grid-template-columns: repeat(4, minmax(145px, .75fr)) auto;
    align-items: end;
}

.report-filter { grid-template-columns: minmax(190px, .7fr) minmax(190px, .7fr) auto; justify-content: start; }
.report-filter--export { grid-template-columns: repeat(3, minmax(170px, .7fr)) auto; }

.daily-manager-filter { grid-template-columns: repeat(3, minmax(150px, .72fr)) auto; }
.unlock-filter-toolbar { grid-template-columns: repeat(3, minmax(150px, .72fr)) auto; }
.my-kpi-filter { grid-template-columns: minmax(170px,.65fr) minmax(190px,.75fr) auto; }
.management-filter { max-width: 620px; }
.management-filter--compact { max-width: 410px; }

:is(.workspace-filter, .performance-filter, .report-filter, .daily-manager-filter,
    .unlock-filter-toolbar, .my-kpi-filter) > .button,
.workspace-filter__actions .button {
    min-height: 40px;
    padding-inline: 14px;
}

/* Dark mode: seluruh kartu, tabel, alert, dan field memakai kontras konsisten. */
[data-theme="dark"] body { background: var(--bg); }
[data-theme="dark"] .main-area,
[data-theme="dark"] .page-content { background: var(--bg); }
[data-theme="dark"] .topbar { box-shadow: 0 1px 0 rgba(255,255,255,.02); }

[data-theme="dark"] :is(
    .attention-item, .priority-item, .team-card, .position-row, .brand-card,
    .manager-member-card, .manager-team-card, .manager-obstacle-card, .manager-unlock-card,
    .performance-team-card, .performance-member-card, .performance-member-row,
    .history-period-card, .history-row, .personal-history-row, .compliance-row,
    .kpi-result-card, .my-kpi-card, .my-kpi-source-card, .staff-kpi-detail-card,
    .staff-obstacle-card, .unlock-request-card, .unlock-policy-card,
    .notification-center-item, .notification-preview-item, .notification-type-card,
    .notification-global-card, .role-selector-card, .role-selector-item,
    .permission-matrix-card, .permission-row, .maintenance-card, .config-card,
    .security-check-item, .audit-row, .export-format-card, .export-history-row,
    .report-team-card, .report-issue-row, .report-member-row, .issue-card,
    .issue-team-card, .ai-section-card, .ai-root-cause-card, .ai-status-card,
    .ai-history-item, .account-section-card, .status-suggestion-card,
    .chat-welcome-card, .staff-home-profile-card, .staff-home-comm-row,
    .staff-home-kpi-card, .daily-lock-card
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .attention-item__main p, .attention-item__main > span,
    .priority-item p, .team-card__header span, .team-card__stats span,
    .position-row p, .position-row__meta, .brand-card p,
    .manager-member-card p, .performance-member-card p,
    .report-team-card p, .report-issue-row p, .staff-home-target__body small,
    .staff-home-target__value small, .staff-home-profile-card p,
    .staff-home-comm-row p, .my-kpi-card p, .kpi-result-card p
) { color: var(--text-soft); }

[data-theme="dark"] :is(
    .task-row--head, .period-banner, .performance-period-banner, .report-period-banner,
    .daily-work-card__facts, .daily-work-card__facts > div, .staff-kpi-values div,
    .relation-flow, .relation-flow__source, .relation-flow__recipient,
    .brand-chip-row, .target-template-meta, .workspace-card__meta,
    .form-notice, .data-warning-panel, .report-insight-panel,
    .notification-toolbar, .profile-status-card blockquote
) {
    color: var(--text-soft);
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .button--soft, .button--ghost, .table-action, .text-link,
    .team-card__link, .profile-status-card a
) { color: #9cafff; }

[data-theme="dark"] .button--soft,
[data-theme="dark"] .button--ghost,
[data-theme="dark"] .table-action { background: var(--primary-soft); border-color: #35446b; }
[data-theme="dark"] .button--soft:hover,
[data-theme="dark"] .button--ghost:hover,
[data-theme="dark"] .table-action:hover { background: #293965; }

[data-theme="dark"] .attention-item { box-shadow: inset 0 0 0 1px rgba(255,255,255,.01); }
[data-theme="dark"] .status-badge--muted { color: #bcc7dc; background: #2a3549; }
[data-theme="dark"] .status-badge--info { color: #c9d2ff; background: #26335c; }
[data-theme="dark"] .search-field { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] select option { color: var(--text); background: var(--surface); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #75829b; opacity: 1; }
[data-theme="dark"] .interactive-line-chart__canvas { background: linear-gradient(180deg, rgba(112,132,255,.07), transparent 68%); }
[data-theme="dark"] .interactive-chart-point { fill: var(--surface); }
[data-theme="dark"] .interactive-chart-tooltip { background: rgba(21,29,46,.94); }
[data-theme="dark"] .chart-note { color: var(--text-faint); }
[data-theme="dark"] .attention-clear-state { color: var(--text); background: var(--success-soft); border-color: #2d5d4e; }
[data-theme="dark"] .alert--success { color: #9ce6c6; background: #173b31; border-color: #2c6957; }
[data-theme="dark"] .alert--danger { color: #ffadb3; background: #402329; border-color: #6c333b; }
[data-theme="dark"] .alert--warning { color: #f7d58f; background: #3b301c; border-color: #685229; }
[data-theme="dark"] .metric-card__foot--danger { color: #ff8c94; }
[data-theme="dark"] .workspace-form-panel,
[data-theme="dark"] .management-form-panel,
[data-theme="dark"] .staff-obstacle-form-panel { background: var(--surface); border-color: var(--line); }

@media (max-width: 1180px) {
    .workspace-filter,
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .report-filter,
    .report-filter--export,
    .daily-manager-filter,
    .unlock-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .workspace-filter__actions,
    :is(.performance-filter, .report-filter, .daily-manager-filter, .unlock-filter-toolbar) > .button {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .interactive-line-chart { min-height: 275px; }
    .interactive-line-chart__canvas { height: 230px; }
    .interactive-chart-axis-label { font-size: 9px; }
    .interactive-chart-tooltip { min-width: 155px; }
    .interactive-line-chart__legend { justify-content: flex-start; }

    .workspace-filter,
    .workspace-filter--simple,
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .report-filter,
    .report-filter--export,
    .daily-manager-filter,
    .unlock-filter-toolbar,
    .my-kpi-filter {
        grid-template-columns: 1fr;
    }
    .workspace-filter__actions,
    :is(.performance-filter, .report-filter, .daily-manager-filter, .unlock-filter-toolbar) > .button {
        grid-column: auto;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning,
    html.theme-transitioning body,
    html.theme-transitioning body *,
    .icon,
    .nav-item__icon,
    .metric-icon,
    .interactive-chart-series,
    .interactive-chart-area,
    .interactive-chart-point {
        animation: none !important;
        transition-duration: 0ms !important;
    }
}

/* =========================================================
   TAHAP 18 - AUDIT DARK MODE, LOGIN BERDASARKAN ROLE,
   DAN STANDAR KETERBACAAN ANTARMUKA
   ========================================================= */

:root {
    --font-body: 15px;
    --font-content: 13px;
    --font-meta: 11px;
    --font-label: 12px;
}

body { font-size: var(--font-body); line-height: 1.5; }

/* Standar minimum teks agar informasi operasional tidak terlalu kecil. */
.page-content :is(p, li, td, th, input, select, textarea, button) {
    font-size: var(--font-content);
}

.page-content small,
.page-content :is(.field-helper, .text-muted-small, .result-count, .chart-note,
    .section-description, .position-row__meta, .brand-card__meta,
    .manager-item-row small, .report-issue-row span:not(.status-dot),
    .report-note-actions small, .daily-entry-panel__heading small,
    .daily-work-card__facts span, .chat-bubble > span,
    .staff-home-target__body small, .staff-home-target__value small) {
    font-size: var(--font-meta) !important;
    line-height: 1.5;
}

.page-content :is(.form-field > span, .form-field > label, label > span,
    .workspace-filter label > span, .performance-filter label > span,
    .report-filter label > span, .management-filter label > span,
    .daily-manager-filter label > span, .unlock-filter-toolbar label > span,
    .my-kpi-filter label > span, .audit-filter label > span,
    .notification-filter-form label > span) {
    font-size: var(--font-label) !important;
    line-height: 1.4;
}

.page-content .section-kicker { font-size: 11px; }
.page-content :is(.compact-metric > span, .metric-card__top, .team-card__stats span) { font-size: 11px; }
.page-content :is(.compact-metric small, .metric-card__foot) { font-size: 11px; }
.page-content :is(.manager-item-row, .manager-item-row--head) { font-size: 12px; }
.page-content .manager-item-row strong { font-size: 13px; }
.page-content .chat-reference { font-size: 11px; }
.page-content .chat-contact__copy small { font-size: 11px; }
.page-content .chat-contact__copy span { font-size: 12px; }
.page-content .chat-bubble p { font-size: 13px; }
.page-content .report-issue-row strong { font-size: 12px; }
.page-content .daily-entry-panel__heading strong { font-size: 13px; }
.page-content .daily-work-card__facts strong { font-size: 12px; }

.auth-card .form-field > span { font-size: 12px; }
.auth-card :is(input, select) { min-height: 49px; font-size: 14px; }
.auth-card .field-helper { color: var(--text-soft); font-size: 11px; line-height: 1.5; }
.auth-card__header p { font-size: 13px; }

/* Dark mode menyeluruh untuk halaman operasional dan pengaturan. */
[data-theme="dark"] {
    --text-soft: #c3cce0;
    --text-faint: #98a5bd;
    --line: #334158;
}

[data-theme="dark"] .page-content :is(h1, h2, h3, h4, h5, h6, label, th, td) {
    color: var(--text);
}

[data-theme="dark"] .page-content :is(p, small, .field-helper, .text-muted-small,
    .section-description, .result-count, .empty-copy) {
    color: var(--text-soft);
}

[data-theme="dark"] :is(
    .compact-metric, .daily-filter-panel, .daily-lock-card,
    .daily-entry-panel, .daily-notes-panel, .daily-result-grid > div,
    .manager-team-card, .manager-member-card, .manager-item-row,
    .performance-team-card, .performance-member-card, .performance-member-row,
    .performance-trend-panel, .issue-team-card, .issue-card,
    .history-period-card, .history-row, .history-row--head,
    .chat-layout, .chat-sidebar, .chat-panel, .chat-contact,
    .chat-bubble, .chat-composer, .chat-welcome-card,
    .manager-obstacle-card, .staff-obstacle-history, .staff-obstacle-card,
    .staff-obstacle-form-panel, .staff-manager-response,
    .unlock-filter-panel, .manager-unlock-card, .unlock-policy-card,
    .unlock-form-panel, .unlock-history-panel, .unlock-request-card,
    .report-trend-panel, .report-team-card, .report-issue-row,
    .report-member-row, .report-note-panel, .report-readonly-note,
    .export-format-card, .export-history-panel, .export-history-row,
    .ai-control-panel, .ai-history-panel, .ai-history-item,
    .ai-result-column, .ai-section-card, .ai-root-cause-card,
    .ai-status-card, .ai-empty-state,
    .management-list-panel, .management-form-panel, .management-team-card,
    .position-row, .workspace-list-panel, .workspace-form-panel,
    .config-card, .brand-card, .brand-assignment-panel,
    .brand-assignment-row, .maintenance-card, .system-health-panel,
    .health-check-row, .security-check-item, .audit-row,
    .profile-hero, .profile-editor-card, .profile-side-card,
    .profile-photo-editor, .profile-readonly-grid > div,
    .status-editor-card, .status-suggestion-card, .status-rule-note,
    .confirm-modal__dialog, .page-tabs
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .daily-entry-panel,
    .daily-work-card__facts,
    .daily-work-card__facts > div,
    .daily-result-grid > div,
    .manager-item-row--head,
    .chat-sidebar,
    .chat-messages,
    .chat-composer,
    .report-period-banner,
    .performance-period-banner,
    .period-banner,
    .workspace-form-section,
    .config-card__facts,
    .relation-flow,
    .profile-photo-editor,
    .profile-readonly-grid > div,
    .status-rule-note,
    .audit-row--head
) {
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .daily-entry-panel {
    background: linear-gradient(145deg, #1a2437, #172033);
}

[data-theme="dark"] .chat-messages {
    background:
        radial-gradient(circle at 10% 20%, rgba(112, 132, 255, .08), transparent 24%),
        var(--surface-soft);
}

[data-theme="dark"] .chat-contact:hover,
[data-theme="dark"] .chat-contact.is-active { background: var(--primary-soft); }

[data-theme="dark"] .chat-message:not(.is-mine) .chat-bubble {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] .chat-composer textarea,
[data-theme="dark"] .chat-link-selects select { background: var(--surface-soft); }

[data-theme="dark"] :is(
    .manager-item-row, .history-row, .report-member-row, .report-issue-row,
    .audit-row, .brand-assignment-row, .position-row,
    .manager-obstacle-card, .manager-unlock-card,
    .notification-center-item, .export-history-row
) { border-color: var(--line); }

[data-theme="dark"] :is(
    .manager-item-row small, .manager-item-row--head,
    .daily-work-card__facts span, .daily-entry-panel__heading small,
    .history-row small, .report-issue-row span:not(.status-dot),
    .report-member-row small, .audit-row small,
    .config-card__facts span, .brand-card__meta,
    .profile-readonly-grid span, .status-rule-note p
) { color: var(--text-faint); }

[data-theme="dark"] :is(
    .manager-item-row strong, .daily-work-card__facts strong,
    .daily-entry-panel__heading strong, .history-row strong,
    .report-issue-row strong, .report-member-row strong,
    .config-card__facts strong, .brand-card strong,
    .profile-readonly-grid strong, .confirm-modal__copy h2
) { color: var(--text); }

[data-theme="dark"] .confirm-modal__dialog {
    background: #151d2e;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .48);
}
[data-theme="dark"] .confirm-modal__backdrop { background: rgba(2, 6, 14, .76); }
[data-theme="dark"] .confirm-modal__copy p { color: var(--text-soft); }

[data-theme="dark"] .profile-hero {
    background: linear-gradient(135deg, #151d2e, #1b2740);
}
[data-theme="dark"] .profile-hero__status { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] .profile-avatar--xxl { border-color: var(--surface); }

[data-theme="dark"] :is(.status-suggestion-card:hover, .export-format-card:hover,
    .config-card:hover, .brand-card:hover, .position-row:hover) {
    border-color: #53658a;
}

[data-theme="dark"] .ai-setup-notice {
    color: #f4d99a;
    background: #3d321e;
    border-color: #725b2d;
}
[data-theme="dark"] .ai-setup-notice code { color: #ffe5a9; background: rgba(255,255,255,.06); }

[data-theme="dark"] :is(.button--delete, .button--danger-soft) {
    color: #ffabb1;
    background: #43252b;
    border-color: #69343d;
}

[data-theme="dark"] .switch-control { background: #38455e; }
[data-theme="dark"] .switch-control input:checked + span { background: var(--primary); }
[data-theme="dark"] .status-badge--success { color: #9ce6c6; background: #173b31; }
[data-theme="dark"] .status-badge--warning { color: #f6d384; background: #41351e; }
[data-theme="dark"] .status-badge--danger { color: #ffadb3; background: #402329; }

/* Transisi tema juga mencakup elemen yang sebelumnya masih berubah mendadak. */
html.theme-transitioning :is(
    .daily-entry-panel, .daily-notes-panel, .daily-result-grid > div,
    .chat-sidebar, .chat-panel, .chat-messages, .chat-bubble, .chat-composer,
    .performance-team-card, .performance-member-row, .issue-card,
    .history-row, .report-team-card, .export-format-card,
    .ai-section-card, .management-form-panel, .config-card,
    .brand-card, .maintenance-card, .profile-hero, .confirm-modal__dialog
) {
    transition: color 420ms ease, background-color 420ms ease,
        border-color 420ms ease, box-shadow 420ms ease, background 420ms ease !important;
}

/* Login hanya menampilkan pilihan role; rincian hak akses tidak ditampilkan. */
.auth-card select { width: 100%; }
.auth-card .field-helper { margin-top: -2px; }

@media (max-width: 680px) {
    :root { --font-body: 14px; --font-content: 13px; --font-meta: 11px; }
    .page-content { padding-inline: 15px; }
}

/* Komponen tambahan yang masih memakai warna terang tetap. */
[data-theme="dark"] :is(
    .staff-kpi-detail-card, .staff-kpi-value-grid > div,
    .staff-kpi-manager-note, .my-kpi-card, .my-kpi-value-grid > div,
    .my-kpi-card__note, .staff-obstacle-card > footer,
    .ai-recommendation-row, .notification-popover,
    .notification-center-item.is-unread, .permission-row.is-locked,
    .status-suggestion-list button, .password-toggle-inline,
    .input-suffix, .page-tab, .search-field
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .staff-kpi-score-ring::before { background: var(--surface); }
[data-theme="dark"] .status-suggestion-list button { color: var(--text-soft); }
[data-theme="dark"] .status-suggestion-list button:hover { color: var(--text); background: var(--primary-soft); }
[data-theme="dark"] .page-tab.is-active { color: var(--primary); background: var(--primary-soft); }
[data-theme="dark"] .notification-center-item.is-unread { border-left-color: var(--primary); }
[data-theme="dark"] .role-selector-item > span { color: #c9d2ff; background: var(--primary-soft); }
[data-theme="dark"] .setting-toggle-row input::after,
[data-theme="dark"] .permission-row input::after,
[data-theme="dark"] .notification-type-row input::after,
[data-theme="dark"] .toggle-switch-control > span::after { background: #f7f9ff; }

[data-theme="dark"] :is(
    .daily-target-card, .manager-daily-attention,
    .data-table-wrap, .data-table tbody tr,
    .table-stack, .daily-target-card__meta
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}
[data-theme="dark"] .data-table th { color: var(--text-soft); background: var(--surface-muted); }
[data-theme="dark"] .data-table tbody tr:hover { background: var(--surface-soft); }
[data-theme="dark"] .daily-target-card__meta { background: var(--surface-soft); }
[data-theme="dark"] .daily-target-card input:disabled,
[data-theme="dark"] .daily-target-card select:disabled,
[data-theme="dark"] .daily-target-card textarea:disabled {
    color: var(--text-soft);
    background: var(--surface-muted);
    opacity: .82;
}
[data-theme="dark"] .manager-daily-attention blockquote { color: #f3d28b; background: var(--warning-soft); }
.page-content .daily-target-card__meta span,
.page-content .daily-target-card .form-field em,
.page-content .workspace-form-section__title > span { font-size: 11px; }
.page-content .daily-target-card__meta strong,
.page-content .workspace-form-section__title strong { font-size: 12px; }

/* =========================================================
   TAHAP 18 - FINAL DARK MODE SURFACE AUDIT,
   CACHE BUSTING, AND ACCESSIBILITY POLISH
   ========================================================= */

/* Skip navigation improves keyboard access without affecting the visual layout. */
.skip-link {
    position: fixed;
    top: 10px;
    left: 50%;
    z-index: 9999;
    padding: 10px 15px;
    border: 2px solid var(--primary);
    border-radius: 11px;
    color: #fff;
    background: var(--primary-dark);
    box-shadow: var(--shadow-md);
    font-size: 13px;
    font-weight: 800;
    transform: translate(-50%, -160%);
    transition: transform 180ms ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Visible keyboard focus across operational pages. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 72%, #fff);
    outline-offset: 3px;
}

/* Theme changes now cover all remaining timed, period, hero, and status panels. */
html.theme-transitioning body,
html.theme-transitioning body *:not(svg):not(path):not(circle):not(line):not(rect):not(text) {
    transition-property: color, background-color, border-color, box-shadow, fill, stroke;
    transition-duration: 420ms;
    transition-timing-function: ease;
}

[data-theme="dark"] :is(
    .daily-hero,
    .management-hero,
    .workspace-hero,
    .workspace-hero--attention,
    .communication-hero,
    .kpi-hero,
    .report-hero,
    .ai-hero,
    .profile-hero,
    .settings-hero,
    .notification-center-hero,
    .observer-hero,
    .daily-workspace-hero,
    .team-performance-hero
) {
    color: var(--text);
    border-color: var(--line);
    background:
        radial-gradient(circle at 84% 24%, rgba(112, 132, 255, .12), transparent 29%),
        linear-gradient(135deg, #151e30 0%, #1a263c 100%);
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .workspace-hero--attention {
    background:
        radial-gradient(circle at 84% 24%, rgba(255, 113, 122, .10), transparent 29%),
        linear-gradient(135deg, #181f31 0%, #272034 100%);
}

[data-theme="dark"] :is(
    .daily-hero,
    .management-hero,
    .workspace-hero,
    .communication-hero,
    .kpi-hero,
    .report-hero,
    .ai-hero,
    .profile-hero,
    .settings-hero,
    .notification-center-hero,
    .observer-hero,
    .daily-workspace-hero,
    .team-performance-hero
) :is(h1, h2, h3, strong) { color: var(--text); }

[data-theme="dark"] :is(
    .daily-hero,
    .management-hero,
    .workspace-hero,
    .communication-hero,
    .kpi-hero,
    .report-hero,
    .ai-hero,
    .profile-hero,
    .settings-hero,
    .notification-center-hero,
    .observer-hero,
    .daily-workspace-hero,
    .team-performance-hero
) :is(p, small, span:not(.status-badge):not(.section-kicker)) { color: var(--text-soft); }

[data-theme="dark"] :is(
    .daily-lock-chip,
    .daily-lock-chip.is-locked,
    .daily-lock-card,
    .date-nav-button,
    .lock-notice,
    .daily-submit-bar,
    .period-banner,
    .performance-period-banner,
    .report-period-banner,
    .observer-hero__period,
    .profile-hero__status,
    .unlock-active-notice,
    .unlock-date-stat,
    .notification-toolbar,
    .health-summary-grid > div,
    .health-summary-grid > form
) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}

/* Time panels that sit on blue hero areas keep a translucent dark-glass treatment. */
[data-theme="dark"] :is(
    .welcome-panel__time,
    .countdown-card,
    .staff-page-hero__period,
    .staff-home-lock
) {
    color: #f4f6ff;
    border-color: rgba(190, 201, 255, .24);
    background: rgba(8, 14, 29, .36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] :is(
    .welcome-panel__time,
    .countdown-card,
    .staff-page-hero__period,
    .staff-home-lock
) :is(span, small) { color: #c7d0ef; }

[data-theme="dark"] :is(
    .welcome-panel__time,
    .countdown-card,
    .staff-page-hero__period,
    .staff-home-lock
) :is(strong, .icon) { color: #f7f8ff; }

[data-theme="dark"] .daily-lock-chip {
    color: #cbd4ff;
    background: #202d52;
    border-color: #40517e;
}
[data-theme="dark"] .daily-lock-chip.is-locked {
    color: var(--text-soft);
    background: var(--surface-muted);
    border-color: var(--line);
}
[data-theme="dark"] .daily-lock-chip span,
[data-theme="dark"] .daily-lock-card span,
[data-theme="dark"] .observer-hero__period span,
[data-theme="dark"] .period-banner span,
[data-theme="dark"] .report-period-banner span,
[data-theme="dark"] .performance-period-banner span { color: var(--text-soft); }
[data-theme="dark"] .daily-lock-chip strong,
[data-theme="dark"] .daily-lock-card strong,
[data-theme="dark"] .observer-hero__period strong,
[data-theme="dark"] .period-banner strong,
[data-theme="dark"] .report-period-banner strong,
[data-theme="dark"] .performance-period-banner strong { color: var(--text); }

/* Remaining light fixed values in Daily Check and management forms. */
[data-theme="dark"] :is(
    .date-filter-form input,
    .daily-value-input input,
    .daily-target-card select,
    .daily-target-card textarea,
    .daily-manager-filter input,
    .daily-manager-filter select,
    .unlock-request-form select,
    .unlock-request-form textarea,
    .manager-unlock-decision select,
    .manager-unlock-decision textarea
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .daily-value-input > span {
    color: var(--text-soft);
    background: var(--surface-muted);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .daily-target-card,
    .daily-work-card,
    .manager-daily-attention,
    .manager-team-card,
    .manager-member-card,
    .daily-filter-panel,
    .manager-attention-panel
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .daily-target-card__meta,
[data-theme="dark"] .daily-work-card__facts,
[data-theme="dark"] .daily-work-card__facts > div {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .daily-submit-bar {
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px);
}

/* Generic contrast guard for helper content that was still too faint in dark mode. */
[data-theme="dark"] .page-content :is(
    .section-kicker,
    .form-field > span,
    .form-field small,
    .field-helper,
    .text-muted-small,
    .result-count,
    .chart-note,
    .manager-daily-attention small,
    .daily-target-card__meta span,
    .daily-result-strip,
    .daily-entry-panel__heading small,
    .workspace-form-section__title > span
) { color: #aeb9d0; }

[data-theme="dark"] .section-kicker--danger { color: #ff8e96; }
[data-theme="dark"] .section-kicker--success { color: #6ed7a8; }

/* Minimum readable sizing for time and status panels. */
:is(.daily-lock-chip, .daily-lock-card, .observer-hero__period, .welcome-panel__time,
    .countdown-card, .staff-page-hero__period, .staff-home-lock) span { font-size: 11px; }
:is(.daily-lock-chip, .daily-lock-card, .observer-hero__period, .welcome-panel__time,
    .countdown-card, .staff-page-hero__period, .staff-home-lock) strong { font-size: 14px; }

/* Dark calendar controls and native controls stay legible in Chromium. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.35);
    opacity: .82;
}

/* Prevent browser autofill from restoring a bright background. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-soft) inset;
    transition: background-color 9999s ease-out 0s;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link,
    html.theme-transitioning body,
    html.theme-transitioning body * { transition: none !important; }
}

/* Secondary surface audit: remove remaining fixed light surfaces from every module. */
[data-theme="dark"] :is(
    .page-tabs,
    .target-template-card__metrics > div,
    .day-picker__options span,
    .day-picker__presets button,
    .kpi-member-card,
    .auto-kpi-card,
    .config-card__facts > div,
    .relation-flow__node,
    .performance-member-row,
    .kpi-result-card,
    .issue-card,
    .staff-kpi-detail-card,
    .staff-kpi-value-grid > div,
    .staff-obstacle-card,
    .notification-popover,
    .my-kpi-card,
    .my-kpi-value-grid > div,
    .maintenance-card,
    .health-check-row,
    .daily-notes-panel,
    .daily-result-grid > div,
    .data-table-wrap,
    .table-stack
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .staff-kpi-detail-card__header,
    .my-kpi-card__header,
    .target-template-card__metrics > div,
    .config-card__facts > div,
    .relation-flow__node,
    .daily-result-grid > div
) {
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .report-note-form textarea,
    .ai-analysis-form textarea,
    .management-form textarea,
    .obstacle-filter select,
    .performance-filter select,
    .kpi-result-input select,
    .brand-checkbox span,
    .day-picker__options span,
    .day-picker__presets button
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .sidebar__toggle {
    color: var(--text-soft);
    background: var(--surface);
    border-color: var(--line);
}
[data-theme="dark"] .sidebar__toggle:hover { color: var(--primary); background: var(--surface-soft); }

[data-theme="dark"] .data-warning-panel {
    color: #f4d99a;
    background: #3d321e;
    border-color: #725b2d;
}

[data-theme="dark"] .role-chip--director { color: #f3cd86; background: #42331c; }
[data-theme="dark"] .role-chip--manager { color: #c7d2ff; background: #26335c; }
[data-theme="dark"] .role-chip--staff { color: #9ce6c6; background: #173b31; }

/* Keep action buttons and tab labels readable on dark surfaces. */
[data-theme="dark"] :is(.page-tab, .table-action, .date-nav-button, .day-picker__presets button) {
    color: var(--text-soft);
}
[data-theme="dark"] :is(.page-tab:hover, .page-tab.is-active, .table-action:hover,
    .date-nav-button:hover, .day-picker__presets button:hover) {
    color: #d9dfff;
    background: var(--primary-soft);
    border-color: #40517e;
}

[data-theme="dark"] :is(.brand-management-hero, .daily-hero--locked, .daily-workspace-hero--locked) {
    color: var(--text);
    border-color: var(--line);
    background:
        radial-gradient(circle at 84% 24%, rgba(112, 132, 255, .10), transparent 29%),
        linear-gradient(135deg, #151e30 0%, #1a263c 100%);
}
[data-theme="dark"] .brand-management-hero :is(h1,h2,h3,strong) { color: var(--text); }
[data-theme="dark"] .brand-management-hero :is(p,small) { color: var(--text-soft); }

/* Tahap 19 — penyempurnaan identitas brand, dark mode lanjutan, dan keterbacaan */
.brand-mark--logo {
    padding: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
}

.brand-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(51, 78, 205, .24));
}

.sidebar__brand .brand-mark--logo { border-radius: 14px; }
.auth-brand .brand-mark--logo,
.install-card .brand-mark--logo { border-radius: 18px; }

/* Filter dibuat lebih ringkas namun tetap mudah dibaca. */
:is(.workspace-filter, .performance-filter, .performance-filter--range, .performance-filter--wide,
    .daily-manager-filter, .unlock-filter-toolbar, .report-filter, .report-filter--export,
    .management-filter, .my-kpi-filter, .staff-filter-panel, .audit-filter,
    .notification-filter-form, .obstacle-filter, .kpi-period-filter) {
    gap: 8px;
    align-items: end;
}

.panel:is(.workspace-filter, .performance-filter, .report-filter),
.daily-filter-panel,
.unlock-filter-panel {
    padding: 12px 14px;
}

:is(.workspace-filter, .performance-filter, .performance-filter--range, .performance-filter--wide,
    .daily-manager-filter, .unlock-filter-toolbar, .report-filter, .report-filter--export,
    .management-filter, .my-kpi-filter, .staff-filter-panel, .audit-filter,
    .notification-filter-form, .obstacle-filter, .kpi-period-filter) label > span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
}

:is(.workspace-filter, .performance-filter, .performance-filter--range, .performance-filter--wide,
    .daily-manager-filter, .unlock-filter-toolbar, .report-filter, .report-filter--export,
    .management-filter, .my-kpi-filter, .staff-filter-panel, .audit-filter,
    .notification-filter-form, .obstacle-filter, .kpi-period-filter)
:is(input, select, .search-field) {
    min-height: 38px;
    padding: 9px 12px;
    font-size: 13px;
}

:is(.workspace-filter, .performance-filter, .performance-filter--range, .performance-filter--wide,
    .daily-manager-filter, .unlock-filter-toolbar, .report-filter, .report-filter--export,
    .management-filter, .my-kpi-filter) > .button,
.workspace-filter__actions .button {
    min-height: 38px;
    padding-inline: 13px;
    font-size: 13px;
}

.performance-filter,
.performance-filter--range,
.performance-filter--wide {
    grid-template-columns: repeat(4, minmax(135px, .68fr)) auto;
}

.report-filter { grid-template-columns: minmax(175px, .68fr) minmax(175px, .68fr) auto; }
.report-filter--export { grid-template-columns: repeat(3, minmax(155px, .68fr)) auto; }
.daily-manager-filter { grid-template-columns: repeat(3, minmax(140px, .68fr)) auto; }
.unlock-filter-toolbar { grid-template-columns: repeat(3, minmax(140px, .68fr)) auto; }

/* Tingkatkan keterbacaan teks yang sebelumnya terlalu kecil. */
.page-content :is(.compact-metric > span, .metric-card__top, .team-card__stats span,
    .report-filter label > span, .daily-manager-filter label > span,
    .performance-filter label > span, .workspace-filter label > span,
    .management-filter label > span, .unlock-filter-toolbar label > span,
    .member-daily-stats span, .member-identity span, .performance-team-card__identity span,
    .performance-team-card__metrics span, .team-diagnosis-row span,
    .kpi-result-card__values span, .kpi-result-card__source span,
    .report-team-scores span, .report-team-facts span, .report-mini-stats span,
    .report-member-row span:not(.status-badge), .report-issue-row span:not(.status-dot)) {
    font-size: 11px;
}

.page-content :is(.compact-metric small, .metric-card__foot, .member-no-target p,
    .kpi-result-card__source small, .report-note-actions small, .report-readonly-note p) {
    font-size: 12px;
}

.member-identity strong,
.performance-team-card__identity strong,
.kpi-result-card__header strong,
.report-member-row strong,
.report-issue-row strong,
.manager-item-row strong,
.performance-member-row strong,
.performance-member-card strong {
    font-size: 13px;
}

.member-daily-stats strong,
.kpi-result-card__values strong,
.team-diagnosis-row strong,
.performance-team-card__metrics strong,
.report-team-scores strong,
.report-team-facts strong,
.report-mini-stats strong {
    font-size: 12px;
}

.report-readonly-note strong { font-size: 12px; }

/* Dark mode lanjutan untuk blok yang masih menyisakan panel terang. */
[data-theme="dark"] :is(
    .manager-member-list,
    .performance-member-list,
    .kpi-result-grid,
    .team-diagnosis-row,
    .manager-item-table,
    .member-no-target,
    .report-member-details > div,
    .report-member-details summary,
    .report-team-scores > div,
    .report-team-facts > div,
    .report-mini-stats > div,
    .report-insight-list > div,
    .report-trend-panel,
    .report-insight-panel,
    .report-note-panel,
    .report-readonly-note,
    .report-period-banner,
    .report-hero,
    .team-progress-line,
    .kpi-result-card__values > div,
    .daily-manager-filter,
    .report-filter,
    .report-filter--export,
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] :is(
    .manager-member-card,
    .performance-team-card,
    .performance-member-card,
    .performance-member-row,
    .kpi-result-card,
    .report-team-card,
    .report-issue-row,
    .report-member-row
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--line);
}

[data-theme="dark"] .team-progress-line {
    background: rgba(255,255,255,.08);
}

[data-theme="dark"] .team-diagnosis-row,
[data-theme="dark"] .kpi-result-grid,
[data-theme="dark"] .manager-member-list,
[data-theme="dark"] .performance-member-list {
    background: var(--surface-soft);
}

[data-theme="dark"] .kpi-result-card__source {
    color: var(--text);
    background: var(--surface-muted);
    border-color: rgba(133, 151, 196, .34);
}

[data-theme="dark"] :is(
    .member-identity span,
    .member-daily-stats span,
    .performance-team-card__identity span,
    .performance-team-card__metrics span,
    .team-diagnosis-row span,
    .kpi-result-card__header div span,
    .kpi-result-card__source small,
    .kpi-result-card__source p,
    .report-team-card > header span:not(.status-badge),
    .report-team-scores span,
    .report-team-facts span,
    .report-mini-stats span,
    .report-member-row span:not(.status-badge),
    .report-issue-row span:not(.status-dot),
    .member-no-target,
    .member-no-target p
) {
    color: var(--text-soft);
}

[data-theme="dark"] :is(
    .performance-team-card__metrics > div,
    .report-team-scores > div,
    .report-team-facts > div,
    .report-mini-stats > div,
    .kpi-result-card__values > div
) {
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .report-member-details summary {
    background: color-mix(in srgb, var(--surface) 76%, var(--surface-soft));
}

[data-theme="dark"] .report-hero,
[data-theme="dark"] .report-period-banner {
    box-shadow: var(--shadow-sm);
}

/* Sedikit penyesuaian tambahan di mobile. */
@media (max-width: 1180px) {
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .report-filter,
    .report-filter--export,
    .daily-manager-filter,
    .unlock-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .report-filter,
    .report-filter--export,
    .daily-manager-filter,
    .unlock-filter-toolbar,
    .workspace-filter,
    .my-kpi-filter {
        grid-template-columns: 1fr;
    }
}

/* Logo resmi PT. KAR */
.auth-brand-logo {
    width: 118px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .2));
}

.sidebar__brand .brand-logo,
.install-card .brand-logo {
    object-fit: contain;
}

@media (max-width: 720px) {
    .auth-brand-logo { width: 94px; }
}

/* Tahap 20 — UAT, release readiness, dan stabilisasi interaksi */
.uat-hero { align-items: center; }
.uat-release-badge {
    min-width: 210px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}
.uat-release-badge .icon { width: 26px; height: 26px; }
.uat-release-badge > div { display: flex; flex-direction: column; }
.uat-release-badge span { color: var(--text-soft); font-size: 11px; }
.uat-release-badge strong { margin-top: 3px; font-size: 14px; }
.uat-release-badge--ready { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 30%, var(--line)); }
.uat-release-badge--review { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, var(--line)); }
.uat-release-badge--blocked { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }

.uat-summary-grid { margin-bottom: 20px; }
.uat-gate-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    border-left-width: 5px;
}
.uat-gate-panel h2 { margin: 5px 0 6px; }
.uat-gate-panel p { margin: 0; color: var(--text-soft); line-height: 1.65; }
.uat-gate-panel--ready { border-left-color: var(--success); }
.uat-gate-panel--review { border-left-color: var(--warning); }
.uat-gate-panel--blocked { border-left-color: var(--danger); }
.uat-gate-facts { display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr)); gap: 10px; }
.uat-gate-facts > div { min-width: 110px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); text-align: center; }
.uat-gate-facts span { display: block; color: var(--text-soft); font-size: 11px; }
.uat-gate-facts strong { display: block; margin-top: 5px; font-size: 18px; }

.uat-automatic-panel { margin-bottom: 20px; }
.uat-automatic-groups,
.uat-manual-groups { display: grid; gap: 16px; }
.uat-automatic-group,
.uat-manual-group { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); }
.uat-automatic-group > header,
.uat-manual-group > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.uat-automatic-group > header strong,
.uat-manual-group > header h3 { margin: 0; font-size: 14px; }
.uat-automatic-group > header span,
.uat-manual-group > header span { color: var(--text-soft); font-size: 11px; }
.uat-check-list,
.uat-manual-list { display: grid; }
.uat-check-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.uat-check-row:last-child { border-bottom: 0; }
.uat-check-row > div { min-width: 0; }
.uat-check-row strong { display: block; font-size: 13px; }
.uat-check-row p { margin: 4px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.uat-check-row small { display: block; margin-top: 5px; color: var(--warning); font-size: 11px; }
.uat-check-status { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.uat-check-status .icon { width: 18px; height: 18px; }
.uat-check-status--passed { color: var(--success); background: var(--success-soft); }
.uat-check-status--warning { color: var(--warning); background: var(--warning-soft); }
.uat-check-status--failed { color: var(--danger); background: var(--danger-soft); }
.uat-status-text { min-width: 78px; padding: 6px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; text-align: center; }
.uat-status-text--passed { color: var(--success); background: var(--success-soft); }
.uat-status-text--warning { color: var(--warning); background: var(--warning-soft); }
.uat-status-text--failed { color: var(--danger); background: var(--danger-soft); }

.uat-manual-form { margin-bottom: 20px; }
.uat-manual-row { display: grid; grid-template-columns: auto minmax(260px, 1.4fr) minmax(140px, .5fr) minmax(260px, 1fr); align-items: end; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.uat-manual-row:last-child { border-bottom: 0; }
.uat-manual-row__description { align-self: center; }
.uat-manual-row__description strong { display: block; font-size: 13px; line-height: 1.45; }
.uat-manual-row__description small { display: block; margin-top: 5px; color: var(--text-soft); font-size: 11px; }
.uat-manual-row label { display: grid; gap: 6px; }
.uat-manual-row label > span { color: var(--text-soft); font-size: 11px; font-weight: 700; }
.uat-manual-row :is(select, input) { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); }
.uat-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; }
.uat-form-actions > span { color: var(--text-soft); font-size: 12px; }
.uat-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr); gap: 16px; }
.uat-deployment-card ol { margin: 0; padding-left: 22px; color: var(--text-soft); font-size: 13px; line-height: 1.8; }
.uat-deployment-card code { padding: 2px 6px; border-radius: 6px; color: var(--primary); background: var(--primary-soft); }
.uat-reset-card p { color: var(--text-soft); font-size: 13px; line-height: 1.65; }

/* Feedback saat form sedang dikirim. */
.button.is-loading { position: relative; pointer-events: none; opacity: .82; }
.button.is-loading::before {
    content: "";
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: buttonSpin .7s linear infinite;
}
@keyframes buttonSpin { to { transform: rotate(360deg); } }

[data-theme="dark"] :is(.uat-automatic-group, .uat-manual-group, .uat-gate-facts > div) { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] :is(.uat-automatic-group > header, .uat-manual-group > header) { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .uat-manual-row :is(select, input) { color: var(--text); background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .uat-release-badge--ready { color: #9ce6c6; background: #173b31; border-color: #2c6957; }
[data-theme="dark"] .uat-release-badge--review { color: #f7d58f; background: #3b301c; border-color: #685229; }
[data-theme="dark"] .uat-release-badge--blocked { color: #ffadb3; background: #402329; border-color: #6c333b; }
[data-theme="dark"] .uat-check-status--passed,
[data-theme="dark"] .uat-status-text--passed { color: #9ce6c6; background: #173b31; }
[data-theme="dark"] .uat-check-status--warning,
[data-theme="dark"] .uat-status-text--warning { color: #f7d58f; background: #3b301c; }
[data-theme="dark"] .uat-check-status--failed,
[data-theme="dark"] .uat-status-text--failed { color: #ffadb3; background: #402329; }

@media (max-width: 1180px) {
    .uat-manual-row { grid-template-columns: auto minmax(240px, 1fr) minmax(140px, .55fr); }
    .uat-manual-row > label:last-child { grid-column: 2 / -1; }
}
@media (max-width: 820px) {
    .uat-hero,
    .uat-gate-panel,
    .uat-form-actions { align-items: stretch; flex-direction: column; }
    .uat-release-badge { width: 100%; }
    .uat-gate-facts,
    .uat-bottom-grid { grid-template-columns: 1fr; }
    .uat-manual-row { grid-template-columns: auto 1fr; align-items: start; }
    .uat-manual-row > label { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
    .uat-check-row { grid-template-columns: auto 1fr; }
    .uat-status-text { grid-column: 2; justify-self: start; }
}

/* Tahap 21 — Automation & Scheduled Maintenance */
.automation-hero {
    margin-bottom: 20px;
}

.automation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr);
    gap: 18px;
    margin-bottom: 20px;
}

.automation-settings-form,
.automation-run-panel,
.scheduler-guide-panel,
.automation-backup-panel,
.automation-history-panel {
    padding: 22px;
}

.automation-setting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.automation-setting-card {
    display: grid;
    align-content: start;
    gap: 15px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}

.automation-setting-card > header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.automation-setting-card > header > .icon {
    width: 37px;
    height: 37px;
    padding: 8px;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--primary);
    background: var(--primary-soft);
}

.automation-setting-card h3 {
    margin: 0;
    font-size: 14px;
}

.automation-setting-card p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}

.automation-field-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.automation-field-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.automation-field-grid .form-field {
    margin: 0;
}

.switch-field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    cursor: pointer;
}

.switch-field--standalone {
    max-width: 340px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.switch-field input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.switch-control {
    width: 42px;
    height: 23px;
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #cfd5e3;
    transition: background 180ms ease;
}

.switch-control::after {
    content: "";
    width: 17px;
    height: 17px;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(16,24,40,.22);
    transition: transform 180ms ease;
}

.switch-field input:checked + .switch-control {
    background: var(--primary);
}

.switch-field input:checked + .switch-control::after {
    transform: translateX(19px);
}

.switch-field input:focus-visible + .switch-control {
    outline: 3px solid rgba(73,103,255,.2);
    outline-offset: 2px;
}

.switch-field > span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.switch-field strong {
    font-size: 12px;
}

.switch-field small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.4;
}

.automation-reminder-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.automation-reminder-times > div {
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
}

.automation-reminder-times span {
    display: block;
    color: var(--text-soft);
    font-size: 10px;
}

.automation-reminder-times strong {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

.automation-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding-top: 17px;
    margin-top: 17px;
    border-top: 1px solid var(--line);
}

.automation-submit-bar > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-soft);
    font-size: 11px;
}

.automation-submit-bar .icon {
    color: var(--primary);
}

.automation-run-list {
    display: grid;
    gap: 9px;
}

.automation-run-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.automation-run-item__icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--primary);
    background: var(--primary-soft);
}

.automation-run-item div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.automation-run-item strong {
    font-size: 12px;
}

.automation-run-item small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.45;
}

.automation-due-action {
    margin-top: 13px;
}

.scheduler-guide-panel,
.automation-backup-panel,
.automation-history-panel {
    margin-bottom: 20px;
}

.scheduler-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.scheduler-step {
    min-width: 0;
    display: flex;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.scheduler-step > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 10px;
    font-weight: 800;
}

.scheduler-step div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-step strong {
    font-size: 11px;
}

.scheduler-step code,
.scheduler-step p {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: var(--text-soft);
    font-size: 10px;
    line-height: 1.5;
}

.scheduler-command-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 15px;
    margin-top: 13px;
    border: 1px dashed #c8d0e2;
    border-radius: 13px;
    background: var(--surface-soft);
}

.scheduler-command-box > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.scheduler-command-box span {
    color: var(--text-soft);
    font-size: 10px;
}

.scheduler-command-box code {
    margin-top: 5px;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 11px;
}

.automation-backup-table,
.automation-run-history {
    overflow-x: auto;
}

.automation-backup-row,
.automation-history-row {
    min-width: 880px;
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    font-size: 11px;
}

.automation-backup-row {
    grid-template-columns: 145px minmax(250px, 1.3fr) 90px minmax(120px, .6fr) minmax(210px, .8fr);
}

.automation-history-row {
    grid-template-columns: 145px minmax(180px, .8fr) 90px 100px 90px minmax(300px, 1.4fr);
}

.automation-backup-row--head,
.automation-history-row--head {
    border: 0;
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 10px;
    font-weight: 750;
}

.automation-backup-row strong,
.automation-history-row strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-backup-row code,
.automation-history-row small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-actions form {
    display: inline-flex;
}

.table-action--danger {
    color: var(--danger);
    background: var(--danger-soft);
}

[data-theme="dark"] :is(
    .automation-setting-card,
    .automation-run-item,
    .scheduler-step,
    .scheduler-command-box,
    .automation-reminder-times > div,
    .switch-field--standalone,
    .automation-backup-row--head,
    .automation-history-row--head
) {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

[data-theme="dark"] .switch-control {
    background: #3c465c;
}

[data-theme="dark"] .scheduler-command-box {
    border-color: #45516c;
}

[data-theme="dark"] .table-action--danger {
    color: #ff9ca3;
    background: #42232a;
}

@media (max-width: 1180px) {
    .automation-layout {
        grid-template-columns: 1fr;
    }
    .scheduler-guide-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .automation-setting-grid,
    .automation-field-grid,
    .automation-field-grid--two,
    .automation-reminder-times,
    .scheduler-guide-grid {
        grid-template-columns: 1fr;
    }
    .automation-submit-bar,
    .scheduler-command-box {
        align-items: stretch;
        flex-direction: column;
    }
    .automation-run-item {
        grid-template-columns: auto 1fr;
    }
    .automation-run-item .button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* Tahap 22 — Deployment & Go-Live */
.deployment-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 86% 20%, rgba(82, 105, 255, .18), transparent 30%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}
.deployment-hero h2 { margin: 7px 0 8px; font-size: clamp(24px, 3vw, 34px); }
.deployment-hero p { max-width: 760px; margin: 0; color: var(--text-soft); line-height: 1.65; }
.deployment-gate { min-width: 220px; display: flex; align-items: center; gap: 12px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface-soft); }
.deployment-gate .icon { width: 23px; height: 23px; }
.deployment-gate > div { display: flex; flex-direction: column; }
.deployment-gate span { color: var(--text-soft); font-size: 11px; }
.deployment-gate strong { margin-top: 4px; font-size: 14px; }
.deployment-gate--ready { color: var(--success); background: var(--success-soft); }
.deployment-gate--blocked { color: var(--danger); background: var(--danger-soft); }
.deployment-gate--review { color: var(--warning); background: var(--warning-soft); }
.deployment-summary-grid { margin-top: 18px; }
.deployment-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .65fr); gap: 18px; margin-top: 18px; align-items: start; }
.deployment-side-stack { display: grid; gap: 18px; }
.deployment-check-panel, .deployment-config-panel, .deployment-url-panel, .deployment-export-panel, .deployment-release-panel, .deployment-doc-panel { padding: 22px; }
.deployment-check-list { display: grid; gap: 9px; margin-top: 16px; }
.deployment-check { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.deployment-check__icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); }
.deployment-check__icon .icon { width: 19px; height: 19px; }
.deployment-check > div { display: flex; flex-direction: column; }
.deployment-check > div > span { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.deployment-check strong { margin-top: 3px; font-size: 13px; }
.deployment-check p { margin: 5px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }
.deployment-check small { margin-top: 6px; color: var(--primary); font-size: 11px; }
.deployment-check--passed .deployment-check__icon { color: var(--success); background: var(--success-soft); }
.deployment-check--warning .deployment-check__icon { color: var(--warning); background: var(--warning-soft); }
.deployment-check--failed .deployment-check__icon { color: var(--danger); background: var(--danger-soft); }
.deployment-config-form, .deployment-release-form { display: grid; gap: 13px; margin-top: 15px; }
.deployment-url-list { display: grid; gap: 10px; margin-top: 14px; }
.deployment-url-list > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
.deployment-url-list span { color: var(--text-faint); font-size: 11px; }
.deployment-url-list code { overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
.deployment-helper, .deployment-export-panel p { color: var(--text-soft); font-size: 12px; line-height: 1.6; }
.deployment-release-panel, .deployment-doc-panel { margin-top: 18px; }
.deployment-release-form { grid-template-columns: repeat(4, minmax(150px, 1fr)); align-items: end; }
.deployment-release-form__notes { grid-column: span 3; }
.deployment-release-form > .button { min-height: 42px; }
.deployment-release-table { display: grid; gap: 10px; margin-top: 20px; }
.deployment-release-row { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(190px, .75fr) minmax(180px, .8fr) minmax(240px, 1.25fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.deployment-release-row > div { display: flex; flex-direction: column; gap: 3px; }
.deployment-release-row span:not(.release-status) { color: var(--text-faint); font-size: 11px; }
.deployment-release-row strong { font-size: 12px; overflow-wrap: anywhere; }
.deployment-release-row small { color: var(--text-soft); font-size: 11px; }
.deployment-release-row p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.release-status { align-self: flex-start; display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.release-status--draft { color: var(--text-soft); background: var(--surface-muted); }
.release-status--ready { color: var(--primary); background: var(--primary-soft); }
.release-status--live { color: var(--success); background: var(--success-soft); }
.release-status--rolled_back { color: var(--danger); background: var(--danger-soft); }
.deployment-doc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.deployment-doc-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: var(--surface-soft); transition: transform var(--transition), border-color var(--transition), background var(--transition); }
.deployment-doc-card:hover { transform: translateY(-2px); border-color: var(--primary); background: var(--primary-soft); }
.deployment-doc-card > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--surface); }
.deployment-doc-card strong { font-size: 13px; }
.deployment-doc-card p { margin: 5px 0; color: var(--text-soft); font-size: 12px; line-height: 1.5; }
.deployment-doc-card small { color: var(--text-faint); font-size: 10px; }

.maintenance-page { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: var(--bg); }
.maintenance-notice-card { width: min(100%, 660px); padding: 34px; border: 1px solid var(--line); border-radius: 24px; text-align: center; background: var(--surface); box-shadow: var(--shadow-md); }
.maintenance-notice-logo { width: 190px; max-height: 110px; object-fit: contain; margin-bottom: 18px; }
.maintenance-notice-card h1 { margin: 8px 0 10px; font-size: clamp(27px, 5vw, 40px); }
.maintenance-notice-card > p { margin: 0 auto; max-width: 540px; color: var(--text-soft); line-height: 1.7; }
.maintenance-notice-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }
.maintenance-notice-meta > div { display: flex; flex-direction: column; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.maintenance-notice-meta span { color: var(--text-faint); font-size: 11px; }
.maintenance-notice-meta strong { font-size: 12px; }
.maintenance-notice-actions { display: flex; justify-content: center; gap: 10px; }

[data-theme="dark"] :is(.deployment-hero, .deployment-check-panel, .deployment-config-panel, .deployment-url-panel, .deployment-export-panel, .deployment-release-panel, .deployment-doc-panel, .maintenance-notice-card) { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] :is(.deployment-check, .deployment-url-list > div, .deployment-release-row, .deployment-doc-card, .maintenance-notice-meta > div) { background: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] .deployment-check__icon, [data-theme="dark"] .deployment-doc-card > span { background: var(--surface-muted); }

@media (max-width: 1180px) {
    .deployment-layout { grid-template-columns: 1fr; }
    .deployment-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deployment-export-panel { grid-column: 1 / -1; }
    .deployment-release-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deployment-release-form__notes { grid-column: 1 / -1; }
    .deployment-release-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .deployment-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .deployment-hero { align-items: flex-start; flex-direction: column; padding: 22px; }
    .deployment-gate { width: 100%; min-width: 0; }
    .deployment-side-stack, .deployment-release-form, .deployment-release-row, .deployment-doc-grid, .maintenance-notice-meta { grid-template-columns: 1fr; }
    .deployment-release-form__notes { grid-column: auto; }
    .maintenance-notice-card { padding: 25px 20px; }
    .maintenance-notice-actions { flex-direction: column; }
}

/* Revisi Tahap 22 — kontrol header aktif dan dapat digunakan. */
.header-dropdown {
    position: relative;
}

.header-dropdown__panel {
    min-width: 210px;
    max-height: min(430px, 70vh);
    position: absolute;
    z-index: 95;
    top: calc(100% + 10px);
    right: 0;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 24px 65px rgba(24, 32, 51, .18);
    transform-origin: top right;
    animation: headerDropdownIn 150ms ease both;
}

.header-dropdown__panel[hidden] {
    display: none;
}

.header-dropdown__title {
    padding: 8px 10px 7px;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.header-dropdown__panel > a,
.header-dropdown__panel > button {
    width: 100%;
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.header-dropdown__panel > a:hover,
.header-dropdown__panel > a:focus-visible,
.header-dropdown__panel > button:hover,
.header-dropdown__panel > button:focus-visible,
.header-dropdown__panel > a.is-selected {
    color: var(--primary);
    background: var(--primary-soft);
    transform: translateX(2px);
}

.header-dropdown__panel > a .icon,
.header-dropdown__panel > button .icon {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.header-dropdown__panel--team {
    width: 260px;
}

.header-dropdown__panel--profile {
    width: 260px;
    padding: 9px;
}

.profile-header-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.profile-header-card > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.profile-header-card strong {
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-header-card span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 11px;
}

.header-dropdown__logout {
    color: var(--danger) !important;
}

.header-dropdown__logout:hover,
.header-dropdown__logout:focus-visible {
    color: var(--danger) !important;
    background: var(--danger-soft) !important;
}

.filter-button,
.topbar-user {
    cursor: pointer;
}

.header-dropdown.is-open .filter-button,
.header-dropdown.is-open .topbar-user {
    border-color: color-mix(in srgb, var(--primary) 48%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-soft) 80%, transparent);
}

.header-dropdown.is-open .filter-button .icon,
.header-dropdown.is-open .topbar-user__chevron .icon {
    transform: rotate(180deg);
}

.filter-button .icon,
.topbar-user__chevron .icon {
    transition: transform var(--transition);
}

.topbar-user {
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
}

.topbar-user__chevron {
    display: grid;
    place-items: center;
    color: var(--text-faint);
}

.topbar-user__chevron .icon {
    width: 15px;
    height: 15px;
}

[data-theme="dark"] .header-dropdown__panel {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: 0 24px 65px rgba(0, 0, 0, .42);
}

[data-theme="dark"] .profile-header-card {
    border-color: var(--line);
}

@keyframes headerDropdownIn {
    from { opacity: 0; transform: translateY(-5px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 920px) {
    .profile-header-menu .topbar-user__copy,
    .profile-header-menu .topbar-user__chevron {
        display: none;
    }

    .profile-header-menu .topbar-user {
        margin-left: 0;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-dropdown__panel {
        animation: none;
    }
}

/* Tahap 22.3 — header sederhana, filter grafik, dan installer aman */
.dashboard-trend-heading {
    align-items: flex-end;
    gap: 18px;
}

.chart-range-copy {
    margin: 5px 0 0;
    color: var(--text-soft);
    font-size: 12px;
}

.dashboard-trend-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 185px)) auto;
    align-items: end;
    gap: 8px;
}

.dashboard-trend-filter label {
    display: grid;
    gap: 6px;
}

.dashboard-trend-filter label > span {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 700;
}

.dashboard-trend-filter input {
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 13px;
}

.dashboard-trend-filter input:focus {
    border-color: var(--primary);
    outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
}

.dashboard-trend-filter .button {
    min-height: 38px;
    padding-inline: 14px;
}

[data-theme="dark"] .dashboard-trend-filter input {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--line);
}

.clean-start-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    text-align: left;
}

.clean-start-form .form-field {
    margin: 0;
}

.install-card .alert strong {
    color: inherit;
}

@media (max-width: 900px) {
    .dashboard-trend-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-trend-filter {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }
}

@media (max-width: 640px) {
    .dashboard-trend-filter {
        grid-template-columns: 1fr;
    }

    .dashboard-trend-filter .button {
        width: 100%;
    }
}

/* Tahap 22.3 — sidebar sederhana, filter Performance satu baris, dan grafik responsif */
.sidebar__nav {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 28px;
}

.sidebar__profile {
    display: none !important;
}

.sidebar__brand .brand-copy span {
    font-size: 11px;
    letter-spacing: 0;
}

/* Grafik menjaga rasio dan dirender ulang berdasarkan lebar kontainer. */
.panel--chart,
.dashboard-grid,
.dashboard-grid > * {
    min-width: 0;
}

.interactive-line-chart {
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

.interactive-line-chart__canvas {
    width: 100%;
    min-width: 0;
    height: clamp(230px, 30vw, 340px);
    overflow: visible;
}

.interactive-line-chart__svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.interactive-chart-axis-label {
    font-size: 11px;
}

.interactive-chart-axis-label--x {
    font-size: 10px;
}

.interactive-line-chart__legend {
    margin-top: 8px;
    font-size: 11px;
}

.interactive-chart-tooltip strong {
    font-size: 12px;
}

.interactive-chart-tooltip span {
    font-size: 11px;
}

/* Seluruh filter pada menu Performance dibuat kompak dan satu baris di desktop. */
:is(
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .daily-manager-filter,
    .staff-filter-panel.my-kpi-filter
) {
    width: 100%;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 7px;
    padding: 10px 12px;
    overflow: visible;
}

:is(
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .daily-manager-filter,
    .staff-filter-panel.my-kpi-filter
) > label {
    min-width: 0;
    flex: 1 1 0;
    gap: 4px;
    margin: 0;
}

.performance-filter--wide > label {
    min-width: 92px;
}

:is(
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .daily-manager-filter,
    .staff-filter-panel.my-kpi-filter
) label > span {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

:is(
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .daily-manager-filter,
    .staff-filter-panel.my-kpi-filter
) :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 35px;
    height: 35px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 12px;
}

:is(
    .performance-filter,
    .performance-filter--range,
    .performance-filter--wide,
    .daily-manager-filter,
    .staff-filter-panel.my-kpi-filter
) > :is(.button, a.button) {
    min-width: max-content;
    min-height: 35px;
    height: 35px;
    flex: 0 0 auto;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
}

.daily-filter-panel {
    padding: 10px 12px;
}

.date-filter-form input {
    min-height: 35px;
    height: 35px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    :is(
        .performance-filter,
        .performance-filter--range,
        .performance-filter--wide,
        .daily-manager-filter,
        .staff-filter-panel.my-kpi-filter
    ) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
    }

    :is(
        .performance-filter,
        .performance-filter--range,
        .performance-filter--wide,
        .daily-manager-filter,
        .staff-filter-panel.my-kpi-filter
    ) > :is(.button, a.button) {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 680px) {
    :is(
        .performance-filter,
        .performance-filter--range,
        .performance-filter--wide,
        .daily-manager-filter,
        .staff-filter-panel.my-kpi-filter
    ) {
        grid-template-columns: 1fr;
    }

    .interactive-line-chart__canvas {
        height: 230px;
    }

    .interactive-line-chart__legend {
        justify-content: flex-start;
    }
}

/* Installer Tahap 22.3: upgrade aman dan opsi clean start terpisah. */
.installer-reset-panel {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
    text-align: left;
}

.installer-reset-panel summary {
    cursor: pointer;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 750;
}

.installer-reset-panel[open] summary {
    margin-bottom: 14px;
    color: var(--text);
}

[data-theme="dark"] .installer-reset-panel {
    background: var(--surface-soft);
    border-color: var(--line);
}

/* Final UI refinement — filter kompak dan Daily Check rentang tanggal */
.unlock-filter-panel {
    padding: 10px 12px;
}

.unlock-filter-toolbar--compact {
    width: min(100%, 820px);
    display: grid;
    grid-template-columns: minmax(125px, .72fr) minmax(145px, .85fr) minmax(155px, .9fr) auto auto;
    align-items: end;
    gap: 7px;
}

.unlock-filter-toolbar--compact label {
    min-width: 0;
    gap: 4px;
}

.unlock-filter-toolbar--compact label > span,
.workspace-filter--compact-target label > span,
.workspace-filter--compact-kpi label > span {
    font-size: 10px;
    line-height: 1.2;
}

.unlock-filter-toolbar--compact :is(input, select),
.workspace-filter--compact-target :is(input, select),
.workspace-filter--compact-kpi :is(input, select) {
    min-height: 34px;
    height: 34px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 12px;
}

.unlock-filter-toolbar--compact > .button,
.workspace-filter--compact-target .button,
.workspace-filter--compact-kpi .button {
    min-height: 34px;
    height: 34px;
    padding-inline: 11px;
    font-size: 12px;
    white-space: nowrap;
}

.workspace-filter--compact-target {
    width: min(100%, 850px);
    grid-template-columns: minmax(230px, 1.35fr) minmax(125px, .62fr) minmax(140px, .68fr) auto;
    gap: 7px;
    padding: 10px 12px;
}

.workspace-filter--compact-target .workspace-filter__search {
    min-width: 0;
}

.workspace-filter--compact-target .search-field {
    min-height: 34px;
}

.workspace-filter--compact-target .search-field input {
    height: 32px;
}

.workspace-filter--compact-target .workspace-filter__actions,
.workspace-filter--compact-kpi .workspace-filter__actions {
    gap: 6px;
    align-self: end;
}

.workspace-filter--compact-kpi {
    width: min(100%, 590px);
    grid-template-columns: minmax(250px, 1fr) auto;
    gap: 7px;
    padding: 10px 12px;
}

.workspace-filter--compact-kpi .search-field {
    min-height: 34px;
}

.workspace-filter--compact-kpi .search-field input {
    height: 32px;
}

.daily-manager-filter {
    gap: 6px;
}

.daily-manager-filter > label {
    min-width: 115px;
}

.daily-manager-filter > label:nth-of-type(1),
.daily-manager-filter > label:nth-of-type(2) {
    flex-basis: 132px;
}

.daily-manager-filter > label:nth-of-type(3) {
    flex-basis: 155px;
}

.daily-manager-filter > label:nth-of-type(4) {
    flex-basis: 135px;
}

.manager-item-row--range {
    min-width: 900px;
    grid-template-columns: minmax(92px, .48fr) minmax(220px, 1.35fr) repeat(4, minmax(96px, .64fr));
}

@media (max-width: 1120px) {
    .unlock-filter-toolbar--compact,
    .workspace-filter--compact-target {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-filter--compact-kpi {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .unlock-filter-toolbar--compact > .button,
    .workspace-filter--compact-target .workspace-filter__actions {
        width: 100%;
    }

    .workspace-filter--compact-target .workspace-filter__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .unlock-filter-toolbar--compact,
    .workspace-filter--compact-target,
    .workspace-filter--compact-kpi {
        grid-template-columns: 1fr;
    }

    .unlock-filter-toolbar--compact > .button,
    .workspace-filter--compact-target .button,
    .workspace-filter--compact-kpi .button,
    .workspace-filter--compact-target .workspace-filter__actions,
    .workspace-filter--compact-kpi .workspace-filter__actions {
        width: 100%;
    }

    .workspace-filter--compact-target .workspace-filter__actions,
    .workspace-filter--compact-kpi .workspace-filter__actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Final layout refinement 1.0.1 — filter management dan communication */
.obstacle-filter-panel {
    padding: 12px 14px;
    margin-bottom: 16px;
}

.obstacle-filter--single-row {
    width: min(100%, 840px);
    display: grid;
    grid-template-columns: minmax(130px, .7fr) minmax(130px, .7fr) minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: 8px;
}

.obstacle-filter--single-row label {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.obstacle-filter--single-row label > span {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 750;
}

.obstacle-filter--single-row select,
.obstacle-filter--single-row .button {
    min-height: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 12px;
}

.obstacle-filter--single-row select {
    width: 100%;
    min-width: 0;
    padding: 0 10px;
}

.manager-obstacle-list {
    margin-top: 0;
}

.unlock-requests-workspace {
    padding: 18px;
}

.section-heading--compact {
    margin-bottom: 12px;
}

.unlock-filter-toolbar--embedded {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(130px, .65fr) minmax(155px, .82fr) minmax(165px, .85fr) auto auto;
    padding: 12px 0 16px;
    margin-bottom: 16px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.unlock-manager-list--embedded {
    gap: 12px;
}

.unlock-manager-list--embedded > .panel {
    box-shadow: none;
}

.management-filter--users-inline {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(110px, .46fr) minmax(150px, .62fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 12px 0 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.management-filter--users-inline .search-field,
.management-filter--users-inline select,
.management-filter--users-inline .button {
    min-height: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 12px;
}

.management-filter--users-inline .search-field {
    width: 100%;
    min-width: 0;
}

.management-filter--users-inline select {
    width: 100%;
    min-width: 0;
}

.workspace-filter--embedded {
    width: 100%;
    max-width: none;
    padding: 12px 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
}

.workspace-filter--compact-target.workspace-filter--embedded {
    grid-template-columns: minmax(220px, 1.25fr) minmax(120px, .55fr) minmax(135px, .62fr) auto;
}

.workspace-filter--compact-kpi.workspace-filter--embedded {
    grid-template-columns: minmax(250px, 1fr) auto;
}

.workspace-filter--embedded .workspace-filter__search,
.workspace-filter--embedded .search-field {
    min-width: 0;
    width: 100%;
}

.workspace-filter--embedded .workspace-filter__actions {
    align-self: end;
    justify-content: flex-end;
    white-space: nowrap;
}

[data-theme="dark"] :is(
    .obstacle-filter-panel,
    .unlock-requests-workspace,
    .workspace-filter--embedded,
    .management-filter--users-inline
) {
    border-color: var(--line);
}

@media (max-width: 1280px) {
    .management-filter--users-inline {
        grid-template-columns: minmax(210px, 1fr) minmax(110px, .48fr) minmax(145px, .62fr) auto auto;
    }
}

@media (max-width: 1080px) {
    .obstacle-filter--single-row,
    .unlock-filter-toolbar--embedded,
    .management-filter--users-inline,
    .workspace-filter--compact-target.workspace-filter--embedded {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .obstacle-filter--single-row .button,
    .unlock-filter-toolbar--embedded .button,
    .management-filter--users-inline .button {
        width: 100%;
    }

    .workspace-filter--embedded .workspace-filter__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 680px) {
    .obstacle-filter--single-row,
    .unlock-filter-toolbar--embedded,
    .management-filter--users-inline,
    .workspace-filter--compact-target.workspace-filter--embedded,
    .workspace-filter--compact-kpi.workspace-filter--embedded {
        grid-template-columns: 1fr;
    }

    .workspace-filter--embedded .workspace-filter__actions,
    .workspace-filter--embedded .workspace-filter__actions .button,
    .workspace-filter--embedded .workspace-filter__actions a,
    .obstacle-filter--single-row .button,
    .unlock-filter-toolbar--embedded .button,
    .management-filter--users-inline .button {
        width: 100%;
    }

    .workspace-filter--embedded .workspace-filter__actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.unlock-requests-workspace .empty-daily-state {
    min-height: 220px;
    border: 1px dashed var(--line);
    box-shadow: none;
}

/* Final filter sizing correction 1.0.2 */
.obstacle-filter-panel {
    width: fit-content;
    max-width: 100%;
    padding: 11px 12px;
}

.obstacle-filter--single-row {
    width: auto;
    max-width: 100%;
    grid-template-columns: 145px 145px minmax(190px, 230px) 88px 64px;
    gap: 7px;
}

.obstacle-filter--single-row select,
.obstacle-filter--single-row .button {
    min-height: 35px;
    height: 35px;
}

.obstacle-filter--single-row .button {
    width: 100%;
    padding-inline: 10px;
}

.management-filter--users-inline {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(200px, 1fr) 118px 150px 88px 64px;
    gap: 7px;
    padding: 10px 0 13px;
}

.management-filter--users-inline .search-field,
.management-filter--users-inline select,
.management-filter--users-inline .button {
    min-height: 35px;
    height: 35px;
}

.management-filter--users-inline .button {
    width: 100%;
    padding-inline: 9px;
}

.management-filter--users-inline .search-field input {
    min-width: 0;
}

@media (max-width: 1100px) {
    .obstacle-filter-panel {
        width: 100%;
    }

    .obstacle-filter--single-row {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .obstacle-filter--single-row .button,
    .management-filter--users-inline .button {
        width: 100%;
    }

    .management-filter--users-inline {
        grid-template-columns: minmax(220px, 1fr) 120px 150px 88px 64px;
    }
}

@media (max-width: 920px) {
    .management-filter--users-inline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .management-filter--users-inline .search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .obstacle-filter--single-row,
    .management-filter--users-inline {
        grid-template-columns: 1fr;
    }

    .management-filter--users-inline .search-field {
        grid-column: auto;
    }
}


/* Final filter correction 1.0.3 — Kendala memenuhi lebar workspace */
.obstacle-filter-panel {
    width: 100%;
    max-width: none;
    padding: 12px 14px;
}

.obstacle-filter--single-row {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns:
        minmax(140px, .78fr)
        minmax(140px, .78fr)
        minmax(220px, 1.35fr)
        minmax(92px, auto)
        minmax(68px, auto);
    align-items: end;
    gap: 8px;
}

.obstacle-filter--single-row label {
    min-width: 0;
}

.obstacle-filter--single-row select {
    width: 100%;
    min-width: 0;
}

.obstacle-filter--single-row .button {
    width: auto;
    min-width: 0;
    white-space: nowrap;
    justify-content: center;
}

.obstacle-filter--single-row .button--primary {
    min-width: 92px;
}

.obstacle-filter--single-row .button--ghost {
    min-width: 68px;
}

@media (max-width: 980px) {
    .obstacle-filter--single-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .obstacle-filter--single-row .button {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .obstacle-filter-panel {
        padding: 12px;
    }

    .obstacle-filter--single-row {
        grid-template-columns: 1fr;
    }
}


/* Layout update 1.0.4 — tombol reset konsisten pada filter */
.filter-reset-button {
    min-width: 76px;
    min-height: 39px;
    padding-inline: 15px;
    border: 1px solid rgba(73, 103, 255, .15);
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 7px 16px rgba(73, 103, 255, .09);
    white-space: nowrap;
}

.filter-reset-button:hover {
    color: var(--primary-dark);
    background: #e6ebff;
    border-color: rgba(73, 103, 255, .28);
    box-shadow: 0 10px 20px rgba(73, 103, 255, .15);
    transform: translateY(-1px);
}

.filter-reset-button:active {
    box-shadow: 0 4px 10px rgba(73, 103, 255, .11);
    transform: translateY(0) scale(.98);
}

.filter-reset-button:focus-visible {
    outline: 3px solid rgba(73, 103, 255, .24);
    outline-offset: 2px;
}

[data-theme="dark"] .filter-reset-button {
    color: #aebcff;
    background: #26345d;
    border-color: #3a4b7a;
    box-shadow: 0 7px 16px rgba(0, 0, 0, .18);
}

[data-theme="dark"] .filter-reset-button:hover {
    color: #d8dfff;
    background: #314270;
    border-color: #52679e;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .25);
}

@media (max-width: 980px) {
    .obstacle-filter--single-row .filter-reset-button,
    .management-filter--users-inline .filter-reset-button {
        width: 100%;
    }
}

/* Loading overlay global v1.0.6 — gaya emas, lokal, tanpa dependensi internet. */
.global-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.global-loading.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.global-loading__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(13, 19, 34, .54);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.global-loading__panel {
    position: relative;
    width: min(92vw, 360px);
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 28px 30px 24px;
    border: 1px solid rgba(222, 169, 52, .28);
    border-radius: 24px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: 0 24px 70px rgba(10, 17, 32, .28), 0 0 0 1px rgba(255,255,255,.08) inset;
    transform: translateY(8px) scale(.98);
    transition: transform 220ms ease;
}

.global-loading.is-active .global-loading__panel {
    transform: translateY(0) scale(1);
}

.global-loading__panel strong {
    margin-top: 4px;
    font-size: 17px;
    letter-spacing: -.015em;
}

.global-loading__panel > span {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

.global-loading__panel small {
    margin-top: 2px;
    color: var(--text-faint);
    font-size: 11px;
    text-align: center;
}

.golden-loader {
    width: 92px;
    height: 92px;
    position: relative;
    display: grid;
    place-items: center;
}

.golden-loader__orbit {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
    will-change: transform;
}

.golden-loader__orbit--outer {
    inset: 0;
    border-width: 4px;
    border-color: rgba(212, 147, 35, .15);
    border-top-color: #e2aa31;
    border-right-color: #b86b1d;
    animation: goldenOrbit 1.05s linear infinite;
}

.golden-loader__orbit--middle {
    inset: 10px;
    border-width: 3px;
    border-color: rgba(226, 170, 49, .12);
    border-bottom-color: #f0c85a;
    border-left-color: #c87b20;
    animation: goldenOrbitReverse .82s linear infinite;
}

.golden-loader__orbit--inner {
    inset: 21px;
    border-width: 3px;
    border-color: rgba(226, 170, 49, .14);
    border-top-color: #c87b20;
    animation: goldenOrbit .68s linear infinite;
}

.golden-loader__core {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(242, 193, 73, .18), rgba(178, 97, 18, .10));
    box-shadow: 0 8px 24px rgba(190, 117, 24, .16);
    animation: goldenPulse 1.35s ease-in-out infinite;
}

.golden-loader__core img {
    width: 29px;
    height: 29px;
    object-fit: contain;
}

body.global-loading-active {
    cursor: progress;
}

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

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

@keyframes goldenPulse {
    0%, 100% { transform: scale(.94); opacity: .82; }
    50% { transform: scale(1.06); opacity: 1; }
}

[data-theme="dark"] .global-loading__backdrop {
    background: rgba(3, 8, 18, .72);
}

[data-theme="dark"] .global-loading__panel {
    border-color: rgba(226, 170, 49, .30);
    background: color-mix(in srgb, var(--surface) 94%, #0a1020);
    box-shadow: 0 28px 80px rgba(0,0,0,.48), 0 0 0 1px rgba(255,255,255,.04) inset;
}

@media (max-width: 520px) {
    .global-loading__panel {
        width: min(94vw, 330px);
        padding: 24px 22px 21px;
        border-radius: 20px;
    }

    .golden-loader {
        width: 82px;
        height: 82px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .golden-loader__orbit--outer { animation-duration: 2.4s; }
    .golden-loader__orbit--middle { animation-duration: 2s; }
    .golden-loader__orbit--inner { animation-duration: 1.8s; }
    .golden-loader__core { animation: none; }
    .global-loading,
    .global-loading__panel { transition: none; }
}

/* Gemini Free Tier v1.0.9 */
.ai-free-tier-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 13px 15px;
    margin-top: 15px;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
    border-radius: 13px;
    color: var(--text);
    background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
}

.ai-free-tier-notice > div:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.ai-free-tier-notice .icon { width: 18px; height: 18px; }
.ai-free-tier-notice strong { display: block; font-size: 12px; }
.ai-free-tier-notice p { margin: 4px 0 0; color: var(--text-soft); font-size: 11px; line-height: 1.55; }
.ai-free-tier-notice small { display: block; margin-top: 5px; color: var(--text-faint); font-size: 10px; line-height: 1.5; }

[data-theme="dark"] .ai-free-tier-notice {
    border-color: #40517e;
    background: #202b46;
}

[data-theme="dark"] .ai-free-tier-notice > div:first-child {
    color: #b8c4ff;
    background: #172137;
}

@media (max-width: 640px) {
    .ai-free-tier-notice { grid-template-columns: 1fr; }
}

/* KPI Flow 1.1.0 */
.kpi-inherited-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.kpi-inherited-summary[hidden] {
    display: none;
}

.kpi-inherited-summary > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.kpi-inherited-summary span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-faint);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.kpi-inherited-summary strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .kpi-inherited-summary {
        grid-template-columns: 1fr;
    }
}

/* Target & KPI workspace refinement 1.1.1 */
@media (min-width: 1381px) {
    .workspace-layout--target-setup {
        grid-template-columns: minmax(0, 1fr) minmax(560px, 610px);
    }

    .workspace-layout--kpi-setup {
        grid-template-columns: minmax(0, 1fr) minmax(410px, 450px);
    }
}

@media (min-width: 1181px) and (max-width: 1380px) {
    .workspace-layout--target-setup {
        grid-template-columns: minmax(0, 1fr) minmax(500px, 540px);
    }

    .workspace-layout--kpi-setup {
        grid-template-columns: minmax(0, 1fr) 400px;
    }
}

.workspace-form-panel--target,
.workspace-form-panel--kpi {
    overflow: hidden;
}

.target-setup-form {
    gap: 14px;
}

.target-form-section {
    padding: 16px;
}

.target-form-grid {
    display: grid;
    align-items: start;
    gap: 12px;
}

.target-form-grid + .target-form-grid,
.target-form-grid + [id],
[id] + .target-form-grid {
    margin-top: 12px;
}

.target-form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.target-form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.target-form-grid__full {
    grid-column: 1 / -1;
}

.target-form-grid .form-field,
.target-form-section > .form-field {
    min-width: 0;
    margin-bottom: 0;
}

.target-form-section .form-notice {
    margin-top: 12px;
}

.target-duplicate-notice {
    margin: -2px 0 16px;
}

.target-days-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-top: 13px;
}

.target-days-row__label {
    color: var(--text-soft);
    font-size: 10px;
    font-weight: 750;
}

.target-days-row .day-selector {
    margin: 0;
}

.target-switch-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.target-switch-grid .switch-field {
    min-width: 0;
    height: 100%;
    margin: 0;
}

.kpi-group-list-panel {
    min-width: 0;
}

.kpi-user-groups {
    display: grid;
    gap: 16px;
}

.kpi-user-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.kpi-user-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.kpi-user-group__identity,
.kpi-user-group__summary,
.kpi-user-group__title-row {
    display: flex;
    align-items: center;
}

.kpi-user-group__identity {
    min-width: 0;
    gap: 11px;
}

.kpi-user-group__identity > div {
    min-width: 0;
}

.kpi-user-group__title-row {
    flex-wrap: wrap;
    gap: 8px;
}

.kpi-user-group__title-row h3 {
    margin: 0;
    font-size: 13px;
}

.kpi-user-group__identity p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 9px;
}

.kpi-user-group__summary {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 13px;
}

.kpi-user-group__summary > span {
    color: var(--text-soft);
    font-size: 9px;
    white-space: nowrap;
}

.kpi-user-group__summary > span strong {
    color: var(--text);
    font-size: 11px;
}

.kpi-user-group__summary form {
    margin: 0;
}

.kpi-duplicate-set-button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 9px;
}

.kpi-user-table-wrap {
    border: 0;
    border-radius: 0;
}

.kpi-user-table {
    min-width: 980px;
}

.kpi-user-table th,
.kpi-user-table td {
    padding: 12px 13px;
}

.kpi-user-table tbody tr.is-disabled {
    opacity: .58;
}

.kpi-table-target {
    min-width: 220px;
}

.kpi-table-target strong,
.kpi-table-target span,
.kpi-table-target small {
    display: block;
}

.kpi-table-target strong {
    font-size: 10px;
}

.kpi-table-target span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 8px;
}

.kpi-table-target small {
    max-width: 330px;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 270px;
}

.kpi-table-actions form {
    margin: 0;
}

.kpi-table-actions .button {
    min-height: 34px;
    padding: 0 9px;
    gap: 5px;
    border-radius: 9px;
    font-size: 8px;
}

.kpi-table-actions .button .icon {
    width: 13px;
    height: 13px;
}

.kpi-link-form {
    gap: 13px;
}

.kpi-link-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.kpi-link-form__block {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-soft);
}

.kpi-link-form__block .form-field:last-child,
.kpi-link-form__block .switch-field:last-child {
    margin-bottom: 0;
}

.kpi-link-form__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    padding-bottom: 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.kpi-link-form__heading > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    font-weight: 850;
}

.kpi-link-form__heading strong,
.kpi-link-form__heading small {
    display: block;
}

.kpi-link-form__heading strong {
    font-size: 10px;
}

.kpi-link-form__heading small {
    margin-top: 3px;
    color: var(--text-soft);
    font-size: 8px;
    line-height: 1.45;
}

.kpi-link-form__block--source,
.kpi-link-form__block--status {
    grid-column: 1 / -1;
}

.kpi-link-form__block--status .switch-field {
    margin: 0;
}

[data-theme="dark"] .kpi-user-group,
[data-theme="dark"] .kpi-link-form__block {
    background: var(--surface);
}

[data-theme="dark"] .kpi-user-group__header {
    background: var(--surface-soft);
}

@media (max-width: 1380px) {
    .target-form-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .target-form-grid--3 .form-field:last-child {
        grid-column: 1 / -1;
    }

    .kpi-link-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) {
    .workspace-form-panel--target,
    .workspace-form-panel--kpi {
        position: static;
    }

    .kpi-link-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .target-form-grid--2,
    .target-form-grid--3,
    .target-switch-grid,
    .kpi-link-form__grid {
        grid-template-columns: 1fr;
    }

    .target-form-grid--3 .form-field:last-child {
        grid-column: auto;
    }

    .target-days-row {
        grid-template-columns: 1fr;
    }

    .kpi-user-group__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .kpi-user-group__summary {
        width: 100%;
        justify-content: flex-start;
    }

    .kpi-user-group__summary form,
    .kpi-duplicate-set-button {
        width: 100%;
    }
}


/* Grafik analisis performa pribadi staff 1.1.5 */
.staff-trend-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}
.staff-trend-panel { min-width: 0; }
.staff-trend-heading { align-items: flex-start; }
.staff-trend-delta {
    min-width: 104px;
    display: grid;
    justify-items: end;
    gap: 3px;
    padding: 9px 10px;
    border-radius: 11px;
    background: var(--surface-soft);
}
.staff-trend-delta span { color: var(--text-faint); font-size: 8px; }
.staff-trend-delta strong { font-size: 10px; }
.staff-trend-delta.is-up strong { color: var(--success); }
.staff-trend-delta.is-down strong { color: var(--danger); }
.staff-trend-panel .interactive-line-chart { min-height: 270px; }
.staff-trend-panel .interactive-line-chart__canvas { height: 225px; }
@media (max-width: 1180px) { .staff-trend-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
    .staff-trend-heading { gap: 10px; }
    .staff-trend-delta { width: 100%; justify-items: start; }
}

/* Realtime status dan notifikasi bergaya Android 1.1.6 */
.app-toast-stack {
    width: min(390px, calc(100vw - 32px));
    position: fixed;
    z-index: 260;
    top: 84px;
    right: 22px;
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.app-toast {
    min-height: 72px;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 11px;
    padding: 12px 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(86, 102, 136, .18);
    border-radius: 17px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 20px 55px rgba(25, 34, 55, .2);
    backdrop-filter: blur(18px);
    pointer-events: auto;
    animation: app-toast-enter .38s cubic-bezier(.2, .8, .2, 1) both;
}

.app-toast.is-leaving { animation: app-toast-leave .28s ease both; }
.app-toast__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--primary);
    background: var(--primary-soft);
}
.app-toast__icon .icon { width: 20px; height: 20px; }
.app-toast__content { min-width: 0; display: grid; gap: 3px; }
.app-toast__content strong { color: var(--text); font-size: 12px; line-height: 1.25; }
.app-toast__content small { color: var(--text-soft); font-size: 10px; line-height: 1.45; }
.app-toast__close {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    align-self: start;
    border: 0;
    border-radius: 9px;
    color: var(--text-faint);
    background: transparent;
    font-size: 19px;
    cursor: pointer;
}
.app-toast__close:hover { color: var(--text); background: var(--surface-soft); }
.app-toast__progress {
    height: 3px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: left;
    border-radius: 999px;
    background: var(--primary);
    animation: app-toast-progress var(--toast-duration, 4600ms) linear forwards;
}
.app-toast--success .app-toast__icon { color: var(--success); background: var(--success-soft); }
.app-toast--success .app-toast__progress { background: var(--success); }
.app-toast--danger .app-toast__icon { color: var(--danger); background: var(--danger-soft); }
.app-toast--danger .app-toast__progress { background: var(--danger); }
.app-toast--warning .app-toast__icon { color: var(--warning); background: var(--warning-soft); }
.app-toast--warning .app-toast__progress { background: var(--warning); }
.app-toast--notification { cursor: pointer; }
.app-toast--notification .app-toast__content strong { display: flex; align-items: center; gap: 7px; }
.app-toast--notification .app-toast__content strong::after {
    content: 'BARU';
    padding: 2px 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    font-size: 6px;
    letter-spacing: .08em;
}

@keyframes app-toast-enter {
    from { opacity: 0; transform: translate3d(28px, -10px, 0) scale(.96); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes app-toast-leave {
    to { opacity: 0; transform: translate3d(35px, -8px, 0) scale(.96); }
}
@keyframes app-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Popover notifikasi: kartu heads-up mirip pusat notifikasi Android. */
.notification-popover {
    width: min(400px, calc(100vw - 26px));
    top: 55px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 75px rgba(20, 29, 49, .24);
    backdrop-filter: blur(20px);
    transform-origin: top right;
    animation: notification-popover-in .22s ease both;
}
.notification-popover__header { padding: 16px 17px 13px; }
.notification-popover__header strong { font-size: 13px; }
.notification-popover__header span { font-size: 9px; }
.notification-popover__header a { min-height: 30px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 9px; background: var(--primary-soft); font-size: 9px; }
.notification-popover__list { padding: 7px; }
.notification-preview-item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    margin-bottom: 4px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
}
.notification-preview-item:last-child { margin-bottom: 0; border-bottom: 0; }
.notification-preview-item:hover { border-color: var(--line); background: var(--surface-soft); transform: translateY(-1px); }
.notification-preview-item.is-unread { border-color: rgba(73, 103, 255, .12); background: linear-gradient(135deg, rgba(73, 103, 255, .09), rgba(73, 103, 255, .025)); }
.notification-preview-item__icon { width: 42px; height: 42px; border-radius: 13px; }
.notification-preview-item__icon--high { color: var(--danger); background: var(--danger-soft); }
.notification-preview-item__content { min-width: 0; display: grid; gap: 4px; }
.notification-preview-item__title { min-width: 0; display: flex; align-items: center; gap: 7px; }
.notification-preview-item__title strong { min-width: 0; flex: 1; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notification-preview-item__title i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(73, 103, 255, .10); }
.notification-preview-item__content small { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.45; }
.notification-preview-item__content em { color: var(--text-faint); font-size: 8px; font-style: normal; font-weight: 700; }
.notification-popover__empty { min-height: 150px; border-radius: 14px; background: var(--surface-soft); }
@keyframes notification-popover-in { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Carousel status yang berganti otomatis dan polling berkala. */
.live-status-carousel {
    min-width: 0;
    margin-bottom: 22px;
    overflow: hidden;
}
.live-status-carousel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}
.live-status-carousel__header h2 { margin: 4px 0 0; font-size: 17px; }
.live-status-carousel__header p { margin: 5px 0 0; color: var(--text-soft); font-size: 10px; line-height: 1.55; }
.live-status-carousel__live {
    min-height: 29px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(27, 173, 111, .18);
    border-radius: 999px;
    color: var(--success);
    background: var(--success-soft);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.live-status-carousel__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: live-status-pulse 1.6s ease infinite; }
@keyframes live-status-pulse { 50% { opacity: .35; box-shadow: 0 0 0 7px rgba(27, 173, 111, .08); } }
.live-status-carousel__viewport { min-height: 128px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(135deg, var(--surface-soft), var(--surface)); }
.live-status-carousel__slides { min-height: 128px; position: relative; }
.live-status-slide {
    min-height: 128px;
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 18px;
    opacity: 0;
    transform: translateX(24px);
    visibility: hidden;
    transition: opacity .38s ease, transform .38s ease, visibility .38s;
}
.live-status-slide.is-active { opacity: 1; transform: none; visibility: visible; }
.live-status-slide__body { min-width: 0; display: grid; gap: 7px; }
.live-status-slide__identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; }
.live-status-slide__identity strong { font-size: 12px; }
.live-status-slide__identity span { color: var(--text-faint); font-size: 8px; }
.live-status-slide blockquote { margin: 0; color: var(--text); font-size: 14px; font-weight: 650; line-height: 1.55; }
.live-status-slide small { color: var(--text-faint); font-size: 8px; }
.live-status-carousel__empty { min-height: 128px; display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--text-soft); }
.live-status-carousel__empty > .icon { color: var(--primary); }
.live-status-carousel__empty div { display: grid; gap: 3px; }
.live-status-carousel__empty strong { font-size: 11px; }
.live-status-carousel__empty span { font-size: 9px; }
.live-status-carousel__footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 12px; }
.live-status-carousel__controls { display: flex; align-items: center; gap: 9px; }
.live-status-carousel__controls > button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--surface);
    cursor: pointer;
}
.live-status-carousel__controls > button:hover { color: var(--primary); border-color: rgba(73, 103, 255, .28); background: var(--primary-soft); }
.live-status-carousel__controls > button:first-child .icon { transform: rotate(90deg); }
.live-status-carousel__controls > button:last-child .icon { transform: rotate(-90deg); }
.live-status-carousel__dots { display: flex; align-items: center; gap: 5px; }
.live-status-carousel__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .25s ease, background .25s ease; }
.live-status-carousel__dots button.is-active { width: 20px; background: var(--primary); }
.live-status-carousel--compact { margin-bottom: 0; }
.live-status-carousel--compact .live-status-carousel__header p { display: none; }
.live-status-carousel--compact .live-status-carousel__header h2 { font-size: 14px; }
.live-status-carousel--compact .live-status-carousel__viewport,
.live-status-carousel--compact .live-status-carousel__slides,
.live-status-carousel--compact .live-status-slide { min-height: 150px; }
.live-status-carousel--compact .live-status-slide { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 9px; }
.live-status-carousel--compact .live-status-slide blockquote { font-size: 12px; }

[data-theme="dark"] .app-toast,
[data-theme="dark"] .notification-popover { background: rgba(21, 28, 44, .97); border-color: var(--line); }
[data-theme="dark"] .notification-preview-item.is-unread { background: rgba(73, 103, 255, .12); }

@media (max-width: 760px) {
    .app-toast-stack { top: auto; right: 16px; bottom: 18px; left: 16px; width: auto; }
    .app-toast { grid-template-columns: 38px minmax(0, 1fr) 26px; border-radius: 16px; }
    .app-toast__icon { width: 38px; height: 38px; }
    .notification-popover { position: fixed; top: 76px; right: 12px; left: 12px; width: auto; max-height: calc(100vh - 94px); }
    .live-status-carousel__header { align-items: center; }
    .live-status-carousel__header p { display: none; }
    .live-status-slide { grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 9px; padding: 15px; }
    .live-status-slide blockquote { font-size: 12px; }
    .live-status-carousel__footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast, .app-toast.is-leaving, .app-toast__progress, .notification-popover, .live-status-carousel__live i { animation: none !important; }
    .live-status-slide { transition: none; }
}


/* v1.1.7 — komposisi dashboard ringkas per role */
.dashboard-grid--with-sidebar {
    grid-template-columns: minmax(0, 1.82fr) minmax(300px, .62fr);
    align-items: start;
}
.dashboard-side-stack {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 16px;
}
.dashboard-priority-panel {
    min-width: 0;
    padding-bottom: 16px;
}
.dashboard-priority-heading {
    margin-bottom: 10px;
}
.dashboard-priority-heading .section-description {
    max-width: 320px;
}
.priority-list--scroll {
    max-height: 338px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}
.priority-list--scroll::-webkit-scrollbar { width: 7px; }
.priority-list--scroll::-webkit-scrollbar-track { background: transparent; }
.priority-list--scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--line-strong); }
.priority-list--scroll .priority-item {
    min-height: 67px;
    padding: 11px 12px;
}
.priority-list--scroll .priority-number {
    width: 34px;
    height: 34px;
}

/* Status compact: cukup untuk satu update tanpa mengambil tinggi dashboard. */
.live-status-carousel--compact {
    padding: 14px 15px;
}
.live-status-carousel--compact .live-status-carousel__header {
    align-items: center;
    margin-bottom: 9px;
    gap: 10px;
}
.live-status-carousel--compact .live-status-carousel__header .section-kicker {
    font-size: 7px;
}
.live-status-carousel--compact .live-status-carousel__header h2 {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.25;
}
.live-status-carousel--compact .live-status-carousel__live {
    min-height: 24px;
    padding-inline: 8px;
    font-size: 7px;
}
.live-status-carousel--compact .live-status-carousel__viewport,
.live-status-carousel--compact .live-status-carousel__slides,
.live-status-carousel--compact .live-status-slide,
.live-status-carousel--compact .live-status-carousel__empty {
    min-height: 92px;
}
.live-status-carousel--compact .live-status-slide {
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-items: stretch;
    gap: 10px;
    padding: 11px 12px;
}
.live-status-carousel--compact .live-status-slide__body {
    gap: 4px;
}
.live-status-carousel--compact .live-status-slide__identity {
    gap: 4px 7px;
}
.live-status-carousel--compact .live-status-slide__identity strong {
    font-size: 10px;
}
.live-status-carousel--compact .live-status-slide__identity span {
    display: none;
}
.live-status-carousel--compact .live-status-slide blockquote {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 10.5px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.live-status-carousel--compact .live-status-slide small {
    font-size: 7.5px;
}
.live-status-carousel--compact .live-status-carousel__empty {
    padding: 12px;
}
.live-status-carousel--compact .live-status-carousel__empty strong { font-size: 9px; }
.live-status-carousel--compact .live-status-carousel__empty span { font-size: 8px; }
.live-status-carousel--compact .live-status-carousel__footer {
    padding-top: 8px;
    gap: 8px;
}
.live-status-carousel--compact .live-status-carousel__controls {
    gap: 6px;
}
.live-status-carousel--compact .live-status-carousel__controls > button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
}
.live-status-carousel--compact .live-status-carousel__dots button {
    width: 6px;
    height: 6px;
}
.live-status-carousel--compact .live-status-carousel__dots button.is-active {
    width: 16px;
}
.live-status-carousel--compact .text-link {
    font-size: 8px;
}

/* Staff: hilangkan tinggi paksa yang membuat ruang putih besar. */
.staff-home-layout {
    grid-template-columns: minmax(0, 1.9fr) minmax(270px, .52fr);
    gap: 16px;
}
.staff-home-daily {
    min-height: 0;
}
.staff-home-side {
    align-content: start;
    gap: 14px;
}
.staff-home-communication {
    padding: 15px;
}
.staff-home-communication .section-heading {
    margin-bottom: 6px;
}
.staff-home-communication .section-heading h2 {
    font-size: 14px;
}
.staff-home-comm-row {
    padding: 10px;
    margin-top: 7px;
}

/* HRD/Direktur: isi area kanan dengan status ringkas dan akses laporan. */
.observer-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(290px, .58fr);
    align-items: start;
    gap: 18px;
    margin-top: 18px;
}
.observer-overview-layout > * {
    min-width: 0;
}
.observer-overview-side {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 14px;
}
.observer-team-panel {
    margin: 0;
}
.observer-actions--stack {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 0;
}
.observer-actions--stack .observer-action-card {
    min-height: 68px;
    padding: 13px 14px;
}

@media (max-width: 1180px) {
    .dashboard-grid--with-sidebar,
    .observer-overview-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr);
    }
    .staff-home-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
    }
}

@media (max-width: 980px) {
    .dashboard-grid--with-sidebar,
    .observer-overview-layout,
    .staff-home-layout {
        grid-template-columns: 1fr;
    }
    .dashboard-side-stack,
    .observer-overview-side,
    .staff-home-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .priority-list--scroll {
        max-height: 320px;
    }
}

@media (max-width: 720px) {
    .dashboard-side-stack,
    .observer-overview-side,
    .staff-home-side {
        grid-template-columns: 1fr;
    }
    .priority-list--scroll {
        max-height: 310px;
    }
    .live-status-carousel--compact .live-status-carousel__footer {
        align-items: center;
        flex-direction: row;
    }
}


/* UAT permission readiness repair */
.uat-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.uat-heading-actions form { margin: 0; }
.uat-heading-actions .button { white-space: nowrap; }
@media (max-width: 720px) {
    .uat-heading-actions,
    .uat-heading-actions form,
    .uat-heading-actions .button {
        width: 100%;
    }
    .uat-heading-actions { align-items: stretch; }
    .uat-heading-actions .button { justify-content: center; }
}

/* v1.2.0 — Status collation, preview foto, emotikon, dan balas chat */
.profile-photo-editor__preview {
    position: relative;
}

.profile-photo-editor__preview.is-previewing .profile-avatar {
    outline: 3px solid rgba(73, 103, 255, .18);
    outline-offset: 3px;
}

.profile-photo-editor__preview-badge {
    position: absolute;
    right: -7px;
    bottom: 5px;
    padding: 4px 7px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    box-shadow: 0 7px 18px rgba(73, 103, 255, .25);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.chat-message {
    position: relative;
    align-items: flex-end;
    gap: 6px;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.chat-message.is-highlighted {
    margin-left: -8px;
    margin-right: -8px;
    padding: 8px;
    border-radius: 14px;
    background: rgba(73, 103, 255, .10);
    box-shadow: 0 0 0 2px rgba(73, 103, 255, .12);
}

.chat-message.is-mine .chat-message__reply {
    order: -1;
}

.chat-message__reply {
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    color: var(--text-soft);
    background: transparent;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
    opacity: .35;
    transition: opacity .2s ease, color .2s ease, background .2s ease;
}

.chat-message:hover .chat-message__reply,
.chat-message__reply:focus-visible {
    color: var(--primary);
    background: var(--primary-soft);
    opacity: 1;
}

.chat-replied-message {
    display: block;
    width: 100%;
    padding: 7px 9px;
    margin: 0 0 8px;
    border: 0;
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    color: inherit;
    background: rgba(73, 103, 255, .08);
    cursor: pointer;
    text-align: left;
}

.chat-replied-message strong,
.chat-replied-message span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-replied-message strong {
    margin-bottom: 2px;
    color: var(--primary);
    font-size: 8px;
    font-weight: 900;
}

.chat-replied-message span {
    color: var(--text-soft);
    font-size: 9px;
    line-height: 1.35;
}

.chat-message.is-mine .chat-replied-message {
    border-left-color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.14);
}

.chat-message.is-mine .chat-replied-message strong,
.chat-message.is-mine .chat-replied-message span {
    color: #fff;
}

.chat-composer__reply {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-left: 3px solid var(--primary);
    border-radius: 9px;
    background: var(--primary-soft);
}

.chat-composer__reply[hidden] {
    display: none;
}

.chat-composer__reply > div {
    min-width: 0;
}

.chat-composer__reply strong,
.chat-composer__reply span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-composer__reply strong {
    color: var(--primary);
    font-size: 9px;
}

.chat-composer__reply span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 9px;
}

.chat-composer__reply button {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    color: var(--text-soft);
    background: rgba(255,255,255,.7);
    cursor: pointer;
    font-size: 16px;
}

.chat-composer__message-wrap {
    position: relative;
    min-width: 0;
}

.chat-composer__message-wrap textarea {
    width: 100%;
    padding-right: 47px;
}

.chat-emoji-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: var(--surface-soft);
    cursor: pointer;
    font-size: 17px;
    transition: transform .2s ease, background .2s ease;
}

.chat-emoji-toggle:hover {
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.chat-emoji-picker {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(6, 34px);
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 16px 38px rgba(20, 31, 62, .18);
}

.chat-emoji-picker[hidden] {
    display: none;
}

.chat-emoji-picker button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-size: 19px;
}

.chat-emoji-picker button:hover,
.chat-emoji-picker button:focus-visible {
    background: var(--primary-soft);
    transform: scale(1.08);
}

[data-theme="dark"] .chat-replied-message {
    background: rgba(115, 136, 255, .12);
}

[data-theme="dark"] .chat-composer__reply button,
[data-theme="dark"] .chat-emoji-toggle {
    background: var(--surface);
}

@media (max-width: 720px) {
    .chat-message__reply {
        opacity: .75;
    }

    .chat-emoji-picker {
        right: auto;
        left: 0;
        grid-template-columns: repeat(6, minmax(30px, 1fr));
        width: min(100%, 250px);
    }
}

/* Profile photo consistency 1.2.1: avatar pengguna pada chat dan seluruh modul. */
.profile-avatar--chat {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 9px;
    box-shadow: 0 4px 12px rgba(26, 39, 75, .10);
}

.chat-message__avatar {
    align-self: flex-end;
    margin-bottom: 18px;
}

.chat-message.is-mine .chat-message__avatar {
    order: 2;
}

.chat-message.is-mine .chat-bubble {
    order: 0;
}

@media (max-width: 720px) {
    .profile-avatar--chat {
        width: 27px;
        height: 27px;
        flex-basis: 27px;
        font-size: 8px;
    }

    .chat-message__avatar {
        margin-bottom: 16px;
    }
}

/* v1.2.3 - Work greeting settings */
.system-setting-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.system-setting-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 15px;
}

.system-setting-inline-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    margin-top: 15px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.system-setting-inline-toggle > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.system-setting-inline-toggle strong {
    font-size: 10px;
}

.system-setting-inline-toggle small {
    max-width: 720px;
    margin-top: 4px;
    color: var(--text-faint);
    font-size: 8px;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .system-setting-grid--four,
    .system-setting-grid--five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .system-setting-grid--four,
    .system-setting-grid--five {
        grid-template-columns: 1fr;
    }

    .system-setting-inline-toggle {
        align-items: flex-start;
    }
}

/* Daily work log 1.3.0 */
.daily-custom-work-panel{margin-top:20px}.daily-custom-work-list{display:grid;gap:12px}.daily-custom-work-row{border:1px solid var(--border-color);border-radius:16px;padding:14px;background:var(--surface-soft)}.daily-custom-work-row__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.daily-custom-work-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(160px,.8fr) minmax(150px,.7fr) minmax(130px,.6fr);gap:12px}.daily-custom-work-grid__wide{grid-column:span 2}.daily-custom-work-actions{display:flex;justify-content:flex-end;margin-top:14px}@media(max-width:1050px){.daily-custom-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.daily-custom-work-grid{grid-template-columns:1fr}.daily-custom-work-grid__wide{grid-column:auto}.daily-custom-work-actions .button{width:100%}}


/* Operational 1.3.0: transparent KPI method and daily work recap */
.kpi-methodology-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 18%, var(--border));
}
.kpi-methodology-note__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.kpi-methodology-note strong { display: block; margin-bottom: 4px; }
.kpi-methodology-note p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.report-worklog-panel { margin-top: 18px; }
.report-worklog-table-wrap { max-height: 480px; overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
.report-worklog-table { min-width: 1120px; }
.report-worklog-table td { vertical-align: top; }
.report-worklog-table td small { display: block; margin-top: 3px; color: var(--text-muted); max-width: 260px; }
.report-worklog-note { display: block; margin-top: 10px; color: var(--text-muted); }
@media (max-width: 680px) {
    .kpi-methodology-note { padding: 12px; }
    .report-worklog-table-wrap { max-height: 420px; }
}

/* Operational Realtime & Data Usability 1.4.0 */
.daily-brand-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--line);
}
.daily-brand-entry-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}
.daily-brand-entry-table th,
.daily-brand-entry-table td {
    padding: 12px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    text-align: left;
}
.daily-brand-entry-table th:last-child,
.daily-brand-entry-table td:last-child { border-right: 0; }
.daily-brand-entry-table th {
    color: var(--text-faint);
    background: var(--surface-soft);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.daily-brand-entry-table td:first-child { width: 150px; }
.daily-brand-entry-table td:nth-child(2) { width: 220px; }
.daily-brand-entry-table td:nth-child(3),
.daily-brand-entry-table td:nth-child(4) { min-width: 210px; }
.daily-brand-entry-table td:last-child { width: 130px; }
.daily-brand-entry-table td strong,
.daily-brand-entry-table td small { display: block; }
.daily-brand-entry-table td small { margin-top: 5px; color: var(--text-faint); }
.daily-brand-entry-table :is(input, select, textarea) { width: 100%; }
.daily-brand-entry-table textarea { min-height: 66px; resize: vertical; }

.management-template-actions,
.template-import-form,
.bulk-action-toolbar,
.bulk-select-all {
    display: flex;
    align-items: center;
}
.management-template-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.template-import-form { margin: 0; }
.template-import-form input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bulk-action-toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 11px 13px;
    margin: 14px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}
.bulk-select-all { gap: 8px; color: var(--text); font-size: 10px; font-weight: 750; }
.bulk-action-toolbar > span { margin-left: auto; color: var(--text-soft); font-size: 9px; }
.record-select { display: inline-grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.record-select input { width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.record-select-column { width: 48px; text-align: center !important; }
.config-card__header > .record-select { align-self: flex-start; margin-top: 4px; }

.data-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 13px 2px 2px;
    color: var(--text-soft);
    font-size: 9px;
}
.data-pagination__pages { display: flex; align-items: center; gap: 5px; }
.data-pagination__pages button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text-soft);
    background: var(--surface);
    cursor: pointer;
}
.data-pagination__pages button.is-active { color: #fff; border-color: var(--primary); background: var(--primary); }
.data-pagination__pages button:disabled { opacity: .42; cursor: default; }
.data-pagination__size { display: flex; align-items: center; gap: 7px; }
.data-pagination__size select { min-height: 32px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: var(--surface); }

.management-modal-open { overflow: hidden; }
.management-modal {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 200ms ease;
}
.management-modal[hidden] { display: none; }
.management-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.management-modal.is-closing { visibility: visible; }
.management-modal__backdrop {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: rgba(7, 14, 31, .72);
    backdrop-filter: blur(6px);
    transition: opacity 220ms ease;
}
.management-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(94vw, 720px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 28px 80px rgba(6, 14, 34, .36);
    opacity: 0;
    transform: translateY(16px) scale(.985);
    transform-origin: center center;
    transition: opacity 190ms ease, transform 230ms cubic-bezier(.22,.72,.2,1);
}
.management-modal.is-open .management-modal__backdrop { opacity: 1; }
.management-modal.is-open .management-modal__dialog { opacity: 1; transform: translateY(0) scale(1); }
.management-modal__dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.management-modal__dialog h2 { margin: 5px 0; font-size: 22px; }
.management-modal__dialog header p { margin: 0; color: var(--text-soft); line-height: 1.55; }
.management-modal__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }

@media (min-width: 1181px) {
    .workspace-form-panel,
    .management-form-panel {
        max-height: calc(100vh - 116px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .workspace-form-heading {
        position: sticky;
        top: -1px;
        z-index: 5;
        padding: 5px 0 12px;
        background: var(--surface);
    }
}

:is(.report-filter, .report-filter--export) {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap;
    gap: 11px !important;
}
:is(.report-filter, .report-filter--export) > label { flex: 1 1 180px; min-width: 160px; margin: 0; }
:is(.report-filter, .report-filter--export) > :is(.button, button, .workspace-filter__actions) { flex: 0 0 auto; align-self: flex-end; }

[data-staff-greeting] { transition: background .45s ease, border-color .45s ease, box-shadow .45s ease; }
[data-staff-greeting] > div:first-child { transition: opacity .2s ease, transform .2s ease; }
[data-staff-greeting].is-changing > div:first-child { opacity: .2; transform: none; }
[data-greeting-icon] {
    display: inline-grid;
    place-items: center;
    min-width: 27px;
    min-height: 27px;
    margin-right: 5px;
    border-radius: 9px;
    background: rgba(255,255,255,.12);
    font-style: normal;
    animation: staffGreetingFloat 3.2s ease-in-out infinite;
}
.welcome-panel--greeting small,
.observer-hero--greeting small { display: block; margin-top: 7px; color: color-mix(in srgb, currentColor 72%, transparent); }
.manager-monthly-trend-panel { margin: 18px 0; }

.page-content :is(.data-table td, .data-table th, .config-card p, .table-stack span) { line-height: 1.5; }
.page-content .data-table td { font-size: max(9px, .72rem); }
.page-content .data-table th { font-size: max(8px, .65rem); }

@media (max-width: 720px) {
    .management-template-actions { width: 100%; justify-content: flex-start; }
    .management-template-actions .button,
    .template-import-form { flex: 1 1 auto; }
    .template-import-form .button { width: 100%; justify-content: center; }
    .bulk-action-toolbar > span { margin-left: 0; }
    .bulk-action-toolbar .button { width: 100%; }
    .data-pagination { align-items: flex-start; flex-direction: column; }
    .data-pagination__pages { order: 3; width: 100%; justify-content: center; }
    :is(.report-filter, .report-filter--export) > label,
    :is(.report-filter, .report-filter--export) > :is(.button, button, .workspace-filter__actions) { flex: 1 1 100%; width: 100%; }
    .management-modal { padding: 9px; }
    .management-modal__dialog { padding: 17px; border-radius: 17px; }
    .management-modal__actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    [data-greeting-icon] { animation: none; }
    [data-staff-greeting] > div:first-child { transition: none; }
}

/* Operational refinement 1.5.0 */
.dashboard-chart-stack {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 18px;
}

.dashboard-chart-stack .manager-monthly-trend-panel { margin: 0; }
.report-interactive-trend { width: 100%; min-width: 0; }
.report-trend-panel .interactive-line-chart__canvas { height: clamp(250px, 28vw, 350px); }

.status-emoji-picker {
    display: grid;
    gap: 8px;
    padding: 12px;
    margin: 12px 0 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
}

.status-emoji-picker > span { color: var(--text-soft); font-size: 10px; font-weight: 750; }
.status-emoji-picker > div { display: flex; flex-wrap: wrap; gap: 7px; }
.status-emoji-picker button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    font-size: 18px;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.status-emoji-picker button:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); }

/* Struktur file Excel dan seluruh turunannya mengikuti night mode. */
[data-theme="dark"] :is(.export-content-guide, .export-sheet-grid > div, .export-history-panel, .export-history-row) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}
[data-theme="dark"] .export-sheet-grid > div { background: var(--surface-soft); }
[data-theme="dark"] .export-format-card li,
[data-theme="dark"] .export-sheet-grid span,
[data-theme="dark"] .export-history-row span { color: var(--text-soft); }
[data-theme="dark"] .status-emoji-picker { border-color: var(--line); background: var(--surface-soft); }
[data-theme="dark"] .status-emoji-picker button { color: var(--text); border-color: var(--line); background: var(--surface); }

/* Profil dipindahkan ke drawer sidebar pada layar HP. */
.sidebar-profile__identity,
.sidebar-profile__actions { display: none; }

@media (max-width: 900px) {
    .profile-header-menu { display: none; }
    .sidebar__profile {
        display: grid !important;
        flex: 0 0 auto;
        gap: 10px;
        padding: 13px 14px max(14px, env(safe-area-inset-bottom));
        margin-top: 0;
    }
    .sidebar-profile__identity {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sidebar-profile__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .sidebar-profile__actions a {
        min-width: 0;
        min-height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 8px;
        border: 1px solid rgba(255,255,255,.09);
        border-radius: 10px;
        color: #c8d0ec;
        background: rgba(255,255,255,.045);
        font-size: 10px;
        font-weight: 700;
    }
    .sidebar-profile__actions a:hover { color: #fff; background: rgba(255,255,255,.09); }
    .sidebar-profile__actions .sidebar-profile__logout { color: #ffabb1; }
    .sidebar-profile__actions .icon { width: 15px; height: 15px; }
}

@media (max-width: 560px) {
    .report-overview-grid { grid-template-columns: minmax(0, 1fr); }
    .report-trend-panel .interactive-line-chart__canvas { height: 270px; }
}

/* Transisi lintas halaman berlaku global pada Chrome/Edge modern dan tetap
   memiliki fallback instan pada browser lama. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
    animation: dashboardPageLeave 170ms ease-in both;
}
::view-transition-new(root) {
    animation: dashboardPageEnter 260ms cubic-bezier(.22,.72,.2,1) both;
}
@keyframes dashboardPageLeave {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: .72; transform: translateY(-3px); }
}
@keyframes dashboardPageEnter {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
    .management-modal,
    .management-modal__backdrop,
    .management-modal__dialog { transition: none !important; }
}

/* Operational refinement 1.6.0
   Target/KPI Setup memakai satu scroll halaman, panel form lebih ramping,
   kelompok penerima konsisten, dan dark mode menutup seluruh field pencarian. */
@media (min-width: 1281px) {
    .workspace-layout--target-setup,
    .workspace-layout--kpi-setup {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 16px;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    .workspace-layout--target-setup,
    .workspace-layout--kpi-setup {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 14px;
    }
}

/* Semua form yang berada di samping mengikuti scroll dokumen. */
.workspace-form-panel,
.management-form-panel,
.target-form-panel {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
}

.workspace-form-heading {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    padding-top: 0 !important;
    background: transparent !important;
}

.workspace-form-panel--target,
.workspace-form-panel--kpi {
    padding: 17px;
}

.workspace-form-panel--target :is(.target-form-grid--2, .target-form-grid--3),
.workspace-form-panel--kpi .kpi-link-form__grid,
.workspace-form-panel--target .target-switch-grid,
.workspace-form-panel--kpi .target-switch-grid {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-form-panel--target .target-form-grid__full,
.workspace-form-panel--target .target-form-grid--3 .form-field:last-child {
    grid-column: auto;
}

.workspace-form-panel--target .workspace-form,
.workspace-form-panel--kpi .workspace-form {
    gap: 10px;
}

.workspace-form-panel--target .workspace-form-section,
.workspace-form-panel--kpi .kpi-link-form__block {
    padding: 12px;
    border-radius: 12px;
}

.workspace-form-panel--target .workspace-form-section__title,
.workspace-form-panel--kpi .kpi-link-form__heading {
    padding-bottom: 9px;
    margin-bottom: 10px;
}

.workspace-form-panel--target .target-days-row,
.workspace-form-panel--kpi .target-days-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.workspace-form-panel--target .day-selector,
.workspace-form-panel--kpi .day-selector {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-form-panel--target :is(input, select),
.workspace-form-panel--kpi :is(input, select) {
    min-height: 42px;
}

.workspace-form-panel--target textarea {
    min-height: 84px;
}

/* Kelompok Target Setup per staff/posisi. */
.target-user-groups {
    display: grid;
    gap: 14px;
}

.target-user-group {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.target-user-group__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}

.target-user-group__identity,
.target-user-group__title-row,
.target-user-group__summary {
    display: flex;
    align-items: center;
}

.target-user-group__identity {
    min-width: 0;
    gap: 11px;
}

.target-user-group__identity > div {
    min-width: 0;
}

.target-user-group__icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
}

.target-user-group__title-row {
    flex-wrap: wrap;
    gap: 7px;
}

.target-user-group__title-row h3 {
    margin: 0;
    font-size: 13px;
}

.target-user-group__identity p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 10px;
}

.target-user-group__summary {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 12px;
}

.target-user-group__summary > span {
    color: var(--text-soft);
    font-size: 10px;
    white-space: nowrap;
}

.target-user-group__summary > span strong {
    color: var(--text);
    font-size: 12px;
}

.group-select-control {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-soft);
    background: var(--surface);
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.group-select-control input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--primary);
}

.record-select--placeholder {
    width: 17px;
    height: 17px;
}

.target-user-group__items {
    gap: 10px;
    padding: 12px;
}

.target-user-group .config-card {
    padding: 14px;
    border-radius: 13px;
    background: var(--surface);
    box-shadow: none;
}

.target-user-group .config-card__header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
}

.target-user-group .config-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
}

.target-user-group .config-card__facts {
    gap: 7px;
    margin-top: 12px;
}

.target-user-group .config-card__facts > div {
    padding: 9px 10px;
    background: var(--surface-soft);
}

.target-user-group .config-card__footer {
    padding-top: 11px;
    margin-top: 11px;
}

.target-user-group .config-card__actions .button,
.kpi-user-group .kpi-table-actions .button {
    min-height: 34px;
}

/* KPI lebih lebar dan tidak memaksa tabel besar masuk ke kolom sempit. */
.kpi-user-table {
    min-width: 840px;
}

.kpi-user-table th,
.kpi-user-table td {
    padding: 11px 12px;
}

.kpi-user-group__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid var(--line);
    color: var(--text-soft);
    background: var(--surface-soft);
    font-size: 10px;
}

.kpi-user-group__footer form {
    margin: 0;
}

/* Pencarian dan seluruh field mengikuti night mode, termasuk lapisan input
   di dalam komponen search-field. */
[data-theme="dark"] :is(
    .workspace-filter,
    .workspace-filter--embedded,
    .workspace-filter .search-field,
    .bulk-action-toolbar,
    .group-select-control,
    .target-user-group,
    .target-user-group .config-card,
    .target-user-group .config-card__facts > div,
    .kpi-user-group__footer,
    .duplicate-review-summary > div,
    .management-modal__dialog
) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

[data-theme="dark"] :is(.target-user-group__header, .kpi-user-group__header) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
}

[data-theme="dark"] .workspace-filter :is(input[type="search"], select),
[data-theme="dark"] .workspace-filter .search-field input,
[data-theme="dark"] .management-modal__dialog :is(input, select, textarea),
[data-theme="dark"] .workspace-form-panel :is(input, select, textarea) {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-soft);
    color-scheme: dark;
}

[data-theme="dark"] .workspace-filter .search-field input {
    background: transparent;
}

.duplicate-review-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 16px;
}

.duplicate-review-summary > div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
}

.duplicate-review-summary span,
.duplicate-review-summary strong {
    display: block;
}

.duplicate-review-summary span {
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.duplicate-review-summary strong {
    margin-top: 5px;
    overflow-wrap: anywhere;
    font-size: 12px;
}

.duplicate-review-summary--target {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .workspace-layout--target-setup,
    .workspace-layout--kpi-setup {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-form-panel--target :is(.target-form-grid--2, .target-form-grid--3),
    .workspace-form-panel--kpi .kpi-link-form__grid,
    .workspace-form-panel--target .target-switch-grid,
    .workspace-form-panel--kpi .target-switch-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-form-panel--target .target-form-grid__full {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .target-user-group__header,
    .kpi-user-group__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .target-user-group__summary,
    .group-select-control,
    .kpi-user-group__footer form,
    .kpi-user-group__footer .button {
        width: 100%;
    }

    .target-user-group__summary {
        justify-content: flex-start;
    }

    .group-select-control {
        justify-content: center;
    }

    .target-user-group .config-card__header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .target-user-group .config-card__primary-value {
        grid-column: 2;
        align-items: flex-start;
        text-align: left;
    }

    .target-user-group .config-card__facts,
    .workspace-form-panel--target :is(.target-form-grid--2, .target-form-grid--3),
    .workspace-form-panel--kpi .kpi-link-form__grid,
    .workspace-form-panel--target .target-switch-grid,
    .workspace-form-panel--kpi .target-switch-grid,
    .duplicate-review-summary,
    .duplicate-review-summary--target {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace-form-panel--target .target-form-grid__full {
        grid-column: auto;
    }
}

/* Brain Arena Foundation 1.14.0 */
.brain-foundation-heading { align-items:flex-start; gap:18px; }
.brain-foundation-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.brain-foundation-stat { display:flex; flex-direction:column; gap:6px; min-height:138px; }
.brain-foundation-stat > span { color:var(--text-soft); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.brain-foundation-stat > strong { color:var(--text); font-size:28px; line-height:1.1; }
.brain-foundation-stat > small { color:var(--text-soft); line-height:1.5; }
.brain-foundation-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:18px; }
.brain-foundation-main,.brain-foundation-side { display:grid; gap:18px; min-width:0; }
.brain-lifecycle-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.brain-lifecycle-step { position:relative; display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.brain-lifecycle-step > span { color:var(--primary); font-size:11px; font-weight:900; }
.brain-lifecycle-step > strong { font-size:13px; overflow-wrap:anywhere; }
.brain-lifecycle-step > small { color:var(--text-soft); }
.brain-lifecycle-step--purged { border-style:dashed; }
.brain-retention-note { margin-top:14px; }
.brain-permission-table { display:grid; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.brain-permission-row { display:grid; grid-template-columns:minmax(140px,1fr) minmax(170px,1fr) minmax(130px,.8fr) minmax(130px,.8fr); align-items:center; gap:12px; min-height:52px; padding:10px 14px; border-bottom:1px solid var(--line); }
.brain-permission-row:last-child { border-bottom:0; }
.brain-permission-row--head { min-height:42px; background:var(--surface-soft); color:var(--text-soft); font-size:11px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.brain-permission-row .status-badge { justify-self:start; }
.brain-cleanup-settings,.brain-control-list { display:grid; gap:12px; }
.brain-fixed-setting { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.brain-fixed-setting span { color:var(--text-soft); font-size:12px; }
.brain-fixed-setting strong { white-space:nowrap; }
.brain-control-list form { display:grid; gap:6px; }
.brain-control-list form > small { color:var(--text-soft); line-height:1.45; }
.brain-report-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.brain-report-grid > div { display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); }
.brain-report-grid span { color:var(--text-soft); font-size:11px; }
.brain-report-grid strong { font-size:20px; }
.brain-preview-list { display:grid; gap:8px; margin-top:14px; }
.brain-preview-list article { display:grid; grid-template-columns:minmax(180px,1fr) repeat(3,auto); align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.brain-preview-list article > div { display:flex; flex-direction:column; gap:2px; }
.brain-preview-list small,.brain-preview-list article > span { color:var(--text-soft); font-size:12px; }
.brain-health-list { display:grid; gap:0; }
.brain-health-list > div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.brain-health-list > div:last-child { border-bottom:0; }
.brain-health-list span { color:var(--text-soft); }
.brain-health-list strong { text-align:right; }
.brain-next-stage { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; }
.brain-next-stage p { max-width:850px; margin-bottom:0; }
@media (max-width:1180px) {
    .brain-foundation-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .brain-foundation-layout { grid-template-columns:1fr; }
    .brain-foundation-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .brain-foundation-side .brain-health-panel { grid-column:1/-1; }
}
@media (max-width:760px) {
    .brain-foundation-summary,.brain-foundation-side,.brain-report-grid { grid-template-columns:1fr; }
    .brain-lifecycle-row { grid-template-columns:1fr; }
    .brain-permission-table { overflow-x:auto; }
    .brain-permission-row { min-width:780px; }
    .brain-preview-list article { grid-template-columns:1fr; gap:5px; }
    .brain-next-stage { align-items:flex-start; flex-direction:column; }
}

/* v1.23.4 - observer priority layout and daily work by role */
.performance-filter--team-work {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
}

.member-daily-stats--with-work {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.role-work-section {
    margin-top: 22px;
}

.role-work-heading {
    align-items: flex-start;
}

.role-work-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.role-work-summary-grid > article {
    min-width: 0;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.role-work-summary-grid span,
.role-work-summary-grid small {
    display: block;
    color: var(--text-soft);
}

.role-work-summary-grid span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.role-work-summary-grid strong {
    display: block;
    margin-top: 7px;
    font-size: 23px;
    letter-spacing: -.04em;
}

.role-work-summary-grid small {
    margin-top: 4px;
    font-size: 9px;
}

.role-work-summary--danger {
    border-color: color-mix(in srgb, var(--danger) 28%, var(--line)) !important;
    background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)) !important;
}

.role-work-stack {
    display: grid;
    gap: 14px;
}

.role-work-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.role-work-card--warning {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--line));
}

.role-work-card > summary {
    display: grid;
    grid-template-columns: minmax(230px, 1fr) minmax(300px, .8fr) auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--primary-soft)), var(--surface));
}

.role-work-card > summary::-webkit-details-marker {
    display: none;
}

.role-work-card__identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.role-work-card__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--primary);
    background: var(--primary-soft);
}

.role-work-card__identity > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.role-work-card__identity strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.role-work-card__identity span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 9px;
}

.role-work-card__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 8px;
}

.role-work-card__metrics > div {
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface-soft);
    text-align: center;
}

.role-work-card__metrics span {
    display: block;
    color: var(--text-faint);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.role-work-card__metrics strong {
    display: block;
    margin-top: 3px;
    font-size: 12px;
}

.role-work-card__chevron {
    color: var(--text-faint);
    transition: transform var(--transition);
}

.role-work-card[open] .role-work-card__chevron {
    transform: rotate(180deg);
}

.role-work-member-list {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line);
    background: var(--surface-soft);
}

.role-work-member {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.role-work-member > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
}

.role-work-member--empty > header {
    border-bottom: 0;
}

.role-work-member__stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: wrap;
}

.role-work-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.role-work-column {
    min-width: 0;
    padding: 13px 14px 15px;
}

.role-work-column + .role-work-column {
    border-left: 1px solid var(--line);
}

.role-work-column__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}

.role-work-column__title span {
    color: var(--text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.role-work-column__title b {
    min-width: 24px;
    padding: 4px 7px;
    border-radius: 999px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 9px;
    text-align: center;
}

.role-work-items {
    display: grid;
    gap: 7px;
}

.role-work-item {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface-soft);
}

.role-work-item > div {
    min-width: 0;
}

.role-work-item strong,
.role-work-item span,
.role-work-item small {
    display: block;
}

.role-work-item strong {
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.4;
}

.role-work-item > div > span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 8px;
}

.role-work-item small {
    margin-top: 5px;
    color: var(--text-soft);
    font-size: 8px;
    line-height: 1.45;
}

.role-work-item > .status-badge {
    flex: 0 0 auto;
}

.role-work-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    color: var(--text-soft);
    font-size: 9px;
}

.role-work-empty--compact {
    min-height: 52px;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: 10px;
    text-align: center;
}

@media (max-width: 1180px) {
    .performance-filter--team-work {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .performance-filter--team-work > .button {
        grid-column: 1 / -1;
    }
    .role-work-card > summary {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, .8fr) auto;
    }
}

@media (max-width: 900px) {
    .role-work-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .role-work-card > summary {
        grid-template-columns: 1fr auto;
    }
    .role-work-card__metrics {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .role-work-columns {
        grid-template-columns: 1fr;
    }
    .role-work-column + .role-work-column {
        border-top: 1px solid var(--line);
        border-left: 0;
    }
    .member-daily-stats--with-work {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .performance-filter--team-work,
    .role-work-summary-grid {
        grid-template-columns: 1fr;
    }
    .role-work-card > summary {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
    .role-work-card__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .role-work-member > header {
        align-items: flex-start;
        flex-direction: column;
    }
    .role-work-member__stats {
        justify-content: flex-start;
    }
    .member-daily-stats--with-work {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .role-work-card__metrics {
        grid-template-columns: 1fr;
    }
    .role-work-item {
        flex-direction: column;
    }
}

[data-theme="dark"] .role-work-card,
[data-theme="dark"] .role-work-member,
[data-theme="dark"] .role-work-summary-grid > article {
    background: var(--surface);
}

[data-theme="dark"] .role-work-card > summary,
[data-theme="dark"] .role-work-item,
[data-theme="dark"] .role-work-card__metrics > div {
    background: var(--surface-soft);
}

/* v1.23.5 - observer order refinement and staff drill-down work detail */
.observer-metrics {
    margin-top: 18px;
}

.observer-overview-side {
    gap: 10px;
}

.observer-actions--stack {
    gap: 7px;
}

.observer-actions--stack .observer-action-card {
    min-height: 50px;
    padding: 9px 11px;
    gap: 9px;
    border-radius: 12px;
    box-shadow: none;
}

.observer-actions--stack .observer-action-card > .icon {
    width: 17px;
    height: 17px;
}

.observer-actions--stack .observer-action-card strong {
    font-size: 10px;
    line-height: 1.2;
}

.observer-actions--stack .observer-action-card span {
    margin-top: 2px;
    font-size: 7px;
    line-height: 1.25;
}

.observer-actions--stack .observer-action-card b {
    font-size: 11px;
}

.performance-member-card--work-detail > summary {
    min-height: 66px;
}

.member-daily-stats--staff-detail {
    display: grid;
    grid-template-columns: repeat(6, minmax(54px, 1fr)) auto;
    align-items: center;
    flex: 1 1 650px;
    max-width: 760px;
    gap: 10px;
}

.member-daily-stats--staff-detail > div {
    min-width: 0;
}

.performance-member-work-detail {
    border-top: 1px solid var(--line);
    background: #fafbff;
}

.performance-member-work-detail__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.performance-member-work-detail__heading > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.performance-member-work-detail__heading strong {
    margin-top: 4px;
    font-size: 11px;
}

.performance-member-work-columns .role-work-column {
    padding: 13px 14px 15px;
}

[data-theme="dark"] .performance-member-work-detail {
    background: var(--surface-soft);
}

[data-theme="dark"] .performance-member-work-detail__heading {
    background: var(--surface);
}

@media (max-width: 1180px) {
    .member-daily-stats--staff-detail {
        grid-template-columns: repeat(3, minmax(72px, 1fr)) auto;
        max-width: 580px;
    }

    .member-daily-stats--staff-detail .member-expand-icon {
        grid-column: 4;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 900px) {
    .performance-member-card--work-detail > summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-daily-stats--staff-detail {
        width: 100%;
        max-width: none;
        flex-basis: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    }
}

@media (max-width: 620px) {
    .member-daily-stats--staff-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    }

    .member-daily-stats--staff-detail .member-expand-icon {
        grid-column: 3;
        grid-row: 1 / span 3;
    }

    .performance-member-work-detail__heading {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* v1.23.6 - manager summary order and localized Daily Check number input */


/* v1.24.0 arcade, analytics alignment, mobile hardening */
.performance-highlight-person__identity{display:flex;flex-direction:column;min-width:0;gap:3px}.performance-highlight-person__identity strong{display:block}.performance-highlight-person__identity small{display:block;color:var(--muted,#64748b);line-height:1.35}
.arcade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.arcade-card{cursor:pointer;min-height:160px;display:flex;flex-direction:column;justify-content:space-between}.arcade-stage{position:relative;min-height:520px;overflow:hidden}.arcade-canvas{display:block;width:100%;max-width:880px;height:480px;margin:auto;border-radius:18px;background:#10172a;touch-action:none}.arcade-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}.arcade-scoreboard{display:flex;gap:8px;flex-wrap:wrap}.arcade-scoreboard span{padding:8px 12px;border-radius:999px;background:var(--soft-surface,#f3f6fb);font-weight:800}.arcade-word-board{display:grid;gap:12px;max-width:760px;margin:30px auto}.arcade-word-board input{font-size:24px;text-align:center;letter-spacing:4px}.arcade-crossword{display:grid;grid-template-columns:repeat(9,36px);gap:3px;justify-content:center}.arcade-crossword input{width:36px;height:36px;text-align:center;text-transform:uppercase;font-weight:900}.arcade-crossword input[disabled]{background:#172033;border-color:#172033}.user-permission-layout{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:18px}.user-permission-list{max-height:650px;overflow:auto}.user-permission-list a{display:flex;gap:10px;padding:10px;border-radius:12px;text-decoration:none}.user-permission-list a.is-active{background:var(--soft-surface,#f3f6fb)}
@media(max-width:1100px){.arcade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.user-permission-layout{grid-template-columns:1fr}}
@media(max-width:760px){.arcade-grid{grid-template-columns:1fr}.arcade-stage{min-height:420px}.arcade-canvas{height:390px}.topbar__actions{gap:5px}.performance-highlight-person{align-items:flex-start}.performance-highlight-person__score{margin-left:auto}.table-scroll,.data-table-wrap{max-width:100%;overflow-x:auto}.panel{min-width:0}.dashboard-grid,.observer-operational-grid,.manager-operational-flow{grid-template-columns:1fr!important}.arcade-crossword{grid-template-columns:repeat(9,29px)}.arcade-crossword input{width:29px;height:29px}}



/* v1.24.2 - antarmuka Bahasa Indonesia tetap dan perapian hak akses */
.role-performance-highlight__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.role-performance-highlight__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}
.role-performance-highlight__copy > strong,
.role-performance-highlight__copy > small {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.role-performance-highlight__copy > strong { font-size: 13px; line-height: 1.35; }
.role-performance-highlight__copy > small { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.4; }

.user-permission-panel { margin-top: 20px; padding: 22px; }
.user-permission-panel__heading { align-items: flex-start; margin-bottom: 18px; }
.user-permission-layout {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}
.user-permission-sidebar {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft);
}
.user-permission-sidebar__head { padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.user-permission-sidebar__head strong,
.user-permission-sidebar__head small { display: block; }
.user-permission-sidebar__head strong { font-size: 12px; }
.user-permission-sidebar__head small { margin-top: 4px; color: var(--text-faint); font-size: 9px; line-height: 1.45; }
.user-permission-list { max-height: 620px; overflow-y: auto; padding: 8px; }
.user-permission-list__item {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px !important;
    padding: 11px 10px !important;
    border: 1px solid transparent;
    border-radius: 13px !important;
    color: var(--text);
    text-decoration: none;
}
.user-permission-list__item + .user-permission-list__item { margin-top: 4px; }
.user-permission-list__item:hover { border-color: var(--line); background: var(--surface); }
.user-permission-list__item.is-active { border-color: color-mix(in srgb, var(--primary) 34%, var(--line)); background: var(--primary-soft); }
.user-permission-list__item > .icon { width: 15px; height: 15px; color: var(--text-faint); }
.user-permission-list__identity { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 2px; }
.user-permission-list__identity > strong,
.user-permission-list__identity > small { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-permission-list__identity > strong { font-size: 11px; line-height: 1.35; }
.user-permission-list__identity > small { color: var(--text-faint); font-size: 8px; line-height: 1.35; }
.user-permission-form { min-width: 0; }
.user-permission-selected {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--surface), var(--surface-soft));
}
.user-permission-selected h3 { margin: 3px 0 0; font-size: 17px; }
.user-permission-selected p { margin: 4px 0 0; color: var(--text-soft); font-size: 9px; }
.user-permission-groups { display: grid; gap: 12px; }
.user-permission-group .permission-row > span { min-width: 0; }
.user-permission-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0 0;
    margin-top: 15px;
    border-top: 1px solid var(--line);
}
.user-permission-actions p { display: flex; align-items: flex-start; gap: 7px; max-width: 610px; margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.5; }
.user-permission-actions p .icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--primary); }

@media (max-width: 1100px) {
    .user-permission-layout { grid-template-columns: 1fr; }
    .user-permission-list { max-height: 340px; }
}
@media (max-width: 680px) {
    .user-permission-panel { padding: 16px; }
    .user-permission-selected { grid-template-columns: auto minmax(0, 1fr); }
    .user-permission-selected .status-badge { grid-column: 1 / -1; justify-self: start; }
    .user-permission-actions { align-items: stretch; flex-direction: column; }
    .user-permission-actions .button { width: 100%; justify-content: center; }
    .role-performance-highlight__copy > small { white-space: normal; }
}

/* Kontrol tema halaman autentikasi setelah switch bahasa dihapus */
.auth-toolbar {
    position: fixed;
    z-index: 40;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-toolbar .auth-theme-toggle { position: static; }
@media (max-width: 640px) {
    .auth-toolbar { top: 12px; right: 12px; }
}

/* ========================================================================== */
/* Brain Arena Teka Teki Silang Profesional - v1.24.5                        */
/* ========================================================================== */
.arcade-card__topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.arcade-card__badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--surface-soft,#f3f6fb);font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft,#61708a)}.arcade-card--featured{position:relative;overflow:hidden;border-color:rgba(82,96,255,.32);background:linear-gradient(145deg,rgba(244,246,255,.98),rgba(236,241,255,.94))}.arcade-card--featured:before{content:"";position:absolute;inset:auto -50px -80px auto;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(92,86,255,.2),transparent 68%)}.arcade-card--featured .arcade-card__badge{background:#5668ff;color:#fff}.arcade-leaderboard-panel{margin-top:16px}.leaderboard-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 13px;border-bottom:1px solid var(--line,#e7ebf3)}.leaderboard-row:last-child{border-bottom:0}.leaderboard-row small{font-size:12px;color:var(--text-soft,#73809a)}.leaderboard-row.is-current-user{border-radius:12px;background:rgba(82,96,255,.08)}

.crossword-landing{display:grid;gap:22px}.crossword-landing__hero{position:relative;overflow:hidden;padding:34px;border-radius:26px;color:#fff;background:linear-gradient(135deg,#202e72 0%,#4e5fe7 52%,#7859dd 100%);box-shadow:0 22px 55px rgba(45,57,147,.24)}.crossword-landing__hero:before,.crossword-landing__hero:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.crossword-landing__hero:before{width:260px;height:260px;right:-80px;top:-110px;background:rgba(255,255,255,.1)}.crossword-landing__hero:after{width:160px;height:160px;right:150px;bottom:-110px;border:30px solid rgba(255,255,255,.08)}.crossword-landing__hero h2{position:relative;max-width:850px;margin:12px 0 10px;font-size:clamp(28px,4vw,46px);line-height:1.08;color:#fff}.crossword-landing__hero p{position:relative;max-width:760px;margin:0;color:rgba(255,255,255,.83);font-size:16px;line-height:1.7}.crossword-landing__badge{position:relative;display:inline-flex;padding:7px 12px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.crossword-feature-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px;max-width:850px}.crossword-feature-grid span{padding:13px 14px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.1);font-size:13px}.crossword-feature-grid b{display:block;margin-bottom:3px;font-size:16px;color:#fff}.crossword-howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.crossword-howto>div{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line,#e4e9f2);border-radius:18px;background:var(--surface,#fff)}.crossword-howto span{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#5168ff,#7957d8);color:#fff;font-weight:900}.crossword-howto p{margin:0;font-size:13px;line-height:1.5;color:var(--text-soft,#66738a)}.crossword-level-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.crossword-level-heading h3{margin:5px 0 0}.crossword-personal-best{display:flex;align-items:center;gap:12px;padding:10px 15px;border-radius:14px;background:rgba(81,104,255,.08);color:var(--text-soft,#63708a)}.crossword-personal-best span{font-size:12px}.crossword-personal-best strong{font-size:24px;color:#5168ff}.crossword-level-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.crossword-level-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:15px;border:1px solid var(--line,#e4e9f2);border-radius:18px;background:var(--surface,#fff);color:var(--text,#121d34);text-align:left;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.crossword-level-card:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(81,104,255,.45);box-shadow:0 12px 26px rgba(28,42,91,.1)}.crossword-level-card:disabled{cursor:not-allowed;opacity:.55}.crossword-level-card.is-current{border-color:#596cff;box-shadow:0 0 0 3px rgba(89,108,255,.1)}.crossword-level-card.is-completed{background:linear-gradient(145deg,rgba(235,252,243,.96),rgba(255,255,255,.98));border-color:rgba(43,170,104,.28)}.crossword-level-card__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--surface-soft,#f2f5fb);font-size:23px}.crossword-level-card__copy{min-width:0}.crossword-level-card__copy small,.crossword-level-card__copy strong,.crossword-level-card__copy em{display:block}.crossword-level-card__copy small{font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#6676ff}.crossword-level-card__copy strong{margin:2px 0;font-size:15px}.crossword-level-card__copy em{overflow:hidden;color:var(--text-soft,#708098);font-size:11px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}.crossword-level-card__status{font-size:11px;font-weight:900;color:#6d7890}.crossword-level-card.is-completed .crossword-level-card__status{color:#20965b}.crossword-source-note{margin:0;text-align:center;color:var(--text-soft,#718098);font-size:12px}.crossword-loading{display:grid;place-items:center;gap:9px;min-height:430px;text-align:center}.crossword-loading .loading-spinner{width:42px;height:42px}.crossword-loading strong{font-size:20px}.crossword-loading p{margin:0;color:var(--text-soft,#718098)}

.crossword-game{position:relative;display:grid;gap:14px}.crossword-game__topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px;border-radius:22px;background:linear-gradient(135deg,#1e2c6d,#596cff 65%,#7b58da);color:#fff}.crossword-game__topbar h2{margin:8px 0 5px;color:#fff}.crossword-game__topbar p{margin:0;color:rgba(255,255,255,.76);font-size:12px}.crossword-level-pill{display:inline-flex;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.14);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.crossword-game__topbar .button{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff}.crossword-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.crossword-stat{padding:12px 14px;border:1px solid var(--line,#e4e9f2);border-radius:15px;background:var(--surface,#fff)}.crossword-stat span,.crossword-stat strong{display:block}.crossword-stat span{margin-bottom:4px;color:var(--text-soft,#718098);font-size:11px}.crossword-stat strong{font-size:16px}.crossword-stat.is-danger{border-color:rgba(225,70,75,.35);background:rgba(225,70,75,.07)}.crossword-stat.is-danger strong{color:#d83749}.crossword-progress{height:7px;overflow:hidden;border-radius:999px;background:var(--surface-muted,#e9edf5)}.crossword-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4f6bff,#8b58e8,#e46cba);transition:width .25s ease}.crossword-help-panel{display:none;align-items:flex-start;gap:10px;padding:12px 15px;border:1px solid rgba(81,104,255,.2);border-radius:14px;background:rgba(81,104,255,.06);font-size:12px;color:var(--text-soft,#66738a)}.crossword-help-panel.is-open{display:flex}.crossword-help-panel b{color:#4257d6;white-space:nowrap}.crossword-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(310px,.82fr);gap:14px;align-items:start}.crossword-board-card,.crossword-clues-card{border:1px solid var(--line,#e4e9f2);border-radius:22px;background:var(--surface,#fff);box-shadow:0 14px 32px rgba(25,39,79,.06)}.crossword-board-card{padding:18px;min-width:0}.crossword-active-clue{display:flex;align-items:center;gap:12px;min-height:58px;margin-bottom:12px;padding:11px 14px;border-radius:15px;background:linear-gradient(135deg,rgba(81,104,255,.09),rgba(126,86,221,.07))}.crossword-active-clue>span{flex:0 0 auto;padding:6px 9px;border-radius:9px;background:#5268ff;color:#fff;font-size:10px;font-weight:900;text-transform:uppercase}.crossword-active-clue p{margin:0;font-size:13px;line-height:1.45}.crossword-active-clue p span{margin-left:5px;color:var(--text-soft,#718098);font-size:10px;white-space:nowrap}.crossword-grid-scroll{overflow:auto;padding:8px;border-radius:18px;background:linear-gradient(145deg,#1b2540,#11182d);scrollbar-width:thin}.crossword-grid{display:grid;grid-template-columns:repeat(var(--crossword-cols),42px);grid-template-rows:repeat(var(--crossword-rows),42px);gap:3px;width:max-content;min-width:100%;justify-content:center;align-content:center;padding:8px;min-height:310px}.crossword-cell{position:relative;display:grid;place-items:center;width:42px;height:42px;border:2px solid transparent;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px rgba(13,25,51,.12);transition:background .15s ease,border-color .15s ease,transform .15s ease}.crossword-cell--block{visibility:hidden;box-shadow:none}.crossword-cell input{width:100%;height:100%;padding:6px 2px;border:0!important;outline:0!important;background:transparent!important;color:#15213a!important;text-align:center;font-size:21px;font-weight:900;text-transform:uppercase;box-shadow:none!important}.crossword-cell__number{position:absolute;z-index:2;top:2px;left:3px;color:#59647b;font-size:8px;font-weight:900;line-height:1}.crossword-cell.is-word-active{background:#e9edff;border-color:rgba(82,104,255,.3)}.crossword-cell.is-cell-active{z-index:3;background:#fff4c8;border-color:#f0ab28;transform:scale(1.05);box-shadow:0 0 0 3px rgba(240,171,40,.22)}.crossword-cell.is-correct{background:#dcf8e8;border-color:#36b873}.crossword-cell.is-wrong{background:#ffe1e4;border-color:#e44e5b;animation:crossword-shake .22s ease}.crossword-cell.is-hint{background:#fff0c7;border-color:#e5a42c}.crossword-cell.is-hint:after{content:"💡";position:absolute;right:-4px;bottom:-5px;font-size:10px}.crossword-board-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.crossword-board-actions .button--ghost{background:transparent}.crossword-clues-card{overflow:hidden;max-height:690px;overflow-y:auto}.crossword-clue-section{padding:16px}.crossword-clue-section+.crossword-clue-section{border-top:1px solid var(--line,#e4e9f2)}.crossword-clue-section h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px}.crossword-clue-section h3>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#5268ff;color:#fff}.crossword-clue-section h3>b{margin-left:auto;padding:4px 8px;border-radius:999px;background:var(--surface-soft,#f1f4fa);color:var(--text-soft,#6f7d94);font-size:10px}.crossword-clue-section>div{display:grid;gap:7px}.crossword-clue{display:grid;grid-template-columns:28px minmax(0,1fr) 18px;align-items:start;gap:8px;width:100%;padding:10px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--text,#172038);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease}.crossword-clue:hover{background:var(--surface-soft,#f4f6fb)}.crossword-clue.is-active{border-color:rgba(82,104,255,.28);background:rgba(82,104,255,.08)}.crossword-clue>span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-soft,#eef2f8);color:#5364dc;font-size:11px;font-weight:900}.crossword-clue p{margin:0;font-size:12px;line-height:1.45}.crossword-clue small{display:block;margin-top:3px;color:var(--text-soft,#77849b);font-size:9px}.crossword-clue i{visibility:hidden;color:#22a463;font-style:normal;font-weight:900}.crossword-clue.is-complete i{visibility:visible}.crossword-toast{position:fixed;z-index:80;left:50%;bottom:28px;transform:translateX(-50%);min-width:min(420px,calc(100vw - 30px));padding:12px 16px;border-radius:13px;background:#18233d;color:#fff;text-align:center;font-size:13px;font-weight:800;box-shadow:0 16px 34px rgba(10,17,35,.28);animation:crossword-toast-in .2s ease}.crossword-toast.is-success{background:#168456}.crossword-toast.is-error{background:#c83b4b}.crossword-complete{position:absolute;z-index:60;inset:0;display:grid;place-items:center;padding:20px;border-radius:22px;background:rgba(13,20,40,.68);backdrop-filter:blur(8px)}.crossword-complete__card{position:relative;z-index:2;width:min(500px,100%);padding:30px;border-radius:25px;background:#fff;color:#172038;text-align:center;box-shadow:0 24px 70px rgba(7,13,28,.35)}.crossword-complete__icon{display:block;font-size:52px}.crossword-complete__card h3{margin:8px 0}.crossword-complete__card p{color:#64728b}.crossword-complete__score{display:grid;gap:4px;margin:18px auto;padding:15px;border-radius:16px;background:linear-gradient(135deg,#eef1ff,#f8edff)}.crossword-complete__score span{font-size:11px;color:#6c7891}.crossword-complete__score strong{font-size:32px;color:#5366f5}.crossword-complete__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.crossword-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}.crossword-confetti i{position:absolute;left:calc((var(--i) * 5.4%) + 2%);top:-20px;width:9px;height:17px;border-radius:3px;background:hsl(calc(var(--i) * 31deg),80%,60%);animation:crossword-confetti-fall 2.2s calc(var(--i) * .05s) ease-in infinite}.crossword-error{min-height:380px}.crossword-error .button{margin-top:8px}

@keyframes crossword-shake{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(3px)}}@keyframes crossword-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}@keyframes crossword-confetti-fall{to{transform:translateY(620px) rotate(540deg);opacity:.2}}

[data-theme="dark"] .arcade-card--featured{background:linear-gradient(145deg,rgba(28,40,78,.98),rgba(29,35,64,.98))}[data-theme="dark"] .crossword-level-card,[data-theme="dark"] .crossword-howto>div,[data-theme="dark"] .crossword-stat,[data-theme="dark"] .crossword-board-card,[data-theme="dark"] .crossword-clues-card{background:var(--surface);border-color:var(--line)}[data-theme="dark"] .crossword-level-card.is-completed{background:rgba(29,89,58,.25)}[data-theme="dark"] .crossword-cell{background:#f8f9ff}[data-theme="dark"] .crossword-complete__card{background:#151e32;color:#eef2ff}

@media(max-width:1180px){.crossword-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crossword-layout{grid-template-columns:1fr}.crossword-clues-card{display:grid;grid-template-columns:1fr 1fr;max-height:none}.crossword-clue-section+.crossword-clue-section{border-top:0;border-left:1px solid var(--line,#e4e9f2)}}
@media(max-width:760px){.arcade-stage{padding:12px}.leaderboard-row{grid-template-columns:34px minmax(0,1fr) auto}.leaderboard-row small{display:none}.crossword-landing__hero{padding:24px 20px}.crossword-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crossword-howto{grid-template-columns:1fr}.crossword-level-heading{align-items:center}.crossword-level-grid{grid-template-columns:1fr}.crossword-level-card{grid-template-columns:44px minmax(0,1fr)}.crossword-level-card__status{grid-column:2}.crossword-game__topbar{padding:18px;flex-direction:column}.crossword-game__topbar .button{width:100%}.crossword-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.crossword-board-card{padding:10px}.crossword-grid{grid-template-columns:repeat(var(--crossword-cols),34px);grid-template-rows:repeat(var(--crossword-rows),34px);gap:2px;justify-content:start;min-height:250px}.crossword-cell{width:34px;height:34px;border-radius:6px}.crossword-cell input{font-size:17px}.crossword-cell__number{font-size:7px}.crossword-board-actions{display:grid;grid-template-columns:1fr 1fr}.crossword-board-actions .button{width:100%;padding-left:8px;padding-right:8px;font-size:11px}.crossword-clues-card{grid-template-columns:1fr}.crossword-clue-section+.crossword-clue-section{border-left:0;border-top:1px solid var(--line,#e4e9f2)}.crossword-complete{position:fixed;border-radius:0}.crossword-complete__card{padding:24px 18px}.crossword-help-panel{flex-direction:column}.crossword-toast{bottom:18px}}
@media(max-width:430px){.crossword-feature-grid{grid-template-columns:1fr}.crossword-stats{grid-template-columns:1fr 1fr}.crossword-board-actions{grid-template-columns:1fr}.crossword-grid{grid-template-columns:repeat(var(--crossword-cols),31px);grid-template-rows:repeat(var(--crossword-rows),31px)}.crossword-cell{width:31px;height:31px}.crossword-cell input{font-size:15px}.crossword-active-clue{align-items:flex-start;flex-direction:column}.crossword-level-heading{align-items:flex-start;flex-direction:column}.crossword-personal-best{width:100%;justify-content:space-between}}

/* Quality & performance refinement 1.25.1
   Scroll containers stay inside their cards, dropdown chevrons rotate in-place,
   and automatic prayer settings remain compact on all breakpoints. */
:root {
    --app-scroll-thumb: color-mix(in srgb, var(--text-faint) 55%, transparent);
    --app-scroll-thumb-hover: color-mix(in srgb, var(--primary) 62%, var(--text-faint));
}

html {
    max-width: 100%;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    scrollbar-color: var(--app-scroll-thumb) transparent;
    scrollbar-width: thin;
}

body {
    max-width: 100%;
    overflow-x: clip;
}

:where(body *) {
    scrollbar-color: var(--app-scroll-thumb) transparent;
    scrollbar-width: thin;
}

:where(body *)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:where(body *)::-webkit-scrollbar-track {
    background: transparent;
}

:where(body *)::-webkit-scrollbar-thumb {
    min-height: 34px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--app-scroll-thumb);
    background-clip: padding-box;
}

:where(body *)::-webkit-scrollbar-thumb:hover {
    background: var(--app-scroll-thumb-hover);
    background-clip: padding-box;
}

:where(
    .table-scroll,
    .data-table-wrap,
    .workspace-form-panel,
    .management-form-panel,
    .management-modal__dialog,
    .user-permission-list,
    .chat-messages,
    .chat-sidebar,
    .crossword-grid-scroll,
    .crossword-clues-card,
    .report-worklog-table-wrap,
    .role-comparison-chart,
    .individual-performance-list,
    .brain-history-table,
    .brain-history-table--full
) {
    max-width: 100%;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

:where(.table-scroll, .data-table-wrap, .crossword-grid-scroll) {
    padding-bottom: 3px;
}

.management-modal__dialog {
    box-sizing: border-box;
    overflow-x: hidden;
}

.system-setting-auto-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 14px 0 2px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface));
}

.system-setting-auto-card__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    border-radius: 11px;
    color: var(--primary);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.system-setting-auto-card__icon .icon { width: 18px; height: 18px; }
.system-setting-auto-card > div { min-width: 0; }
.system-setting-auto-card strong { display: block; font-size: 11px; }
.system-setting-auto-card p { margin: 4px 0 3px; color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.system-setting-auto-card small { color: var(--text-faint); font-size: 8px; line-height: 1.5; }

/* Jangan memutar wrapper dropdown. Wrapper selalu memakai ruang tetap; hanya
   glyph chevron yang berputar pada titik pusatnya. */
.nav-drawer__chevron,
.member-expand-icon,
.role-work-card__chevron {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    transform: none !important;
    transform-origin: 50% 50%;
}

.nav-drawer__chevron .icon,
.member-expand-icon .icon,
.role-work-card__chevron .icon {
    width: 14px;
    height: 14px;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 180ms ease;
}

.nav-drawer.is-open .nav-drawer__chevron .icon,
.manager-member-card[open] .member-expand-icon .icon,
.performance-member-card[open] .member-expand-icon .icon,
.role-work-card[open] .role-work-card__chevron .icon {
    transform: rotate(180deg);
}

@media (max-width: 720px) {
    html { scrollbar-gutter: auto; }
    .system-setting-auto-card { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-drawer__chevron .icon,
    .member-expand-icon .icon,
    .role-work-card__chevron .icon {
        transition: none;
    }
}


/* v1.25.2 - Daily Check checklist */
.daily-checklist-input { min-width: min(100%, 320px); display: grid; gap: 9px; }
.daily-checklist-input__progress { display: flex; align-items: baseline; gap: 5px; font-size: 12px; color: var(--text-muted, #677289); }
.daily-checklist-input__progress strong { font-size: 15px; color: var(--text-color, #182033); }
.daily-checklist-input__items { display: grid; gap: 7px; max-height: 260px; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.daily-checklist-input__items label { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 8px; line-height: 1.35; cursor: pointer; }
.daily-checklist-input__items input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; }
.daily-checklist-input__items input:disabled + span { opacity: .68; }


/* v1.25.3 - Compact icon actions and global hover tooltips */
.button--icon-only {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    gap: 0;
    flex: 0 0 36px;
    overflow: hidden;
    font-size: 0;
}
.button--icon-only .icon { width: 15px; height: 15px; margin: 0; }
.button--icon-only:hover .icon,
.button--icon-only:focus-visible .icon { transform: scale(1.08); }

/* table-action secara desain adalah kontrol ringkas. Jika markup lama masih
   memiliki label teks, label tidak lagi mendorong layout namun tetap dapat
   dibaca screen reader dan tooltip global. */
.table-action {
    min-width: 34px;
    max-width: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    padding: 0;
    gap: 0;
    font-size: 0 !important;
    white-space: nowrap;
}
.table-action:hover .icon,
.table-action:focus-visible .icon { transform: scale(1.08); }

/* Aksi sekunder berulang di card management tidak memerlukan label permanen. */
:where(.brand-card__actions, .management-team-card__actions) {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}
:where(.brand-card__actions, .management-team-card__actions) form {
    width: auto;
    margin: 0;
    flex: 0 0 auto;
}
:where(.brand-card__actions, .management-team-card__actions) .button {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
    gap: 0;
    flex: 0 0 34px;
    overflow: hidden;
    font-size: 0 !important;
    border: 1px solid var(--line);
}
:where(.brand-card__actions, .management-team-card__actions) .button .icon {
    width: 14px;
    height: 14px;
}
:where(.brand-card__actions, .management-team-card__actions) .button:hover .icon,
:where(.brand-card__actions, .management-team-card__actions) .button:focus-visible .icon {
    transform: scale(1.08);
}

/* Satu portal tooltip untuk semua halaman; position:fixed mencegah tooltip
   mengubah ukuran card, tabel, modal, atau membuat horizontal scroll. */
.ui-action-tooltip {
    position: fixed;
    z-index: 1000000;
    left: 0;
    top: 0;
    max-width: min(280px, calc(100vw - 16px));
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    color: #fff;
    background: rgba(17, 24, 39, .96);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .24);
    font-size: 10px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: .01em;
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-2px) scale(.98);
    transform-origin: center;
    transition: opacity 120ms ease, transform 120ms ease;
}
.ui-action-tooltip[hidden] { display: none !important; }
.ui-action-tooltip.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ui-action-tooltip[data-placement="top"] { transform-origin: center bottom; }
.ui-action-tooltip[data-placement="bottom"] { transform-origin: center top; }

/* Fokus keyboard dibuat konsisten karena beberapa aksi sekarang icon-only. */
:where(button, .button, .table-action, .icon-button, .form-close, [role="button"]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 72%, #fff);
    outline-offset: 2px;
}

@media (hover: none), (pointer: coarse) {
    .ui-action-tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-action-tooltip { transition: none; }
}

/* v1.25.4 - staff memilih satu brand pekerjaan per hari */
.daily-brand-work-picker{margin:0 0 12px;padding:12px 14px;border:1px solid #dce5f2;border-radius:14px;background:#f8faff;min-width:0}
.daily-brand-work-picker .form-field{margin:0;min-width:0}
.daily-brand-work-picker select{width:100%;max-width:520px}
.daily-brand-entry-table tr[hidden]{display:none!important}
@media (max-width:720px){.daily-brand-work-picker{padding:10px}.daily-brand-work-picker select{max-width:none}}

/* v1.25.5 - Popup konfirmasi global, dropdown konsisten, dan tooltip hanya ikon. */
.app-confirm-open { overflow: hidden; }
.app-confirm-popup {
    position: fixed;
    inset: 0;
    z-index: 1000100;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 170ms ease, visibility 170ms ease;
}
.app-confirm-popup[hidden] { display: none !important; }
.app-confirm-popup.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.app-confirm-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 14, 31, .70);
    backdrop-filter: blur(6px);
}
.app-confirm-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px 16px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 30px 90px rgba(5, 12, 28, .38);
    opacity: 0;
    transform: translateY(12px) scale(.985);
    transition: opacity 170ms ease, transform 190ms cubic-bezier(.22,.72,.2,1);
}
.app-confirm-popup.is-open .app-confirm-popup__dialog { opacity: 1; transform: translateY(0) scale(1); }
.app-confirm-popup__icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #9a6b00;
    background: #fff4cf;
}
.app-confirm-popup__icon svg { width: 23px; height: 23px; fill: currentColor; }
.app-confirm-popup.is-danger .app-confirm-popup__icon { color: #c63745; background: #fff0f2; }
.app-confirm-popup__copy { min-width: 0; }
.app-confirm-popup__copy .section-kicker { color: #9a6b00; }
.app-confirm-popup.is-danger .app-confirm-popup__copy .section-kicker { color: #c63745; }
.app-confirm-popup__copy h2 { margin: 5px 0 7px; font-size: 19px; letter-spacing: -.025em; }
.app-confirm-popup__copy p { margin: 0; color: var(--text-soft); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.app-confirm-popup__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}
[data-theme="dark"] .app-confirm-popup__dialog { border-color: var(--line); background: var(--surface); }
[data-theme="dark"] .app-confirm-popup__icon { color: #f3c65a; background: rgba(217, 164, 35, .14); }
[data-theme="dark"] .app-confirm-popup.is-danger .app-confirm-popup__icon { color: #ff8d98; background: rgba(231, 80, 90, .14); }

/* Select native tetap dipakai untuk kompatibilitas, namun padding, radius dan
   posisi chevron distandarkan agar tidak menempel ke sisi kanan field. */
body select:not([multiple]):not([size]) {
    min-width: 0;
    max-width: 100%;
    padding-left: 14px !important;
    padding-right: 42px !important;
    border-radius: 13px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364758b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 15px 15px !important;
    appearance: none;
    -webkit-appearance: none;
}
[data-theme="dark"] body select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
body select:not([multiple]):not([size]):focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
}
body select option { padding: 9px 12px; }

/* Chrome modern mendukung picker select yang dapat dibentuk. Browser lain
   tetap memakai fallback native di atas tanpa kehilangan fungsi. */
@supports (appearance: base-select) {
    body select:not([multiple]):not([size]) {
        appearance: base-select;
        -webkit-appearance: base-select;
        padding-right: 14px !important;
        background-image: none !important;
    }
    body select:not([multiple]):not([size])::picker-icon {
        margin-inline-start: auto;
        color: var(--text-faint);
        transition: rotate 160ms ease;
    }
    body select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
    body select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
        margin-top: 6px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: var(--surface);
        box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
    }
    body select:not([multiple]):not([size]) option {
        min-height: 38px;
        padding: 9px 11px;
        border-radius: 9px;
        color: var(--text);
        background: var(--surface);
    }
    body select:not([multiple]):not([size]) option:hover,
    body select:not([multiple]):not([size]) option:focus-visible {
        background: var(--surface-soft);
    }
    body select:not([multiple]):not([size]) option:checked {
        color: #fff;
        background: var(--primary);
    }
}

/* Sidebar sudah memiliki label permanen; bantuan tooltip hanya digunakan pada
   kontrol icon-only di area konten. Hover visual navigasi tetap dipertahankan. */
.sidebar .ui-action-tooltip,
.sidebar .nav-item[data-tooltip]::after { display: none !important; }

@media (max-width: 560px) {
    .app-confirm-popup { padding: 10px; }
    .app-confirm-popup__dialog { grid-template-columns: 40px minmax(0, 1fr); padding: 18px; border-radius: 18px; }
    .app-confirm-popup__icon { width: 40px; height: 40px; border-radius: 12px; }
    .app-confirm-popup__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .app-confirm-popup__actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .app-confirm-popup,
    .app-confirm-popup__dialog,
    body select:not([multiple]):not([size])::picker-icon { transition: none !important; }
}

/* =========================================================
   v1.25.6 - GLOBAL SELECT ALIGNMENT & UI RHYTHM HARDENING
   Fokus: chevron select berputar di pusatnya, teks field tidak naik/terpotong,
   serta jarak form/label/helper lebih konsisten tanpa mengubah alur fitur.
   ========================================================= */

:root {
    --ui-control-radius: 13px;
    --ui-control-line-height: 1.35;
    --ui-form-label-size: 11px;
    --ui-form-helper-size: 9px;
}

/* Semua control form memakai box model dan tipografi yang stabil. Ini mencegah
   tinggi isi berbeda antar halaman/browser yang sebelumnya dapat membuat teks
   select terlihat terlalu ke atas atau terpotong di bagian bawah. */
.page-content :where(input, select, textarea, button) {
    box-sizing: border-box;
    font-family: inherit;
}

.page-content :where(
    .form-field,
    .workspace-filter label,
    .performance-filter label,
    .report-filter label,
    .management-filter label,
    .daily-manager-filter label,
    .unlock-filter-toolbar label,
    .my-kpi-filter label,
    .audit-filter label,
    .notification-filter-form label
) {
    min-width: 0;
}

.page-content :where(.form-field > span, .form-field > label) {
    display: block;
    margin: 0;
    line-height: 1.4;
}

.page-content :where(.form-field small, .field-helper) {
    display: block;
    margin-top: 2px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Native fallback. Tidak memaksakan tinggi tunggal supaya filter compact yang
   memang lebih pendek tetap dipertahankan, tetapi line box selalu terpusat. */
body select:not([multiple]):not([size]) {
    position: relative;
    max-width: 100%;
    line-height: var(--ui-control-line-height) !important;
    vertical-align: middle;
    text-align: start;
    text-overflow: ellipsis;
    border-radius: var(--ui-control-radius) !important;
    background-position: right 14px center !important;
    background-size: 15px 15px !important;
}

/* Customizable select di Chromium modern. Pseudo picker-icon diberi kotak tetap
   16x16 dan properti rotate individual dinetralkan. Dengan begitu yang bergerak
   hanya glyph di pusatnya, bukan area flex/picker yang lebih lebar. */
@supports (appearance: base-select) {
    body select:not([multiple]):not([size]) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0;
        padding-block: 8px !important;
        line-height: var(--ui-control-line-height) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body select:not([multiple]):not([size])::picker-icon {
        display: inline-grid;
        place-items: center;
        inline-size: 16px;
        block-size: 16px;
        min-inline-size: 16px;
        flex: 0 0 16px;
        margin-inline-start: auto;
        overflow: visible;
        rotate: 0deg !important;
        translate: none !important;
        scale: 1 !important;
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        transition: transform 150ms ease !important;
    }

    body select:not([multiple]):not([size]):open::picker-icon {
        rotate: 0deg !important;
        transform: rotate(180deg);
    }

    body select:not([multiple]):not([size])::picker(select) {
        max-height: min(360px, 52dvh);
        overflow: auto;
        padding: 6px;
        border-radius: 14px;
        scrollbar-gutter: stable;
    }

    body select:not([multiple]):not([size]) option {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 9px 11px;
        border-radius: 9px;
        line-height: 1.4;
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }
}

/* Chevron custom/non-native lain juga memakai wrapper berukuran tetap. */
.topbar-user__chevron {
    inline-size: 18px;
    block-size: 18px;
    min-inline-size: 18px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 18px;
    transform: none !important;
}
.topbar-user__chevron .icon {
    inline-size: 14px;
    block-size: 14px;
    transform: rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 160ms ease;
}
.header-dropdown.is-open .topbar-user__chevron .icon {
    transform: rotate(180deg);
}

/* Audit ritme form: label, control, helper, notice, dan section dipisahkan agar
   tidak terlihat menyatu/terlalu rapat. Scope hanya container form standar. */
.page-content :where(
    .workspace-form-panel,
    .management-form-panel,
    .management-modal__dialog,
    .settings-card,
    .unlock-form-panel,
    .ai-control-panel,
    .staff-obstacle-form-panel
) :where(.form-field) {
    row-gap: 6px;
}

.page-content :where(
    .workspace-form-panel,
    .management-form-panel,
    .management-modal__dialog,
    .settings-card,
    .unlock-form-panel,
    .ai-control-panel,
    .staff-obstacle-form-panel
) :where(.form-field > span, .form-field > label) {
    font-size: var(--ui-form-label-size) !important;
}

.page-content :where(
    .workspace-form-panel,
    .management-form-panel,
    .management-modal__dialog,
    .settings-card,
    .unlock-form-panel,
    .ai-control-panel,
    .staff-obstacle-form-panel
) :where(.form-field small, .field-helper) {
    font-size: var(--ui-form-helper-size) !important;
}

.page-content :where(
    .workspace-form-section,
    .target-form-section,
    .kpi-link-form__block,
    .duplicate-destination-box,
    .form-notice
) {
    min-width: 0;
}

.page-content :where(.form-notice) {
    margin-top: 8px;
}

/* Teks panjang tidak boleh keluar dari card/form dan tombol tidak boleh berubah
   tinggi karena line-height browser yang berbeda. */
.page-content :where(
    .workspace-form-panel,
    .management-form-panel,
    .management-modal__dialog,
    .settings-card,
    .form-notice,
    .duplicate-destination-box
) :where(p, small, strong, span, label) {
    overflow-wrap: anywhere;
}

.page-content :where(.button, button) {
    line-height: 1.2;
}

/* Pengurangan motion tetap menghormati preferensi OS. */
@media (prefers-reduced-motion: reduce) {
    body select:not([multiple]):not([size])::picker-icon,
    .topbar-user__chevron .icon {
        transition: none !important;
    }
}

/* v1.25.6 - residual overlap audit: hilangkan negative offset pada form yang
   berpotensi membuat tombol/helper menimpa field lain pada skala font berbeda. */
.management-form .form-field small,
.auth-card .field-helper {
    margin-top: 2px;
}
.status-clear-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}


/* v1.25.8 - Prior-day progressive checklist items are immutable. */
.daily-checklist-input__items label.is-checklist-locked {
    cursor: default;
    padding: 7px 8px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface-soft, #f3f6ff) 84%, transparent);
}
.daily-checklist-input__items label.is-checklist-locked input[type="checkbox"] {
    cursor: not-allowed;
}
.daily-checklist-input__items label.is-checklist-locked > span {
    min-width: 0;
}
.daily-checklist-input__items label.is-checklist-locked > span > small {
    display: block;
    margin-top: 2px;
    color: var(--text-muted, #69758d);
    font-size: 10px;
    line-height: 1.35;
}

/* =========================================================
   v1.25.10 - DAILY CHECK CROSS-BROWSER FORM HARDENING
   Bind native control color-scheme to the dashboard theme and explicitly
   define Daily Check form surfaces so OS/browser dark heuristics cannot turn
   light-theme fields black. Dark mode keeps the existing dashboard variables.
   ========================================================= */
html[data-theme="light"] {
    color-scheme: light;
}
html[data-theme="dark"] {
    color-scheme: dark;
}

:is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    background-color: var(--surface);
    border-color: var(--line);
    color-scheme: light;
}

:is([data-daily-check-form], [data-worklog-form])
:is(input[type="text"], input[type="number"], textarea) {
    -webkit-appearance: none;
    appearance: none;
}

:is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    background-color: var(--surface);
    border-color: var(--primary);
    outline: none;
}

:is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):disabled,
:is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea):read-only {
    color: var(--text-soft);
    -webkit-text-fill-color: var(--text-soft);
    background-color: var(--surface-muted);
    opacity: 1;
}

:is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill,
:is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill:hover,
:is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
    caret-color: var(--text);
}

[data-theme="dark"] :is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    caret-color: var(--text);
    background-color: var(--surface-soft);
    border-color: var(--line);
    color-scheme: dark;
}

[data-theme="dark"] :is([data-daily-check-form], [data-worklog-form], .date-filter-form)
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    background-color: var(--surface-soft);
    border-color: var(--primary);
}

[data-theme="dark"] :is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill,
[data-theme="dark"] :is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill:hover,
[data-theme="dark"] :is([data-daily-check-form], [data-worklog-form], .date-filter-form) input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-soft) inset;
    caret-color: var(--text);
}


/* Browser Push controls 1.25.12 */
.notification-browser-push { display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line); background:var(--surface-soft); }
.notification-browser-push[hidden] { display:none !important; }
.notification-browser-push > div { min-width:0; flex:1; }
.notification-browser-push strong { display:block; font-size:10px; }
.notification-browser-push small { display:block; margin-top:2px; color:var(--text-soft); font-size:8px; line-height:1.4; }
.notification-browser-push .button { min-height:30px; padding:0 9px; font-size:8px; white-space:nowrap; }
@media (max-width:560px) { .notification-browser-push { align-items:stretch; flex-direction:column; } .notification-browser-push .button { width:100%; } }