/* ======================================================
   MOBILE CLEAN (hasil = seperti gambar 2)
   ====================================================== */

:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; }

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

img, video, iframe{ max-width:100%; height:auto; }

.table-wrap, .table-responsive{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
table{ width:100%; }

/* =========================
   MOBILE LAYOUT
   ========================= */
@media (max-width: 768px){

  /* main spacing (biar mirip gambar 2) */
  .as-main.page-content{
    margin-top: 72px !important;
    padding: 0 12px !important;
  }

  /* TOPBAR rapih */
  .topbar, .as-topbar{
    padding: 10px 12px !important;
  }
  .topbar .brand, .as-topbar .brand{
    max-width: 56vw !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* SLIDER: ukuran enak di HP */
  .as-section--slider{ padding: 0 12px !important; }
  .as-slider{ border-radius: 18px !important; overflow:hidden !important; }
  .as-slide{ height: clamp(160px, 36vw, 220px) !important; }
  .as-slide img{
    width:100% !important;
    height:100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display:block !important;
  }
  .as-slider-btn{
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    opacity:.85;
  }

  /* CARD tugas: mirip gambar 2 (thumb | body | kanan) */
  .as-task-card{
    display: grid !important;
    grid-template-columns: 84px 1fr 110px !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    align-items: center !important;
    width:100% !important;
    max-width:100% !important;
  }

  .as-task-thumb{ width:84px !important; min-width:84px !important; }
  .as-task-img{
    width:84px !important;
    height:84px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .as-task-body{ min-width:0 !important; }

  .as-task-title{
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .as-task-subtitle{
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }
  .as-task-meta{
    font-size: 12px !important;
    gap: 10px !important;
  }

  /* sisi kanan: OPEN di atas, tombol kerjakan di bawah */
  .as-task-right{
    display:flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 8px !important;
    width:100% !important;
  }

  .as-status-pill{
    white-space: nowrap !important;
  }

  .as-task-btn{
    width: 100% !important;
    justify-content: center !important;
    text-align:center !important;
    margin-top: 0 !important;
  }

  /* judul section */
  .as-section-title{
    font-size: 20px !important;
    letter-spacing: 2px !important;
  }
}

/* =========================================
   BADGE OPEN/CLOSED: pojok kanan atas CARD
   ========================================= */

/* anchor */
.as-task-card{
  position: relative !important;
}

/* badge nempel ke card (bukan ke thumbnail) */
.as-task-card .as-status-pill{
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 50 !important;
  margin: 0 !important;
}

/* biar area kanan tidak "ngambil tempat" untuk badge */
.as-task-right{
  position: static !important;
}

/* kasih ruang di kanan biar badge tidak nutup teks */
.as-task-body{
  padding-right: 120px;
}

/* mobile tweak */
@media (max-width: 768px){
  .as-task-card .as-status-pill{
    top: 10px !important;
    right: 10px !important;
  }
  .as-task-body{
    padding-right: 110px;
  }
}

/* supaya versi desktop tetap rapi di HP */
@media (max-width: 768px){
  .as-main{
    max-width: 1100px;
    margin: 0 auto;
  }
}