/* TNDK UI V2 — presentation-only patch. No app logic changed. */
:root{
  --ui-bg:#f4f8fd;
  --ui-ink:#15283f;
  --ui-muted:#6f8094;
  --ui-line:#dce6f2;
  --ui-blue:#4388ff;
  --ui-cyan:#28c1ef;
  --ui-violet:#7667f7;
  --ui-green:#28b987;
  --ui-amber:#f1aa32;
  --ui-teal:#14b8a6;
  --ui-slate:#62778f;
  --ui-shadow:0 18px 42px rgba(44,73,120,.09);
}

html,body{background:#f4f8fd;}
body[data-app-code="dashboard-monitor-tendik-2026"]{
  color:var(--ui-ink);
  background:
    radial-gradient(circle at 6% 0%,rgba(40,193,239,.12),transparent 28%),
    radial-gradient(circle at 96% 2%,rgba(118,103,247,.12),transparent 30%),
    linear-gradient(180deg,#edf6fd 0,#f7f9fd 44%,#f5f7fb 100%);
}

/* Header */
.topbar{
  background:rgba(250,252,255,.91)!important;
  border-bottom:1px solid rgba(203,216,232,.88)!important;
  box-shadow:0 9px 28px rgba(43,64,91,.06)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.topbar-inner{max-width:1600px;margin-inline:auto;}
.brand{gap:14px!important;align-items:center!important;}
.brand .logo{
  width:54px!important;height:54px!important;border-radius:17px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,#3a8dff 0%,#6674f4 58%,#34c4ea 100%)!important;
  color:#fff!important;font-size:1.25rem!important;font-weight:800!important;
  box-shadow:0 12px 25px rgba(72,111,235,.24)!important;
  border:1px solid rgba(255,255,255,.75)!important;
}
.brand h1{color:#10253e!important;letter-spacing:-.035em!important;}
.brand p{color:#708096!important;}
#reloadBtn{
  border:0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#3f86ff,#6576f5 60%,#25bfe9)!important;
  box-shadow:0 10px 22px rgba(61,118,234,.20)!important;
  color:#fff!important;
}

.dashboard-main-grid{max-width:1600px;margin-inline:auto;padding:18px 16px 30px!important;gap:14px!important;}

/* Main cards */
.card.pad.mock-card,
.card.pad.quota-explorer,
.card.pad.participant-search-card,
.card.pad.region-status-card,
.card.pad.utility-card,
.card.pad.progress-shell,
.card.pad.detail-matrix-section,
.card.pad.detail-region-section,
.card.pad.export-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--ui-line)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98))!important;
  box-shadow:var(--ui-shadow)!important;
}
.card.pad.mock-card::after,
.card.pad.quota-explorer::after,
.card.pad.participant-search-card::after,
.card.pad.region-status-card::after,
.card.pad.utility-card::after,
.card.pad.progress-shell::after,
.card.pad.detail-matrix-section::after,
.card.pad.detail-region-section::after,
.card.pad.export-card::after{
  content:"";
  position:absolute;
  pointer-events:none;
  width:140px;height:140px;border-radius:50%;
  right:-54px;top:-72px;
  border:22px solid rgba(87,125,231,.035);
  box-shadow:0 0 0 16px rgba(40,193,239,.025);
}

/* Header rows */
.utility-header,.section-head,.region-status-header,.wrong-sheet-header,.participant-audit-header{
  min-height:74px;
  align-items:center!important;
  gap:14px!important;
}
.utility-copy,.region-status-copy,.tndk-icon-copy,.overview-title-block{
  min-width:0;
}
.tndk-icon-copy{
  position:relative;
  padding-left:70px!important;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.overview-title-block{
  position:relative!important;
  padding-left:70px!important;
  min-height:56px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* Card icons, PM-FKK inspired */
.tndk-card-icon,.overview-icon{
  position:absolute!important;
  left:0!important;top:50%!important;
  transform:translateY(-50%)!important;
  width:54px!important;height:54px!important;
  display:grid!important;place-items:center!important;
  border-radius:17px!important;
  color:#fff!important;
  font-size:1.08rem!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 12px 24px rgba(59,99,170,.16)!important;
  overflow:hidden;
}
.tndk-card-icon::after,.overview-icon::after{
  content:"";position:absolute;width:34px;height:34px;border-radius:50%;
  right:-12px;bottom:-13px;border:8px solid rgba(255,255,255,.18);
}
.tndk-card-icon i,.overview-icon i{position:relative;z-index:1;}
.tone-blue{background:linear-gradient(145deg,#4388ff,#2abfee)!important;}
.tone-cyan{background:linear-gradient(145deg,#22b8ef,#4f7cf6)!important;}
.tone-violet{background:linear-gradient(145deg,#6677f5,#9b6df2)!important;}
.tone-green{background:linear-gradient(145deg,#37c596,#1fa36f)!important;}
.tone-amber{background:linear-gradient(145deg,#f6bb4a,#ef922a)!important;}
.tone-teal{background:linear-gradient(145deg,#22b8a8,#2f9ee9)!important;}
.tone-slate{background:linear-gradient(145deg,#667b92,#4d73b8)!important;}

.section-title,.region-status-title,.wrong-sheet-title{
  color:#15283f!important;
  letter-spacing:-.025em!important;
  font-weight:750!important;
}
.utility-subtitle,.utility-update,.region-status-sub,.wrong-sheet-subtitle,.participant-audit-subtitle,.muted{
  color:var(--ui-muted)!important;
}

/* Buttons / pills */
.collapse-toggle{
  min-height:42px!important;
  padding-inline:14px!important;
  border-radius:14px!important;
  border:1px solid #d7e2ef!important;
  background:rgba(250,252,255,.94)!important;
  color:#42556d!important;
  box-shadow:0 7px 16px rgba(79,104,139,.07)!important;
}
.mock-badge-wrap,.region-status-badge,.participant-audit-badge{
  border-radius:14px!important;
}
.mock-badge{
  border-radius:999px!important;
  border:1px solid rgba(71,115,218,.16)!important;
  background:linear-gradient(135deg,rgba(64,135,255,.09),rgba(118,103,247,.09))!important;
  color:#496480!important;
}

/* Form surfaces */
input,select,textarea{
  border-radius:15px!important;
}
.participant-search-input,.region-status-input,.quota-kab-input,
#quotaFrom,#regionStatusKab,#participantSearchInput{
  border:1px solid #d7e2f0!important;
  background:#fff!important;
  box-shadow:0 6px 16px rgba(53,78,109,.04)!important;
}

/* Inner panels */
.table-wrap,.participant-result,.participant-suggestions,.region-status-empty,
.quota-overview,.participant-audit-table-wrap,.status-matrix-wrap,.missing-matrix-wrap{
  border-radius:18px!important;
}
.kpis>*{border-radius:20px!important;}
.class-grid>*,#exportClassGrid>*,#exportMissingClassGrid>*,#regionDetailGrid>*{
  border-radius:18px!important;
}

/* Subtle accent strips */
.quota-explorer{--card-accent:#35bff0;}
#participantSearchCard{--card-accent:#7769f5;}
#regionStatusCard{--card-accent:#2ab78a;}
#kpiSummaryCard{--card-accent:#f0aa37;}
#progressCard{--card-accent:#31b9d9;}
#matrixDualCard{--card-accent:#8a6ff2;}
#participantAuditCard{--card-accent:#eaa33a;}
.detail-region-section{--card-accent:#2bb77f;}
#belajarCard{--card-accent:#4388ff;}
#wrongRoomCard{--card-accent:#637b9a;}
#exportCard{--card-accent:#1eaaa1;}
.quota-explorer::before,#participantSearchCard::before,#regionStatusCard::before,#kpiSummaryCard::before,
#progressCard::before,#matrixDualCard::before,#participantAuditCard::before,.detail-region-section::before,
#belajarCard::before,#wrongRoomCard::before,#exportCard::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 8px 8px 0;
  background:var(--card-accent);opacity:.82;
}

.micro-footer{opacity:.48!important;padding-top:18px!important;}

@media(max-width:900px){
  .dashboard-main-grid{padding:13px 10px 28px!important;}
  .card.pad.mock-card,.card.pad.quota-explorer,.card.pad.utility-card,.card.pad.progress-shell,
  .card.pad.detail-matrix-section,.card.pad.detail-region-section,.card.pad.export-card{border-radius:20px!important;}
  .utility-header,.section-head,.region-status-header,.wrong-sheet-header,.participant-audit-header{min-height:66px;}
  .tndk-icon-copy,.overview-title-block{padding-left:62px!important;min-height:50px!important;}
  .tndk-card-icon,.overview-icon{width:48px!important;height:48px!important;border-radius:15px!important;font-size:.98rem!important;}
}
@media(max-width:600px){
  .brand .logo{width:48px!important;height:48px!important;border-radius:15px!important;}
  .brand h1{font-size:1.2rem!important;}
  .brand p{font-size:.84rem!important;}
  .utility-actions,.collapse-head-actions,.region-status-actions,.wrong-room-header-actions,.participant-audit-actions{gap:7px!important;}
  .mock-badge-wrap{display:none!important;}
  .tndk-icon-copy,.overview-title-block{padding-left:58px!important;}
  .tndk-card-icon,.overview-icon{width:44px!important;height:44px!important;border-radius:14px!important;}
}