/* ==========================================================================
   Sync Modern UI — pastel flat palette (no gradients)
   Color roles:
     indigo  bg #E4E7FB / ink #4F46E5 / text #3730A3  -> umum / perubahan / progress
     rose    bg #FCE7F3 / ink #EC4899 / text #9D174D  -> data dikirim
     sky     bg #DBEAFE / ink #3B82F6 / text #1E40AF  -> data diterima
     mint    bg #D1FAE5 / ink #10B981 / text #065F46  -> data referensi / sukses
     amber   bg #FEF3C7 / ink #F59E0B / text #92400E  -> peringatan / konflik
     red     bg #FEE2E2 / ink #EF4444 / text #991B1B  -> gagal / error
     slate   bg #F1F5F9 / ink #64748B / text #1E293B  -> netral
   ========================================================================== */

.phase-progress-area{padding:20px 4px 12px}

.sync-test-session-banner{display:flex;align-items:center;gap:10px;margin:8px 4px 10px;padding:10px 14px;font-size:13px;border-left:4px solid #f59e0b;background:#fffbeb;color:#92400e}
.sync-test-session-banner strong{font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.sync-test-session-banner span{opacity:.9}

.phase-status-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;margin-bottom:14px;background:#e4e7fb;border-radius:8px;border-left:4px solid #818cf8}
.phase-status-icon{font-size:20px;flex-shrink:0}
.phase-status-text{flex:1;font-size:13px;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase-mini-spinner{width:18px;height:18px;border:2.5px solid #c7d2fe;border-top-color:#4f46e5;border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}

.phase-progress-overall{margin-bottom:14px}
.phase-progress-label{display:flex;justify-content:space-between;font-size:11px;color:#9ca3af;margin-bottom:5px}
.phase-progress-bg{background:#e5e7eb;border-radius:99px;height:7px;overflow:hidden}
.phase-progress-fill{height:100%;border-radius:99px;background:#a5b4fc;width:0%;transition:width 0.5s ease}

.progress-ball{position:absolute;top:5%;right:-14px;transform:translateY(-50%);width:28px;height:28px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgb(0 0 0 / .2);animation:pulse 0.7s linear infinite}

.pt-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid #f3f4f6;animation:rowIn 0.25s ease-out}
.pt-row:last-child{border-bottom:none}
.pt-icon{font-size:15px;flex-shrink:0}
.pt-name{flex:1;font-size:13px;font-weight:500;color:#374151}
.pt-count{font-size:11px;font-weight:600;color:#6b7280;background:#f3f4f6;border-radius:99px;padding:2px 10px;min-width:56px;text-align:center}
.pt-status{display:flex;align-items:center;flex-shrink:0}
.pt-active-bar{width:60px;height:4px;background:#e5e7eb;border-radius:99px;overflow:hidden}
.pt-active-bar-fill{height:100%;border-radius:99px;background:#a5b4fc;animation:pulse-bar 1s ease-in-out infinite;width:100%}
.pt-done-badge{width:20px;height:20px;border-radius:50%;background:#86efac;display:flex;align-items:center;justify-content:center;font-size:11px;color:#065f46;font-weight:700;animation:checkPop 0.3s ease-out}

.tab-done-bar{display:flex;align-items:center;gap:10px;padding:9px 14px;margin-bottom:14px;background:#f0fdf4;border-radius:8px;border-left:4px solid #34d399;font-size:13px}
.tab-done-bar .tdb-info{flex:1;font-weight:500;color:#374151}
.tab-done-bar .tdb-ok{color:#059669;font-weight:600}
.tab-done-bar .tdb-fail{color:#dc2626;font-weight:600}
.tab-done-bar .tdb-sep{color:#d1d5db}

/* Recap bar (ringkasan akhir sinkronisasi) */
.recap-bar{background:#eef2ff;border-radius:10px;padding:14px 20px;margin-bottom:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:#1e293b}
.recap-bar .rb-icon{font-size:20px;flex-shrink:0}
.recap-bar .rb-title{font-size:14px;font-weight:600}
.recap-bar .rb-time{font-size:11px;color:#64748b;margin-top:2px}
.recap-badge{background:#a7f3d0;color:#065f46;border-radius:99px;font-size:11px;font-weight:700;padding:3px 12px;letter-spacing:.5px;white-space:nowrap}
.recap-bar .rb-phases{display:flex}
.recap-bar .rb-phase{display:flex;flex-direction:column;align-items:center;padding:0 18px;border-right:1px solid rgba(30,41,59,.12)}
.recap-bar .rb-phase:last-child{border-right:none}
.recap-bar .rb-phase-num{font-size:20px;font-weight:800;color:#3730a3}
.recap-bar .rb-phase-label{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.recap-bar .rb-totals{margin-left:auto;display:flex;gap:24px;align-items:center}
.recap-bar .rb-tot-item{text-align:center}
.recap-bar .rb-tot-num{font-size:20px;font-weight:800;display:block;color:#1e293b}
.recap-bar .rb-tot-lbl{font-size:10px;opacity:.7;text-transform:uppercase;letter-spacing:.5px}

@media (max-width:768px){
  .recap-bar{flex-direction:column;align-items:flex-start}
  .recap-bar .rb-phases{flex-wrap:wrap}
  .recap-bar .rb-totals{margin-left:0}
  .sync-test-session-banner{flex-direction:column;align-items:flex-start;gap:6px}
}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes checkPop{0%{transform:scale(0)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes pulse-bar{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.modern-card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgb(0 0 0 / .08);margin-bottom:24px;overflow:hidden;transition:transform 0.3s ease,box-shadow 0.3s ease}
.modern-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgb(0 0 0 / .12)}

.modern-card-header{padding:16px 24px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:12px;letter-spacing:.3px}
.modern-card-header i{font-size:20px;opacity:.95}
.modern-card-header span{text-transform:none}
.header-changes{background:#e4e7fb;color:#3730a3}
.header-sent{background:#fce7f3;color:#9d174d}
.header-received{background:#dbeafe;color:#1e40af}
.header-reference{background:#d1fae5;color:#065f46}

.modern-card-body{padding:20px 24px}
.modern-card-body table thead tr{background:#eef2f7}
.modern-card-body table thead tr th,.modern-card-body table thead tr td{color:#2d3748!important;font-weight:600!important;text-transform:uppercase;font-size:12px;letter-spacing:.5px;padding:14px 12px!important;border:none!important}
.modern-card-body table tbody tr td{padding:12px!important;border-bottom:1px solid #e2e8f0!important;border-left:none!important;border-right:none!important;color:#4a5568}
.modern-card-body table tbody tr:hover{background-color:#f7fafc!important}
.modern-card-body table tbody tr:last-child td{border-bottom:none!important}
.modern-card-body table tfoot tr{background-color:#edf2f7;font-weight:600}
.modern-card-body table tfoot tr td{padding:14px 12px!important;color:#2d3748!important;border:none!important}

.school-info-card{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgb(0 0 0 / .08);margin-bottom:24px;overflow:hidden}
.school-info-header{background:#e2e8f0;padding:16px 24px;font-size:16px;font-weight:600;color:#1e293b;display:flex;align-items:center;gap:12px}
.school-info-header i{font-size:20px;opacity:.95}
.school-info-body{padding:24px;display:flex;gap:24px;align-items:flex-start}
.school-logo{flex-shrink:0;width:120px;height:120px;padding:16px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center}
.school-logo img{display:block;width:100%;height:100%;object-fit:contain}
.school-details{flex:1}
.detail-row{display:flex;padding:2px 0;border-bottom:1px solid #e2e8f0}
.detail-row:last-child{border-bottom:none}
.detail-label{flex:0 0 160px;font-weight:600;font-size:14px;color:#4a5568}
.detail-value{flex:1;font-size:14px;color:#2d3748;line-height:1.5}

/* Tabs: setiap tab punya warna sendiri agar informatif (dikirim/diterima/referensi) */
.modern-tabs-container{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgb(0 0 0 / .08);overflow:hidden}
.modern-tabs-header{display:flex;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.modern-tab-btn{flex:1;display:flex;align-items:center;gap:12px;padding:20px 24px;background:#fff0;border:none;cursor:pointer;transition:all 0.3s ease;position:relative;color:#64748b;border-right:1px solid #e2e8f0}
.modern-tab-btn:last-child{border-right:none}
.modern-tab-btn .tab-icon{font-size:32px;flex-shrink:0;opacity:.9}
.modern-tab-btn .tab-content{flex:1;text-align:left;display:flex;flex-direction:column;gap:4px}
.modern-tab-btn .tab-title{font-size:16px;font-weight:600;display:block;letter-spacing:.3px}
.modern-tab-btn .tab-subtitle{font-size:12px;opacity:.85;display:block}
.modern-tab-btn .tab-status{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e2e8f0;flex-shrink:0}
.status-loader{width:18px;height:18px;border:3px solid #e2e8f0;border-top-color:#94a3b8;border-radius:50%;animation:spin 1s linear infinite}
.status-complete{color:#059669;font-size:20px;font-weight:700;animation:checkPop 0.3s ease-out}

.modern-tab-btn[data-tab="tab-sent"]:hover{background:#fce7f3;color:#9d174d}
.modern-tab-btn[data-tab="tab-sent"].active{background:#fce7f3;color:#9d174d;box-shadow:inset 0 -4px 0 0 #f472b6}
.modern-tab-btn[data-tab="tab-sent"].active .tab-status{background:#f9a8d4}

.modern-tab-btn[data-tab="tab-received"]:hover{background:#dbeafe;color:#1e40af}
.modern-tab-btn[data-tab="tab-received"].active{background:#dbeafe;color:#1e40af;box-shadow:inset 0 -4px 0 0 #60a5fa}
.modern-tab-btn[data-tab="tab-received"].active .tab-status{background:#93c5fd}

.modern-tab-btn[data-tab="tab-reference"]:hover{background:#d1fae5;color:#065f46}
.modern-tab-btn[data-tab="tab-reference"].active{background:#d1fae5;color:#065f46;box-shadow:inset 0 -4px 0 0 #34d399}
.modern-tab-btn[data-tab="tab-reference"].active .tab-status{background:#6ee7b7}

.modern-tabs-body{padding:24px;background:#f8f9fa}
.modern-tab-pane{display:none;animation:fadeInUp 0.4s ease-out}
.modern-tab-pane.active{display:block}
.tab-detail-head{padding:10px 16px;background:#eef2ff;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;font-size:13px;color:#374151;font-weight:600}

@media (max-width:768px){
  .modern-tabs-header{flex-direction:column}
  .modern-tab-btn{border-right:none;border-bottom:1px solid #e2e8f0;padding:16px 20px}
  .modern-tab-btn.active{box-shadow:inset -4px 0 0 0 currentColor}
  .modern-tab-btn .tab-icon{font-size:28px}
  .modern-tab-btn .tab-title{font-size:14px}
  .modern-tabs-body{padding:16px}
  .school-info-body{flex-direction:column;padding:16px;gap:16px}
  .school-logo{align-self:center}
  .detail-row{flex-direction:column;gap:4px}
  .detail-label{flex:none}
}