:root{--bg:#eef4f1;--aside:#0b2822;--panel:#fff;--panel2:#f5f9f7;--line:#d9e5e0;--text:#10231f;--muted:#6d817b;--blue:#11866c;--cyan:#24bfd0;--green:#13ad7e;--red:#e55c68;--amber:#e2a923;--purple:#7367d8;--shadow:0 16px 40px rgba(20,56,46,.07)}
html,body{background:var(--bg);color:var(--text)}body{background-image:linear-gradient(rgba(16,72,59,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,72,59,.025) 1px,transparent 1px);background-size:34px 34px}.app{grid-template-columns:252px 1fr}aside{width:252px;padding:22px 16px;background:linear-gradient(165deg,#0b2c25,#0a211d 68%,#071a17);border-right:0;color:#e8fff8;overflow:hidden}aside:before{content:"";position:absolute;inset:-80px -80px auto auto;width:240px;height:550px;border:2px solid rgba(74,220,178,.08);transform:rotate(23deg);box-shadow:45px 0 0 rgba(74,220,178,.035),90px 0 0 rgba(74,220,178,.025);pointer-events:none}.logo{padding:2px 7px 28px;position:relative}.logo strong{color:#f4fffb;font-size:17px}.logo small{color:#7cc5b1;letter-spacing:.04em}.brand-mark{background:linear-gradient(145deg,#43d8c0,#20aebc);color:#06231d;border-radius:12px;box-shadow:0 10px 28px rgba(34,201,164,.24)}.brand-mark.big{margin:0;width:56px;height:56px}.nav-label{color:#5b9e8d;margin:20px 12px 8px}.nav-label:first-child{margin-top:0}nav{position:relative}nav button,.logout{color:#a5c7be;border-radius:9px;padding:12px 13px}nav button:hover,nav button.active{background:rgba(41,195,152,.12);color:#f1fffa}nav button.active{box-shadow:inset 3px 0 #36d8aa}nav button b{background:#124a3d;color:#78edc9}.profile{position:relative;background:rgba(5,24,20,.4);border-color:#245045;padding:12px}.avatar{background:linear-gradient(145deg,#38cfa8,#16816c);color:#fff}.profile-dot{width:7px;height:7px;border-radius:50%;background:#43dcab;margin-left:auto;box-shadow:0 0 10px #43dcab}.logout{position:relative;border-color:#245045}.logout:hover{background:#12352d}main{grid-column:2;padding:28px 32px 50px;max-width:1800px;width:100%;margin:auto}header{margin-bottom:25px}.header-title{display:flex;align-items:flex-start}header h2{font-size:26px;letter-spacing:-.035em}.eyebrow{color:#16866e;letter-spacing:.2em}.online{background:#e8f8f2;border-color:#acdcca;color:#10795f}.online i{background:#18b982;box-shadow:0 0 12px #18b982}.live-clock{font-size:9px;font-weight:850;letter-spacing:.16em;color:#738b84}.kpi,.card{background:rgba(255,255,255,.93);border-color:var(--line);border-radius:16px;box-shadow:var(--shadow)}.kpi{min-height:130px;padding:21px}.kpi:before{top:0;left:0;width:100%;height:3px;background:var(--accent,var(--green))}.kpi .label{color:#668079;font-size:10px;letter-spacing:.1em}.kpi strong{font-size:30px;letter-spacing:-.04em}.kpi small{color:#83948f}.card{padding:20px}.card-head h3{font-size:16px}.dashboard-grid{grid-template-columns:1.6fr .8fr}.monitor-panel{background:linear-gradient(100deg,#edf9f5,#f6fbf9);border-color:#c7e6db}.scan-ring{border-color:#c9e8de;border-top-color:#18b982;color:#11745d}.worker-summary>div{background:#f5faf8;border-color:#dbe9e4}.progress{gap:9px}.step{background:#f7faf9;border-color:#dce7e3;color:#83938e}.step b{color:#334a44}.step.active{border-color:#36ae91;background:#e8f7f2}.step.success{border-color:#70cbb0;background:#ecf9f4}.step.failed{border-color:#e7a1a7;background:#fff0f1}.btn,.primary{border-color:#d4e3de;background:#f6faf8;color:#18332c}.primary{background:linear-gradient(135deg,#17a87f,#08735d);color:#fff;box-shadow:0 9px 22px rgba(9,130,99,.2)}input,select{background:#f8fbfa;border-color:#d4e2dd;color:#122a24}.brand-lock{background:#eff9f5;border-color:#c8e8dc}.result-summary{background:#eaf8f3;border-color:#a9ddcb;color:#17654f}.detail-grid div{border-color:#e0e9e6}.table-wrap{border:1px solid #e0e9e6;border-radius:11px}th{background:#f4f8f6;color:#6d827b;border-color:#dce7e3}td{border-color:#e7eeeb}tbody tr:hover{background:#f1f8f5}.badge{background:#e8eef1;color:#526871}.badge.green{background:#dff6ed;color:#0a7658}.badge.red{background:#ffe8eb;color:#b53e4d}.badge.amber{background:#fff4d7;color:#946b09}.badge.purple{background:#eeeafd;color:#6253be}.worker-icon{background:#e2f7f2;color:#0b8066}.empty{color:#72857f}.deposit-panel{background:#f5faf8;border-color:#d5e5df}.deposit-panel.deposit-success{background:#eaf8f2}.deposit-confirm{background:#f4f8f6;border-color:#dbe7e2}.modal{background:rgba(3,20,17,.72)}.modal-card{background:#fff;border-color:#d5e4df}.modal-close{color:#18332c}.toast{background:#10352d;border-color:#286657;color:#dffaf1}.security-note{background:#eaf8f3;border-color:#b9e0d3;color:#246c59}.text-button{color:#087c61}.auto-row{border-color:#d7e5e0}.turnover-options label{border-color:#d4e2dd}.turnover-options label.selected{border-color:#26a786;background:#e9f8f3}.audit-message{background:#fff7e4;border-color:#efd796;color:#7a5b12}
.login-wrap{padding:34px;background:#071914;place-items:center}.login-grid-art{position:absolute;inset:0;background:radial-gradient(circle at 18% 30%,rgba(43,207,163,.14),transparent 34%),linear-gradient(rgba(83,179,153,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(83,179,153,.035) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}.login-shell{width:min(1060px,100%);min-height:650px;display:grid;grid-template-columns:1.08fr .92fr;position:relative;border:1px solid rgba(112,207,181,.2);border-radius:25px;overflow:hidden;background:#0b251f;box-shadow:0 35px 100px rgba(0,0,0,.45)}.login-story{padding:54px;display:flex;flex-direction:column;position:relative;overflow:hidden;background:linear-gradient(150deg,#0c3027,#0b211d)}.login-story:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid rgba(62,223,179,.09);right:-280px;top:-90px;box-shadow:0 0 0 70px rgba(62,223,179,.025),0 0 0 140px rgba(62,223,179,.02)}.login-brand{display:flex;align-items:center;gap:15px;position:relative}.login-brand strong{display:block;color:#f2fff9;font-size:17px;letter-spacing:.08em}.login-brand small{display:block;color:#6abca6;font-size:9px;letter-spacing:.2em;margin-top:4px}.story-copy{margin:auto 0;position:relative}.story-copy .eyebrow{color:#52d9b5}.story-copy h1{font-size:43px;line-height:1.08;letter-spacing:-.045em;color:#f3fff9;margin:15px 0 20px}.story-copy h1 em{font-style:normal;color:#48d7b2}.story-copy>p:last-child{max-width:470px;color:#8fb6ab;font-size:14px;line-height:1.8}.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}.story-stats div{border-top:1px solid #245045;padding-top:14px}.story-stats b{display:block;color:#eafff8;font-size:18px}.story-stats span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#619a8b}.story-code{position:absolute;right:26px;bottom:19px;font-size:8px;color:#396e60;letter-spacing:.18em}.login-card{width:auto;border:0;border-radius:0;background:#f4f8f6;padding:62px 58px;text-align:left;box-shadow:none;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:28px;letter-spacing:-.035em;margin:4px 0}.login-card label{color:#47635b}.login-card input{background:#fff}.login-sub{margin-bottom:25px}.login-submit{min-height:49px}.secure-footer{text-align:center;color:#84968f}.secure-footer span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#17af80;margin-right:7px}.mobile-login-brand{display:none}.login-card .error{color:#ca4654}
@media(max-width:1050px){.app{grid-template-columns:220px}aside{width:220px}main{padding:24px 22px}.workers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:780px){.login-shell{grid-template-columns:1fr;min-height:0;max-width:480px}.login-story{display:none}.login-card{padding:42px 28px;border-radius:22px}.mobile-login-brand{display:flex;align-items:center;gap:10px;margin-bottom:32px}.mobile-login-brand strong{font-size:17px}.app{grid-template-columns:1fr}aside{width:252px}main{grid-column:1;padding:18px}.header-actions .live-clock{display:none}.header-actions .online{font-size:0;padding:9px}.header-actions .online i{margin:0}.kpis,.workers{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}}

/* Zebra Ops — dashboard contrast correction */
.monitor-panel{
  background:linear-gradient(100deg,#edf9f5,#f6fbf9)!important;
  border-color:#c7e6db!important;
  color:#10231f!important;
}

.monitor-panel b{
  color:#18332c!important;
}

.monitor-panel .muted{
  color:#6d817b!important;
}

.scan-ring{
  background:#edf9f5!important;
  border-color:#c9e8de!important;
  border-top-color:#18b982!important;
  color:#11745d!important;
}

.worker-summary > div{
  background:#f5faf8!important;
  border-color:#dbe9e4!important;
  color:#10231f!important;
}

.worker-summary > div b{
  color:#18332c!important;
}

/* Zebra Ops — samakan posisi seluruh halaman */
main {
  margin: 0 auto !important;
  align-self: start !important;
}

/* Zebra Ops — rapikan isi kartu Worker */
.workers {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.worker {
  min-height: 290px;
  padding: 18px !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #ffffff, #f8fbfa) !important;
  border: 1px solid #d5e4df !important;
  border-radius: 15px !important;
  box-shadow: 0 8px 24px rgba(20, 56, 46, 0.05) !important;
}

.worker-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 44px;
  margin-bottom: 15px;
}

.worker-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #dcf5ee, #edf9f5) !important;
  border: 1px solid #cce8df !important;
  color: #0b8469 !important;
}

.worker-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worker h3 {
  margin: 0 0 7px !important;
  font-size: 16px !important;
  line-height: 1.3;
  color: #10231f !important;
}

.worker > .muted {
  margin: 0 0 15px !important;
  min-height: 18px;
  color: #637b74 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.worker dl {
  margin: 0 0 16px !important;
  padding: 12px !important;
  display: grid;
  gap: 11px;
  background: #f3f8f6;
  border: 1px solid #dce9e4;
  border-radius: 11px;
}

.worker dt {
  margin: 0 0 3px !important;
  color: #789089 !important;
  font-size: 8px !important;
  font-weight: 750;
  letter-spacing: 0.06em;
}

.worker dd {
  margin: 0 !important;
  color: #17322b !important;
  font-size: 11px !important;
  font-weight: 650;
}

.worker .btn {
  width: 100%;
  min-height: 38px;
  margin-top: auto !important;
  background: #f2f8f5 !important;
  border-color: #cbded7 !important;
  color: #176b56 !important;
}

.worker .btn:hover {
  background: #e4f4ee !important;
  border-color: #91cdb9 !important;
}

@media (max-width: 1200px) {
  .workers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .workers {
    grid-template-columns: 1fr !important;
  }
}

/* Zebra Ops — System Logs */
.log-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 15px;
}

.system-log-card {
  margin-top: 0 !important;
}

.log-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 190px auto;
  gap: 10px;
  margin-bottom: 14px;
}

.log-search {
  position: relative;
}

.log-search > span {
  position: absolute;
  left: 13px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: #718780;
  font-size: 18px;
}

.log-search input {
  padding-left: 39px;
}

.system-log-table th,
.system-log-table td {
  vertical-align: middle;
}

.system-log-table tbody tr:hover {
  background: #f0f8f5 !important;
}

.log-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.log-user > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #e2f5ef;
  color: #08745c;
  font-size: 10px;
  font-weight: 800;
}

.log-action {
  color: #17322b;
  white-space: nowrap;
}

.log-detail {
  display: block;
  max-width: 360px;
  overflow: hidden;
  color: #667b75;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.log-ip {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #d7e5e0;
  border-radius: 7px;
  background: #f5f9f7;
  color: #526c64;
  font-size: 10px;
  white-space: nowrap;
}

.log-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 15px;
  color: #6d817b;
  font-size: 11px;
}

.log-page-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.log-page-controls b {
  min-width: 110px;
  color: #344c45;
  text-align: center;
  font-size: 11px;
}

.log-page-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

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

  .log-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .log-search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .log-kpis,
  .log-toolbar {
    grid-template-columns: 1fr;
  }

  .log-search {
    grid-column: auto;
  }

  .log-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .log-page-controls {
    justify-content: space-between;
  }
}

/* Pagination Audit Trail & Access Control */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  color: #607770;
  font-size: 12px;
}

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

.pagination-actions b {
  min-width: 110px;
  color: #18332c;
  font-size: 12px;
  text-align: center;
}

.pagination-actions button:disabled {
  cursor: not-allowed;
  opacity: .42;
  box-shadow: none;
}

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

  .pagination-actions {
    justify-content: space-between;
  }

  .pagination-actions b {
    min-width: auto;
  }
}

/* =========================================================
   Zebra Ops — Custom confirmation modal
   ========================================================= */

.confirm-modal {
  text-align: left;
}

.confirm-modal h2 {
  margin: 4px 0 10px;
  color: #102f27;
  font-size: 24px;
  letter-spacing: -.025em;
}

.confirm-description {
  max-width: 540px;
  margin-bottom: 18px;
  line-height: 1.65;
}

.confirm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 900;
}

.password-confirm-icon {
  color: #08785f;
  background: #e5f7f1;
  border: 1px solid #b8e2d4;
}

.twofa-confirm-icon {
  color: #6253be;
  background: #eeeafd;
  border: 1px solid #d8d0fa;
  font-size: 13px;
}

.danger-confirm-icon {
  color: #be4051;
  background: #ffeaed;
  border: 1px solid #f2bec6;
  font-size: 21px;
}

.danger-eyebrow {
  color: #bb4050 !important;
}

.confirm-form label {
  display: block;
  margin: 18px 0 7px;
  color: #304c44;
  font-size: 12px;
  font-weight: 750;
}

.confirm-form input {
  padding-right: 48px;
}

.field-help {
  display: block;
  margin-top: 8px;
  color: #758b84;
  font-size: 11px;
  line-height: 1.5;
}

.confirm-notice,
.danger-notice {
  margin-top: 17px;
  padding: 13px 14px;
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.55;
}

.confirm-notice {
  color: #38675a;
  background: #f0f8f5;
  border: 1px solid #d2e8e0;
}

.danger-notice {
  color: #99404c;
  background: #fff1f3;
  border: 1px solid #f0c8ce;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 24px;
  padding-top: 17px;
  border-top: 1px solid #e0e9e6;
}

.modal-actions button {
  min-width: 110px;
}

.danger-primary {
  color: #fff !important;
  background: linear-gradient(135deg,#e15b6d,#b63447) !important;
  box-shadow: 0 9px 22px rgba(190,55,73,.22) !important;
}


/* =========================================================
   Semua toast/notifikasi berada di kanan atas
   ========================================================= */

.toast {
  top: 22px !important;
  right: 22px !important;
  bottom: auto !important;
  transform: translateY(-90px) !important;
  z-index: 100 !important;
  box-shadow: 0 18px 45px rgba(3,30,24,.22) !important;
}

.toast.show {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

@media (max-width: 720px) {
  .toast {
    top: 14px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: auto !important;
    min-width: 0 !important;
  }

  .modal-actions {
    flex-direction: column-reverse;
  }

  .modal-actions button {
    width: 100%;
  }
}

/* =========================================================
   Zebra Ops — Warna badge berdasarkan Peran
   ========================================================= */

.role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .025em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ADMIN MASTER — Emas */
.role-badge.role-master {
  color: #8a6000;
  background: linear-gradient(135deg,#fff5cf,#ffe7a0);
  border-color: #efd786;
  box-shadow: 0 3px 10px rgba(193,139,16,.10);
}

/* ADMIN SUPER — Ungu */
.role-badge.role-super {
  color: #6845b7;
  background: linear-gradient(135deg,#f0eaff,#e5dcff);
  border-color: #d6c8fa;
  box-shadow: 0 3px 10px rgba(105,73,185,.09);
}

/* HD — Biru */
.role-badge.role-hd {
  color: #2862a8;
  background: linear-gradient(135deg,#e8f3ff,#d9eaff);
  border-color: #c4dcf6;
  box-shadow: 0 3px 10px rgba(40,98,168,.08);
}

/* STAFF — Hijau/toska */
.role-badge.role-staff {
  color: #08765f;
  background: linear-gradient(135deg,#e5f8f1,#d7f3e9);
  border-color: #bfe5d8;
  box-shadow: 0 3px 10px rgba(8,118,95,.08);
}

/* Role cadangan */
.role-badge.role-default {
  color: #546a64;
  background: #eef3f1;
  border-color: #d9e4e0;
}

/* =========================================================
   Zebra Ops — Filter Access Control
   ========================================================= */

.access-filters {
  display: grid;
  grid-template-columns:
    minmax(260px,1.7fr)
    minmax(145px,.65fr)
    minmax(145px,.65fr)
    minmax(155px,.65fr)
    auto;
  gap: 9px;
  margin: 4px 0 13px;
}

.access-filters input,
.access-filters select,
.access-filters button {
  min-height: 45px;
}

.access-search {
  position: relative;
}

.access-search input {
  padding-left: 42px;
}

.access-search-icon {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 1;
  color: #71877f;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-53%);
  pointer-events: none;
}

.access-reset-filter {
  min-width: 74px;
}

.access-filter-result {
  display: flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: 0 0 12px;
  padding: 7px 10px;
  color: #517269;
  background: #eff8f5;
  border: 1px solid #d3e9e1;
  border-radius: 999px;
  font-size: 11px;
}

.access-filter-result > span {
  width: 6px;
  height: 6px;
  margin-right: 2px;
  background: #1bb985;
  border-radius: 50%;
}

.access-filter-result b {
  color: #08765f;
}

.access-user-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.access-user-avatar {
  width: 27px;
  height: 27px;
  display: grid;
  flex: none;
  place-items: center;
  color: #08745d;
  background: #e2f6ef;
  border: 1px solid #c9e9de;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 850;
}

.access-empty-result {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px;
}

.access-empty-result b {
  color: #29453d;
  font-size: 12px;
}

.access-empty-result span {
  color: #7c908a;
  font-size: 11px;
}

@media (max-width: 1100px) {
  .access-filters {
    grid-template-columns: 1fr 1fr;
  }

  .access-search {
    grid-column: 1/-1;
  }
}

@media (max-width: 720px) {
  .access-filters {
    grid-template-columns: 1fr;
  }

  .access-search {
    grid-column: auto;
  }
}

/* =========================================================
   Zebra Ops — Badge Brand & 2FA Access Control
   ========================================================= */

.brand-badge,
.twofa-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .025em;
  white-space: nowrap;
}

/* Brand ZS — Oranye */
.brand-badge.brand-zs {
  color: #a54c05;
  background: linear-gradient(135deg,#fff0dc,#ffd7ae);
  border-color: #f3bd82;
  box-shadow: 0 3px 10px rgba(218,112,21,.10);
}

/* Brand ALL — sama dengan ADMIN MASTER */
.brand-badge.brand-all {
  color: #8a6000;
  background: linear-gradient(135deg,#fff5cf,#ffe7a0);
  border-color: #efd786;
  box-shadow: 0 3px 10px rgba(193,139,16,.10);
}

/* Brand cadangan */
.brand-badge.brand-default {
  color: #546a64;
  background: #eef3f1;
  border-color: #d9e4e0;
}

/* 2FA aktif — Hijau */
.twofa-badge.twofa-active {
  color: #08765f;
  background: linear-gradient(135deg,#e5f8f1,#d7f3e9);
  border-color: #bfe5d8;
  box-shadow: 0 3px 10px rgba(8,118,95,.08);
}

/* 2FA belum aktif — Merah */
.twofa-badge.twofa-off {
  color: #b43849;
  background: linear-gradient(135deg,#ffedf0,#ffdde3);
  border-color: #f2bdc6;
  box-shadow: 0 3px 10px rgba(180,56,73,.09);
}

/* =========================================================
   Zebra Ops — Warna tombol status Worker
   ========================================================= */

.worker-toggle-button {
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  font-weight: 800;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.worker-toggle-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Worker sedang aktif — tombol untuk menonaktifkan */
.worker-disable-button {
  color: #b43a4b !important;
  background: linear-gradient(135deg,#fff1f3,#ffe4e8) !important;
  border-color: #f0bdc5 !important;
  box-shadow: 0 5px 14px rgba(180,58,75,.08);
}

.worker-disable-button:hover {
  color: #a02f40 !important;
  border-color: #e99ba7 !important;
  box-shadow: 0 8px 18px rgba(180,58,75,.14);
}

/* Worker sedang nonaktif — tombol untuk mengaktifkan */
.worker-enable-button {
  color: #087259 !important;
  background: linear-gradient(135deg,#e5f8f1,#d5f2e7) !important;
  border-color: #b9dfd2 !important;
  box-shadow: 0 5px 14px rgba(8,114,89,.08);
}

.worker-enable-button:hover {
  color: #05634c !important;
  border-color: #8fd0bb !important;
  box-shadow: 0 8px 18px rgba(8,114,89,.14);
}

/* =========================================================
   Zebra Ops — Tes Koneksi Worker
   ========================================================= */

.worker-card-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.worker-test-button {
  width: 100%;
  min-height: 38px;
  color: #16735e !important;
  background: linear-gradient(135deg,#ecf9f5,#e1f5ee) !important;
  border-color: #bfe3d7 !important;
  font-weight: 800;
}

.worker-test-button:hover:not(:disabled) {
  color: #075f4b !important;
  background: linear-gradient(135deg,#dff6ee,#cff0e4) !important;
  border-color: #8fcfba !important;
  box-shadow: 0 7px 17px rgba(10,119,91,.12);
}

.worker-test-button:disabled {
  cursor: not-allowed;
  color: #9aa9a4 !important;
  background: #f1f5f3 !important;
  border-color: #dce5e2 !important;
  opacity: .7;
}

.worker-test-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.worker-test-icon {
  color: #08765f;
  background: #e4f7f0;
  border: 1px solid #bae2d4;
}

.worker-test-flow {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  margin: 20px 0;
}

.worker-test-flow > div {
  display: grid;
  align-content: start;
  min-height: 103px;
  padding: 12px;
  background: #f5faf8;
  border: 1px solid #dbe8e4;
  border-radius: 11px;
}

.worker-test-flow span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  margin-bottom: 11px;
  color: #08745d;
  background: #ddf4ec;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 850;
}

.worker-test-flow b {
  color: #1c3b33;
  font-size: 11px;
}

.worker-test-flow small {
  margin-top: 4px;
  color: #7b9089;
  font-size: 9px;
  line-height: 1.4;
}

.worker-test-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 13px 14px;
  color: #166c57;
  background: #eef9f5;
  border: 1px solid #cbe8de;
  border-radius: 11px;
}

.worker-test-status div {
  display: grid;
  gap: 3px;
}

.worker-test-status b {
  font-size: 12px;
}

.worker-test-status small {
  color: #718a82;
  font-size: 10px;
}

.worker-test-spinner {
  width: 24px;
  height: 24px;
  flex: none;
  border: 3px solid #cce9df;
  border-top-color: #15946f;
  border-radius: 50%;
  animation: workerSpin .8s linear infinite;
}

.worker-test-error {
  display: grid;
  gap: 5px;
  margin-top: 15px;
  padding: 13px 14px;
  color: #a53849;
  background: #fff0f2;
  border: 1px solid #efc2ca;
  border-radius: 11px;
}

.worker-test-error b {
  font-size: 12px;
}

.worker-test-error span {
  font-size: 10px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@keyframes workerSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .worker-test-flow {
    grid-template-columns: 1fr;
  }

  .worker-test-flow > div {
    min-height: 0;
  }
}