/* ===== Generus Ciledug Connect (GCC) — tema ===== */
:root {
  /* warna diambil dari logo GP Ciledug: biru tua + oranye */
  --gcc-primary: #28245f;
  --gcc-primary-2: #3d3a8c;
  --gcc-primary-soft: #ebeaf7;
  --gcc-accent: #f7a62e;
  --gcc-accent-soft: #fff1dc;
  --gcc-bg: #f3f4fa;
  --gcc-ink: #1c1b3a;
  --gcc-muted: #6b6f86;
  --gcc-border: #e4e5f0;
  --gcc-shadow: 0 6px 24px rgba(40, 36, 95, .07);
  --bs-primary: #28245f;
  --bs-primary-rgb: 40, 36, 95;
  --bs-link-color: #3d3a8c;
  --bs-link-color-rgb: 61, 58, 140;
  --bs-link-hover-color: #28245f;
  --bs-body-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-body-color: #1c1b3a;
  --bs-border-radius: .7rem;
  --sidebar-w: 260px;
}
body { background: var(--gcc-bg); font-size: .94rem; }
.btn { border-radius: 2rem; font-weight: 600; }
.btn-sm { border-radius: 1.5rem; }
.btn-primary { --bs-btn-bg: var(--gcc-primary); --bs-btn-border-color: var(--gcc-primary); --bs-btn-hover-bg: #1d1a48; --bs-btn-hover-border-color: #1d1a48; --bs-btn-active-bg: #16143a; --bs-btn-disabled-bg: #8f8db8; --bs-btn-disabled-border-color: #8f8db8; box-shadow: 0 4px 14px rgba(40,36,95,.18); }
.btn-accent { --bs-btn-bg: var(--gcc-accent); --bs-btn-border-color: var(--gcc-accent); --bs-btn-color: #2a1c00; --bs-btn-hover-bg: #e8931a; --bs-btn-hover-border-color: #e8931a; --bs-btn-hover-color: #2a1c00; }
.input-group > .btn { border-radius: var(--bs-border-radius); }
.btn-outline-primary { --bs-btn-color: var(--gcc-primary); --bs-btn-border-color: var(--gcc-primary); --bs-btn-hover-bg: var(--gcc-primary); --bs-btn-hover-border-color: var(--gcc-primary); --bs-btn-active-bg: var(--gcc-primary); --bs-btn-active-border-color: var(--gcc-primary); }
.text-primary { color: var(--gcc-primary) !important; }
.bg-primary { background-color: var(--gcc-primary) !important; }
.bg-primary-soft { background: var(--gcc-primary-soft) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #8986c9; box-shadow: 0 0 0 .2rem rgba(61, 58, 140, .15); }
.form-control, .form-select { border-color: #dcdeeb; }
.form-check-input:checked { background-color: var(--gcc-primary); border-color: var(--gcc-primary); }
.min-w-0 { min-width: 0; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--gcc-primary); }
.page-link { color: var(--gcc-primary); }
.active > .page-link, .page-link.active { background-color: var(--gcc-primary); border-color: var(--gcc-primary); }

/* ===== Kerangka: rel ikon + tab atas + panel melengkung ===== */
html:has(> body.has-shell) { background: #221f58; }
body.has-shell { background-color: #221f58; background: radial-gradient(900px 480px at 78% -8%, rgba(247,166,46,.28), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(93,88,190,.45), transparent 60%), linear-gradient(160deg, #1b1848 0%, #262261 55%, #2f2b73 100%); background-attachment: fixed; min-height: 100vh; }
.shell { display: flex; min-height: 100vh; }
.side { width: 268px; flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px 14px 16px; color: #fff; }
.side-brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; padding: 4px 6px 18px; }
.side-brand img { width: 52px; height: 52px; object-fit: contain; background: #fff; border-radius: 14px; padding: 8px 6px; box-shadow: 0 8px 20px rgba(0,0,0,.25); flex: none; }
.side-brand strong { display: block; font-size: 1.2rem; letter-spacing: .08em; line-height: 1.1; }
.side-brand small { display: block; font-size: .72rem; opacity: .7; line-height: 1.25; }
.side-brand:hover { color: #fff; }
.side-nav { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.side-link { display: flex; align-items: center; gap: .75rem; padding: .68rem .8rem; border-radius: 14px; color: rgba(255,255,255,.82); text-decoration: none; font-weight: 600; font-size: .88rem; white-space: nowrap; cursor: pointer; list-style: none; user-select: none; transition: background .15s, color .15s; }
.side-link::-webkit-details-marker { display: none; }
.side-link > i:first-child { font-size: 1.12rem; width: 1.3rem; text-align: center; flex: none; }
.side-link .chev { margin-left: auto; font-size: .78rem; opacity: .7; transition: transform .2s; }
.side-grp[open] > .side-link .chev { transform: rotate(180deg); }
.side-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.side-link.on { background: #fff; color: var(--gcc-primary); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.side-link.on i { color: var(--gcc-primary); }
.side-link.grp-on { color: #fff; }
.side-link.grp-on > i:first-child { color: var(--gcc-accent); }
.side-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 1.45rem; padding-left: .9rem; border-left: 1.5px solid rgba(255,255,255,.14); }
.side-sub a { color: rgba(255,255,255,.66); text-decoration: none; font-size: .86rem; font-weight: 500; padding: .45rem .75rem; border-radius: 11px; transition: background .15s, color .15s; }
.side-sub a:hover { color: #fff; background: rgba(255,255,255,.07); }
.side-sub a.on { background: #fff; color: var(--gcc-primary); font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.side-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.side-stempel { background: #fff; border-radius: 14px; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.side-stempel img.ldii { height: 34px; width: auto; }
.side-stempel img.ppg { height: 22px; width: auto; }
.side-stempel .garis { width: 1px; align-self: stretch; background: #e3e4ee; }
.side-user { width: 100%; display: flex; align-items: center; gap: .65rem; background: rgba(255,255,255,.08); border: 0; border-radius: 16px; padding: .55rem .7rem; color: #fff; }
.side-user small { opacity: .65; font-size: .72rem; }
.side-user:hover { background: rgba(255,255,255,.13); }
.avatar-foto { overflow: hidden; background: #fff; }
.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 992px) { .top-tabs { visibility: hidden; } .top-title strong { font-weight: 700; } }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 18px 14px 0; }
.shell-top { display: grid; grid-template-columns: minmax(180px, auto) 1fr auto; align-items: center; gap: 1.25rem; min-height: 78px; color: #fff; padding: 0 .4rem 0 .2rem; }
.top-left { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.btn-back { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff; color: var(--gcc-primary); border: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.top-brand { display: none; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .06em; }
.top-brand img { width: 36px; height: 36px; object-fit: contain; background: #fff; border-radius: 10px; padding: 4px; }
.top-title { font-weight: 600; font-size: .95rem; opacity: .75; white-space: nowrap; }
.top-tabs { display: flex; justify-content: center; gap: 2.2rem; overflow-x: auto; scrollbar-width: none; }
.top-tabs::-webkit-scrollbar { display: none; }
.top-tabs a { position: relative; color: rgba(255,255,255,.58); text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .72rem; font-weight: 700; padding: .55rem 0; white-space: nowrap; transition: color .15s; }
.top-tabs a i { display: none; }
.top-tabs a:hover { color: #fff; }
.top-tabs a.on { color: #fff; }
.top-tabs a.on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px; background: var(--gcc-accent); }
.top-user { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.top-user small { display: block; opacity: .65; font-size: .72rem; }
.top-user:hover { color: #fff; }
.panel { flex: 1; background: var(--gcc-bg); border-radius: 34px; padding: 1.9rem 2.1rem 2.2rem; box-shadow: 0 30px 80px rgba(8,6,40,.35); min-height: calc(100vh - 110px); min-width: 0; }
.app-footer { padding: .7rem 1rem 0; font-size: .74rem; color: rgba(255,255,255,.45); text-align: center; }
.flash-wrap { position: relative; }
.public-shell .flash-wrap { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1060; width: min(520px, 92vw); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gcc-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex: none; }
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.min-w-0 { min-width: 0; }

/* navigasi bawah & menu lengkap (HP) */
.bottom-nav { display: none; }
.menu-sheet { --bs-offcanvas-height: auto; max-height: 88vh; border-radius: 28px 28px 0 0; background: var(--gcc-bg); }
.sheet-head { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gcc-muted); margin: 1rem 0 .5rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.sheet-grid a, .sheet-grid button { display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; background: #fff; border: 0; border-radius: 1.1rem; padding: .8rem .35rem; text-decoration: none; color: var(--gcc-ink); font-size: .74rem; font-weight: 600; line-height: 1.2; box-shadow: 0 4px 14px rgba(34,31,85,.06); height: 100%; }
.sheet-grid .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--gcc-primary-soft); color: var(--gcc-primary); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.sheet-grid .on { outline: 2px solid var(--gcc-primary); }
.sheet-grid .on .ic { background: var(--gcc-primary); color: #fff; }

@media (max-width: 991.98px) {
  .side { display: none; }
  .shell-main { padding: 0; }
  .shell-top { grid-template-columns: 1fr auto; grid-template-areas: "left user" "tabs tabs"; gap: .55rem .75rem; min-height: 0; padding: calc(.75rem + env(safe-area-inset-top)) 1rem .9rem; }
  .top-left { grid-area: left; }
  .top-user { grid-area: user; }
  .top-tabs { grid-area: tabs; justify-content: flex-start; gap: .45rem; margin: 0 -1rem; padding: .15rem 1rem 0; }
  .top-tabs-empty { display: none; }
  .top-tabs a { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); padding: .45rem .85rem; border-radius: 2rem; display: inline-flex; gap: .35rem; align-items: center; }
  .top-tabs a i { display: inline; }
  .top-tabs a.on { background: #fff; color: var(--gcc-primary); }
  .top-tabs a.on::after { display: none; }
  .btn-back { width: 32px; height: 32px; }
  .top-brand { display: inline-flex; }
  .top-title { display: none; }
  .panel { border-radius: 28px 28px 0 0; padding: 1.35rem .9rem 7.5rem; box-shadow: none; min-height: calc(100vh - 120px); }
  .app-footer { display: none; }
  .bottom-nav { display: flex; position: fixed; left: .7rem; right: .7rem; bottom: calc(.7rem + env(safe-area-inset-bottom)); z-index: 1025; background: #fff; border-radius: 1.6rem; box-shadow: 0 12px 34px rgba(20,18,60,.22); padding: .4rem .35rem; justify-content: space-around; }
  .bottom-nav a, .bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .64rem; color: var(--gcc-muted); text-decoration: none; background: none; border: 0; padding: .1rem 0; font-weight: 700; }
  .bottom-nav i { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: all .15s; }
  .bottom-nav .on { color: var(--gcc-primary); }
  .bottom-nav .on i { background: var(--gcc-primary); color: #fff; box-shadow: 0 6px 14px rgba(40,36,95,.3); }
  .has-shell .sticky-actions { bottom: 5.6rem; }
}
@media (max-width: 575.98px) { .panel { padding-left: .75rem; padding-right: .75rem; } }

/* ===== Komponen ===== */
.page-head { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; justify-content: space-between; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.6rem; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.page-head .sub { color: var(--gcc-muted); font-size: .88rem; margin-top: .15rem; }
.card { border: 0; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(34,31,85,.06); }
.card > .card-header:first-child { border-radius: 1.5rem 1.5rem 0 0; }
.card-header { background: transparent; border-bottom: 1px solid #eef0f7; font-weight: 700; padding: 1rem 1.25rem; }
.card-body { padding: 1.25rem; }
.stat-card { border-radius: 1.5rem; padding: 1.05rem 1.2rem; background: #fff; border: 0; height: 100%; display: flex; gap: .9rem; align-items: center; box-shadow: var(--gcc-shadow); }
.stat-icon { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex: none; }
.stat-val { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--gcc-muted); font-size: .8rem; }
.bg-soft-success { background: #e2f4ea; color: #16784a; }
.bg-soft-info { background: #e1f1fb; color: #1769a0; }
.bg-soft-warning { background: var(--gcc-accent-soft); color: #a3620a; }
.bg-soft-danger { background: #fde6e4; color: #b3261e; }
.bg-soft-primary { background: var(--gcc-primary-soft); color: var(--gcc-primary); }
.bg-soft-secondary { background: #eceff1; color: #4b5a57; }
.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .55rem .65rem; }
.table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gcc-muted); font-weight: 700; background: #f6f6fb; border-bottom-width: 1px; white-space: nowrap; }
.table-hover tbody tr:hover { --bs-table-hover-bg: #f5f5fc; }
.badge { font-weight: 600; }
.badge-soft { padding: .38em .6em; border-radius: .45rem; }
.empty { text-align: center; color: var(--gcc-muted); padding: 2.5rem 1rem; }
.empty i { font-size: 2.3rem; display: block; margin-bottom: .5rem; opacity: .5; }
.progress { height: .55rem; border-radius: 1rem; background: #eaeaf4; }
.progress-bar { background: linear-gradient(90deg, var(--gcc-primary-2), #5a57b8); }
.filter-bar { background: #fff; border: 0; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(34,31,85,.06); padding: .8rem; margin-bottom: 1rem; }
.form-label { font-weight: 600; font-size: .84rem; margin-bottom: .3rem; }
.form-text { font-size: .78rem; }

/* status absensi */
.st-btns { display: inline-flex; gap: .3rem; flex-wrap: nowrap; }
.st-btns input { display: none; }
.st-btns label { width: 38px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: .5rem; border: 1px solid var(--gcc-border); cursor: pointer; font-weight: 700; font-size: .82rem; color: var(--gcc-muted); background: #fff; user-select: none; transition: all .12s; }
.st-btns input:checked + label.st-H { background: #1f9d61; border-color: #1f9d61; color: #fff; }
.st-btns input:checked + label.st-I { background: #1f86c7; border-color: #1f86c7; color: #fff; }
.st-btns input:checked + label.st-S { background: #e0a019; border-color: #e0a019; color: #fff; }
.st-btns input:checked + label.st-A { background: #d6453b; border-color: #d6453b; color: #fff; }
.st-cell { display: inline-flex; width: 24px; height: 22px; align-items: center; justify-content: center; border-radius: .35rem; font-weight: 700; font-size: .72rem; }
.st-cell.H { background: #dff3e8; color: #16784a; }
.st-cell.I { background: #dcedf9; color: #1769a0; }
.st-cell.S { background: #fcefd2; color: #9a6004; }
.st-cell.A { background: #fbe1df; color: #b3261e; }
.st-cell.X { color: #b9c2bf; }
.row-absen { border-bottom: 1px solid var(--gcc-border); padding: .55rem .25rem; display: flex; align-items: center; gap: .75rem; }
.row-absen:last-child { border-bottom: 0; }
.row-absen .no { width: 1.8rem; color: var(--gcc-muted); font-size: .8rem; text-align: right; flex: none; }
.row-absen .nm { flex: 1; min-width: 0; font-weight: 500; }
.row-absen .nm .text-truncate { white-space: normal; }
@media (max-width: 575.98px) {
  .row-absen { flex-wrap: wrap; row-gap: .4rem; }
  .row-absen .nm { flex: 1 1 calc(100% - 4.5rem); }
  .row-absen .st-btns { width: 100%; padding-left: 2.55rem; }
  .row-absen .st-btns label { flex: 1; width: auto; height: 38px; }
}
.match-ok { background: #f3faf6; }
.match-warn { background: #fff8e6; }
.match-bad { background: #fdeceb; }
.sticky-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--gcc-border); padding: .75rem 1rem; z-index: 5; border-radius: 0 0 1.5rem 1.5rem; }
.matrix th, .matrix td { text-align: center; white-space: nowrap; }
.matrix td.nm, .matrix th.nm { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.matrix thead th.nm { background: #f6f6fb; }
.chart-box { position: relative; height: 280px; }

/* halaman publik (login/tamu) */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; padding: 18px 18px 18px 0;
  background: radial-gradient(900px 480px at 40% -8%, rgba(247,166,46,.28), transparent 60%), radial-gradient(700px 500px at -10% 110%, rgba(93,88,190,.45), transparent 60%), linear-gradient(160deg, #1b1848 0%, #262261 55%, #2f2b73 100%); }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; padding: 0; } .auth-hero { display: none !important; } .auth-panel { border-radius: 0 !important; min-height: 100vh; } }
.auth-hero { color: #fff; padding: 2.4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; left: -140px; bottom: -160px; width: 440px; height: 440px; border-radius: 50%; border: 60px solid rgba(255,255,255,.04); }
.auth-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; background: var(--gcc-bg); border-radius: 34px; box-shadow: 0 30px 80px rgba(8,6,40,.35); }
.auth-panel .auth-card { background: #fff; border-radius: 1.75rem; padding: 2.2rem 2rem; box-shadow: 0 14px 40px rgba(34,31,85,.08); }
@media (max-width: 575.98px) { .auth-panel .auth-card { padding: 1.6rem 1.25rem; } }
.auth-card { width: 100%; max-width: 440px; }
.feature-li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; }
.feature-li i { font-size: 1.2rem; background: rgba(255,255,255,.12); width: 38px; height: 38px; border-radius: .6rem; display: flex; align-items: center; justify-content: center; flex: none; }
.guest-shell { max-width: 820px; margin: 0 auto; padding: 1.25rem .9rem 3rem; }
.guest-top { background: var(--gcc-primary); color: #fff; }
.menu-tile { display: flex; gap: 1rem; align-items: center; padding: 1.1rem; border-radius: 1.15rem; box-shadow: var(--gcc-shadow); background: #fff; border: 1px solid var(--gcc-border); text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.menu-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(40,36,95,.14); color: inherit; }
.menu-tile .ic { width: 52px; height: 52px; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex: none; }

/* template munaqosah */
.pdf-stage { position: relative; display: inline-block; box-shadow: 0 4px 18px rgba(0,0,0,.12); background: #fff; }
.pdf-stage canvas { display: block; max-width: 100%; }
.pdf-field { position: absolute; border: 1.5px dashed #d6453b; background: rgba(214,69,59,.08); color: #b3261e; font-size: 11px; line-height: 1.2; padding: 0 3px; cursor: move; white-space: nowrap; transform-origin: left top; user-select: none; }
.pdf-field.sel { border-color: #28245f; background: rgba(40,36,95,.14); color: #28245f; z-index: 3; }
.pdf-field.al-center { transform: translateX(-50%); }
.pdf-field.al-right { transform: translateX(-100%); }

@media (min-width: 1200px) { .tpl-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding-right: 2px; } }

.logo-tile { background: #fff; border-radius: .8rem; padding: 4px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.logo-tile img { display: block; height: 100%; width: auto; }
.stempel-row { display: inline-flex; gap: .35rem; align-items: center; }
.stempel-row img { height: 26px; width: auto; }
.jenis-quran { background: #d7ecc6 !important; color: #2e5b16; }
.jenis-hadits { background: #ffe3a6 !important; color: #6b4a00; }
.jenis-nasehat { background: #c9d7f2 !important; color: #1d3f7a; }
.jenis-badge { display: inline-block; padding: .2em .6em; border-radius: .45rem; font-weight: 700; font-size: .78rem; }
.grid-jurnal td { padding: .25rem !important; vertical-align: middle; }
.grid-jurnal .form-control, .grid-jurnal .form-select { border-radius: .45rem; font-size: .85rem; padding: .3rem .45rem; }
.grid-jurnal select.jenis { font-weight: 700; }
.grid-nilai th, .grid-nilai td { white-space: nowrap; text-align: center; }
.grid-nilai input { width: 58px; text-align: center; padding: .2rem .25rem; font-size: .85rem; border-radius: .4rem; }
.grid-nilai td.nm, .grid-nilai th.nm { position: sticky; left: 0; background: #fff; z-index: 2; text-align: left; min-width: 180px; }
.grid-nilai thead { position: sticky; top: 0; z-index: 3; }
.grid-nilai thead th { background: #f6f6fb; }
.grid-nilai thead th.guru2 { background: #fff3dc; }
.grid-nilai thead th.nm { z-index: 4; background: #f6f6fb; }
.grid-nilai tr.table-light td { background: #eef3ea; }
.grid-nilai input.is-invalid { border-color: #b3261e; background: #fdeceb; }
.grid-nilai .hasil { font-weight: 700; background: #f6f6fb; }
.grid-nilai .guru2 { background: #fffaf1; }
.indeks-A { color: #16784a !important; } .indeks-B { color: #1769a0 !important; } .indeks-C { color: #a3620a !important; } .indeks-D { color: #b3261e !important; }
.segmen { display: inline-flex; background: #fff; border: 1px solid var(--gcc-border); border-radius: 2rem; padding: .25rem; gap: .25rem; box-shadow: var(--gcc-shadow); }
.segmen input { display: none; }
.segmen label { padding: .45rem 1.1rem; border-radius: 2rem; cursor: pointer; font-weight: 600; color: var(--gcc-muted); }
.segmen input:checked + label { background: var(--gcc-primary); color: #fff; }
.segmen input:checked + label.quran { background: #5c9c3a; }
.segmen input:checked + label.hadits { background: #e39a12; }
.segmen input:checked + label.nasehat { background: #3f63a8; }
.segmen-wrap { flex-wrap: wrap; }
@media (max-width: 575.98px) { .segmen-wrap { display: flex; } .segmen-wrap label { flex: 1; text-align: center; padding: .5rem .3rem; white-space: nowrap; font-size: .86rem; } .segmen-wrap label i { display: none; } }

/* ===== Cetak ===== */
.print-only { display: none; }
.print-head { align-items: center; gap: .9rem; border-bottom: 3px double #28245f; padding-bottom: .5rem; margin-bottom: 1rem; }
.print-head .kop-gp { height: 58px; width: auto; order: 3; margin-left: auto; }
.print-head .kop-stempel { order: 0; display: flex; align-items: center; gap: .5rem; flex: none; }
.print-head > .flex-grow-1 { order: 1; text-align: center; }
.print-head .kop-stempel img { height: 38px; width: auto; }
.print-head .kop-stempel img.ppg { height: 26px; }
@page { size: A4; margin: 12mm; }
@media print {
  body { background: #fff; font-size: 10.5pt; }
  html, body, body.has-shell { background: #fff !important; }
  .side, .shell-top, .no-print, .app-footer, .btn, .filter-bar, .flash-wrap, .bottom-nav, .menu-sheet { display: none !important; }
  .shell-main { padding: 0 !important; }
  .panel { padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; min-height: 0 !important; }
  .hero-card, .peach-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-only { display: block !important; }
  .print-only.print-head { display: flex !important; }
  .card { border: 0 !important; box-shadow: none !important; }
  .card-body { padding: 0 !important; }
  .card-header { padding: .4rem 0 !important; }
  .table { font-size: 9pt; }
  .table > :not(caption) > * > * { padding: .2rem .35rem; }
  .table thead th { background: #eee !important; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .st-cell, .badge, .progress-bar, .bg-soft-success, .bg-soft-danger { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .page-break { page-break-before: always; }
  .avoid-break { page-break-inside: avoid; }
  .table-responsive { overflow: visible !important; }
  .matrix td.nm, .matrix th.nm { position: static; }
  a { text-decoration: none; color: inherit; }
  .chart-box { height: 230px; }
  .print-landscape { }
}

/* ===== Komponen beranda (gaya kartu besar) ===== */
.hero-card { position: relative; overflow: hidden; border-radius: 1.9rem; padding: 1.7rem 1.9rem; color: #fff; min-height: 250px;
  background: radial-gradient(420px 260px at 88% 20%, rgba(255,214,170,.55), transparent 65%), linear-gradient(118deg, #26225d 0%, #3b378a 42%, #7d73bd 74%, #e9b98f 100%); box-shadow: 0 18px 40px rgba(40,36,95,.25); }
.hero-card .hero-lbl { font-weight: 600; opacity: .85; }
.hero-num { font-size: 4.3rem; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: .55rem 0 1.1rem; }
.hero-num small { font-size: 2rem; opacity: .8; margin-left: .15rem; }
.hero-mini { display: flex; gap: .65rem; align-items: center; }
.hero-mini i { width: 38px; height: 38px; border-radius: .8rem; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.hero-mini strong { font-size: 1.15rem; }
.hero-art { position: absolute; right: 3%; bottom: 0; height: 94%; max-width: 46%; pointer-events: none; }
.hero-cta { position: absolute; right: 0; bottom: 0; background: #1d1a4c; color: #fff; text-decoration: none; padding: 1.05rem 1.5rem; border-top-left-radius: 1.6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; display: inline-flex; gap: .6rem; align-items: center; }
.hero-cta:hover { color: #fff; background: #151238; }
@media (max-width: 767.98px) { .hero-art { top: 1rem; bottom: auto; right: 1rem; height: 110px; max-width: 45%; } .hero-num { font-size: 3.4rem; } .hero-card { padding-bottom: 4.6rem; } .hero-card .d-flex.flex-column { flex-direction: row !important; flex-wrap: wrap; max-width: none !important; } }
.peach-card { border-radius: 1.9rem; padding: 1.6rem 1.7rem; background: linear-gradient(160deg, #fde9d6 0%, #f9d9bf 100%); color: #2b2240; height: 100%; display: flex; flex-direction: column; box-shadow: 0 14px 34px rgba(227,154,18,.12); }
.peach-card .big { font-size: 4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.peach-card .big sup { font-size: .8rem; background: #fff; border-radius: 1rem; padding: .15rem .45rem; top: -2.2em; font-weight: 700; letter-spacing: 0; }
.peach-strip { margin-top: auto; background: #fff; border-radius: 1.2rem; padding: .8rem .9rem; display: flex; align-items: center; gap: .75rem; font-size: .8rem; text-decoration: none; color: inherit; box-shadow: 0 6px 16px rgba(0,0,0,.05); }
.peach-strip:hover { color: inherit; }
.peach-strip .go { margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--gcc-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.gauge { width: 150px; height: 88px; }
.sec-title { font-weight: 800; font-size: 1.02rem; margin-bottom: .8rem; }
.soft-card { background: #fff; border-radius: 1.6rem; padding: 1.3rem 1.35rem; height: 100%; box-shadow: 0 10px 30px rgba(34,31,85,.06); }
.bars { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; height: 150px; padding-top: .5rem; }
.bars .col-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; height: 100%; }
.bars .track { flex: 1; width: 12px; border-radius: 8px; background: #eceef8; position: relative; overflow: hidden; }
.bars .fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: linear-gradient(180deg, #5a55b8, var(--gcc-primary)); }
.bars .col-bar.now .fill { background: linear-gradient(180deg, #ffc46b, var(--gcc-accent)); }
.bars .lbl { font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--gcc-muted); text-transform: uppercase; }
.bars .val { font-size: .68rem; font-weight: 700; color: var(--gcc-ink); }
.person-row { display: flex; align-items: center; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid #f0f1f8; }
.person-row:last-child { border-bottom: 0; }
.person-row .avatar { width: 42px; height: 42px; border-radius: 50%; }
.score-pill { margin-left: auto; font-weight: 800; font-size: .82rem; padding: .35rem .6rem; border-radius: .7rem; background: #fff0e3; color: #d9771f; }
.score-pill.alt { background: #e9f2fb; color: #2a6fb0; }
.kelas-tile { border-radius: 1.3rem; background: var(--gcc-bg); padding: .9rem 1rem; margin-bottom: .6rem; }
.kelas-tile:last-child { margin-bottom: 0; }
.date-chip { width: 48px; flex: none; text-align: center; border-radius: 1rem; background: var(--gcc-primary-soft); color: var(--gcc-primary); padding: .35rem 0; line-height: 1.1; }
.date-chip b { display: block; font-size: 1.15rem; }
.date-chip small { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.today-alert { border-radius: 1.3rem; border: 0; }
.matrix tr.sub-head th { font-size: .64rem; text-transform: none; letter-spacing: 0; color: var(--gcc-primary); background: #eef0fa; font-weight: 700; }
.matrix td.sel-bulan { line-height: 1.15; }

/* login */
.hero-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.12); border-radius: 2rem; padding: .35rem .85rem; margin-bottom: 1rem; }
.hero-title { font-weight: 800; font-size: 3.1rem; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 1.1rem; }
.hero-title span { color: var(--gcc-accent); }
.mrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) 3.2rem; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid #f0f1f8; }
.mrow:last-child { border-bottom: 0; }
.mrow-pct { text-align: right; white-space: nowrap; }
@media (max-width: 575.98px) { .mrow { grid-template-columns: minmax(0, 1fr) 64px 3.3rem; gap: .5rem; } }
.matrix td.kolom-ini, .matrix th.kolom-ini { background: #fff8ec; }
.tabel-ceklis td.sudah { color: #16784a; font-size: 1.05rem; }
.tabel-ceklis td.sudah i { font-weight: 700; }
@media print { .matrix td.kolom-ini, .matrix th.kolom-ini { background: transparent !important; } .tabel-ceklis td.sudah { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.ttd-ruang { height: 70px; display: flex; align-items: center; justify-content: center; }
.ttd-ruang img { max-height: 70px; max-width: 200px; object-fit: contain; }
.ttd-pad { border: 1.5px dashed #c9cbe0; border-radius: 1rem; background: #fff; width: 100%; height: 150px; touch-action: none; cursor: crosshair; display: block; }
.giliran-chip { display: inline-flex; align-items: baseline; gap: .35rem; background: var(--gcc-primary-soft); color: var(--gcc-primary); border-radius: 2rem; padding: .35rem .8rem; font-size: .82rem; }
.giliran-chip span { font-weight: 800; }
.giliran-chip small { opacity: .7; }
.giliran-chip.pen { background: #dfe7f7; color: #1d3f7a; }
.giliran-chip.nol { opacity: .55; }
.grid-jurnal.excel { border-color: #d7d9e6; }
.grid-jurnal.excel td { padding: 0 !important; }
.grid-jurnal.excel td:first-child, .grid-jurnal.excel td:nth-child(3) { padding: .3rem !important; background: #f6f6fb; font-size: .8rem; }
.grid-jurnal.excel .form-control, .grid-jurnal.excel .form-select { border: 0; border-radius: 0; background-color: transparent; min-height: 38px; box-shadow: none; }
.grid-jurnal.excel .form-control:focus, .grid-jurnal.excel .form-select:focus { outline: 2px solid var(--gcc-primary-2); outline-offset: -2px; background-color: #fff; box-shadow: none; }
.grid-jurnal.excel select.jenis-quran, .grid-jurnal.excel select.jenis-hadits, .grid-jurnal.excel select.jenis-nasehat { background-color: inherit; }
.grid-jurnal.excel td:has(select.jenis-quran) { background: #d7ecc6; }
.grid-jurnal.excel td:has(select.jenis-hadits) { background: #ffe3a6; }
.grid-jurnal.excel td:has(select.jenis-nasehat) { background: #c9d7f2; }
.grid-jurnal.excel td .small.text-muted { padding: 0 .5rem .2rem; }
.grid-jurnal.excel thead th { background: #eef0fa; }

.stat-val.rp { font-size: 1.2rem; white-space: nowrap; }

/* ===== Rev 4: Pusat Bantuan ===== */
.bantuan-list .accordion-item { border: 0; border-radius: 1.1rem !important; margin-bottom: .6rem; overflow: hidden; box-shadow: 0 6px 18px rgba(34,31,85,.05); }
.bantuan-list .accordion-button { font-weight: 600; font-size: .92rem; }
.bantuan-list .accordion-button:not(.collapsed) { background: var(--gcc-primary-soft); color: var(--gcc-primary); box-shadow: none; }
.chat-wrap { display: flex; flex-direction: column; gap: .8rem; }
.chat-msg { max-width: 85%; }
.chat-msg.admin { align-self: flex-end; text-align: right; }
.chat-meta { font-size: .72rem; color: var(--gcc-muted); margin-bottom: .2rem; }
.chat-bubble { display: inline-block; text-align: left; background: #fff; border-radius: 1.1rem 1.1rem 1.1rem .3rem; padding: .7rem 1rem; white-space: pre-wrap; box-shadow: 0 6px 18px rgba(34,31,85,.06); }
.chat-msg.admin .chat-bubble { background: var(--gcc-primary); color: #fff; border-radius: 1.1rem 1.1rem .3rem 1.1rem; }

/* ===== Rev 4: kelas digabung ===== */
.gabung-box { background: #f6f6fb; border-radius: 1rem; padding: .7rem .9rem; }
.gabung-box summary { cursor: pointer; list-style: none; }
.gabung-box summary::-webkit-details-marker { display: none; }
.grup-kelas-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; background: var(--gcc-primary-soft); color: var(--gcc-primary); font-weight: 700; padding: .6rem 1.25rem; margin-top: .75rem; }

/* ===== Rev 4: rencana vs realisasi, target vs realisasi, buku kas ===== */
.tabel-rencana td { vertical-align: top; }
.tabel-rencana .th-rencana { background: #eef0fb !important; }
.tabel-rencana .th-real { background: #e6f5ee !important; }
.tabel-rencana tr.baris-gagal td { background: #fff6f5; }
.tabel-target th { vertical-align: middle; font-size: .7rem; letter-spacing: .02em; color: #1f2340; white-space: normal; }
.tabel-target th.tg-target { background: #dbe7fb !important; }
.tabel-target th.tg-real { background: #d9f2e3 !important; }
.tabel-target th.tg-jml { background: #fdeccc !important; }
.tabel-target th.tg-st { background: #f4dede !important; }
.tabel-target td { font-size: .86rem; }
.tabel-target.mode-ubah .sel-materi { min-width: 150px; }
.tabel-target.mode-ubah .inp-pos { width: 64px; }
.tabel-target.mode-ubah .inp-hal { width: 64px; flex: none; }
.tabel-kas td { font-variant-numeric: tabular-nums; }
@media print {
  .tabel-target th, .tabel-rencana th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tabel-target td, .tabel-target th { font-size: 9pt; padding: 3px 5px !important; }
}

/* ===== Rev 4: ruang lega di HP (tidak mepet) ===== */
.card + .card, .row + .card, .card + .sec-title, .row + .sec-title, .alert + .card { margin-top: 1rem; }
.card + .row, .alert + .row, .filter-bar + .row { margin-top: 0; }
/* judul bagian + kartu setinggi kolom: kartu mengisi sisa tinggi, tidak menumpuk ke baris berikutnya */
[class*="col"]:has(> .sec-title + .soft-card), [class*="col"]:has(> .sec-title + .card.h-100), [class*="col"]:has(> .sec-title + .peach-card) { display: flex; flex-direction: column; }
[class*="col"] > .sec-title + .soft-card, [class*="col"] > .sec-title + .card.h-100, [class*="col"] > .sec-title + .peach-card { height: auto !important; flex: 1 1 auto; }
.calon-box { max-height: 300px; overflow: auto; }
.sec-title { margin-bottom: .75rem; }
.today-alert { margin-bottom: .9rem; }
.list-group-item { padding: .8rem 1.1rem; }
@media (max-width: 991.98px) {
  .panel { padding: 1.6rem 1.15rem 8rem; }
  .page-head { gap: 1rem; margin-bottom: 1.4rem; }
  .page-head h1 { font-size: 1.4rem; line-height: 1.25; }
  .page-head .sub { font-size: .86rem; line-height: 1.5; margin-top: .35rem; }
  .filter-bar { padding: 1rem; margin-bottom: 1.25rem; border-radius: 1.25rem; }
  .card { border-radius: 1.25rem; }
  .card > .card-header:first-child { border-radius: 1.25rem 1.25rem 0 0; }
  .card-header { padding: 1rem 1.1rem; }
  .card-body { padding: 1.15rem 1.1rem; }
  .row.g-3 { --bs-gutter-y: 1rem; }
  .row.g-2 { --bs-gutter-y: .85rem; }
  .form-label { margin-bottom: .4rem; }
  .btn { padding-top: .5rem; padding-bottom: .5rem; }
  .btn-sm { padding-top: .35rem; padding-bottom: .35rem; }
  .alert { padding: .9rem 1rem; border-radius: 1rem; }
  .table > :not(caption) > * > * { padding: .65rem .7rem; }
  .sticky-actions { padding: .85rem 1rem; }
  .row-absen { padding: .8rem .35rem; }
}
@media (max-width: 575.98px) {
  .panel { padding-left: 1rem; padding-right: 1rem; }
  .page-head > .d-flex { width: 100%; }
  .page-head > .d-flex > .btn, .page-head > .d-flex > a.btn, .page-head > a.btn { flex: 1 1 auto; }
  .page-head > .d-flex > .btn-group { flex: 1 1 100%; }
  .page-head > .d-flex > .btn-group > .btn { flex: 1; }
  .stat-card { flex-direction: column; align-items: flex-start; gap: .65rem; padding: 1rem 1.05rem; }
  .stat-icon { width: 40px; height: 40px; font-size: 1.15rem; }
  .stat-val { font-size: 1.35rem; }
  .stat-val.rp { font-size: 1.05rem; }
  .filter-bar .btn-sm { padding: .4rem .7rem; }
  .card-footer { padding: .9rem 1.1rem; }
}
@media (max-width: 575.98px) { .stat-card.stat-row { flex-direction: row; align-items: center; } }
.tabel-rencana .jenis-badge { white-space: nowrap; }
.tabel-rencana td:nth-child(4), .tabel-rencana td:nth-child(7) { min-width: 180px; }
.tabel-rencana td:nth-child(3), .tabel-rencana td:nth-child(6) { min-width: 110px; }
/* layar laptop pendek: sembunyikan stempel logo di menu samping agar semua menu terlihat */
@media (min-width: 992px) and (max-height: 760px) { .side-stempel { display: none !important; } }

/* ===== Rev 6: lembar kotak pencapaian siswa ===== */
.mrow-lembar { grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) 3.2rem 2.4rem; cursor: pointer; }
@media (max-width: 575.98px) { .mrow-lembar { grid-template-columns: minmax(0, 1fr) 56px 3.1rem 2.3rem; } }
.lembar { background: #f7f7fc; border-radius: 1rem; padding: .75rem; margin: .25rem 0 .75rem; }
.lembar-head { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-bottom: .6rem; }
.lembar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lembar-grid .sel { height: 38px; border-radius: 8px; border: 1px solid #d9dbea; background: #fff; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 600; color: #6b6f86; font-variant-numeric: tabular-nums; }
.lembar-grid.bisa .sel { cursor: pointer; }
.lembar-grid .sel[data-v="1"] { background: var(--gcc-primary); border-color: var(--gcc-primary); color: #fff; }
.lembar-grid .sel[data-v="2"] { background: linear-gradient(135deg, var(--gcc-primary) 0 50%, #fff 50% 100%); border-color: var(--gcc-primary); color: #221f58; text-shadow: 0 0 3px #fff, 0 0 2px #fff; }
.lembar-grid.melukis .sel { transition: none; }
@media (max-width: 575.98px) { .lembar { padding: .6rem; margin-left: -.35rem; margin-right: -.35rem; } .lembar-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; } .lembar-grid .sel { height: 42px; font-size: .8rem; } }
/* Rev 6: tanda khusus tingkat akhir jenjang (3 SMP / 3 SMA) */
.badge-akhir { background: #fff1d6; color: #8a5300; border: 1px solid #f0c36b; font-weight: 700; }

/* ===== Rev 6: cetakan berisi materi lebih ringkas (hemat kertas, tetap mudah dibaca) ===== */
@media print {
  body { font-size: 9.5pt; }
  .table { font-size: 8.5pt; }
  .table > :not(caption) > * > * { padding: .12rem .3rem; }
  .table .small, .table small { font-size: 7.8pt; }
  .card, .card.mb-3, .card.mb-4 { margin-bottom: 2.5mm !important; }
  .card-header { padding: .15rem 0 !important; font-size: 9.5pt; }
  .card + .card, .row + .card { margin-top: 2mm !important; }
  .print-head { margin-bottom: 2mm !important; }
  .progress { height: 5px !important; }
  .jenis-badge { padding: 0 .3rem !important; font-size: 7.5pt !important; }
  .stat-card { padding: .3rem .5rem !important; min-height: 0 !important; box-shadow: none !important; border: 1px solid #ddd; }
  .stat-card .stat-icon { width: 22px !important; height: 22px !important; font-size: .7rem !important; }
  .stat-card .stat-val { font-size: 11pt !important; }
  .stat-card .stat-label { font-size: 7.5pt !important; }
  .row.g-2, .row.g-3 { --bs-gutter-y: 2mm; --bs-gutter-x: 3mm; }
  .mb-3 { margin-bottom: 2.5mm !important; }
  /* baris materi (pencapaian siswa): dua kolom, rapat */
  .m-daftar { columns: 2; column-gap: 7mm; }
  .m-daftar > .m-item, .m-daftar > .mrow { break-inside: avoid; }
  .mrow, .mrow-lembar { grid-template-columns: minmax(0, 1fr) 20mm 11mm !important; gap: 2mm !important; padding: .5mm 0 !important; font-size: 8.5pt; border-bottom: .5px solid #e5e5e5; }
  .mrow .small { font-size: 7.3pt; }
  .mrow .text-truncate { white-space: normal; }
  .kartu-materi .card-header { break-after: avoid; }
  .ringkas-cetak .hero-card { min-height: 0 !important; padding: 2.5mm 4mm !important; border-radius: 3mm !important; }
  .ringkas-cetak .hero-num { font-size: 18pt !important; margin: .5mm 0 1mm !important; }
  .ringkas-cetak .hero-num small { font-size: 10pt !important; }
  .ringkas-cetak .hero-mini { font-size: 8pt; }
  .ringkas-cetak .hero-mini i { display: none; }
  .ringkas-cetak .card-body { padding: 1mm 0 !important; font-size: 8.5pt; }
  .ringkas-cetak .stat-icon { display: none !important; }
  .ringkas-cetak .stat-val { font-size: 12pt !important; }
  .ringkas-cetak > [class*="col"] { flex: 0 0 33.333%; max-width: 33.333%; }
  .riwayat-cetak { columns: 2; column-gap: 7mm; display: block !important; }
  .riwayat-cetak .list-group-item { break-inside: avoid; padding: .6mm 0 !important; font-size: 8.3pt; border-width: 0 0 .5px !important; }
  .riwayat-cetak .list-group-item .small { font-size: 7.3pt; }
  .list-group-item { padding: .6mm 0 !important; }
  h2.h5, .h5 { font-size: 11pt !important; margin-bottom: 1.5mm !important; }
}

/* ===== Rev 7: pencapaian siswa — tabel ringkas + lembar per baris ===== */
.capai-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.capai-ringkas .cr-item { background: #fff; border-radius: 1.1rem; padding: .7rem 1rem; box-shadow: 0 6px 18px rgba(34,31,85,.05); }
.capai-ringkas .cr-utama { background: linear-gradient(118deg, #26225d 0%, #3b378a 55%, #7d73bd 100%); color: #fff; }
.capai-ringkas .cr-lbl { font-size: .78rem; opacity: .8; }
.capai-ringkas .cr-val { font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.capai-ringkas .cr-sub { font-size: .72rem; color: var(--gcc-muted, #6c6f86); }
@media (max-width: 575.98px) { .capai-ringkas { gap: .4rem; } .capai-ringkas .cr-item { padding: .55rem .6rem; } .capai-ringkas .cr-val { font-size: 1.1rem; } .capai-ringkas .cr-sub { font-size: .66rem; } }
.tabel-capai tr.m-item { cursor: pointer; }
.tabel-capai tr.m-item:hover td { background: #f7f7fc; }
.tabel-capai tr.m-item.terbuka td { background: var(--gcc-primary-soft, #ecebfa); }
.tabel-capai tr.m-item:not(.mulai) .fw-semibold { font-weight: 500 !important; color: #55586e; }
.tabel-capai .progress { height: 7px; }
.tabel-capai .lembar-row > td { background: #fbfbfe; padding: .4rem .5rem .8rem !important; }
.tabel-capai tfoot td { border-top: 2px solid #d7d9e6; background: #f6f6fb; }
@media (max-width: 575.98px) { .tabel-capai th:nth-child(5), .tabel-capai td:nth-child(5) { min-width: 96px !important; } .tabel-capai .progress { display: none; } }
/* lembar cetak (satu siswa per halaman) */
.cetak-capaian { font-size: 9pt; }
.cetak-capaian .cc-head { display: flex !important; align-items: center; gap: 4mm; margin-bottom: 2mm; }
.cc-ringkas { width: 100%; border-collapse: collapse; margin: 0 0 2.5mm; font-size: 9pt; }
.cc-ringkas td { border: .5px solid #bbb; padding: 1mm 2mm; }
.cc-ringkas td:nth-child(odd) { background: #f1f1f6; font-weight: 600; width: 12%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cc-ringkas span { color: #555; font-size: 8pt; }
.cc-grup { margin-bottom: 3mm; break-inside: auto; }
.cc-judul { font-weight: 700; font-size: 9.5pt; margin: 0 0 1mm; display: flex; align-items: center; gap: 2mm; break-after: avoid; }
.cc-judul .cc-total { margin-left: auto; font-weight: 400; font-size: 8.5pt; }
.cc-kolom { display: flex; gap: 4mm; align-items: flex-start; }
.cc-tabel { flex: 1 1 0; width: 100%; border-collapse: collapse; font-size: 8.3pt; }
.cc-tabel th { background: #e9e9f2; border: .5px solid #999; padding: .6mm 1.5mm; font-weight: 700; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cc-tabel td { border: .5px solid #bbb; padding: .4mm 1.5mm; text-align: center; }
.cc-tabel td.text-start, .cc-tabel th.text-start { text-align: left; }
.cc-tabel tr.nol td { color: #888; }
.cc-tabel tr { break-inside: avoid; }
.cetak-banyak .cetak-capaian + .cetak-capaian { break-before: page; page-break-before: always; }
@media screen { .cetak-banyak .cetak-capaian { background: #fff; padding: 12mm; margin: 0 auto 1rem; max-width: 210mm; border-radius: 1rem; box-shadow: 0 6px 18px rgba(34,31,85,.06); } }
.cc-tabel td.text-start { white-space: nowrap; }
.cc-tabel th:first-child, .cc-tabel td:first-child { width: 7mm; }
.cc-tabel th:nth-child(n+3), .cc-tabel td:nth-child(n+3) { width: 15mm; }
.cc-tabel { font-size: 7.8pt; line-height: 1.25; }
.cc-tabel td { padding: .15mm 1.3mm; }
.cc-tabel th { padding: .4mm 1.3mm; }
.cetak-capaian .cc-head { margin-bottom: 1.5mm; }
.cetak-capaian .cc-head img { max-height: 13mm !important; width: auto; }
.cetak-capaian .cc-head .fs-5 { font-size: 12pt !important; }
.cetak-capaian .cc-ringkas { margin-bottom: 1.5mm; }
.cetak-capaian .cc-grup { margin-bottom: 2mm; }
.tabel-capai .th-pct { min-width: 150px; }
@media (max-width: 575.98px) {
  .tabel-capai th:first-child, .tabel-capai tr.m-item td:first-child, .tabel-capai tfoot td:first-child,
  .tabel-capai th:nth-child(3), .tabel-capai td.c-target, .tabel-capai tfoot td.f-target { display: none; }
  .tabel-capai .th-pct { min-width: 0; }
  .tabel-capai th, .tabel-capai td { padding-left: .35rem !important; padding-right: .35rem !important; }
  .tabel-capai th:nth-child(5), .tabel-capai td:nth-child(5) { min-width: 0 !important; }
  .tabel-capai .mrow-pct { min-width: 0 !important; }
  .tabel-capai .lembar-row > td { padding: .3rem .2rem .6rem !important; }
}

/* ===== Rev 7: input nilai munaqosah — geser samping & cek ulang ===== */
.kartu-grid { overflow: visible; }
.rail-x { position: sticky; top: 0; z-index: 6; overflow-x: auto; overflow-y: hidden; height: 16px; background: #f1f1f8; border-radius: 1rem 1rem 0 0; }
.rail-x > div { height: 1px; }
.rail-x::-webkit-scrollbar { height: 12px; }
.rail-x::-webkit-scrollbar-thumb { background: #b9bbd6; border-radius: 8px; }
.wrap-grid { max-height: calc(100vh - 150px); }
.grid-nilai input.kurang { border-color: #e0a100; background: #fff6d8; box-shadow: 0 0 0 2px rgba(224,161,0,.25); }
.cek-ulang .card-header.ada-kurang { background: #fff6d8; }
.cek-chip { display: inline-block; padding: .2rem .55rem; border-radius: 2rem; text-decoration: none; font-size: .78rem; }
.cek-chip.kurang { background: #fff1c6; color: #7a5200; }
.cek-chip.kosong { background: #eef0f6; color: #555a70; }
@media (max-width: 767.98px) { .wrap-grid { max-height: calc(100vh - 120px); } }
.jenis-kemandirian { background: #d9efe9 !important; color: #145a4a; }
.grid-jurnal.excel td:has(select.jenis-kemandirian) { background: #d9efe9; }
/* Rev 7: pola jadwal per hari */
.pola-hari { display: grid; grid-template-columns: 7.5rem 6.5rem minmax(0, 1fr); gap: .5rem; align-items: start; padding: .5rem 0; border-bottom: 1px solid #eef0f6; }
.pola-hari:not(.aktif) { opacity: .65; }
.pola-nama { font-weight: 600; display: flex; gap: .4rem; align-items: center; padding-top: .25rem; }
.pola-jml { display: flex; gap: .3rem; align-items: center; }
.pola-jml select { width: 4rem; }
.pola-sesi { display: flex; flex-direction: column; gap: .3rem; }
.pola-s { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) 7.5rem; gap: .3rem; align-items: center; }
@media (max-width: 575.98px) { .pola-hari { grid-template-columns: 1fr 5.5rem; } .pola-sesi { grid-column: 1 / -1; } .pola-s { grid-template-columns: 1.6rem minmax(0, 1fr) 6.8rem; } }
/* Rev 7: lembar absensi manual */
.lembar-manual { background: #fff; border-radius: 1.2rem; padding: 1rem; margin-bottom: 1rem; }
.lm-head { display: flex !important; align-items: center; gap: 4mm; margin-bottom: 2mm; }
.lm-head img { max-height: 14mm; width: auto; }
.lm-tabel { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.lm-tabel th, .lm-tabel td { border: .6px solid #777; padding: .5mm 1mm; text-align: center; height: 6.2mm; }
.lm-tabel th { background: #eeeef5; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lm-tabel .lm-nama { text-align: left; min-width: 48mm; white-space: nowrap; }
.lm-tabel .lm-no { width: 7mm; }
.lm-tabel .lm-tgl { min-width: 7.5mm; font-size: 7.5pt; line-height: 1.1; }
.lm-tabel .lm-tgl div { font-weight: 400; font-size: 6.5pt; }
.lm-tabel .lm-j { color: #555; }
.lm-tabel .lm-jml { width: 7mm; }
@media print { .lembar-manual { padding: 0; margin: 0; border-radius: 0; } }
.lm-tabel td { height: 5.3mm; padding: 0 1mm; }
.lembar-manual .ttd-ruang { height: 48px; }
@media print { .lembar-manual > .row.mt-4 { margin-top: 2mm !important; } }
@media screen { .cetak-banyak .cetak-capaian { overflow-x: auto; max-width: 100%; } .lembar-manual { overflow-x: auto; max-width: 100%; } }
@media screen and (max-width: 575.98px) { .cetak-banyak .cetak-capaian { padding: 1rem .6rem; } .lm-head, .cetak-capaian .cc-head { flex-wrap: wrap; } }
/* Rev 7: lembar absensi manual muat 1 lembar */
.lm-tabel { font-size: var(--lm-huruf, 8.5pt); }
.lm-tabel td { height: var(--lm-baris, 6.2mm) !important; padding: 0 1mm !important; line-height: 1.1; }
@media print { .lembar-manual .lm-head { margin-bottom: 1.5mm; } .lembar-manual .lm-head img { max-height: 12mm !important; } .lembar-manual { break-inside: auto; } .lembar-manual .small { font-size: 7.5pt; margin-top: .5mm !important; } }
/* Rev 7: baris pengajar (diisi tangan) di lembar absensi manual */
.lm-tabel tr.lm-pengajar th, .lm-tabel tr.lm-pengajar td { height: 12mm !important; background: #fff; }
.lm-tabel tr.lm-pengajar th { text-align: right; vertical-align: middle; font-size: 8pt; }
.lm-tabel tr.lm-pengajar th span { display: block; font-weight: 400; font-size: 6.5pt; color: #555; }
/* Rev 8: kop dengan daftar logo */
.print-head .kop-kanan { order: 3; margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
.print-head .kop-kanan img, .print-head .kop-stempel img { width: auto; max-width: 140px; object-fit: contain; }

/* Rev 9: baris jurnal yang diliburkan */
.baris-libur > td { background: repeating-linear-gradient(135deg, #f4f4f8 0 6px, #fafafc 6px 12px) !important; color: #6c6f86; }
a[data-tanpa-akses]{pointer-events:none;color:inherit;text-decoration:none;cursor:default}