/* Modern live-class dashboard for jadwal.html. Loaded after the shared flow files. */

.jadwal-content{
  background-image:
    radial-gradient(circle at 14% 16%,rgba(246,197,18,.16),transparent 26%),
    radial-gradient(circle at 88% 72%,rgba(14,166,114,.13),transparent 28%),
    linear-gradient(180deg,rgba(248,250,250,.95),rgba(255,251,240,.92) 64%,rgba(239,229,196,.9)),
    url('schedule-planner-bg-ai.jpg');
  background-position:center,center,center,center 46%;
  background-size:100% 100%,100% 100%,100% 100%,cover;
  background-repeat:no-repeat;
}

.kuota-live{
  position:relative;
  isolation:isolate;
  max-width:1080px;
  margin:0 auto 28px;
  padding:clamp(25px,3vw,34px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  overflow:hidden;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:34px;
  background:
    radial-gradient(circle at 7% 0,rgba(246,197,18,.18),transparent 27%),
    radial-gradient(circle at 96% 100%,rgba(43,214,150,.2),transparent 31%),
    linear-gradient(126deg,rgba(16,18,73,.985),rgba(39,43,128,.975) 57%,rgba(5,89,78,.96));
  box-shadow:0 34px 82px rgba(12,18,63,.24),inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}

.kuota-live::before{
  content:'';
  position:absolute;
  z-index:-1;
  width:340px;
  height:340px;
  top:-210px;
  right:14%;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(255,255,255,.025),0 0 0 76px rgba(255,255,255,.018);
  pointer-events:none;
}

.kuota-live::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 64%);
  mask-image:linear-gradient(135deg,#000,transparent 64%);
}

.kuota-live-head{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:28px;
  margin:0 0 2px;
  padding:2px 2px 24px;
  border-bottom:1px solid rgba(255,255,255,.13);
}

.kuota-live-title{max-width:620px;}

.kuota-live-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px;
  color:#FFE782;
  font-family:'Outfit',sans-serif;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.kuota-live-head .live-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#2BD696;
  box-shadow:0 0 0 5px rgba(43,214,150,.12);
}

.kuota-live-head h3{
  margin:0;
  color:#fff;
  font-size:clamp(25px,2.6vw,34px);
  line-height:1.08;
  text-wrap:balance;
}

.kuota-live-head p{
  max-width:580px;
  margin:10px 0 0;
  color:#D5DDF0;
  font-size:12.5px;
  line-height:1.7;
}

.kuota-live-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(82px,1fr));
  gap:8px;
}

.kuota-live-summary > span{
  min-height:70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:11px 13px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.kuota-live-summary strong{
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:21px;
  line-height:1;
}

.kuota-live-summary small{
  margin-top:5px;
  color:#C7D2E6;
  font-size:9.5px;
  font-weight:700;
  line-height:1.25;
}

.kuota-live-summary .is-synced{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-content:center;
  align-items:center;
  gap:8px;
}

.kuota-live-summary .is-synced i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#2BD696;
  box-shadow:0 0 0 5px rgba(43,214,150,.12);
}

.kuota-live-summary .is-synced small{margin:0;color:#DDF8EE;}

.kuota-live-guide{
  position:relative;
  z-index:1;
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:start;
  gap:12px;
  margin:-2px 0 0;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px;
  color:#D7E0EF;
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  font-size:10.5px;
  line-height:1.65;
}

.kuota-live-guide strong{color:#FFE782;font-family:'Outfit',sans-serif;font-size:10.5px;letter-spacing:.02em;}
.kuota-live-guide b{color:#fff;font-weight:800;}

.kuota-group{
  position:relative;
  z-index:1;
  min-width:0;
  margin:0;
  padding:20px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:23px;
  background:linear-gradient(155deg,rgba(255,255,255,.99),rgba(247,250,249,.965));
  box-shadow:0 20px 44px rgba(3,7,35,.18),inset 0 1px 0 #fff;
}

.kuota-group-label{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 13px;
  padding:0 2px 15px;
  border-bottom:1px solid rgba(43,46,131,.1);
  color:var(--navy);
  font-family:'Outfit',sans-serif;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.01em;
  text-transform:none;
}

.kuota-group-label::before{
  content:'';
  width:11px;
  height:11px;
  flex:0 0 auto;
  border:3px solid #F6C512;
  border-radius:4px;
  background:#fff;
  box-shadow:0 0 0 4px rgba(246,197,18,.11);
  transform:rotate(45deg);
}

.kuota-group-label small{
  margin-left:auto;
  color:#69756F;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:9px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none;
}

.kuota-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(132px,.72fr) minmax(0,1.28fr);
  align-items:center;
  gap:13px;
  margin-top:9px;
  padding:12px 13px 12px 15px;
  overflow:hidden;
  border:1px solid rgba(43,46,131,.075);
  border-radius:15px;
  background:#F8FAFA;
  font-size:12px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.kuota-row::after{
  content:'';
  position:absolute;
  inset:9px auto 9px 0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:#D8A63D;
  opacity:.62;
}

.kuota-row:first-of-type{padding-top:12px;}
.kuota-row:last-child{padding-bottom:12px;border-bottom:1px solid rgba(43,46,131,.075);}

.kuota-row:hover{
  z-index:1;
  transform:translateY(-2px);
  border-color:rgba(43,46,131,.16);
  background:#fff;
  box-shadow:0 11px 24px rgba(11,37,69,.09);
}

.kuota-row.is-running{
  border-color:rgba(14,166,114,.18);
  background:linear-gradient(110deg,#EDF9F4,#F8FCFA);
}

.kuota-row.is-running::after,.kuota-row.is-available::after{background:#0EA672;}
.kuota-row.is-urgent{border-color:rgba(210,73,63,.18);background:linear-gradient(110deg,#FFF8F7,#FFF);}
.kuota-row.is-urgent::after{background:#D2493F;opacity:.78;}
.kuota-row.is-full{opacity:.7;background:#F3F4F4;}
.kuota-row.is-full::after{background:#8D9692;}
.kuota-row.is-full .kuota-open-label{color:#626B67;background:#E7EAE9;border-color:rgba(98,107,103,.12);}

.kuota-mode{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:var(--navy);
  line-height:1.3;
}

.kuota-mode::before{
  content:'';
  width:27px;
  height:27px;
  flex:0 0 auto;
  border:1px solid rgba(43,46,131,.12);
  border-radius:9px;
  background:
    linear-gradient(180deg,var(--navy) 0 7px,transparent 7px),
    radial-gradient(circle at 8px 15px,#D8A63D 2px,transparent 2.5px),
    radial-gradient(circle at 18px 15px,#0EA672 2px,transparent 2.5px),
    radial-gradient(circle at 8px 21px,#0EA672 2px,transparent 2.5px),
    radial-gradient(circle at 18px 21px,#D8A63D 2px,transparent 2.5px),
    #fff;
  box-shadow:0 5px 12px rgba(11,37,69,.08);
}

.kuota-mode-copy{display:flex;min-width:0;flex-direction:column;gap:2px;}
.kuota-mode-copy strong{color:var(--navy);font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;line-height:1.2;}
.kuota-mode-copy small{color:#68746E;font-size:9px;font-weight:700;line-height:1.35;}

.kuota-status{min-width:0;}

.kuota-status.is-live{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid rgba(14,166,114,.18);
  border-radius:999px;
  color:#087A52;
  background:#EAF8F2;
  font-size:10px;
  font-weight:800;
}

.kuota-status .dot-sm{width:6px;height:6px;}

.kuota-status.is-open{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap;
  color:var(--muted);
  white-space:normal;
  text-align:right;
  font-weight:600;
}

.kuota-open-label,
.kuota-min,
.kuota-badge{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:5px 9px;
  border-radius:999px;
  font-family:'Outfit',sans-serif;
  font-size:9.5px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}

.kuota-open-label{color:#087A52;background:#EAF8F2;border:1px solid rgba(14,166,114,.14);}
.kuota-min{color:#5C6963;background:#EEF2F0;border:1px solid rgba(93,105,99,.1);}

.kuota-badge{
  gap:6px;
  margin-left:0;
  min-height:34px;
  padding:5px 10px;
  color:#805F0C;
  background:#FFF2D7;
  border:1px solid rgba(216,166,61,.18);
  box-shadow:none;
}

.kuota-badge strong{font-size:14px;line-height:1;}
.kuota-badge span{font-size:8.5px;font-weight:800;line-height:1.15;}

.kuota-badge.kuota-urgent{color:#AD342B;background:#FFE9E7;border-color:rgba(210,73,63,.14);}
.kuota-badge.kuota-penuh{color:#626B67;background:#E7EAE9;border-color:rgba(98,107,103,.12);}

.jadwal-note{
  position:relative;
  max-width:920px;
  margin:0 auto;
  padding:16px 20px 16px 52px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:17px;
  color:#4F5E57;
  background:rgba(255,255,255,.76);
  box-shadow:0 14px 34px rgba(31,34,93,.08),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  font-size:11.5px;
  line-height:1.65;
  text-align:left;
}

.jadwal-note::before{
  content:'i';
  position:absolute;
  left:18px;
  top:50%;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(216,166,61,.32);
  border-radius:50%;
  color:#8D6B18;
  background:#FFF6DC;
  font-family:'Outfit',sans-serif;
  font-size:11px;
  font-weight:900;
}

@media(max-width:980px){
  .kuota-live{grid-template-columns:1fr;max-width:760px;}
  .kuota-live-head{grid-template-columns:1fr;align-items:start;gap:18px;}
  .kuota-live-summary{width:100%;}
}

@media(max-width:620px){
  .kuota-live{padding:18px;border-radius:25px;gap:14px;}
  .kuota-live-head{padding:0 1px 19px;}
  .kuota-live-head h3{font-size:27px;}
  .kuota-live-head p{font-size:11.5px;}
  .kuota-live-summary{gap:6px;}
  .kuota-live-summary > span{min-height:64px;padding:9px;border-radius:13px;}
  .kuota-live-summary strong{font-size:18px;}
  .kuota-live-summary small{font-size:8.5px;}
  .kuota-live-guide{grid-template-columns:1fr;gap:4px;padding:13px 14px;}
  .kuota-group{padding:15px;border-radius:19px;}
  .kuota-group-label{font-size:15px;}
  .kuota-row{grid-template-columns:1fr;gap:9px;padding:12px;}
  .kuota-row:first-of-type{padding-top:12px;}
  .kuota-row:last-child{padding-bottom:12px;}
  .kuota-status.is-live{justify-self:start;}
  .kuota-status.is-open{justify-content:flex-start;text-align:left;}
  .jadwal-note{margin-inline:2px;padding:15px 16px 15px 48px;}
  .jadwal-note::before{left:15px;}
}

@media(prefers-reduced-motion:reduce){
  .kuota-row{transition:none;}
  .kuota-row:hover{transform:none;}
}