/* SIAP! SPMB PKBM Pena Hikmah - stylesheet eksternal */

body { background-color: #f9fafb; letter-spacing: -0.01em;}

        .odoo-highlight { position: relative; display: inline-block; z-index: 1; white-space: nowrap; }

        .odoo-highlight::after { content: ''; position: absolute; left: -2%; bottom: 8%; width: 104%; height: 40%; background-color: #f7cb2d; z-index: -1; transform: rotate(-1deg) skewX(-10deg); border-radius: 3px; }

        .glass-panel { background: rgba(255, 255, 255, 1); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 20px 40px -15px rgba(18, 46, 118, 0.08); }

        ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #122e76; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #0c1e4d; }

        .view-section { display: none; opacity: 0; transition: opacity 0.3s ease-in; } .view-section.active { display: block; opacity: 1; }

        .step-indicator.active { background-color: #f7cb2d; color: #122e76; border-color: #f7cb2d;} .step-indicator.completed { background-color: #122e76; color: white; border-color: #122e76;}

        .loader { border: 4px solid #f3f3f3; border-top: 4px solid #122e76; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        .progress-line-container { position: relative; } .progress-line { position: absolute; top: 18px; left: 15px; right: 15px; height: 4px; background-color: #e2e8f0; z-index: 0; } .progress-line-fill { position: absolute; top: 0; left: 0; height: 100%; background-color: #122e76; transition: width 0.3s; }

        .btn-odoo { border-radius: 0.5rem; font-weight: 700; transition: all 0.2s ease; } .btn-odoo:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .btn-odoo:disabled { opacity: 0.5; cursor: not-allowed; }

        details > summary { list-style: none; }

        details > summary::-webkit-details-marker { display: none; }



canvas#pakta_signature { touch-action: none; }

canvas#pakta_signature.pakta-export-clean { border-color: transparent !important; box-shadow: none !important; outline: 0 !important; }

#hero-school-year { user-select: none; }



.pakta-commitment-list {

    list-style: none;

    margin: 8px 0 0;

    padding: 0;

    counter-reset: paktaitem;

}

.pakta-commitment-list li {

    counter-increment: paktaitem;

    position: relative;

    padding-left: 24px;

    margin-top: 6px;

    line-height: 1.55;

}

.pakta-commitment-list li::before {

    content: counter(paktaitem) ".";

    position: absolute;

    left: 0;

    top: 0;

    width: 18px;

    text-align: right;

    font-weight: 700;

}





/* Peta GPS Pakta Integritas

   Dibuat menyerupai foto geotagging: ada kotak forensik digital dan cuplikan peta jalan/satelit kecil.

   Peta utama diisi data URL dari backend Apps Script. Jika backend belum dideploy atau server peta gagal,

   JavaScript membuat fallback SVG lokal yang tetap terlihat seperti peta, bukan pola dekoratif. */

.pakta-geo-stack {

    width: 100%;

}

.pakta-forensics-box {

    border: 1px solid #d1d5db;

    background: #f9fafb;

    border-radius: 3px;

    padding: 8px 9px;

    color: #111827;

    box-shadow: 0 0 0 1px rgba(0,0,0,.025), 0 2px 6px rgba(0,0,0,.05);

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

.pakta-forensics-title {

    font-weight: 900;

    font-size: 8px;

    letter-spacing: .06em;

    color: #374151;

    margin-bottom: 6px;

    text-transform: uppercase;

}

.pakta-forensics-row {

    display: grid;

    grid-template-columns: 62px 1fr;

    gap: 5px;

    align-items: start;

    font-size: 7.4px;

    line-height: 1.35;

    margin-top: 3px;

}

.pakta-forensics-row span {

    color: #6b7280;

    font-weight: 800;

    position: relative;

}

.pakta-forensics-row span::after {

    content: ':';

    position: absolute;

    right: -2px;

}

.pakta-forensics-row b {

    color: #111827;

    font-weight: 800;

    word-break: break-word;

}

.pakta-map-box {

    position: relative;

    height: 84px;

    border-radius: 3px;

    border: 1px solid #c7ced8;

    overflow: hidden;

    background: #d7e1e8;

    box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.06);

}

.pakta-map-img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 1;

    background: #d7e1e8;

}

.pakta-map-source {

    position: absolute;

    top: 4px;

    right: 4px;

    z-index: 4;

    padding: 2px 4px;

    border-radius: 3px;

    background: rgba(255,255,255,.9);

    color: #374151;

    font-size: 6.5px;

    font-weight: 900;

    letter-spacing: .02em;

}

.pakta-map-coord {

    position: absolute;

    left: 4px;

    right: 4px;

    bottom: 4px;

    z-index: 4;

    padding: 3px 5px;

    border-radius: 3px;

    background: rgba(255,255,255,.92);

    color: #111827;

    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    font-size: 6.8px;

    line-height: 1.18;

    border: 1px solid rgba(17,24,39,.12);

}



/* ===== V20: Pakta tanpa QR, layout lebih rapi ===== */

.pakta-digital-seal .fa-shield-check,

.pakta-digital-seal .fa-shield-alt {

    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));

}

#pakta-content {

    color: #111827;

}

#pakta-content table td {

    vertical-align: top;

}

#pakta_doc_id {

    letter-spacing: .02em;

}

#pakta_tte_status {

    line-height: 1.35;

}

#statusResignedBanner {

    position: relative;

    overflow: hidden;

}

#statusResignedBanner::after {

    content: "MENGUNDURKAN DIRI";

    position: absolute;

    right: -28px;

    bottom: 8px;

    font-size: 44px;

    font-weight: 900;

    letter-spacing: .08em;

    opacity: .08;

    transform: rotate(-8deg);

}

#statusNoticeCard #statusNoticeText {

    font-size: .95rem;

}

#announcementModal #announcementText {

    font-size: 1rem;

}

canvas#pakta_signature.pakta-export-clean {

    border-color: transparent !important;

    box-shadow: none !important;

    outline: 0 !important;

}





/* ===== V21: Pakta bawah proporsional, tengah kosong, TTD halus ===== */

.pakta-bottom-grid {

    grid-template-columns: minmax(0, 1.18fr) minmax(70px, 0.48fr) minmax(0, 1.05fr) !important;

    align-items: end !important;

}

.pakta-center-blank {

    min-height: 145px;

}

.pakta-signature-canvas {

    touch-action: none;

    cursor: crosshair;

    image-rendering: auto !important;

    background: #ffffff !important;

}

#pakta_signature {

    image-rendering: auto !important;

}

@media print {

    .pakta-signature-canvas {

        image-rendering: auto !important;

    }

}





/* Mode Panitia Display: tetap memakai header & footer website.

   Hanya section statistik yang aktif; nav dan footer tetap tampil supaya branding web tidak hilang. */

body.display-mode { background: #f9fafb !important; }

body.display-mode main { background: #f9fafb !important; }

body.display-mode #view-display { background: #f9fafb !important; opacity: 1; }

body.display-mode nav,

body.display-mode footer { display: block !important; }





/* fix14: admin responsive clean-up */

@media (max-width: 767px) {

  #adminMobileCards details summary { list-style: none; }

  #adminMobileCards details summary::-webkit-details-marker { display: none; }

}

/* ==========================================
   LOADING KHUSUS TABEL ADMIN
   Tidak menutupi seluruh layar
   ========================================== */

.admin-table-loading-cell {
  padding: 0 !important;
  background: #ffffff;
}

.admin-table-loading-row {
  background: #ffffff;
}

.admin-table-loading-box {
  min-height: 250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.admin-table-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}

.admin-table-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(18, 46, 118, 0.16);
  border-top-color: #122e76;
  border-right-color: #f7cb2d;
  border-radius: 50%;
  animation: adminTableSpinnerRotate 0.75s linear infinite;
  will-change: transform;
}

.admin-table-loading-title {
  color: #122e76;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
}

.admin-table-loading-note {
  margin-top: 3px;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 600;
}

.admin-table-loading-mobile {
  min-height: 220px;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.admin-table-error-box {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 18px;
  text-align: center;
  background: #fff7f7;
  border: 1px solid #fecaca;
  border-radius: 20px;
  color: #b91c1c;
}

.admin-table-error-icon {
  font-size: 28px;
  margin-bottom: 10px;
}

.admin-table-error-title {
  font-weight: 900;
  font-size: 14px;
}

.admin-table-error-message {
  margin-top: 5px;
  color: #7f1d1d;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.admin-table-error-button {
  margin-top: 14px;
  padding: 9px 15px;
  border: 0;
  border-radius: 12px;
  background: #122e76;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.admin-table-error-button:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.admin-table-error-button:focus-visible {
  outline: 3px solid rgba(247, 203, 45, 0.55);
  outline-offset: 2px;
}

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

@media (max-width: 767px) {
  .admin-table-loading-box {
    min-height: 210px;
    padding: 25px 14px;
  }

  .admin-table-loading-spinner {
    width: 40px;
    height: 40px;
  }

  .admin-table-loading-title {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-table-loading-spinner {
    animation-duration: 1.5s;
  }

  .admin-table-error-button {
    transition: none;
  }
}