.g4-labels { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:8px 0; }
.g4-label { display:inline-flex; gap:6px; align-items:center; border:1px solid #e2e7ef; border-radius:6px; padding:4px 8px; font-size:11px; color:#334158; background:white; }
.g4-label i { width:7px; height:7px; border-radius:50%; background:var(--label-color); flex:none; }
.g4-label-option { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:13px; }
.g4-label-option input { width:16px; height:16px; accent-color:#24344f; }
.settings-surface[data-settings-view="labels"] .settings-detail-head { background:transparent; border:0; box-shadow:none; padding:20px 0; margin-bottom:0; }
.settings-surface[data-settings-view="labels"] .settings-detail-body { background:transparent; border:0; box-shadow:none; padding:0; }
.settings-surface[data-settings-view="labels"] .settings-detail-actions { margin-left:auto; }
.g4-label-manager { margin:0; }
.g4-label-settings { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }
.g4-label-settings-row { display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:20px; align-items:center; min-height:64px; padding:10px 24px; }
.g4-label-settings-row + .g4-label-settings-row { border-top:1px solid var(--line); }
.g4-label-settings-dot,.g4-label-chip i { width:9px; height:9px; border-radius:50%; background:var(--label-color); flex:none; }
.g4-label-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 11px; border-radius:6px; color:color-mix(in srgb,var(--label-color) 75%,#14243b); background:color-mix(in srgb,var(--label-color) 11%,white); font-size:13px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.g4-label-settings-name { min-width:0; }
.g4-label-settings-actions { display:flex; align-items:center; gap:16px; }
.g4-label-settings-actions .quiet-button { min-height:40px; color:var(--muted); font-weight:500; }
.g4-label-trash { color:var(--muted); width:40px; height:40px; }
.g4-label-trash:hover { color:#bc353b; background:#fff2f2; }
.g4-label-settings > .empty-inline { padding:32px 24px; margin:0; }
#overlay-g4-label-edit { width:min(440px,calc(100vw - 32px)); }
#overlay-g4-label-edit .modal-head { padding:22px 24px 12px; border:0; }
#overlay-g4-label-edit .modal-head .eyebrow { display:none; }
#overlay-g4-label-edit .modal-head h2 { font-size:18px; }
#overlay-g4-label-edit .modal-body { padding:12px 24px 24px; }
#overlay-g4-label-edit .modal-footer { display:flex; justify-content:space-between; padding:0 24px 24px; background:white; border:0; }
#overlay-g4-label-edit .modal-footer .danger-button { background:#c9363e; border-color:#c9363e; color:white; }
#overlay-g4-label-edit .modal-footer .danger-button:hover { background:#ae2931; border-color:#ae2931; }
.g4-label-editor { gap:22px; }
.g4-label-palette { border:0; padding:0; margin:0; min-width:0; }
.g4-label-palette legend,.g4-label-preview > span { font-size:12px; font-weight:650; margin-bottom:12px; display:block; }
.g4-label-palette > div { display:flex; flex-wrap:wrap; gap:12px; }
.g4-label-swatch,.g4-label-custom { position:relative; display:grid; place-items:center; width:32px; height:32px; flex:none; cursor:pointer; }
.g4-label-swatch input { position:absolute; inset:0; width:32px; height:32px; margin:0; opacity:0; cursor:pointer; }
.g4-label-swatch > span { width:28px; height:28px; border-radius:50%; background:var(--swatch-color); display:grid; place-items:center; pointer-events:none; }
.g4-label-swatch .icon { width:16px; height:16px; color:white; opacity:0; }
.g4-label-swatch input:checked + span { outline:2px solid var(--swatch-color); outline-offset:2px; }
.g4-label-swatch input:checked + span .icon { opacity:1; }
.g4-label-swatch input:focus-visible + span,.g4-label-custom:focus-within { outline:2px solid #14243b; outline-offset:3px; }
.g4-label-custom { border:1px solid var(--line); border-radius:50%; }
.g4-label-custom input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.g4-label-delete-form { padding:20px 0 12px; text-align:center; }
.g4-label-delete-form p { margin:22px 0 8px; color:var(--muted); font-size:13px; line-height:1.6; }
@media(max-width:600px) {
  .settings-surface[data-settings-view="labels"] { padding-inline:16px; }
  .settings-surface[data-settings-view="labels"] .settings-detail-actions .primary-button { flex:0 0 auto; width:auto; }
}
.g4-merge-field { border:0; padding:0; margin:0; }
.g4-merge-field legend { font-size:12px; font-weight:700; margin-bottom:8px; }
.g4-merge-field > div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.g4-merge-field label { display:flex; align-items:flex-start; gap:9px; padding:12px; border:1px solid #e2e7ef; border-radius:8px; overflow-wrap:anywhere; }
.g4-merge-field label:has(input:checked) { border-color:#3974c6; background:#f1f6fd; }
.g4-merge-field input { margin-top:3px; }
.g4-merge-field strong,.g4-merge-field small { display:block; font-size:12px; }
.g4-merge-field small { font-size:10px; color:#7b8799; margin-top:4px; }
.g4-merge-warning { font-size:12px; line-height:1.5; color:#8e473f; }
.g4-roster-list { display:grid; gap:8px; }
.g4-roster-row { display:grid; align-items:center; grid-template-columns:22px minmax(0,1fr) 34px 34px 34px; gap:6px; }
.g4-roster-row select { min-width:0; width:100%; border:1px solid #dce2eb; padding:10px; border-radius:8px; background:white; }
.g4-workdays { border:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.g4-workdays legend { margin-bottom:8px; font-size:12px; font-weight:700; }
.g4-workdays label { display:flex; align-items:center; gap:4px; font-size:12px; padding:6px; }
.g4-time-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g4-chat-filter { position:absolute; z-index:80; inset:100% 10px auto; background:white; border:1px solid #e2e7ef; box-shadow:0 10px 30px #24344f20; border-radius:12px; padding:16px; display:grid; gap:8px; }
.g4-chat-filter header { display:flex; align-items:center; justify-content:space-between; }
.conversation-list-controls { position:relative; }
.g4-chat-filter select { width:100%; min-width:0; }
.g4-chat-pagination { display:flex; align-items:center; justify-content:space-between; padding:8px; border-top:1px solid #e2e7ef; font-size:11px; }
.g4-reply-state { display:flex; align-items:center; gap:7px; padding:7px 16px; font-size:11px; color:#708096; background:#fff; }
.g4-reply-state.locked { background:#fff8ec; color:#835f29; }
.g4-reply-state a { color:inherit; text-decoration:underline; }
.g4-response { display:block; font-size:10px; color:#738096; margin-top:5px; }
.g4-message-failure { color:#bb4343; font-size:11px; padding-top:6px; }
.g4-live-status { padding:8px 16px; background:#fff8ec; color:#835f29; font-size:12px; text-align:center; }
.g4-notification-filters { display:flex; gap:16px; padding:0 0 16px; }
.g4-notification-filters > * { min-width:160px; }
.g4-assignment-event { font-size:10px; }
@media(max-width:600px){.g4-merge-field > div { grid-template-columns:1fr; }.g4-notification-filters { display:grid; grid-template-columns:1fr 1fr; }.g4-notification-filters > * { min-width:0; }.g4-label-settings-row { grid-template-columns:8px minmax(0,1fr) auto; gap:10px; padding:10px 12px; }.g4-label-settings-actions { gap:0; }.g4-label-settings-actions .quiet-button { padding:8px; }.g4-label-chip { font-size:12px; padding:5px 8px; }.settings-surface[data-settings-view="labels"] .settings-detail-head { padding:16px 0; gap:10px; flex-wrap:wrap; }.settings-surface[data-settings-view="labels"] .settings-detail-title { flex:1; }.settings-surface[data-settings-view="labels"] .settings-detail-actions { width:100%; display:flex; justify-content:flex-end; }#overlay-g4-label-edit .modal-head { padding:20px 20px 12px; }#overlay-g4-label-edit .modal-body { padding:12px 20px 24px; }#overlay-g4-label-edit .modal-footer { padding:0 20px 20px; }.g4-label-palette > div { gap:7px; }}

.conversation-page .conversation-filter-popover.g4-chat-filter { position:fixed; inset:auto; max-height:calc(100vh - 24px); overflow:auto; }
.g4-merge-form .merge-sides { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.g4-merge-form .merge-side { min-width:0; }
@media(max-width:600px){.g4-merge-form .merge-sides { grid-template-columns:1fr; }}

.g4-contact-actions { margin-left:auto; flex:none; }
.g4-nav-count { margin-left:auto; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; border-radius:9px; background:#c14c52; color:white; font-size:10px; }
@media(max-width:700px){.g4-contact-actions:not(.in-overlay) { display:none; }}

.g4-team-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* Tim & penugasan — approved option A. */
.settings-surface[data-settings-view="team"] .settings-detail-body{padding:0;border:0;background:transparent;box-shadow:none}
.team-a-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:12px;align-items:stretch}
.team-a-card{min-width:0;padding:20px;background:#fff;border:1px solid var(--line,#e2e5eb);border-radius:14px;box-shadow:0 1px 2px #14243b04}
.team-a-card h2{margin:0;font-size:14px;line-height:1.5;font-weight:700;color:#172943}
.team-a-card header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.team-a-members>header{margin-bottom:18px}
.team-a-portal{display:inline-flex;align-items:center;gap:8px;padding:5px 0;background:transparent;border:0;color:#285eae;font-size:11px;font-weight:650;cursor:pointer;text-align:right}
.team-a-portal .icon{width:14px;height:14px;flex:none}
.team-a-table{width:100%;border-collapse:collapse;text-align:left;table-layout:auto}
.team-a-table th{height:30px;padding:7px 6px;background:#f7f8fa;font-size:10px;font-weight:650;color:#66748a;white-space:nowrap}
.team-a-table td{height:61px;border-bottom:1px solid #e9ebef;padding:10px 6px;font-size:11px}
.team-a-table th:first-child{width:46%}.team-a-table th:last-child,.team-a-table td:last-child{text-align:right}
.team-a-member{display:flex;gap:10px;align-items:center;min-width:0}.team-a-member .avatar{width:30px;height:30px;flex:none;font-size:10px;background:#edf0f5;color:#172943}
.team-a-member strong,.team-a-member small{display:block;line-height:1.5}.team-a-member strong{font-size:12px;font-weight:650}.team-a-member small{font-size:10px;color:#7b889d;overflow-wrap:anywhere}
.team-a-role{display:inline-block;border:1px solid #e1e4e8;border-radius:6px;padding:3px 6px;font-size:10px;line-height:1.2;color:#5c697e;white-space:nowrap}
.team-a-availability{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;white-space:nowrap}.team-a-availability i{width:6px;height:6px;flex:none;border-radius:50%;background:#9a9faa}.team-a-availability.is-available i{background:#168363}
.team-a-pause{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #e3e6eb;border-radius:7px;background:#fff;color:#465267;cursor:pointer}.team-a-pause .icon{width:16px;height:16px}.team-a-pause:hover{background:#f5f2fb;border-color:#bbabd9}
.team-a-sidebar{display:grid;gap:12px;align-content:start}.team-a-label{display:block;margin:16px 0 8px;font-size:11px;font-weight:650}
.team-a-mode{display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;background:#fff;border:1px solid #dfe3e9;border-radius:7px;cursor:pointer;text-align:left;font-size:12px;color:#172943}.team-a-mode .icon{width:16px;height:16px;flex:none}.team-a-mode>span{flex:1}
.team-a-help{font-size:10px;line-height:1.6;color:#77859b;margin:7px 0 16px}
.team-a-card .secondary-button{min-height:26px;padding:4px 15px;font-size:10px;border-radius:6px;box-shadow:none}
.team-a-roster-head h3{font-size:11px;margin:0}.team-a-roster{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:7px}.team-a-roster li{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid #e6e8ed;border-radius:9px;min-height:58px}
.team-a-slot-number{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:#f4edff;color:#7549c2;font-size:13px;font-weight:650}
.team-a-roster strong,.team-a-roster small{display:block;line-height:1.5}.team-a-roster strong{font-size:12px}.team-a-roster small{font-size:10px;color:#7b889d}
.team-a-response dl{display:grid;gap:17px;margin:18px 0 0}.team-a-response dl>div{display:flex;align-items:flex-start;gap:11px}.team-a-response dl>div>.icon{width:16px;height:16px;margin-top:2px;flex:none;color:#748198}.team-a-response dl>div>span{flex:1;min-width:0}.team-a-response dt{font-size:11px;color:#7b889d;line-height:1.5}.team-a-response dd{font-size:13px;line-height:1.5;font-weight:600;margin:3px 0 0}.team-a-hours{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
#overlay-assignment-settings,#overlay-sla-settings{width:min(620px,calc(100vw - 32px));border-radius:14px}
#overlay-sla-settings{width:min(540px,calc(100vw - 32px))}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-head{padding:20px 24px 14px;border:0}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-head .eyebrow{display:none}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-head h2{font-size:16px;font-weight:700}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-body{padding:8px 24px 20px}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-footer{padding:12px 24px 20px;border:0;background:#fff;display:flex;justify-content:flex-end;gap:10px}
:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-footer button{min-height:36px;padding:8px 20px;font-size:12px;border-radius:7px}
.team-a-roster-form,.team-a-target-form{display:grid;gap:22px}.team-a-roster-form fieldset,.team-a-days{border:0;min-width:0;padding:0;margin:0}.team-a-roster-form legend,.team-a-days legend{font-size:11px;font-weight:700;margin-bottom:10px;padding:0}
.team-a-mode-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}.team-a-mode-choice{display:flex;align-items:flex-start;gap:10px;padding:12px 10px;border:1px solid #e0e4eb;border-radius:8px;cursor:pointer}.team-a-mode-choice:has(input:checked){border-color:#b199ed;background:#fdfbff}.team-a-mode-choice input{width:13px;height:13px;min-height:0;margin:2px 0 0;accent-color:#8054ca;flex:none}.team-a-mode-choice>.icon{width:20px;height:20px;margin-top:6px;flex:none;color:#8054ca}.team-a-mode-choice strong,.team-a-mode-choice small{display:block;line-height:1.5}.team-a-mode-choice strong{font-size:11px}.team-a-mode-choice small{font-size:10px;color:#7c889c;margin-top:3px}
.team-a-edit-slots{display:grid;gap:10px}.team-a-edit-slot{display:grid;grid-template-columns:16px 28px minmax(0,1fr) 62px 32px;align-items:center;gap:9px}.team-a-drag{display:grid;place-items:center;cursor:grab;color:#758398}.team-a-drag .icon{width:15px;height:20px}.team-a-edit-slot .team-a-slot-number{width:28px;height:28px;border-radius:8px}.team-a-member-select{display:flex;align-items:center;gap:8px;padding-left:9px;border:1px solid #dfe3e9;border-radius:7px;min-width:0;height:36px}.team-a-member-select .avatar{width:24px;height:24px;font-size:9px;flex:none;background:#edf0f5}.team-a-member-select select{width:100%;min-width:0;height:34px;padding:0 6px 0 0;border:0;background:transparent;font-size:11px;color:#24344f;outline-offset:2px}
.team-a-order{display:flex;border:1px solid #e1e5eb;border-radius:7px;overflow:hidden}.team-a-order button{border:0;background:white;width:30px;height:34px;color:#7450bc;cursor:pointer}.team-a-order button+button{border-left:1px solid #e1e5eb}.team-a-remove{display:grid;place-items:center;width:32px;height:36px;padding:0;border:1px solid #e1e5eb;border-radius:7px;background:#fff;color:#c25461;cursor:pointer}.team-a-remove .icon{width:14px;height:14px}.team-a-edit-slot button:disabled,.team-a-pause:disabled{opacity:.35;cursor:default}
.team-a-add-slot{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:34px;margin-top:10px;border:1px dashed #d6dce6;border-radius:7px;background:white;color:#2d61aa;font-size:11px;font-weight:650;cursor:pointer}.team-a-add-slot .icon{width:14px;height:14px}
.team-a-target-form .form-field>span:first-child{font-size:11px;font-weight:700;margin-bottom:8px}.team-a-minute-input{display:flex;border:1px solid #dfe3e9;border-radius:7px;overflow:hidden}.team-a-minute-input input{min-width:0;width:100%;border:0;border-radius:0;height:38px;font-size:12px}.team-a-minute-input>span{display:grid;place-items:center;padding:0 14px;background:#f6f7f9;border-left:1px solid #dfe3e9;font-size:11px;color:#697386}
.team-a-days>div{display:flex;justify-content:space-between;gap:8px}.team-a-days label{position:relative;cursor:pointer}.team-a-days input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.team-a-days label>span{display:grid;place-items:center;height:30px;min-width:39px;padding:0 9px;background:#fff;border:1px solid #e1e5eb;border-radius:20px;font-size:11px;font-weight:650;pointer-events:none}.team-a-days input:checked+span{background:#f3eaff;color:#7951c8;border-color:#f3eaff}.team-a-days input:focus-visible+span{outline:2px solid #7951c8;outline-offset:2px}
.team-a-time-range{display:grid;grid-template-columns:1fr 16px 1fr;align-items:center;gap:10px}.team-a-time-range>span{text-align:center;color:#798499}.team-a-time-range input,.team-a-target-form input[readonly]{min-width:0;height:38px;border:1px solid #dfe3e9;border-radius:7px;padding:0 12px;font-size:12px}.team-a-target-form input[readonly]{background:#f5f6f8;color:#798499}
@media(max-width:1100px){.team-a-layout{grid-template-columns:minmax(0,1fr)}.team-a-sidebar{grid-template-columns:1fr 1fr}.team-a-card{padding:18px}.team-a-table th:first-child{width:46%}}
@media(max-width:600px){.team-a-sidebar{grid-template-columns:1fr}.team-a-members>header{align-items:flex-start;flex-direction:column;gap:7px}.team-a-portal{text-align:left}.team-a-table-scroll{overflow-x:auto}.team-a-table{min-width:470px}.team-a-card{padding:16px}.team-a-mode-choices{grid-template-columns:1fr}.team-a-edit-slot{grid-template-columns:24px minmax(0,1fr) 54px 28px;gap:6px}.team-a-drag{display:none}.team-a-edit-slot .team-a-slot-number{width:24px;height:26px}.team-a-order button{width:26px}.team-a-remove{width:28px}.team-a-member-select .avatar{display:none}.team-a-member-select{padding-left:6px}.team-a-member-select select{font-size:10px}.team-a-days>div{gap:4px}.team-a-days label>span{min-width:30px;padding:0 5px;font-size:10px}:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-head{padding:18px 16px 12px}:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-body{padding:8px 16px 16px}:is(#overlay-assignment-settings,#overlay-sla-settings) .modal-footer{padding:10px 16px 18px}}
.team-a-target-form .form-field>.team-a-minute-input{display:flex;align-items:stretch;gap:0;margin:0}
.team-a-target-form .team-a-minute-input>input{flex:1;min-width:0;width:0;border:0;height:38px;padding:0 12px}
.team-a-target-form .team-a-minute-input>span{display:grid;flex:none;place-items:center;border-left:1px solid #dfe3e9;padding:0 14px;font-weight:500}
@media(max-width:600px){.team-a-table{min-width:0;display:block}.team-a-table thead{display:none}.team-a-table tbody{display:block}.team-a-table tr{display:grid;grid-template-columns:minmax(0,1fr) 73px 30px;gap:0 8px;padding:12px 0;border-bottom:1px solid #e9ebef;align-items:center}.team-a-table td{height:auto;padding:0;border:0}.team-a-table td:first-child{grid-column:1;grid-row:1}.team-a-table td:nth-child(2){grid-column:1;grid-row:2;padding:5px 0 0 40px}.team-a-table td:nth-child(3){grid-column:2;grid-row:1/3}.team-a-table td:last-child{grid-column:3;grid-row:1/3}.team-a-member>span{min-width:0}.team-a-member strong{font-size:11px}.team-a-member small{font-size:9px}.team-a-availability{font-size:9px;gap:4px}.team-a-role{white-space:normal;font-size:9px}}
.team-a-edit-slot.is-by-load{grid-template-columns:minmax(0,1fr) 32px;gap:10px}
.team-a-roster .avatar{width:30px;height:30px;font-size:10px;flex:none}
.team-a-add-slot:disabled{opacity:.4;cursor:default}
.team-panel-enter{animation:team-panel-arrive 220ms cubic-bezier(.2,.8,.2,1) both}
@keyframes team-panel-arrive{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.team-panel-enter{animation:none}}
@media(max-width:600px){.team-a-edit-slot.is-by-load{grid-template-columns:minmax(0,1fr) 28px}.team-a-edit-slot.is-by-load .team-a-member-select .avatar{display:grid}}

/* Roster sorting: pointer-following row, animated insertion, and landing. */
.team-a-drag{touch-action:none;user-select:none;min-height:36px}
.team-a-edit-slot{position:relative}
.team-a-edit-slots.is-reordering .team-a-edit-slot{transition:transform 180ms cubic-bezier(.2,.8,.2,1);will-change:transform}
.team-a-edit-slots.is-reordering .is-dragging{z-index:2;transition:none;background:#fff;box-shadow:0 8px 24px #17294326;outline:1px solid #b199ed;border-radius:8px}
.team-a-edit-slots.is-reordering .is-dragging.is-settling{transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
body.team-roster-dragging,body.team-roster-dragging *{cursor:grabbing!important;user-select:none!important}
@media(max-width:600px){.team-a-edit-slot:not(.is-by-load){grid-template-columns:18px 24px minmax(0,1fr) 54px 28px;gap:5px}.team-a-drag{display:grid}}
@media(prefers-reduced-motion:reduce){.team-a-edit-slots.is-reordering .team-a-edit-slot,.team-a-edit-slots.is-reordering .is-dragging.is-settling{transition:none}}