/* ===== RESET ===== */
*{
  box-sizing:border-box;
}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f4f6f9;
  color:#212529;
}

/* ===== CONTAINER ===== */
.container{
  max-width:1100px;
  margin:auto;
  padding:20px;
}

/* ===== CARD ===== */
.card{
  background:#fff;
  border-radius:6px;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
  padding:20px;
  margin-bottom:20px;
}

/* ===== HEADINGS ===== */
h1,h2,h3,h4{
  margin-top:0;
}

/* ===== FORM ===== */
.form-group{
  margin-bottom:12px;
}
label{
  font-weight:bold;
  display:block;
  margin-bottom:4px;
}
.form-control{
  width:100%;
  padding:8px 10px;
  border:1px solid #ced4da;
  border-radius:4px;
}
.form-control:focus{
  outline:none;
  border-color:#0d6efd;
}

/* ===== BUTTON ===== */
.btn{
  padding:8px 14px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:14px;
}
.btn-primary{
  background:#0d6efd;
  color:white;
}
.btn-success{
  background:#198754;
  color:white;
}
.btn-danger{
  background:#dc3545;
  color:white;
}
.btn-secondary{
  background:#6c757d;
  color:white;
}
.btn:hover{
  opacity:.9;
}

/* ===== TABLE ===== */
.table{
  width:100%;
  border-collapse:collapse;
}
.table th,
.table td{
  border:1px solid #dee2e6;
  padding:8px;
  text-align:left;
}
.table th{
  background:#f8f9fa;
}

/* ===== HEADER BAR ===== */
.navbar{
  background:#0d6efd;
  color:white;
  padding:12px 20px;
}
.navbar span{
  font-weight:bold;
}

/* ===== LOGIN BOX ===== */
.login-box{
  max-width:350px;
  margin:100px auto;
}

/* ===== MODAL ===== */
.modal{
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.5);
}
.modal-content{
  background:white;
  max-width:400px;
  margin:120px auto;
  padding:20px;
  border-radius:6px;
}

/* ===== PRINT ===== */
@media print{
  body{
    background:white;
  }
  .no-print{
    display:none;
  }
}

/* ===== LOGIN PAGE ===== */
.login-page{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#f4f6f9;
}

.login-card{
  width:100%;
  max-width:360px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  padding:30px;
}

.login-title{
  text-align:center;
  margin-bottom:20px;
}

.login-title h3{
  margin:0;
}

.login-msg{
  margin-top:10px;
  color:#dc3545;
  text-align:center;
  font-size:14px;
}

/* ===== NAVBAR ACTION ===== */
.navbar-right{
  float:right;
}
.btn-logout{
  background:#dc3545;
  color:white;
  padding:6px 12px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  margin-left:10px;
}
.btn-logout:hover{
  opacity:.9;
}

/* ===== LOGIN SPLIT LAYOUT ===== */
.login-wrapper{
  display:flex;
  gap:30px;
}

.login-side{
  flex:1;
}

.guest-card{
  background:#ffffff;
  border-radius:8px;
  padding:30px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  text-align:center;
}

.guest-card h3{
  margin-top:0;
}

.guest-card p{
  font-size:14px;
  color:#555;
  margin-bottom:20px;
}

/* ===== LOGIN BACKGROUND ===== */
.login-page{
  min-height:100vh;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("bg-login.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
}

/* ===== LOGO ===== */
.login-logo{
  width:200px;
  height:200px;
  margin:0 auto 20px auto;
}
.login-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ===== LOGIN CONTAINER ===== */
.login-container{
  width:100%;
  padding:20px;
}

/* RESPONSIVE CARD */
.login-card{
  width:100%;
  max-width:420px;
  margin:0 auto;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 480px){
  .login-logo{
    width:150px;
    height:150px;
  }
  .login-title h3{
    font-size:18px;
  }
}

/* ===== MODAL MOBILE (CENTER FIXED) ===== */
.modal{
  display:none;
  position:fixed;
  inset:0; /* top right bottom left = 0 */
  background:rgba(0,0,0,.6);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.modal-content{
  background:#fff;
  width:95%;
  max-width:420px;
  padding:20px;
  border-radius:12px;
  position:relative;
  animation:fadeUp .2s ease-out;
}

/* CLOSE BUTTON */
.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  font-size:22px;
  cursor:pointer;
  color:#888;
}
.modal-close:hover{
  color:#000;
}

.modal-footer{
  display:flex;
  gap:10px;
  margin-top:15px;
}

@keyframes fadeUp{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* =========================
   PR VIEWER – ENHANCEMENT
   ========================= */

/* RESET RINGAN */
*{
  box-sizing:border-box;
}

/* PAGE CONTAINER */
.page{
  border:1px solid #ddd;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

/* TITLE */
.page h2{
  text-align:center;
  margin-bottom:14px;
  letter-spacing:1px;
}

/* HEADER INFO */
.page > b,
.page > span{
  font-size:13px;
}

/* TOP ACTION BUTTON */
.top-action button{
  background:#0d6efd;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
}
.top-action button:hover{
  background:#0b5ed7;
}

/* TABLE STYLE */
table{
  font-size:12px;
}
th{
  background:#f2f2f2;
  text-transform:uppercase;
  letter-spacing:.3px;
}
td{
  vertical-align:top;
}

/* SIGNATURE TABLE */
.sign-table{
  margin-top:10px;
}
.sign-table th{
  background:#fafafa;
}
.sign-box{
  vertical-align:top;
  padding-top:6px;
}

/* SIGN IMAGE */
.sign-box img{
  display:block;
  margin:0 auto;
}

/* UPLOAD BUTTON */
.upload-btn{
  display:block;
  margin:6px auto 0;
  font-size:11px;
}

/* PRINT MODE */
@media print{
  .page{
    box-shadow:none;
    border:none;
  }
}

/* ===== STATUS BADGE ===== */
.status-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:20px;
  font-size:12px;
  font-weight:600;
  text-transform:capitalize;
}

.status-menunggu{
  background:#fff3cd;
  color:#856404;
}

.status-diterima{
  background:#d4edda;
  color:#155724;
}

.status-ditolak{
  background:#f8d7da;
  color:#721c24;
}