/* Minimal modern yellow highlighter theme - responsive (improved) */
:root{
  --accent: rgba(255, 235, 59, 0.95); /* yellow highlighter */
  --accent-strong: #FFD600;
  --muted: #f6f6f6;
  --text: #222;
  --card-radius: 12px;
  --shadow: 0 8px 28px rgba(0,0,0,0.08);
}
*{box-sizing:border-box}
body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    color: var(--text);

    /* Background image + gradient */
    background-image: 
        linear-gradient(180deg, rgba(205, 204, 204, 0.7), rgba(255, 255, 255, 0.7)), /* gradien semi-transparan */
        url('/images/gunungkelam.png'); /* gambar di belakang */
    
    background-repeat: no-repeat;
    background-size: cover;    /* gambar menutupi seluruh layar */
    background-position: center center; /* gambar di tengah */
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.container{max-width:1100px;margin:28px auto;padding:16px}
.header{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;border-radius:10px;background:#00000;display:flex;align-items:center;justify-content:center;font-weight:700;color:#000;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card{background:rgba(255,255,255,0.98);border-radius:var(--card-radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1;min-width:260px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:#000;color:#fff;text-decoration:none;font-weight:700;cursor:pointer;border:none}
.btn.ghost{background:transparent;border:1px solid #eee;color:var(--text);font-weight:600}
.small{font-size:0.9rem;color:#666}
.lead{font-size:1.05rem}
.qr{width:64px;height:64px;display:block;margin:auto}
@media(max-width:520px){ .qr{width:48px;height:48px} }
/* Responsive QR (global) */
:root{
  --qr-max: 140px;    /* ukuran maksimum QR pada layar besar (ubah sesuai selera) */
  --qr-medium: 110px; /* ukuran medium */
  --qr-small: 72px;   /* ukuran pada layar kecil */
}

/* Container for QR: keeps aspect ratio and centers content */
.qr {
  display:inline-block;
  width: var(--qr-max);
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  padding: 6px;               /* optional padding */
  border-radius: 8px;
  background: rgba(255,255,255,0.98);
}

/* If element contains an <img> */
.qr img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  image-rendering: -webkit-optimize-contrast; /* help with scaling */
}

/* If element contains a canvas (qrcode.js produces a canvas) */
.qr canvas {
  display: block;
  width: 100% !important;   /* make canvas scale to container width */
  height: auto !important;
}
/* --- Navigasi Responsif dengan Animasi Slide --- */


/* Smaller screens */
@media (max-width: 900px){
  :root{ --qr-max: var(--qr-medium); }
}
@media (max-width: 520px){
  :root{ --qr-max: var(--qr-small); }
}

/* If you want a fluid inline variant (e.g. inside table cell) */
.qr.inline { display:inline-flex; align-items:center; justify-content:center; }

/* Table improvements */
table.dataTable{width:100%!important;border-collapse:separate!important;border-spacing:0}
.table{width:100%;border-collapse:collapse;background:transparent}
.table th,.table td{padding:12px 10px;border-bottom:1px solid #f0f0f0;text-align:left;vertical-align:middle}
.table thead th{background:transparent;font-weight:700;color:#333}
.table tbody tr:hover{background:#fffbe6}

/* QR image */
.qr{width:64px;height:64px;object-fit:contain;border-radius:8px;display:block}

/* action group */
.action-group{display:flex;gap:8px;flex-wrap:wrap}

/* forms */
input[type="file"]{padding:6px}
input,select,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #eee;margin-top:6px;margin-bottom:12px}
label{font-weight:700;color:#333}

/* responsive tweaks */
@media(max-width:900px){
  .container{padding:12px }
  .card{ margin-left: 20px;
    margin-right: 20px;}
  
  .qr{width:52px;height:52px}
}
@media(max-width:520px){
  .btn{padding:8px 10px;font-size:0.9rem}
  .logo{width:44px;height:44px}
  .table th,.table td{padding:8px}
}

/* ===========================
   MOBILE BOTTOM NAV - FIXED
=========================== */

.bottom-nav {
  display: none;
}

@media (max-width:768px){

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(6px);
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
  }

  .nav-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 500;
    transition: 0.2s ease;
  }

  .nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
    margin-bottom: 4px;
  }

  .nav-item:hover {
    color: #000;
  }

  .nav-item:active {
    transform: scale(0.92);
  }

  body {
    padding-bottom: 90px;
  }

}
/* ===========================
   Hide Header Buttons on Mobile
=========================== */

@media (max-width:768px){

  /* sembunyikan tombol di header */
  .header .btn {
    display: none !important;
  }

}